/* =========================================================================
   poc-site - lead-kit multi-page site shell
   Design system for a bespoke client demo at the CRAFT.md bar
   (Vantage / Enchanted / Roof King / WealthHealth).

   Self-contained, zero dependencies. Theme is entirely in the :root tokens
   below; js/brief.js overrides the palette tokens at runtime from brief.json,
   so reskinning a lead = editing brief.json (or these defaults), nothing else.

   Sections:
     1. Tokens (:root)          5. Buttons + chips
     2. Reset + base            6. Cards (photo-first) + grids
     3. A11y + motion           7. Sections, hero, page-hero
     4. Chrome: ribbon/nav/foot 8. Forms (state machine) + footer
   ========================================================================= */

/* 1. TOKENS ------------------------------------------------------------- */
:root{
  /* Palette - SmartRent. Core navy + sage green extracted from their logo SVG
     (#030259 + #73B783); pop is a derived accessible green; gold is a sparing
     highlight. brief.js re-injects ink/paper/brand/accent/pop from brief.json
     at runtime (same values), so these are also the correct no-JS defaults. */
  --ink:        #101524;   /* primary text (navy-tinted near-black) */
  --ink-soft:   #555d72;   /* secondary text               */
  --paper:      #ffffff;   /* page background              */
  --paper-2:    #f3f5fb;   /* muted section background (cool) */
  --line:       #e2e6f1;   /* hairlines / borders          */
  --brand:      #030259;   /* core brand navy (from logo)  */
  --brand-ink:  #ffffff;   /* text on brand                */
  --brand-soft: #edeef8;   /* navy tint background         */
  --accent:     #73B783;   /* sage green (from logo)       */
  --accent-deep:#3e8d5a;   /* readable sage for text/icons */
  --pop:        #1f7a48;   /* energy / CTA pop (derived green; AA-contrast with white) */
  --pop-ink:    #ffffff;   /* text on pop                  */
  --gold:       #E0A33E;   /* sparing highlight (stars, badges, ticks) */
  --gold-soft:  #fbf2dc;   /* gold tint background         */
  --pb-green:   #0BC75E;   /* PlainBlack mark (fixed)      */

  /* Type - fluid, one clamp range per step, no breakpoint jumps */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-h1:  clamp(2.1rem, 1.3rem + 3.6vw, 3.8rem);
  --t-h2:  clamp(1.6rem, 1.15rem + 2.1vw, 2.6rem);
  --t-h3:  clamp(1.18rem, 1rem + 0.8vw, 1.5rem);
  --t-lead:clamp(1.05rem, 0.98rem + 0.42vw, 1.28rem);
  --t-body:1.0625rem;
  --t-sm:  0.875rem;
  --t-xs:  0.75rem;

  /* Space - one scale, used everywhere (no ad-hoc values) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;  --s-7: 3rem;  --s-8: 4.5rem; --s-9: 7rem;

  --wrap: 1120px;
  --wrap-narrow: 760px;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-btn: 8px;   /* buttons: modest radius, never a pill (style canon) */
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(16,20,28,.06), 0 1px 1px rgba(16,20,28,.04);
  --shadow-2: 0 6px 20px rgba(16,20,28,.08), 0 2px 6px rgba(16,20,28,.05);
  --shadow-3: 0 22px 48px rgba(16,20,28,.16), 0 6px 16px rgba(16,20,28,.10);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .55s;

  --ribbon-h: 34px;
  --topbar-h: 66px;
}

