*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --bg:#111009; --bg-surface:#1a1814; --bg-card:#201e19;
    --text:#ede5cf; --text-muted:#a09282; --text-faint:#6e6548;
    --accent:#e0a83a; --accent-hi:#ebb84a; --accent-dim:rgba(224,168,58,0.10);
    --border:rgba(224,168,58,0.14); --border-soft:rgba(237,229,207,0.06);
    --body-weight:300; color-scheme:dark;
}
@media (prefers-color-scheme:light) { html:not([data-theme="dark"]) { --bg:#faf8f3; --bg-surface:#f3f0e8; --bg-card:#ffffff; --text:#100e08; --text-muted:#68583a; --text-faint:#8f8368; --accent:#b88a18; --accent-hi:#cc9e28; --accent-dim:rgba(184,138,24,0.09); --border:rgba(184,138,24,0.18); --border-soft:rgba(16,14,8,0.05); --body-weight:400; color-scheme:light; } }
html[data-theme="light"] { --bg:#faf8f3; --bg-surface:#f3f0e8; --bg-card:#ffffff; --text:#100e08; --text-muted:#68583a; --text-faint:#8f8368; --accent:#b88a18; --accent-hi:#cc9e28; --accent-dim:rgba(184,138,24,0.09); --border:rgba(184,138,24,0.18); --border-soft:rgba(16,14,8,0.05); --body-weight:400; color-scheme:light; }
html[data-theme="dark"]  { --bg:#111009; --bg-surface:#1a1814; --bg-card:#201e19; --text:#ede5cf; --text-muted:#a09282; --text-faint:#6e6548; --accent:#e0a83a; --accent-hi:#ebb84a; --accent-dim:rgba(224,168,58,0.10); --border:rgba(224,168,58,0.14); --border-soft:rgba(237,229,207,0.06); --body-weight:300; color-scheme:dark; }

html { overscroll-behavior-y: none; }
body { background:var(--bg); color:var(--text); font-family:'Jost',sans-serif; font-weight:var(--body-weight); line-height:1.7; transition:background .3s,color .3s; overscroll-behavior-y: none; }
body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.015; pointer-events:none; z-index:9999; }

/* ── NAV ── */
nav { padding:1.75rem 4rem; padding-top:calc(1.75rem + env(safe-area-inset-top, 0px)); border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between; position:sticky; top:var(--ribbon-h, 40px); z-index:10002; background:rgba(17,16,9,0.78); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); }
html[data-theme="light"] nav { background:rgba(250,248,243,0.78); }
@media (prefers-color-scheme:light) { html:not([data-theme="dark"]) nav { background:rgba(250,248,243,0.78); } }
.nav-left { display:flex; align-items:center; gap:1.5rem; }
.nav-link { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); font-weight:500; text-decoration:none; display:flex; align-items:center; gap:.4rem; transition:color .2s; }
.nav-link:hover { color:var(--accent); }
.nav-right { display:flex; align-items:center; gap:1.25rem; }
.nav-cta { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--bg); background:var(--accent); padding:.55rem 1rem; text-decoration:none; transition:background .2s; }
.nav-cta:hover { background:var(--accent-hi); }
.theme-toggle { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; transition:all .2s; }
.theme-toggle:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.theme-toggle svg { width:15px; height:15px; }
.theme-toggle .icon-sun { display:none; } .theme-toggle .icon-moon { display:block; }
html[data-theme="light"] .theme-toggle .icon-sun { display:block; } html[data-theme="light"] .theme-toggle .icon-moon { display:none; }
@media (prefers-color-scheme:light) { html:not([data-theme="dark"]) .theme-toggle .icon-sun { display:block; } html:not([data-theme="dark"]) .theme-toggle .icon-moon { display:none; } }

