/* Approved prototype direction: More drive + Indigo.
   System font study: no proprietary font files are redistributed. */
:root {
  --brand-display:"Avenir Next Condensed","Arial Narrow",sans-serif;
  --type-editorial:var(--brand-display);
  --font-display:var(--brand-display);
  --paper:#FAFAFC; --cream:#FAFAFC; --card:#FFFFFF;
  --paper-deep:#EEF0FA; --ink:#202338; --ink-2:#626879;
  --blue:#4856E8; --blue-soft:#EEF0FA;
  --red:#4856E8; --red-deep:#3D49C5; --red-text:#3D49C5;
  --amber:#4856E8; --amber-soft:#DCE1FA;
  --hairline:rgba(32,35,56,.14);
}
.nav,.nav.scrolled,.nav.on-ink {background:rgba(250,250,252,.95);}
.nav-word {font-family:var(--brand-display);font-weight:700;font-size:30px;letter-spacing:-.025em;}
.section-title,#ache-title,#doors-title,#trail-title,#cta-title {
  font-family:var(--brand-display);font-weight:700;
  font-size:clamp(44px,5.2vw,68px);line-height:1.04;letter-spacing:-.025em;
}
.section-title em,.cta-title em {font-family:inherit;font-style:normal;font-weight:inherit;color:inherit;}
.hero .rotator {font-family:var(--brand-display);font-weight:700;font-style:normal;letter-spacing:-.025em;line-height:1.08;}
.hero-wink {font-family:inherit;font-size:1em;font-weight:600;}
.hero-line-rot {font-size:clamp(40px,5.1vw,66px);}
.feature-row h3,.stop-text h3,.trail-stop.lit .stop-text h3 {
  font-family:var(--brand-display);font-weight:700;letter-spacing:-.02em;line-height:1.15;
}
.feature-row h3 {font-size:32px;}
.stop-text h3,.trail-stop.lit .stop-text h3 {font-size:28px;}
#ache-wall.thought-wall::before {display:none;}
#ache-wall.thought-wall .scrap {color:var(--ink);}
#ache-wall.thought-wall .scrap blockquote {font-family:var(--font-body);font-size:28px;font-weight:400;line-height:1.4;letter-spacing:-.025em;}
#ache-wall.thought-wall li:not([data-slot="0"]) .scrap blockquote {font-size:17px;line-height:1.45;letter-spacing:-.01em;}
#ache-wall.thought-wall li:not([data-slot="0"]) .scrap {color:var(--ink-2);}
#ache-wall.thought-wall .thought-response {color:var(--red-text);background:var(--blue-soft);border-color:transparent;}
#ache-wall.thought-wall .scrap.me .thought-response {background:var(--blue);color:white;}
#ache-wall.thought-wall li:not([data-slot="0"]) .scrap:hover {color:var(--red-text);}
.thought-controls button:hover {background:var(--blue-soft);}
.ache-tally {font:500 clamp(24px,2.7vw,34px)/1.35 var(--font-body);letter-spacing:-.03em;color:var(--red-text);}
.flip {font-family:var(--brand-display);font-weight:700;letter-spacing:-.025em;}
.flip-b {color:var(--blue);text-shadow:3px 3px var(--amber-soft);}
.flip-a::after {background:var(--blue);}
.never-item {font-family:var(--brand-display);font-weight:600;letter-spacing:-.02em;}
.never-affirm {font:500 clamp(25px,3vw,34px)/1.35 var(--font-body);color:var(--red-text);letter-spacing:-.025em;}
.footer-line {font-family:var(--font-body);font-style:normal;font-weight:400;font-size:16px;line-height:1.5;letter-spacing:0;color:var(--ink-2);}
.footer-meta {font-size:13px;line-height:1.5;letter-spacing:0;}
#ache-title::after {content:"";display:block;width:38px;height:4px;margin:18px auto 0;background:var(--blue);}
@media(max-width:850px) {
 .hero-line-rot {font-size:9.2vw;}
 .section-title,#ache-title,#doors-title,#trail-title,#cta-title {font-size:44px;}
 .feature-row h3 {font-size:29px;}
 .stop-text h3,.trail-stop.lit .stop-text h3 {font-size:25px;}
}
@media(max-width:600px) {
 #ache-wall.thought-wall .scrap blockquote {font-size:24px;line-height:1.4;}
 #ache-wall.thought-wall li:not([data-slot="0"]) .scrap blockquote {font-size:14px;line-height:1.45;}
}