/* 2. RESET + BASE ------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.08; margin:0 0 var(--s-4); font-weight:800; letter-spacing:-.01em; }
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); font-weight:700; }
p{ margin:0 0 var(--s-4); }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
strong{ font-weight:700; }
ul,ol{ margin:0 0 var(--s-4); padding-left:1.2em; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
.wrap-narrow{ max-width:var(--wrap-narrow); }
.eyebrow{
  font-family:var(--font-body); font-size:var(--t-sm); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand);
  margin:0 0 var(--s-3);
}
.section-lead{ font-size:var(--t-lead); color:var(--ink-soft); max-width:62ch; }
.center{ text-align:center; margin-inline:auto; }

/* 3. A11Y + MOTION ------------------------------------------------------ */
.skip-link{
  position:absolute; left:var(--s-3); top:calc(-1 * var(--topbar-h) - 60px);
  z-index:200; background:var(--ink); color:#fff; padding:.6rem 1rem;
  border-radius:var(--radius-sm); transition:top .2s var(--ease);
}
.skip-link:focus{ top:var(--s-3); text-decoration:none; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }
:where(a,button,input,textarea,select):focus:not(:focus-visible){ outline:none; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.revealed{ opacity:1; transform:none; }
.reveal[data-reveal-delay="1"]{ transition-delay:.08s; }
.reveal[data-reveal-delay="2"]{ transition-delay:.16s; }
.reveal[data-reveal-delay="3"]{ transition-delay:.24s; }
.reveal[data-reveal-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* 4. CHROME: demo ribbon, topbar, nav, mobile drawer -------------------- */
.demo-ribbon{
  background:var(--ink); color:#fff; font-size:var(--t-xs);
  letter-spacing:.01em; height:var(--ribbon-h); display:flex; align-items:center;
}
.demo-ribbon .wrap{ display:flex; gap:var(--s-4); align-items:center; justify-content:center; flex-wrap:wrap; }
.demo-ribbon span{ opacity:.86; }
.demo-ribbon a{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }

.topbar{
  position:sticky; top:0; z-index:90; background:var(--paper);
  border-bottom:1px solid var(--line);
  /* No backdrop-filter / transform here: either would make .topbar the
     containing block for the position:fixed mobile drawer nested inside it,
     collapsing the drawer to the topbar's height instead of the viewport. */
}
.topbar__inner{ height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); }
.brand-lockup{ display:flex; align-items:center; gap:var(--s-3); font-family:var(--font-display); font-weight:800; font-size:1.16rem; color:var(--ink); letter-spacing:-.02em; }
.brand-lockup:hover{ text-decoration:none; }
.brand-lockup img{ height:42px; width:auto; }

.nav{ display:flex; align-items:center; gap:var(--s-5); }
.nav a{ color:var(--ink); font-size:var(--t-sm); font-weight:600; }
.nav a:hover{ color:var(--brand); text-decoration:none; }
.nav a[aria-current="page"]:not(.nav-cta){
  color:var(--brand); background:var(--brand-soft);
  padding:.42rem .8rem; margin:-.42rem -.8rem;
  border-radius:999px;
}
.nav .nav-cta{
  background:var(--pop); color:var(--pop-ink); padding:.55rem 1rem;
  border-radius:var(--radius-btn); font-weight:700;
}
.nav .nav-cta:hover{ filter:brightness(1.06); color:var(--pop-ink); }

.nav-toggle{
  display:none; appearance:none; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); width:42px; height:42px; border-radius:var(--radius-sm);
  align-items:center; justify-content:center; cursor:pointer;
}
.nav-scrim{
  position:fixed; inset:0; background:rgba(16,20,28,.42); opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease); z-index:99;
}
.nav-scrim.open{ opacity:1; visibility:visible; }

@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; }
  .nav{
    position:fixed; top:0; right:0; bottom:0; width:min(82vw,330px);
    flex-direction:column; align-items:flex-start; gap:var(--s-4);
    background:var(--paper); padding:calc(var(--topbar-h) + var(--s-5)) var(--s-6) var(--s-6);
    transform:translateX(100%); transition:transform .34s var(--ease);
    z-index:100; overflow-y:auto;
    /* NOTE: box-shadow lives ONLY on .open (below). A shadow on the base
       class bleeds a dark gradient onto the page's right edge - a recurring
       bug. Do not move it up here. */
  }
  .nav.open{ transform:translateX(0); box-shadow:-18px 0 50px rgba(16,20,28,.22); }
  .nav a{ font-size:1.05rem; }
  .nav .nav-cta{ margin-top:var(--s-2); }
}

/* 5. BUTTONS + CHIPS ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--brand); color:var(--brand-ink); border:1px solid transparent;
  font-family:var(--font-body); font-weight:700; font-size:var(--t-sm);
  padding:.8rem 1.35rem; border-radius:var(--radius-btn); cursor:pointer;
  transition:transform .15s var(--ease), filter .15s var(--ease), box-shadow .15s var(--ease);
  text-decoration:none; line-height:1.1;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05); text-decoration:none; box-shadow:var(--shadow-2); }
.btn:active{ transform:translateY(0); }
.btn--pop{ background:var(--pop); color:var(--pop-ink); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand); filter:none; box-shadow:none; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); }

/* No pill/chip tag clusters: style canon (see CRAFT.md). */

/* 6. CARDS + GRIDS ------------------------------------------------------ */
.grid{ display:grid; gap:var(--s-5); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s-5); box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.card__k{ font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--brand); margin:0 0 var(--s-2); }
.card h3{ margin-bottom:var(--s-2); }
.card p:last-child{ margin-bottom:0; }
.card__icon{ width:38px; height:38px; color:var(--brand); margin-bottom:var(--s-3); }

