/* Crema — design tokens */
:root{
  /* Fluid type scale */
  --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.4rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.75rem,1.4rem + 4.5vw,5.5rem);
  --text-hero:clamp(3rem,0.6rem + 7.5vw,8.5rem);

  /* Spacing */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;

  /* Crema palette — sampled from the app */
  --color-bg:#F2EDE2;
  --color-bg-warm:#EDE5D5;
  --color-surface:#FBF7EE;
  --color-surface-2:#FFFCF5;
  --color-divider:#E4DCC9;
  --color-border:#D8CFB8;

  --color-text:#1C1812;
  --color-text-muted:#6E665A;
  --color-text-faint:#A89E8B;
  --color-text-inverse:#FBF7EE;

  --color-primary:#B85C2E;          /* burnt orange accent */
  --color-primary-hover:#A14E22;
  --color-primary-active:#88401A;
  --color-primary-soft:#F4D9C2;
  --color-primary-tint:#FBE9D6;

  --color-roast-warn:#C9384A;       /* the "38d off roast" red */
  --color-roast-warn-soft:#F5D1D4;

  --color-teal:#2F7A75;             /* second data series */
  --color-teal-soft:#CFE2DF;

  /* Radius */
  --radius-sm:.5rem;--radius-md:.875rem;--radius-lg:1.25rem;--radius-xl:1.75rem;--radius-2xl:2.25rem;--radius-full:9999px;

  /* Shadows tone-matched to cream */
  --shadow-sm:0 1px 2px rgba(60,40,15,.06);
  --shadow-md:0 8px 24px rgba(60,40,15,.08);
  --shadow-lg:0 24px 60px rgba(60,40,15,.14);
  --shadow-phone:0 30px 60px -20px rgba(50,30,10,.35),0 18px 40px -18px rgba(50,30,10,.22);

  /* Fonts */
  --font-display:"Source Serif 4","Source Serif Pro",Georgia,serif;
  --font-body:"Inter","SF Pro Text","Helvetica Neue",sans-serif;
  --font-num:"Source Serif 4",Georgia,serif;

  --content:min(1200px,92vw);
}

/* Layout helpers */
.container{width:var(--content);margin-inline:auto}
section{padding-block:clamp(var(--space-16),9vw,var(--space-32))}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:var(--space-4) 0;backdrop-filter:blur(14px);background:rgba(242,237,226,.7);border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease}
.nav.scrolled{border-bottom-color:var(--color-divider);background:rgba(242,237,226,.92)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.brand{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);color:var(--color-text);text-decoration:none}
.brand-icon{width:36px;height:36px;border-radius:9px;box-shadow:var(--shadow-sm);display:block}
.nav-links{display:flex;align-items:center;gap:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted)}
.nav-links a{color:inherit;text-decoration:none}
.nav-links a:hover{color:var(--color-text)}
.nav-cta{padding:.55rem 1rem;border-radius:var(--radius-full);background:var(--color-text);color:var(--color-text-inverse);font-size:var(--text-sm);font-weight:500;text-decoration:none}
.nav-cta:hover{background:var(--color-primary);transform:translateY(-1px)}
@media (max-width:720px){.nav-links{display:none}}

/* ---------- HERO ---------- */
.hero{padding-top:clamp(var(--space-24),18vw,var(--space-32));padding-bottom:clamp(var(--space-16),10vw,var(--space-24));position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:80%;background:radial-gradient(ellipse at center,rgba(184,92,46,.18),transparent 60%);pointer-events:none;z-index:0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(var(--space-6),5vw,var(--space-16));align-items:center;position:relative;z-index:1}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;gap:var(--space-12)}}

.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:var(--radius-full);background:var(--color-primary-tint);color:var(--color-primary);font-size:var(--text-xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(184,92,46,.18)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 3px rgba(184,92,46,.15)}

.h1{font-size:var(--text-hero);line-height:.95;letter-spacing:-.03em;margin-top:var(--space-6);margin-bottom:var(--space-6);color:var(--color-text)}
.h1 em{font-style:italic;color:var(--color-primary);font-weight:400}

.hero-sub{font-size:var(--text-lg);color:var(--color-text-muted);max-width:38ch;line-height:1.5}

.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8);align-items:center}

