/* ===========================================================================
   NEW — website-overhaul mockup additions (2026-08-28).
   Loaded AFTER site.css. Every component here is assembled from site.css's own
   recipes (panel, pillar, kicker, mono label, btn) — no new colours, radii or
   type sizes. Each block names what it reuses.
   Decisions implemented: reference docs/website overhaul/
   WEBSITE-INFORMATION-ARCHITECTURE-PLAN.md — "Confirmed design and
   interaction decisions".
   ========================================================================= */

/* --- Phone frame + hero collage (NEW component). Frame = .panel recipe on
   the #0D0F11 well colour; screen = .img-slot placeholder unchanged. -------- */
.phone{position:relative;width:240px;aspect-ratio:9/19;border-radius:32px;background:#0D0F11;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.5);padding:10px;flex:none}
.phone-screen{position:relative;width:100%;height:100%;border-radius:24px;overflow:hidden;background:#1C2024}
.phone-collage{position:relative;height:560px;display:flex;align-items:center;justify-content:center}
.phone-collage .phone{position:absolute}
.phone-collage .p-main{z-index:3;width:252px}
/* 2026-09-05: side phones spread wider so most of each screen shows; still a slight overlap with the main phone. */
.phone-collage .p-left{z-index:2;transform:translateX(-200px) translateY(18px) rotate(-3deg);opacity:.9}
.phone-collage .p-right{z-index:2;transform:translateX(200px) translateY(18px) rotate(3deg);opacity:.9}

/* --- Home product cards (reuse .pillar as an <a>) + hover preview band.
   Desktop hover updates the band; any click navigates. Band = .focus-band,
   built from the kicker/mono label recipes. Hidden on mobile (cards are
   plain links there). ------------------------------------------------------ */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
a.pillar{color:inherit;display:flex;min-height:250px}
a.pillar .pillar-arrow{margin-top:auto;font:700 18px "JetBrains Mono",monospace;color:#00b3a4;align-self:flex-end}
a.pillar .pillar-tag{margin-top:auto}
.focus-band{display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:baseline;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);padding:18px 0;margin-top:28px}
.focus-label{font:700 10.5px "JetBrains Mono",monospace;letter-spacing:.14em;color:#00b3a4;text-transform:uppercase}
.focus-copy{font:600 17px/1.4 "Barlow Condensed",sans-serif;letter-spacing:.02em;color:rgba(255,255,255,.85)}

/* --- Proof strip (mono tags row, reuses .pillar-tag type + kicker tick). --- */
.proof-strip{display:flex;gap:28px;flex-wrap:wrap;margin-top:40px}
.proof-item{display:flex;align-items:center;gap:9px;font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:rgba(255,255,255,.5)}
.proof-item::before{content:"";width:14px;height:3px;border-radius:2px;background:#00b3a4}

/* --- About teaser (reuses .panel + kicker). ------------------------------- */
.about-teaser{background:#16191C;border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.about-teaser p{font:400 16px/1.55 Barlow,sans-serif;color:rgba(255,255,255,.72);margin:0;max-width:640px}
.about-teaser .btn-ghost{flex:none}

/* --- Accordions (text-only, native <details>). Row = .record recipe. ------ */
.acc-list{display:flex;flex-direction:column;gap:8px;margin-top:28px}
.acc{background:#0D0F11;border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px}
.acc summary::-webkit-details-marker{display:none}
.acc-title{font:600 14.5px Barlow,sans-serif;color:#F2F3F5}
.acc-mark{font:700 15px "JetBrains Mono",monospace;color:#00b3a4;flex:none}
.acc[open] .acc-mark{transform:rotate(45deg)}
.acc-body{padding:0 18px 16px;font:400 14px/1.6 Barlow,sans-serif;color:rgba(255,255,255,.66);max-width:640px}
.acc summary:hover .acc-title{color:#00b3a4}

/* --- Feature-page hero (reuses .hero-grid; phone on the right). ----------- */
.page-hero{padding-top:56px}
.page-hero .hero-grid{min-height:480px}
.page-hero .phone-collage{height:480px}
.page-hero-photo{position:relative;border-radius:24px;overflow:hidden;background:#1C2024;height:480px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
/* Small phone overlapping a feature-page hero photo (photo + screenshot mix). */
.hero-phone-over{position:absolute;right:20px;bottom:20px;width:172px;z-index:3}

/* --- Section with a flat cropped screenshot card beside copy. Card = .panel;
   slot = .img-slot with its label. ----------------------------------------- */
.shot-card{position:relative;border-radius:24px;overflow:hidden;background:#16191C;border:1px solid rgba(255,255,255,.09);box-shadow:0 12px 30px rgba(0,0,0,.5);min-height:340px}

/* --- Responsible-use / privacy footer note (reuses .notice, teal-scoped). -- */
.note-strip{background:#16191C;border:1px solid rgba(255,255,255,.09);border-left:3px solid #00b3a4;border-radius:0 16px 16px 0;padding:16px 18px;margin-top:56px}
.note-strip .notice-title{color:#00b3a4}
.note-strip .notice-text{color:rgba(255,255,255,.6);font-size:13.5px}

/* --- Prev/next adjacent-page cards (reuse .pillar recipe as links). -------- */
.adjacent-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:64px}
.adjacent-card{background:#16191C;border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:22px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;color:inherit;min-height:130px}
.adjacent-card:hover{border-color:rgba(0,179,164,.45);color:inherit}
.adjacent-kicker{font:500 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;color:rgba(255,255,255,.42)}
.adjacent-title{font:700 26px/1 "Barlow Condensed",sans-serif;text-transform:uppercase}
.adjacent-sub{font:400 13.5px/1.5 Barlow,sans-serif;color:rgba(255,255,255,.6)}
.adjacent-card .go{margin-top:auto;font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:#00b3a4}
.adjacent-card.next{text-align:right;align-items:flex-end}

/* --- Footer sitemap columns (type recipes from .footer-links/.footer-copy). */
.footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-bottom:32px}
.footer-col-title{font:600 12px "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:14px}
.footer-col a{display:block;font:400 14px/1.5 Barlow,sans-serif;color:rgba(255,255,255,.66);padding:4px 0}
.footer-col a:hover{color:#F2F3F5}
.footer-blurb{font:400 13.5px/1.6 Barlow,sans-serif;color:rgba(255,255,255,.55);max-width:300px;margin-top:14px}
/* #139 (2026-09-08): footer social links, mockup website-footer-social.html option C1.
   Icon + label rows under the 18+ badge; link font and colour match .footer-col a. */
.footer-follow{display:flex;flex-direction:column;gap:2px;margin-top:18px}
.footer-follow a{display:flex;align-items:center;gap:10px;font:400 14px/1.5 Barlow,sans-serif;color:rgba(255,255,255,.66);padding:4px 0}
.footer-follow a:hover{color:#F2F3F5}
.footer-follow svg{width:16px;height:16px;flex:none;opacity:.8}
.footer-18{display:inline-block;font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.22);border-radius:7px;padding:5px 8px;margin-top:16px}

/* --- Mobile menu (hamburger; nav items reuse .nav-link). ------------------- */
.nav-toggle{display:none;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);cursor:pointer;place-items:center;padding:0}
.nav-toggle svg{display:block}
.mobile-menu{display:none;position:absolute;top:74px;left:0;right:0;background:rgba(13,15,17,.97);border-bottom:1px solid rgba(255,255,255,.09);padding:10px 20px 20px;flex-direction:column;gap:4px}
.mobile-menu.open{display:flex}
.mobile-menu a{font:600 15px "Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-menu a:hover{color:#F2F3F5}

/* --- Responsive (breakpoints reused from site.css verbatim). --------------- */
@media (max-width:1240px){
  /* narrower desktops: tighter spread so the side phones clear the hero copy */
  .phone-collage{height:620px}
  .phone-collage .p-main{width:230px}
  .phone-collage .p-left,.phone-collage .p-right{width:170px}
  .phone-collage .p-left{transform:translateX(-152px) translateY(16px) rotate(-3deg)}
  .phone-collage .p-right{transform:translateX(152px) translateY(16px) rotate(3deg)}
}
@media (max-width:1080px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .phone-collage{height:480px}
  .phone-collage .p-left{transform:translateX(-165px) translateY(12px) scale(.8) rotate(-3deg)}
  .phone-collage .p-right{transform:translateX(165px) translateY(12px) scale(.8) rotate(3deg)}
  .product-grid{grid-template-columns:1fr}
  a.pillar{min-height:0}
  .focus-band{display:none} /* hover preview is desktop-only by decision */
  .footer-cols{grid-template-columns:1fr 1fr}
  .page-hero .hero-grid{min-height:0}
}
@media (max-width:720px){
  .nav-toggle{display:grid}
  .adjacent-grid{grid-template-columns:1fr}
  .adjacent-card.next{text-align:left;align-items:flex-start}
  .phone-collage{height:420px}
  .phone-collage .p-main{width:210px}
  .about-teaser{padding:22px}
}
@media (max-width:460px){
  .footer-cols{grid-template-columns:1fr}
  .phone-collage .p-left,.phone-collage .p-right{display:none}
}

/* --- NEW 2026-09-05 — Section rail (scroll-spy), feature pages only.
   Fixed to the left edge, vertically centred; built from the kicker tick
   + mono label recipes. Labels come from each <section data-spy="…">.
   Desktop-only (hidden under 1080px). ------------------------------------- */
.section-rail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:22px;padding:18px 0;border-left:1px solid rgba(255,255,255,.12)}
.section-rail a{position:relative;display:block;writing-mode:vertical-rl;transform:rotate(180deg);color:rgba(255,255,255,.4);font:500 11px "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:0 0 0 14px;transition:color .25s,font-size .25s,letter-spacing .25s}
.section-rail a::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:3px;height:14px;border-radius:2px;background:rgba(255,255,255,.22);transition:background .25s,height .25s}
.section-rail a:hover{color:#F2F3F5}
.section-rail a.active{color:#00b3a4;font:700 30px/1 "Barlow Condensed",sans-serif;letter-spacing:.06em}
.section-rail a.active::after{background:#00b3a4;height:100%}
@media (max-width:1080px){.section-rail{display:none}}

/* --- 2026-09-06: real assets in. Cropped screenshot cards show the top of the
   phone screen; the garage hero phone sits bottom-left to clear the car. ---- */
/* (2026-09-06) The portrait-in-a-frame treatment for feature cards was replaced by
   the sticky phone stack; .shot-card is back to the plain landscape card, which is
   all About uses it for now. */
/* Bigger hero phones (Harry 2026-09-06). */
.hero-phone-over{width:210px}
.phone-collage .p-main{width:280px}
.phone-collage .p-left,.phone-collage .p-right{width:226px}
.page-hero-photo .img-slot img{object-position:center center}
.garage-hero .hero-phone-over{right:auto;left:20px}

/* --- 2026-09-06: sticky phone stack (feature pages). Phone column pins at
   the top while the copy steps scroll past; screenshots crossfade. Frame =
   .phone recipe. Collapses to phone-above-copy under 900px. --------------- */
.feature-stack{display:grid;grid-template-columns:min(340px,calc((100vh - 150px) * .47)) 1fr;gap:72px;align-items:start;padding-top:24px}
.stack-phone{position:sticky;top:104px}
.stack-frame{width:min(340px,calc((100vh - 150px) * .47));border-radius:44px;padding:11px} /* never taller than the viewport minus header + margin */
.stack-frame .phone-screen{border-radius:34px}
.stack-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transition:opacity .35s ease}
.stack-shot.active{opacity:1}
.stack-step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:32px 0}
.stack-step:first-child{padding-top:0}
/* Keep the phone pinned through the last step: the sticky column unpins when the
   grid row ends, so the copy column carries extra run-out below its last step. */
.stack-copy{padding-bottom:34vh}
@media (max-width:900px){
  .feature-stack{grid-template-columns:1fr;gap:32px}
  .stack-phone{position:relative;top:auto;display:flex;justify-content:center}
  .stack-frame{width:260px}
  .stack-step{min-height:0;padding:16px 0}
}

/* --- 2026-09-06: beta page choices (radio / checkbox). Pill = .field input
   recipe; checked state = teal border + tick, same as focus ring. ---------- */
.field .opt{font:500 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:rgba(255,255,255,.3);text-transform:uppercase}
.choice-row{display:flex;gap:10px}
.field label.choice{display:flex;align-items:center;gap:12px;font:400 15px/1.45 Barlow,sans-serif;color:#F2F3F5;background:#0D0F11;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:13px 15px;cursor:pointer;flex:1;text-transform:none;letter-spacing:0}
.field .choice input{appearance:none;-webkit-appearance:none;width:18px;height:18px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,.3);background:#16191C;flex:none;display:grid;place-items:center;margin:0;box-shadow:none}
.field .choice input[type=radio]{border-radius:50%}
.field .choice input::after{content:"";width:8px;height:8px;border-radius:2px;background:#00b3a4;transform:scale(0);transition:transform .15s}
.field .choice input[type=radio]::after{border-radius:50%}
.field .choice input:checked::after{transform:scale(1)}
.field .choice:has(input:checked){border-color:#00b3a4;box-shadow:0 0 0 3px rgba(0,179,164,.18)}
.choice-wide{flex:none;width:100%}
.side-card .bullets{margin-top:0}

/* --- 2026-09-06: mobile fixes (Harry tested on phone). ------------------- */
@media (max-width:720px){
  /* Home collage: phones are absolutely positioned and taller than the 420px
     box, so the main phone spilled over the hero buttons. On phones the
     collage becomes a normal block with one static phone. */
  .phone-collage{height:auto;padding:8px 0 0}
  .phone-collage .phone{position:relative;transform:none;opacity:1}
  .phone-collage .p-left,.phone-collage .p-right{display:none}
  .phone-collage .p-main{width:240px}
  /* Feature hero: the overlay phone swamps the photo at phone width and the
     stack below shows every screen anyway, so the photo stands alone. */
  .hero-phone-over{display:none}
  .page-hero-photo{height:300px}
}
@media (max-width:900px){
  /* Sticky stack on small screens: no pinned phone at all. Each step shows its
     own screenshot (injected by overhaul.js) under its copy. */
  .stack-phone{display:none}
  .feature-stack{padding-top:56px}
  .stack-copy{padding-bottom:0} /* the desktop run-out exists only to keep the sticky phone pinned */
  .stack-step{min-height:0;padding:28px 0}
  .stack-step + .stack-step{border-top:1px solid rgba(255,255,255,.08)}
  .step-phone{display:flex;justify-content:center;margin-top:24px}
  .step-phone .phone{width:220px}
}
@media (min-width:901px){
  .step-phone{display:none}
}

/* --- 2026-09-06 pre-deploy check: Home collage spilled 18px past the viewport
   between 900 and ~1050px. Tighter spread in that band, and a global clip so
   no decorative overhang can ever cause a horizontal scrollbar (clip, not
   hidden, so position:sticky keeps working). ------------------------------- */
html,body{overflow-x:clip}
@media (max-width:1080px) and (min-width:901px){
  .phone-collage .p-main{width:220px}
  .phone-collage .p-left,.phone-collage .p-right{width:150px}
  .phone-collage .p-left{transform:translateX(-128px) translateY(14px) rotate(-3deg)}
  .phone-collage .p-right{transform:translateX(128px) translateY(14px) rotate(3deg)}
}

/* --- 2026-09-07: hero phones were too small on 1x desktop monitors (Harry's
   PC): a 210px phone gives the app text ~4 device pixels. Bigger phone and a
   taller hero photo on wide screens; the collage's side phones now use real
   widths instead of scale() so Chrome rasterises them sharp. ---------------- */
@media (min-width:1241px){
  .page-hero-photo{height:560px}
  .hero-phone-over{width:250px;right:24px;bottom:24px}
  .phone-collage{height:660px}
  .phone-collage .p-main{width:300px}
  .phone-collage .p-left,.phone-collage .p-right{width:210px}
  .phone-collage .p-left{transform:translateX(-180px) translateY(20px) rotate(-3deg)}
  .phone-collage .p-right{transform:translateX(180px) translateY(20px) rotate(3deg)}
}

/* --- 2026-09-07: readability on 1x monitors (Harry's PC). The hero phone shows
   the TOP of its screen at ~1.9x instead of the whole screen, so the header,
   first card and buttons are large enough to read; the full screen is in the
   sticky stack below. On wide, tall desktops the sticky phone grows to 420px. */
/* Zoom dropped again 2026-09-07 (Harry): the hero phone shows its whole screen. */
.hero-phone-over .phone-screen img{width:100%;height:100%;inset:0;object-position:center top}
@media (min-width:1241px){
  .feature-stack{grid-template-columns:min(420px,calc((100vh - 150px) * .47)) 1fr}
  .stack-frame{width:min(420px,calc((100vh - 150px) * .47))}
}

/* --- 2026-09-07: same treatment for the Home collage on desktop: each phone
   shows the top of its screen at 1.45x so it reads on a 1x monitor. Phones
   keep the whole screen (the collage is a single static phone there). ------- */
@media (min-width:901px){
  .phone-collage .phone-screen img{width:120%;height:auto;inset:auto;top:-5%;left:-2%}
  /* The front phone is big enough to show its whole screen (Harry, 2026-09-07). */
  .phone-collage .p-main .phone-screen img{width:100%;height:100%;inset:0}
}