/* Photo-first card: image bleeds to the card edges (negative-margin overflow) */
.card--photo{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.card--photo .card__media{ aspect-ratio:3/2; overflow:hidden; background:var(--paper-2); }
.card--photo .card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card--photo:hover .card__media img{ transform:scale(1.04); }
.card--photo .card__body{ padding:var(--s-5); }
.card--photo .card__body p:last-child{ margin-bottom:0; }
.img-slot{ display:grid; place-items:center; color:var(--ink-soft); font-size:var(--t-xs); font-family:var(--font-mono); background:repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 10px,#eef0f3 10px,#eef0f3 20px); }

/* 7. SECTIONS, HERO, PAGE-HERO ------------------------------------------ */
/* Generous, scaling vertical rhythm; every section keeps full top + bottom
   padding (no collapse between adjacent sections) so coloured bands never hug
   their headings. Site-wide, per Jay. */
.section{ padding-block:clamp(3.5rem, 2.6rem + 3.8vw, 6rem); }
.section--muted{ background:var(--paper-2); }
.section--brand{ background:var(--brand); color:var(--brand-ink); }
.section--brand .eyebrow,.section--brand h2,.section--brand h3{ color:var(--brand-ink); }
.section--brand .section-lead{ color:color-mix(in srgb, var(--brand-ink) 82%, transparent); }
.section__head{ max-width:64ch; margin-bottom:var(--s-6); }

.hero{ padding-block:var(--s-8) var(--s-7); position:relative; }
.hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s-7); align-items:center; }
@media (max-width: 860px){ .hero__grid{ grid-template-columns:1fr; gap:var(--s-6); } }
.hero h1{ margin-bottom:var(--s-4); }
.hero .section-lead{ margin-bottom:var(--s-2); }
.hero__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-3); background:var(--paper-2); }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__stats{ display:flex; flex-wrap:nowrap; gap:var(--s-5); margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--line); }
@media (max-width: 460px){ .hero__stats{ flex-wrap:wrap; } }
.stat__n{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,1.1rem+1.6vw,2rem); color:var(--brand); line-height:1; }
.stat__l{ font-size:var(--t-sm); color:var(--ink-soft); margin-top:var(--s-1); }

.page-hero{ background:var(--brand-soft); padding-block:var(--s-7); border-bottom:1px solid var(--line); }
.page-hero h1{ margin-bottom:var(--s-3); }
.crumb{ font-size:var(--t-sm); color:var(--ink-soft); margin-bottom:var(--s-4); }
.crumb a{ color:var(--ink-soft); }
.crumb a:hover{ color:var(--brand); }

.cta-strip{ background:var(--ink); color:#fff; border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-5); }
.cta-strip h2{ color:#fff; margin:0; max-width:22ch; }
.cta-strip p{ color:rgba(255,255,255,.78); margin:.4rem 0 0; }

.feature{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-7); align-items:center; }
.feature--flip{ direction:rtl; } .feature--flip > *{ direction:ltr; }
@media (max-width: 800px){ .feature{ grid-template-columns:1fr; gap:var(--s-5); } .feature--flip{ direction:ltr; } }
.feature__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:5/4; box-shadow:var(--shadow-2); background:var(--paper-2); }
.feature__media img{ width:100%; height:100%; object-fit:cover; }

/* 8. FORMS (state machine) + FOOTER ------------------------------------- */
.form{ max-width:var(--wrap-narrow); }
.fieldset{ border:0; padding:0; margin:0 0 var(--s-5); }
.fieldset legend{ font-family:var(--font-display); font-weight:700; font-size:var(--t-h3); padding:0; margin-bottom:var(--s-3); }
.field{ margin-bottom:var(--s-4); }
.field label{ display:block; font-weight:600; font-size:var(--t-sm); margin-bottom:var(--s-2); }
.input,.textarea,select.input{
  width:100%; font:inherit; font-size:var(--t-body); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.7rem .85rem; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus,.textarea:focus,select.input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); outline:none; }