.btn-app{display:inline-flex;align-items:center;gap:.65rem;padding:.85rem 1.25rem;border-radius:var(--radius-full);background:var(--color-text);color:var(--color-text-inverse);text-decoration:none;font-weight:500;font-size:var(--text-base);box-shadow:var(--shadow-md)}
.btn-app:hover{background:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-app .apple{width:22px;height:22px}
.btn-app .small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;display:block;line-height:1}
.btn-app .big{font-size:17px;line-height:1.1;font-weight:600}


.hero-meta{display:flex;gap:var(--space-6);margin-top:var(--space-8);font-size:var(--text-sm);color:var(--color-text-muted)}
.hero-meta b{display:block;font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- iPhone mockup ---------- */
/* Real iPhone 15 Pro Max screen ratio: 1290/2796 ≈ 0.4614
   App Store screenshots are 600x1299 = same ratio.
   Bezel adds ~12px on every side, so device aspect ≈ (w+24)/(h+24). */
.phone{
  --phone-w:300px;
  width:var(--phone-w);
  aspect-ratio:300/641;            /* matches screen + bezel */
  position:relative;margin-inline:auto;
  border-radius:46px;
  background:linear-gradient(165deg,#1c1c1e 0%,#2a2a2c 45%,#0a0a0c 100%);
  padding:10px;
  box-shadow:var(--shadow-phone);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.phone.tilt{transform:perspective(1400px) rotateY(-7deg) rotateX(3deg)}
.phone.tilt-r{transform:perspective(1400px) rotateY(7deg) rotateX(3deg)}
/* subtle highlight pass on the bezel */
.phone::before{content:"";position:absolute;inset:4px;border-radius:42px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%);pointer-events:none}
/* crisp edge */
.phone::after{content:"";position:absolute;inset:0;border-radius:46px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.10),inset 0 0 0 3px rgba(0,0,0,.55);pointer-events:none}
.phone-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#0a0a0a;isolation:isolate}
.phone-screen > img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center}
.phone-bigger{--phone-w:340px}
.phone-smaller{--phone-w:260px}

@media (max-width:920px){.phone{--phone-w:270px}.phone.tilt,.phone.tilt-r{transform:none}}
@media (max-width:480px){.phone{--phone-w:230px}}

/* ---------- BREW TIMER (hero animated) ---------- */
.brew-card{position:relative;width:min(420px,100%);margin-inline:auto;background:var(--color-bg);border-radius:38px;padding:28px 22px 22px;border:1px solid var(--color-divider);box-shadow:var(--shadow-lg)}
.brew-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}
.brew-close{font-size:14px;color:var(--color-primary);padding:.35rem .8rem;border:1px solid var(--color-divider);border-radius:999px;background:var(--color-surface)}
.brew-title{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--color-text)}
.brew-spacer{width:60px}

.brew-bean-label{font-size:11px;color:var(--color-text-muted);letter-spacing:.1em;text-transform:uppercase;margin-top:var(--space-4)}
.brew-bean{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.1;color:var(--color-text);margin-top:2px}
.brew-bean-sub{font-size:13px;color:var(--color-text-muted)}

.brew-last{display:flex;align-items:center;gap:.4rem;margin:var(--space-5) auto var(--space-4);padding:.45rem .9rem;background:rgba(216,207,184,.5);border-radius:999px;font-size:12px;color:var(--color-text-muted);width:fit-content}

.brew-ring-wrap{position:relative;width:240px;height:240px;margin:var(--space-2) auto var(--space-5)}
.brew-ring{transform:rotate(-90deg);width:100%;height:100%;overflow:visible}
.brew-ring-track{fill:none;stroke:rgba(216,207,184,.55);stroke-width:8}
.brew-ring-progress{fill:none;stroke:var(--color-primary);stroke-width:8;stroke-linecap:butt;stroke-dasharray:691.15;stroke-dashoffset:691.15;transition:stroke-dashoffset .12s linear}
.brew-time{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-display);font-variant-numeric:tabular-nums}
.brew-time-big{font-size:54px;font-weight:600;line-height:1;color:var(--color-text);letter-spacing:-.02em}
.brew-time-ratio{font-size:18px;color:var(--color-text-muted);margin-top:4px;font-variant-numeric:tabular-nums}
.brew-time-state{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-faint);margin-top:6px}
.brew-time-state.pulling{color:var(--color-primary)}

