/* WEBSITE-CONVERSION-1 · Gate 3 · integrated homepage candidate · PROTOTYPE (local only)
   One stylesheet, no framework. Product faces: Newsreader / IBM Plex Mono / Hanken Grotesk.
   Colour law: navy + cream carry the rhythm; tomato = Start free, one key word, chapter numbers, one band;
   gold = the product's own MAX badge only; green/red only inside real app UI. */
:root{
  --paper:#F4EFE4; --paper-2:#ECE5D5; --white:#FFFDF8; --ink:#1E1B16; --ink-2:#4A443B; --muted:#7D7364; --rule:#DDD4C2;
  --navy:#0A1F3D; --on-navy:#F4EFE4; --on-navy-2:#B9C2D0; --tomato:#B23A2A; --tomato-on-navy:#E8907E; --gold:#E8B53A;
  --f-serif:'Newsreader',Georgia,serif; --f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --f-ui:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --max:1200px; --gut:clamp(20px,4vw,44px); --phone-h:min(80vh,720px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--f-ui);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.anchor{display:block;position:relative;top:-72px}
.stamp{position:fixed;z-index:99;right:8px;bottom:8px;font:600 9px/1 var(--f-mono);letter-spacing:.12em;color:#fff;background:rgba(178,58,42,.9);padding:5px 7px;border-radius:4px;pointer-events:none}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:30;background:rgba(10,31,61,.94);color:var(--on-navy);backdrop-filter:saturate(1.2) blur(8px)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:500 20px/1 var(--f-serif)}
.brand img{width:28px;height:28px}
.nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;font:500 15px var(--f-ui)}
.nav ul a{text-decoration:none;opacity:.82}.nav ul a:hover{opacity:1}
.nav .sp{flex:1}
.nav .in{font:500 15px var(--f-ui);text-decoration:none;opacity:.82}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;font:500 15px var(--f-ui);padding:8px 2px;opacity:.9}
.menu summary::-webkit-details-marker{display:none}
.menu[open] .menu__panel{display:block}
.menu__panel{display:none;position:absolute;right:0;top:44px;background:var(--white);color:var(--ink);border-radius:12px;padding:8px;min-width:200px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.menu__panel a{display:block;padding:10px 12px;text-decoration:none;font:500 16px var(--f-ui);border-radius:8px}
@media (max-width:880px){.nav ul,.nav .in{display:none}.menu{display:block}.nav .wrap{height:58px;gap:12px}.brand{font-size:18px;white-space:nowrap}.brand img{width:24px;height:24px}}

/* ---------- buttons / CTAs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:10px;font:600 16px var(--f-ui);text-decoration:none;white-space:nowrap;background:var(--tomato);color:#fff}
.btn--sm{min-height:40px;padding:0 16px;font-size:15px}
.btn--paper{background:var(--white);color:var(--tomato)}
.more{font:600 15.5px var(--f-ui);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px;white-space:nowrap}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.mx{display:inline-block;font:700 .72em/1 var(--f-mono);letter-spacing:.06em;color:var(--gold);background:#000;padding:.34em .48em;border-radius:.3em;vertical-align:.1em}
.avail{margin:18px 0 0;font:500 13px/1.6 var(--f-mono);letter-spacing:.01em;color:var(--muted)}
.avail > span{display:block}
.on-navy .avail{color:var(--on-navy-2)}

/* ---------- type ---------- */
.kicker{font:600 12px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.on-navy .kicker{color:var(--on-navy-2)}
h1,h2{font-family:var(--f-serif);font-weight:400;letter-spacing:-.02em;margin:0}
.h2{font-size:clamp(34px,4.3vw,58px);line-height:1.03}
.lede{font-size:clamp(17px,1.45vw,20px);line-height:1.5;color:var(--ink-2);max-width:30em;margin:0}
.on-navy .lede{color:var(--on-navy-2)}

/* ---------- FLOW: hero + product story, with ONE sticky phone on desktop ---------- */
.flow{position:relative}
.band{position:relative}
.band--navy{background:var(--navy);color:var(--on-navy)}
.band--paper{background:var(--paper)}
.band .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px)}
.band .txt{grid-column:1;position:relative;z-index:2}