.textarea{ min-height:120px; resize:vertical; }
.help{ display:block; font-size:var(--t-sm); color:var(--ink-soft); margin-bottom:var(--s-2); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.savebar{ display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-5); }
.savestatus{ display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--t-sm); color:var(--ink-soft); }
.savestatus .dot{ width:9px; height:9px; border-radius:50%; background:var(--line); transition:background .2s var(--ease); }
.savestatus[data-state="saving"] .dot{ background:var(--accent); animation:pulse 1s var(--ease) infinite; }
.savestatus[data-state="saved"] .dot{ background:var(--pb-green); }
.savestatus[data-state="error"] .dot{ background:#d64545; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.site-footer{ background:var(--paper-2); border-top:1px solid var(--line); padding-block:var(--s-7) var(--s-6); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s-6); margin-bottom:var(--s-6); }
@media (max-width: 720px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s-5); } }
.footer-col h3{ font-size:var(--t-sm); text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-mono); color:var(--ink-soft); margin:0 0 var(--s-3); font-weight:600; }
.footer-col a{ display:block; color:var(--ink); font-size:var(--t-sm); margin-bottom:var(--s-2); }
.footer-col a:hover{ color:var(--brand); }
.footer-note{ font-size:var(--t-sm); color:var(--ink-soft); }
.footer-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); padding-top:var(--s-5); border-top:1px solid var(--line); font-size:var(--t-sm); color:var(--ink-soft); }
/* Social icon link (footer). Circular brand-coloured icon. */
.social-link{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff; transition:transform .15s var(--ease), filter .15s var(--ease); }
.social-link:hover{ transform:translateY(-2px); filter:brightness(1.14); text-decoration:none; color:#fff; }
.social-link svg{ width:18px; height:18px; }
.footer-bar .social-link{ margin-left:auto; }
@media (prefers-reduced-motion: reduce){ .social-link{ transition:none; } }
/* Resolved lead price. brief.js fills [data-price-chip] with the service label
   (e.g. "$2,500 +GST"); it stays empty for TBD/custom/absent, and :empty hides
   the whole chip (separator dot included) so nothing dangles. */
.price-chip{ font-weight:700; white-space:nowrap; }
.price-chip:empty, [data-price-blurb]:empty{ display:none; }
.demo-ribbon .price-chip{ opacity:1; }
.demo-ribbon .price-chip::before,
.footer-bar .price-chip::before{ content:"\00b7"; font-weight:400; opacity:.5; margin-inline:.5rem .35rem; }
/* PlainBlack watermark. The fibonacci spiral mark, icon-only (we never use a
   "Built by PlainBlack" wordmark). Recolored to the demo's accent via a CSS mask
   over the canonical /assets/pb-mark.svg; the icon fill and its pulsing glow both
   read --pb-c, so the colour and the glow ALWAYS match. Override --pb-mark on the
   footer to use the partner's colour when the footer BG would clash with --accent. */
.pb-mark-link{ display:inline-flex; align-items:center; line-height:0; }
.pb-mark-link:hover{ text-decoration:none; }
.pb-mark{
  --pb-c: var(--pb-mark, var(--accent));
  display:inline-block; width:26px; height:26px; background:var(--pb-c);
  -webkit-mask:url(/assets/pb-mark.svg) center / contain no-repeat;
          mask:url(/assets/pb-mark.svg) center / contain no-repeat;
  filter:drop-shadow(0 0 1px var(--pb-c));
  animation:pbpulse 2.6s var(--ease) infinite;
}
@keyframes pbpulse{
  0%,100%{ transform:scale(1);    opacity:.85; filter:drop-shadow(0 0 1px var(--pb-c)); }
  50%    { transform:scale(1.12); opacity:1;   filter:drop-shadow(0 0 8px var(--pb-c)); }
}
.pb-mark-link:hover .pb-mark{ filter:drop-shadow(0 0 9px var(--pb-c)); transform:scale(1.08); }

/* Default AI assistant. Injected by js/chat.js at the bottom-right. It never
   shares a corner with the PlainBlack mark (which sits in the footer, left), so
   the two icons never blend or overlay. */
.chat{ position:fixed; right:clamp(14px,3vw,22px); bottom:clamp(14px,3vw,22px); z-index:70; }
.chat-fab{
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:var(--brand); color:var(--brand-ink); box-shadow:var(--shadow-3);
  display:grid; place-items:center; transition:transform .16s var(--ease), filter .16s var(--ease);
}
.chat-fab:hover{ transform:translateY(-2px); filter:brightness(1.07); }
.chat-fab svg{ width:26px; height:26px; }
.chat[data-open="true"] .chat-fab__open{ display:none; }
.chat-fab__close{ display:none; }
.chat[data-open="true"] .chat-fab__close{ display:block; }
.chat-panel{
  position:absolute; right:0; bottom:70px; width:min(86vw,340px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-3); overflow:hidden; display:flex; flex-direction:column;
}
.chat-panel[hidden]{ display:none; }
.chat-head{ background:var(--brand); color:var(--brand-ink); padding:.7rem .9rem; display:flex; align-items:center; justify-content:space-between; }
.chat-head strong{ font-family:var(--font-display); font-size:1rem; }
.chat-head button{ background:none; border:0; color:inherit; font-size:1.35rem; line-height:1; cursor:pointer; padding:0 .2rem; }
.chat-log{ display:flex; flex-direction:column; gap:.55rem; padding:1rem; max-height:46vh; overflow-y:auto; }
.chat-msg{ padding:.55rem .8rem; border-radius:13px; max-width:86%; font-size:var(--t-sm); line-height:1.45; }
.chat-msg--bot{ background:var(--paper-2); color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-msg--me{ background:var(--brand); color:var(--brand-ink); align-self:flex-end; border-bottom-right-radius:4px; }
.chat-form{ display:flex; gap:.4rem; padding:.6rem; border-top:1px solid var(--line); }
.chat-form input{ flex:1; font:inherit; font-size:var(--t-sm); padding:.55rem .7rem; border:1px solid var(--line); border-radius:var(--radius-pill); }
.chat-form input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.chat-form button{ background:var(--brand); color:var(--brand-ink); border:0; border-radius:var(--radius-btn); padding:.5rem .9rem; font-weight:700; font-size:var(--t-sm); cursor:pointer; }
@media (prefers-reduced-motion: reduce){ .pb-mark{ animation:none; transform:none; filter:drop-shadow(0 0 4px var(--pb-c)); } .savestatus .dot{ animation:none; } .chat-fab{ transition:none; } }

.read-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--pop); z-index:120; transition:width .1s linear; }

/* =========================================================================
   9. SMARTRENT COMPONENTS (built on the shell tokens above)
   ========================================================================= */

/* Channel brand tokens (used by the SmartList teaser + the tool) */
:root{
  --c-web:       var(--brand);   /* SmartRent website */
  --c-trademe:   #0e7d4f;        /* TradeMe green     */
  --c-market:    #1877F2;        /* Facebook Marketplace */
  --c-fb:        #1877F2;        /* Facebook Page     */
}

/* --- Stars (gold, sparing) --------------------------------------------- */
.stars{ color:var(--gold); letter-spacing:.06em; font-size:.95em; line-height:1; }
.stars[aria-hidden]{ user-select:none; }