/* Hero lockup: one display voice, with native supporting lines. */
.hero .hero-title {font-family:var(--font-body);gap:0;width:100%;color:var(--ink);}
.hero .hero-title > .hero-line:first-child {
  font-family:var(--font-body);font-size:clamp(20px,1.9vw,24px);
  font-weight:500;line-height:1.35;letter-spacing:-.025em;
}
.hero .hero-line-rot {
  margin-top:8px;font-size:clamp(36px,10.6cqi,64px);
  line-height:1.06;min-height:1.12em;
}
.hero .rotator {color:var(--blue);text-shadow:none;}
.hero .hero-title > .hero-line:last-child {
  font-family:var(--font-body);font-size:18px;font-weight:400;
  letter-spacing:-.02em;line-height:1.4;margin-top:16px;
}
.hero .hero-wink {font-family:inherit;font-size:inherit;font-style:normal;font-weight:600;}
.hero .hero-sub {
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  color:#51576B;letter-spacing:0;max-width:46ch;margin-top:28px;
}
.hero .hero-cta {margin-top:24px;}
@media(max-width:850px) {
  .hero .hero-title > .hero-line:first-child {font-size:20px;}
  .hero .hero-line-rot {font-size:10.6cqi;margin-top:8px;}
  .hero .hero-title > .hero-line:last-child {font-size:16px;margin-top:14px;}
  .hero .hero-sub {font-size:15px;line-height:1.6;max-width:39ch;margin-top:24px;}
  .hero .hero-cta {margin-top:22px;}
}

/* Captions belong to their photo: shared angle, natural height and baseline. */
.collage .polaroid {padding-bottom:0;}
.collage .polaroid img {display:block;}
.collage .polaroid figcaption {
  position:static;inset:auto;display:block;height:auto;
  transform:none;margin:0;padding:12px 8px 0;
  font-family:var(--font-body);font-size:14px;font-weight:400;
  line-height:1.45;letter-spacing:0;text-wrap:balance;
}
@media(max-width:900px) {
  .collage {height:auto;row-gap:52px;}
}
@media(min-width:901px) {
  .collage .contactcard {top:390px;}
}

