/* HostingBaba: self-contained, mobile-first; no scripts or remote assets. */
:root {
  color-scheme: light dark;
  --bg: #f5f6f1; --surface: #ffffff; --surface-2: #edf0e9;
  --ink: #172a25; --ink-2: #3f514b; --muted: #58675f;
  --line: #d5ded5; --accent: #075c4f; --accent-hover: #03483d;
  --accent-soft: #e4f1e9; --on-accent: #ffffff;
  --graphic: #112f27; --graphic-ink: #f2f8ef; --graphic-muted: #b1c7bb;
  --graphic-line: #3d594c; --graphic-highlight: #a6d9b0; --graphic-overlay: #ffffff06;
  --error: #a32926; --error-bg: #fff0ed; --focus: #a04013;
  --shadow: 0 18px 50px -30px #12352b30;
  --wrap: 1280px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101c18; --surface: #172822; --surface-2: #1d3028;
    --ink: #edf3e9; --ink-2: #c3d1c7; --muted: #a9bbb0;
    --line: #344b3e; --accent: #a6ddbc; --accent-hover: #c1edd1;
    --accent-soft: #223e30; --on-accent: #112d21;
    --graphic: #0a1913; --graphic-ink: #f2f8ef; --graphic-muted: #b1c7bb;
    --graphic-line: #3d594c; --graphic-highlight: #a6d9b0; --graphic-overlay: #ffffff06;
    --error: #ffc0b5; --error-bg: #3d2220; --focus: #f3b47a;
    --shadow: 0 18px 50px -30px #00000070;
  }
}
* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
main:focus { outline: none; }
h1, h2, h3, p, dl { margin: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.045em; font-weight: 650; }
h1 { font-size: clamp(2.65rem, 6vw, 5rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); }
h3 { font-size: 1.2rem; letter-spacing: -.025em; }
h1 span { color: var(--accent); }
p { overflow-wrap: break-word; }
strong { font-weight: 650; }
.wrap { width: min(calc(100% - 40px), var(--wrap)); margin-inline: auto; }
.section { padding-block: 64px; }
.page-section { padding-top: 40px; min-height: 60vh; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 700; line-height: 1.6; }
.lead { color: var(--ink-2); font-size: 1.08rem; line-height: 1.7; max-width: 53ch; }
.hint { color: var(--muted); font-size: .83rem; line-height: 1.65; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.small { font-size: .66rem; letter-spacing: .12em; }
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: 10px; left: 10px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 12px 20px; border-radius: 6px; transform: translateY(-200%); }
.skip:focus { transform: translateY(0); }
.site-head { background: var(--bg); border-bottom: 1px solid var(--line); }
.head-inner { padding-block: 18px 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 20px; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 750; font-size: 1.2rem; letter-spacing: -.04em; line-height: 1; }
.brand img { flex-shrink: 0; }
.brand-dot { color: var(--accent); }
.head-note { display: none; font-size: .75rem; color: var(--muted); }
.site-nav { display: flex; width: 100%; justify-content: space-between; gap: 4px; }
.site-nav a { color: var(--muted); text-decoration: none; padding: 8px 10px; font-size: .87rem; font-weight: 550; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }
.hero { position: relative; padding-block: 48px; overflow: hidden; }
.hero-grid { display: grid; gap: 38px; align-items: center; }
.hero-copy .eyebrow { display: flex; gap: 9px; align-items: center; }
.small-mark { width: 7px; height: 7px; display: inline-block; background: var(--accent); border-radius: 1px; }
.hero h1 { margin-top: 20px; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1.04; letter-spacing: -.06em; }
.desktop-break { display: none; }
.hero .lead { margin-top: 24px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 24px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid transparent; border-radius: 6px; min-height: 48px; padding: 13px 19px; text-decoration: none; font-size: .9rem; font-weight: 650; line-height: 1.3; transition: background-color .15s, border-color .15s; }
.btn span[aria-hidden] { font-size: 1.2rem; font-weight: 400; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline { border-color: var(--line); background: var(--surface); color: var(--ink); }
.btn-outline:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn-block { display: flex; width: 100%; justify-content: space-between; }
.entry-price { color: var(--muted); font-size: .82rem; }
.entry-price strong { font-size: 1.2rem; color: var(--ink); }
.hero-hint { margin-top: 18px; font-size: .75rem; }
.server-visual { position: relative; padding: 24px 18px 18px; border: 1px solid var(--line); border-radius: 12px; background-color: var(--surface-2); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 14px 14px; }
.visual-caption { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font: 600 .56rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; padding-bottom: 18px; }
.server-card { border: 1px solid var(--graphic-line); border-radius: 8px; background: var(--graphic); color: var(--graphic-ink); box-shadow: var(--shadow); overflow: hidden; }
.server-top { display: flex; align-items: center; gap: 12px; padding: 24px 20px; border-bottom: 1px solid var(--graphic-line); }
.server-symbol { font-size: 1.8rem; color: var(--graphic-highlight); line-height: 1; }
.server-top .small { color: var(--graphic-muted); }
.server-top h2 { font-size: 1.02rem; letter-spacing: -.02em; margin-top: 6px; }
.server-resources { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 24px 20px; }
.server-resources > div > span { font-size: .69rem; color: var(--graphic-muted); }
.server-resources strong { display: block; font-size: 2.1rem; letter-spacing: -.04em; margin-top: 3px; }
.server-resources small { font-size: .6rem; font-weight: 500; letter-spacing: 0; color: var(--graphic-muted); }
.resource-track { display: flex; gap: 3px; height: 13px; margin-top: 12px; }
.resource-track i { display: block; flex: 1; border-radius: 1px; background: var(--graphic-highlight); }
.server-lines { padding: 0 20px 18px; }
.server-lines > div { display: flex; gap: 14px; justify-content: space-between; padding-block: 9px; border-top: 1px solid var(--graphic-line); font-size: .75rem; }
.server-lines dt { color: var(--graphic-muted); }
.server-lines dd { margin: 0; }
.server-bottom { display: flex; justify-content: space-between; padding: 12px 20px; color: var(--graphic-muted); background: var(--graphic-overlay); font-size: .59rem; gap: 12px; }
.visual-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-size: .77rem; color: var(--ink); }
.note-icon { color: var(--accent); font-size: 1.5rem; line-height: 1.3; }
.visual-note p span { color: var(--muted); font-size: .64rem; }
.facts-strip { border-block: 1px solid var(--line); background: var(--surface); }
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; }
.facts-grid > div { padding: 22px 8px 22px 0; }
.facts-grid > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--line); }
.facts-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.fact-label { display: block; font-size: .68rem; color: var(--muted); margin-bottom: 4px; }
.facts-grid strong { font-size: .78rem; line-height: 1.4; display: block; }
.section-heading { margin-bottom: 30px; display: grid; gap: 18px; }
.section-heading h2 { margin-top: 12px; }
.section-heading > p { max-width: 40ch; color: var(--muted); font-size: .92rem; }
.plan-grid { display: grid; gap: 14px; }
.plan-card { display: flex; flex-direction: column; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.plan-card.popular { border: 2px solid var(--accent); padding: 23px; background: var(--accent-soft); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 25px; }
.plan-top h3 { font-size: 1.02rem; }
.badge { display: inline-block; padding: 4px 6px; border-radius: 3px; color: var(--on-accent); background: var(--accent); font-size: .55rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; line-height: 1.4; }
.price { margin-block: 20px; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; }
.price strong { font-size: 2.2rem; line-height: 1.2; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.price > span { color: var(--muted); font-size: .75rem; }
.specs { margin-bottom: 24px; }
.specs > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .8rem; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-weight: 600; text-align: right; }
.plan-card .btn { margin-top: auto; padding: 12px; font-size: .8rem; }
.under-plans { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.under-plans p { color: var(--muted); font-size: .8rem; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: .88rem; font-weight: 650; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.credibility { border-block: 1px solid var(--line); background: var(--surface-2); }
.credibility-grid { display: grid; gap: 38px; }
.credibility h2 { margin-top: 14px; }
.credibility .lead { margin-block: 24px; font-size: .97rem; max-width: 40ch; }
.proof-list article { display: flex; align-items: flex-start; gap: 22px; padding-block: 24px; border-top: 1px solid var(--line); }
.proof-list h3 { font-size: 1.2rem; }
.proof-list p { margin-top: 9px; color: var(--ink-2); font-size: .91rem; }
.proof-number { font: .74rem ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--accent); margin-top: 2px; }
.closing { padding: 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--accent-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.closing h2 { margin-block: 12px 18px; }
.closing p:not(.eyebrow) { color: var(--ink-2); font-size: .94rem; }
.site-foot { border-top: 1px solid var(--line); background: var(--surface); }
.foot-top { padding-block: 36px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.foot-tagline { color: var(--muted); font-size: .8rem; margin-top: 14px; max-width: 35ch; }
.foot-support { display: flex; flex-direction: column; gap: 8px; }
.foot-support a { color: var(--ink); font-size: .88rem; }
.foot-bottom { border-top: 1px solid var(--line); padding-block: 22px; color: var(--muted); font-size: .7rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot-bottom nav a { display: inline-block; color: var(--muted); padding-block: 4px; }
.page-heading { margin-bottom: 36px; }
.page-heading h1 { margin-block: 14px 22px; }
.page-heading .lead { max-width: 58ch; }
.table-hint { margin-bottom: 12px; }
.table-scroll { position: relative; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.comparison { width: 100%; min-width: 980px; border-spacing: 0; text-align: left; font-size: .88rem; }
.comparison th, .comparison td { padding: 22px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.comparison thead th { background: var(--surface-2); color: var(--muted); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.comparison tr:last-child > * { border-bottom: 0; }
.comparison th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); border-right: 1px solid var(--line); min-width: 136px; }
.comparison thead th:first-child { background: var(--surface-2); }
.comparison .popular-row > * { background: var(--accent-soft); }
.comparison .popular-row th { background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
.comparison .badge { display: block; width: fit-content; margin-top: 6px; }
.table-price { font-weight: 700; font-size: 1.2rem; letter-spacing: -.03em; }
.table-price span { color: var(--muted); font-size: .72rem; font-weight: 400; letter-spacing: 0; }
.comparison .btn { min-height: 44px; padding: 10px 14px; font-size: .8rem; }
.comparison-notes { display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--muted); font-size: .78rem; margin-top: 20px; }
.comparison-notes span { color: var(--accent); margin-right: 6px; }
.info-grid { display: grid; gap: 20px; margin-top: 48px; }
.info-card { border-top: 1px solid var(--line); padding-top: 24px; }
.info-card h2 { font-size: 1.25rem; margin-block: 12px; letter-spacing: -.025em; }
.info-card p { color: var(--ink-2); font-size: .9rem; }
.info-card a { overflow-wrap: anywhere; }
.checkout-progress { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: .72rem; color: var(--muted); }
.checkout-progress li { display: flex; gap: 7px; align-items: center; }
.checkout-progress li > span { font: .68rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.checkout-progress .current { color: var(--accent); font-weight: 650; }
.form-layout { display: grid; gap: 24px; align-items: start; }
.panel { padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.order-form h2 { font-size: 1.4rem; margin-bottom: 30px; }
.field { margin-bottom: 24px; }
.field label { font-size: .84rem; font-weight: 650; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.required-label, .optional-label { color: var(--muted); font-size: .7rem; font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 5px; padding: 12px; color: var(--ink); background: var(--bg); }
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field .hint { margin-top: 7px; font-size: .75rem; }
.field [aria-invalid] { border-color: var(--error); }
.error { color: var(--error); font-size: .84rem; margin-block: 8px; }
.error a { color: var(--error); }
.error-summary { border-left: 3px solid var(--error); padding: 16px; background: var(--error-bg); color: var(--error); font-size: .87rem; margin-bottom: 26px; }
.error-summary ul { margin: 8px 0 0; padding-left: 18px; }
.error-summary a { color: var(--error); }
.payment-note { display: flex; align-items: flex-start; gap: 12px; background: var(--accent-soft); border: 1px solid var(--line); padding: 18px; border-radius: 6px; margin-block: 28px; }
.payment-icon { color: var(--accent); font-size: 1.5rem; line-height: 1; }
.payment-note h3 { font-size: .9rem; letter-spacing: -.01em; }
.payment-note p { font-size: .77rem; color: var(--ink-2); margin-top: 8px; }
.payment-note .error { color: var(--error); }
.submit-reassurance { text-align: center; font-size: .76rem; color: var(--muted); margin-top: 18px; }
.submit-reassurance strong { color: var(--ink); }
.order-policy { font-size: .7rem; text-align: center; margin-top: 16px; }
.order-summary { background: var(--accent-soft); }
.order-summary h2 { font-size: 1.9rem; margin-top: 10px; }
.order-summary .price { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.order-summary .specs > div:first-child { border-top: 0; }
.summary-setup { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.summary-setup p { font-size: .84rem; margin-top: 8px; color: var(--ink-2); }
.order-summary > .hint { margin-top: 20px; }
.receipt-wrap { max-width: 740px; }
.receipt-wrap > h1 { margin-block: 16px 24px; font-size: clamp(2.6rem, 5vw, 4.3rem); }
.receipt-wrap > .lead { margin-bottom: 32px; }
.receipt-ref { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.ref { font: 550 clamp(1.5rem, 4vw, 2.4rem) ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: -.03em; margin-block: 10px; overflow-wrap: anywhere; }
.receipt-details { margin-block: 20px 28px; }
.receipt-details > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 6px; font-size: .87rem; }
.receipt-details dt { color: var(--muted); }
.receipt-details dd { margin: 0; text-align: right; font-weight: 600; }
.pay-now { min-height: 58px; font-size: 1rem; }
.payment-expiry { text-align: center; font-size: .78rem; color: var(--muted); margin-top: 18px; overflow-wrap: anywhere; }
.payment-expiry strong { color: var(--ink); }
.receipt-wait { display: flex; gap: 16px; padding: 20px; background: var(--accent-soft); border-radius: 6px; }
.receipt-wait strong { font-size: .96rem; }
.receipt-wait p { color: var(--ink-2); font-size: .87rem; margin-top: 5px; }
.receipt-next { margin-top: 40px; }
.receipt-next > h2 { font-size: 1.4rem; }
.next-steps { list-style: none; padding: 0; margin-block: 24px; }
.next-steps li { display: flex; gap: 18px; padding-block: 16px; border-top: 1px solid var(--line); }
.step-number { color: var(--accent); font: .75rem ui-monospace, SFMono-Regular, Consolas, monospace; padding-top: 2px; }
.next-steps h3 { font-size: .98rem; }
.next-steps p { font-size: .87rem; color: var(--muted); margin-top: 5px; }
.receipt-help { color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); padding-top: 24px; overflow-wrap: anywhere; }
.faq-layout { display: grid; gap: 10px; }
.faq-contact { padding-top: 24px; margin-top: 32px; border-top: 1px solid var(--line); }
.faq-contact h2 { font-size: 1.15rem; }
.faq-contact p { font-size: .89rem; color: var(--muted); margin-block: 10px 14px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding-block: 24px; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-plus { flex-shrink: 0; color: var(--accent); font: 1.4rem ui-monospace, SFMono-Regular, Consolas, monospace; transition: transform .15s; }
.faq-list details[open] .faq-plus { transform: rotate(45deg); }
.faq-answer { padding-bottom: 24px; color: var(--ink-2); font-size: .95rem; max-width: 65ch; }
.faq-answer p { white-space: pre-line; }
.legal-wrap { max-width: 70ch; }
.legal-wrap h1 { font-size: clamp(2.3rem, 4vw, 3.5rem); margin-top: 16px; }
.updated { color: var(--muted); font-size: .8rem; margin-block: 18px 36px; border-bottom: 1px solid var(--line); padding-bottom: 28px; }
.prose { color: var(--ink-2); line-height: 1.85; }
.prose h2 { color: var(--ink); font-size: 1.45rem; letter-spacing: -.025em; margin-block: 36px 14px; }
.prose h3 { color: var(--ink); font-size: 1.1rem; margin-block: 28px 12px; }
.prose p { margin-block: 14px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin-block: 8px; }
.legal-help { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal-help h2 { font-size: 1.2rem; }
.legal-help p { color: var(--muted); margin-top: 12px; font-size: .9rem; overflow-wrap: anywhere; }
.contact-grid { display: grid; gap: 20px; }
.contact-card h2 { margin-top: 18px; font-size: 1.65rem; }
.contact-email { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block: 26px; font-size: clamp(.9rem, 2vw, 1.15rem); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact-email span { font-size: 1.4rem; flex-shrink: 0; }
.contact-card > p:not(.eyebrow) { color: var(--ink-2); font-size: .9rem; }
.contact-detail { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; font-size: .87rem; }
.contact-detail p { color: var(--muted); margin-top: 8px; }
.contact-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 30px; font-size: .9rem; color: var(--muted); }
.simple-page { max-width: 900px; padding-block: 30px 60px; }
/* Inner-page heading: the same size as Plans and the product pages, never the homepage hero. */
.page-section:has(.loc-grid, .contact-grid, .faq-layout, .st-table) .page-heading h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.12; max-width: 24ch; }
.loc-grid { display: grid; gap: 16px; }
.loc-card h2 { margin-top: 12px; font-size: 1.3rem; }
.loc-serves { margin-top: 10px; color: var(--ink-2); font-size: .9rem; }
.loc-note { margin-top: 8px; color: var(--muted); font-size: .84rem; }
.loc-price { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .86rem; font-weight: 600; color: var(--accent); }
.loc-split { display: grid; gap: 16px; margin-top: 28px; }
.loc-panel h2 { font-size: 1.25rem; }
.loc-panel p { margin-top: 10px; color: var(--ink-2); font-size: .9rem; }
.loc-panel ul { margin: 14px 0 0; padding-left: 1.1em; color: var(--ink-2); font-size: .9rem; }
.loc-panel li { margin-block: 8px; }
@media (min-width: 600px) { .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .loc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .loc-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.simple-page h1 { margin-block: 18px 26px; }
@media (min-width: 600px) {
  .wrap { width: min(calc(100% - 64px), var(--wrap)); }
  .head-inner { padding-block: 20px; }
  .site-nav { width: auto; gap: 8px; }
  .hero { padding-block: 64px; }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-card:last-child { grid-column: 1 / -1; }
  .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .panel { padding: 32px; }
  .closing { padding: 40px; }
  .server-visual { padding: 30px; }
  .visual-caption { font-size: .67rem; }
  .server-top h2 { font-size: 1.2rem; }
  .server-top { padding: 28px; }
  .server-resources { padding: 28px; }
  .server-lines { padding-inline: 28px; }
  .server-lines > div { font-size: .85rem; }
  .server-bottom { padding-inline: 28px; font-size: .66rem; }
  .visual-note { font-size: .88rem; }
  .visual-note p span { font-size: .73rem; }
}
@media (min-width: 900px) {
  .section { padding-block: 88px; }
  .page-section { padding-top: 56px; }
  .head-inner { padding-block: 22px; }
  .head-note { display: block; }
  .site-nav { gap: 20px; }
  .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 60px; }
  .hero { padding-block: 76px 80px; }
  .hero-copy .lead { max-width: 43ch; }
  .desktop-break { display: block; }
  .facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts-grid > div { padding: 24px 24px; border-left: 1px solid var(--line); }
  .facts-grid > div:first-child { padding-left: 0; border-left: 0; }
  .facts-grid > div:nth-child(even) { padding-left: 24px; }
  .facts-grid > div:nth-child(-n+2) { border-bottom: 0; }
  .facts-grid strong { font-size: .88rem; }
  .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
  .credibility-grid { grid-template-columns: 1fr 1.1fr; gap: 100px; }
  .proof-list article:first-child { border-top: 0; padding-top: 0; }
  .closing { padding: 52px 60px; }
  .form-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; max-width: 1080px; }
  .order-summary { position: sticky; top: 28px; }
  .faq-layout { grid-template-columns: 1fr 1.4fr; gap: 80px; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .contact-card { padding: 40px; }
  .foot-bottom { align-items: center; }
  .table-hint { display: none; }
}
@media (min-width: 1200px) {
  .plan-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .plan-card { padding: 22px 18px; }
  .plan-card.popular { padding: 21px 17px; }
  .plan-card:last-child { grid-column: auto; }
  .plan-card .price { display: block; }
  .plan-card .price > span { display: block; margin-top: 6px; }
  .plan-card .price strong { font-size: 2.45rem; }
  .brand { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  body { background: white; color: black; }
  .site-head, .site-foot, .skip, .hero-actions, .btn { display: none; }
  .section { padding-block: 20px; }
  .table-scroll { overflow: visible; }
  .comparison { min-width: 0; font-size: 10px; }
  .comparison th, .comparison td { padding: 8px; }
  .order-summary { position: static; }
  .panel { break-inside: avoid; }
}

/* Compact homepage: products immediately follow the introduction. */
.store-intro { padding-block: 36px 32px; }
.store-intro h1 { margin-block: 12px 16px; max-width: 22ch; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.12; }
.store-intro p:last-child { color: var(--ink-2); font-size: 1rem; max-width: 62ch; }
.store-plans { padding-bottom: 36px; }
.store-plan-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 16px; }
.store-plan-heading h2 { font-size: 1.15rem; letter-spacing: -.025em; }
.store-plan-heading p { color: var(--muted); font-size: .8rem; }
.store-plans .plan-card { padding: 20px 16px; }
.store-plans .plan-card.popular { padding: 19px 15px; }
.store-plans .price { margin-block: 16px; }
.store-plans .specs { margin-bottom: 18px; }
.store-plans .specs > div { padding-block: 8px; }
.store-help { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .83rem; color: var(--muted); }
@media (min-width: 900px) { .store-intro { padding-block: 48px 40px; } }

/* ─── Billing terms and category storefront ────────────────────────────────
   Added alongside the multi-category catalogue. Uses the existing tokens
   only, so it follows light/dark with everything else.                      */

.store-terms { padding: 0 0 6px; }
.term-toggle {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
}
.term-opt {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 18px; border-radius: 999px;
  font-size: .86rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
  white-space: nowrap; transition: background .15s, color .15s;
}
.term-opt:hover { background: var(--surface); color: var(--ink); }
.term-opt.is-on { background: var(--accent); color: var(--on-accent); }
.term-opt small { font-size: .72rem; font-weight: 600; opacity: .85; }
.term-opt.is-on small { opacity: .95; }
.term-note { margin: 12px 0 0; font-size: .82rem; color: var(--muted); }

.price-sub { margin: -6px 0 0; font-size: .8rem; color: var(--muted); }

.foot-products nav { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.foot-products nav a { font-size: .88rem; }

@media (max-width: 560px) {
  .term-toggle { width: 100%; justify-content: stretch; }
  .term-opt { flex: 1 1 auto; justify-content: center; padding: 10px 12px; }
}

/* Cap the catalogue grid at three cards per row. Six plans per family then
   reads as two tidy rows rather than five cramped cards and an orphan.       */
@media (min-width: 900px) {
  .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 620px) and (max-width: 899px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Homepage catalogue: compact cards and clearly separated product families. */
.store-terms { padding-block: 8px 28px; text-align: center; }
.store-terms .term-toggle { justify-content: center; }
.store-terms .term-note { min-height: 1.65em; margin-top: 12px; }
.store-plans[id] { padding-block: 32px 44px; border-top: 1px solid var(--line); }
.store-plans[id]:nth-of-type(even) { background: var(--surface-2); }
.store-plans[id] .store-plan-heading { display: block; margin-bottom: 24px; }
.store-plans[id] .store-plan-heading h2 { font-size: 1.45rem; margin-bottom: 8px; }
.store-plans[id] .plan-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); gap: 16px; }
.store-plans[id] .plan-card:last-child { grid-column: auto; }
.store-plans[id] .plan-top { flex-wrap: wrap; gap: 8px; }
.store-plans[id] .price { display: block; }
.store-plans[id] .price strong { font-size: 2.2rem; }
.store-plans[id] .price > span { display: block; margin-top: 4px; }
@media (max-width: 560px) {
  .store-plans[id] .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .store-plans[id] { padding-block: 28px 36px; }
  .store-terms .term-toggle { border-radius: 18px; }
  .store-terms .term-opt { padding: 10px; gap: 5px; }
}

/* ─── On-site crypto checkout ──────────────────────────────────────────── */
.pay-wrap { max-width: 760px; }
.pay-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; padding: 18px 22px; margin-bottom: 18px; }
.pay-summary strong { display: block; margin-top: 3px; font-size: 1rem; }
.pay-total { color: var(--accent); font-size: 1.15rem !important; }
.pay-panel { padding: 26px; }
.pay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.pay-head h1 { font-size: 1.5rem; margin: 0 0 4px; }
.pay-head .lead { margin: 0; font-size: .9rem; }
.pay-clock { font: 600 1.1rem ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--accent); padding: 6px 12px; background: var(--accent-soft); border-radius: 6px; }
.pay-step { font-size: .95rem; margin: 0 0 12px; }

.coin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 18px; }
.coin { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: border-color .12s, background .12s; }
.coin:hover { border-color: var(--accent); }
.coin input { position: absolute; opacity: 0; pointer-events: none; }
.coin:has(input:checked) { border: 2px solid var(--accent); background: var(--accent-soft); padding: 12px 14px; }
.coin:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.coin-name { font-weight: 650; font-size: .95rem; }
.coin-net { font-size: .72rem; color: var(--muted); letter-spacing: .04em; }
.coin-note { font-size: .7rem; font-weight: 600; color: var(--accent); }

.pay-body { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.pay-qr { line-height: 0; }
.pay-fields { flex: 1 1 280px; display: flex; flex-direction: column; gap: 14px; }
.pay-field .eyebrow { display: block; margin-bottom: 5px; }
.pay-value { display: block; padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; font: .85rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--ink); word-break: break-all; user-select: all; }
.pay-memo .pay-value { border-color: var(--error); }
.pay-memo .error { margin: 6px 0 0; font-size: .78rem; }

.pay-status { display: flex; align-items: center; gap: 9px; margin-top: 20px; padding: 13px 16px; background: var(--surface-2); border-radius: 8px; font-size: .86rem; color: var(--ink-2); }
.pay-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; animation: pay-pulse 1.8s ease-in-out infinite; }
@keyframes pay-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pay-dot { animation: none; } }

.pay-switch { margin-top: 18px; }
.pay-switch summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.pay-switch summary:hover { color: var(--accent); }
.pay-switch .coin-grid { margin-top: 14px; }
.pay-foot { margin-top: 16px; }
.pay-help { margin-top: 18px; text-align: center; }
.btn-pay { margin-top: 2px; }

@media (max-width: 899px) {
  body:has(.store-intro) .site-nav { flex-wrap: wrap; justify-content: flex-start; }
}

/* Balanced footer with a compact two-column product list. */
.site-foot .foot-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 36px; align-items: start; }
.site-foot .foot-tagline { max-width: 32ch; line-height: 1.7; }
.site-foot .foot-products nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin-top: 14px; }
.site-foot .foot-products nav a { text-decoration: none; line-height: 1.5; }
.site-foot .foot-products nav a:hover { text-decoration: underline; }
.site-foot .foot-support { gap: 14px; min-width: 0; }
.site-foot .foot-support a { overflow-wrap: anywhere; text-underline-offset: .25em; }
.site-foot .foot-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 20px; align-items: center; }
.site-foot .foot-bottom nav { gap: 4px 18px; }
@media (min-width: 700px) {
  .site-foot .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; }
  .site-foot .foot-support { grid-column: 1 / -1; }
  .site-foot .foot-bottom { grid-template-columns: 1fr auto; }
  .site-foot .foot-bottom nav { grid-row: 2; grid-column: 1 / -1; }
}
@media (min-width: 1050px) {
  .site-foot .foot-top { grid-template-columns: 1.15fr 1.25fr 1fr; gap: 48px; padding-block: 40px; }
  .site-foot .foot-support { grid-column: auto; }
  .site-foot .foot-bottom { grid-template-columns: 1fr auto 1fr; gap: 24px; }
  .site-foot .foot-bottom nav { grid-row: auto; grid-column: auto; justify-content: center; }
  .site-foot .foot-bottom > span { text-align: right; }
}

/* Shared catalogue typography and cards on every product page. */
.page-section:has(.plan-grid, .comparison) .page-heading h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.12; max-width: 24ch; }
.page-section:has(.plan-grid, .comparison) .lead { font-size: 1rem; }
.page-section:has(.plan-grid) .term-toggle { display: flex; width: fit-content; margin: 0 auto 32px; justify-content: center; }
.page-section .plan-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); gap: 16px; }
.page-section .plan-card { padding: 20px 16px; }
.page-section .plan-card.popular { padding: 19px 15px; }
.page-section .plan-card:last-child { grid-column: auto; }
.page-section .plan-top { flex-wrap: wrap; gap: 8px; }
.page-section .plan-top h2 { font-size: 1.02rem; letter-spacing: -.025em; }
.page-section .plan-card .price { display: block; margin-block: 16px; }
.page-section .plan-card .price strong { font-size: 2.2rem; }
.page-section .plan-card .price > span { display: block; margin-top: 4px; }
.page-section .plan-card .specs { margin-bottom: 18px; }
.page-section .plan-card .specs > div { padding-block: 8px; }
@media (max-width: 899px) { .site-nav { flex-wrap: wrap; justify-content: flex-start; } }
@media (max-width: 560px) {
  .page-section .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .page-section:has(.plan-grid) .term-toggle { width: 100%; border-radius: 18px; }
}