.brew-stats{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.7rem}
.brew-stat{background:var(--color-surface);border-radius:14px;padding:.7rem .9rem}
.brew-stat-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-faint);font-weight:600}
.brew-stat-val{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--color-text);font-variant-numeric:tabular-nums;margin-top:2px}
.brew-stat-val.active{color:var(--color-primary)}

.brew-fields{background:var(--color-surface);border-radius:14px;padding:.6rem .9rem;font-size:13px}
.brew-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--color-divider)}
.brew-field-row:last-child{border-bottom:none}
.brew-field{display:flex;flex-direction:column;gap:2px}
.brew-field-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-faint);font-weight:600}
.brew-field-val{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--color-text)}

.brew-btn{margin-top:.9rem;width:100%;padding:.9rem;border-radius:14px;background:var(--color-primary);color:#fff;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;gap:.45rem}
.brew-btn.stop{background:#D43A4A}
.brew-btn .icon{width:14px;height:14px;display:inline-block;background:currentColor}
.brew-btn .icon.play{clip-path:polygon(0 0,100% 50%,0 100%);background:#fff}
.brew-btn .icon.square{background:#fff;border-radius:2px}

/* ---------- SECTION HEADERS ---------- */
.section-eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-primary)}
.section-h2{font-size:var(--text-2xl);line-height:1.05;letter-spacing:-.025em;margin-top:var(--space-3);max-width:18ch}
.section-h2 em{font-style:italic;color:var(--color-primary);font-weight:400}
.section-lede{font-size:var(--text-lg);color:var(--color-text-muted);margin-top:var(--space-4);max-width:52ch;line-height:1.55}

/* ---------- FEATURES GRID ---------- */
.features{position:relative}
.features-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(var(--space-6),3vw,var(--space-12));margin-top:var(--space-16);align-items:center}
.feature-card{padding:var(--space-6) 0}
.feature-card.text-left{grid-column:span 6}
.feature-card.phone-right{grid-column:span 6;display:flex;justify-content:center}
.feature-card.text-right{grid-column:span 6}
.feature-card.phone-left{grid-column:span 6;display:flex;justify-content:center}
@media (max-width:920px){
  .feature-card.text-left,.feature-card.text-right,.feature-card.phone-left,.feature-card.phone-right{grid-column:span 12}
  .feature-card.phone-left{order:-1}
}

.feature-num{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);color:var(--color-primary);opacity:.7}
.feature-h{font-size:var(--text-xl);line-height:1.05;margin-top:var(--space-3);max-width:14ch}
.feature-p{margin-top:var(--space-4);color:var(--color-text-muted);font-size:var(--text-base);max-width:42ch;line-height:1.55}
.feature-bullets{list-style:none;margin-top:var(--space-6);display:flex;flex-direction:column;gap:.65rem;max-width:42ch}
.feature-bullets li{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5}
.feature-bullets li::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--color-primary);flex-shrink:0;margin-top:.55rem}

/* ---------- FLAVOR CHIPS ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:var(--space-5)}
.chip{padding:.35rem .75rem;border:1px solid var(--color-divider);background:var(--color-surface);border-radius:999px;font-size:13px;color:var(--color-text-muted)}
.chip.active{color:var(--color-primary);border-color:rgba(184,92,46,.4);background:var(--color-primary-tint)}

/* ---------- INSIGHTS / SWEET-SPOT ---------- */
.insights{background:linear-gradient(180deg,var(--color-bg) 0%,var(--color-bg-warm) 100%);border-radius:var(--radius-2xl);padding:clamp(var(--space-10),6vw,var(--space-20));margin-block:var(--space-16);position:relative;overflow:hidden}
.insights-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(var(--space-6),4vw,var(--space-16));align-items:center}
@media (max-width:920px){.insights-grid{grid-template-columns:1fr}}