/* A small floating signature leaves the page open while scrolling. */
html {scroll-padding-top:112px;}
.nav,.nav.scrolled,.nav.on-ink {
  top:calc(16px + env(safe-area-inset-top));left:clamp(16px,4vw,52px);right:auto;
  width:max-content;max-width:calc(100% - 32px);
  padding:8px 17px 8px 8px;border:1px solid rgba(32,35,56,.07);
  border-radius:999px;background:rgba(250,250,252,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 3px 16px rgba(32,35,56,.06);
}
.nav .nav-mark {gap:9px;min-height:34px;color:var(--ink);}
.nav .nav-mark img {width:32px;height:32px;border-radius:10px;box-shadow:none;}
.nav .nav-word {font-size:25px;line-height:1;}
@media(max-width:600px) {
 html {scroll-padding-top:100px;}
 .nav,.nav.scrolled,.nav.on-ink {top:calc(12px + env(safe-area-inset-top));left:16px;padding:6px 14px 6px 6px;}
 .nav .nav-word {font-size:23px;}
}

/* Standalone Speak up icon, scaled as a complete image at every size. */
.speak-icon {display:inline-block;flex:none;width:34px;height:34px;border-radius:9px;background:url('assets/speak-up-icon-384.webp') center / contain no-repeat;}
.hero-app .ha-heading .speak-icon {padding:0;width:28px;height:28px;border-radius:7px;background:url('assets/speak-up-icon-384.webp') center / contain no-repeat;}
.speak-icon.cta-icon {width:92px;height:92px;border-radius:24px;}
.nav,.nav.scrolled,.nav.on-ink {padding:8px;border-radius:16px;}
.nav .nav-mark {gap:0;}

/* Shared fixed device geometry. UI scales uniformly with its frame. */
.hero-app,.phone {aspect-ratio:330 / 690;height:auto;min-height:0;padding:0;border:0;border-radius:16.36% / 7.826%;background:#22232a;--device-scale:1;}
.hero-screen,.phone-screen {position:absolute;left:3.333333%;top:1.594203%;width:308px;height:668px;transform:scale(var(--device-scale));transform-origin:top left;border-radius:43px;overflow:hidden;background:#f6f7fa;}
.hero-screen {padding:13px 12px 12px;display:flex;flex-direction:column;}
.hero-screen>* {flex-shrink:0;}
.hero-screen .ha-heading {font-size:28px;margin:12px 5px 10px;}
.hero-screen .ha-set {padding:12px;margin-bottom:12px;}
.hero-screen .ha-rep>img {height:140px;}
.hero-screen .ha-rep-copy {padding:14px;}
.hero-screen .ha-tabs {margin-top:auto;}
.hero-screen .ha-home {margin-top:10px;}
.phone-island {left:50%;top:3.1884%;width:26.06%;height:3.6232%;border-radius:999px;}

/* Detail pass: product UI uses native type; captions stay clear of devices. */
.hero {row-gap:18px;}
.hero-caption {grid-area:2 / 2;margin:0;text-align:center;font:400 13px/1.45 var(--font-body);color:#626879;letter-spacing:0;text-wrap:balance;}
.hero-screen,.phone-screen {font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;letter-spacing:0;}
.ha-tabs {min-height:58px;padding:5px 8px;gap:4px;align-items:stretch;}
.ha-tabs>span {flex:1;width:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:5px 3px;border-radius:22px;color:#6b7282;}
.ha-tabs svg {display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ha-tabs small {display:block;font:500 11px/14px -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;letter-spacing:0;margin:0;}
.ha-tabs .ha-selected {color:#202338;}
.hero-screen .ha-rep-copy>strong {font-size:23px;line-height:1.2;}
.hero-screen .ha-rep-copy>p {font-size:13px;line-height:1.45;}
.hero-screen .ha-start {font-size:14px;min-height:44px;align-items:center;}
.phone-screen :is(h4,.ph-today,.ph-rhythm,.ph-phrase,.ph-win,.ph-btn) {font-family:inherit;letter-spacing:0;}
.phone-screen :is(h4,.ph-today) {font-weight:650;line-height:1.2;}
.phone-screen .ph-today {font-size:30px;}
.phone-screen .ph-quest {font-size:24px;}
.phone-screen .ph-rhythm {font-size:13px;font-weight:500;rotate:0deg;}
.phone-screen .ph-phrase {font-size:16px;line-height:1.4;font-weight:500;}
.phone-screen .ph-safety {align-items:flex-start;line-height:1.4;}
.phone-screen .ph-safety-dot {margin-top:4px;}
.phone-screen .ph-card {border-radius:18px;background:white;}
.phone-screen .ph-card:before {display:none;}
.phone-screen .ph-btn {min-height:44px;line-height:1.3;}
.phone-screen .ph-win {line-height:1.4;}
.store-badge {box-shadow:none;border-radius:0;}
.store-badge img,.store-badge-big img {height:48px;width:auto;}
@media(max-width:850px){.hero-caption {align-self:center;max-width:34ch;margin:0 16px;font-size:12px;} .hero {row-gap:24px;}}
.phone-screen * {font-family:inherit;}
.phone-screen .ph-light {font-size:15px;line-height:1.3;font-weight:600;}

.hero-caption { transition: opacity 180ms ease; }
.hero-caption.cap-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero-caption { transition: none; } }

/* The phone moves aside to reveal the person behind it. */
.hero-story {display:grid;grid-area:1 / 2;position:relative;min-width:0;align-items:center;}
.hero-story .hero-polaroid.polaroid,.hero-story .hero-app {grid-area:1 / 1;}
@media(min-width:851px) and (hover:hover) and (pointer:fine) {
  .hero-story .hero-app {transform:translate(16px,12px) rotate(3deg);transition:transform 900ms cubic-bezier(.22,1,.36,1);}
  .hero-story .hero-app:hover {transform:translate(16px,12px) rotate(3deg);}
  .hero-story[data-reveal-side="left"] .hero-app,.hero-story:not([data-reveal-side]):focus-within .hero-app {transform:translate(var(--hero-reveal-x,0px),20px) rotate(-6deg);}
  .hero-story[data-reveal-side="right"] .hero-app {transform:translate(16px,12px) rotate(3deg);}
}
@media(max-width:850px) {.hero-story {display:contents;}}
@media(prefers-reduced-motion:reduce) {
  .hero-story .hero-app,.hero-story .hero-app:hover,.hero-story[data-reveal-side] .hero-app,.hero-story:not([data-reveal-side]):focus-within .hero-app {transition:none;transform:rotate(3deg);}
}