/* Test-mode banner. Deliberately hard to miss — a live site should never
   show this, so if it appears the environment is wrong.                    */
.test-banner { padding: 9px 16px; background: var(--error); color: #fff; text-align: center; font-size: .84rem; letter-spacing: .01em; }
.test-banner strong { letter-spacing: .08em; }
.test-banner code { background: rgba(255,255,255,.18); padding: 1px 6px; border-radius: 4px; font-size: .95em; }

/* Consistent centred content and side gutters across the storefront. */
:root { --wrap: 1180px; }
.wrap { width: min(calc(100% - clamp(40px, 8vw, 128px)), var(--wrap)); margin-inline: auto; }
/* Start, not center: the tracks are capped at 260px so a centred grid sits
   inboard of the section heading, and the two no longer share a left edge. */
.store-plans[id] .plan-grid,
.page-section .plan-grid { justify-content: start; }
@media (min-width: 600px) {
  .wrap { width: min(calc(100% - clamp(64px, 8vw, 128px)), var(--wrap)); }
}
@media (min-width: 900px) {
  .site-head .head-inner { gap: 16px 24px; }
  .site-nav { gap: 8px; flex-wrap: wrap; }
}

/* Spacious footer with a dedicated legal column. */
.site-foot .foot-top { padding-block: 56px; gap: 36px; }
.site-foot .foot-legal nav { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.site-foot .foot-legal nav a { font-size: .88rem; text-decoration: none; }
.site-foot .foot-legal nav a:hover { text-decoration: underline; }
.site-foot .foot-bottom { padding-block: 28px; }
@media (min-width: 700px) {
  .site-foot .foot-support { grid-column: auto; }
}
@media (min-width: 1050px) {
  .site-foot .foot-top { grid-template-columns: 1.1fr 1.2fr .9fr 1.1fr; gap: 36px; padding-block: 64px; }
  .site-foot .foot-products nav { grid-template-columns: 1fr; }
  .site-foot .foot-bottom { grid-template-columns: 1fr 1fr; }
}

/* Identical billing controls on home and product pages. */
.term-toggle { width: min(100%, 520px); display: flex; margin-inline: auto; justify-content: center; }
.term-toggle .term-opt { flex: 1 1 0; justify-content: center; padding: 10px 12px; font-size: .86rem; }
.page-section:has(.plan-grid) .term-toggle { width: min(100%, 520px); }
@media (max-width: 560px) {
  .term-toggle .term-opt { flex-direction: column; align-items: center; gap: 2px; white-space: normal; }
}

/* Test mode only. Deliberately plain — these controls must never look like
   part of the real checkout. */
.pay-sim { margin-top: 20px; padding: 16px; border: 1px dashed var(--error); border-radius: var(--radius); background: var(--error-bg); }
.pay-sim .btn { margin-bottom: 8px; }
.pay-sim .hint { margin: 4px 0 0; }

/* Announcement strip under the header, shown when test mode is off. Brand
   green, not red: red stays reserved for the TEST MODE warning, so a site
   left in test mode by mistake still stands out instead of blending in. */
.announce-bar { padding: 9px 16px; background: var(--accent); color: var(--on-accent); text-align: center; font-size: .84rem; letter-spacing: .01em; }
.announce-bar strong { letter-spacing: .08em; }

/* Order page: a form, not a landing page.
   The heading already carried a `compact` class that was never given a rule,
   so the h1 fell through to the global display size — up to 5rem — and pushed
   the form itself below the fold. This is that missing rule, plus tighter
   form spacing. Scoped to the order page so other pages keep their air. */
.page-heading.compact { margin-bottom: 22px; }
.page-heading.compact h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.1; letter-spacing: -.03em; margin-block: 6px 12px; }
.page-heading.compact h1 br { display: none; }
.page-heading.compact .lead { font-size: .92rem; max-width: 54ch; }

.page-section:has(.order-form) { padding-top: 28px; padding-bottom: 48px; }
.page-section:has(.order-form) .checkout-progress { margin-bottom: 18px; }
.order-form h2 { margin-bottom: 20px; }
.order-form .field { margin-bottom: 18px; }
.order-form .field textarea { min-height: 84px; }
.order-form .payment-note { margin-block: 20px; padding: 14px; }
.order-form .submit-reassurance { margin-top: 14px; }

/* Select fields: replace the browser's default arrow with one that matches
   the rest of the form. The chevron is an inline SVG background, so it needs
   a second copy for dark mode — a data URI cannot read a CSS variable. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23172a25' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.field select::-ms-expand { display: none; }

@media (prefers-color-scheme: dark) {
  .field select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23edf3e9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* Coin tiles carry a small mark. Letterforms on the coin's own colour rather
   than copied logo artwork: nothing is fetched from a third party on a
   payment page, and there is no image to go stale. The tile becomes a grid so
   the mark sits beside the name instead of pushing it down. */
.coin { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: center; }
.coin .coin-mark { grid-row: 1 / span 2; }
.coin-name, .coin-net, .coin-note { grid-column: 2; }
.coin-mark {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 700; line-height: 1;
  color: #fff; background: var(--muted);
}
.c-btc  { background: #f7931a; }
.c-eth  { background: #627eea; }
.c-usdt { background: #26a17b; }
.c-usdc { background: #2775ca; }
.c-xmr  { background: #ff6600; }
.c-ltc  { background: #345d9d; }
.c-trx  { background: #ef0027; }
.c-sol  { background: #7b4ae2; }
.c-bnb  { background: #f0b90b; color: #2b2300; }
.c-doge { background: #c2a633; }

/* Order summary strip: solid brand green. Uses --accent/--on-accent rather
   than literal green-on-white, so dark mode inverts correctly instead of
   putting white text on a pale green panel. */
.pay-summary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pay-summary .eyebrow { color: var(--on-accent); opacity: .78; }
.pay-summary strong { color: var(--on-accent); }
.pay-summary .pay-total { color: var(--on-accent); font-weight: 700; }

/* Payment QR. Rendered by us from the order's own address, so the checkout
   makes no third-party request. White plate behind it in both themes — a QR
   on a dark background will not scan. */
.pay-qr { text-align: center; }
/* One plate, not two. The white background is not decoration — a QR on a dark
   surface will not scan — but the surrounding border was a second box drawn
   around the first. margin-inline centres it; text-align cannot, because the
   image is a block. */
.pay-qr img {
  display: block; margin-inline: auto;
  width: 190px; height: 190px; padding: 10px;
  background: #fff; border-radius: 10px;
}
.pay-qr .hint { margin-top: 8px; line-height: 1.5; }
@media (min-width: 720px) { .pay-body { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; } }

/* On a phone the QR is the primary control — it should be the thing you
   point a camera at, not a thumbnail in the corner. */
@media (max-width: 719px) {
  .pay-qr { width: 100%; margin-bottom: 4px; }
  .pay-qr img { width: 250px; height: 250px; padding: 12px; }
}

/* Credentials panel on the order-complete page. This is the thing the
   customer actually came for, so it leads the page and the values are
   monospaced and selectable rather than prose. */
.creds { margin-bottom: 20px; border-left: 3px solid var(--accent); }
.creds h2 { font-size: 1.25rem; margin-bottom: 18px; }
.cred-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 22px; }
.cred-list > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 11px 14px; background: var(--surface); }
.cred-list dt { font-size: .78rem; color: var(--muted); }
.cred-list dd { margin: 0; font-size: .9rem; font-weight: 600; }
.cred-list code { font-size: .88rem; background: var(--surface-2); padding: 3px 8px; border-radius: 4px; user-select: all; }
.cred-how { padding: 14px 16px; background: var(--surface-2); border-radius: 6px; margin-bottom: 18px; }
.cred-how h3 { font-size: .92rem; margin-bottom: 8px; }
.cred-how p { font-size: .84rem; color: var(--ink-2); }
.cred-cmd code { display: block; padding: 10px 12px; background: var(--graphic); color: var(--graphic-ink); border-radius: 5px; font-size: .88rem; user-select: all; }
.cred-warn { font-size: .82rem; color: var(--error); background: var(--error-bg); border-left: 3px solid var(--error); padding: 12px 14px; border-radius: 0 5px 5px 0; }
.receipt-details .hint { display: block; font-weight: 400; margin-top: 2px; }

/* Customer panel and account pages. */
.narrow-wrap { width: min(calc(100% - clamp(40px, 8vw, 128px)), 520px); margin-inline: auto; }
.panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.next-up { margin-bottom: 20px; }
.next-up h2 { font-size: 1.2rem; margin-bottom: 10px; }
.next-up p { font-size: .9rem; color: var(--ink-2); margin-bottom: 12px; }
.srv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.srv-head h2 { font-size: 1.15rem; }
.srv-live { background: var(--accent); color: var(--on-accent); }
.srv-pending { margin-bottom: 16px; }
.srv-pending p { font-size: .88rem; color: var(--ink-2); margin-bottom: 12px; }

/* Mobile navigation: a hamburger driven by a hidden checkbox.
   Not <details>: Chrome hides a closed details' content through its shadow
   slot rather than through `display`, so CSS cannot force it open again on
   desktop — the nav vanished entirely above 900px. A checkbox has no such
   hidden behaviour, so the same markup serves both layouts. No JavaScript. */
.nav-checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-burger {
  order: 2; margin-left: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  /* Square icon-only button. 44px keeps it a comfortable touch target even
     though the bars themselves are small. */
  width: 44px; height: 44px; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); background: var(--surface); user-select: none;
}
.nav-burger:hover { border-color: var(--accent); }
.nav-checkbox:focus-visible + .nav-burger { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Three bars; the middle one is the element itself. */
.burger, .burger::before, .burger::after {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: currentColor; content: ''; position: relative;
}
.burger::before { top: -5px; }
.burger::after  { top: 3px; }
.nav-checkbox:checked + .nav-burger .burger { background: transparent; }
.nav-checkbox:checked + .nav-burger .burger::before { top: 0; transform: rotate(45deg); }
.nav-checkbox:checked + .nav-burger .burger::after  { top: -2px; transform: rotate(-45deg); }

@media (max-width: 899px) {
  .site-nav { order: 3; width: 100%; display: none; }
  .nav-checkbox:checked ~ .site-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    margin-top: 12px; border-top: 1px solid var(--line);
  }
  .nav-checkbox:checked ~ .site-nav a {
    padding: 13px 2px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent;
  }
  .nav-checkbox:checked ~ .site-nav a[aria-current] {
    border-bottom-color: var(--line); border-left-color: var(--accent); padding-left: 10px;
  }
}

@media (min-width: 900px) {
  .nav-burger { display: none; }
  .site-nav { display: flex; }
}

/* Two-tier header: account actions on top, products in a coloured strip
   underneath. The strip is brand green, not the warning red — red stays
   reserved for TEST MODE so a live site left in test mode still stands out. */
.account-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.account-nav a { color: var(--muted); text-decoration: none; padding: 8px 10px; font-size: .85rem; font-weight: 550; border-radius: 6px; }
.account-nav a:hover { color: var(--ink); }
.account-nav a[aria-current] { color: var(--accent); }
.account-nav .acct-primary {
  background: var(--accent); color: var(--on-accent); padding: 9px 15px; font-weight: 650;
}
.account-nav .acct-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.account-nav .acct-primary[aria-current] { color: var(--on-accent); }

.nav-strip { background: var(--accent); }
.nav-strip .site-nav { gap: 2px; width: auto; justify-content: flex-start; flex-wrap: wrap; }
.nav-strip .site-nav a {
  color: var(--on-accent); opacity: .85; padding: 11px 14px;
  border-bottom: 2px solid transparent; font-size: .86rem;
}
.nav-strip .site-nav a:hover { opacity: 1; color: var(--on-accent); }
.nav-strip .site-nav a[aria-current] {
  opacity: 1; color: var(--on-accent); border-bottom-color: var(--on-accent); font-weight: 650;
}

@media (max-width: 899px) {
  /* Both navs hide behind the one hamburger. */
  .account-nav { display: none; }
  .nav-strip { display: none; }
  .nav-checkbox:checked ~ .head-inner .account-nav {
    display: flex; order: 3; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; margin: 10px 0 0; border-top: 1px solid var(--line);
  }
  .nav-checkbox:checked ~ .head-inner .account-nav a {
    padding: 13px 2px; border-bottom: 1px solid var(--line); border-radius: 0;
  }
  .nav-checkbox:checked ~ .head-inner .account-nav .acct-primary {
    margin-top: 10px; border-radius: 7px; text-align: center; border-bottom: 0;
  }
  .nav-checkbox:checked ~ .nav-strip { display: block; }
  .nav-strip .site-nav { display: flex; flex-direction: column; align-items: stretch; }
  .nav-strip .site-nav a { border-bottom: 1px solid rgba(255,255,255,.14); }
  .nav-strip .site-nav a[aria-current] { border-bottom-color: rgba(255,255,255,.14); border-left: 3px solid var(--on-accent); padding-left: 11px; }
}

/* Billing term chooser on the order form. A radio group styled as cards, so
   it works with JavaScript off — the radio is what the server reads. */
.field-label { font-size: .84rem; font-weight: 650; display: block; margin-bottom: 9px; }
.term-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.term-pick {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; transition: border-color .12s, background .12s;
}
.term-pick:hover { border-color: var(--accent); }
.term-pick input { position: absolute; opacity: 0; pointer-events: none; }
.term-pick.is-on, .term-pick:has(input:checked) { border: 2px solid var(--accent); background: var(--accent-soft); padding: 11px 9px; }
.term-pick:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.term-pick-name  { font-size: .82rem; font-weight: 650; }
.term-pick-price { font-size: .78rem; color: var(--ink-2); }
.term-pick-save  { font-size: .7rem; color: var(--accent); font-weight: 650; }
@media (max-width: 420px) { .term-choice { grid-template-columns: 1fr; } }

/* Order summary: the amount actually leaving the customer's wallet is the
   headline. The monthly equivalent is useful for comparison but it is not
   what they are about to send, so it sits underneath in small type. */
.due-label { margin-bottom: 2px; }
.order-summary .due-now { margin-bottom: 6px; }
.order-summary .due-now strong { font-size: 2.6rem; letter-spacing: -.04em; line-height: 1; }
.order-summary #sum-breakdown { font-size: .82rem; color: var(--ink-2); }

/* On a single-column layout the summary followed the form, so on a phone the
   customer reached "Place order" before ever seeing what they were buying.
   Source order stays form-first for desktop and for screen readers reading
   the page as a document; on narrow screens the summary moves to the top. */
/* Desktop keeps the full summary in the right-hand column, so the review
   block is redundant there. */
.order-review { display: none; }

@media (max-width: 899px) {
  /* Top of the page: a short reminder of what is being bought, no more. The
     detail belongs next to the button, not 2,000 pixels above it. */
  .order-summary { order: -1; }
  .order-summary .specs,
  .order-summary .summary-setup,
  .order-summary .text-link,
  .order-summary > .hint { display: none; }
  .order-summary .due-now strong { font-size: 1.9rem; }
  .order-summary #sum-breakdown { margin-bottom: 0; }

  /* Just above "Place order": the full picture of what they configured, so
     nobody buys the wrong operating system or the wrong country. */
  .order-review {
    display: block; margin-block: 24px 18px; padding: 16px 18px;
    background: var(--accent-soft); border: 1px solid var(--accent);
    border-radius: 8px;
  }
  .order-review h3 { font-size: .95rem; margin-bottom: 12px; }
  .review-list { display: grid; gap: 1px; }
  .review-list > div {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 4px 14px; padding-block: 8px;
    border-bottom: 1px solid var(--line);
  }
  .review-list dt { font-size: .78rem; color: var(--muted); }
  .review-list dd { margin: 0; font-size: .86rem; font-weight: 650; text-align: right; }
  .review-total {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-top: 14px;
  }
  .review-total span { font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .review-total strong { font-size: 1.7rem; letter-spacing: -.03em; }
  .review-note { font-size: .78rem; color: var(--ink-2); margin-top: 4px; }
}

/* Under five minutes the clock turns red — the customer needs to know the
   window is closing before the address stops being valid. */
.pay-clock.is-urgent { background: var(--error-bg); color: var(--error); }

/* Customer dashboard. */
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.stat {
  padding: 16px 18px; background: var(--accent); border: 1px solid var(--accent);
  border-radius: 9px; display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; transition: background .12s, transform .12s;
}
.stat:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.stat:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.stat-num { font-size: 1.7rem; font-weight: 650; letter-spacing: -.035em; line-height: 1; color: var(--on-accent); }
.stat-label { font-size: .75rem; color: var(--on-accent); opacity: .8; letter-spacing: .05em; text-transform: uppercase; }
.action-needed {
  background: var(--accent-soft); border-left: 3px solid var(--accent); color: var(--ink);
  padding: 16px 18px; margin-bottom: 20px; border-radius: 0 7px 7px 0;
}
.action-needed p { font-size: .86rem; color: var(--ink-2); margin: 6px 0 12px; }
@media (max-width: 719px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 13px 14px; }
  .stat-num { font-size: 1.4rem; }
  .panel-actions { width: 100%; }
  .panel-actions .btn { flex: 1; text-align: center; justify-content: center; }
}

/* Account pages are forms, not landing pages — the heading should not be the
   loudest thing on screen. */
.auth-h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -.025em; margin-block: 6px 10px; }
/* The order-status headings were display-sized too. They are status messages,
   not a landing page. */
.receipt-wrap > .receipt-h1 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-block: 6px 12px; }
.narrow-wrap .lead { font-size: .95rem; margin-bottom: 20px; }

/* Test mode is now a small chip in the header rather than a full-width bar.
   It stays red and stays next to the logo: the loud warning is gone, but the
   signal must not be. The checkout keeps its full warning, because that is
   the page where someone could otherwise believe they are really paying. */
.test-chip {
  display: inline-flex; align-items: center; margin-left: 12px;
  padding: 3px 9px; border-radius: 20px;
  background: var(--error-bg); color: var(--error);
  border: 1px solid var(--error);
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 480px) { .test-chip { margin-left: 8px; font-size: .62rem; padding: 2px 7px; } }

/* Password fields: show/hide button and live feedback. Both are added by
   script, so the markup stays clean and no-JS visitors see a plain field. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 46px !important; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--muted); padding: 0;
}
.pw-eye:hover { color: var(--ink); background: var(--surface-2); }
.pw-eye:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pw-note { font-size: .78rem; margin-top: 7px; display: flex; align-items: center; gap: 6px; }
.pw-note::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pw-note:empty { display: none; }
.pw-note.is-bad  { color: var(--error); }
.pw-note.is-ok   { color: var(--ink-2); }
.pw-note.is-good { color: var(--accent); }

/* Account pages: a tighter, card-led layout rather than a wide form page. */
.auth-card { padding: 28px 26px; }
.auth-card .field:last-of-type { margin-bottom: 22px; }
.auth-foot { margin-top: 18px; text-align: center; font-size: .85rem; color: var(--muted); }
.auth-foot a { font-weight: 600; }
.auth-aside { margin-top: 20px; padding: 14px 16px; background: var(--surface-2); border-radius: 8px; font-size: .8rem; color: var(--ink-2); }
.auth-aside strong { color: var(--ink); }
@media (max-width: 560px) { .auth-card { padding: 22px 18px; } }

/* The order page ended almost flush against the footer. Give the content
   room to finish before the footer starts. */
.page-section:has(.order-form) { padding-bottom: 72px; }
@media (max-width: 719px) { .page-section:has(.order-form) { padding-bottom: 48px; } }

/* Short footer once signed in. */
.site-foot.is-compact .foot-bottom { padding-block: 22px; border-top: 0; }

/* Signed-in chrome. The storefront sells; the account area is a tool, so it
   gets a quieter surface and its own navigation. */
.site-head.is-account { background: var(--surface); }
.acct-who {
  font-size: .82rem; color: var(--muted); max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 4px;
}
.acct-signout button {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 13px; font-size: .82rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer; font-family: inherit;
}
.acct-signout button:hover { border-color: var(--accent); color: var(--ink); }
.nav-strip.is-account { background: var(--graphic); }
.nav-strip.is-account .site-nav a { color: var(--graphic-ink); }
.nav-strip.is-account .site-nav a[aria-current] { border-bottom-color: var(--graphic-highlight); color: #fff; }

/* A distinct page surface, so being inside the account looks different from
   browsing the shop. */
body:has(.site-head.is-account) { background: var(--surface-2); }
/* …but not the green checkout summary: forcing it white left its white text
   invisible for anyone signed in. */
body:has(.site-head.is-account) .panel:not(.pay-summary) { background: var(--surface); }
@media (max-width: 899px) {
  .acct-who { display: none; }
  .nav-checkbox:checked ~ .head-inner .acct-signout { width: 100%; margin-top: 10px; }
  .nav-checkbox:checked ~ .head-inner .acct-signout button { width: 100%; padding: 12px; }
}

/* In-account plan picker. A table, not sales cards — a signed-in customer
   has already chosen to buy and only needs to compare and click. */
.dash-terms { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.dash-terms .term-pick { flex-direction: row; align-items: center; gap: 8px; text-decoration: none; }
.dash-cat { margin-bottom: 18px; }
.dash-cat h2 { font-size: 1.1rem; }
.dash-cat > .hint { margin-bottom: 14px; }
.dash-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.dash-table th {
  text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; padding: 0 12px 9px 0; border-bottom: 1px solid var(--line);
}
.dash-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-table .hint { display: inline; margin-left: 2px; }
.dash-buy { text-align: right; padding-right: 0 !important; }
.dash-buy .btn { padding: 8px 15px; font-size: .82rem; }
@media (max-width: 719px) {
  .dash-table { font-size: .8rem; }
  .dash-table th:nth-child(3), .dash-table td:nth-child(3) { display: none; }
}

/* No divider above the help line inside the account — the card edge already
   separates it. */
body:has(.site-head.is-account) .receipt-help { border-top: 0; padding-top: 0; margin-top: 18px; }

/* The table sits inside a panel that already has a border, so the scroll
   wrapper's own border drew a second box around it. */
.dash-cat .table-scroll { border: 0; border-radius: 0; background: none; }

/* Account layout: fixed menu on the left, content on the right. */
.dash-page { padding-top: 26px; }
.dash-layout { display: grid; gap: 22px; align-items: start; }
.dash-side { display: flex; flex-direction: column; gap: 14px; }
.dash-nav { display: flex; flex-direction: column; gap: 3px; }
.dash-link {
  display: block; padding: 11px 13px; border-radius: 8px; text-decoration: none;
  border-left: 3px solid transparent; transition: background .12s;
}
.dash-link:hover { background: var(--surface); }
.dash-link.is-on { background: var(--surface); border-left-color: var(--accent); }
.dash-link-name { display: block; font-size: .88rem; font-weight: 650; color: var(--ink); }
.dash-link-sub  { display: block; font-size: .74rem; color: var(--muted); margin-top: 1px; }
.dash-link.is-on .dash-link-name { color: var(--accent); }
.dash-signout button {
  width: 100%; background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; font-size: .83rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer; font-family: inherit;
}
.dash-signout button:hover { border-color: var(--accent); color: var(--ink); }
.dash-main { min-width: 0; }

@media (min-width: 900px) {
  .dash-layout { grid-template-columns: 232px minmax(0, 1fr); gap: 32px; }
  .dash-side { position: sticky; top: 24px; }
}

/* Narrow screens: the menu becomes a scrollable row above the content. */
@media (max-width: 899px) {
  .dash-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .dash-link {
    flex: none; border-left: 0; border-bottom: 2px solid transparent;
    border-radius: 7px; padding: 9px 12px; background: var(--surface);
  }
  .dash-link.is-on { border-left: 0; border-bottom-color: var(--accent); }
  .dash-link-sub { display: none; }
  .dash-signout { display: none; }   /* sign out stays in the header on mobile */
}

/* In-dashboard help and support. */
.faq-item { margin-bottom: 10px; padding: 0; }
.faq-item > summary {
  list-style: none; cursor: pointer; padding: 15px 18px;
  font-size: .92rem; font-weight: 650; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: '+'; font-size: 1.5rem; line-height: 1; color: var(--muted); font-weight: 300; }
.faq-item[open] > summary::after { content: '–'; }
.faq-item > p { padding: 0 18px 16px; font-size: .87rem; color: var(--ink-2); }
.dash-h2 { font-size: 1.05rem; margin-bottom: 14px; }

/* Servers nested under Dashboard, the way a hosting panel nests its
   sub-sections. A <details> so it collapses with no script. */
.dash-group { display: flex; flex-direction: column; }
.dash-sub { margin: 2px 0 4px; }
.dash-sub > summary {
  list-style: none; cursor: pointer; padding: 8px 13px 8px 16px;
  font-size: .75rem; font-weight: 650; color: var(--muted);
  display: flex; align-items: center; gap: 8px; border-radius: 7px;
}
.dash-sub > summary:hover { background: var(--surface); color: var(--ink); }
.dash-sub > summary::-webkit-details-marker { display: none; }
/* A drawn chevron rather than a text glyph: a character at .65rem was almost
   invisible and impossible to hit on a phone. */
.dash-sub > summary::before {
  content: ''; width: 9px; height: 9px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin-left: 3px; margin-top: -3px;
  transition: transform .15s;
}
.dash-sub[open] > summary::before { transform: rotate(45deg); margin-top: -5px; }
.dash-sub-list { display: flex; flex-direction: column; gap: 1px; }
.dash-server {
  display: grid; grid-template-columns: auto 1fr; gap: 1px 8px;
  padding: 7px 13px 7px 30px; border-radius: 7px; text-decoration: none;
  border-left: 3px solid transparent;
}
.dash-server:hover { background: var(--surface); border-left-color: var(--line); }
.dash-server .dot { width: 7px; height: 7px; border-radius: 50%; grid-row: 1 / span 2; align-self: center; }
.dot.is-live { background: var(--accent); }
.dot.is-wait { background: var(--error); }
.dot.is-busy { background: var(--muted); }
.dash-server-name { font-size: .81rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-server-meta { font-size: .7rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
@media (max-width: 899px) { .dash-sub { display: none; } }

/* Support tickets. */
.ticket-list { display: flex; flex-direction: column; gap: 1px; }
.ticket-row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 13px 2px; border-bottom: 1px solid var(--line); text-decoration: none;
}
.ticket-row:last-child { border-bottom: 0; }
.ticket-sub { font-size: .9rem; font-weight: 650; color: var(--ink); }
.ticket-meta { grid-column: 1; font-size: .74rem; color: var(--muted); }
.ticket-state {
  grid-row: 1 / span 2; align-self: center; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
}
.ticket-state.is-open     { background: var(--error-bg); color: var(--error); }
.ticket-state.is-answered { background: var(--accent-soft); color: var(--accent); }
.ticket-state.is-closed   { background: var(--surface-2); color: var(--muted); }
.ticket-new { padding: 0; margin-bottom: 14px; }
.ticket-new > summary {
  list-style: none; cursor: pointer; padding: 15px 18px;
  font-size: .92rem; font-weight: 650; display: flex; align-items: center; justify-content: space-between;
}
.ticket-new > summary::-webkit-details-marker { display: none; }
.ticket-new > summary::after { content: '+'; font-size: 1.5rem; line-height: 1; color: var(--muted); font-weight: 300; }
.ticket-new[open] > summary::after { content: '–'; }
.ticket-form { padding: 0 18px 18px; }
.thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.msg { padding: 13px 15px; border-radius: 9px; background: var(--surface-2); }
.msg.is-staff { background: var(--accent-soft); border-left: 3px solid var(--accent); }
.msg header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: .75rem; color: var(--muted); }
.msg p { font-size: .88rem; color: var(--ink-2); }

/* Services table on the dashboard. */
.svc-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.svc-table th {
  text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; padding: 0 12px 9px 0; border-bottom: 1px solid var(--line);
}
.svc-table td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.svc-table tr:last-child td { border-bottom: 0; }
.svc-table tr:target { background: var(--accent-soft); }
.svc-sub { display: block; font-size: .74rem; color: var(--muted); font-weight: 400; margin-top: 2px; }
.svc-state {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.svc-state.is-live      { background: var(--accent-soft); color: var(--accent); }
.svc-state.is-new       { background: var(--error-bg); color: var(--error); }
.svc-state.is-paid,
.svc-state.is-provisioning { background: var(--surface-2); color: var(--ink-2); }
.svc-state.is-cancelled,
.svc-state.is-refunded  { background: var(--surface-2); color: var(--muted); }
.svc-act { text-align: right; padding-right: 0 !important; }
.svc-act .btn { padding: 7px 14px; font-size: .8rem; }
.dash-cat .table-scroll, .panel .table-scroll { border: 0; border-radius: 0; background: none; }

/* "Delivered to" on the order form, shown instead of an email field when the
   customer is already signed in. */
.signed-as { padding: 12px 14px; background: var(--surface-2); border-radius: 7px; }
.signed-as strong { display: block; font-size: .92rem; }
.signed-as span { display: block; font-size: .78rem; color: var(--muted); margin-top: 3px; }
.required-label { font-size: .78rem; font-weight: 400; color: var(--muted); }

/* Power controls. Deliberately plain buttons, not a prominent call to
   action — these interrupt a running server. */
.ctrl-note { margin-bottom: 12px; }
.ctrl-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ctrl-row .btn { padding: 9px 16px; font-size: .84rem; }
.btn-danger { border: 1px solid var(--error); color: var(--error); background: none; }
.btn-danger:hover { background: var(--error-bg); }

/* Force stop sits apart and behind a confirmation, because it is the only
   control here that can lose a customer's unsaved work. */
.ctrl-danger { margin-bottom: 14px; }
.ctrl-danger > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 1px solid var(--error); border-radius: 7px;
  color: var(--error); font-size: .84rem; font-weight: 600;
}
.ctrl-danger > summary::-webkit-details-marker { display: none; }
.ctrl-danger > summary:hover { background: var(--error-bg); }
.ctrl-danger[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ctrl-confirm {
  border: 1px solid var(--error); border-radius: 0 8px 8px 8px;
  background: var(--error-bg); padding: 16px 18px; margin-top: -1px;
}
.ctrl-confirm p { font-size: .83rem; color: var(--ink-2); margin-bottom: 10px; }
.ctrl-confirm .btn-danger { background: var(--error); color: #fff; border-color: var(--error); }
.ctrl-confirm .btn-danger:hover { opacity: .9; background: var(--error); }

/* Rescue is serious but not destructive, so it is amber rather than red —
   the colour should track the consequence. */
.ctrl-danger.is-amber > summary { border-color: var(--focus); color: var(--focus); }
.ctrl-danger.is-amber > summary:hover { background: #fdf3ea; }
.ctrl-danger.is-amber .ctrl-confirm { border-color: var(--focus); background: #fdf3ea; }
.ctrl-danger.is-amber .btn-danger { background: var(--focus); border-color: var(--focus); }
.ctrl-confirm .field { margin-bottom: 14px; }
.ctrl-confirm label code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 4px; }

/* Sign in with Google -------------------------------------------------- */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  font-weight: 600;
}
.btn-google:hover { background: var(--panel-2); border-color: var(--ink-3); }
.btn-google svg { flex: 0 0 auto; }
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--ink-3); font-size: .82rem;
}
.auth-or::before, .auth-or::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--line);
}
.next-up .hint { margin-top: 14px; }

/* Inside the sign-in panel, under the main button. */
.order-form .auth-or { margin: 20px 0 16px; }

/* ==========================================================================
   Customer dashboard — the approved design (dashboard-demo/index.html).
   Scoped to body.dash-body, which only the dashboard shell renders, so none
   of this can reach the storefront. Light only, as the design is.
   ========================================================================== */
.dash-body {
  color-scheme: light;
  --bg: #fff; --surface: #fff; --surface-2: #fafcfb;
  --ink: #24322f; --ink-2: #56665c; --muted: #7c8781;
  --line: #e3eae5; --accent: #075c4f; --accent-hover: #03483d;
  --accent-soft: #edf5f1; --on-accent: #fff;
  --error: #a32926; --error-bg: #fff0ed;
  margin: 0; background: #fff; color: #24322f;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.dash-body :focus-visible { outline: 3px solid #b4d2c0; outline-offset: 3px; }
.dx-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.dx-shell > div { min-width: 0; }

/* sidebar */
.dx-side { border-right: 1px solid #e7ece9; background: #fcfdfc; padding: 0 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.dx-brand { height: 80px; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 750; letter-spacing: -.7px; padding: 0 8px; color: #24322f; text-decoration: none; }
.dx-brand img { width: 32px; height: 32px; }
.dx-dot { color: #075c4f; }
.dx-burger { display: none; }
.dx-mpanel { display: none; }
.dx-navlabel { font-size: 10px; color: #8c9691; letter-spacing: 1.5px; text-transform: uppercase; padding: 22px 14px 9px; }
.dx-nav { display: grid; gap: 5px; }
.dx-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 6px; color: #67736e; text-decoration: none; }
.dx-nav a:hover { background: #f4f8f6; color: #24322f; }
.dx-nav a.is-on { background: #edf5f1; color: #075c4f; font-weight: 650; }
.dx-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: inherit; }
.dx-count { margin-left: auto; font-size: 11px; background: #e0ece5; padding: 1px 7px; border-radius: 4px; }
.dx-side-bottom { margin-top: auto; border-top: 1px solid #e7ece9; padding: 20px 8px 24px; color: #7c8781; font-size: 12px; }
.dx-side-bottom p { margin: 0 0 14px; }
.dx-side-bottom form { margin: 0; }
.dx-side-bottom button { border: 0; background: none; padding: 0; color: #56645c; font: inherit; cursor: pointer; }
.dx-side-bottom button:hover { color: #075c4f; }

/* top bar */
.dx-top { height: 80px; border-bottom: 1px solid #e7ece9; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; gap: 20px; }
.dx-crumb { color: #7c8781; font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-crumb strong { color: #52675a; font-weight: 500; }
.dx-crumb a { color: #7c8781; text-decoration: none; }
.dx-crumb a:hover { color: #075c4f; text-decoration: underline; }
.dx-account { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #66736c; flex-shrink: 0; }
.dx-avatar { display: grid; place-items: center; background: #edf5f1; color: #075c4f; width: 32px; height: 32px; border-radius: 50%; font-weight: 700; font-size: 12px; }
.dx-chip { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px; border: 1px solid #eadcc9; color: #977444; border-radius: 4px; background: #fffcf6; }

/* content */
.dx-main { padding: 34px 40px 44px; max-width: 1520px; margin: auto; }
.dx-main:focus { outline: none; }
.dx-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.dx-heading h1 { font-size: 27px; letter-spacing: -.8px; line-height: 1.25; margin: 0 0 7px; font-weight: 700; color: #24322f; }
.dx-sub { color: #849088; font-size: 13px; margin: 0; }
.dx-btn { display: inline-block; text-align: center; line-height: 1.5; border: 1px solid #dfe7e2; border-radius: 6px; padding: 10px 16px; background: #fff; color: #42564a; font-weight: 600; font-size: 12px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.dx-btn:hover { border-color: #c9d6ce; background: #fafcfb; }
.dx-btn.primary { color: #fff; background: #075c4f; border-color: #075c4f; }
.dx-btn.primary:hover { background: #03483d; border-color: #03483d; }

.dx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.dx-stat { border: 1px solid #e3eae5; border-radius: 8px; padding: 15px 18px; background: #fff; min-width: 0; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.dx-stat:hover { border-color: #c9d9cf; box-shadow: 0 4px 14px -10px #075c4f55; }
.dx-statlabel { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #79867e; font-size: 11px; margin-bottom: 7px; }
.dx-statlabel span { font-size: 13px; opacity: .7; }
.dx-number { font-size: 25px; font-weight: 650; line-height: 1.2; letter-spacing: -.6px; color: #24322f; }
.dx-statfoot { font-size: 10px; color: #99a29c; margin: 7px 0 0; line-height: 1.4; min-height: 14px; }
.dx-statdot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #459a6d; margin-right: 5px; vertical-align: 1px; }

.dx-notice { border: 1px solid #efe4cf; background: #fffcf6; border-radius: 7px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px 20px; margin-bottom: 28px; }
.dx-notice-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #24322f; }
.dx-notice p { color: #95846a; font-size: 12px; margin: 0; }
.dx-notice .dx-btn { background: #fff; border-color: #e7ddc9; color: #796345; }

.dx-panel { border: 1px solid #e3eae5; border-radius: 8px; overflow: hidden; background: #fff; }
.dx-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 21px 22px; border-bottom: 1px solid #e9eeeb; }
.dx-panel-head h2 { font-size: 15px; margin: 0; font-weight: 650; line-height: 1.5; color: #24322f; }
.dx-panel-head span { color: #94a097; font-size: 12px; }
.dx-panel-foot { margin: 0; padding: 14px 22px; border-top: 1px solid #edf1ee; font-size: 11px; color: #94a096; }
.dx-table-wrap { overflow: auto; }
.dx-table { width: 100%; border-collapse: collapse; white-space: nowrap; text-align: left; }
.dx-table th { background: #fafcfb; font-size: 10px; letter-spacing: .7px; text-transform: uppercase; color: #95a197; font-weight: 600; padding: 13px 22px; }
.dx-table td { padding: 20px 22px; border-top: 1px solid #edf1ee; font-size: 12px; color: #64726a; vertical-align: middle; }
.dx-table tr:target td { background: #f6faf8; }
.dx-service { color: #293d31; font-weight: 650; font-size: 13px; }
.dx-service-sub { font-size: 11px; color: #94a096; margin-top: 4px; }
.dx-amount { color: #33483b; font-weight: 600; }
.dx-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; color: #33483b; }
.dx-pill { padding: 4px 9px; display: inline-block; border-radius: 5px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.dx-pill.running { background: #edf7ef; color: #348152; }
.dx-pill.waiting { background: #fff6e7; color: #9b7436; }
.dx-pill.busy { background: #eef4fb; color: #3d6a96; }
.dx-pill.muted { background: #f1f3f2; color: #6f7b74; }
.dx-act { text-align: right; }
.dx-rowbtn { display: inline-block; background: #fff; border: 1px solid #dde6df; border-radius: 5px; font-size: 11px; padding: 6px 13px; color: #496151; text-decoration: none; white-space: nowrap; }
.dx-rowbtn:hover { border-color: #075c4f; color: #075c4f; }
.dx-empty { padding: 40px 22px; text-align: center; }
.dx-empty h3 { margin: 0 0 6px; font-size: 15px; color: #24322f; }
.dx-empty p { margin: 0 auto 18px; max-width: 46ch; font-size: 13px; color: #849088; }
.dx-empty .dx-empty-hint { margin: 16px auto 0; font-size: 12px; color: #99a29c; }

.dx-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.dx-smallpanel { border: 1px solid #e3eae5; border-radius: 8px; padding: 21px 22px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.dx-smallpanel h2 { font-size: 13px; margin: 0 0 5px; line-height: 1.5; font-weight: 700; color: #24322f; }
.dx-smallpanel p { font-size: 12px; color: #94a096; margin: 0; }

.dx-bottom { display: flex; justify-content: space-between; gap: 20px; color: #a0aaa3; font-size: 11px; margin-top: 34px; }
.dx-bottom nav { display: flex; gap: 18px; }
.dx-bottom a { color: #a0aaa3; text-decoration: none; }
.dx-bottom a:hover { color: #075c4f; }

/* The inner pages — server, buy, help, support, ticket — keep their own
   components; inside the dashboard they take the demo's quieter surface. */
.dash-body .dx-main .panel { border-color: #e3eae5; border-radius: 8px; padding: 22px; margin-bottom: 20px; box-shadow: none; }
.dash-body .dx-main .panel h2, .dash-body .dx-main .dash-h2 { font-size: 15px; font-weight: 650; margin: 0 0 14px; }
.dash-body .dx-main .btn { min-height: 0; padding: 10px 16px; font-size: 12px; gap: 8px; }
.dash-body .dx-main .field input, .dash-body .dx-main .field select, .dash-body .dx-main .field textarea { background: #fff; border-color: #dfe7e2; font-size: 14px; }
.dash-body .dx-main .hint, .dash-body .dx-main .receipt-help { font-size: 12px; color: #849088; }
.dash-body .dx-main .callout { border-radius: 7px; font-size: 13px; }
.dash-body .dx-main .term-choice { margin-bottom: 20px; }
.dash-body .dx-heading .dx-sub .dx-pill { vertical-align: 1px; }
.dash-body .skip { position: absolute; left: -9999px; }
.dash-body .skip:focus { left: 12px; top: 12px; z-index: 50; background: #fff; padding: 8px 12px; border-radius: 6px; }

@media (min-width: 1500px) { .dx-main { padding-top: 45px; } .dx-heading { margin-bottom: 34px; } }
@media (max-width: 1050px) {
  .dx-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .dx-main, .dx-top { padding-left: 24px; padding-right: 24px; }
  .dx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-email { display: none; }
  .dx-lower { grid-template-columns: 1fr; }
}
/* Phone: the sidebar folds into a block above the content. Unlike the demo,
   Help, Support and Sign out stay reachable — a phone user needs them too. */
@media (max-width: 650px) {
  /* The logo bar keeps its own height; spare screen height goes to the content
     (otherwise a short page stretches the bar into a tall empty block). */
  .dx-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .dx-side { position: relative; height: auto; padding-bottom: 12px; border-right: 0; border-bottom: 1px solid #e7ece9; overflow: visible; }
  .dx-brand { height: 64px; }
  /* Phone: logo and a Menu button on one row; the pages fold behind the button. */
  .dx-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0 16px; }
  .dx-side-bottom, .dx-count { display: none; }
  .dx-burger { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border: 1px solid #dfe7e3; border-radius: 8px;
               background: #fff; color: #24322f; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
  .dx-burger-bars, .dx-burger-bars::before, .dx-burger-bars::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform .15s, opacity .15s; }
  .dx-burger-bars::before, .dx-burger-bars::after { content: ""; position: absolute; left: 0; }
  .dx-burger-bars::before { top: -5px; }
  .dx-burger-bars::after { top: 5px; }
  .dx-side.is-open .dx-burger-bars { background: transparent; }
  .dx-side.is-open .dx-burger-bars::before { transform: translateY(5px) rotate(45deg); }
  .dx-side.is-open .dx-burger-bars::after { transform: translateY(-5px) rotate(-45deg); }
  .dx-sidenav { flex-basis: 100%; padding-bottom: 12px; }
  .dx-side.js-nav:not(.is-open) .dx-sidenav { display: none; }
  .dx-side.js-nav:not(.is-open) { padding-bottom: 0; }
  .dx-navlabel { padding: 12px 14px 6px; }
  .dx-nav a { padding: 11px 14px; font-size: 15px; }
  /* Phones: one simple panel replaces the sidebar groups and the account dropdown. */
  .dx-menu, .dx-side .dx-sidenav { display: none; }
  .dx-side .dx-mpanel { display: block; flex-basis: 100%; padding: 4px 4px 18px; }
  .dx-side.js-nav .dx-mpanel { display: none; }
  .dx-side.js-nav.is-open { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: #fcfdfc; }
  .dx-side.js-nav.is-open .dx-mpanel { display: block; position: fixed; left: 0; right: 0; top: 64px; bottom: 0; overflow-y: auto;
                                       background: #fff; border-top: 1px solid #e7ece9; padding: 18px 20px 32px; }
  html.dx-menu-open, html.dx-menu-open body { overflow: hidden; }
  .dx-macct { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #e3ebe7; border-radius: 12px; background: #f7faf9; }
  .dx-macct .dx-avatar { flex: none; }
  .dx-macct-who { min-width: 0; flex: 1; display: grid; gap: 2px; }
  .dx-macct-who strong { font-size: 14px; color: #24322f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dx-macct-who span { font-size: 13px; color: #6b7671; }
  .dx-macct-who b { color: #075c4f; }
  .dx-maddfunds { flex: none; font-size: 13px; font-weight: 600; color: #075c4f; text-decoration: none; padding: 7px 11px; border: 1px solid #cfe1d9; border-radius: 999px; background: #fff; }
  .dx-mbuy { display: flex; justify-content: center; width: 100%; margin: 14px 0 8px; box-sizing: border-box; }
  .dx-mlist { display: grid; margin-top: 14px; border-top: 1px solid #eef2f0; }
  .dx-mlist a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 4px; border-bottom: 1px solid #eef2f0;
                font-size: 16px; color: #24322f; text-decoration: none; }
  .dx-mlist a::after { content: "›"; color: #a3aea9; font-size: 20px; line-height: 1; }
  .dx-mlist a.is-on { color: #075c4f; font-weight: 650; }
  .dx-mlist a.is-on::after { color: #075c4f; }
  .dx-mcount { margin-left: auto; font-size: 12px; font-weight: 600; color: #075c4f; background: #edf5f1; border-radius: 999px; padding: 2px 8px; }
  .dx-msignout { margin: 24px 0 0; }
  .dx-msignout button { width: 100%; padding: 13px; border: 1px solid #e3ebe7; border-radius: 10px; background: #fff; color: #56645c; font: inherit; font-size: 15px; cursor: pointer; }
  .dx-top { height: 60px; padding: 0 20px; }
  .dx-main { padding: 25px 20px; }
  .dx-heading { align-items: flex-start; gap: 12px; }
  .dx-heading h1 { font-size: 24px; }
  .dx-stats { gap: 10px; }
  .dx-stat { padding: 13px 14px; }
  .dx-statlabel { font-size: 10px; }
  .dx-number { font-size: 24px; }
  .dx-notice { align-items: flex-start; gap: 10px; }
  .dx-smallpanel { flex-wrap: wrap; }
  .dx-bottom { flex-direction: column; }
  .dash-body .dx-main .panel { padding: 16px; }
}
@media (max-width: 420px) {
  .dx-heading { flex-direction: column; }
  .dx-crumb { font-size: 12px; }
}

/* --- account menu (top bar) --------------------------------------------- */
.dx-menu { position: relative; }
.dx-menu > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 4px 6px 4px 10px; border-radius: 22px; border: 1px solid transparent; }
.dx-menu > summary::-webkit-details-marker { display: none; }
.dx-menu > summary:hover, .dx-menu[open] > summary { border-color: #e3eae5; background: #fafcfb; }
.dx-caret { width: 7px; height: 7px; border-right: 1.5px solid #7c8781; border-bottom: 1.5px solid #7c8781; transform: rotate(45deg) translateY(-2px); margin: 0 4px 0 -2px; }
.dx-menu[open] .dx-caret { transform: rotate(-135deg) translateY(-1px); }
.dx-menu-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 268px; background: #fff; border: 1px solid #e3eae5; border-radius: 10px; box-shadow: 0 18px 40px -18px #12352b40; padding: 8px; z-index: 40; }
.dx-menu-who { display: flex; gap: 12px; align-items: center; padding: 10px 10px 14px; border-bottom: 1px solid #edf1ee; margin-bottom: 6px; }
.dx-menu-who div { min-width: 0; }
.dx-menu-who strong { display: block; font-size: 13px; color: #24322f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-menu-who span { font-size: 12px; color: #7c8781; }
.dx-menu-who b { color: #075c4f; font-weight: 650; }
.dx-menu-pop nav { display: grid; gap: 2px; }
.dx-menu-pop a, .dx-menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 6px; font: inherit; font-size: 13px; color: #42564a; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
.dx-menu-pop a:hover, .dx-menu-pop button:hover, .dx-menu-pop a[aria-current] { background: #edf5f1; color: #075c4f; }
.dx-menu-pop .dx-icon { font-size: 14px; width: 16px; }
.dx-menu-pop form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid #edf1ee; }

/* --- messages ------------------------------------------------------------ */
.dx-flash { border-radius: 7px; padding: 13px 18px; font-size: 13px; margin-bottom: 22px; border: 1px solid; }
.dx-flash.is-good { background: #edf7ef; border-color: #cfe7d6; color: #2c6b45; }
.dx-flash.is-bad { background: #fff0ed; border-color: #f2d3cc; color: #8d2b22; }

/* --- balance --------------------------------------------------------------- */
.dx-balance-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px; margin-bottom: 24px; align-items: start; }
.dx-balance-card { padding: 22px; }
.dx-balance-amount { font-size: 38px; font-weight: 700; letter-spacing: -1px; color: #075c4f; line-height: 1.15; margin: 4px 0 8px; }
.dx-topup { padding: 20px 22px 22px; }
.dx-topup-need { font-size: 13px; color: #796345; background: #fffcf6; border: 1px solid #efe4cf; border-radius: 6px; padding: 10px 12px; margin: 0 0 16px; }
.dx-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dx-preset input { position: absolute; opacity: 0; pointer-events: none; }
.dx-preset span { display: inline-block; padding: 8px 14px; border: 1px solid #dfe7e2; border-radius: 6px; font-size: 13px; font-weight: 600; color: #42564a; cursor: pointer; }
.dx-preset input:checked + span, .dx-preset span:hover { border-color: #075c4f; color: #075c4f; background: #edf5f1; }
.dx-preset input:focus-visible + span { outline: 3px solid #b4d2c0; outline-offset: 2px; }
.dx-fine { margin: 14px 0 0; font-size: 11px; color: #99a29c; }
.dx-num { text-align: right; }
.dx-amount.is-in { color: #2c7a4b; }
.dx-amount.is-out { color: #8d4a2b; }

/* --- profile --------------------------------------------------------------- */
.dx-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 24px; }
.dx-dl { margin: 0; padding: 6px 22px; }
.dx-dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid #edf1ee; font-size: 13px; }
.dx-dl > div:last-child { border-bottom: 0; }
.dx-dl dt { color: #7c8781; }
.dx-dl dd { margin: 0; color: #24322f; text-align: right; overflow-wrap: anywhere; }
.dx-inline { margin-left: 8px; font-size: 12px; color: #075c4f; }
.dx-form { padding: 20px 22px 6px; }
.dx-form-alt { padding: 16px 22px 20px; border-top: 1px solid #edf1ee; margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.dx-form-alt p { margin: 0; font-size: 12px; color: #849088; }
.dash-body .dx-main .error { color: #a32926; font-size: 12px; margin-top: 6px; }
.dx-signout-panel form { margin: 0; }

/* --- renew (server page) ----------------------------------------------- */
.dx-renew-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.dx-renew-term { position: relative; display: grid; gap: 2px; padding: 14px 16px; border: 1px solid #dfe7e2; border-radius: 8px; cursor: pointer; }
.dx-renew-term input { position: absolute; opacity: 0; pointer-events: none; }
.dx-renew-term:has(input:checked) { border-color: #075c4f; background: #f4faf7; box-shadow: 0 0 0 1px #075c4f inset; }
.dx-renew-term:has(input:focus-visible) { outline: 3px solid #b4d2c0; outline-offset: 2px; }
.dx-renew-name { font-size: 13px; font-weight: 650; color: #24322f; }
.dx-renew-name em { font-style: normal; font-size: 11px; color: #348152; font-weight: 600; margin-left: 4px; }
.dx-renew-price { font-size: 18px; font-weight: 650; color: #24322f; }
.dx-renew-cover { font-size: 11px; color: #348152; }
.dx-renew-term.is-short .dx-renew-cover { color: #9b7436; }
.dx-renew-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1050px) {
  .dx-balance-grid, .dx-profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .dx-renew-terms { grid-template-columns: 1fr; }
  .dx-menu-pop { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .dx-balance-amount { font-size: 32px; }
}

/* --- checkout: pay from balance (storefront page) ----------------------- */
.pay-balance { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.pay-balance h2 { font-size: 1.1rem; margin: 0 0 4px; }
.pay-balance .lead { margin: 0; font-size: .92rem; }
.pay-balance.is-covered { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pay-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: .82rem; }
.pay-or::before, .pay-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }

/* --- receipt --------------------------------------------------------------- */
.dx-heading-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dx-receipt { max-width: 760px; }
.dx-receipt-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px; border-bottom: 1px solid #e9eeeb; }
.dx-receipt-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 750; letter-spacing: -.5px; }
.dx-receipt-title { text-align: right; }
.dx-receipt-title strong { display: block; font-size: 14px; }
.dx-receipt-title span { font-size: 11px; color: #94a096; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.dx-receipt-parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px 22px; border-bottom: 1px solid #e9eeeb; }
.dx-receipt-parties > div { display: grid; gap: 2px; min-width: 0; }
.dx-receipt-parties strong { font-size: 13px; overflow-wrap: anywhere; }
.dx-receipt-parties span { font-size: 12px; color: #849088; overflow-wrap: anywhere; }
.dx-receipt-label { font-size: 10px !important; letter-spacing: 1px; text-transform: uppercase; color: #95a197 !important; }
.dx-receipt-lines { white-space: normal; }
.dx-receipt-lines tfoot td { padding: 16px 22px; border-top: 1px solid #e3eae5; font-size: 14px; font-weight: 700; color: #24322f; }
.dx-receipt-meta { border-top: 1px solid #e9eeeb; }
@media (max-width: 650px) { .dx-receipt-parties { grid-template-columns: 1fr; } }

/* Printing a receipt: just the receipt. */
@media print {
  .dash-body .dx-side, .dash-body .dx-top, .dash-body .dx-bottom, .dash-body .dx-noprint, .dash-body .skip { display: none !important; }
  .dash-body .dx-shell { display: block; }
  .dash-body .dx-main { padding: 0; max-width: none; }
  .dx-receipt { max-width: none; border: 0; }
}

/* --- server page: two cards to a row on a wide screen --------------------- */
.dx-server-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; align-items: stretch; }
@media (min-width: 1100px) {
  .dx-server-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Credentials need the width: the password and the SSH command are long. */
  .dx-server-grid > .creds, .dx-server-grid > .next-up { grid-column: 1 / -1; }
  .dx-server-grid .dx-renew-terms { grid-template-columns: 1fr; gap: 8px; }
  .dx-server-grid .dx-renew-term { grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 11px 14px; }
  .dx-server-grid .dx-renew-name { grid-column: 1; }
  .dx-server-grid .dx-renew-price { grid-column: 2; grid-row: 1 / span 2; font-size: 16px; }
  .dx-server-grid .dx-renew-cover { grid-column: 1; }
}

/* --- checkout consent ------------------------------------------------------ */
.order-agree { margin: 6px 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.order-agree.has-error { border-color: var(--error); background: var(--error-bg); }
.agree-check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400 !important; font-size: .82rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.agree-check input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.order-agree .hint { margin: 6px 0 0 32px; font-size: .76rem; }

/* Service status (/status) */
.st-banner { --st: var(--accent); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 18px 22px; border: 1px solid var(--line); border-left: 5px solid var(--st); border-radius: 12px; background: var(--surface); font-size: .95rem; }
.st-banner span:last-child { color: var(--muted); }
.st-ok { --st: var(--accent); } .st-degraded { --st: #b7791f; } .st-outage { --st: var(--error); } .st-maintenance { --st: #3b6fb6; }
.st-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--st); flex-shrink: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 18%, transparent); }
.st-warn { margin-top: 12px; color: var(--error); font-size: .88rem; }
.st-h2 { margin: 40px 0 14px; font-size: 1.25rem; }
.st-incidents { display: grid; gap: 14px; }
.st-incident h3 { margin-top: 8px; font-size: 1.1rem; }
.st-stage { margin-top: 6px; font-weight: 600; font-size: .9rem; color: var(--ink-2); }
.st-meta { margin-top: 6px; color: var(--muted); font-size: .84rem; }
.st-table { padding: 6px 22px; }
.st-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.st-name strong { display: block; font-size: .95rem; }
.st-name span { color: var(--muted); font-size: .82rem; }
.st-bars { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 2px; height: 26px; }
.st-d { display: inline-block; flex: 1; min-width: 2px; border-radius: 2px; background: var(--accent); opacity: .85; }
.st-bars .st-d:nth-child(-n+60) { display: none; }
.st-d-issue { background: #b7791f; opacity: 1; } .st-d-maint { background: #3b6fb6; opacity: 1; } .st-d-none { background: var(--line); opacity: 1; }
.st-state { --st: var(--accent); display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; white-space: nowrap; }
.st-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 0 10px; color: var(--muted); font-size: .78rem; }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.st-legend .st-d { flex: none; width: 10px; height: 10px; }
.st-legend .st-range { margin-left: auto; }
.st-legend .st-long { display: none; }
.st-empty { color: var(--muted); font-size: .92rem; }
.st-past { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; }
.st-past > li { min-width: 0; padding: 22px; font-size: .9rem; }

.st-past-head > div > span { display: block; color: var(--muted); font-size: .82rem; }
.st-past > li { display: block; scroll-margin-top: 90px; }
.st-country-flag { display: inline; font-size: 1em; margin-right: 3px; }
.st-past > li:target { background: var(--accent-soft); }
.st-past-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; }
.st-what { margin-top: 8px; color: var(--ink-2); font-size: .88rem; }
.st-timeline { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 10px 0 0; padding: 0; color: var(--muted); font-size: .8rem; }
.st-timeline li, .st-past .st-timeline li { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; border: 0; font-size: inherit; background: none; }
.st-timeline li + li::before { content: '→'; margin: 0 8px; color: var(--line); }
.st-timeline time { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
a.st-d { cursor: pointer; } a.st-d:hover, a.st-d:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
@media (min-width: 900px) {
  .st-row { grid-template-columns: minmax(200px, 1fr) minmax(0, 2.2fr) 150px; }
  .st-bars { grid-column: auto; grid-row: auto; }
  .st-bars .st-d:nth-child(-n+60) { display: inline-block; }
  .st-legend .st-short { display: none; } .st-legend .st-long { display: inline; }
  .st-state { justify-content: flex-end; }
  .st-incidents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Pricing (/pricing): one table per product line */
.price-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.price-jump a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .86rem; font-weight: 600; text-decoration: none; color: var(--ink-2); }
.price-jump a:hover { border-color: var(--accent); color: var(--accent); }
.price-group { margin-top: 44px; scroll-margin-top: 90px; }
.price-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 14px; }
.price-group-head h2 { font-size: 1.45rem; }
.price-group-head p { color: var(--muted); font-size: .9rem; }
.price-note { margin-top: 10px; color: var(--muted); font-size: .84rem; }
.table-price small { display: block; color: var(--accent); font-size: .74rem; font-weight: 600; }
.price-group .comparison th, .price-group .comparison td { padding: 18px 14px; }

/* Home hero, compact and left-aligned: price first, then the billing term. */
.store-intro { text-align: left; padding-block: 28px 10px; }
.store-intro h1 { max-width: none; margin: 0; color: var(--ink); font-size: clamp(1.5rem, 2.75vw, 2.25rem); line-height: 1.18; letter-spacing: -.035em; }
.store-intro .hero-price-note { margin: 8px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.store-intro p.hero-description { max-width: 82ch; margin: 14px 0 0; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.store-terms { padding-block: 8px 14px; text-align: left; }
.store-terms .term-toggle { display: flex; margin-inline: 0; width: min(100%, 560px); }
.store-terms .term-opt { flex: 1; justify-content: center; padding-inline: 12px; }
.store-terms .term-note { margin-top: 8px; min-height: 1.5em; }
@media (max-width: 600px) {
  .store-intro { padding-block: 22px 14px; background: var(--graphic); }
  .store-intro h1, .store-intro p.hero-description { color: var(--graphic-ink); }
  .store-intro h1 { font-size: 1.65rem; font-weight: 800; line-height: 1.2; letter-spacing: -.035em; max-width: 340px; }
  .store-intro .hero-price-note { color: var(--graphic-muted); }
  .store-intro .hero-price-note { margin-top: 10px; font-size: .875rem; line-height: 1.5; }
  .store-intro p.hero-description { margin-top: 16px; max-width: 36ch; font-size: .875rem; line-height: 1.65; }
  .store-terms .term-opt { flex-direction: column; align-items: center; gap: 3px; min-height: 48px; padding: 7px 6px; font-size: .8rem; line-height: 1.2; }
  .store-terms .term-note { min-height: 2.7em; margin-top: 6px; font-size: .78rem; line-height: 1.35; }
}

@media (max-width: 600px) {
  .store-terms { background: var(--graphic); border-color: var(--graphic-line); }
  .store-terms .term-toggle { background: var(--graphic-overlay); border-color: var(--graphic-line); }
  .store-terms .term-opt { color: var(--graphic-ink); border-radius: 18px; }
  .store-terms .term-opt small { color: var(--graphic-ink); opacity: .9; }
  .store-terms .term-opt.active, .store-terms .term-opt[aria-current="true"] { background: var(--graphic-ink); color: var(--graphic); }
  .store-terms .term-opt.active small, .store-terms .term-opt[aria-current="true"] small { color: var(--graphic); }
  .store-terms .term-note { color: var(--graphic-muted); }
}
/* Home hero picture: removed to keep the catalogue close to the price. */

/* Mobile menu: products first, then help and account. */
.mobile-menu-more { display: none; }
@media (max-width: 899px) {
  .site-head:has(.mobile-menu-more) .nav-checkbox:checked ~ .head-inner .account-nav { display: none; }
  .mobile-menu-more { display: flex; flex-direction: column; padding: 12px 0; margin-top: 8px; border-top: 1px solid var(--on-accent); }
  .mobile-menu-more a { color: var(--on-accent); text-decoration: none; padding: 11px 14px; font-size: .86rem; }
}

@media (max-width: 899px) {
  .site-head .nav-strip:not(.is-account) { background: #fff; }
  .site-head .nav-strip:not(.is-account) .site-nav a,
  .site-head .nav-strip:not(.is-account) .mobile-menu-more a { color: var(--graphic); opacity: 1; }
  .site-head .nav-strip:not(.is-account) .site-nav a { border-bottom-color: var(--graphic-muted); }
  .site-head .nav-strip:not(.is-account) .site-nav a[aria-current] { border-left-color: var(--graphic); }
  .site-head .nav-strip:not(.is-account) .mobile-menu-more { border-top: 0; margin-top: 0; }
  .site-head .nav-strip:not(.is-account) .site-nav a:last-child { border-bottom: 0; }
}

/* Pricing page on phones (owner, 14 Oct 2026): type buttons stuck to the top switch the product line; one compact
   row per plan with every term's monthly price side by side. Desktop keeps the table. */
.mplans { display: none; }
@media (max-width: 640px) {
  .price-group .table-scroll { display: none; }
  .price-jump { position: sticky; top: 0; z-index: 6; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px;
    margin: 0 -16px; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .price-jump::-webkit-scrollbar { display: none; }
  .price-jump a { flex: none; white-space: nowrap; padding: 7px 13px; font-size: 13px; background: #fff; }
  .price-jump a.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
  .price-jump .price-jump-loc { display: none; }
  .js-ptabs .price-group:not(.is-shown) { display: none; }
  .js-ptabs .price-group { margin-top: 18px; }
  .price-group { scroll-margin-top: 64px; }
  .price-group-head { margin-bottom: 10px; }
  .price-group-head h2 { font-size: 1.2rem; }
  .price-group-head p { font-size: .82rem; }
  .mplans { display: grid; gap: 8px; }
  .mp-head, .mp-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 6px; }
  .mp-head { position: sticky; top: 53px; z-index: 5; padding: 8px 13px 7px; margin: 0; background: var(--bg);
    border-bottom: 1px solid var(--line); }
  .mp-head span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); line-height: 1.25; }
  .mp-head small { display: block; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--accent); font-weight: 650; }
  .mp-row { display: grid; gap: 2px; padding: 11px 12px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    color: var(--ink); text-decoration: none; }
  .mp-row:active { background: var(--surface-2); }
  .mp-row.is-popular { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
  .mp-name { display: flex; align-items: center; gap: 8px; }
  .mp-name strong { font-size: 15px; letter-spacing: -.01em; }
  .mp-name .badge { font-size: .56rem; }
  .mp-specs { color: var(--muted); font-size: 12px; line-height: 1.35; }
  .mp-prices { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
  .mp-prices > span { display: grid; min-width: 0; }
  .mp-prices b { font-size: 14px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
  .mp-prices > span:first-child b { color: var(--ink); }
  .mp-prices small { font-size: 10.5px; color: var(--accent); font-weight: 600; }
  .mplans.is-win .mp-prices b { font-size: 13px; }
  body:has(.site-head.is-account) .price-jump, body:has(.site-head.is-account) .mp-head { background: var(--surface-2); }
  .mp-foot { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
}
@media (max-width: 359px) {
  .mp-prices b { font-size: 12.5px; }
  .mplans.is-win .mp-prices b { font-size: 12px; }
}

/* Pricing table on desktop and tablet, compact (13 Oct 2026): smaller type and
   tighter rows, so more plans fit on screen and the table fits narrower
   laptops without scrolling sideways. Phones use the cards above. */
@media (min-width: 641px) {
  .price-group { margin-top: 48px; }
  .price-group-head { margin-bottom: 14px; }
  .price-group-head h2 { font-size: 1.35rem; }
  .price-group-head p { font-size: .88rem; }
  .price-group .comparison { min-width: 820px; font-size: .86rem; }
  .price-group .comparison th, .price-group .comparison td { padding: 15px 16px; }
  .price-group .comparison tbody th { white-space: normal; }
  .price-group .comparison thead th { font-size: .62rem; padding-block: 12px; }
  .price-group .comparison th:first-child { min-width: 0; }
  .price-group .comparison .badge { display: inline-block; margin: 0 0 0 8px; font-size: .56rem; vertical-align: 2px; }
  .price-group .table-price { font-size: 1.05rem; }
  .price-group .table-price span { font-size: .68rem; }
  .price-group .table-price small { display: block; margin-top: 2px; font-size: .68rem; }
  .price-group .comparison .btn { min-height: 36px; padding: 7px 13px; font-size: .78rem; }
  .price-group .price-note { margin-top: 10px; font-size: .8rem; }
}
/* Smaller screens step down again, so the table keeps fitting. */
@media (min-width: 641px) and (max-width: 1100px) {
  .price-group .comparison { min-width: 0; font-size: .74rem; }
  .price-group .comparison th, .price-group .comparison td { padding: 8px 8px; }
  .price-group .table-price { font-size: .86rem; }
  .price-group .table-price small { display: block; margin: 1px 0 0; }
  .price-group .comparison .btn { padding: 4px 9px; font-size: .7rem; }
}
@media (min-width: 641px) and (max-width: 860px) {
  .price-group .comparison { font-size: .68rem; }
  .price-group .comparison th, .price-group .comparison td { padding: 7px 5px; white-space: normal; }
  .price-group .comparison thead th { font-size: .54rem; letter-spacing: .04em; }
  .price-group .table-price { font-size: .8rem; white-space: nowrap; }
  .price-group .table-price span { display: none; }
  .price-group .comparison .btn { padding: 4px 7px; font-size: .66rem; }
  .price-group .comparison .badge { display: block; margin: 3px 0 0; }
}

/* The TEST MODE badge shows on desktop and tablet only (owner, 13 Oct 2026). */
@media (max-width: 640px) { .test-chip { display: none; } }

/* Phones, Contact support: no box around the form; the fields use the full width. */
@media (max-width: 650px) {
  .dash-body .dx-main .ticket-new { border: 0; border-radius: 0; padding: 0; background: none; margin: 0 0 8px; }
  .dash-body .dx-main .ticket-new > summary { padding: 4px 0 16px; font-size: 17px; }
  .dash-body .dx-main .ticket-form { padding: 0 0 8px; }
  .dash-body .dx-main .ticket-form .field textarea { min-height: 150px; }
  .dash-body .dx-main .ticket-form .btn { width: 100%; justify-content: center; min-height: 48px; font-size: 15px; }
  .dash-body .dx-main .ticket-email { border-top: 1px solid #e3eae5; padding-top: 18px; margin-top: 18px; }
  .dash-body .dx-main .ticket-email p { font-size: 15px; line-height: 1.6; }
}

/* Phones: every dashboard table becomes a stack of compact cards — nothing to scroll sideways.
   The first cell is the card's title; each other cell is one line: its column name (data-label)
   on the left, its value(s) on the right, wrapping only when they do not fit. */
@media (max-width: 650px) {
  .dash-body .dx-table-wrap { overflow: visible; }
  .dash-body .dx-table, .dash-body .dx-table tbody, .dash-body .dx-table tr { display: block; width: auto; }
  .dash-body .dx-table { white-space: normal; }
  .dash-body .dx-table thead { display: none; }
  .dash-body .dx-table tr { padding: 13px 16px 12px; border-top: 1px solid #edf1ee; }
  .dash-body .dx-table tr:first-child { border-top: 0; }
  .dash-body .dx-table td { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 8px;
                            padding: 3px 0; border-top: 0; font-size: 13px; line-height: 1.45; text-align: right; overflow-wrap: anywhere; }
  .dash-body .dx-table td > * { display: inline; }
  .dash-body .dx-table td > .dx-pill { display: inline-block; padding: 1px 8px; font-size: 11px; }
  .dash-body .dx-table td::before { content: attr(data-label); margin-right: auto; font-size: 12px; color: #8c9691; text-align: left; }
  .dash-body .dx-table td[data-label=""]::before { content: none; }
  .dash-body .dx-table .dx-service-sub { font-size: 12px; color: #8c9691; }
  .dash-body .dx-table td:first-child { justify-content: flex-start; padding: 0 0 6px; text-align: left; }
  .dash-body .dx-table td:first-child::before { content: none; }
  .dash-body .dx-table td:first-child > :first-child { font-size: 14px; color: #24322f; font-weight: 600; }
  .dash-body .dx-table td.dx-act { justify-content: flex-end; padding-top: 8px; }
  .dash-body .dx-table td.dx-act .dx-rowbtn { display: inline-block; padding: 6px 14px; font-size: 12px; }
  .dash-body .dx-table .dx-code { white-space: normal; word-break: break-all; font-size: 12px; }
  .dash-body .dx-table .dx-amount { font-size: 14px; }
}

/* Phones, order page: the billing term is three full-width rows — a radio dot,
   the term with its saving as a badge, and the monthly price on the right. */
@media (max-width: 650px) {
  .term-choice { grid-template-columns: 1fr; gap: 8px; }
  .term-choice .term-pick { flex-direction: row; align-items: center; gap: 10px; padding: 14px 16px; min-height: 56px; border-radius: 10px; }
  .term-choice .term-pick.is-on, .term-choice .term-pick:has(input:checked) { padding: 13px 15px; }
  .term-choice .term-pick::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #b9c6c0; background: #fff; box-sizing: border-box; }
  .term-choice .term-pick.is-on::before, .term-choice .term-pick:has(input:checked)::before { border: 5px solid var(--accent); }
  .term-choice .term-pick-name { order: 1; font-size: 15px; white-space: nowrap; }
  .term-choice .term-pick-save { order: 2; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); white-space: nowrap; }
  .term-choice .term-pick.is-on .term-pick-save, .term-choice .term-pick:has(input:checked) .term-pick-save { background: #fff; }
  .term-choice .term-pick-price { order: 3; margin-left: auto; font-size: 15px; font-weight: 650; color: var(--ink); white-space: nowrap; }
}

/* First and last name side by side (sign-up step and profile); stacked on phones. */
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.name-row .field { margin-bottom: 0; }
.name-hint { margin: 6px 0 16px; }
.name-row + .hint { margin: 8px 0 14px; }
.dx-macct-mail { font-size: 12px; color: #8c9691; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .name-row { grid-template-columns: 1fr; } }

/* Renew box: three ways to pay; they wrap on a phone. */
.dx-renew-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dx-renew-how { margin-top: 10px; }

/* Cancel panel on the server page. */
.dx-cancel.is-cancelled { border-color: #efe4cf; background: #fffcf6; }
.dx-cancel form { display: grid; gap: 12px; justify-items: start; margin-top: 4px; }
.dx-cancel-confirm { font-size: 13px; }
.dx-cancel-refund { margin-top: 12px; }
.dx-btn.danger { border-color: #e7c3bd; color: #a3352a; background: #fff; }
.dx-btn.danger:hover { border-color: #a3352a; }

/* Balance page: the balance and adding funds in one card. */
.dx-balance-one { padding: 0; margin-bottom: 24px; overflow: hidden; }
.dx-balance-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; padding: 22px 24px; background: #f7faf9; border-bottom: 1px solid #e7ece9; }
.dx-balance-top .dx-statfoot { max-width: 46ch; margin: 0; }
.dx-balance-add { padding: 20px 24px 22px; }
.dx-balance-add .dx-topup { padding: 0; }
.dx-balance-h { font-size: 15px; font-weight: 650; margin: 0 0 14px; display: flex; justify-content: space-between; gap: 12px; }
.dx-balance-h span { font-size: 12px; font-weight: 400; color: #8c9691; }
@media (max-width: 650px) { .dx-balance-top, .dx-balance-add { padding-left: 16px; padding-right: 16px; } }

/* The crypto checkout shown inside the dashboard. */
.dash-body .page-section { padding: 0; min-height: 0; }
.dash-body .page-section > .wrap { width: auto; padding-inline: 0; margin-inline: 0; }

/* Server page: snapshots, name and reverse DNS. */
.dx-snap-count { font-size: 12px; font-weight: 400; color: #8c9691; margin-left: 8px; }
.dx-snap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid #edf1ee; }
.dx-snap-info { display: grid; gap: 2px; }
.dx-snap-info span { font-size: 12px; color: #8c9691; }
.dx-snap-acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.dx-snap-acts .ctrl-danger { margin-bottom: 0; }
.dx-snap-acts form { margin: 0; }
.dx-snap-new, .dx-inline-row { display: flex; gap: 8px; margin-top: 10px; }
.dx-snap-new input, .dx-inline-row input { flex: 1; min-width: 0; }
.dx-inline-form { margin-bottom: 16px; }
.dx-inline-form label { font-size: 13px; font-weight: 600; }
@media (max-width: 650px) { .dx-inline-row-2 { flex-wrap: wrap; } .dx-inline-row-2 input { flex-basis: 100%; } }


/* Server page: move to another location. */
.dx-move-form { display: grid; gap: 10px; }
.dx-move-form > label, .dx-move-form legend { font-size: 13px; font-weight: 600; }
.dx-move-form fieldset { border: 0; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.dx-move-method { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #e3ebe7; border-radius: 8px; font-size: 13px; cursor: pointer; }
.dx-move-method:has(input:checked) { border-color: #075c4f; background: #f3f8f6; }
.dx-move-acks .agree-check { font-size: 13px; }
.dx-move-busy { background: #fffcf6; border: 1px solid #efe4cf; border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.dx-move-form .dx-btn { justify-self: start; }
.dx-move-form select { width: 100%; padding: 10px 12px; border: 1px solid #dfe7e2; border-radius: 6px; background: #fff; font: inherit; font-size: 14px; }
.dx-move-pay { border: 1px solid #e3ebe7; border-radius: 8px; padding: 12px 14px; background: #f7faf9; display: grid; gap: 4px; }
.dx-move-pay-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.dx-move-pay-row strong { color: #24322f; }
.dx-move-pay-note { margin: 0 0 6px; font-size: 12px; color: #6b7671; }
.dx-move-acks[hidden], .dx-move-pay[hidden] { display: none; }
.dx-move-keep-note { margin: 4px 0 12px; }

/* Server page: summary card + tabs. */
.dx-srv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-bottom: 16px; }
.dx-srv-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.dx-srv-facts div { min-width: 0; }
.dx-srv-facts dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8c9691; margin-bottom: 2px; }
.dx-srv-facts dd { margin: 0; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.dx-srv-facts dd.is-soon { color: #b42318; }
.dx-copy { font: inherit; font-size: 12px; font-weight: 500; padding: 2px 8px; border: 1px solid #d7e1dc; border-radius: 6px; background: #fff; cursor: pointer; }
.dx-power { display: inline-flex; align-items: center; gap: 6px; }
.dx-power::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9aa5a0; }
.dx-power.is-running::before { background: #12805c; }
.dx-power.is-stopped::before { background: #b42318; }
.dx-srv-power { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.dx-srv-power form { margin: 0; }
.dx-srv-more .ctrl-danger { margin: 0; }
.dx-srv-more .ctrl-danger > summary { padding: 7px 12px; font-size: 13px; }
.dx-srv-more .ctrl-confirm { max-width: 360px; }
.dx-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #e3ebe7; margin: 4px 0 18px; }
.dx-tabs a { padding: 10px 14px; font-size: 14px; font-weight: 500; color: #4a5550; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dx-tabs a:hover { color: #075c4f; }
.dx-tabs a.is-on { color: #075c4f; border-bottom-color: #075c4f; font-weight: 650; }
.dx-tab-body > .panel { margin-bottom: 18px; }
.dx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.dx-recovery .ctrl-danger { margin-top: 10px; }
.dx-snap-vs { background: #f7faf9; border-radius: 8px; padding: 8px 12px; }
@media (max-width: 900px) { .dx-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 650px) {
  .dx-srv-head { align-items: stretch; }
  .dx-srv-power { width: 100%; }
  .dx-srv-power form, .dx-srv-power .dx-btn { flex: 1 1 auto; }
  .dx-tabs { gap: 0; }
  .dx-tabs a { padding: 9px 11px; font-size: 13px; }
}

/* Server page, round 2 (scoped to .dx-srv-page): readable help text, compact phone header, recovery rows. */
.dash-body .dx-main .dx-srv-page .hint, .dash-body .dx-main .dx-srv-page .receipt-help, .dx-srv-page .dx-move-pay-note, .dx-srv-page .ctrl-confirm p, .dx-srv-page .dx-rec-text p { font-size: 14px; line-height: 1.5; color: #4b5651; }
.dx-srv-page .dx-srv-facts dt { color: #5c6862; font-size: 12px; }
.dx-srv-page .dx-tab-body > .panel { width: 100%; max-width: none; min-width: 0; }
.dx-srv-title { margin-bottom: 12px; }
.dx-srv-title h1 { margin: 2px 0 4px; }
.dx-back { display: inline-flex; gap: 6px; font-size: 13px; color: #4b5651; text-decoration: none; padding: 4px 0; }
.dx-back:hover { color: #075c4f; }
.dx-srv-page .dx-srv-head { padding: 14px 16px; margin-bottom: 12px; }
.dx-more { position: relative; }
.dx-more > summary { list-style: none; cursor: pointer; padding: 7px 12px; border: 1px solid #d7e1dc; border-radius: 8px; font-size: 13px; font-weight: 600; background: #fff; }
.dx-more > summary::-webkit-details-marker { display: none; }
.dx-more > summary::after { content: " ▾"; color: #5c6862; }
.dx-more[open] > summary::after { content: " ▴"; }
.dx-more-menu { margin-top: 8px; max-width: 380px; }
.dx-more-title { font-weight: 700; color: #b42318; margin: 0 0 6px; }
.dx-moving { margin-bottom: 12px; }
.dx-rec-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: start; padding: 14px 0; border-top: 1px solid #e7ece9; }
.dx-rec-row .dx-rec-text p { margin: 2px 0 0; }
.dx-rec-row.is-danger .dx-rec-text strong { color: #b42318; }
.dx-rec-row .dx-rec-act { margin: 0; }
.dx-rec-row .dx-rec-act[open] { grid-column: 1 / -1; }
.dx-rec-act > summary::after { content: " ▸"; }
.dx-rec-act[open] > summary::after { content: " ▾"; }
.dx-field-title { font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.dx-mini { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #5c6862; flex: 1 1 0; min-width: 0; }
.dx-mini input { width: 100%; }
.dx-inline-row { align-items: flex-end; }
.dx-addon { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #e7ece9; }
.dx-addon p { margin: 2px 0 0; }
.dx-srv-page .dx-snap-new input, .dx-srv-page .dx-inline-row input { font-size: 14px; padding: 9px 12px; border: 1px solid #cfd8d3; border-radius: 8px; }
.dx-srv-page .dx-snap-new input:focus, .dx-srv-page .dx-inline-row input:focus { border-color: #075c4f; outline: 2px solid rgba(7, 92, 79, .15); }
.dx-srv-page .dx-snap-new input::placeholder, .dx-srv-page .dx-inline-row input::placeholder { font-size: 13px; color: #a3aca7; }
.dx-badge { font-size: 12px; font-weight: 600; color: #5c6862; background: #f1f4f2; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
@media (max-width: 650px) {
  .dx-srv-page .dx-heading { margin-bottom: 8px; }
  .dx-srv-page .dx-srv-head { padding: 12px 14px; gap: 10px; }
  .dx-srv-page .dx-srv-facts { gap: 8px 18px; }
  .dx-srv-page .dx-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 12px; }
  .dx-srv-page .dx-tabs a { padding: 9px 4px; font-size: 13px; text-align: center; }
  .dx-srv-title h1 { font-size: 24px; margin: 0 0 2px; }
  .dx-back { display: none; }   /* the breadcrumb above already links back to My servers */
  .dx-srv-page .dx-srv-facts dd { font-size: 13px; }
  .dx-srv-page input[type=text], .dx-srv-page select, .dx-srv-page .dx-btn, .dx-srv-page .ctrl-danger > summary { min-height: 44px; }
  .dx-srv-page .dx-copy { padding: 6px 10px; }
  .dx-rec-row { grid-template-columns: minmax(0, 1fr); }
  .dx-rec-row .dx-rec-act > summary { width: 100%; text-align: center; }
  .dx-inline-row-2 { flex-wrap: wrap; }
  .dx-more-menu { max-width: none; }
}

/* Dashboard drawn at 90% on desktop (owner's choice, 14 Oct 2026): everything, text, spacing and
   boxes, is 10% smaller, as if the browser were at 90%. Heights tied to the window are divided by
   the same factor so the sidebar still reaches the bottom. Phones (650px and below, where the dashboard switches to its phone menu) and the public site are unchanged. */
@media (min-width: 651px) {
  body.dash-body { zoom: .9; }
  body.dash-body .dx-shell { min-height: calc(100vh / .9); }
  body.dash-body .dx-side { height: calc(100vh / .9); }
}

/* Dashboard secondary text, readable at the 90% scale (Codex walkthrough 10): darker, slightly larger. */
.dash-body .dx-main .hint, .dash-body .dx-main .receipt-help { font-size: 13px; color: #5f6b65; }
.dash-body .dx-sub { color: #5f6b65; }
.dash-body .dx-statlabel { color: #5f6b65; font-size: 12px; }
.dash-body .dx-statfoot { color: #6b7771; font-size: 11.5px; }
.dash-body .dx-service-sub, .dash-body .dx-table .dx-service-sub { color: #6b7771; font-size: 12px; }
.dash-body .dx-fine { color: #6b7771; font-size: 12px; }
.dash-body .svc-sub { color: #6b7771; }
/* Product-type filter on Buy New Server. */
.dx-fam { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.dx-fam a { padding: 7px 12px; border: 1px solid #d7e1dc; border-radius: 999px; font-size: 13px; color: #36413c; text-decoration: none; background: #fff; }
.dx-fam a.is-on { background: #075c4f; border-color: #075c4f; color: #fff; }
/* Several waiting payments on the Balance page. */
.dx-open-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.dx-open-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; font-size: 13px; }

/* Renewal: four terms, a clear sum, two ways to pay (1/3/6/12-month terms, 14 Oct 2026). */
.dx-renew-terms { border: 0; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dx-renew-terms legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.dx-renew-term { position: relative; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid #d7e1dc; border-radius: 10px; cursor: pointer; background: #fff; }
.dx-renew-term:has(input:checked) { border-color: #075c4f; background: #f3f8f6; box-shadow: 0 0 0 1px #075c4f inset; }
.dx-renew-term input { position: absolute; opacity: 0; pointer-events: none; }
.dx-renew-term:has(input:focus-visible) { outline: 2px solid #075c4f; outline-offset: 2px; }
.dx-renew-name { font-weight: 600; font-size: 14px; }
.dx-renew-name em { font-style: normal; font-size: 12px; font-weight: 600; color: #12805c; margin-left: 4px; }
.dx-renew-price { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.dx-renew-per, .dx-renew-cover { font-size: 12.5px; color: #5f6b65; }
.dx-renew-sum { margin: 14px 0 10px; font-size: 14px; }
.dx-renew-pay { display: grid; gap: 12px; }
.dx-renew-way .hint { margin: 6px 0 0; }
.dx-renew-way .dx-btn { width: 100%; justify-content: center; }
.dx-renew-way .dx-btn[disabled] { opacity: .55; cursor: not-allowed; }
.dx-renew-open { margin: 10px 0 0; }
.dx-hist { list-style: none; margin: 0; padding: 0; }
.dx-hist li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid #e7ece9; font-size: 13.5px; }
/* Four terms: the storefront switch fits them; on phones a 2 x 2 grid. */
.term-toggle, .store-terms .term-toggle, .page-section:has(.plan-grid) .term-toggle { width: min(100%, 640px); }
.term-choice { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 650px) {
  .term-toggle, .store-terms .term-toggle, .page-section:has(.plan-grid) .term-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; border-radius: 18px; padding: 6px; }
  .term-toggle .term-opt, .store-terms .term-opt { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 6px; white-space: nowrap; border-radius: 12px; min-height: 44px; padding: 8px 6px; font-size: .85rem; }
  .term-choice { grid-template-columns: 1fr; }
  .dash-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-terms .term-pick { flex-wrap: wrap; justify-content: flex-start; gap: 4px 8px; }
}
@media (max-width: 650px) {
  .dx-hist li { grid-template-columns: minmax(0, 1fr) auto; }
  .dx-hist li > span:first-child { grid-column: 1 / -1; color: #5f6b65; font-size: 12.5px; }
}

/* Force stop disclosure: named, neutral, with a clear arrow; the red confirmation is inside. */
.dx-more > summary::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.dx-more[open] > summary::after { content: ""; transform: translateY(1px) rotate(225deg); }
.dx-more > summary { color: #4b5651; }

/* Phones: compact summary card and one row per section that opens in place (owner, 14 Oct 2026). */
.dx-acc { display: none; }
@media (max-width: 650px) {
  .dx-srv-page .dx-os { display: none; }
  .dx-srv-page .dx-srv-head { display: block; padding: 12px 14px; }
  .dx-srv-page .dx-srv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
  .dx-srv-page .dx-srv-facts > div:first-child { grid-column: 1 / -1; }
  .dx-srv-page .dx-srv-facts dt { font-size: 10.5px; margin-bottom: 1px; }
  .dx-srv-page .dx-srv-facts dd { font-size: 13px; flex-wrap: wrap; gap: 4px 8px; }
  .dx-srv-page .dx-srv-facts dd code { font-size: 15px; }
  /* Balanced card: IP line with Copy at the far right and a rule under it; then three even columns with dividers. */
  .dx-srv-page .dx-srv-facts { column-gap: 0; row-gap: 0; grid-template-columns: auto minmax(0, 1fr) auto; }
  .dx-srv-page .dx-srv-facts > div:nth-child(2) { padding-right: 14px; }
  .dx-srv-page .dx-srv-facts > div:first-child { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #e7ece9; }
  .dx-srv-page .dx-srv-facts > div:first-child dd { justify-content: space-between; flex-wrap: nowrap; }
  .dx-srv-page .dx-srv-facts > div:not(:first-child) { padding: 0 10px; min-width: 0; }
  .dx-srv-page .dx-srv-facts > div:nth-child(2) { padding-left: 0; }
  .dx-srv-page .dx-srv-facts > div:not(:first-child):not(:nth-child(2)) { border-left: 1px solid #e7ece9; }
  .dx-srv-page .dx-srv-facts > div:first-child dd, .dx-srv-page .dx-srv-facts > div:last-child dd { white-space: nowrap; }
  .dx-srv-page .dx-srv-facts dd { line-height: 1.3; }
  .dx-srv-page .dx-srv-facts .dx-inline { display: none; }   /* Renew: the Billing row below opens the renewal */
  .dx-srv-page .dx-srv-power { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; width: 100%; }
  .dx-srv-page .dx-srv-power form, .dx-srv-page .dx-srv-power .dx-btn, .dx-srv-page .dx-srv-more, .dx-srv-page .dx-more > summary { width: 100%; }
  .dx-srv-page .dx-more > summary { min-height: 44px; display: flex; align-items: center; justify-content: center; white-space: nowrap; padding: 7px 8px; font-size: 13px; }
  .dx-srv-page .dx-more > summary::after { margin-left: 7px; }
  .dx-srv-page .dx-srv-more:has(details[open]) { grid-column: 1 / -1; }
  .dx-srv-page .dx-tabs { display: none; }
  .dx-acc { display: grid; gap: 8px; margin: 4px 0 8px; }
  .dx-acc-after { margin-top: 8px; }
  .dx-acc-row { position: relative; display: grid; gap: 2px; padding: 13px 44px 13px 16px; border: 1px solid #e0e8e4; border-radius: 12px; background: #fff; color: #1f2a25; text-decoration: none; }
  .dx-acc-row:active { background: #f3f8f6; }
  .dx-acc-row.is-open { border-color: #075c4f; background: #f3f8f6; }
  .dx-acc-t { font-size: 15px; font-weight: 650; }
  .dx-acc-s { font-size: 12.5px; color: #5f6b65; }
  .dx-acc-c { position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2px solid #5f6b65; border-bottom: 2px solid #5f6b65; transform: translateY(-70%) rotate(45deg); }
  .dx-acc-row.is-open .dx-acc-c { transform: translateY(-30%) rotate(225deg); border-color: #075c4f; }
  .dx-acc-row:not(.is-open) .dx-acc-c { transform: translateY(-50%) rotate(-45deg); }
  .dx-srv-page .dx-tab-body > .panel, .dx-srv-page .dx-tab-body .dx-two { margin-top: 0; }
  .dx-srv-page .dx-tab-body:empty { display: none; }
  .dx-acc-row { scroll-margin-top: 12px; }
  .dx-srv-page .dx-tab-body .dx-two > .dx-renew { order: -1; }   /* renewing is what people come to Billing for */
  /* Renewal terms: one per row on phones: term and saving left, price right, details under. */
  .dx-renew-terms { grid-template-columns: 1fr; gap: 8px; }
  .dx-renew-term { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 12px 14px; align-items: baseline; }
  .dx-renew-term .dx-renew-name { grid-column: 1; grid-row: 1; white-space: nowrap; }
  .dx-renew-term .dx-renew-price { grid-column: 2; grid-row: 1; font-size: 18px; text-align: right; }
  .dx-renew-term .dx-renew-per { grid-column: 1; grid-row: 2; }
  .dx-renew-term .dx-renew-cover { grid-column: 2; grid-row: 2; text-align: right; white-space: nowrap; }
  /* The open row already names the section: no second heading right under it (Snapshots keeps its "0 of 1 used"). */
  .dx-srv-page .dx-tab-body > .panel:first-child:not(.dx-snaps) > .dash-h2:first-child,
  .dx-srv-page .dx-tab-body > .dx-two:first-child > .panel:first-child > .dash-h2:first-child { display: none; }
}

/* Location panel on phones: the row above already says where the server is. */
@media (max-width: 650px) { .dx-srv-page .dx-move-intro { display: none; } .dx-srv-page .dx-move-pay-note { font-size: 13px; } .dx-srv-page #mv-submit { width: 100%; justify-content: center; min-height: 44px; font-size: 15px; } }

/* Renewal like the big hosts: period, then how to pay, then one Pay button. */
.dx-renew-via { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.dx-renew-via legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.dx-via { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; padding: 11px 14px; border: 1px solid #d7e1dc; border-radius: 10px; background: #fff; cursor: pointer; }
.dx-via input { grid-row: 1 / span 2; margin: 2px 0 0; accent-color: #075c4f; }
.dx-via:has(input:checked) { border-color: #075c4f; background: #f3f8f6; }
.dx-via.is-off { opacity: .65; cursor: default; }
.dx-via-t { font-weight: 600; font-size: 14px; }
.dx-via-s { font-size: 12.5px; color: #5f6b65; }
.dx-via.is-off .dx-via-s a { pointer-events: auto; }
.dx-renew-go { width: 100%; justify-content: center; margin-top: 14px; min-height: 44px; font-size: 15px; }
.dx-renew-sum { text-align: center; margin: 8px 0 0; }

/* Buy New Server: four terms as one even row; plan rows on phones (owner, 14 Oct 2026). */
.dx-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0 0 18px; background: #eef3f0; border-radius: 12px; max-width: 640px; }
.dx-seg a { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border-radius: 9px; text-decoration: none; color: #36413c; text-align: center; }
.dx-seg a.is-on { background: #fff; box-shadow: 0 1px 3px rgba(16, 40, 30, .15); color: #075c4f; }
.dx-seg-t { font-size: 14px; font-weight: 650; white-space: nowrap; }
.dx-seg-s { font-size: 11.5px; color: #5f6b65; white-space: nowrap; }
.dx-seg a.is-on .dx-seg-s { color: #12805c; }
.dx-plan-rows { display: none; }
@media (max-width: 650px) {
  .dx-fam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
  .dx-fam a { text-align: center; padding: 8px 4px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dx-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; }
  .dx-seg a { padding: 11px 8px; }
  .dx-seg-t { font-size: 15px; }
  .dx-seg-s { font-size: 12px; }
  .dx-plan-table { display: none; }
  .dx-plan-rows { display: grid; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; }
  .dx-plan-rows a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 36px 12px 14px; border: 1px solid #e0e8e4; border-radius: 12px; text-decoration: none; color: #1f2a25; background: #fff; }
  .dx-plan-rows a:active { background: #f3f8f6; }
  .dx-plan-rows a::after { content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; border-right: 2px solid #5f6b65; border-bottom: 2px solid #5f6b65; transform: translateY(-50%) rotate(-45deg); }
  .dx-plan-n { font-weight: 650; font-size: 15px; }
  .dx-plan-p { text-align: right; font-size: 13px; color: #5f6b65; }
  .dx-plan-p strong { font-size: 16px; color: #1f2a25; }
  .dx-plan-s { grid-column: 1 / -1; font-size: 12.5px; color: #5f6b65; }
}

/* Home top section on phones (owner, 14 Oct 2026): even term buttons, no empty line, server-type shortcuts. */
.store-jump { display: none; }
@media (min-width: 651px) {
  /* Four even term buttons on larger screens too: label over saving, never wrapping to a second row. */
  .store-terms .term-toggle, .page-section:has(.plan-grid) .term-toggle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 700px); }
  .store-terms .term-toggle .term-opt, .page-section:has(.plan-grid) .term-toggle .term-opt { flex-direction: column; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; padding: 9px 8px; }
}
@media (max-width: 650px) {
  .store-intro { padding-block: 20px 10px; }
  .store-intro p.hero-description { margin-top: 10px; font-size: .9rem; line-height: 1.55; max-width: none; }
  .store-terms { padding-block: 6px 16px; }
  .store-terms .term-toggle .term-opt { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 6px; }
  .store-terms .term-opt span, .term-toggle .term-opt span { font-size: .84rem; font-weight: 650; }
  .store-terms .term-opt small, .term-toggle .term-opt small { font-size: .68rem; }
  .store-terms .term-toggle .term-opt, .term-toggle .term-opt { min-height: 46px; padding: 7px 4px; }
  /* Centred on phones: headline, description and the term note. */
  .store-intro .wrap { text-align: center; }
  .store-intro h1 { margin-inline: auto; }
  .store-terms, .store-terms .term-note, .term-note { text-align: center; }
  .store-terms .term-note[aria-hidden="true"] { display: none; }
  .store-terms .term-note { min-height: 0; margin-top: 8px; }
  .store-jump { display: block; position: sticky; top: 0; z-index: 5; background: var(--paper, #f6f6f2); border-bottom: 1px solid var(--line, #e3e6e1); }
  .store-jump .wrap { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
  .store-jump .wrap::-webkit-scrollbar { display: none; }
  .store-jump a { flex: none; padding: 7px 12px; border: 1px solid #d7e1dc; border-radius: 999px; background: #fff; font-size: 13px; color: #1f2a25; text-decoration: none; white-space: nowrap; }
  .store-plans { scroll-margin-top: 56px; }
  /* Compact plan cards: name and price on one line, specs in two columns, one button. */
  .store-plans .plan-grid .plan-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 16px; }
  .store-plans .plan-grid .plan-card .plan-top { grid-column: 1; grid-row: 1; margin: 0; align-self: center; flex-wrap: wrap; gap: 6px; }
  .store-plans .plan-grid .plan-card .plan-top h3 { font-size: 1.05rem; margin: 0; }
  .store-plans .plan-grid .plan-card .price { grid-column: 2; grid-row: 1; margin: 0; text-align: right; display: block; white-space: nowrap; }
  .store-plans .plan-grid .plan-card .price span { display: inline; }
  .store-plans .plan-grid .plan-card .price strong { font-size: 1.45rem; }
  .store-plans .plan-grid .plan-card .price span { font-size: .78rem; margin-left: 2px; }
  .store-plans .plan-grid .plan-card .price-sub { grid-column: 1 / -1; margin: 0; text-align: right; font-size: .78rem; }
  .store-plans .plan-grid .plan-card .specs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 10px 0 12px; padding: 10px 0 0; border-top: 1px solid var(--line, #e3e6e1); }
  .store-plans .plan-grid .plan-card .specs div { display: block; padding: 0; border: 0; }
  .store-plans .plan-grid .plan-card .specs dt { font-size: .72rem; color: var(--muted, #6b7771); }
  .store-plans .plan-grid .plan-card .specs dd { margin: 0; text-align: left; font-size: .86rem; font-weight: 600; }
  .store-plans .plan-grid .plan-card .btn { grid-column: 1 / -1; min-height: 44px; padding-block: 10px; }
}

/* Home on phones: the description under the headline left-aligned and a little smaller (owner, 14 Oct 2026). */
@media (max-width: 650px) { .store-intro p.hero-description { text-align: left; font-size: .84rem; line-height: 1.55; } }

/* Waiting payments on the Balance page: one tidy row each (owner, 14 Oct 2026). */
.dx-notice.dx-open { display: block; }
.dx-notice.dx-open > p { margin-bottom: 2px; }
.dx-open-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.dx-open-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px; padding: 12px 14px; background: #fff; border: 1px solid #efe4c8; border-radius: 10px; font-size: 13.5px; }
.dx-open-what { display: grid; gap: 1px; min-width: 0; }
.dx-open-what strong { font-size: 14px; color: #24322f; }
.dx-open-what small { font-size: 12px; color: #6b7771; }
.dx-notice .dx-open-go { background: #075c4f; border-color: #075c4f; color: #fff; }
.dx-open-amt { font-weight: 700; font-size: 15px; white-space: nowrap; }
.dx-open-go { white-space: nowrap; }
@media (max-width: 650px) {
  .dx-open-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .dx-open-go { grid-column: 1 / -1; width: 100%; justify-content: center; min-height: 42px; }
}

/* Power progress on the server card (owner, 14 Oct 2026). */
.dx-power.is-busy::before { background: #c58a12; animation: dx-pulse 1.1s ease-in-out infinite; }
@keyframes dx-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.dx-pw { margin-top: 14px; padding: 14px 16px; border: 1px solid #d9e7e1; border-radius: 10px; background: #f6faf8; }
.dx-pw-top { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #1f2a25; }
.dx-pw-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cfe0d9; border-top-color: #075c4f; animation: dx-spin .8s linear infinite; flex: none; }
@keyframes dx-spin { to { transform: rotate(360deg); } }
.dx-pw-bar { position: relative; height: 4px; margin: 12px 0 10px; border-radius: 4px; background: #dfeae5; overflow: hidden; }
.dx-pw-bar span { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 4px; background: #075c4f; animation: dx-slide 1.4s ease-in-out infinite; }
@keyframes dx-slide { 0% { left: -40%; } 100% { left: 100%; } }
.dx-pw-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: #8a9590; }
.dx-pw-steps li { display: inline-flex; align-items: center; gap: 6px; }
.dx-pw-steps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #c3d0ca; box-sizing: border-box; }
.dx-pw-steps li.is-done { color: #1f2a25; }
.dx-pw-steps li.is-done::before { background: #12805c; border-color: #12805c; }
.dx-pw-steps li.is-now { color: #075c4f; font-weight: 650; }
.dx-pw-steps li.is-now::before { border-color: #075c4f; animation: dx-pulse 1.1s ease-in-out infinite; }
.dx-pw-note { margin: 10px 0 0; font-size: 12.5px; color: #5f6b65; }
.dx-pw-note:empty { display: none; }
.dx-pw.is-done .dx-pw-spin { animation: none; border-color: #12805c; background: #12805c; }
.dx-pw.is-done .dx-pw-bar span { animation: none; left: 0; width: 100%; background: #12805c; }
.dx-pw.is-slow .dx-pw-bar span { background: #c58a12; }
@media (max-width: 650px) {
  .dx-pw { padding: 12px 14px; }
  .dx-pw-steps { gap: 6px 14px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-pw-spin, .dx-pw-bar span, .dx-power.is-busy::before, .dx-pw-steps li.is-now::before { animation: none; }
  .dx-pw-bar span { left: 0; width: 60%; }
}

/* Phone pricing rows: a small term label over each price (owner, 14 Oct 2026). */
@media (max-width: 650px) {
  /* Phone pricing rows: a small term label over each price. */
  .mp-prices > span { gap: 1px; }
  .mp-prices em { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
  .mp-prices b i { font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--muted); margin-left: 1px; }
  .mp-prices small { white-space: nowrap; }
  .mp-prices > span:first-child small { color: var(--muted); font-weight: 500; }
}

/* Term cards everywhere (owner's mockup, 14 Oct 2026): outlined cards, term over its saving; the chosen one light
   green with a green border. Four in a row on wider screens, 2 x 2 on phones. */
.term-toggle, .store-terms .term-toggle, .page-section:has(.plan-grid) .term-toggle {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(100%, 720px);
  padding: 0; background: none; border: 0; border-radius: 0; }
.store-terms .term-toggle { margin-inline: 0; }
.page-section:has(.plan-grid) .term-toggle { margin: 0 0 32px; }
.term-toggle .term-opt, .store-terms .term-toggle .term-opt, .page-section:has(.plan-grid) .term-toggle .term-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px;
  padding: 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
  white-space: nowrap; line-height: 1.25; text-align: center; }
.term-toggle .term-opt:not(.is-on):hover { border-color: var(--accent); background: var(--surface); color: var(--ink); }
.term-toggle .term-opt span, .store-terms .term-opt span { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.term-toggle .term-opt small, .store-terms .term-opt small { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); opacity: 1; }
.term-toggle .term-opt small::first-letter { text-transform: uppercase; }
.term-toggle .term-opt.is-on, .store-terms .term-toggle .term-opt.is-on, .store-terms .term-opt[aria-current="true"],
.page-section:has(.plan-grid) .term-toggle .term-opt.is-on {
  border: 2px solid var(--accent); padding: 9px 7px; background: var(--accent-soft); color: var(--ink); }
.term-toggle .term-opt.is-on small, .store-terms .term-opt[aria-current="true"] small { color: var(--ink-2); }
@media (max-width: 650px) {
  .term-toggle, .store-terms .term-toggle, .page-section:has(.plan-grid) .term-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; padding: 0; border-radius: 0; }
  .term-toggle .term-opt, .store-terms .term-toggle .term-opt, .page-section:has(.plan-grid) .term-toggle .term-opt { min-height: 62px; }
  .page-section:has(.plan-grid) .term-toggle { margin-bottom: 24px; }
}

/* Home hero (owner's mockup, 14 Oct 2026). */
.store-intro.hb-hero { background: var(--surface); padding-block: 40px 0; text-align: left; }
.hb-hero .wrap { text-align: left; }
.hb-eyebrow { margin: 0 0 14px; color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.store-intro.hb-hero h1 { margin: 0; max-width: none; color: var(--ink); font-size: clamp(2.3rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.06; letter-spacing: -.045em; }
.store-intro.hb-hero h1 span { color: var(--accent); }
.store-intro.hb-hero p.hero-description { margin: 18px 0 0; max-width: 46ch; color: var(--ink-2); font-size: 1.05rem; line-height: 1.5; }
.hb-buy { display: flex; align-items: flex-end; justify-content: flex-start; gap: 16px 40px; flex-wrap: wrap; margin-top: 28px; }
.hb-from { margin: 0; display: grid; gap: 2px; }
.hb-from span { color: var(--muted); font-size: .92rem; }
.hb-from strong { font-size: 2.7rem; font-weight: 800; line-height: 1; letter-spacing: -.045em; color: var(--ink); white-space: nowrap; }
.hb-from small { margin-left: 4px; font-size: 1.05rem; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.btn.hb-view { padding: 15px 24px; font-size: 1rem; font-weight: 700; border-radius: 8px; min-height: 0; }
.hb-facts { list-style: none; display: flex; align-items: center; gap: 12px; margin: 20px 0 0; padding: 0 0 24px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .95rem; }
.hb-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hb-facts svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hb-facts .hb-dot { color: var(--muted); font-size: .8rem; }
.hb-hero + .store-terms { background: var(--surface); padding-block: 22px 26px; }
.hb-hero + .store-terms .wrap { text-align: left; }
.hb-hero + .store-terms .term-note { margin-top: 10px; min-height: 0; text-align: left; color: var(--muted); font-size: .82rem; }
.hb-hero + .store-terms .term-note[aria-hidden="true"] { display: none; }
.store-jump a.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (max-width: 650px) {
  .store-intro.hb-hero { padding-block: 26px 0; }
  .store-intro.hb-hero .wrap { text-align: left; }
  .store-intro.hb-hero h1 { text-align: left; margin-inline: 0; }
  .store-intro.hb-hero h1 { font-size: 2.35rem; }
  .store-intro.hb-hero p.hero-description { margin-top: 14px; font-size: 1rem; max-width: none; }
  .hb-buy { justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: nowrap; }
  .hb-from strong { font-size: 2.35rem; }
  .btn.hb-view { padding: 13px 18px; font-size: .98rem; white-space: nowrap; }
  .hb-facts { margin-top: 16px; padding-bottom: 20px; font-size: .92rem; }
  .hb-hero + .store-terms { padding-block: 20px 22px; }
  .hb-hero + .store-terms .term-note { text-align: center; }
}
@media (max-width: 359px) {
  .store-intro.hb-hero h1 { font-size: 2.05rem; }
  .hb-from strong { font-size: 2rem; }
  .btn.hb-view { padding: 12px 14px; }
}

/* Phone pricing rows, smaller type so more plans fit on screen (owner, 14 Oct 2026). */
@media (max-width: 640px) {
  .mplans { gap: 6px; }
  .mp-row { padding: 9px 11px 8px; border-radius: 9px; }
  .mp-name strong { font-size: 13.5px; }
  .mp-specs { font-size: 11px; }
  .mp-prices { margin-top: 5px; padding-top: 5px; column-gap: 4px; }
  .mp-prices em { font-size: 9px; }
  .mp-prices b, .mplans.is-win .mp-prices b { font-size: 12.5px; }
  .mp-prices b i { font-size: 9.5px; }
  .mp-prices small { font-size: 9.5px; }
  .price-group-head h2 { font-size: 1.1rem; }
  .price-group-head p { font-size: .78rem; }
}
@media (max-width: 640px) { .page-heading .lead { font-size: .92rem; line-height: 1.55; } }

/* Order form term cards, as on the storefront (owner's mockup, 14 Oct 2026): term, saving, then the monthly price;
   the chosen one light green with a green border. Four in a row, 2 x 2 on phones. */
.term-choice, .dash-body .dx-main .term-choice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.term-choice .term-pick { flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 76px;
  padding: 10px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: center; line-height: 1.25; }
.term-choice .term-pick::before { content: none; display: none; }
.term-choice .term-pick.is-on, .term-choice .term-pick:has(input:checked) { border: 2px solid var(--accent); background: var(--accent-soft); padding: 9px 5px; }
.term-choice .term-pick-name { order: 0; font-size: 1rem; font-weight: 700; white-space: nowrap; }
.term-choice .term-pick-save { order: 1; padding: 0; background: none; border-radius: 0; font-size: .78rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.term-choice .term-pick.is-on .term-pick-save, .term-choice .term-pick:has(input:checked) .term-pick-save { background: none; color: var(--ink-2); }
.term-choice .term-pick-save:not(.is-none) { color: var(--accent); font-weight: 650; }
.term-choice .term-pick-price { order: 2; margin: 3px 0 0; font-size: .9rem; font-weight: 650; color: var(--ink); white-space: nowrap; }
@media (max-width: 650px) {
  .term-choice, .dash-body .dx-main .term-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .term-choice .term-pick { flex-direction: column; align-items: center; min-height: 78px; padding: 10px 6px; }
  .term-choice .term-pick.is-on, .term-choice .term-pick:has(input:checked) { padding: 9px 5px; }
  .term-choice .term-pick-name { font-size: 1rem; }
  .term-choice .term-pick-price { margin-left: 0; font-size: .92rem; }
}

/* Dashboard Buy New Server term buttons: the same outlined cards. */
.dx-seg { gap: 10px; padding: 0; background: none; border-radius: 0; }
.dx-seg a { padding: 10px 6px; border: 1px solid #dfe7e3; border-radius: 10px; background: #fff; color: #1f2a25; }
.dx-seg a:not(.is-on):hover { border-color: #075c4f; }
.dx-seg a.is-on { border: 2px solid #075c4f; padding: 9px 5px; background: #e4f1e9; box-shadow: none; color: #1f2a25; }
.dx-seg-t { font-weight: 700; }
.dx-seg-s { display: block; }
.dx-seg-s::first-letter { text-transform: uppercase; }
.dx-seg a.is-on .dx-seg-s { color: #36413c; }
@media (max-width: 650px) {
  .dx-seg { gap: 10px; padding: 0; }
  .dx-seg a { padding: 11px 6px; }
  .dx-seg a.is-on { padding: 10px 5px; }
}

/* Home plan cards on phones: an icon beside each spec instead of its label (owner's mockup). */
.plan-card .specs .sp-ic, .plan-card .specs .sp-ph { display: none; }
@media (max-width: 650px) {
  .store-plans .plan-grid .plan-card .specs { gap: 10px 14px; }
  .store-plans .plan-grid .plan-card .specs div { display: flex; align-items: center; justify-content: flex-start; gap: 9px; min-width: 0; }
  .store-plans .plan-grid .plan-card .specs .sp-ic { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .store-plans .plan-grid .plan-card .specs dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .store-plans .plan-grid .plan-card .specs dd { margin: 0; text-align: left; font-size: .9rem; font-weight: 500; white-space: nowrap; }
  .store-plans .plan-grid .plan-card .specs .sp-ph { display: inline; }
  .store-plans .plan-grid .plan-card .specs .sp-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Product pages on phones: the compact home plan card with spec icons (owner, 14 Oct 2026). */
@media (max-width: 650px) {
  .cat-plans { gap: 12px; }
  .cat-plans .plan-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 16px; }
  .cat-plans .plan-card.popular { padding: 13px 15px; }
  .cat-plans .plan-card .plan-top { grid-column: 1; grid-row: 1; margin: 0; align-self: center; flex-wrap: wrap; gap: 6px; }
  .cat-plans .plan-card .plan-top h2 { font-size: 1.05rem; margin: 0; }
  .cat-plans .plan-card .price { grid-column: 2; grid-row: 1; margin: 0; text-align: right; display: block; white-space: nowrap; }
  .cat-plans .plan-card .price strong { font-size: 1.45rem; }
  .cat-plans .plan-card .price > span, .cat-plans .plan-card .price span { display: inline; margin: 0 0 0 2px; font-size: .78rem; }
  .cat-plans .plan-card .price-sub { grid-column: 1 / -1; margin: 0; text-align: right; font-size: .78rem; }
  .cat-plans .plan-card .specs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 10px 0 12px; padding: 10px 0 0; border-top: 1px solid var(--line); }
  .cat-plans .plan-card .specs div { display: flex; align-items: center; justify-content: flex-start; gap: 9px; min-width: 0; padding: 0; border: 0; }
  .cat-plans .plan-card .specs .sp-wide { grid-column: 1 / -1; }
  .cat-plans .plan-card .specs .sp-ic { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .cat-plans .plan-card .specs dt, .cat-plans .plan-card .specs .sp-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cat-plans .plan-card .specs dd { margin: 0; text-align: left; font-size: .9rem; font-weight: 500; white-space: nowrap; }
  .cat-plans .plan-card .specs .sp-ph { display: inline; }
  .cat-plans .plan-card .specs .sp-desk { display: none; }
  .cat-plans .plan-card .btn { grid-column: 1 / -1; min-height: 44px; padding-block: 10px; margin-top: 0; }
}

/* Approved desktop hero server illustration — 14 October 2026. */
.hb-hero-art { display: none; }
@media (min-width: 1001px) {
  .store-intro.hb-hero .wrap { position: relative; }
  .hb-hero-art { display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 40%; max-width: 520px; height: auto; pointer-events: none; }
  .store-intro.hb-hero h1, .store-intro.hb-hero p.hero-description, .store-intro.hb-hero .hb-buy { max-width: 57%; }
}

/* Add-ons on the Billing tab (owner, 14 Oct 2026). */
.dx-addons .dx-addon { display: block; padding: 14px 0; border-top: 1px solid #e7ece9; }
.dx-addons .dx-addon:first-of-type { border-top: 0; padding-top: 4px; }
.dx-addon-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dx-addon-t { display: grid; gap: 1px; }
.dx-addon-t strong { font-size: 15px; color: #1f2a25; }
.dx-addon-p { font-size: 13px; color: #5f6b65; }
.dx-addon .hint { margin: 6px 0 0; }
.dx-badge.is-off { background: #f1f4f2; color: #5f6b65; }
.dx-badge.is-on { background: #e4f1e9; color: #0c6b4f; }
.dx-badge.is-wait { background: #fdf4e3; color: #8a5a00; }
.dx-addon-buy { margin-top: 10px; }
.dx-addon-buy > summary { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; border: 1px solid #cfdcd6; border-radius: 8px;
  background: #fff; color: #075c4f; font-weight: 650; font-size: 13.5px; cursor: pointer; list-style: none; }
.dx-addon-buy > summary::-webkit-details-marker { display: none; }
.dx-addon-buy[open] > summary { margin-bottom: 10px; }
.dx-addon-buy form { padding: 12px 14px; border: 1px solid #e0e8e4; border-radius: 10px; background: #f8fbf9; }
.dx-addon-buy form p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
.dx-addon-buy form .hint { margin: 8px 0 0; }
.dx-addon-keep { margin-top: 10px; }
@media (max-width: 650px) {
  .dx-addon-buy > summary, .dx-addon-buy .dx-btn, .dx-addon-keep .dx-btn { width: 100%; justify-content: center; }
}

/* History tab, upgrade and extra-IP requests (owner, 14 Oct 2026). */
.dx-tl { list-style: none; margin: 4px 0 12px; padding: 0 0 0 16px; border-left: 2px solid #e1e9e5; }
.dx-tl li { position: relative; display: grid; gap: 1px; padding: 8px 0 8px 6px; }
.dx-tl li::before { content: ""; position: absolute; left: -22px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #12805c; }
.dx-tl li.is-bad::before { border-color: #b42318; }
.dx-tl time { font-size: 12px; color: #6b7771; }
.dx-tl span { font-size: 14px; color: #1f2a25; }
.dx-tl li.is-bad span { color: #b42318; }
.dx-request { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.dx-request > div { flex: 1 1 280px; }
.dx-request .hint { margin: 4px 0 0; }
.dx-up-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.dx-up-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 14px; padding: 11px 13px; border: 1px solid #e0e8e4; border-radius: 10px; }
.dx-up-n { display: grid; gap: 1px; min-width: 0; }
.dx-up-n strong { font-size: 14.5px; }
.dx-up-n small { font-size: 12px; color: #6b7771; }
.dx-up-p { font-weight: 700; white-space: nowrap; }
.dx-up-p small { font-weight: 500; color: #6b7771; font-size: 11.5px; margin-left: 1px; }
@media (max-width: 650px) {
  .dx-request .dx-btn { width: 100%; justify-content: center; }
  .dx-up-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .dx-up-list li .dx-btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

/* Desktop hero: "Cryptocurrency payments." on its own second line (owner, 14 Oct 2026). */
.hb-br-desk { display: none; }
@media (min-width: 651px) { .hb-br-desk { display: inline; } }

/* Snapshot rename and reverse-DNS removal (owner, 14 Oct 2026). */
.dx-snap-note { display: block; font-size: 12.5px; color: #36413c; margin-top: 2px; }
.dx-snap-edit > summary { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid #d7e1dc; border-radius: 8px;
  background: #fff; color: #36413c; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.dx-snap-edit > summary::-webkit-details-marker { display: none; }
.dx-snap-edit form { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border: 1px solid #e0e8e4; border-radius: 10px; background: #f8fbf9; min-width: 240px; }
.dx-snap-edit label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: #36413c; }
.dx-snap-edit input { font-size: 14px; padding: 8px 10px; border: 1px solid #d7e1dc; border-radius: 7px; }
.dx-opt { font-weight: 400; color: #8a9590; }
.dx-ptr-del { margin: 6px 0 0; }
.dx-linkbtn { background: none; border: 0; padding: 0; color: #b42318; font-size: 13px; text-decoration: underline; cursor: pointer; }
@media (max-width: 650px) { .dx-snap-edit, .dx-snap-edit > summary { width: 100%; justify-content: center; } .dx-snap-edit form { min-width: 0; } }

@media (max-width: 650px) {
  .dx-snap-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .dx-snap-acts > details, .dx-snap-acts > form { min-width: 0; margin: 0; }
  .dx-snap-acts > details > summary, .dx-snap-acts > form > .dx-btn { width: 100%; min-height: 40px; justify-content: center; box-sizing: border-box; }
  .dx-snap-acts > details[open] { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
  .dx-snap-acts > details > summary, .dx-snap-acts > form > .dx-btn { display: flex; align-items: center; height: 40px; padding: 0 8px; margin: 0; font-size: 13px; }
}

/* Advanced order options, reinstall options and the saved SSH key (owner, 14 Oct 2026). */
.adv-opts > summary { cursor: pointer; font-size: .84rem; font-weight: 650; list-style: none; display: flex; align-items: center; gap: 8px; }
.adv-opts > summary::-webkit-details-marker { display: none; }
.adv-opts > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.adv-opts[open] > summary::before { transform: rotate(45deg); }
.adv-body { margin-top: 12px; display: grid; gap: 8px; }
.adv-user { border: 0; padding: 0; margin: 0 0 6px; display: grid; gap: 6px; }
.adv-user legend { font-size: .84rem; font-weight: 650; margin-bottom: 6px; }
.adv-user label { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; line-height: 1.4; }
.adv-body textarea, .dx-key-edit textarea, #re-key, #re-ud { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.re-opt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 4px 0; font-weight: 500; }
.dx-key-edit > summary { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; border: 1px solid #cfdcd6; border-radius: 8px;
  background: #fff; color: #075c4f; font-weight: 650; font-size: 13.5px; cursor: pointer; list-style: none; }
.dx-key-edit > summary::-webkit-details-marker { display: none; }
.dx-key-edit form { display: grid; gap: 8px; margin-top: 10px; }
.dx-key-edit textarea { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #d7e1dc; border-radius: 8px; }
.dx-key-edit .hint { margin: 0; }

.adv-user input[type="radio"], .re-opt input[type="radio"] { appearance: auto; -webkit-appearance: radio; flex: none; width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; padding: 0; border: 0; box-shadow: none; accent-color: #075c4f; }
.adv-user label, .re-opt { font-weight: 400; color: var(--ink-2, #36413c); }
.adv-user label strong { font-weight: 650; color: var(--ink, #1f2a25); }

/* Health check (owner, 14 Oct 2026). */
.dx-health-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.dx-health-head > div { flex: 1 1 260px; }
.dx-health-head .hint { margin: 4px 0 0; }
.dx-health-sum { margin: 14px 0 6px; font-weight: 650; font-size: 14.5px; }
.dx-health-sum.is-ok { color: #0c6b4f; }
.dx-health-sum.is-bad { color: #8a5a00; }
.dx-health-sum span { margin-left: 8px; font-weight: 400; font-size: 12px; color: #6b7771; }
.dx-health-list { list-style: none; margin: 0; padding: 0; }
.dx-health-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid #e7ece9; font-size: 13.5px; }
.dx-health-list strong { margin-right: 4px; }
.dx-health-list p { margin: 3px 0 0; font-size: 12.5px; color: #5f6b65; }
.dx-hc-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #9aa5a0; }
.dx-health-list .is-ok .dx-hc-dot { background: #12805c; }
.dx-health-list .is-warn .dx-hc-dot { background: #c58a12; }
.dx-health-list .is-bad .dx-hc-dot { background: #b42318; }
.dx-health-list .is-info .dx-hc-dot { background: #6b8fb8; }
.dx-health-list .is-skip .dx-hc-dot { background: #fff; border: 2px solid #b9c6c0; box-sizing: border-box; }
@media (max-width: 650px) { .dx-health-head .dx-btn { width: 100%; justify-content: center; } }

/* Approved white mobile storefront menu, 14 October 2026. */
.mm-heading, .mm-icon, .mm-chevron { display: none; }
@media (max-width: 899px) {
  .site-head .nav-strip:not(.is-account) { background: #fff; color: #20332d; }
  .site-head .nav-strip:not(.is-account) > .wrap { padding-block: 12px 20px; }
  .site-head .nav-strip:not(.is-account) .mm-heading { display: block; margin: 0 12px 6px; color: #7b8782; font-size: .72rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
  .site-head .nav-strip:not(.is-account) .site-nav { gap: 2px; }
  .site-head .nav-strip:not(.is-account) .site-nav a,
  .site-head .nav-strip:not(.is-account) .mm-help a { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 10px 12px; border: 0; border-radius: 8px; color: #20332d; opacity: 1; font-size: 1rem; font-weight: 500; text-decoration: none; }
  .site-head .nav-strip:not(.is-account) .site-nav a[aria-current] { border: 0; padding-left: 12px; background: #eaf5ef; color: #075c4f; font-weight: 650; }
  .site-head .nav-strip:not(.is-account) .mm-icon { display: block; flex: none; width: 23px; height: 23px; fill: none; stroke: #075c4f; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .site-head .nav-strip:not(.is-account) .mm-chevron { display: block; margin-left: auto; color: #64736c; font-size: 1.6rem; line-height: 1; }
  .site-head .nav-strip:not(.is-account) .mobile-menu-more { display: block; padding: 0; border: 0; margin-top: 20px; }
  .mm-help { display: grid; gap: 2px; }
  .site-head .nav-strip:not(.is-account) .mm-account { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 12px 0; }
  .site-head .nav-strip:not(.is-account) .mm-account a,
  .site-head .nav-strip:not(.is-account) .mm-account button { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 6px; border: 1px solid #075c4f; border-radius: 8px; background: #fff; color: #075c4f; font: inherit; font-size: .92rem; font-weight: 650; text-decoration: none; width: 100%; cursor: pointer; }
  .site-head .nav-strip:not(.is-account) .mm-account .mm-primary { background: #075c4f; color: #fff; }
  .mm-account form { margin: 0; }
  .mm-tagline { margin: 16px 0 0; color: #7b8782; text-align: center; font-size: .78rem; }
  .nav-checkbox:checked ~ .head-inner .nav-burger .burger { background: transparent; }
  .nav-checkbox:checked ~ .head-inner .nav-burger .burger::before { top: 0; transform: rotate(45deg); }
  .nav-checkbox:checked ~ .head-inner .nav-burger .burger::after { top: -2px; transform: rotate(-45deg); }
  .nav-checkbox:focus-visible ~ .head-inner .nav-burger { outline: 3px solid var(--focus); outline-offset: 3px; }
  .site-head .nav-strip:not(.is-account) a:focus-visible,
  .site-head .nav-strip:not(.is-account) button:focus-visible { outline: 3px solid #8acdb8; outline-offset: 2px; }
}

/* Firewall (owner, 14 Oct 2026). */
.dx-fw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dx-fw-head .hint { margin: 4px 0 0; }
.dx-fw-rules { list-style: none; margin: 12px 0 10px; padding: 0; }
.dx-fw-rules li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #e7ece9; }
.dx-fw-rules li > span { display: grid; gap: 1px; min-width: 0; }
.dx-fw-rules strong { font-size: 14px; }
.dx-fw-rules small { font-size: 12.5px; color: #5f6b65; overflow-wrap: anywhere; }
.dx-fw-rules form { margin: 0; }
.dx-fw-add > summary { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; border: 1px solid #cfdcd6; border-radius: 8px;
  background: #fff; color: #075c4f; font-weight: 650; font-size: 13.5px; cursor: pointer; list-style: none; }
.dx-fw-add > summary::-webkit-details-marker { display: none; }
.dx-fw-add form { display: grid; gap: 10px; margin-top: 10px; padding: 12px 14px; border: 1px solid #e0e8e4; border-radius: 10px; background: #f8fbf9; }
.dx-fw-add label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: #36413c; }
.dx-fw-add input, .dx-fw-add select { font-size: 14px; padding: 8px 10px; border: 1px solid #d7e1dc; border-radius: 7px; background: #fff; }
.dx-fw-custom { display: none; gap: 10px; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); }
.dx-fw-add form:has(select[name="preset"] option[value="custom"]:checked) .dx-fw-custom { display: grid; }
.dx-fw-switch { margin-top: 14px; display: grid; gap: 10px; justify-items: start; }
.dx-fw-switch .callout { margin: 0; }
@media (max-width: 650px) {
  .dx-fw-custom { grid-template-columns: 1fr; }
  .dx-fw-add, .dx-fw-add > summary, .dx-fw-switch .dx-btn { width: 100%; justify-content: center; }
  .dx-fw-switch { justify-items: stretch; }
}

/* Order agreement: compact readable text aligned with the checkbox. */
.field.order-agree .agree-check { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; justify-content: start; gap: 10px; margin: 0; font-size: 13px; font-weight: 400; line-height: 1.55; }
.field.order-agree .agree-check input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; padding: 0; }
.field.order-agree .agree-check > span { min-width: 0; }
.field.order-agree .hint { margin: 7px 0 0 28px; font-size: 12px; line-height: 1.5; }
.field.order-agree .error { margin-left: 28px; }

/* Compact checkout with full balance, split and cryptocurrency payment choices. */
.pay-wrap, .dash-body .dx-main .pay-wrap { max-width: 720px; width: min(100%, 720px); margin-inline: auto; }
body:has(.pay-wrap) .page-section { padding-block: 24px 36px; }
.pay-summary { gap: 12px; padding: 16px 20px; }
.pay-panel { padding: 22px; }
.pay-head { margin-bottom: 16px; padding-bottom: 14px; }
.pay-options { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
.pay-options legend { margin-bottom: 8px; font-size: .88rem; font-weight: 650; }
.pay-options label { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.pay-options label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pay-options input { flex: none; width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--accent); }
.pay-options strong { display: block; font-size: .92rem; }
.pay-options small { display: block; margin-top: 3px; font-size: .8rem; color: var(--ink-2); line-height: 1.45; }
.pay-options-note { margin: -5px 0 15px; }
.pay-panel form:has(input[name="payment_mode"][value="balance"]:checked) .coin-grid,
.pay-panel form:has(input[name="payment_mode"][value="balance"]:checked) .pay-step { display: none; }
.pay-split-total { margin-bottom: 8px; font-size: .92rem; font-weight: 650; }
@media (max-width: 650px) {
  .pay-panel { padding: 16px; }
  .pay-summary { grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
  .pay-head h1 { font-size: 1.3rem; }
  .pay-head .lead { font-size: .82rem; }
  .pay-options label { padding: 11px; }
  .pay-body { gap: 16px; }
}

.pay-test-qr { line-height: 1.5; display: grid; place-content: center; gap: 6px; width: 170px; height: 140px; margin: 0 auto; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: .84rem; text-align: center; }

/* More breathing room around desktop dashboard content (owner request). */
@media (min-width: 1024px) {
  .dash-body .dx-main { width: 100%; max-width: 1440px; padding-inline: clamp(48px, 5vw, 88px); }
}

/* Customers' extra IP addresses (owner, 14 Oct 2026). */
.dx-ip-list { list-style: none; margin: 8px 0 10px; padding: 0; }
.dx-ip-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid #e7ece9; }
.dx-ip-list li > span { display: grid; gap: 2px; }
.dx-ip-list code { font-size: 14.5px; }
.dx-ip-list small { font-size: 12.5px; color: #5f6b65; }
.dx-ip-list form { margin: 0; }
@media (max-width: 650px) { .dx-ip-list form, .dx-ip-list .dx-btn { width: 100%; justify-content: center; } }


.dx-ip-confirm { max-width: 340px; }
.dx-ip-confirm summary { cursor: pointer; color: #075c4f; font-size: 14px; font-weight: 600; }
.dx-ip-confirm label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; margin: 10px 0; }
.dx-ip-confirm input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: #075c4f; }

/* Larger centered desktop server-management navigation, with local SVG icons. */
.dx-tab-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 651px) {
  .dx-srv-page .dx-tabs { justify-content: flex-start; gap: 4px; margin: 8px 0 24px; }
  .dx-srv-page .dx-tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 20px; min-height: 54px; font-size: 16px; }
}
@media (min-width: 651px) and (max-width: 1100px) {
  .dx-srv-page .dx-tabs a { font-size: 15px; padding-inline: 12px; }
}

/* Keep server sections inside the shared content edges. */
.dx-srv-page, .dx-srv-page .dx-tab-body, .dx-srv-page .panel { min-width: 0; }
.dx-srv-page .panel input:not([type="checkbox"]):not([type="radio"]), .dx-srv-page .panel select, .dx-srv-page .panel textarea { max-width: 100%; }
.dx-srv-page .receipt-table { overflow-wrap: anywhere; }
@media (min-width: 651px) {
  .dx-srv-page .dx-srv-power { gap: 4px; align-items: center; }
}

/* Overview: login and server specification are two equal desktop cards. */
.dx-overview-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.dx-overview-cards > .panel { min-width: 0; margin-bottom: 0; }
.dx-overview-name { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line, #d7e1dc); }
.dx-overview-cards .cred-list > div { min-width: 0; }
.dx-overview-cards .cred-list dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .dx-overview-cards { grid-template-columns: minmax(0, 1fr); } }

/* Launch: minimal server page (owner, 14 Oct 2026) — Restart/Start, login details with the VNC console, Billing. */
.dx-vnc .hint { margin: 4px 0 10px; }
.dx-vnc .cred-list { margin: 0 0 12px; }
.dx-vnc-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.45; color: #36413c; }
.dx-vnc-steps code { font-size: 12.5px; }
.dx-vnc form { margin: 0; }
.dx-vnc form + .hint { margin-top: 8px; font-size: 12.5px; }
@media (max-width: 650px) {
  .dx-srv-page .dx-srv-power:not(:has(.dx-srv-more)) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .dx-vnc .dx-btn { width: 100%; justify-content: center; }
  .dx-srv-page .dx-tab-body .dx-overview-cards > .panel:first-child > .dash-h2:first-child { display: none; }
}

/* Browser console (owner, 14 Oct 2026). */
.dx-console-card form { margin: 4px 0 0; }
.dx-console-card .hint { margin: 4px 0 10px; }
.dx-console { display: grid; gap: 12px; }
.dx-console-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.dx-console-title h1 { margin: 2px 0 0; font-size: 20px; }
.dx-console-title h1 span { font-size: 13px; font-weight: 500; color: #5f6b65; margin-left: 6px; }
.dx-console-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dx-console-actions form { margin: 0; }
.dx-console-status { font-size: 13px; color: #5f6b65; padding: 0 4px; }
.dx-console-status.is-ok { color: #0c6b4f; font-weight: 600; }
.dx-console-status.is-bad { color: #b42318; font-weight: 600; }
.dx-console-screen { height: calc(100vh - 220px); min-height: 360px; background: #111816; border-radius: 10px; overflow: hidden; outline: none; }
.dx-console-screen:focus-visible { box-shadow: 0 0 0 3px #8acdb8; }
.dx-console-hint { margin: 0; }
@media (max-width: 650px) {
  .dx-console-card .dx-btn { width: 100%; justify-content: center; }
  .dx-console-screen { height: 60vh; min-height: 260px; }
  .dx-console-actions { width: 100%; }
  .dx-console-actions .dx-btn { flex: 1 1 auto; justify-content: center; }
}

/* Billing tab: Billing, Renew, Payments for this server and Cancel, one full-width row each (owner, 14 Oct 2026). */
.dx-two.dx-bill-stack { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.dx-bill-stack + .panel, .dx-bill-stack ~ .dx-cancel { margin-top: 18px; }
.dx-overview-cards { align-items: start; }

/* Bottom of the server page and the dashboard footer, tidier on phones (owner, 14 Oct 2026). */
.dx-help-card { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 22px;
  padding: 16px 18px; border: 1px solid #e0e8e4; border-radius: 12px; background: #f8fbf9; }
.dx-help-card > div { display: grid; gap: 2px; min-width: 0; }
.dx-help-card strong { font-size: 14.5px; color: #1f2a25; }
.dx-help-card span { font-size: 13px; color: #5f6b65; }
.dx-hist li > a.dx-inline { justify-self: start; margin-left: 0; padding-left: 0; }
@media (max-width: 650px) {
  .dx-help-card { flex-direction: column; align-items: stretch; text-align: center; }
  .dx-help-card .dx-btn { width: 100%; justify-content: center; }
  .dx-srv-page .dx-cancel .dx-btn, .dx-srv-page .dx-cancel .btn { width: 100%; justify-content: center; }
  .dx-srv-page .dx-cancel-confirm { align-items: flex-start; }
  .dx-hist li { row-gap: 2px; }
  .dx-hist li > a.dx-inline { grid-column: 1 / -1; font-size: 13px; }
  .dx-bottom { align-items: center; gap: 14px; margin-top: 28px; padding: 18px 0 8px; border-top: 1px solid #e7ece9; text-align: center; }
  .dx-bottom nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; width: 100%; }
  .dx-bottom nav a { font-size: 12px; color: #7d8984; padding: 4px 0; }
  .dx-bottom > span { order: 2; font-size: 11.5px; }
}
.dx-help-card .dx-nowrap { white-space: nowrap; font-weight: 600; }

/* Payment page: a clear Continue button when changing coin, and no empty gap at the bottom (owner, 14 Oct 2026). */
.pay-switch .pay-switch-go { margin-top: 16px; min-height: 52px; font-size: 1rem; }
.pay-switch[open] > summary { margin-bottom: 4px; }
body:has(.pay-wrap) .page-section { padding-bottom: 72px; min-height: 0; }
body:has(.pay-wrap) .pay-help { margin: 20px 0 0; }
@media (max-width: 650px) { body:has(.pay-wrap) .page-section { padding-bottom: 56px; } }

/* Payment page: an animated "waiting for your payment" box (owner, 14 Oct 2026). */
.pay-status.is-waiting { position: relative; overflow: hidden; align-items: center; gap: 14px; padding: 16px 18px 18px; border: 1px solid #d9e7e1; background: #f6faf8; }
.pay-ring { position: relative; flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.pay-ring::before, .pay-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: pay-ripple 2s ease-out infinite; }
.pay-ring::after { animation-delay: 1s; }
.pay-ring .pay-dot { width: 10px; height: 10px; }
@keyframes pay-ripple { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
.pay-status-text { display: grid; gap: 2px; min-width: 0; }
.pay-status-text strong { font-size: .95rem; color: var(--ink); }
.pay-status-text > span { font-size: .82rem; color: var(--ink-2); }
.pay-wait-time { font-variant-numeric: tabular-nums; color: var(--muted); }
.pay-scan { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #dfeae5; overflow: hidden; }
.pay-scan::after { content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 35%; border-radius: 3px; background: var(--accent); animation: pay-scan 1.6s ease-in-out infinite; }
@keyframes pay-scan { 0% { left: -35%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .pay-ring::before, .pay-ring::after, .pay-scan::after { animation: none; }
  .pay-scan::after { left: 0; width: 50%; }
}

/* Payment page: "Change coin or payment method" as a clear, coloured control (owner, 14 Oct 2026). */
.pay-switch > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 44px 13px 16px; position: relative;
  border: 1.5px solid var(--accent); border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: .95rem; font-weight: 700; }
.pay-switch > summary::-webkit-details-marker { display: none; }
.pay-switch > summary:hover { background: #d8ecdf; color: var(--accent); }
.pay-switch > summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.pay-switch[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.pay-switch[open] > summary { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.pay-switch-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pay-switch > summary:focus-visible { outline: 3px solid #8acdb8; outline-offset: 2px; }


/* Phones: clear space between the hero (with the term cards) and the plans below (owner, 14 Oct 2026). */
@media (max-width: 650px) {
  .hb-hero + .store-terms { padding-bottom: 40px; }
  .store-jump { display: none; }   /* owner: no server-type buttons on phones */
  .store-plans[id]:first-of-type .store-plan-heading, .store-jump + .store-plans .store-plan-heading { padding-top: 8px; }
}

/* Payment options always shown; ones that cannot be used now are greyed out with the reason (owner, 14 Oct 2026). */
.pay-options label.is-off { cursor: default; background: #f7f8f7; }
.pay-options label.is-off strong { color: var(--muted); }
.pay-options label.is-off small { color: var(--muted); }
.pay-options label.is-off small a { color: var(--accent); font-weight: 600; }

/* Chat assistant bubble (templates/chat-widget.php, owner 15 Oct 2026). */
.hbchat { position: fixed; right: 20px; bottom: 20px; z-index: 900; font-size: 15px; }
.hbchat-open { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(7, 40, 33, .25); }
.hbchat-open:hover { background: var(--accent-hover); }
.hbchat-panel { width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 48px rgba(7, 40, 33, .22); overflow: hidden; }
.hbchat-panel[hidden], .hbchat-open[hidden], .hbchat-ticket[hidden], .hbchat-form[hidden], .hbchat-human[hidden] { display: none; }
.hbchat-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--accent); color: #fff; }
.hbchat-head strong { display: block; font-size: 15px; }
.hbchat-head small { display: block; opacity: .85; font-size: 12px; }
.hbchat-close { border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.hbchat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.hbchat-msg { max-width: 85%; padding: 9px 12px; border-radius: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.hbchat-msg.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.hbchat-msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.hbchat-msg.err { border-color: #e7b8b8; background: #fff4f4; color: #8a1f1f; }
.hbchat-msg.typing { color: var(--muted); font-style: italic; }
.hbchat-msg a { color: inherit; text-decoration: underline; }
.hbchat-offer { align-self: flex-start; border: 1px solid var(--accent); background: var(--surface); color: var(--accent); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.hbchat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--line); background: var(--surface); }
.hbchat-form textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; font: inherit; background: var(--surface); color: var(--ink); max-height: 120px; }
.hbchat-form button { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; }
.hbchat-human { border: 0; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 13px; padding: 8px; cursor: pointer; }
.hbchat-ticket { padding: 12px; border-top: 1px solid var(--line); background: var(--surface); display: grid; gap: 8px; }
.hbchat-ticket p { margin: 0; font-size: 13px; color: var(--ink-2); }
.hbchat-ticket input, .hbchat-ticket textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--surface); color: var(--ink); box-sizing: border-box; }
.hbchat-row { display: flex; gap: 8px; align-items: center; }
.hbchat-cancel { border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
@media (max-width: 560px) {
  .hbchat { right: 12px; bottom: 12px; }
  .hbchat-open span { display: none; }
  .hbchat-open { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .hbchat-panel { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; border: 0; }
}
@media print { .hbchat { display: none; } }
.hbchat-msg.sys { align-self: center; max-width: 92%; background: transparent; color: var(--muted); font-size: 13px; text-align: center; padding: 4px 8px; }
.hbchat-msg.staff { border-color: var(--accent); }
.hbchat-msg b { display: block; font-size: 12px; color: var(--accent); margin-bottom: 2px; }
.hbchat-open.has-new::after { content: ''; position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: #d64545; border: 2px solid #fff; }
.hbchat-open { position: relative; }
.hbchat.is-live .hbchat-head small::before { content: '● '; color: #7fe0a0; }

/* Country flags on the locations page (owner, 15 Oct 2026). */
.loc-country { display: flex; align-items: center; gap: 8px; }
.flag { width: 20px; height: 15px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); object-fit: cover; }

/* One-colour cryptocurrency logos: footer and home hero (owner, 15 Oct 2026). */
.coin-logos { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.coin-logo { width: 18px; height: 18px; flex: none; }
.foot-pay { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.coin-logos.is-foot { color: var(--muted); gap: 9px; }
.coin-logos.is-foot .coin-logo { width: 17px; height: 17px; opacity: .85; }
.hero-coins { margin: 14px 0 0; }
.coin-logos.is-hero { color: var(--ink-2); gap: 12px; opacity: .75; }
.coin-logos.is-hero .coin-logo { width: 20px; height: 20px; }

/* Chat: smaller text (owner, 15 Oct 2026). The typing box stays 16px on phones so iOS does not zoom in. */
.hbchat { font-size: 13.5px; }
.hbchat-open { font-size: 14px; padding: 10px 16px; }
.hbchat-head strong { font-size: 14px; }
.hbchat-head small { font-size: 11.5px; }
.hbchat-msg { padding: 8px 11px; line-height: 1.45; }
.hbchat-msg.sys { font-size: 12px; }
.hbchat-msg b { font-size: 11px; }
.hbchat-form textarea, .hbchat-ticket input, .hbchat-ticket textarea { font-size: 13.5px; }
.hbchat-human, .hbchat-offer { font-size: 12.5px; }
.hbchat-ticket p { font-size: 12.5px; }
@media (max-width: 560px) { .hbchat-form textarea, .hbchat-ticket input, .hbchat-ticket textarea { font-size: 16px; } }

.hbchat-typing { padding: 4px 16px 6px; font-size: 12px; font-style: italic; color: var(--muted); background: var(--bg); }
.hbchat-typing[hidden] { display: none; }

.hbchat-attach { width: 36px; height: 40px; flex: none; display: grid; place-items: center; color: var(--muted); cursor: pointer; border-radius: 10px; }
.hbchat-attach:hover { color: var(--accent); background: var(--surface-2); }
.hbchat-img { display: block; max-width: 220px; max-height: 260px; border-radius: 10px; margin-top: 2px; background: var(--surface-2); }
.hbchat-msg.me .hbchat-img { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Chat panel a bit taller on desktop (owner, 15 Oct 2026); still fits small laptop screens. */
@media (min-width: 561px) { .hbchat-panel { height: 620px; max-height: calc(100vh - 40px); } }

.hbchat-foot { display: flex; border-top: 1px solid var(--line); background: var(--surface-2); }
.hbchat-foot button { flex: 1; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; padding: 8px; cursor: pointer; }
.hbchat-foot button + button { border-left: 1px solid var(--line); }
.hbchat-foot button:hover { color: var(--accent); }
.hbchat-foot .hbchat-human { border-top: 0; }
.hbchat-mailme { padding: 12px; border-top: 1px solid var(--line); background: var(--surface); display: grid; gap: 8px; }
.hbchat-mailme[hidden] { display: none; }
.hbchat-mailme input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink); box-sizing: border-box; }
.hbchat-cancel2 { border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
@media (max-width: 560px) { .hbchat-mailme input { font-size: 16px; } }

/* Formatted replies: real paragraphs and lists instead of raw ** and - (owner, 15 Oct 2026). */
.hbchat-text.is-fmt { display: block; white-space: normal; }
.hbchat-text.is-fmt p { margin: 0; }
.hbchat-text.is-fmt p + p, .hbchat-text.is-fmt p + ul, .hbchat-text.is-fmt ul + p { margin-top: 8px; }
.hbchat-text.is-fmt ul { margin: 6px 0 0; padding-left: 18px; }
.hbchat-text.is-fmt li { margin: 3px 0; padding-left: 2px; }
.hbchat-text.is-fmt li::marker { color: var(--accent); }
.hbchat-text.is-fmt strong { font-weight: 650; }
.hbchat-text.is-fmt a { word-break: break-word; }
.hbchat-msg.bot { line-height: 1.5; }
.hbchat-log { gap: 10px; }
.hbchat-msg.sys .hbchat-text.is-fmt p { text-align: center; }

.hbchat-foot button[hidden] { display: none; }

/* ---------- Chat widget polish (owner, 15 Oct 2026) ---------- */
.hbchat-open { box-shadow: 0 8px 24px rgba(7, 40, 33, .28); transition: transform .15s ease, box-shadow .15s ease; }
.hbchat-open:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(7, 40, 33, .32); }
.hbchat-unread { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #d64545; color: #fff; font: 700 11px/20px system-ui, sans-serif; font-style: normal; text-align: center; border: 2px solid #fff; box-sizing: border-box; }
.hbchat-unread[hidden], .hbchat-open.has-new::after { display: none; }
.hbchat-panel { opacity: 0; transform: translateY(12px) scale(.98); transform-origin: bottom right; transition: opacity .18s ease, transform .18s ease; }
.hbchat-panel.is-in { opacity: 1; transform: none; }
.hbchat-head { gap: 10px; justify-content: flex-start; padding: 12px 14px; }
.hbchat-head .hbchat-close { margin-left: auto; }
.hbchat-avatar { width: 36px; height: 36px; flex: none; border-radius: 10px; background: #fff; color: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.hbchat-title strong { font-size: 15px; }
.hbchat-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: .9; }
.hbchat-dot { width: 7px; height: 7px; border-radius: 50%; background: #b8c4be; flex: none; }
.hbchat-dot.on { background: #6be39a; box-shadow: 0 0 0 3px rgba(107, 227, 154, .25); }
.hbchat-msg { position: relative; animation: hbchat-in .18s ease; }
@keyframes hbchat-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hbchat-time { display: block; margin-top: 3px; font-size: 10.5px; opacity: .55; text-align: right; }
.hbchat-msg.bot .hbchat-time { text-align: left; }
.hbchat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; }
.hbchat-chips button { border: 1px solid var(--accent); background: var(--surface); color: var(--accent); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 12.5px; cursor: pointer; transition: background .12s; }
.hbchat-chips button:hover { background: var(--accent); color: #fff; }
.hbchat-rate { display: inline-flex; gap: 2px; margin-top: 4px; }
.hbchat-rate button { border: 0; background: transparent; cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; opacity: .45; filter: grayscale(1); transition: opacity .12s; }
.hbchat-rate button:hover, .hbchat-rate button.on { opacity: 1; filter: none; background: var(--surface-2); }
.hbchat-rate[data-done]::after { content: attr(data-done); font-size: 11px; color: var(--muted); align-self: center; margin-left: 4px; }
.hbchat-dots { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.hbchat-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: hbchat-dot 1.2s infinite ease-in-out; }
.hbchat-dots i:nth-child(2) { animation-delay: .15s; } .hbchat-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hbchat-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } }
.hbchat-msg.typing { padding: 12px 14px; font-style: normal; }
.hbchat-typing { display: flex; align-items: center; gap: 6px; font-style: normal; }
.hbchat-msg.failed { opacity: .7; }
.hbchat-retry { display: block; margin-top: 4px; border: 0; background: none; color: #ffd6d6; font: inherit; font-size: 11.5px; text-decoration: underline; cursor: pointer; padding: 0; }
.hbchat-form, .hbchat-foot { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
@media (max-width: 560px) { .hbchat-panel { transform: translateY(20px); } .hbchat-panel.is-in { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hbchat-panel, .hbchat-msg, .hbchat-dots i { animation: none; transition: none; } }

/* Time and thumbs share one small line under a message (owner, 15 Oct 2026). */
.hbchat-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-height: 16px; }
.hbchat-msg.me .hbchat-meta { justify-content: flex-end; }
.hbchat-meta .hbchat-time { display: inline; margin: 0; font-size: 10.5px; opacity: .6; }
.hbchat-meta .hbchat-rate { margin: 0 0 0 auto; }
.hbchat-meta .hbchat-rate button { font-size: 12px; padding: 0 3px; line-height: 16px; }
.hbchat-msg.me .hbchat-meta .hbchat-time { opacity: .75; }

/* Chat bottom bar: soft focus instead of the site's thick outline, compact on phones (owner, 15 Oct 2026). */
.hbchat textarea:focus-visible, .hbchat input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(7, 92, 79, .15); }
.hbchat button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hbchat-form { padding: 8px 10px; gap: 6px; align-items: center; }
.hbchat-form textarea { min-height: 40px; padding: 9px 12px; border-radius: 20px; line-height: 1.35; }
.hbchat-form button[type="submit"] { width: 40px; height: 40px; }
.hbchat-attach { width: 32px; height: 40px; }
.hbchat-foot button { padding: 7px 8px; font-size: 12px; }
@media (max-width: 560px) {
  .hbchat-panel { height: 100dvh; max-height: 100dvh; }
  .hbchat-form { padding: 6px 8px; }
  .hbchat-form textarea { min-height: 38px; padding: 8px 12px; }
  .hbchat-form button[type="submit"] { width: 38px; height: 38px; }
  .hbchat-foot button { padding: 6px; font-size: 12px; }
  .hbchat-foot { padding-bottom: max(env(safe-area-inset-bottom), 2px); }
}
@media (max-width: 560px) {
  /* Full screen = the visible area only (not behind the browser's toolbar); JS shrinks it above the keyboard. */
  .hbchat-panel { inset: auto; top: 0; left: 0; right: 0; width: 100%; height: 100vh; height: 100dvh; max-height: none; opacity: 1; transform: none; transition: none; }
}

/* Bigger typing area with gently rounded corners (owner, 15 Oct 2026). */
.hbchat-form { padding: 10px; align-items: flex-end; }
.hbchat-form textarea { min-height: 56px; max-height: 160px; padding: 10px 12px; border-radius: 10px; line-height: 1.4; }
.hbchat-form button[type="submit"] { width: 44px; height: 44px; border-radius: 10px; margin-bottom: 6px; }
.hbchat-attach { height: 44px; margin-bottom: 6px; }
@media (max-width: 560px) {
  .hbchat-form { padding: 8px; }
  .hbchat-form textarea { min-height: 52px; padding: 10px 12px; }
  .hbchat-form button[type="submit"] { width: 44px; height: 44px; margin-bottom: 4px; }
  .hbchat-attach { margin-bottom: 4px; }
}

.hbchat-new { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.hbchat-new:hover { background: rgba(255,255,255,.12); }
.hbchat-head .hbchat-new + .hbchat-close { margin-left: 4px; }
@media (max-width: 380px) { .hbchat-new span { display: none; } }

/* Header ⋯ menu and one full-width help action, like the big chat tools (owner, 15 Oct 2026). */
.hbchat-new { display: none; }
.hbchat-menu { position: relative; margin-left: auto; }
.hbchat-menu + .hbchat-close { margin-left: 2px; }
.hbchat-menu-btn { border: 0; background: transparent; color: #fff; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.hbchat-menu-btn:hover, .hbchat-menu-btn[aria-expanded="true"] { background: rgba(255,255,255,.14); }
.hbchat-menu-list { position: absolute; right: 0; top: 40px; z-index: 5; min-width: 190px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(7, 40, 33, .18); padding: 4px; }
.hbchat-menu-list[hidden] { display: none; }
.hbchat-menu-list button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; padding: 9px 10px; border-radius: 7px; cursor: pointer; }
.hbchat-menu-list button:hover { background: var(--surface-2); }
.hbchat-foot button { flex: 1 1 100%; font-weight: 600; color: var(--accent); }

/* Phone: page behind the open chat is locked, and a solid backdrop fills any gap (owner, 15 Oct 2026). */
@media (max-width: 560px) {
  html.hbchat-locked, html.hbchat-locked body { overflow: hidden; overscroll-behavior: none; }
  html.hbchat-locked .hbchat::before { content: ''; position: fixed; inset: 0; background: var(--bg); z-index: -1; }
  .hbchat-panel { overscroll-behavior: contain; }
  .hbchat-log { overscroll-behavior: contain; }
}

/* Bottom bar: help action + "Email me this chat" side by side (owner, 15 Oct 2026). */
.hbchat-foot button { flex: 1 1 50%; }
.hbchat-foot .hbchat-mail2 { font-weight: 500; color: var(--ink-2); }
.hbchat-foot button[hidden] { display: none; }

/* Chat composer preview: one quiet frame, aligned controls and a secondary help link. */
.hbchat .hbchat-form {
  flex: none; align-items: center; gap: 6px; margin: 12px 12px 4px; padding: 6px;
  min-height: 58px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.hbchat .hbchat-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(7,92,79,.07); }
.hbchat .hbchat-form textarea {
  flex: 1; min-width: 0; width: 0; height: 44px; min-height: 44px; max-height: 120px;
  margin: 0; padding: 11px 2px; border: 0; border-radius: 0; background: transparent;
  color: var(--ink); font-size: 14px; line-height: 22px; box-sizing: border-box;
}
.hbchat .hbchat-form textarea:focus-visible { outline: none; box-shadow: none; }
.hbchat .hbchat-form textarea::placeholder { color: var(--muted); opacity: .8; }
.hbchat .hbchat-form .hbchat-attach {
  display: grid; place-items: center; flex: none; width: 32px; height: 44px; margin: 0;
  border-radius: 10px; color: var(--muted); cursor: pointer;
}
.hbchat .hbchat-form .hbchat-attach:hover { background: var(--surface-2); color: var(--accent); }
.hbchat .hbchat-form button[type="submit"] {
  flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 11px;
  background: var(--accent); box-shadow: none;
}
.hbchat .hbchat-form button[type="submit"]:hover { background: var(--accent-hover); }
.hbchat .hbchat-foot {
  flex: none; justify-content: center; gap: 8px; padding: 4px 12px max(10px, env(safe-area-inset-bottom));
  border: 0; background: var(--surface);
}
.hbchat .hbchat-foot button {
  flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-2); font-size: 12px; line-height: 18px; font-weight: 500;
}
.hbchat .hbchat-foot button:hover { color: var(--accent); background: var(--surface-2); }
.hbchat .hbchat-foot button[hidden] { display: none; }
.hbchat .hbchat-foot svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 560px) {
  .hbchat .hbchat-form { margin: 10px 12px 4px; }
  .hbchat .hbchat-form textarea { font-size: 16px; }
  .hbchat .hbchat-form textarea::placeholder { font-size: 14px; }
}

/* BHW landing page: scoped to the Marketplace offer. */
.bhw { padding-top: 0; }
.bhw .wrap { max-width: 1180px; }
.bhw-hero { display:grid; grid-template-columns: 1.4fr 1fr; align-items:center; gap:72px; padding:64px 0; border-bottom:1px solid var(--line); }
.bhw-hero h1 { font-size:clamp(2.5rem,4.8vw,4.3rem); margin:16px 0 22px; }
.bhw-hero .lead { max-width:49ch; margin-bottom:26px; }
.bhw-facts { border-left:1px solid var(--line); padding-left:36px; }
.bhw-facts p { position:relative; padding:18px 0 18px 38px; }
.bhw-facts p + p { border-top:1px solid var(--line); }
.bhw-facts p > span { position:absolute; left:0; color:var(--accent); font-size:.8rem; font-weight:700; }
.bhw-facts strong,.bhw-facts small { display:block; }
.bhw-facts small { color:var(--muted); font-size:.9rem; margin-top:3px; }
.bhw-section-head { display:flex; justify-content:space-between; gap:24px; align-items:end; margin:44px 0 24px; }
.bhw-section-head h2 { font-size:2rem; margin-top:8px; }
.bhw-section-head > p { color:var(--muted); font-size:.92rem; }
.bhw-selectors { display:flex; gap:16px; align-items:end; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:12px; }
.bhw-selectors > div { flex:1; min-width:0; }
.bhw-selectors label { display:block; font-size:.85rem; font-weight:650; margin-bottom:6px; }
.bhw-selectors select { width:100%; min-height:46px; padding:8px 12px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--surface); }
.bhw .bhw-note { font-size:.88rem; color:var(--muted); line-height:1.6; margin:0 0 18px; }
.bhw-plans { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:24px; }
.bhw-plan { display:flex; flex-direction:column; padding:24px 20px; min-width:0; }
.bhw-plan h3 { margin:6px 0 24px; font-size:1.4rem; }
.bhw-price { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.bhw-price strong { font-size:2.25rem; letter-spacing:-.05em; line-height:1.2; }
.bhw-price > span { color:var(--muted); font-size:.82rem; }
.bhw-total { color:var(--muted); font-size:.83rem; margin:6px 0 20px; min-height:2.7em; }
.bhw-specs { margin:0 0 18px; }
.bhw-specs > div { display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--line); padding:10px 0; font-size:.88rem; }
.bhw-specs dt { color:var(--muted); }.bhw-specs dd { margin:0; font-weight:650; text-align:right; }
.bhw-plan .btn { margin-top:auto; padding-inline:12px; }
.bhw-locations { margin-top:24px; border:1px solid var(--line); border-radius:10px; padding:18px 22px; }
.bhw-locations summary { cursor:pointer; font-weight:650; color:var(--accent); padding:4px 0; }
.bhw-locations[open] summary { margin-bottom:18px; }
.bhw-region-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.bhw-region-list > div { background:var(--surface); padding:16px; border:1px solid var(--line); border-radius:8px; }
.bhw-region-list h3 { font-size:1rem; margin-bottom:12px; }
.bhw-region-list dl > div { display:flex; justify-content:space-between; font-size:.88rem; }.bhw-region-list dd { margin:0; }
.bhw-coins { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.bhw-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px; }
.bhw-grid .panel { padding:28px; }
.bhw-grid h2 { font-size:1.25rem; margin:0 0 16px; }
.bhw-grid h2:not(:first-child) { margin-top:28px; }
.bhw-grid ul { padding-left:20px; margin:0; }.bhw-grid li { margin:10px 0; }
.bhw-grid p,.bhw-grid li,.bhw-faq p { font-size:.95rem; line-height:1.75; }
.bhw .bhw-h { font-size:1.7rem; margin:44px 0 20px; }
.bhw-faq p + p { margin-top:18px; }
.bhw-faq strong { display:block; margin-bottom:4px; }
@media(max-width:1050px) { .bhw-plans { grid-template-columns:repeat(2,minmax(0,1fr)); }.bhw-hero { gap:32px; }.bhw-facts { padding-left:22px; } }
@media(max-width:650px) {
 .bhw-hero { grid-template-columns:1fr; gap:28px; padding:36px 0 30px; }.bhw-hero h1 { font-size:2.7rem; }.bhw-hero .lead { font-size:1rem; }.bhw-facts { border-left:0; padding:0; }.bhw-facts p { padding-block:12px; }
 .bhw-section-head { display:block; margin-top:30px; }.bhw-section-head h2 { font-size:1.7rem; }.bhw-section-head > p { margin-top:12px; }
 .bhw-selectors { flex-direction:column; align-items:stretch; gap:12px; }.bhw-selectors > div { width:100%; }
 .bhw-plans,.bhw-grid,.bhw-region-list { grid-template-columns:1fr; }.bhw-plan { padding:24px; }.bhw-total { min-height:0; }.bhw-grid { margin-top:30px; }.bhw-grid .panel { padding:22px; }
}


/* BHW landing page: in-page links from the header land below the sticky header */
.bhw [id] { scroll-margin-top: 90px; }

/* Search landing pages (templates/guide.php) */
.guide .page-heading h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.12; max-width: 24ch; }
.crumbs { font-size: .8rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.guide-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; }
.guide-coins { padding: 22px; margin-bottom: 34px; }
.guide-coins h2 { font-size: 1.05rem; margin-bottom: 14px; }
.guide-coins ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.guide-coins li { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.guide-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 48px; margin-bottom: 26px; }
.guide-body .prose h2 { margin-top: 18px; }
.guide .price-group { margin-top: 26px; }
.guide-more { margin-top: 16px; font-size: .88rem; color: var(--muted); }
.guide-h { font-size: 1.45rem; margin: 52px 0 8px; }
.guide-related { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.guide-related a { display: inline-block; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: .86rem; }
.guide-related a:hover { border-color: var(--accent); background: var(--accent-soft); }
.loc-link { margin-top: 12px; }
.site-foot .foot-guides nav { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .site-foot .foot-top:has(.foot-guides) { grid-template-columns: 1fr 1.35fr .9fr 1fr 1fr; gap: 40px; } }

/* Chat button: flat, no glow around it (owner, 15 Oct 2026) */
.hbchat-open, .hbchat-open:hover, .hbchat-open:focus { box-shadow: none; }
.hbchat-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Order page: more room between the order form and the footer (owner, 15 Oct 2026) */
.page-section:has(.order-form) { padding-bottom: 120px; }
@media (max-width: 760px) { .page-section:has(.order-form) { padding-bottom: 72px; } }