.hero .txt{min-height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center;padding:48px 0 72px}
.hero h1{font-size:clamp(46px,5.6vw,84px);line-height:.99;margin:18px 0 24px}
.hero h1 .u{font-style:italic;background:linear-gradient(var(--tomato-on-navy),var(--tomato-on-navy)) 0 93%/100% .07em no-repeat}
.hero .lede{margin-bottom:30px}

.ch .txt{min-height:86vh;display:flex;flex-direction:column;justify-content:center;padding:10vh 0}
.num{font:600 13px var(--f-mono);letter-spacing:.14em;color:var(--tomato)}
.on-navy .num{color:var(--tomato-on-navy)}
.ch h2{font-size:clamp(36px,4.2vw,60px);line-height:1.02;margin:14px 0 16px}
.ch .lede{max-width:24em}
.tier{margin-top:18px;font:600 11.5px/1 var(--f-mono);letter-spacing:.1em;color:var(--muted)}
.on-navy .tier{color:var(--on-navy-2)}
.ch .txt{transition:opacity .45s ease}
.js .ch:not(.is-active) .txt{opacity:.35}

/* the rail spans the whole flow; the phone is sticky inside its right column */
.rail{position:absolute;inset:0;z-index:3;pointer-events:none}
.rail .wrap{height:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px)}
.rail .col{grid-column:2;position:relative}
.stick{justify-content:flex-end !important;position:sticky;top:calc(64px + (100vh - 64px - var(--phone-h)) / 2);height:var(--phone-h);margin-top:max(24px,calc((100vh - 64px - var(--phone-h)) / 2));display:flex;justify-content:center}
.phone{position:relative;height:100%;aspect-ratio:390/844}
.phone .frame{position:absolute;inset:0;border-radius:46px;background:#15130F;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 50px 90px -40px rgba(6,6,4,.65)}
.screen{position:absolute;inset:9px;border-radius:37px;overflow:hidden;background:var(--white)}
.state{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.state img{width:100%;height:100%;object-fit:cover;object-position:top}
.state.is-on{opacity:1}
.label{position:absolute;right:calc(100% + 24px);top:var(--ly);width:210px;text-align:right;font:500 11.5px/1.45 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:0;transform:translateY(6px);transition:opacity .4s ease .35s,transform .4s ease .35s}
.label::after{content:"";position:absolute;top:.7em;right:-24px;width:16px;height:1.5px;background:var(--tomato)}
.label.is-on{opacity:1;transform:none}
.flow[data-tone="navy"] .label{color:var(--on-navy-2)}
.m-only{display:none}

/* ---------- MAX: go deeper (Gate 4) ---------- */
.max{background:var(--white);padding:clamp(72px,9vw,128px) 0;position:relative;z-index:4}
.max__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,96px);align-items:end}
.max h2{margin:14px 0 18px}
.max .lede{max-width:32em}
.max__proof{margin:0;justify-self:end;width:min(320px,100%)}
.appcard{border-radius:26px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px rgba(30,27,22,.10),0 40px 70px -36px rgba(20,14,4,.5);max-height:430px}
.appcard img{width:100%}
.max__proof figcaption,.detail figcaption{font:500 11.5px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:12px;display:flex;gap:10px;align-items:center}
.max__proof figcaption::before,.detail figcaption::before{content:"";width:22px;height:1.5px;background:var(--tomato);flex:none}
.ladder{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--ink)}
.rung{padding:26px 0 0}
.rung--free{padding-right:clamp(20px,3vw,44px);border-right:1px solid var(--rule)}
.rung--max{padding-left:clamp(20px,3vw,44px)}
.rung__tier{font:600 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rung__line{font:400 clamp(26px,2.6vw,34px)/1.1 var(--f-serif);margin:10px 0 14px}
.rung--free .rung__line{color:var(--ink-2)}
.rung__list{margin:0;color:var(--ink-2);font-size:16px;line-height:1.7}
.terr{display:grid;grid-template-columns:1fr 1fr;gap:20px 36px;margin:4px 0 0}
.terr div{border-top:1px solid var(--rule);padding-top:12px}
.terr dt{font:600 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tomato);margin-bottom:6px}
.terr dd{margin:0;font-size:16.5px;line-height:1.5;color:var(--ink)}
.buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.buy .price{margin:0}.buy .avail{flex-basis:100%;margin:0}
.price{font:600 15px var(--f-mono);color:var(--ink)}
.price b{font-size:30px;font-weight:600}
.btn--ink{background:var(--ink);color:#fff}

/* ---------- platform ---------- */
.platform{background:var(--tomato);color:#FFF6EE;padding:clamp(72px,9vw,120px) 0;overflow:hidden}
.platform .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.platform .kicker{color:#FFD5C9}.platform .lede{color:#FFE6DC}
.platform h2{margin:14px 0 18px}
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:28px}
.badge{display:inline-block;line-height:0;border-radius:8px}
.badge img{height:46px;width:auto}
.badge--gp img{height:69px;margin:-11px -10px}
.weblink{font:600 15.5px var(--f-ui);color:#fff;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.7);padding-bottom:2px}
.store{display:inline-flex;flex-direction:column;justify-content:center;min-height:54px;padding:6px 20px;border-radius:10px;border:1.5px solid rgba(255,255,255,.75);color:#fff;text-decoration:none;line-height:1.15}
.store small{font:500 12px var(--f-ui);opacity:.85}.store b{font:600 17px var(--f-ui)}
.placeholder-note{margin-top:14px;font:500 11.5px/1.5 var(--f-mono);color:#FFD5C9}
.platform figure{margin:0;justify-self:center;width:min(300px,100%)}
.platform .bezel{border-radius:44px;padding:9px;background:#15130F;box-shadow:0 50px 80px -40px rgba(40,6,0,.6)}
.platform .bezel img{border-radius:35px}
.platform figcaption{margin-top:14px;text-align:center;font:500 12px/1.5 var(--f-mono);color:#FFD5C9}

/* ---------- methodology (Gate 4: three principles) ---------- */
.method{padding:clamp(72px,9vw,120px) 0;background:var(--paper)}
.method h2{margin:14px 0 0}
.principles{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,56px)}
.principles li{border-top:1px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.principles .pn{font:600 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tomato)}
.principles strong{font:400 clamp(24px,2.3vw,30px)/1.15 var(--f-serif)}
.principles li>span:last-child{font-size:16px;line-height:1.6;color:var(--ink-2)}
.facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:36px;padding-top:18px;border-top:1px solid var(--rule);font:500 12.5px/1.5 var(--f-mono);color:var(--muted)}
.facts a{color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor}

/* ---------- final CTA ---------- */
.final{background:var(--navy);color:var(--on-navy);padding:clamp(72px,9vw,120px) 0;text-align:center}
.final h2{margin:14px auto 18px;max-width:14em}
.final .lede{margin:0 auto 30px}
.final .cta{justify-content:center}

/* ---------- footer (existing content preserved) ---------- */
.footer{background:var(--paper-2);padding:56px 0 32px;font-size:15px;color:var(--ink-2)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.footer h5{font:600 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.footer ul{list-style:none;margin:0;padding:0;line-height:2}
.footer a{text-decoration:none}.footer a:hover{text-decoration:underline}
.footer__brand img{width:32px;margin-bottom:12px}
.footer__brand p{max-width:30em;margin:0}
.footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:40px;padding-top:18px;border-top:1px solid var(--rule);font:500 12.5px/1.6 var(--f-mono);color:var(--muted)}

/* ---------- MOBILE: separate choreography (no sticky phone) ---------- */
@media (max-width:899px){
  .rail{display:none}
  .m-only{display:block}
  .band .wrap,.max .wrap,.platform .wrap{display:block}
  .hero .txt{min-height:0;padding:22px 0 0}
  .hero h1{font-size:clamp(36px,10.4vw,46px);margin:10px 0 14px}
  .hero .lede{font-size:16px;margin-bottom:20px}
  .hero .avail{margin-top:12px;font-size:12px}
  .m-hero{width:min(78%,320px);margin:24px auto -210px;position:relative;z-index:2}
  .m-hero .bezel{border-radius:40px;padding:8px;background:#15130F;box-shadow:0 40px 70px -30px rgba(0,0,0,.6)}
  .m-hero .bezel img{border-radius:32px}
  .ch .txt{min-height:0;padding:56px 0 0}
  .ch[data-state="board"] .txt{padding-top:240px}
  .js .ch:not(.is-active) .txt{opacity:1}
  .ch h2{font-size:clamp(32px,9vw,40px)}
  .m-shot{margin:26px auto 0;width:min(86%,340px);border-radius:24px;overflow:hidden;aspect-ratio:390/560;background:var(--white);box-shadow:0 0 0 1px rgba(30,27,22,.10),0 30px 60px -32px rgba(6,6,4,.55)}
  .m-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
  .ch{padding-bottom:56px}
  .evidence{justify-items:stretch;margin-top:34px}.evidence figure:nth-child(2){margin-right:0}
  .tiers{grid-template-columns:1fr 1fr;gap:16px}
  .platform figure{margin-top:40px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
  .reveal.is-in{opacity:1;transform:none}
}
@media (max-width:360px){.tiers{grid-template-columns:1fr}.hero h1{font-size:34px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal{opacity:1!important;transform:none!important}
}
html.rm,html.rm *{scroll-behavior:auto}
html.rm *,html.rm *::before,html.rm *::after{transition:none!important}
html.rm .reveal{opacity:1;transform:none}

/* ---------- Gate 4: authentic magnified detail beside the sticky phone (desktop ≥ 1100px) ---------- */
.detail{position:absolute;right:calc(100% - 100px);top:50%;width:clamp(300px,28vw,400px);margin:0;opacity:0;transform:translate(-10px,-50%);transition:opacity .45s ease .2s,transform .45s ease .2s;z-index:3;pointer-events:none}
.detail img{border-radius:16px;box-shadow:0 0 0 1px rgba(30,27,22,.10),0 36px 70px -30px rgba(6,6,4,.55);background:var(--white)}
.detail figcaption{margin:0 0 10px}
.flow[data-tone="navy"] .detail figcaption{color:var(--on-navy-2)}
.detail.is-on{opacity:1;transform:translate(0,-50%)}
.detail[data-d="district"] img{max-height:calc(var(--phone-h) - 60px);object-fit:cover;object-position:top}
@media (max-width:1099px){.detail{display:none}}
/* mobile crops are pre-cut by the capture tool: show them whole */
@media (max-width:899px){
  .m-shot{aspect-ratio:auto;width:min(90%,360px)}
  .m-shot img{height:auto;object-fit:initial}
  .m-shot--card{background:transparent;box-shadow:none;border-radius:16px}
  .m-shot--card img{border-radius:16px;box-shadow:0 0 0 1px rgba(30,27,22,.10),0 30px 60px -32px rgba(6,6,4,.55)}
  .max__top,.ladder{display:block}
  .max__proof{margin:36px auto 0}
  .rung--free{border-right:0;padding-right:0;padding-bottom:22px;border-bottom:1px solid var(--rule)}
  .rung--max{padding-left:0}
  .terr{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr;gap:26px}
  .buy{display:block}.buy .cta{margin-top:16px}
}
/* keyboard focus */
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.tm{margin:14px 0 0;font:500 11px/1.5 var(--f-ui);color:var(--muted)}

/* OS-R1 narrow-phone nav: fits 320px phones (brand + Start free + Menu) */
@media (max-width:374px){.nav .wrap{gap:8px}.brand{font-size:16px;gap:7px}.brand img{width:22px;height:22px}.nav .btn--sm{padding:0 11px;font-size:14px;min-height:36px}.menu summary{font-size:14px}}