/* ============================================================
   Build Pro HQ — promo site
   Shared stylesheet. The app is the brand: dark ground, hairline
   borders on flat surfaces, orange→amber gradient spent in ONE place.
   Rugged · clear · pro.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Colour — locked 1:1 from the app (constants/colors.ts) */
  --bg:        #1c1d22;
  --surface:   #16171b;
  --surface-2: #212228;
  --border:    rgba(255,255,255,0.07);
  --border-2:  rgba(255,255,255,0.12);
  --orange:    #e86726;   /* app colors.open  === logo bracket orange */
  --amber:     #fe9b33;
  --done:      #315e35;   /* app colors.done  === logo triangle green */
  --overdue:   #b14b34;
  --logo-navy: #16232b;   /* the official-logo ground — used for the mark plate only */
  --green-txt: #6fbf74;   /* AA-safe green for the odd green text cue on dark (7.0:1) */
  --text:      #e8e8e8;
  --muted:     #9a9aa2;   /* AA on bg (6.0:1) */
  --dim:       #8a8a92;   /* AA on bg (4.9:1) — used for small mono labels */
  --ink:       #17181c;   /* dark text for use on the bright gradient (AA: 5.4:1 on orange) */
  --grad:      linear-gradient(135deg, #e86726 0%, #fe9b33 100%);

  /* Type families */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale. Body base 17px. */
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* mono labels 13-14 */
  --step-0:  1.0625rem;                                       /* body 17 */
  --step-1:  clamp(1.2rem, 1.12rem + 0.35vw, 1.45rem);
  --step-2:  clamp(1.55rem, 1.35rem + 0.9vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
  --step-5:  clamp(3.1rem, 2rem + 5.4vw, 6.2rem);

  /* Spacing (4/8 base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --s-9:96px; --s-10:128px;

  /* Layout */
  --wrap: 1160px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 26px;

  /* Motion */
  --ease: cubic-bezier(.2,.6,.32,1);
  --dur: .6s;
}

/* ---------- 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(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
::selection{ background:var(--orange); color:#fff; }

a{ color:var(--amber); text-decoration:none; }
a:hover{ color:var(--orange); }

:focus-visible{
  outline:2.5px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--orange); color:#fff; padding:12px 18px;
  border-radius:0 0 var(--r-sm) 0; font-family:var(--mono); font-size:.85rem;
}
.skip-link:focus{ left:0; }

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  margin:0;
  letter-spacing:-0.02em;
  text-wrap:balance;
  color:#fff;
}
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); }
p{ margin:0 0 1.05em; color:var(--text); }
p:last-child{ margin-bottom:0; }
strong{ font-weight:600; color:#fff; }

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Mono eyebrow — field-data label */
.eyebrow{
  font-family:var(--mono);
  font-size:var(--step--1);
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 var(--s-4);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:var(--grad); display:inline-block;
}

.measure{ max-width:62ch; }
.lede{ font-size:var(--step-1); line-height:1.55; color:var(--text); }

/* ---------- 4. Layout primitives ---------- */
.wrap{ width:min(100% - 2*var(--s-5), var(--wrap)); margin-inline:auto; }
@media (max-width:600px){ .wrap{ width:min(100% - 2*var(--s-4), var(--wrap)); } }
.section{ padding-block:clamp(var(--s-8), 9vw, var(--s-10)); }
.divider{ height:1px; background:var(--border); border:0; margin:0; }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--display); font-weight:700; font-size:1rem;
  letter-spacing:-0.01em;
  padding:14px 22px; border-radius:var(--r-sm);
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s var(--ease), filter .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  line-height:1;
}
.btn .ic{ width:19px; height:19px; }
.btn-primary{
  background:var(--grad); color:var(--ink);
  box-shadow:0 0 0 0 rgba(232,103,38,0);
}
.btn-primary:hover{ filter:brightness(1.05); transform:translateY(-1px); color:var(--ink); }
.btn-ghost{
  background:transparent; color:var(--text);
  border-color:var(--border-2);
}
.btn-ghost:hover{ border-color:var(--amber); color:#fff; transform:translateY(-1px); }
.btn-lg{ padding:17px 28px; font-size:1.06rem; }

.textlink{
  font-family:var(--mono); font-size:.9rem; letter-spacing:.02em;
  color:var(--amber); display:inline-flex; align-items:center; gap:.4em;
}
.textlink .ic{ width:15px; height:15px; transition:transform .2s var(--ease); }
.textlink:hover .ic{ transform:translateX(3px); }

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(28,29,34,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--border);
  background:rgba(22,23,27,.86);
}
.site-header .wrap{
  display:flex; align-items:center; gap:var(--s-5);
  min-height:68px;
}
.brand{
  display:inline-flex; align-items:center; gap:11px;
  color:#fff; font-family:var(--display); font-weight:800;
  font-size:1.18rem; letter-spacing:-0.02em; line-height:1;
}
.brand .mark{ width:28px; height:28px; flex:0 0 auto; border-radius:6px; }
.brand .hq{ color:var(--orange); }
.nav{ margin-left:auto; display:flex; align-items:center; gap:var(--s-6); }
.nav a:not(.btn){
  font-family:var(--display); font-weight:600; font-size:.98rem;
  color:var(--muted); letter-spacing:-0.01em;
}
.nav a:not(.btn):hover{ color:#fff; }
.menu-btn{
  display:none; margin-left:auto;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; color:var(--text); border:1px solid var(--border-2);
  border-radius:var(--r-sm); padding:9px 14px; cursor:pointer;
}

@media (max-width:820px){
  .menu-btn{ display:inline-block; }
  .nav{
    position:fixed; inset:68px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:var(--s-3) var(--s-5) var(--s-5);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
    margin-left:0;
  }
  .nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav a:not(.btn){ padding:14px 4px; border-bottom:1px solid var(--border); font-size:1.05rem; color:var(--text); }
  .nav .btn{ margin-top:var(--s-4); justify-content:center; }
}

/* ---------- 7. Hero ---------- */
.hero{ position:relative; padding-block:clamp(var(--s-8), 7vw, 120px) var(--s-9); overflow:hidden; }
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(var(--s-6), 5vw, var(--s-9));
  align-items:center;
}
.hero__title{
  font-size:var(--step-5); line-height:.98; margin:0 0 var(--s-5);
  letter-spacing:-0.035em;
}
.hero__sub{ color:var(--muted); margin:0 0 var(--s-6); max-width:46ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; }
.hero__stores{
  margin-top:var(--s-6); font-family:var(--mono); font-size:.86rem;
  color:var(--dim); letter-spacing:.02em; display:flex; align-items:center; gap:.6em;
}
.hero__stores .dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); flex:0 0 auto; }
.hero__media{ position:relative; display:flex; justify-content:center; }