.scatter-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-md);border:1px solid var(--color-divider)}
.scatter-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-3)}
.scatter-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--color-text)}
.scatter-sub{font-size:var(--text-xs);color:var(--color-text-muted)}
.scatter-svg{width:100%;height:auto;display:block}
.scatter-legend{display:flex;gap:var(--space-4);margin-top:var(--space-4);font-size:var(--text-xs);color:var(--color-text-muted)}
.scatter-legend span{display:inline-flex;align-items:center;gap:.4rem}
.scatter-legend i{width:10px;height:10px;display:inline-block;border-radius:50%}
.scatter-caption{margin-top:var(--space-5);font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;padding-top:var(--space-4);border-top:1px solid var(--color-divider)}

.insight-tips{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-6)}
.tip{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-divider);font-size:var(--text-sm);color:var(--color-text);line-height:1.5;box-shadow:var(--shadow-sm)}
.tip .bulb{flex-shrink:0;width:24px;height:24px;display:grid;place-items:center;color:var(--color-primary)}
.tip b{font-weight:600}

/* ---------- EQUIPMENT ---------- */
.equipment{position:relative;overflow:hidden}
.equipment-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-6),5vw,var(--space-16));align-items:center}
@media (max-width:920px){.equipment-grid{grid-template-columns:1fr}}

.equipment-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-8)}
.equip-tile{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.equip-tile h4{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--color-text);margin-bottom:.25rem}
.equip-tile small{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.equip-tile p{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5}
@media (max-width:560px){.equipment-list{grid-template-columns:1fr}}

/* ---------- CTA / FINAL ---------- */
.final-cta{text-align:center;padding-block:clamp(var(--space-20),12vw,var(--space-32))}
.final-cta h2{font-size:var(--text-3xl);line-height:1;letter-spacing:-.03em;max-width:14ch;margin-inline:auto}
.final-cta h2 em{font-style:italic;color:var(--color-primary);font-weight:400}
.final-cta .hero-ctas{justify-content:center;margin-top:var(--space-10)}
.signoff{margin-top:var(--space-16);font-size:var(--text-xs);color:var(--color-text-faint);letter-spacing:.08em;text-transform:uppercase}

/* ---------- SCROLL REVEAL ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}

/* float-in chips animation */
@keyframes chipIn{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.js .chips.reveal.in .chip{opacity:0;animation:chipIn .55s cubic-bezier(.16,1,.3,1) forwards}
.chips.reveal.in .chip:nth-child(1){animation-delay:.05s}
.chips.reveal.in .chip:nth-child(2){animation-delay:.12s}
.chips.reveal.in .chip:nth-child(3){animation-delay:.19s}
.chips.reveal.in .chip:nth-child(4){animation-delay:.26s}
.chips.reveal.in .chip:nth-child(5){animation-delay:.33s}
.chips.reveal.in .chip:nth-child(6){animation-delay:.40s}
.chips.reveal.in .chip:nth-child(7){animation-delay:.47s}
.chips.reveal.in .chip:nth-child(8){animation-delay:.54s}
.chips.reveal.in .chip:nth-child(9){animation-delay:.61s}

/* scatter dots reveal */
.js .scatter-dot{opacity:0;transform-origin:center;transform-box:fill-box}
.js .scatter-svg.in .scatter-dot{animation:dotPop .5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes dotPop{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}

/* arc draw */
.js .arc-path{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 2.2s cubic-bezier(.16,1,.3,1)}
.js .scatter-svg.in .arc-path{stroke-dashoffset:0}

/* parallax phone tilt on scroll */
.phone-scroll-tilt{will-change:transform}

/* ---------- FOOTER (tiny) ---------- */
.foot{padding:var(--space-8) 0 var(--space-12);border-top:1px solid var(--color-divider);font-size:var(--text-xs);color:var(--color-text-muted)}
.foot .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3)}
.foot a{color:inherit}

/* ---------- 1.8: Coach ---------- */
.coach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-12)}
.ui-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:var(--space-3)}
.ui-eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary)}
.ui-h{font-size:var(--text-lg);line-height:1.15}
.coach-headline{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.1;display:flex;gap:.5rem;align-items:center}
.coach-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--color-primary-tint);color:var(--color-primary);font-size:18px;flex-shrink:0}
.coach-why{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5}
.coach-also{margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--color-divider);font-size:var(--text-xs);color:var(--color-text-muted)}
.axis{display:flex;flex-direction:column;gap:.6rem;margin-top:.25rem}
.axis-row{display:grid;grid-template-columns:3rem 1fr 3rem;align-items:center;gap:.5rem;font-size:12px;color:var(--color-text-muted)}
.axis-row span:last-child{text-align:right}
.axis-bar{position:relative;height:6px;border-radius:3px;background:var(--color-divider)}
.axis-bar i{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--color-primary);transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--color-primary-soft)}
.start-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.25rem}
.start-row div{background:var(--color-bg);border-radius:var(--radius-md);padding:.6rem .5rem;text-align:center}
.start-row small{display:block;font-size:11px;color:var(--color-text-muted);letter-spacing:.06em;text-transform:uppercase}
.start-row b{font-family:var(--font-num);font-size:var(--text-base);font-variant-numeric:tabular-nums}
.path{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.25rem}
.path-step{display:flex;flex-direction:column;padding:.55rem .8rem;border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm)}
.path-step em{font-style:normal;font-weight:400;font-size:12px;opacity:.75}
.path-step.bad{background:var(--color-roast-warn-soft);color:var(--color-roast-warn)}
.path-step.mid{background:var(--color-primary-tint);color:var(--color-primary)}
.path-step.good{background:var(--color-teal-soft);color:var(--color-teal)}
.path-arrow{color:var(--color-text-faint)}
@media (max-width:920px){.coach-grid{grid-template-columns:1fr}}