/* --- Soft tag (mono micro-label, not a pill cluster) ------------------- */
.tag-soft{
  display:inline-flex; align-items:center; gap:.35em; font-family:var(--font-mono);
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--brand); background:var(--brand-soft); padding:.3rem .6rem; border-radius:var(--radius-sm);
}
.tag-soft--gold{ color:#8a5a12; background:var(--gold-soft); }
.tag-soft--green{ color:#1f6a40; background:color-mix(in srgb, var(--accent) 22%, #fff); }

/* --- Eyebrow with a small rule (signature beat) ------------------------ */
/* eyebrow--rule retained as a markup hook, but the leading dash is removed
   site-wide (per Jay). No ::before line. */
.eyebrow--rule{ display:inline-flex; align-items:center; }

/* --- Feature ticks ----------------------------------------------------- */
.ticks{ list-style:none; padding:0; margin:0 0 var(--s-4); display:grid; gap:var(--s-3); }
.ticks li{ position:relative; padding-left:1.9rem; color:var(--ink-soft); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.18em; width:1.2rem; height:1.2rem; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 28%, #fff);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/0.78rem no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/0.78rem no-repeat;
  background-color:var(--accent-deep);
}
.ticks li strong{ color:var(--ink); }

/* --- "Why SmartRent vs the big agencies" comparison -------------------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
@media (max-width:720px){ .compare{ grid-template-columns:1fr; } }
.compare__col{ border:1px solid var(--line); border-radius:var(--radius); padding:var(--s-6); background:var(--paper); }
.compare__col--them{ background:var(--paper-2); }
.compare__col--us{ border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow:var(--shadow-2); position:relative; }
.compare__col h3{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-4); }
.compare__list{ list-style:none; padding:0; margin:0; display:grid; gap:var(--s-3); }
.compare__list li{ position:relative; padding-left:1.8rem; font-size:var(--t-sm); color:var(--ink-soft); line-height:1.5; }
.compare__list li::before{ position:absolute; left:0; top:0; font-weight:800; }
.compare__col--them .compare__list li::before{ content:"\00d7"; color:#b04848; }
.compare__col--us .compare__list li{ color:var(--ink); }
.compare__col--us .compare__list li::before{ content:"\2713"; color:var(--accent-deep); }

/* --- Steps (how it works) ---------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); counter-reset:step; }
@media (max-width:860px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:var(--s-5); }
.step::before{
  counter-increment:step; content:counter(step); font-family:var(--font-display); font-weight:800;
  display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--brand); color:#fff; font-size:1.05rem; margin-bottom:var(--s-3);
}
.step h3{ font-size:1.05rem; margin-bottom:var(--s-2); }
.step p{ font-size:var(--t-sm); color:var(--ink-soft); margin:0; }

/* --- Property listing cards -------------------------------------------- */
.listings-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
@media (max-width:900px){ .listings-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .listings-grid{ grid-template-columns:1fr; } }

.listing{
  text-align:left; padding:0; overflow:hidden; display:flex; flex-direction:column; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease); width:100%; font:inherit; color:inherit;
}
.listing:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.listing:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.listing__media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--paper-2); }
.listing__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.listing:hover .listing__media img{ transform:scale(1.05); }
.listing__badge{
  position:absolute; top:var(--s-3); left:var(--s-3); font-family:var(--font-mono); font-size:var(--t-xs);
  font-weight:700; letter-spacing:.04em; padding:.3rem .55rem; border-radius:var(--radius-sm); color:#fff;
  background:#1c6b42; box-shadow:var(--shadow-1);
}
.listing__badge--pending{ background:#8a5a12; }
.listing__body{ padding:var(--s-4) var(--s-5) var(--s-5); display:flex; flex-direction:column; gap:var(--s-2); flex:1; }
.listing__price{ font-family:var(--font-display); font-weight:800; font-size:1.32rem; color:var(--brand); line-height:1; }
.listing__price span{ font-size:var(--t-sm); font-weight:600; color:var(--ink-soft); }
.listing__title{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--ink); margin:0; }
.listing__addr{ font-size:var(--t-sm); color:var(--ink-soft); margin:0; }
.prop-meta{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:auto; padding-top:var(--s-3); border-top:1px solid var(--line); }
.pm{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--t-sm); color:var(--ink-soft); font-weight:600; }
.pm svg{ width:18px; height:18px; color:var(--accent-deep); }