/* soft orange bloom — the single glow, echoing the app's raised + button */
.bloom{
  position:absolute; z-index:0; width:min(78%, 460px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,103,38,.42) 0%, rgba(254,155,51,.16) 42%, transparent 68%);
  filter:blur(10px);
  left:50%; top:52%; transform:translate(-50%,-50%);
  pointer-events:none;
}

/* ---------- 8. Phone device frame (hand-built) ---------- */
.phone{
  position:relative; z-index:1;
  width:min(300px, 74vw);
  border-radius:44px;
  padding:11px;
  background:linear-gradient(160deg, #2a2b31, #131418);
  border:1px solid var(--border-2);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.03);
}
.phone__screen{
  position:relative; border-radius:34px; overflow:hidden;
  background:var(--bg);
  aspect-ratio:1206 / 2622;
}
.phone__screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.phone__island{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:34%; height:19px; background:#000; border-radius:12px; z-index:2;
}
.phone--sm{ width:min(264px, 70vw); }

/* ---------- 9. Feature story (alternating rows) ---------- */
.feature{ padding-block:clamp(var(--s-7), 6vw, var(--s-9)); border-top:1px solid var(--border); }
.feature__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--s-6), 5vw, var(--s-9));
  align-items:center;
}
.feature:nth-of-type(even) .feature__media{ order:-1; }
.feature__tag{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--amber); margin-bottom:var(--s-4);
}
.feature__tag .n{
  font-weight:600; color:var(--bg); background:var(--grad);
  width:24px; height:24px; border-radius:7px; display:inline-grid; place-items:center;
  font-size:.78rem;
}
.feature h3{ margin-bottom:var(--s-4); font-size:var(--step-2); }
.feature p{ color:var(--muted); max-width:44ch; }
.feature__list{ list-style:none; margin:var(--s-5) 0 0; padding:0; display:grid; gap:var(--s-3); }
.feature__list li{
  display:flex; gap:var(--s-3); align-items:flex-start;
  color:var(--text); font-size:.98rem;
}
.feature__list .tick{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px;
  border-radius:50%; display:grid; place-items:center;
  background:rgba(49,94,53,.22); border:1px solid rgba(49,94,53,.55);
}
.feature__list .tick svg{ width:11px; height:11px; color:#7bbd7f; }
.feature__media{ display:flex; justify-content:center; }

/* ---------- 10. Managers section (structural, not icon-grid) ---------- */
.managers{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.managers__head{ max-width:60ch; margin-bottom:var(--s-8); }
.managers__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden;
}
.mcard{ background:var(--surface); padding:clamp(var(--s-5), 3vw, var(--s-7)); }
.mcard__k{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin-bottom:var(--s-4);
}
.mcard h4{ font-family:var(--display); font-weight:800; font-size:1.3rem; color:#fff; margin:0 0 var(--s-3); letter-spacing:-0.02em; }
.mcard p{ color:var(--muted); font-size:.98rem; margin:0; }
@media (max-width:760px){ .managers__grid{ grid-template-columns:1fr; } }

/* ---------- 11. Day-in-the-life strip ---------- */
.flow{ }
.flow__head{ margin-bottom:var(--s-8); max-width:54ch; }
.flow__steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5);
  counter-reset:flow;
}
.flow__steps li{ position:relative; padding-top:var(--s-6); }
.flow__steps li::before{
  counter-increment:flow; content:"0" counter(flow);
  font-family:var(--mono); font-size:.9rem; color:var(--amber); letter-spacing:.08em;
  position:absolute; top:0; left:0;
}
.flow__steps li::after{
  content:""; position:absolute; top:8px; left:34px; right:-12px; height:1px;
  background:var(--border);
}
.flow__steps li:last-child::after{ display:none; }
.flow__steps h4{ font-family:var(--display); font-weight:800; font-size:1.12rem; color:#fff; margin:0 0 var(--s-2); letter-spacing:-0.01em; }
.flow__steps p{ color:var(--muted); font-size:.92rem; margin:0; }
@media (max-width:760px){
  .flow__steps{ grid-template-columns:1fr 1fr; gap:var(--s-6); }
  .flow__steps li::after{ display:none; }
}
@media (max-width:440px){ .flow__steps{ grid-template-columns:1fr; } }

/* ---------- 12. CTA band ---------- */
.cta{ }
.cta__panel{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:clamp(var(--s-7), 6vw, var(--s-9));
  text-align:center;
  position:relative; overflow:hidden;
}
.cta__panel::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:radial-gradient(120% 90% at 50% -10%, rgba(232,103,38,.25), transparent 60%);
  pointer-events:none;
}
.cta__panel > *{ position:relative; z-index:1; }
.cta h2{ font-size:var(--step-3); margin-bottom:var(--s-4); }
.cta p{ color:var(--muted); max-width:48ch; margin-inline:auto; margin-bottom:var(--s-6); }
.cta__actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); justify-content:center; }
.cta__stores{
  margin-top:var(--s-6); font-family:var(--mono); font-size:.84rem; color:var(--dim);
  letter-spacing:.02em;
}