/* ── INTRO ── */
.page-intro { max-width:1160px; margin:0 auto; padding:3rem 2rem 2.5rem; border-bottom:1px solid var(--border-soft); display:flex; align-items:flex-end; justify-content:space-between; gap:3rem; flex-wrap:wrap; }
.eyebrow { font-size:.65rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); font-weight:500; margin-bottom:.75rem; }
.prelaunch-badge { display:inline-flex; align-items:center; gap:.55rem; background:var(--bg-surface); border:1px solid var(--border); padding:.45rem 1rem; font-size:.65rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:1.25rem; }
.prelaunch-badge::before { content:''; width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.75); } }
.page-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,3.5rem); font-weight:300; line-height:1.05; color:var(--text); margin-bottom:.75rem; }
.page-title em { font-style:italic; color:var(--accent); }
.page-desc { font-size:.9rem; color:var(--text-muted); max-width:55ch; line-height:1.8; }
.billing-toggle { display:flex; border:1px solid var(--border-soft); overflow:hidden; flex-shrink:0; }
.billing-opt { padding:.5rem 1.25rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--text-faint); cursor:pointer; transition:all .2s; }
.billing-opt.active { background:var(--accent-dim); color:var(--accent); border-color:var(--border); }
.billing-save { font-size:.62rem; color:rgba(100,180,100,0.8); background:rgba(100,180,100,0.08); border:1px solid rgba(100,180,100,0.2); padding:.15rem .45rem; margin-left:.5rem; align-self:center; }
/* Inline "2 months free" badge sits inside the Annual pill itself — makes
   the savings legible to anyone skimming without needing a second
   element in the flow. Only visible when the Annual option is active. */
.billing-save-inline {
    display:inline-block;
    margin-left:.5rem;
    padding:.1rem .4rem;
    font-size:.56rem;
    letter-spacing:.08em;
    font-weight:600;
    color:rgba(100,180,100,0.95);
    background:rgba(100,180,100,0.12);
    border:1px solid rgba(100,180,100,0.28);
    border-radius:2px;
    vertical-align:middle;
    font-family:'Jost',sans-serif;
}
.billing-opt:not(.active) .billing-save-inline { opacity:.4; }

/* ── INTERACTIVE CONTROLS CONTAINER ── */
.pricing-controls { display:flex; flex-direction:column; gap:.85rem; }
.pricing-controls .billing-row { display:flex; align-items:center; gap:.75rem; }
.pricing-controls .controls-note { font-size:.68rem; color:var(--text-faint); }

/* ── SEAT CONTROL ── */
.seat-control { display:flex; align-items:center; gap:.75rem; }
.seat-label { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
/* Pill-shaped stepper with a quiet hairline border. The italic numeral is
   the protagonist; the ± icons are fine-stroke SVGs that fade in to the
   accent only on hover, so the control reads as typography first,
   chrome second. */
.seat-stepper {
    display:flex;
    align-items:center;
    border:1px solid var(--border-soft);
    border-radius:999px;
    overflow:hidden;
    background:rgba(237,229,207,0.015);
    transition:border-color .25s, background .25s;
}
.seat-stepper:hover { border-color:var(--border); }
.seat-stepper:focus-within { border-color:var(--accent); background:var(--accent-dim); }
.seat-btn {
    width:38px; height:44px;
    background:transparent; border:none;
    color:var(--text-faint);
    cursor:pointer;
    transition:color .2s, transform .15s;
    display:flex; align-items:center; justify-content:center;
    padding:0;
}
.seat-btn:hover { color:var(--accent); }
.seat-btn:active { transform:scale(0.9); }
.seat-btn svg { display:block; }
/* Seat value is now a typeable input styled to match the surrounding stepper.
   Larger serif italic treatment makes the number feel like the protagonist
   of the calculator, not a small utility indicator between two buttons. */
.seat-val {
    width:58px; height:44px; text-align:center;
    font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
    font-size:1.55rem; line-height:44px; color:var(--accent);
    background:transparent;
    border:none;
    font-variant-numeric:tabular-nums;
    outline:none;
    padding:0;
    -moz-appearance:textfield;
    transition:color .2s;
}
.seat-val::-webkit-outer-spin-button,
.seat-val::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.seat-val:focus { background:var(--accent-dim); }

/* ── SEAT SLIDER (hero) ── */
/* Single control replacing the old stepper + preset-pill pair. The chip
   is the live value (typable, up to 99); the range drags 1–25, where
   most real teams live. Values above 25 peg the thumb at the right end
   but the chip still shows the real number. */
.seat-slider-control { display:flex; flex-direction:column; gap:.55rem; }
.seat-slider-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.seat-val-chip {
    width:72px; height:52px; line-height:52px;
    font-size:1.8rem;
    border:1px solid var(--border-soft);
    border-left:1px solid var(--border-soft); border-right:1px solid var(--border-soft);
    transition:border-color .2s, background .2s;
}
.seat-val-chip:hover { border-color:var(--border); }
.seat-val-chip:focus { border-color:var(--accent); background:var(--accent-dim); }

.seat-range {
    -webkit-appearance:none; appearance:none;
    width:100%; height:4px;
    background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--range-fill, 0%), var(--border-soft) var(--range-fill, 0%), var(--border-soft) 100%);
    outline:none;
    cursor:pointer;
    padding:0;
    margin:0;
    border-radius:2px;
}
/* Layered thumb: a small accent core, a background ring that punches a
   hairline gap around it, and an outer accent stroke — three concentric
   rings at 18px total. Gradient on the core adds a subtle sheen so it
   reads as a polished bead instead of a flat circle. A translucent halo
   expands on hover/focus for affordance without resorting to scale tricks
   that shift the track visually. */