/* --- Rentals filter bar ------------------------------------------------ */
.filters{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-4); align-items:end;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s-5); box-shadow:var(--shadow-1); margin-bottom:var(--s-6);
}
@media (max-width:640px){ .filters{ grid-template-columns:repeat(2,1fr); } }
.filters__group{ display:flex; flex-direction:column; gap:var(--s-2); min-width:0; }
.filters__group label{ font-size:var(--t-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-family:var(--font-mono); }
.filters__count{ grid-column:1 / -1; font-size:var(--t-sm); color:var(--ink-soft); }
.filters__count strong{ color:var(--brand); }
.filters .btn{ justify-self:start; }
.filters__group--wide{ grid-column:1 / -1; }

/* Suburbs multiselect dropdown */
.ms{ position:relative; }
.ms__toggle{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); text-align:left; cursor:pointer; }
.ms__value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms__chev{ flex:0 0 auto; color:var(--ink-soft); transition:transform .15s var(--ease); }
.ms__toggle[aria-expanded="true"] .ms__chev{ transform:rotate(180deg); }
.ms__panel{ position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0; min-width:220px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-2); padding:var(--s-2); }
.ms__list{ max-height:240px; overflow-y:auto; display:flex; flex-direction:column; }
.ms__panel .ms__opt{ display:flex; align-items:center; gap:var(--s-2); padding:.4rem .5rem; border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:var(--t-sm); font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink); cursor:pointer; }
.ms__panel .ms__opt:hover{ background:var(--brand-soft); }
.ms__panel .ms__opt input{ width:16px; height:16px; flex:0 0 auto; accent-color:var(--brand); cursor:pointer; }
.ms__panel .ms__opt--all{ font-weight:700; border-bottom:1px solid var(--line); border-radius:0; margin-bottom:var(--s-1); padding-bottom:.5rem; }

/* --- Rentals map (Leaflet) -------------------------------------------- */
.rentals-map{ position:relative; z-index:0; height:400px; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); margin-bottom:var(--s-6); overflow:hidden; background:var(--paper-2); }
.rentals-map .leaflet-container{ font-family:var(--font-body); }
.leaflet-div-icon.map-pin-wrap{ background:transparent; border:0; width:0; height:0; }
.map-pin{ position:absolute; left:0; top:0; transform:translate(-50%,-110%); white-space:nowrap; padding:.2rem .5rem; border-radius:999px;
  background:var(--pop); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.78rem; line-height:1.2; border:2px solid #fff;
  box-shadow:0 2px 6px rgba(16,20,28,.3); cursor:pointer; }
.map-pin:hover{ background:var(--brand); }
.leaflet-popup-content{ margin:.6rem .8rem; font-family:var(--font-body); }
.map-pop__title{ font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--ink); margin:0 0 .15rem; }
.map-pop__meta{ font-size:.82rem; color:var(--ink-soft); margin:0 0 .5rem; }
.map-pop__btn{ display:inline-block; font-weight:700; font-size:.82rem; color:var(--brand); cursor:pointer; }
.modal__map{ position:relative; z-index:0; height:200px; margin-top:var(--s-3); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:var(--paper-2); }

/* --- Dossier tabs ----------------------------------------------------- */
.dtabs{ display:flex; flex-wrap:wrap; gap:var(--s-1); border-bottom:2px solid var(--line); margin-bottom:var(--s-7); }
.dtab{ appearance:none; border:0; background:none; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:var(--t-body);
  color:var(--ink-soft); padding:var(--s-3) var(--s-4); border-bottom:3px solid transparent; margin-bottom:-2px; border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  transition:color .15s var(--ease), border-color .15s var(--ease); }
.dtab:hover{ color:var(--ink); }
.dtab[aria-selected="true"]{ color:var(--brand); border-bottom-color:var(--brand); }
.dpanel[hidden]{ display:none; }
.dpanel:focus{ outline:none; }
.dcost{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-5); margin-top:var(--s-6); padding:var(--s-4) var(--s-5); border-radius:var(--radius); background:var(--brand-soft); }
.dcost__item{ display:flex; flex-direction:column; gap:2px; }
.dcost__k{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-family:var(--font-mono); }
.dcost__v{ font-family:var(--font-display); font-weight:800; font-size:1.35rem; line-height:1; color:var(--brand); }
.dcost__v--free{ color:var(--pop); }
.dcost__note{ flex:1 1 240px; font-size:var(--t-sm); color:var(--ink-soft); }