/* ---------- 13. Footer ---------- */
.site-footer{ background:var(--surface); border-top:1px solid var(--border); padding-block:var(--s-8) var(--s-6); }
.site-footer .cols{
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:var(--s-7);
  padding-bottom:var(--s-7); border-bottom:1px solid var(--border);
}
.site-footer .blurb{ color:var(--muted); font-size:.95rem; max-width:36ch; margin-top:var(--s-4); }
.site-footer h5{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin:0 0 var(--s-4); font-weight:500;
}
.fnav{ display:flex; flex-direction:column; gap:var(--s-3); }
.fnav a{ color:var(--muted); font-size:.96rem; }
.fnav a:hover{ color:#fff; }
.legal{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4);
  padding-top:var(--s-5); font-size:.86rem; color:var(--dim);
  font-family:var(--mono); letter-spacing:.01em;
}
.legal a{ color:var(--muted); }
.legal .made{ margin-left:auto; }
@media (max-width:700px){
  .site-footer .cols{ grid-template-columns:1fr 1fr; gap:var(--s-6); }
  .site-footer .cols > :first-child{ grid-column:1 / -1; }
  .legal .made{ margin-left:0; width:100%; }
}

/* ---------- 14. Content pages (support / privacy) ---------- */
.page-hero{ padding-block:clamp(var(--s-8), 7vw, var(--s-9)) var(--s-7); border-bottom:1px solid var(--border); }
.page-hero h1{ font-size:var(--step-4); letter-spacing:-0.03em; margin-bottom:var(--s-4); }
.page-hero p{ color:var(--muted); max-width:56ch; }
.prose{ max-width:70ch; }
.prose h2{ font-size:var(--step-2); margin:var(--s-8) 0 var(--s-4); }
.prose h3{ font-size:var(--step-1); margin:var(--s-6) 0 var(--s-3); color:#fff; }
.prose p, .prose li{ color:var(--text); line-height:1.7; }
.prose ul{ padding-left:1.2em; margin:0 0 1.1em; }
.prose li{ margin-bottom:.5em; }
.prose a{ text-decoration:underline; text-underline-offset:3px; }
.prose .meta{ font-family:var(--mono); font-size:.85rem; color:var(--dim); }

.callout{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--amber);
  border-radius:0 var(--r) var(--r) 0; padding:var(--s-5) var(--s-6); margin:0 0 var(--s-6);
}
.callout p{ margin:0; color:var(--muted); font-size:.95rem; }