.seat-range::-webkit-slider-thumb {
    -webkit-appearance:none; appearance:none;
    width:18px; height:18px;
    background:linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 100%);
    border:2px solid var(--bg);
    border-radius:50%;
    cursor:grab;
    box-shadow:0 0 0 1px var(--accent), 0 1px 3px rgba(0,0,0,0.35), 0 0 0 0 var(--accent-dim);
    transition:box-shadow .2s ease-out, background .15s;
}
.seat-range::-webkit-slider-thumb:hover { box-shadow:0 0 0 1px var(--accent), 0 1px 3px rgba(0,0,0,0.35), 0 0 0 6px var(--accent-dim); }
.seat-range::-webkit-slider-thumb:active { cursor:grabbing; background:linear-gradient(180deg, var(--accent-hi) 0%, var(--accent-hi) 100%); }
.seat-range::-moz-range-thumb {
    width:18px; height:18px;
    background:linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 100%);
    border:2px solid var(--bg);
    border-radius:50%;
    cursor:grab;
    box-shadow:0 0 0 1px var(--accent), 0 1px 3px rgba(0,0,0,0.35), 0 0 0 0 var(--accent-dim);
    transition:box-shadow .2s ease-out, background .15s;
}
.seat-range::-moz-range-thumb:hover { box-shadow:0 0 0 1px var(--accent), 0 1px 3px rgba(0,0,0,0.35), 0 0 0 6px var(--accent-dim); }
.seat-range:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 1px var(--accent), 0 0 0 6px var(--accent-dim); }
.seat-range:focus-visible::-moz-range-thumb { box-shadow:0 0 0 1px var(--accent), 0 0 0 6px var(--accent-dim); }

.seat-scale { display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:.58rem; color:var(--text-faint); padding:0 2px; font-variant-numeric:tabular-nums; }
.seat-slider-hint { font-size:.62rem; color:var(--text-faint); letter-spacing:.02em; }

/* ── PRICE PULSE ANIMATION ── */
@keyframes price-pulse {
    0%   { transform:scale(1);    color:var(--text); }
    40%  { transform:scale(1.045); color:var(--accent); }
    100% { transform:scale(1);    color:var(--text); }
}
.tier-price.pulsing, .tier-card-price.pulsing {
    animation:price-pulse 420ms ease-out;
    transform-origin:left center;
}

/* ── STICKY MOBILE CONTROLS ── */
/* Duplicate of the hero controls, shown on mobile viewports only once the
   user has scrolled past the hero's interactive block. Fixed to the top
   of the viewport below the sticky nav so users can adjust seats and
   billing while browsing tier details. */
/* Sticky bar: rendered but hidden off-screen + invisible by default. JS adds
   .visible once the hero's interactive controls leave the viewport. Uses
   opacity + visibility in addition to transform so mobile Safari reliably
   triggers the transition. Hidden on desktop via the max-width media query
   further down. z-index 10001 sits above both the noise overlay (9999) and
   nav (10000 → 10002 below). */
