/* Self-hosted fonts (SIL Open Font License): nothing is requested from third parties. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/Inter-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/Inter-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/InterTight-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/InterTight-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/InstrumentSerif-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/InstrumentSerif-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#FBF7F2; --bg-2:#F4EDE4; --surface:#FFFFFF;
  --ink:#16110D; --ink-2:#463B33; --muted:#877A6F; --faint:#B9ADA2;
  --line:rgba(22,17,13,.08); --line-2:rgba(22,17,13,.14);
  --accent:#EE6320; --accent-2:#FF9A2E; --accent-soft:#FDE7D6;
  --night:#0E0B09; --night-2:#1A1512; --night-line:rgba(255,255,255,.09);
  --r-card:28px; --r-lg:36px;
  --shadow-lg:0 2px 4px rgba(22,17,13,.04),0 40px 80px -36px rgba(60,30,10,.35);
  --ease:cubic-bezier(.2,.8,.2,1);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Inter Tight','Inter',-apple-system,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);font-feature-settings:"cv11","ss01","ss03";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.skip{position:absolute;left:16px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;z-index:200}
.skip:focus{top:16px}

h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(44px,7vw,88px);line-height:.98}
h2{font-size:clamp(36px,4.8vw,60px);line-height:1.02}
h3{font-size:21px;line-height:1.25;letter-spacing:-.02em}
em.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.1em;line-height:.9}
p{margin:0;text-wrap:pretty}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--accent)}
.kicker::before{content:"";width:18px;height:1.5px;background:currentColor;border-radius:2px}
.lede{font-size:clamp(18px,1.55vw,20px);line-height:1.55;color:var(--ink-2);max-width:600px}
.head{display:grid;gap:18px;max-width:760px;margin-bottom:64px}
.head.center{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- buttons ---------- */
.store{display:inline-flex;align-items:center;gap:11px;height:56px;padding:0 24px 0 20px;border-radius:16px;background:var(--ink);color:#fff;transition:background .25s,transform .25s var(--ease)}
.store:hover{background:#2B231E}
.store:active{transform:scale(.98)}
.store svg{width:22px;height:22px;flex:none;margin-top:-2px}
.store span{display:grid;line-height:1.1;text-align:left}
.store small{font-size:11.5px;font-weight:500;opacity:.8;letter-spacing:.01em}
.store b{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em}
.store.light{background:#fff;color:var(--ink)}
.store.light:hover{background:#F3ECE4}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--ink);padding:10px 4px}
.link svg{width:14px;height:14px;flex:none;transition:transform .3s var(--ease)}
.link:hover svg{transform:translateY(2px)}
.pill{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;transition:background .25s}
.pill:hover{background:#2B231E}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;transition:background .35s,box-shadow .35s}
.nav.solid{background:rgba(251,247,242,.8);backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px);box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;align-items:center;height:68px;gap:32px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em}
.brand img{width:30px;height:30px;border-radius:8px;box-shadow:0 0 0 1px rgba(22,17,13,.1),0 2px 6px -2px rgba(22,17,13,.18)}
.nav nav{display:flex;gap:28px;margin-left:auto;font-size:15px;font-weight:500;color:var(--ink-2)}
.nav nav a{transition:color .2s}
.nav nav a:hover{color:var(--ink)}

/* ---------- device frames ---------- */
.phone{--w:300px;position:relative;width:var(--w);aspect-ratio:9/19.5;flex:none;border-radius:calc(var(--w)*.165);padding:calc(var(--w)*.032);background:linear-gradient(160deg,#3B342F,#16120F 40%,#0B0908);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1),0 0 0 1px rgba(22,17,13,.1),var(--shadow-lg)}
.phone::after{content:"";position:absolute;top:calc(var(--w)*.058);left:50%;width:31%;height:calc(var(--w)*.09);transform:translateX(-50%);border-radius:99px;background:#000;z-index:5}
.screen{position:relative;width:100%;height:100%;border-radius:calc(var(--w)*.135);overflow:hidden;container-type:inline-size;background:#000;--pt:calc(100cqw / 393)}
.sb{position:absolute;inset:0 0 auto;height:calc(var(--pt)*54);display:flex;align-items:center;justify-content:space-between;padding:calc(var(--pt)*8) calc(var(--pt)*34) 0 calc(var(--pt)*40);font:600 calc(var(--pt)*16)/1 var(--sans);z-index:4;color:var(--ink)}
.sb.dark{color:#fff}
.sb i{display:flex;gap:calc(var(--pt)*6);align-items:center}
.sb svg{height:calc(var(--pt)*12);width:calc(var(--pt)*68)}

/* library screen */
.lib{position:absolute;inset:0;background:#F7F4F0;color:var(--ink);font-family:var(--sans)}
.lib .top{padding:calc(var(--pt)*62) calc(var(--pt)*18) 0;display:flex;justify-content:space-between;align-items:flex-end}
.lib .top h4{margin:0;font:700 calc(var(--pt)*34)/1 var(--sans);letter-spacing:-.02em}
.lib .more{width:calc(var(--pt)*34);height:calc(var(--pt)*34);border-radius:50%;background:rgba(22,17,13,.06);display:grid;place-items:center}
.lib .more svg{width:48%;height:48%}
.chips{display:flex;gap:calc(var(--pt)*8);padding:calc(var(--pt)*16) calc(var(--pt)*18) calc(var(--pt)*14);font:600 calc(var(--pt)*14)/1 var(--sans);white-space:nowrap;overflow:hidden}
.chips span{padding:calc(var(--pt)*9) calc(var(--pt)*14);border-radius:99px;background:rgba(22,17,13,.06);color:var(--ink-2)}
.chips span.on{background:var(--ink);color:#fff}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--pt)*14) calc(var(--pt)*10);padding:0 calc(var(--pt)*18)}
.cov .art{position:relative;aspect-ratio:2/3;border-radius:calc(var(--pt)*8);overflow:hidden;background:#ddd;box-shadow:0 0 0 .5px rgba(0,0,0,.08)}
.cov img{width:100%;height:100%;object-fit:cover}
.cov .art::after{content:"";position:absolute;inset:auto 0 0;height:48%;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.cov .t{position:absolute;left:calc(var(--pt)*8);right:calc(var(--pt)*8);bottom:calc(var(--pt)*7);z-index:1;color:#fff;font:600 calc(var(--pt)*11.5)/1.15 var(--sans);letter-spacing:-.01em}
.cov .badge{position:absolute;top:calc(var(--pt)*6);right:calc(var(--pt)*6);z-index:1;display:flex;border-radius:99px;overflow:hidden;font:700 calc(var(--pt)*10.5)/1 var(--sans);color:#fff}
.cov .badge b{background:var(--accent);padding:calc(var(--pt)*4) calc(var(--pt)*6)}
.cov .badge s{text-decoration:none;background:#3A3430;padding:calc(var(--pt)*4) calc(var(--pt)*6)}
.cov .pin{position:absolute;top:calc(var(--pt)*6);left:calc(var(--pt)*6);z-index:1;width:calc(var(--pt)*20);height:calc(var(--pt)*20);border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.cov .pin svg{width:55%;height:55%}
.cov .cap{font:500 calc(var(--pt)*11)/1.2 var(--sans);color:var(--muted);margin-top:calc(var(--pt)*5)}
.tabbar{position:absolute;inset:auto 0 0;height:calc(var(--pt)*84);background:rgba(247,244,240,.92);backdrop-filter:blur(10px);border-top:.5px solid rgba(22,17,13,.1);display:grid;grid-template-columns:repeat(4,1fr);padding-top:calc(var(--pt)*8);font:500 calc(var(--pt)*10)/1 var(--sans);color:#9A918A}
.tabbar span{display:grid;justify-items:center;align-content:start;gap:calc(var(--pt)*5)}
.tabbar svg{width:calc(var(--pt)*25);height:calc(var(--pt)*25)}
.tabbar .on{color:var(--accent)}

/* reader screen */
.rd{position:absolute;inset:0;background:#000;color:#fff;display:grid;place-items:center;transition:background .4s}
.rd .pageimg{width:100%;aspect-ratio:2/3;object-fit:cover}
.rd .chrome-top{position:absolute;inset:calc(var(--pt)*58) calc(var(--pt)*16) auto;display:flex;justify-content:space-between;z-index:3}
.rd .circ{width:calc(var(--pt)*40);height:calc(var(--pt)*40);border-radius:50%;background:rgba(40,36,33,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center;color:#fff;transition:background .4s,color .4s}
.rd .circ svg{width:42%;height:42%}
.rd .panel{position:absolute;left:calc(var(--pt)*12);right:calc(var(--pt)*12);bottom:calc(var(--pt)*30);padding:calc(var(--pt)*14) calc(var(--pt)*16) calc(var(--pt)*16);border-radius:calc(var(--pt)*26);background:rgba(34,30,27,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:3;transition:background .4s,color .4s,opacity .3s}
.rd .panel .row1{display:flex;justify-content:space-between;align-items:baseline;font:600 calc(var(--pt)*14)/1.2 var(--sans)}
.rd .panel .row1 span{font-weight:500;opacity:.6;font-size:calc(var(--pt)*13)}
.rd .panel .row2{display:flex;align-items:center;gap:calc(var(--pt)*12);margin-top:calc(var(--pt)*12)}
.rd .panel .row2 .circ{width:calc(var(--pt)*34);height:calc(var(--pt)*34);background:rgba(255,255,255,.1)}
.rd .bar{flex:1;height:calc(var(--pt)*8);border-radius:99px;background:rgba(255,255,255,.16);display:flex;justify-content:flex-end;overflow:hidden}
.rd .bar i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .5s var(--ease)}
.rd.ltr .bar{justify-content:flex-start}

/* profile screen */
.prof{position:absolute;inset:0;background:#F7F4F0;color:var(--ink);padding:calc(var(--pt)*62) calc(var(--pt)*16) 0}
.prof .nb{text-align:center;font:600 calc(var(--pt)*17)/1 var(--sans);margin:calc(var(--pt)*6) 0 calc(var(--pt)*18)}
.prof .card2{background:#fff;border-radius:calc(var(--pt)*18);padding:calc(var(--pt)*18);margin-bottom:calc(var(--pt)*12)}
.prof .streak{display:flex;align-items:center;gap:calc(var(--pt)*14)}
.prof .streak .n{font:700 calc(var(--pt)*46)/1 var(--display);letter-spacing:-.04em;color:var(--accent)}
.prof .streak b{display:block;font:600 calc(var(--pt)*16)/1.2 var(--sans)}
.prof .streak span{font:400 calc(var(--pt)*13)/1.3 var(--sans);color:var(--muted)}
.prof .stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.prof .stats b{display:block;font:700 calc(var(--pt)*22)/1.1 var(--display);letter-spacing:-.03em}
.prof .stats span{font:500 calc(var(--pt)*11.5)/1.2 var(--sans);color:var(--muted)}
.prof h5{margin:0 0 calc(var(--pt)*12);font:700 calc(var(--pt)*17)/1 var(--sans)}
.prof .dna{display:grid;gap:calc(var(--pt)*10)}
.prof .dna div{display:grid;grid-template-columns:calc(var(--pt)*96) 1fr calc(var(--pt)*34);align-items:center;gap:calc(var(--pt)*8);font:500 calc(var(--pt)*13)/1 var(--sans)}
.dna i{display:block;height:calc(var(--pt)*8);border-radius:99px;background:rgba(22,17,13,.07);overflow:hidden}
.dna i::before{content:"";display:block;height:100%;width:var(--v);background:var(--accent);border-radius:99px}
.dna em{font-style:normal;color:var(--muted);text-align:right}

/* ---------- hero ---------- */
.hero{position:relative;padding:150px 0 0;overflow:hidden;isolation:isolate}
.hero .copy{text-align:center;display:grid;justify-items:center;gap:26px;position:relative;z-index:2}
.hero .badge-top{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:99px;background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:14px;font-weight:500;color:var(--ink-2)}
.hero .badge-top img{width:26px;height:26px;border-radius:7px}
.hero .lede{max-width:620px;text-align:center}
.hero .ctas{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center}
.hero .req{font-size:14px;color:var(--muted);margin-top:-8px}
.stage{position:relative;height:720px;margin-top:56px;display:flex;justify-content:center}
.stage .phone{position:absolute}
.stage .p-main{--w:320px;z-index:3;top:0}
.stage .p-l,.stage .p-r{--w:282px;z-index:2;top:70px}
.stage .p-l{margin-left:-440px;rotate:-4deg}
.stage .p-r{margin-left:440px;rotate:4deg}
.glow{position:absolute;left:50%;top:60px;width:1200px;height:1200px;transform:translateX(-50%);z-index:-1;pointer-events:none}
.glow svg{width:100%;height:100%}
.hero-fade{position:absolute;inset:auto 0 0;height:200px;background:linear-gradient(transparent,var(--bg));z-index:4;pointer-events:none}
.enter{opacity:0;animation:enter 1.1s var(--ease) forwards}
@keyframes enter{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* ---------- facts strip ---------- */
.facts{padding:28px 0 120px;position:relative;z-index:5}
.facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts li{display:flex;gap:14px;align-items:center;padding:26px 24px;font-size:15px;color:var(--muted);line-height:1.4}
.facts li+li{border-left:1px solid var(--line)}
.facts li b{display:block;color:var(--ink);font-weight:600}
.facts svg{width:22px;height:22px;flex:none;color:var(--accent)}

/* ---------- reader section ---------- */
.reader-sec{background:var(--night);color:#fff;padding:130px 0 140px;border-radius:var(--r-lg) var(--r-lg) 0 0;position:relative;overflow:hidden}
.reader-sec .kicker{color:var(--accent-2)}
.reader-sec .lede{color:rgba(255,255,255,.66)}
.reader-grid{display:grid;grid-template-columns:1fr 400px;gap:80px;align-items:center}
.demo-phone{--w:380px;margin-inline:auto}
.rd .chrome-top{transition:opacity .3s}

/* ---------- ipad ---------- */
.ipad-sec{background:var(--night);color:#fff;padding:0 0 150px;margin-top:-1px}
.ipad-sec .head{margin-bottom:56px}
.ipad-sec .kicker{color:var(--accent-2)}
.ipad-sec .lede{color:rgba(255,255,255,.66)}
.ipad{width:min(1000px,100%);margin:0 auto;aspect-ratio:1.43;border-radius:clamp(22px,3.4vw,40px);padding:clamp(10px,1.5vw,18px);background:linear-gradient(160deg,#3B342F,#16120F 40%,#0B0908);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1),0 60px 120px -40px rgba(238,99,32,.3)}
.ipad .scr{width:100%;height:100%;border-radius:clamp(12px,2vw,24px);background:#000;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative}
.ipad .spread{display:flex;height:100%;flex-direction:row-reverse}
.ipad .spread img{height:100%;width:auto;aspect-ratio:2/3;object-fit:cover}
.ipad .spread::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:70px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.12) 45%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.12) 55%,transparent);pointer-events:none}

/* ---------- features ---------- */
.features{padding:150px 0 130px}
.fgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:0 0 0 1px var(--line);padding:34px;display:flex;flex-direction:column;gap:12px;overflow:hidden;position:relative}
.card p{color:var(--ink-2);font-size:16px;max-width:480px}
.card .vis{margin-top:auto;padding-top:28px}
.s2{grid-column:span 2}.s4{grid-column:span 4}.s6{grid-column:span 6}
.ic{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:6px;flex:none}
.ic svg{width:21px;height:21px}

.chlist{border-radius:18px;box-shadow:0 0 0 1px var(--line);overflow:hidden;background:#fff}
.chlist div{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:15px}
.chlist div+div{border-top:1px solid var(--line)}
.chlist b{font-weight:600}
.chlist span{color:var(--muted);font-size:13.5px}
.chlist .new{font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--accent);border-radius:6px;padding:3px 6px}
.chlist .st{margin-left:auto;width:24px;height:24px;display:grid;place-items:center;color:var(--muted)}
.chlist .st svg{width:22px;height:22px}
.chlist .ok{color:var(--ink)}
.ring{--p:.62;width:21px;height:21px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*360deg),rgba(22,17,13,.1) 0);-webkit-mask:radial-gradient(circle,transparent 7px,#000 7.5px);mask:radial-gradient(circle,transparent 7px,#000 7.5px)}
@property --p{syntax:'<number>';inherits:false;initial-value:.62}
.in .ring{animation:ringp 3s var(--ease) infinite alternate}
@keyframes ringp{from{--p:.18}to{--p:.94}}

.notif{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:20px;background:#F6F1EB;box-shadow:0 0 0 1px var(--line);font-size:14px;line-height:1.35}
.notif img{width:38px;height:38px;border-radius:9px}
.notif .h{display:flex;justify-content:space-between;gap:10px}
.notif b{font-weight:600}
.notif time{font-size:12.5px;color:var(--muted)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:16px;text-align:center;font-size:12px;color:var(--muted);font-weight:500}
.cal span{display:grid;gap:6px;justify-items:center}
.cal b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px;color:var(--ink);font-weight:600;position:relative}
.cal .dot b::after{content:"";position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.cal .today b{background:var(--ink);color:#fff}
.cal .today b::after{background:#fff}

.trk{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;box-shadow:0 0 0 1px var(--line);font-size:15px}
.trk img{width:36px;height:36px;border-radius:9px}
.trk b{font-weight:600;display:block}
.trk span{font-size:13px;color:var(--muted)}
.trk .sw{margin-left:auto;width:44px;height:26px;border-radius:99px;background:#34C759;position:relative;flex:none}
.trk .sw::after{content:"";position:absolute;right:2px;top:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}

.sync{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 0}
.sync .dv{border:2px solid var(--ink);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--muted);background:#fff}
.sync .dv.ph{width:44px;height:84px;border-radius:12px}
.sync .dv.tb{width:100px;height:74px;border-radius:12px}
.sync .cloud{width:50px;height:50px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.sync .cloud svg{width:24px;height:24px}
.sync .ln{width:30px;height:2px;background:repeating-linear-gradient(90deg,var(--faint) 0 4px,transparent 4px 8px)}
.in .sync .ln{animation:dash .8s linear infinite}
@keyframes dash{to{background-position:8px 0}}

.dnacard .dna{display:grid;gap:12px}
.dnacard .dna div{display:grid;grid-template-columns:100px 1fr 40px;gap:10px;align-items:center;font-size:14px;font-weight:500}
.dnacard .dna i{height:10px}
.dnacard .dna i::before{transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease) .2s}
.dnacard.in .dna i::before{transform:scaleX(1)}

.sources{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.srcs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.src{border-radius:20px;padding:20px;background:var(--bg);box-shadow:0 0 0 1px var(--line);display:grid;gap:8px;align-content:start}
.src .ic{margin:0 0 4px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.src b{font-weight:600;font-size:15px;line-height:1.3}
.src span{font-size:13.5px;color:var(--muted);line-height:1.45}
.search{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border-radius:14px;background:var(--bg);box-shadow:0 0 0 1px var(--line);color:var(--muted);font-size:15px;margin-bottom:12px}
.search svg{width:18px;height:18px}

/* ---------- personalize ---------- */

/* ---------- privacy ---------- */
.privacy{padding:140px 0;background:var(--bg-2)}
.privacy blockquote{margin:0 auto 80px;max-width:940px;text-align:center;font-family:var(--display);font-weight:600;font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.privacy blockquote em{color:var(--accent)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pgrid .card{background:var(--bg)}

/* ---------- originals ---------- */
.originals{padding:140px 0 0}
.soon{font-size:13px;font-weight:600;padding:8px 14px;border-radius:99px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}

/* ---------- faq ---------- */
.faq{padding:140px 0}
.faq .wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;align-items:start}
.faq .head{position:sticky;top:120px;margin:0}
.qa{border-top:1px solid var(--line-2)}
.qa details{border-bottom:1px solid var(--line-2)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;transition:transform .35s var(--ease),background .25s}
.qa summary i svg{width:12px;height:12px}
.qa details[open] summary i{transform:rotate(45deg);background:var(--ink);color:#fff;box-shadow:none}
.qa .a{padding:0 60px 28px 0;color:var(--ink-2);font-size:16.5px}
.qa .a p+p{margin-top:10px}

/* ---------- final ---------- */
.final{padding:0 0 40px}
.final-card{position:relative;display:grid;grid-template-columns:1.05fr 1fr;min-height:600px;border-radius:40px;overflow:hidden;background:#1B120C;color:#fff;isolation:isolate}
.final-card .txt{padding:80px 64px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:26px;z-index:2}
.final-card h2{font-size:clamp(40px,4.4vw,60px)}
.final-card h2 em{color:var(--accent-2)}
.final-card p{font-size:19px;color:rgba(255,255,255,.72);max-width:440px}
.final-card .ctas{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.final-card .req{font-size:14px;color:rgba(255,255,255,.5)}
.final-card .art{position:relative;min-height:320px}
.final-card .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.final-card .art::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#1B120C 0%,rgba(27,18,12,.5) 22%,transparent 55%)}

/* ---------- footer ---------- */
.social{display:flex;gap:4px;margin-top:14px}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:9px;color:var(--ink-2)}
.social a:hover{color:var(--ink)}
.social svg{width:20px;height:20px;fill:currentColor}
footer{padding:70px 0 50px;font-size:15px;color:var(--ink-2)}
.fgrid2{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}
.fgrid2 h6{margin:0 0 16px;font-size:13px;font-weight:600;color:var(--ink)}
.fgrid2 ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fgrid2 a{transition:color .2s}
.fgrid2 ul a:hover{color:var(--accent)}
.fgrid2 p{margin-top:16px;max-width:320px;color:var(--muted)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:26px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .reader-grid{grid-template-columns:1fr;gap:56px}
    .sources{grid-template-columns:1fr}
  .faq .wrap{grid-template-columns:1fr;gap:40px}
  .faq .head{position:static}
  .stage .p-l{margin-left:-400px}.stage .p-r{margin-left:400px}
}
@media (max-width:900px){
  .nav nav{display:none}
  .nav .pill{margin-left:auto}
  .facts ul{grid-template-columns:1fr 1fr}
  .facts li:nth-child(3){border-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--line)}
  .fgrid{grid-template-columns:1fr 1fr}
  .s2{grid-column:span 1}.s4,.s6{grid-column:1/-1}
  .pgrid{grid-template-columns:1fr}
  .final-card{grid-template-columns:1fr}
  .final-card .art{height:420px;order:-1}
  .final-card .art::before{background:linear-gradient(0deg,#1B120C 0%,transparent 50%)}
  .final-card .txt{padding:10px 32px 56px}
  .fgrid2{grid-template-columns:1fr 1fr 1fr}
  .fgrid2>div:first-child{grid-column:1/-1}
}
@media (max-width:720px){
  .stage{height:600px}
  .stage .p-main{--w:270px}
  .stage .p-l,.stage .p-r{--w:230px;top:60px}
  .stage .p-l{margin-left:-270px}.stage .p-r{margin-left:270px}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .hero{padding-top:116px}
  .hero .copy{gap:22px}
  .stage{height:540px;margin-top:44px}
  .stage .p-main{--w:250px}
  .stage .p-l,.stage .p-r{--w:210px;top:56px}
  .stage .p-l{margin-left:-190px;rotate:-6deg}.stage .p-r{margin-left:190px;rotate:6deg}
  .facts{padding-bottom:90px}
  .facts ul{grid-template-columns:1fr}
  .facts li{border-left:0!important;padding:18px 4px}
  .facts li+li{border-top:1px solid var(--line)}
  .head{margin-bottom:44px}
  .reader-sec{padding:90px 0 100px;border-radius:28px 28px 0 0}
  .demo-phone{--w:min(320px,84vw)}
  .ipad-sec{padding-bottom:100px}
  .features{padding:100px 0 90px}
  .fgrid{grid-template-columns:1fr}
  .s2{grid-column:auto}
  .card{padding:26px}
  .srcs{grid-template-columns:1fr}
  .privacy{padding:90px 0}
  .privacy blockquote{margin-bottom:50px}
  .originals{padding-top:90px}
  .faq{padding:90px 0}
  .qa summary{font-size:18px;padding:22px 0}
  .qa .a{padding-right:0}
  .final-card{border-radius:28px}
  .final-card .art{height:340px}
  .final-card .txt{padding:0 24px 44px}
  .fgrid2{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.enter{opacity:1;transform:none}
}

/* =====================================================================
   Inner pages
   ===================================================================== */
.nav nav a[aria-current="page"]{color:var(--ink)}
.nav nav a[aria-current="page"]::after{content:"";display:block;height:2px;border-radius:2px;background:var(--accent);margin-top:3px}
.page-hero{padding:150px 0 64px;position:relative;overflow:hidden;isolation:isolate}
.page-hero::before{content:"";position:absolute;right:-240px;top:-300px;width:760px;height:760px;background:radial-gradient(closest-side,rgba(255,154,46,.28),rgba(255,154,46,0));z-index:-1}
.page-hero .wrap{display:grid;gap:20px;max-width:1180px}
.page-hero h1{font-size:clamp(44px,6vw,76px);line-height:1}
.page-hero .lede{max-width:680px}
.crumbs{display:flex;gap:8px;font-size:14px;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.meta-line{font-size:14px;color:var(--muted)}

/* docs layout: sticky contents + prose */
.doc{display:grid;grid-template-columns:240px minmax(0,720px);gap:80px;padding:24px 0 140px;align-items:start}
.toc{position:sticky;top:100px;display:grid;gap:2px;font-size:14.5px}
.toc b{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.toc a{padding:7px 12px;border-radius:10px;color:var(--ink-2);transition:background .2s,color .2s}
.toc a:hover{background:var(--bg-2);color:var(--ink)}
.toc a.on{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line);font-weight:500}
.prose{font-size:17px;line-height:1.7;color:var(--ink-2)}
.prose>*+*{margin-top:18px}
.prose h2{font-size:30px;line-height:1.15;color:var(--ink);margin-top:64px;scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;color:var(--ink);margin-top:36px}
.prose h2+p,.prose h3+p{margin-top:12px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(238,99,32,.5);text-underline-offset:3px;text-decoration-thickness:1.5px;transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--accent)}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:8px}
.prose li::marker{color:var(--accent)}
.prose hr{border:0;border-top:1px solid var(--line-2);margin:56px 0}
.prose code{font:500 .88em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg-2);padding:2px 6px;border-radius:6px;color:var(--ink)}
.prose .path{font-weight:500;color:var(--ink);white-space:nowrap}
.callout{border-radius:20px;padding:22px 24px;background:var(--surface);box-shadow:0 0 0 1px var(--line);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;font-size:16px;line-height:1.6}
.callout .ic{margin:0}
.callout b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.callout.warm{background:var(--accent-soft);box-shadow:none}
.callout.warm .ic{background:#fff}
.summary{border-radius:24px;padding:28px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.summary h2{font-size:20px!important;margin:0 0 14px!important}
.summary ul{list-style:none;padding:0;display:grid;gap:12px}
.summary li{display:grid;grid-template-columns:22px 1fr;gap:12px;margin:0!important}
.summary li svg{width:20px;height:20px;color:var(--accent);margin-top:4px}
.todo{background:#FFF1B8;color:#6B4E00;border-radius:6px;padding:1px 6px;font-weight:600;font-size:.94em}
.table-wrap{overflow-x:auto;border-radius:18px;box-shadow:0 0 0 1px var(--line);background:var(--surface)}
.prose table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
.prose th,.prose td{text-align:left;padding:14px 18px;vertical-align:top}
.prose th{font-weight:600;color:var(--ink);background:var(--bg);font-size:13.5px}
.prose tr+tr td{border-top:1px solid var(--line)}

/* steps */
.steps{counter-reset:st;list-style:none;padding:0!important;display:grid;gap:14px}
.steps li{counter-increment:st;display:grid;grid-template-columns:40px 1fr;gap:16px;margin:0!important;padding:20px 22px;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.steps li::before{content:counter(st);width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:600 14px/1 var(--sans);margin-top:2px}
.steps b{color:var(--ink);font-weight:600;display:block}

/* link cards (support hub) */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:8px 0 40px}
.lcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:30px;border-radius:var(--r-card);background:var(--surface);box-shadow:0 0 0 1px var(--line);transition:box-shadow .3s,transform .3s var(--ease)}
.lcard:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line-2),0 24px 40px -28px rgba(60,30,10,.4)}
.lcard h3{font-size:20px}
.lcard p{color:var(--ink-2);font-size:15.5px}
.lcard .go{margin-top:auto;padding-top:14px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.lcard .go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.lcard:hover .go svg{transform:translateX(3px)}
.lcard.dark{background:var(--night);color:#fff;box-shadow:none}
.lcard.dark p{color:rgba(255,255,255,.66)}
.lcard.dark .go{color:#fff}
.lcard.dark .ic{background:rgba(255,255,255,.08);color:var(--accent-2)}
.band{padding:0 0 140px}
.band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mail-card{border-radius:var(--r-card);padding:36px;background:var(--bg-2);display:grid;gap:14px;align-content:start}
.mail-card h3{font-size:24px}
.mail-card p{color:var(--ink-2)}
.mail-card .addr{font:600 20px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 22px;border-radius:14px;font-weight:600;font-size:16px;transition:background .25s,transform .25s var(--ease),box-shadow .25s;justify-self:start}
.btn:active{transform:scale(.98)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#2B231E}
.btn-line{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line-2)}
.btn-line:hover{box-shadow:0 0 0 1px var(--ink)}
.btn svg{width:18px;height:18px}
.row-btns{display:flex;gap:10px;flex-wrap:wrap}

/* faq page */
.faq-page{display:grid;grid-template-columns:240px minmax(0,1fr);gap:80px;padding:8px 0 140px;align-items:start}
.faq-search{position:relative;max-width:560px}
.faq-search input{width:100%;height:56px;border-radius:16px;border:0;background:var(--surface);box-shadow:0 0 0 1px var(--line-2);padding:0 18px 0 50px;font:400 17px var(--sans);color:var(--ink);transition:box-shadow .2s}
.faq-search input:focus{outline:0;box-shadow:0 0 0 2px var(--accent)}
.faq-search svg{position:absolute;left:18px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--muted)}
.faq-group{scroll-margin-top:100px}
.faq-group+.faq-group{margin-top:64px}
.faq-group>h2{font-size:28px;margin-bottom:12px}
.faq-empty{display:none;padding:40px 0;color:var(--muted);font-size:17px}
.qa .a a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(238,99,32,.5);text-underline-offset:3px}
.qa .a ul{margin:10px 0 0;padding-left:20px}
.qa .a li+li{margin-top:6px}

/* forms */
.form{display:grid;gap:22px;padding:34px;border-radius:var(--r-card);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.field{display:grid;gap:8px}
/* `display` in a class beats the browser's own [hidden] rule, so a field hidden from
   JavaScript would stay on screen. */
.field[hidden]{display:none}
.field label,.field legend{font-weight:600;font-size:15px;color:var(--ink);padding:0}
.field .hint{font-size:14px;color:var(--muted);margin-top:-2px}
.field input,.field textarea,.field select{width:100%;border:0;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2);padding:14px 16px;font:400 16px/1.5 var(--sans);color:var(--ink);transition:box-shadow .2s;-webkit-appearance:none;appearance:none}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;box-shadow:inset 0 0 0 2px var(--accent)}
fieldset.field{border:0;margin:0;padding:0}
.choice{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label{height:42px;padding:0 16px;border-radius:12px;display:inline-flex;align-items:center;font-weight:500;font-size:15px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;transition:all .2s}
.choice input:checked+label{background:var(--ink);color:#fff;box-shadow:none}
.choice input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.form .foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:4px}
.form .foot p{font-size:14px;color:var(--muted);flex:1;min-width:220px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.side-notes{display:grid;gap:16px;align-content:start;position:sticky;top:100px}
.split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;padding:8px 0 140px;align-items:start}

/* 404 */
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding:160px 0 80px}
.nf .big{font:600 clamp(96px,16vw,180px)/1 var(--display);letter-spacing:-.06em;color:var(--accent)}

@media (max-width:1080px){
  .doc,.faq-page{grid-template-columns:minmax(0,1fr);gap:32px}
  .toc{position:static;display:flex;flex-wrap:wrap;gap:6px}
  .toc b{width:100%;margin:0}
  .toc a{box-shadow:0 0 0 1px var(--line);background:var(--surface)}
  .hub{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .side-notes{position:static}
}
@media (max-width:720px){
  .page-hero{padding:118px 0 44px}
  .hub,.band .wrap,.two{grid-template-columns:1fr}
  .doc,.faq-page,.split{padding-bottom:90px}
  .band{padding-bottom:90px}
  .form,.mail-card,.lcard{padding:24px}
  .prose h2{font-size:26px;margin-top:52px}
  .toc{display:none}
}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23877A6F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}

/* download page ------------------------------------------------------ */
.nav .pill[aria-current="page"]{background:var(--accent)}
.plats-sec{padding:0 0 120px}
.plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
.plat{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.plat-art{--screen:#FDE7D6;--star:var(--accent);display:grid;place-items:center;padding:44px 32px 20px;background:radial-gradient(120% 100% at 50% 0%,#FFE9D6,var(--bg) 70%);color:var(--ink)}
.plat-art svg{width:min(300px,100%);height:auto}
.plat-body{display:flex;flex-direction:column;gap:14px;padding:30px 34px 34px;flex:1}
.plat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.plat-head h2{font-size:30px}
.plat-body>p{color:var(--ink-2);max-width:520px}
.avail{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:7px 12px;border-radius:99px;background:#E7F6EC;color:#1F7A42;white-space:nowrap}
.avail i{width:7px;height:7px;border-radius:50%;background:#2FA85A;box-shadow:0 0 0 3px rgba(47,168,90,.2)}
/* A version that is only on TestFlight: the same pill, in the app's own orange, so it
   never reads as green-light-it-has-shipped. */
.avail.beta{background:var(--accent-soft);color:#A13D0E}
.avail.beta i{background:var(--accent);box-shadow:0 0 0 3px rgba(238,99,32,.2)}
.plat-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:9px;font-size:15px;color:var(--ink-2)}
.plat-list li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.plat-list svg{width:18px;height:18px;color:var(--accent);margin-top:3px}
.plat-action{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.req-line{font-size:14px;color:var(--muted)}
.plat.is-soon .plat-art{--screen:#EFE9E2;--star:#C9BDB1;background:radial-gradient(120% 100% at 50% 0%,#F1ECE6,var(--bg) 70%);color:#A89B90}
.plat.is-soon{background:var(--bg);box-shadow:0 0 0 1px var(--line),inset 0 0 0 0 transparent;border:1px dashed var(--line-2)}
.after{padding:0 0 110px}
.after .lcard{background:var(--surface)}
@media (max-width:720px){
  .plats-sec{padding-bottom:80px}
  .plat-body{padding:24px}
  .plat-art{padding:32px 20px 12px}
  .after{padding-bottom:80px}
}


/* no ads ------------------------------------------------------------- */
.noads{padding:0 0 140px}
.versus{display:flex;justify-content:center;align-items:flex-end;gap:clamp(24px,6vw,90px);margin:8px 0 64px}
.vs-item{margin:0;display:grid;justify-items:center;gap:18px}
.vs-item figcaption{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--muted)}
.vs-item figcaption img{width:22px;height:22px;border-radius:6px}
.vs-kiyume figcaption{color:var(--ink)}
.vs-other .phone{filter:saturate(.6);opacity:.92;transform:scale(.94);transform-origin:bottom}
.vs-other .pageimg{filter:blur(1.5px) brightness(.55)}
.ad-pop{position:absolute;left:10%;right:10%;top:34%;z-index:3;padding:calc(var(--pt)*22) calc(var(--pt)*18);border-radius:calc(var(--pt)*20);background:#fff;color:var(--ink);text-align:center;font:500 calc(var(--pt)*14)/1.35 var(--sans);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.ad-pop b{display:block;font:700 calc(var(--pt)*19)/1.2 var(--sans);margin-bottom:calc(var(--pt)*4)}
.ad-pop .ad-x{position:absolute;top:calc(var(--pt)*8);right:calc(var(--pt)*12);font-size:calc(var(--pt)*13);color:#B9B2AC}
.ad-pop .ad-btn{display:block;margin-top:calc(var(--pt)*14);padding:calc(var(--pt)*11);border-radius:calc(var(--pt)*12);background:#2F6BFF;color:#fff;font-weight:700}
.ad-banner{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:calc(var(--pt)*10);padding:calc(var(--pt)*14) calc(var(--pt)*16) calc(var(--pt)*30);background:#FFE14D;color:#222;font:700 calc(var(--pt)*14)/1.2 var(--sans)}
.ad-banner span{font-size:calc(var(--pt)*10);padding:calc(var(--pt)*3) calc(var(--pt)*6);border-radius:calc(var(--pt)*4);background:#222;color:#FFE14D}
.ad-banner i{margin-left:auto;font-style:normal;padding:calc(var(--pt)*7) calc(var(--pt)*12);border-radius:99px;background:#222;color:#fff}
.noads-points{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px}
.noads-points li{display:grid;grid-template-columns:24px 1fr;gap:14px;padding:24px;border-radius:22px;background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:15.5px;color:var(--ink-2);line-height:1.5}
.noads-points svg{width:22px;height:22px;color:var(--accent);margin-top:1px}
.noads-points b{display:block;color:var(--ink);font-weight:600;font-size:16px;margin-bottom:3px}

/* reader: simple points */
.points{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--night-line)}
.points li{padding:20px 0;border-bottom:1px solid var(--night-line);display:grid;gap:4px}
.points b{font-weight:600;font-size:17px}
.points span{color:rgba(255,255,255,.58);font-size:15.5px}

@media (max-width:1080px){
  .reader-grid .demo-phone{order:-1}
}
@media (max-width:720px){
  .noads{padding-bottom:90px}
  .versus{gap:14px;margin-bottom:44px}
  .versus .phone{--w:min(165px,43vw)!important}
  .noads-points{grid-template-columns:1fr}
}


/* originals ---------------------------------------------------------- */
.originals{padding:140px 0 0}
.orig{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:64px;border-radius:40px;overflow:hidden;isolation:isolate;color:#fff;background:radial-gradient(90% 120% at 85% 20%,#FFB45E 0%,#F2701F 38%,#B8400D 72%,#5A1E08 100%)}
.orig::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 1.5px) 0 0/16px 16px;-webkit-mask-image:linear-gradient(100deg,#000,transparent 60%);mask-image:linear-gradient(100deg,#000,transparent 60%)}
.orig-copy{display:grid;gap:18px;align-content:start}
.orig-top{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.orig-top img{width:56px;height:56px;border-radius:14px;box-shadow:0 12px 24px -10px rgba(60,15,0,.6)}
.orig-soon{font-size:13px;font-weight:600;padding:7px 13px;border-radius:99px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.orig .kicker{color:#FFE2C7}
.orig h2{font-size:clamp(38px,4.6vw,58px)}
.orig h2 em{color:#FFE2C7}
.orig .lede{color:rgba(255,255,255,.86);max-width:500px}
.orig-points{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px}
.orig-points li{display:grid;grid-template-columns:22px 1fr;gap:14px;font-size:15.5px;color:rgba(255,255,255,.78);line-height:1.5}
.orig-points svg{width:20px;height:20px;color:#FFE2C7;margin-top:2px}
.orig-points b{display:block;color:#fff;font-weight:600;font-size:16px}
.orig-cta{margin-top:10px}
.orig-btn{background:#fff;color:var(--ink)}
.orig-btn:hover{background:#FFF1E4}
.orig-art{position:relative;height:460px}
.orig-sun{position:absolute;left:50%;top:46%;width:360px;height:360px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#FFE7B8 0%,rgba(255,200,120,.55) 35%,rgba(255,160,70,0) 70%)}
.oc{position:absolute;left:50%;top:50%;width:190px;aspect-ratio:2/3;border-radius:16px;overflow:hidden;box-shadow:0 30px 50px -20px rgba(50,12,0,.7),0 0 0 1px rgba(255,255,255,.15);transition:transform .6s var(--ease)}
.oc img{width:100%;height:100%;object-fit:cover}
.oc span{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.92);color:#B8400D}
.oc em{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;font-style:normal;font-weight:600;font-size:14px;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.oc-1{transform:translate(-118%,-46%) rotate(-9deg);filter:brightness(.8)}
.oc-3{transform:translate(18%,-46%) rotate(9deg);filter:brightness(.8)}
.oc-2{transform:translate(-50%,-54%);z-index:2;width:210px}
.orig:hover .oc-1{transform:translate(-124%,-47%) rotate(-11deg)}
.orig:hover .oc-3{transform:translate(24%,-47%) rotate(11deg)}
@media (max-width:1080px){
  .orig{grid-template-columns:1fr;padding:48px}
  .orig-art{height:380px;order:-1}
}
@media (max-width:640px){
  .originals{padding-top:90px}
  .orig{padding:28px 22px 34px;border-radius:28px;gap:10px}
  .orig-art{height:300px}
  .oc{width:130px}.oc-2{width:150px}
  .orig-sun{width:260px;height:260px}
}




/* releases ------------------------------------------------------------ */
.rel-sec{padding:0 0 120px}
.rel-list{display:grid;gap:28px}
.rel{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start;scroll-margin-top:100px}
.rel-meta{position:sticky;top:100px;display:grid;gap:8px;justify-items:start;padding-top:30px}
.rel-ver{font:600 22px/1.1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.rel-meta time{font-size:14.5px;color:var(--muted)}
.rel-card{padding:34px 38px;border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.rel-card h2{font-size:clamp(28px,3vw,36px)}
.rel-sum{margin-top:10px;font-size:18px;color:var(--ink-2);max-width:640px}
.rel-group{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.rel-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:8px}
.t-new{background:var(--accent-soft);color:var(--accent)}
.t-imp{background:#E6EEFB;color:#2D5BB8}
.t-fix{background:#E7F6EC;color:#1F7A42}
.rel-group ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.rel-group li{position:relative;padding-left:22px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.rel-group li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media (max-width:900px){
  .rel{grid-template-columns:1fr;gap:14px}
  .rel-meta{position:static;padding-top:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
}
@media (max-width:640px){
  .rel-sec{padding-bottom:80px}
  .rel-card{padding:24px}
}

/* home hero: two columns — copy left, one large phone right ------------ */
.hero{padding:120px 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;min-height:min(820px,calc(100vh - 20px))}
.hero .copy{text-align:left;justify-items:start;gap:24px;padding-bottom:60px}
.hero .copy h1{font-size:clamp(46px,5.6vw,80px)}
.hero .copy .lede{text-align:left;max-width:520px}
.hero .copy .ctas{justify-content:flex-start}
.hero .copy .req{margin-top:-6px}
.hero-visual{position:relative;display:flex;justify-content:center;align-self:end;height:100%;min-height:640px}
.hero-glow.glow{position:absolute;left:50%;top:44%;width:980px;height:980px;transform:translate(-50%,-50%)}
.hero-phone{--w:340px;position:absolute!important;bottom:-120px;left:50%;margin-left:-170px;rotate:4deg}
@media (max-width:1080px){
  .hero-phone{--w:300px;margin-left:-150px}
}
@media (max-width:900px){
  .hero{padding-top:110px}
  .hero-grid{grid-template-columns:1fr;gap:0;min-height:0}
  .hero .copy{justify-items:center;text-align:center;padding-bottom:40px}
  .hero .copy .lede{text-align:center}
  .hero .copy .ctas{justify-content:center}
  .hero-visual{min-height:520px}
  .hero-glow.glow{width:760px;height:760px;top:60%}
  .hero-phone{--w:280px;margin-left:-140px;bottom:-110px;rotate:0deg}
}
@media (max-width:640px){
  .hero-visual{min-height:440px}
  .hero-phone{--w:240px;margin-left:-120px;bottom:-90px}
}


/* =====================================================================
   Home hero — final: one screen tall, light paper, orange star, half a phone
   ===================================================================== */
.hero{--pw:min(360px,40svh,78vw);height:95vh;height:95svh;min-height:580px;padding:0;overflow:hidden;color:var(--ink);border-radius:0 0 var(--r-hero) var(--r-hero);--r-hero:clamp(30px,4.6vw,60px)}

/* The app's own header band, as Library, Browse and Settings draw it: the icon's orange,
   light and warm at the top left, deep at the bottom right, with the bottom corners rounded
   off (LibraryBand in App/LibraryViews.swift). It fills the hero, so the phone that hangs
   past the bottom is cut exactly where the orange ends.
   Text on it stays dark: white would fall to 1.8:1 against the light end of the sweep,
   while the ink below reads between 10.3:1 and 4.7:1 across the whole band. */
.hero-band{position:absolute;inset:0;z-index:0;border-radius:inherit;
  background:linear-gradient(108deg,#FFB04A 0%,#FA7824 52%,#E34A0F 100%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{height:100%;min-height:0;padding-top:68px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.hero .copy{padding-bottom:0}
.hero h1 em.s{color:#fff}
.hero .lede{color:var(--ink-2)}
.hero .req{color:#4A2410}
.hero .link{color:var(--ink)}
.hero .badge-top{background:#fff;color:var(--ink-2);box-shadow:0 0 0 1px var(--line)}
.hero-visual{position:relative;height:100%;min-height:0;align-self:stretch}
.hero-phone{--w:var(--pw);position:absolute!important;left:50%;bottom:0;margin-left:calc(var(--pw) / -2);rotate:0deg;transform:translateY(50%)}
.hero-phone.enter{animation:heroPhone 1.2s var(--ease) .25s both}
@keyframes heroPhone{from{opacity:0;transform:translateY(62%)}to{opacity:1;transform:translateY(50%)}}
.hero-star{position:absolute;left:50%;bottom:calc(var(--pw) * 1.08);width:calc(var(--pw) * 1.9);aspect-ratio:1;transform:translate(-50%,50%);filter:drop-shadow(0 30px 40px rgba(200,80,10,.28))}
.hero-star svg{width:100%;height:100%}
.hero-glow{display:none}
@media (max-width:900px){
  .hero{--pw:min(300px,34svh,70vw)}
  .hero-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:0;padding-top:96px;align-items:start}
  .hero .copy{justify-items:center;text-align:center}
  .hero .copy .lede{text-align:center}
  .hero .copy .ctas{justify-content:center}
  .hero-star{width:calc(var(--pw) * 1.7)}
}
@media (max-width:640px){
  .hero{--pw:min(250px,30svh,68vw)}
  .hero-grid{padding-top:84px}
  .hero .copy{gap:16px}
  .hero .copy h1{font-size:clamp(34px,9.5vw,46px)}
  .hero .lede{font-size:16px}
  .hero .copy .req{display:none}
}
@media (max-height:700px) and (min-width:901px){
  .hero .copy h1{font-size:clamp(40px,4.6vw,64px)}
}

/* hero: facts attached along the bottom, edge to edge ------------------ */
.hero{display:flex;flex-direction:column}
.hero-grid{flex:1;height:auto;min-height:0}
.hero-facts{position:relative;z-index:6;flex:none;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);border-top:1px solid var(--line)}
.hero-facts li{display:flex;align-items:center;justify-content:center;gap:14px;padding:24px 20px;font-size:15px;color:var(--muted);line-height:1.4}
.hero-facts li+li{border-left:1px solid var(--line)}
.hero-facts b{display:block;color:var(--ink);font-weight:600}
.hero-facts svg{width:22px;height:22px;flex:none;color:var(--accent)}
.reader-sec{margin-top:0}
@media (max-width:900px){
  .hero-facts{grid-template-columns:1fr 1fr}
  .hero-facts li{justify-content:flex-start;padding:16px 18px}
  .hero-facts li:nth-child(3){border-left:0}
  .hero-facts li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .hero-facts li{padding:12px 14px;font-size:13px;gap:10px}
  .hero-facts li div{font-size:0}
  .hero-facts li b{font-size:14px}
}
@media (max-width:900px){.hero-star{width:calc(var(--pw) * 1.3);bottom:calc(var(--pw) * .95)}}

/* Originals: even spacing between Features above and Privacy below */
.originals{padding:0 0 130px}
@media (max-width:640px){.originals{padding:0 0 90px}}

/* iPad section now follows the hero directly */
.ipad-sec{margin-top:0;padding-top:130px;border-radius:var(--r-lg) var(--r-lg) 0 0}
@media (max-width:640px){.ipad-sec{padding-top:90px;border-radius:28px 28px 0 0}}
.ipad-notes{list-style:none;margin:56px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);max-width:1000px;border-top:1px solid var(--night-line)}
.ipad-notes li{padding:24px 28px 0;display:grid;gap:6px;text-align:center}
.ipad-notes li+li{border-left:1px solid var(--night-line)}
.ipad-notes b{font-weight:600;font-size:17px}
.ipad-notes span{color:rgba(255,255,255,.58);font-size:15px;line-height:1.5}
@media (max-width:720px){.ipad-notes{grid-template-columns:1fr;margin-top:36px}.ipad-notes li{padding:18px 0}.ipad-notes li+li{border-left:0;border-top:1px solid var(--night-line)}}

/* screenshots gallery ------------------------------------------------- */
.shots{padding:130px 0 60px}
.shots-row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:start}
.shot{margin:0;display:grid;justify-items:center;gap:26px;text-align:center}
.shot .phone{--w:min(300px,100%)}
.shot:nth-child(2){margin-top:-30px}
.shot figcaption{display:grid;gap:6px;max-width:300px}
.shot figcaption b{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em}
.shot figcaption span{color:var(--ink-2);font-size:15.5px;line-height:1.5}
.shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hsec{padding:calc(var(--pt)*20) calc(var(--pt)*18) calc(var(--pt)*10);font:700 calc(var(--pt)*20)/1 var(--sans);letter-spacing:-.01em}
.hrow{display:flex;gap:calc(var(--pt)*10);padding:0 calc(var(--pt)*18);overflow:hidden}
.hrow .cov{flex:0 0 calc(var(--pt)*104)}
@media (max-width:900px){
  .shots-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78vw,300px);overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 24px 20px;margin:0 -24px;scrollbar-width:none}
  .shots-row::-webkit-scrollbar{display:none}
  .shot{scroll-snap-align:center}
  .shot:nth-child(2){margin-top:0}
}
@media (max-width:640px){.shots{padding:90px 0 40px}}
.shot .screen{text-align:left}.shot .prof .nb{text-align:center}

/* larger hero phone */
.hero{--pw:min(440px,52svh,80vw)}
@media (max-width:900px){.hero{--pw:min(340px,40svh,72vw)}}
@media (max-width:640px){.hero{--pw:min(280px,34svh,70vw)}}

/* hero phone sits higher; softer star */
.hero-phone{transform:translateY(32%)}
@keyframes heroPhone{from{opacity:0;transform:translateY(44%)}to{opacity:1;transform:translateY(32%)}}
.hero-star{bottom:calc(var(--pw) * 1.45);opacity:.35;filter:blur(1px) drop-shadow(0 20px 40px rgba(200,80,10,.12))}
@media (max-width:900px){.hero-star{bottom:calc(var(--pw) * 1.3)}}
@media (max-width:640px){.hero{--pw:min(250px,28svh,64vw)}}

/* contact forms sent by api/send.php */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form{position:relative}
.form button[disabled]{opacity:.6;cursor:progress}
.form.is-sending .btn{pointer-events:none}
.form-status{font-size:14.5px;padding:12px 16px;border-radius:12px}
.form-status.is-error{background:#fdecea;color:#9a2a1a}
.form-done{display:grid;justify-items:start;gap:10px;padding:18px 0}
.form-done .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft,#fde7d6);color:var(--accent)}
.form-done .ic svg{width:22px;height:22px}
.form-done h3{font:600 26px/1.2 var(--display,inherit);letter-spacing:-.02em}
.form-done p{color:var(--ink-2);max-width:44ch}
/* code blocks (source guide) */
.prose pre.code{margin:18px 0 22px;padding:18px 20px;border-radius:16px;background:#1b1612;color:#f4ece3;overflow-x:auto;font:500 13.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;-webkit-overflow-scrolling:touch}
.prose pre.code code{background:none;padding:0;color:inherit;font:inherit;white-space:pre}
.prose td code{white-space:nowrap}
.prose li code{overflow-wrap:anywhere}
.crumbs span{display:inline-flex;gap:8px}
/* phone frame from the iPhone Pro mockup (assets/device). Screen inset, corner radius and
   Dynamic Island are measured on the 660×1358 frame: screen 27/26/27/25 px, radius 90 px. */
.phone{aspect-ratio:660/1358;border-radius:calc(var(--w)*.15);padding:calc(var(--w)*.0394) calc(var(--w)*.0409) calc(var(--w)*.0379);background:url(/assets/device/iphone-pro.webp) center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 30px 40px rgba(40,22,10,.22)) drop-shadow(0 4px 8px rgba(40,22,10,.12))}
.phone .screen{border-radius:calc(var(--w)*.136)}
.phone::after{top:calc(var(--w)*.0742);width:27.7%;height:calc(var(--w)*.0758)}
.phone::before{content:"";position:absolute;inset:0;background:url(/assets/device/iphone-pro-glare.webp) center/100% 100% no-repeat;mix-blend-mode:screen;opacity:.35;pointer-events:none;z-index:6}

/* iPhone-style corners on the band: an iPhone's screen corner is a superellipse, not a
   quarter circle — the curve starts earlier and flattens into the edge instead of meeting
   it at a point. Written as superellipse(4) rather than the `squircle` keyword, which
   today's Chrome accepts but resolves to superellipse(2), i.e. an ordinary round corner.
   Browsers without corner-shape keep the plain radius, which is the same size. */
@supports (corner-shape: superellipse(4)){
  .hero{corner-shape:superellipse(4)}
}

/* ---------- screenshots that already carry their own device ----------------
   The renders in /assets/devices are iPhones on a transparent background, so they
   replace the frame the stylesheet draws rather than going inside it. */
.hero-device{
  position:absolute;left:50%;bottom:0;
  width:var(--pw);height:auto;margin-left:calc(var(--pw) / -2);
  transform:translateY(50%);
  filter:drop-shadow(0 30px 40px rgba(40,22,10,.22)) drop-shadow(0 4px 8px rgba(40,22,10,.12));
}
.hero-device.enter{animation:heroPhone 1.2s var(--ease) .25s both}
.device{
  display:block;width:min(300px,100%);height:auto;margin-inline:auto;
  filter:drop-shadow(0 24px 34px rgba(40,22,10,.18)) drop-shadow(0 3px 6px rgba(40,22,10,.10));
}

/* ---------- "Inside Kiyume" ------------------------------------------------
   The three screenshots stood on bare paper, with the middle one lifted 30px for
   rhythm — which, with real devices rather than drawn mocks, read as a mistake
   rather than as rhythm. They now sit on one warm panel, aligned on the same
   baseline, shaped like the cards the app uses. */
.shot:nth-child(2){margin-top:0}
.shots-stage{
  background:var(--bg-2);
  border-radius:var(--r-lg);
  padding:72px 56px 60px;
  margin-top:56px;
}
@supports (corner-shape: superellipse(4)){ .shots-stage{corner-shape:superellipse(4)} }
.shots-stage .shots-row{gap:48px;align-items:end}
.shot .device{width:min(320px,100%)}
.shot figcaption b{font-size:21px}
.shot figcaption span{color:var(--ink-2)}
@media (max-width:900px){
  /* The row scrolls sideways here, so the panel runs edge to edge instead of clipping
     the first phone against its own padding. */
  .shots-stage{padding:44px 0 36px;margin:40px -24px 0;border-radius:0}
  .shots-stage .shots-row{gap:0}
}
@media (max-width:640px){
  .shots-stage{padding:36px 0 30px}
}

/* ---------- navigation on a phone -----------------------------------------
   Under 900px the links used to be display:none and nothing replaced them: every page
   but Home and Download was unreachable from the header. They now fold into a panel. */
.menu-btn{display:none}
@media (max-width:900px){
  .menu-btn{
    display:grid;gap:5px;align-items:center;justify-items:center;
    width:44px;height:44px;margin-left:auto;border-radius:12px;
  }
  /* Both bars live at the centre and are pushed apart; opening brings them back and
     crosses them, which gives a true X instead of the lopsided arrow that transforming
     two stacked flow elements produces. */
  .menu-btn{position:relative}
  .menu-btn span{
    position:absolute;left:13px;top:calc(50% - 1px);
    width:18px;height:2px;border-radius:2px;background:var(--ink);
    transition:transform .25s var(--ease);
  }
  .menu-btn span:first-child{transform:translateY(-3.5px)}
  .menu-btn span:last-child{transform:translateY(3.5px)}
  .nav.open .menu-btn span:first-child{transform:rotate(45deg)}
  .nav.open .menu-btn span:last-child{transform:rotate(-45deg)}
  /* 32px of gap plus the pill's own margin pushed the button off the right edge
     on a 375px screen. */
  .nav .wrap{gap:10px}
  .nav .pill{margin-left:auto;order:2;padding:0 16px;font-size:14.5px}
  .menu-btn{order:3;margin-left:0}

  /* Full screen: the panel covers the page, so the links are the only thing to read. */
  .nav nav{
    display:none;position:fixed;inset:0;z-index:90;
    flex-direction:column;justify-content:center;align-items:center;gap:0;
    padding:88px 24px 24px;background:var(--bg);
  }
  .nav.open nav{display:flex}
  .nav nav a{
    width:100%;max-width:22rem;text-align:center;
    padding:18px 2px;font-family:var(--display);font-size:24px;font-weight:600;
    letter-spacing:-.02em;border-bottom:1px solid var(--line);
  }
  .nav nav a:last-child{border-bottom:0}
  .nav nav a[aria-current="page"]::after{display:none}
  .nav nav a[aria-current="page"]{color:var(--accent)}

  /* Apple asks for 44pt; the download pill was 38 and the footer links 18. */
  .nav .pill{min-height:44px;display:inline-flex;align-items:center}
  .site-foot nav a,.site-foot a{display:inline-block;padding:7px 0}
  .choice label{min-height:44px;display:inline-flex;align-items:center}
  .brand{min-height:44px}
}

/* ---------- phone: hero and the "Inside Kiyume" slides ---------------------
   The hero device was 227px wide on a 375px screen, with the copy stranded in the
   top third. It is now as wide as the screen allows and pushed further down, so it
   is cut more but reads as a device rather than a thumbnail; the copy keeps a clear
   gap above it. */
@media (max-width:900px){
  /* Full screen on a phone: 95svh left the copy and the device fighting over the same
     band of pixels once the two actions stacked. */
  .hero{--pw:min(360px,92vw,46svh);height:100svh}
  .hero-grid{padding-top:128px;align-content:start}
  .hero .copy{gap:20px;padding-bottom:0}
  .hero .copy .lede{max-width:22rem;margin-inline:auto}
  .hero-device{transform:translateY(54%)}
  @keyframes heroPhone{from{opacity:0;transform:translateY(66%)}to{opacity:1;transform:translateY(54%)}}
}
@media (max-width:640px){
  .hero{--pw:min(340px,94vw,44svh)}
  .hero-grid{padding-top:120px}
  /* Side by side the two just fill the width and stop reading as centred. */
  .hero .copy .ctas{flex-direction:column;gap:16px}
}

/* One screenshot at a time, with a sliver of the next so the row reads as a slider.
   The dots belong to the phone layout only, so they start hidden — declared before the
   media query, or the later rule would win and hide them everywhere. */
.slide-dots{display:none}
@media (max-width:900px){
  .shots-stage .shots-row{
    /* A slide is exactly the visible area of the row, so one device fills it with equal
       gutters and the next sits off-screen. Tied to the row's own width rather than to
       100vw, which is off by the scrollbar and by whatever the browser counts as the
       viewport. */
    grid-auto-columns:100%;
    gap:48px;
    padding:8px 24px 16px;
    scroll-padding-inline:24px;
  }
  .shot{scroll-snap-align:center}
  .shot .device{width:min(100%,320px)}
  .slide-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
  .slide-dots span{
    width:7px;height:7px;border-radius:50%;
    background:color-mix(in srgb, var(--ink) 18%, transparent);
    transition:background .25s,width .25s;
  }
  .slide-dots span.on{width:20px;border-radius:4px;background:var(--accent)}
}
@media (max-width:900px){
  /* The button has to stay above its own full-screen panel to close it. */
  .menu-btn{position:relative;z-index:95}
  .nav .brand{position:relative;z-index:95}
  .nav.open{background:var(--bg)}
}

/* ---------- phone, corrections from a real device ---------------------------
   On an actual iPhone the headline ran off both edges and the second action sat on
   top of the mockup. Neither showed in the preview pane, which reported a 407px
   viewport while claiming to emulate 375. */
@media (max-width:900px){
  /* The <br> forced "The manga reader that" onto one line, and at 37px that line is
     wider than a phone. The serif line keeps its own row through display:block, so
     the first phrase can wrap as the width requires. */
  .hero .copy h1{font-size:clamp(30px,8.2vw,46px);text-wrap:balance}
  .hero .copy h1 br{display:none}
  .hero .copy h1 em.s{display:block}

  /* The device is no longer positioned over the copy: it sits after it in the flow and
     is clipped by the hero's own edge. However tall the text becomes — a longer
     translation, a larger font — it can no longer be covered. */
  .hero-grid{display:flex;flex-direction:column;align-items:center;padding-bottom:0}
  .hero .copy{width:100%}
  .hero-device{
    position:static;flex:none;width:var(--pw);height:auto;
    margin:28px auto 0;transform:none;
  }
  .hero-device.enter{animation:heroDeviceIn 1s var(--ease) .25s both}
  @keyframes heroDeviceIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}
@media (max-width:900px){
  /* The row kept the negative margins it had when it ran edge to edge on its own. Inside
     the stage, which is already full-bleed, they stacked: 390px of screen, 454px of row,
     and the whole page scrolled sideways. */
  .shots-stage .shots-row{margin:0}
}
@media (max-width:900px){
  /* The stage reaches the edges by cancelling the wrap's gutter, which below this width
     is 16px and not the 24px it is elsewhere: with -24 the panel stuck out 8px on each
     side and the whole page scrolled sideways. */
  .shots-stage{margin-inline:-16px}
}
@media (min-width:641px) and (max-width:900px){
  /* Between these two widths the gutter is back to 24px. */
  .shots-stage{margin-inline:-24px}
}
@media (max-width:900px){
  /* Bigger again, and cut by the band as before — but in the flow with margin-top:auto,
     so it is pushed to the bottom of whatever space the copy leaves instead of being
     positioned over it. The overlap cannot come back. */
  .hero{--pw:min(400px,96vw)}
  .hero-device{margin:24px auto -130px}
}
@media (max-width:640px){
  .hero{--pw:min(380px,96vw)}
  .hero-device{margin:20px auto -150px}
}

/* ---------- header and menu on a phone, second pass ------------------------ */
@media (max-width:900px){
  /* Ten pixels between a 102px pill and the button read as cramped. */
  .nav .wrap{gap:16px}
  .nav .pill{padding:0 15px;font-size:14px}

  /* The panel carries the app's band instead of paper: opening the menu stays inside
     the same world as the hero behind it. Text stays dark — white on this orange falls
     to 1.8:1 at the light end. */
  .nav nav{
    background:linear-gradient(108deg,#FFB04A 0%,#FA7824 52%,#E34A0F 100%);
  }
  .nav nav a{color:var(--ink);border-bottom-color:rgba(22,17,13,.14)}
  .nav nav a[aria-current="page"]{color:#5A1E08}
  .nav.open{background:transparent}
  /* Over the band the bars of the button are dark like everything else. */
  .nav.open .menu-btn span{background:var(--ink)}
}
@media (max-width:900px){
  /* .hero-visual is a flex row, and a flex item stretches on the cross axis by default:
     the browser was setting the device's height from the container instead of from the
     image's own proportions, squashing it by a quarter. */
  .hero-device{align-self:start}
}

/* ---------- more device, less chrome, on a phone ---------------------------
   On a real iPhone only 275px of the mockup survived above the fold. Nothing here
   changes the words: it reclaims the padding, the gaps and the button sizes that
   were sized for a desktop. */
@media (max-width:900px){
  .hero-grid{padding-top:92px}
  .hero .copy{gap:14px}
  .hero .copy .lede{font-size:15.5px;line-height:1.45;max-width:21rem}
  .hero .copy .ctas{gap:10px;margin-top:4px}
  .hero .store{height:50px}
  .hero .copy .req{margin-top:0}
  .hero-device{margin-top:10px}
}
@media (max-width:640px){
  .hero-grid{padding-top:88px}
  .hero-device{margin-top:8px}
}

/* ---------- a shorter hero on a phone --------------------------------------
   The long sentence took four lines of a small screen, which is four lines the
   device does not get. Both versions are in the markup and one is hidden: no
   JavaScript, and a crawler reads the full one. */
.on-narrow{display:none}
@media (max-width:900px){
  .on-wide{display:none}
  .on-narrow{display:inline}
  /* The arrow link duplicated what a scroll already does, and cost a whole row. */
  .hero .copy .ctas .link{display:none}
}

/* ---------- the header's call to action ------------------------------------
   It only appears once the hero's own button has scrolled away, so the two are
   never on screen together. Everything is scoped under .cta-auto, a class the
   script adds: with JavaScript off the button simply stays visible. */
.nav .pill{border-radius:13px}
.cta-auto .nav .pill{
  opacity:0;transform:translateY(-6px) scale(.96);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.cta-auto .nav.cta-on .pill{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .cta-auto .nav .pill{transition:none}
}

/* ---------- a hero that breathes ---------------------------------------------
   More air between the lines, a heavier headline, and a button that reads as the
   one thing to press: bigger, with a lift that is a neutral shadow (no orange glow). */
@media (max-width:900px){
.hero .copy{gap:30px}
.hero .copy h1{font-weight:700;letter-spacing:-.035em;line-height:.98}
.hero .copy .lede{line-height:1.55}
.hero .copy .ctas{margin-top:10px}
.hero .store{height:64px;padding:0 30px 0 24px;border-radius:18px;gap:13px;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 14px 30px -10px rgba(30,14,4,.55),0 3px 8px rgba(30,14,4,.18);
  transition:background .25s,transform .25s var(--ease),box-shadow .25s var(--ease)}
.hero .store:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 20px 36px -10px rgba(30,14,4,.6),0 4px 10px rgba(30,14,4,.2)}
.hero .store svg{width:26px;height:26px}
.hero .store b{font-size:21px}
.hero .store small{font-size:12px}
  .hero-grid{padding-top:108px}
  .hero .copy{gap:20px}
  .hero .copy .ctas{margin-top:8px}
  .hero .store{height:58px;padding:0 26px 0 22px}
  .hero .store b{font-size:20px}
  .hero-device{transform:none;margin-top:34px}
}
@media (max-width:640px){
  .hero-grid{padding-top:104px}
  .hero-device{margin-top:30px}
}

/* ---------- menu after scrolling ---------------------------------------------
   The scrolled header has a backdrop-filter, which makes it the containing block of
   its position:fixed children: the full-screen menu was clipped to the 60px bar. */
@media (max-width:900px){
  .nav.open,.nav.solid.open{backdrop-filter:none;-webkit-backdrop-filter:none}
}