.contact-card{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r);
  padding:var(--s-6); margin:var(--s-6) 0; display:flex; flex-wrap:wrap; gap:var(--s-5);
  align-items:center; justify-content:space-between;
}
.contact-card .k{ font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.contact-card .v{ font-family:var(--display); font-weight:700; font-size:1.25rem; color:#fff; }

/* FAQ accordion */
.faq{ border-top:1px solid var(--border); }
.faq details{ border-bottom:1px solid var(--border); }
.faq summary{
  cursor:pointer; list-style:none; padding:var(--s-5) 0;
  font-family:var(--display); font-weight:700; font-size:1.12rem; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); font-weight:400; color:var(--amber); font-size:1.5rem; line-height:1; transition:transform .2s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > p{ color:var(--muted); padding:0 0 var(--s-5); margin:0; max-width:66ch; }

/* ---------- 15. Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- 15b. Section header (shared) ---------- */
.shead{ max-width:60ch; margin:0 auto var(--s-8); text-align:center; }
.shead.left{ margin-inline:0; text-align:left; }
.shead .eyebrow{ justify-content:center; }
.shead.left .eyebrow{ justify-content:flex-start; }
.shead h2{ font-size:var(--step-3); }
.shead p{ color:var(--muted); margin-top:var(--s-4); font-size:var(--step-1); line-height:1.5; }

/* ---------- 15c. Hero — completion-wheel treatment ---------- */
.hero__media .phone{ width:min(322px, 78vw); }
.hero__proof{
  margin-top:var(--s-6); display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5);
  font-family:var(--mono); font-size:.82rem; color:var(--muted); letter-spacing:.01em;
}
.hero__proof span{ display:inline-flex; align-items:center; gap:.5em; }
.hero__proof .swatch{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.sw-open{ background:var(--orange); } .sw-done{ background:#4a8f50; }
.sw-over{ background:var(--overdue); } .sw-today{ background:var(--amber); }

/* ---------- 15d. Feature grid (secondary / supporting features) ---------- */
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.fgrid .cell{ background:var(--bg); padding:clamp(var(--s-5),3vw,var(--s-6)); }
.managers .fgrid .cell{ background:var(--surface); }
.fgrid .k{ font-family:var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:var(--s-3); }
.fgrid h4{ font-family:var(--display); font-weight:800; font-size:1.22rem; color:#fff; margin:0 0 var(--s-3); letter-spacing:-0.02em; }
.fgrid p{ color:var(--muted); font-size:.96rem; margin:0; }
@media (max-width:820px){ .fgrid{ grid-template-columns:1fr; } }

/* ---------- 15e. Light / dark pair ---------- */
.pair{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pair__stage{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--s-5),4vw,var(--s-8));
  align-items:end; margin-top:var(--s-7);
}
.pair__col{ display:flex; flex-direction:column; align-items:center; gap:var(--s-4); }
.pair__label{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:.55em;
}
.pair__label .dotm{ width:10px; height:10px; border-radius:50%; border:1px solid var(--border-2); flex:0 0 auto; }
.pair__label .dotm.dark{ background:#1c1d22; }
.pair__label .dotm.light{ background:#f2f2f4; }
.pair .phone{ width:min(280px, 42vw); }
@media (max-width:680px){
  .pair__stage{ grid-template-columns:1fr; gap:var(--s-8); }
  .pair .phone{ width:min(268px, 72vw); }
}

/* ---------- 15f. Platforms strip ---------- */
.platforms{ }
.platforms__grid{
  display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:center; margin-top:var(--s-7);
}
.pbadge{
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-sm);
  padding:12px 18px; font-family:var(--body); color:var(--text); font-size:.98rem;
}
.pbadge svg{ width:20px; height:20px; color:var(--muted); flex:0 0 auto; }
.pbadge strong{ color:#fff; font-weight:600; }
.stores{
  margin-top:var(--s-6); display:flex; flex-wrap:wrap; gap:var(--s-3); justify-content:center;
}
.store-badge{
  display:inline-flex; align-items:center; gap:.7em;
  border:1px solid var(--border-2); border-radius:var(--r-sm); padding:11px 18px;
  background:var(--surface-2); color:var(--text); font-family:var(--body);
}
.store-badge svg{ width:22px; height:22px; flex:0 0 auto; color:#fff; }
.store-badge .sb-k{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); display:block; line-height:1.3; }
.store-badge .sb-v{ font-family:var(--display); font-weight:700; font-size:1.02rem; color:#fff; line-height:1.1; }
.store-badge .soon{ margin-left:.4em; font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); border:1px solid rgba(254,155,51,.4); border-radius:999px; padding:2px 7px; }

/* ---------- 15g. Sub-page hero with a device ---------- */
.phero{ position:relative; overflow:hidden; padding-block:clamp(var(--s-8),7vw,110px) var(--s-8); }
.phero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(var(--s-6),5vw,var(--s-9)); align-items:center; }
.phero h1{ font-size:var(--step-4); letter-spacing:-0.03em; margin-bottom:var(--s-4); }
.phero p{ color:var(--muted); max-width:52ch; }
@media (max-width:880px){ .phero__grid{ grid-template-columns:1fr; } .phero__media{ margin-top:var(--s-6); } }

/* ---------- 15h. Callout list (managers deep points) ---------- */
.deeplist{ list-style:none; margin:var(--s-6) 0 0; padding:0; display:grid; gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.deeplist li{ background:var(--bg); padding:var(--s-5) var(--s-6); display:grid; grid-template-columns:auto 1fr; gap:var(--s-4); align-items:start; }
.deeplist .num{ font-family:var(--mono); font-size:.85rem; color:var(--amber); padding-top:2px; }
.deeplist h4{ font-family:var(--display); font-weight:800; font-size:1.16rem; color:#fff; margin:0 0 4px; letter-spacing:-0.01em; }
.deeplist p{ color:var(--muted); font-size:.96rem; margin:0; max-width:60ch; }

/* ---------- 15i. Nav active state ---------- */
.nav a[aria-current="page"]{ color:#fff; }

/* ---------- 16. Responsive stacking ---------- */
@media (max-width:880px){
  .hero__grid{ grid-template-columns:1fr; text-align:left; }
  .hero__media{ margin-top:var(--s-7); }
  .feature__grid{ grid-template-columns:1fr; }
  .feature:nth-of-type(even) .feature__media{ order:0; }
  .feature__media{ margin-bottom:var(--s-2); }
}