.pricing-controls-sticky {
    display:flex;
    position:fixed;
    top:var(--nav-h, 68px);
    left:0; right:0;
    z-index:10003;
    padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background:rgba(17,16,9,0.92);
    border-bottom:1px solid var(--border);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    gap:1rem;
    align-items:center;
    justify-content:space-between;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-110%);
    transition:opacity .2s ease-out, transform .2s ease-out, visibility .2s ease-out;
}
html[data-theme="light"] .pricing-controls-sticky { background:rgba(250,248,243,0.92); }
@media (prefers-color-scheme:light) { html:not([data-theme="dark"]) .pricing-controls-sticky { background:rgba(250,248,243,0.92); } }
.pricing-controls-sticky.visible {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}
@media (min-width:861px) {
    .pricing-controls-sticky { display:none !important; }
}
.pricing-controls-sticky .seat-label { display:none; }
.pricing-controls-sticky .seat-stepper { height:40px; }
.pricing-controls-sticky .seat-btn { height:40px; width:34px; }
.pricing-controls-sticky .seat-btn svg { width:11px; height:11px; }
.pricing-controls-sticky .seat-val { height:40px; line-height:40px; font-size:1.4rem; width:48px; }
.pricing-controls-sticky .billing-opt { padding:.4rem .9rem; font-size:.64rem; }

/* ── TIERS ── */
.tiers-wrap { max-width:1160px; margin:0 auto; padding:3rem 2rem; overflow-x:auto; }
.tiers-grid { display:grid; grid-template-columns:200px repeat(3,1fr); min-width:720px; }

.tier-empty { border-bottom:1px solid var(--border-soft); }
.tier-head { border:1px solid var(--border-soft); border-left:none; padding:1.5rem 1.25rem; position:relative; }
.tier-head.popular { border-top:2px solid var(--accent); background:var(--accent-dim); }
.popular-badge { position:absolute; top:-1px; left:50%; transform:translateX(-50%); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; background:var(--accent); color:var(--bg); padding:.15rem .5rem; white-space:nowrap; }
.tier-name { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:400; color:var(--text); margin-bottom:.25rem; }
.tier-price { font-size:1.8rem; font-weight:300; color:var(--text); line-height:1; font-variant-numeric:tabular-nums; margin-bottom:.6rem; }
.tier-price span { font-size:.75rem; color:var(--text-faint); font-weight:400; }
.tier-formula { font-family:'JetBrains Mono',monospace; font-size:.62rem; color:var(--text-faint); margin:.3rem 0 .15rem; }
.tier-desc { font-size:.72rem; color:var(--text-muted); line-height:1.5; margin-top:.4rem; }

.cat-label-cell { background:var(--bg-surface); border-bottom:1px solid var(--border-soft); padding:.5rem .75rem; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); font-weight:500; grid-column:1/-1; }
.feat-label { border-bottom:1px solid var(--border-soft); border-right:1px solid var(--border-soft); padding:.55rem .75rem; font-size:.82rem; color:var(--text-muted); display:flex; align-items:center; gap:.35rem; }

/* ── TOOLTIPS ── */
.tip { position:relative; background:transparent; border:none; color:var(--text-faint); cursor:help; padding:0; line-height:1; display:inline-flex; align-items:center; }
.tip:hover, .tip:focus-visible { color:var(--accent); outline:none; }
.tip svg { width:13px; height:13px; display:block; }
.tip-text { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--bg-card); border:1px solid var(--border); padding:.65rem .8rem; font-size:.72rem; line-height:1.55; color:var(--text); width:240px; text-align:left; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s, visibility .15s; z-index:10; text-transform:none; letter-spacing:0; font-weight:400; box-shadow:0 8px 24px rgba(0,0,0,.25); }
/* Tooltips on left-column labels anchor to the icon's left edge so they don't
   overflow the viewport. Center-positioned (default) tips on narrow feat-label
   cells can extend 120px past the left edge and get clipped on small screens. */