/* --- Modal (property detail) ------------------------------------------- */
.modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:var(--s-4); }
.modal[hidden]{ display:none; }
.modal__scrim{ position:absolute; inset:0; background:rgba(16,20,28,.6); animation:fade .2s var(--ease); }
.modal__dialog{
  position:relative; z-index:1; width:min(720px,100%); max-height:92vh; overflow-y:auto;
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow-3); animation:pop .26s var(--ease);
}
@keyframes fade{ from{ opacity:0; } } @keyframes pop{ from{ opacity:0; transform:translateY(14px); } }
@media (prefers-reduced-motion:reduce){ .modal__scrim,.modal__dialog{ animation:none; } }
.modal__media{ aspect-ratio:16/9; overflow:hidden; background:var(--paper-2); border-radius:var(--radius) var(--radius) 0 0; }
.modal__media img{ width:100%; height:100%; object-fit:cover; }
.modal__close{
  position:absolute; top:var(--s-3); right:var(--s-3); z-index:2; width:40px; height:40px; border-radius:50%;
  border:0; background:rgba(255,255,255,.92); color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--shadow-2);
}
.modal__close:hover{ background:#fff; }
.modal__body{ padding:var(--s-6); }
.modal__body h2{ margin-bottom:var(--s-2); }
.modal__pricerow{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-4); margin-bottom:var(--s-4); }
.modal__price{ font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--brand); }
.modal__price span{ font-size:var(--t-sm); font-weight:600; color:var(--ink-soft); }
.modal__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:var(--s-3); margin:var(--s-4) 0; }
.modal__stat{ background:var(--paper-2); border-radius:var(--radius-sm); padding:var(--s-3) var(--s-4); }
.modal__stat .k{ font-family:var(--font-mono); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.modal__stat .v{ font-weight:700; color:var(--ink); }

/* --- FAQ accordion ----------------------------------------------------- */
.faq{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); box-shadow:var(--shadow-1); }
.faq__item + .faq__item{ border-top:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  background:none; border:0; cursor:pointer; text-align:left; padding:var(--s-5);
  font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--ink);
}
.faq__q:hover{ color:var(--brand); }
.faq__icon{ flex:0 0 auto; width:22px; height:22px; position:relative; transition:transform .25s var(--ease); }
.faq__icon::before,.faq__icon::after{ content:""; position:absolute; background:var(--accent-deep); border-radius:2px; }
.faq__icon::before{ top:10px; left:3px; right:3px; height:2px; }
.faq__icon::after{ left:10px; top:3px; bottom:3px; width:2px; transition:opacity .25s var(--ease); }
.faq__q[aria-expanded="true"] .faq__icon::after{ opacity:0; }
.faq__a{ padding:0 var(--s-5); max-height:0; overflow:hidden; transition:max-height .3s var(--ease), padding .3s var(--ease); }
.faq__a p{ color:var(--ink-soft); margin:0 0 var(--s-5); }
.faq__q[aria-expanded="true"] + .faq__a{ padding-bottom:var(--s-2); }
@media (prefers-reduced-motion:reduce){ .faq__a{ transition:none; } .faq__icon{ transition:none; } }

/* --- Tool teaser (channels fan-out) ------------------------------------ */
.tool-teaser{ background:var(--brand); color:#fff; border-radius:var(--radius); padding:clamp(1.6rem,4vw,2.8rem); overflow:hidden; }
.tool-teaser h2,.tool-teaser .eyebrow{ color:#fff; }
.tool-teaser .eyebrow{ color:color-mix(in srgb,var(--accent) 80%, #fff); }
.tool-teaser p{ color:rgba(255,255,255,.82); }
.chan-row{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin:var(--s-5) 0; }
.chan{
  display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; padding:.5rem .85rem; border-radius:var(--radius-sm); font-size:var(--t-sm); font-weight:600;
}
.chan .dot{ width:9px; height:9px; border-radius:50%; }

/* --- Pitch: Lighthouse before/after scorecard -------------------------- */
.scorecard{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5); }
@media (max-width:620px){ .scorecard{ grid-template-columns:1fr; } }
.score{ border:1px solid var(--line); border-radius:var(--radius); padding:var(--s-5); background:var(--paper); box-shadow:var(--shadow-1); }
.score--ours{ border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); }
.score__h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-4); }
.score__h h3{ margin:0; font-size:1.05rem; }
.score__rows{ display:grid; gap:var(--s-3); }
.score__row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--s-4); }
.score__label{ font-size:var(--t-sm); color:var(--ink-soft); }
.score__bar{ grid-column:1/-1; height:8px; border-radius:5px; background:var(--paper-2); overflow:hidden; }
.score__fill{ height:100%; border-radius:5px; transition:width .8s var(--ease); }
.score__fill--good{ background:var(--accent-deep); }
.score__fill--mid{ background:var(--gold); }
.score__fill--bad{ background:#cf5a4d; }
.score__n{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; min-width:2.4ch; text-align:right; }

/* --- Pitch: quick wins + fact spine ------------------------------------ */
.win{ display:flex; gap:var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--line); }
.win:last-child{ border-bottom:0; }
.win__ic{ flex:0 0 auto; width:2rem; height:2rem; border-radius:50%; background:var(--gold-soft); color:#8a5a12; display:grid; place-items:center; }
.win__ic svg{ width:1.1rem; height:1.1rem; }
.win p{ margin:0; }
.win strong{ color:var(--ink); }

.factspine{ display:grid; gap:var(--s-2); }
.fact{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-3); align-items:start; padding:var(--s-3) 0; border-bottom:1px solid var(--line); font-size:var(--t-sm); }
.fact__s{ font-family:var(--font-mono); font-size:var(--t-xs); font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:.2rem .5rem; border-radius:var(--radius-sm); white-space:nowrap; }
.fact__s--confirmed{ background:color-mix(in srgb,var(--accent) 22%,#fff); color:#1f6a40; }
.fact__s--claim{ background:var(--brand-soft); color:var(--brand); }
.fact__s--toconfirm{ background:var(--gold-soft); color:#8a5a12; }
.fact__s--measured{ background:#eef0f3; color:var(--ink-soft); }

/* --- Owner intro (Meet Ora) ------------------------------------------- */
.owner-card{ display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--s-7); align-items:center; }
@media (max-width:760px){ .owner-card{ grid-template-columns:1fr; gap:var(--s-5); } }
.owner-photo{ aspect-ratio:4/5; border-radius:var(--radius); background:linear-gradient(160deg,var(--brand),#1b1a6e); display:grid; place-items:center; box-shadow:var(--shadow-2); overflow:hidden; position:relative; }
.owner-photo .initials{ font-family:var(--font-display); font-weight:800; font-size:4rem; color:rgba(255,255,255,.92); }
.owner-photo .photo-note{ position:absolute; bottom:var(--s-3); left:0; right:0; text-align:center; font-family:var(--font-mono); font-size:var(--t-xs); color:rgba(255,255,255,.7); }

/* --- Credential badges (trust) ----------------------------------------- */
.creds{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-4); }
.cred{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line); border-radius:var(--radius-sm); padding:.5rem .8rem; font-size:var(--t-sm); font-weight:600; color:var(--ink); background:var(--paper); }
.cred svg{ width:18px; height:18px; color:var(--accent-deep); }

/* --- Quote / testimonial with stars ------------------------------------ */
.quote{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s-6); box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:var(--s-3); }
.quote p{ margin:0; font-size:1.05rem; color:var(--ink); }
.quote figcaption{ font-size:var(--t-sm); color:var(--ink-soft); font-weight:600; }

/* --- Small print / sample-data note ------------------------------------ */
.fineprint{ font-size:var(--t-xs); color:var(--ink-soft); font-family:var(--font-mono); }

/* --- Appraisal estimator (calc-engine) --------------------------------- */
.appraisal{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); align-items:stretch; }
@media (max-width:780px){ .appraisal{ grid-template-columns:1fr; } }
.apr-form{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s-6); box-shadow:var(--shadow-1); display:grid; gap:var(--s-4); align-content:start; }
.apr-form .field{ margin:0; }
.apr-form label{ font-size:var(--t-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); font-family:var(--font-mono); display:block; margin-bottom:var(--s-2); }
.apr-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.apr-check{ display:flex; align-items:center; gap:var(--s-2); font-size:var(--t-sm); color:var(--ink); cursor:pointer; }
.apr-check input{ width:18px; height:18px; accent-color:var(--pop); }