/* ---------- 1.8: Watch, widgets, Siri ---------- */
.every-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-6),5vw,var(--space-16));margin-top:var(--space-12);align-items:center}
.watch-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--space-8)}
.watch{width:230px;padding:14px;border-radius:64px;background:#1b1713;box-shadow:var(--shadow-phone),inset 0 0 0 2px #3a332b}
.watch-screen{aspect-ratio:4/5;border-radius:50px;background:#0d0b09;color:#FBF7EE;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:1rem;position:relative}
.w-top{font-size:11px;color:#A89E8B}
.w-time{font-family:var(--font-num);font-size:3.4rem;line-height:1;font-variant-numeric:tabular-nums}
.w-sub{font-size:11px;letter-spacing:.1em;color:#E08A55}
.w-ring{width:80%;height:5px;border-radius:3px;background:#3a332b;overflow:hidden;margin-block:.4rem}
.w-ring i{display:block;height:100%;width:68%;background:#E08A55}
.w-btn{padding:.4rem 1.6rem;border-radius:999px;background:#C9384A;font-weight:600;font-size:14px}
.watch-wrap .feature-bullets{align-self:stretch}
.widgets{display:flex;flex-direction:column;gap:var(--space-4)}
.widget,.siri{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-md)}
.widget small,.siri small{font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary)}
.widget h4{font-family:var(--font-display);font-size:var(--text-lg);margin-top:.25rem}
.widget-meta{display:flex;gap:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted);margin-top:.25rem}
.widget-next{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-teal);font-weight:600}
.widget-btns{display:flex;gap:.5rem;margin-top:var(--space-4)}
.pill{padding:.4rem .9rem;border-radius:999px;border:1px solid var(--color-border);font-size:var(--text-sm)}
.pill.pri{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.widget.la{background:#14110e;border-color:#14110e;color:#FBF7EE;border-radius:var(--radius-2xl)}
.la-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:.4rem}
.la-row b{font-family:var(--font-num);font-size:var(--text-xl);font-variant-numeric:tabular-nums}
.la-row span{font-size:12px;color:#A89E8B}
.la-bar{height:5px;border-radius:3px;background:#3a332b;margin-top:.7rem;overflow:hidden}
.la-bar i{display:block;height:100%;width:62%;background:#E08A55}
.siri p{margin-top:.5rem;font-family:var(--font-display);font-style:italic;font-size:var(--text-base);color:var(--color-text)}
@media (max-width:920px){.every-grid{grid-template-columns:1fr}}

/* ---------- 1.8: details / privacy ---------- */
.details{padding-top:0}
.details-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(var(--space-6),5vw,var(--space-16));align-items:center}
.privacy-card{background:var(--color-primary-tint);border:1px solid rgba(184,92,46,.18);border-radius:var(--radius-xl);padding:var(--space-8)}
@media (max-width:920px){.details-grid{grid-template-columns:1fr}}