.feat-label .tip-text { left:0; transform:none; }
.tip-text::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--border); }
.tip:hover .tip-text, .tip:focus-visible .tip-text, .tip:focus .tip-text { opacity:1; visibility:visible; }
.feat-cell { border-bottom:1px solid var(--border-soft); border-right:1px solid var(--border-soft); padding:.55rem 1.25rem; font-size:.82rem; color:var(--text-muted); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.feat-cell:last-child, .feat-label:last-child { border-right:none; }
.tier-head:last-child { border-right:none; }
.check { color:var(--accent); font-size:.9rem; }
.cross { color:var(--text-faint); font-size:.85rem; }
.feat-val { font-weight:400; color:var(--text); font-variant-numeric:tabular-nums; }
.feat-cell.popular-col { background:var(--accent-dim); }

/* Dynamic "Recommended" column highlight — uses [data-col] attributes tagged
   by pricing.js on load. nth-child math is unusable here because .cat-label-cell
   spans all 4 grid columns but counts as 1 DOM child, which desynchronises the
   DOM position from the grid column position after each category row. */
.tiers-grid[data-recommended="basic"] [data-col="basic"] { background:var(--accent-dim); }
.tiers-grid[data-recommended="pro"] [data-col="pro"] { background:var(--accent-dim); }

/* ── "Keep 100%" differentiator strip (above tier grid) ── */
.keep-earn-strip { max-width:1160px; margin:0 auto; padding:0 2rem 1.5rem; }
.keep-earn-strip-inner { border:1px solid var(--accent); background:var(--accent-dim); padding:1rem 1.5rem; display:flex; flex-direction:column; gap:.2rem; text-align:center; }
.keep-earn-strip-inner strong { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:500; font-style:italic; color:var(--text); letter-spacing:.01em; }
.keep-earn-strip-inner span { font-size:.78rem; color:var(--text-muted); line-height:1.5; }
.feat-addon { display:block; font-size:.70rem; color:var(--text-faint); margin-top:.35rem; font-variant-numeric:tabular-nums; }

/* Small callout above the tier grid that anchors space-operator buyers
   to the lh-section without forcing them to scroll past 8+ FAQ items.
   Salon-suite operators searching for "salon suite booking software"
   land here and bounce within a few seconds otherwise. */
.space-op-callout { max-width:1160px; margin:0 auto 1.25rem; padding:0 2rem; text-align:center; font-size:.85rem; color:var(--text-muted); }
.space-op-callout a { color:var(--accent); text-decoration:none; font-weight:500; margin-left:.4rem; }
.space-op-callout a:hover { text-decoration:underline; }
@media (max-width:860px) { .space-op-callout { padding:0 1.5rem; font-size:.8rem; } }

.cta-row-empty { padding:1.25rem .75rem; }
.cta-cell { padding:1.25rem; border-top:1px solid var(--border-soft); border-right:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; }
.cta-cell:last-child { border-right:none; }
.cta-btn { background:var(--bg-surface); border:1px solid var(--border-soft); color:var(--text-muted); padding:.5rem 1rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500; cursor:pointer; font-family:'Jost',sans-serif; width:100%; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.cta-btn.primary { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.cta-btn:hover { border-color:var(--accent); color:var(--accent); }
.cta-btn.primary:hover { background:var(--accent-hi); }

/* Fine-print stack lives below the trust-strip and runs the three small
   notices (annual-billing math, taxes, pricing-may-change) as a tight group
   so they read as a single block rather than three orphan paragraphs. */
.fine-print { max-width:1160px; margin:0 auto 2.5rem; padding:0 2rem; }
.fine-print-note { font-size:.68rem; color:var(--text-faint); margin:0 0 .35rem; line-height:1.5; }
.fine-print-note:last-child { margin-bottom:0; }
.contact-note { max-width:1160px; margin:-.5rem auto 0; padding:0 2rem; font-size:.85rem; color:var(--text-muted); text-align:center; }
.contact-note a { color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-dim); transition:border-color .2s; }
.contact-note a:hover { border-color:var(--accent); }

/* ── MOBILE: stacked tier cards ── */
.tiers-mobile { display:none; }

.tier-card { position:relative; border:1px solid var(--border-soft); background:var(--bg-card); padding:1.75rem 1.25rem; margin-bottom:1.25rem; }
.tier-card.recommended { border:1px solid var(--accent); background:linear-gradient(180deg, var(--accent-dim) 0%, var(--bg-card) 60%); }
.recommended-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--bg); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; padding:.2rem .65rem; }

.tier-card-head { padding-bottom:1rem; border-bottom:1px solid var(--border-soft); margin-bottom:1rem; }
.tier-card-name { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:400; color:var(--text); margin-bottom:.35rem; }
.tier-card-price { font-size:2.2rem; font-weight:300; color:var(--text); line-height:1; font-variant-numeric:tabular-nums; margin-bottom:.2rem; }
.tier-card-price span { font-size:.9rem; color:var(--text-faint); font-weight:400; }
.tier-card-formula { font-family:'JetBrains Mono',monospace; font-size:.65rem; color:var(--text-faint); margin-bottom:.6rem; }
.tier-card-desc { font-size:.82rem; color:var(--text-muted); line-height:1.55; }