.apr-result{ background:var(--brand); color:#fff; border-radius:var(--radius); padding:var(--s-6); box-shadow:var(--shadow-2); display:flex; flex-direction:column; justify-content:center; min-height:280px; }
.apr-eyebrow{ font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb,var(--accent) 82%,#fff); margin:0 0 var(--s-3); }
.apr-figure{ display:flex; align-items:baseline; gap:.3rem; margin-bottom:var(--s-4); }
.apr-now{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,1.6rem+3vw,3.4rem); line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.apr-per{ color:rgba(255,255,255,.7); font-weight:600; }
.apr-range{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-2); }
.apr-end{ font-size:var(--t-sm); color:rgba(255,255,255,.82); font-weight:600; white-space:nowrap; }
.apr-track{ position:relative; flex:1; height:6px; border-radius:4px; background:rgba(255,255,255,.18); }
.apr-track__fill{ position:absolute; left:12%; right:12%; top:0; bottom:0; border-radius:4px; background:var(--accent); }
.apr-track__dot{ position:absolute; left:50%; top:50%; width:14px; height:14px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 55%, transparent); }
.apr-rangelabel{ font-size:var(--t-sm); color:rgba(255,255,255,.88); margin:0 0 var(--s-4); }
.apr-note{ font-size:var(--t-xs); color:rgba(255,255,255,.64); line-height:1.55; margin:0 0 var(--s-5); }
.apr-result .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
.apr-result .btn--ghost:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.08); }

/* --- Photo banner section (fixed-attachment parallax on desktop) -------- */
.section--photo{ position:relative; color:#fff; background:var(--brand) center / cover no-repeat; }
.section--photo::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,2,40,.74), rgba(3,2,70,.88)); }
.section--photo > .wrap{ position:relative; z-index:1; }
.section--photo h2, .section--photo h3{ color:#fff; }
.section--photo .section-lead{ color:rgba(255,255,255,.86); }
.section--photo .eyebrow{ color:color-mix(in srgb, var(--accent) 84%, #fff); }
@media (min-width:861px){ .section--photo{ background-attachment:fixed; } }
@media (prefers-reduced-motion:reduce){ .section--photo{ background-attachment:scroll; } }
/* Subtle parallax on the page-hero too (kept gentle) */
.page-hero{ background-size:cover; background-position:center; }
.page-hero.page-hero--photo{ position:relative; color:#fff; border-bottom:0; }
.page-hero--photo::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,2,40,.72), rgba(3,2,70,.9)); }
.page-hero--photo > .wrap{ position:relative; z-index:1; }
.page-hero--photo h1{ color:#fff; }
.page-hero--photo .section-lead, .page-hero--photo .crumb, .page-hero--photo .crumb a{ color:rgba(255,255,255,.86); }
.page-hero--photo .eyebrow{ color:color-mix(in srgb, var(--accent) 84%, #fff); }
@media (min-width:861px){ .page-hero--photo{ background-attachment:fixed; } }
@media (prefers-reduced-motion:reduce){ .page-hero--photo{ background-attachment:scroll; } }