.tier-card-feats { list-style:none; padding:0; margin:0 0 1.25rem; }
.tier-card-feats li { font-size:.82rem; color:var(--text-muted); line-height:1.5; padding:.55rem 0; border-bottom:1px solid var(--border-soft); }
.tier-card-feats li:last-child { border-bottom:none; }
.tier-card-feats strong { color:var(--text); font-weight:500; font-variant-numeric:tabular-nums; }
.tier-card-feats .note { color:var(--text-faint); font-size:.72rem; }
.tier-card-feats .addon { display:block; color:var(--accent); font-size:.68rem; margin-top:.15rem; font-variant-numeric:tabular-nums; }

.tier-card-cta { display:block; text-align:center; background:var(--bg-surface); border:1px solid var(--border-soft); color:var(--text-muted); padding:.9rem 1rem; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500; text-decoration:none; transition:all .2s; font-family:'Jost',sans-serif; }
.tier-card-cta:hover { border-color:var(--accent); color:var(--accent); }
.tier-card-cta.primary { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.tier-card-cta.primary:hover { background:var(--accent-hi); }

/* ── Intro line above the LocationHost card ── */
/* A soft horizontal rule with centered text, signaling a switch in audience
   from tier-shopping visitors to space operators. Avoids a heading-level
   demotion that would rank badly for SEO. */
.lh-intro { max-width:1160px; margin:3rem auto 1rem; padding:0 2rem; display:flex; align-items:center; gap:1.25rem; }
.lh-intro-rule { flex:1; height:1px; background:linear-gradient(90deg, transparent 0%, var(--border-soft) 50%, transparent 100%); }
.lh-intro-text { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1rem; color:var(--text-muted); text-align:center; letter-spacing:.01em; }

/* ── LocationHost / space-operators standalone section ── */
.lh-section { max-width:1160px; margin:1.5rem auto 2rem; padding:0 2rem; scroll-margin-top:30px; }
.lh-card { border:1px solid var(--border-soft); background:var(--bg-card); padding:2rem 2.25rem; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.2fr); gap:2rem; align-items:start; }
.lh-card-head .lh-eyebrow { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500; margin-bottom:.5rem; display:inline-block; }
.lh-card-head h2 { font-family:'Cormorant Garamond',serif; font-size:1.85rem; font-weight:400; line-height:1.15; margin:0 0 .6rem; color:var(--text); }
.lh-card-head .lh-desc { font-size:.86rem; color:var(--text-muted); line-height:1.6; margin:0 0 1rem; max-width:52ch; }
.lh-card-head .lh-feats { list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
.lh-card-head .lh-feats li { font-size:.78rem; color:var(--text-muted); line-height:1.5; padding-left:1.1rem; position:relative; }
.lh-card-head .lh-feats li::before { content:'—'; position:absolute; left:0; color:var(--accent); }
.lh-card-side { border-left:1px solid var(--border-soft); padding-left:2rem; display:flex; flex-direction:column; gap:.65rem; align-items:flex-start; }
.lh-card-side .lh-price { font-size:2rem; font-weight:300; color:var(--text); line-height:1; font-variant-numeric:tabular-nums; }
.lh-card-side .lh-price span { font-size:.8rem; color:var(--text-faint); font-weight:400; }
.lh-card-side .lh-formula { font-family:'JetBrains Mono',monospace; font-size:.65rem; color:var(--text-faint); }
.lh-card-side .lh-note { font-size:.7rem; color:var(--text-faint); line-height:1.5; max-width:24ch; }
.lh-card-side .lh-cta { display:inline-block; background:var(--bg-surface); border:1px solid var(--border-soft); color:var(--text-muted); padding:.75rem 1.2rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500; text-decoration:none; transition:all .2s; font-family:'Jost',sans-serif; }
.lh-card-side .lh-cta:hover { border-color:var(--accent); color:var(--accent); }

/* ── FAQ ── */
/* Native <details>/<summary> — keyboard accessible, no JS. Markers are
   custom-drawn with a pseudo-element so the default triangle isn't styled
   differently across browsers. */
.faq-section { max-width:860px; margin:3.5rem auto 2rem; padding:0 2rem; }
.faq-section .eyebrow { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500; margin-bottom:.4rem; }
.faq-title { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:300; line-height:1.1; color:var(--text); margin:0 0 2rem; letter-spacing:-0.005em; }
.faq-title em { font-style:italic; color:var(--accent); font-weight:400; }

.faq-item { border-bottom:1px solid var(--border-soft); padding:1.1rem 0; }
.faq-item:first-of-type { border-top:1px solid var(--border-soft); }
.faq-item summary {
    list-style:none;
    cursor:pointer;
    font-size:.95rem;
    color:var(--text);
    font-weight:400;
    padding-right:2rem;
    position:relative;
    transition:color .2s;
    -webkit-tap-highlight-color:transparent;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color:var(--accent); }
/* Custom + / − marker on the right; rotates when open. */
.faq-item summary::after {
    content:'';
    position:absolute;
    right:0; top:50%;
    width:14px; height:14px;
    background-image:
        linear-gradient(var(--text-faint), var(--text-faint)),
        linear-gradient(var(--text-faint), var(--text-faint));
    background-size:14px 1.5px, 1.5px 14px;
    background-position:center center;
    background-repeat:no-repeat;
    transform:translateY(-50%) rotate(0deg);
    transition:transform .25s, background-image .2s;
}
.faq-item[open] summary::after {
    background-size:14px 1.5px, 0 0;
    background-image:
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent));
}
.faq-item[open] summary { color:var(--accent); }
.faq-body { padding:.75rem 0 .25rem; max-width:65ch; }
.faq-body p { font-size:.86rem; color:var(--text-muted); line-height:1.65; margin:0; }

/* ── Trust strip ── */
/* Three small reassurances on a single row above the footer. Icons are
   inline SVGs so they inherit currentColor and switch with the theme. */
.trust-strip {
    max-width:1160px;
    margin:2rem auto 2.5rem;
    padding:1.5rem 2rem;
    border-top:1px solid var(--border-soft);
    border-bottom:1px solid var(--border-soft);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:2.5rem;
    flex-wrap:wrap;
}
.trust-item { display:flex; align-items:center; gap:.55rem; font-size:.78rem; color:var(--text-muted); line-height:1.4; }
.trust-item svg { width:18px; height:18px; color:var(--text-faint); flex-shrink:0; }
.trust-item strong { color:var(--text); font-weight:500; }

@media (max-width:860px) {
    nav, .page-intro, .fine-print, .contact-note { padding-left:1.5rem; padding-right:1.5rem; }
    .tiers-wrap { padding:1.5rem 1.25rem 0; }
    .page-intro { flex-direction:column; align-items:flex-start; padding:2rem 1.5rem 1.5rem; }
    .tiers-grid { display:none; }
    .tiers-mobile { display:block; }
    .lh-section { padding:0 1.5rem; }
    .lh-card { grid-template-columns:1fr; gap:1.5rem; padding:1.75rem 1.5rem; }
    /* Stretch the side children to the card's full width on mobile so the
       price + CTA block matches the width of the stacked tier cards above. */
    .lh-card-side { border-left:none; border-top:1px solid var(--border-soft); padding-left:0; padding-top:1.5rem; align-items:stretch; }
    .lh-card-side .lh-note { max-width:none; }
    .lh-card-side .lh-cta { display:block; text-align:center; padding:.9rem 1rem; font-size:.75rem; }
    .keep-earn-strip { padding:0 1.5rem 1rem; }
    .keep-earn-strip-inner { padding:1rem 1.25rem; }
    .keep-earn-strip-inner strong { font-size:1.05rem; }
    .seat-val-chip { width:64px; height:48px; line-height:48px; font-size:1.55rem; }
    .lh-intro { padding:0 1.5rem; margin-top:2.5rem; gap:.75rem; }
    .lh-intro-text { font-size:.88rem; }
    .faq-section { margin-top:2.5rem; padding:0 1.5rem; }
    .faq-title { font-size:1.75rem; margin-bottom:1.25rem; }
    .faq-item summary { font-size:.88rem; }
    .trust-strip { gap:1.25rem; padding:1.25rem 1.5rem; flex-direction:column; align-items:flex-start; }
}