@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyah-sans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyah-sans-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyah-sans-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyah-sans-Black.woff2") format("woff2");font-weight:900;font-display:swap}
:root{
  --bg:#EFF7FC;--ink:#06283D;--muted:#3F5967;--line:#D2E3EE;--fill:#2272B8;--fill2:#0E7FA8;
  --field1:#A9DCF5;--field2:#A6CCF0;--field3:#BCE6F7;--surface:rgba(255,255,255,.66);--soft:#DBEBF6;
  --success:#08654C;--danger:#8E1230;--amber:#A85F00;
  --deep:#0F4F8C;--deep2:#0B6A8F;--on-deep:#F2FAFF;--on-deep-muted:#CFE6F5;
  --display:"Thmanyah Sans",system-ui,sans-serif;
  --body:"Thmanyah Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --hp:0;--en:1;--g:1;--dim:0;--land:0;--j:0;--x:0;--press:0;--pl:1;--pm:1;--cp:1;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#061722;--ink:#E4F2FA;--muted:#A6C2D2;--line:#1B3646;--fill:#6CC5F5;--fill2:#9ADBFA;
  --field1:#1B5E8C;--field2:#173C7A;--field3:#156A8E;--surface:rgba(255,255,255,.05);--soft:#11303F;
  --success:#5FE0B5;--danger:#FF8FA3;--amber:#F2B45A;
  --deep:#123F73;--deep2:#0F5574;--on-deep:#E9F6FF;--on-deep-muted:#C2DDEE;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--fill) var(--bg)}
html{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.75 var(--body);overflow-x:clip}
[lang=en] body,body:lang(en){line-height:1.6}
::selection{background:var(--fill);color:var(--bg)}
a{color:inherit}
:focus-visible{outline:2.5px solid currentColor;outline-offset:3px;border-radius:6px}
.pick .yes:focus-visible,.mlist button[aria-pressed=true]:focus-visible{outline-color:var(--fill)}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.2;letter-spacing:0;text-wrap:balance}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:60;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:10px;transform:translateY(-200%)}
.skip:focus{transform:none}

/* The character: one bubble, line eyes */
.ch{display:block;width:100%;height:auto;overflow:visible}
.ch .b{fill:var(--c,var(--fill))}
.ch .s{fill:url(#sheen)}
.ch .e{fill:none;stroke:var(--eye,var(--bg));stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}

/* Top bar sits over both halves */
.bar{position:absolute;inset-inline:0;top:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;padding:20px clamp(16px,3vw,40px);pointer-events:none}
.bar>*{pointer-events:auto}
.brand{display:inline-flex;align-items:center;gap:10px;font:800 22px/1 var(--display);text-decoration:none;color:var(--on-deep);justify-self:start;min-height:44px}
.brand svg{width:30px}
.bar .lang{justify-self:end;display:inline-flex;align-items:center;min-height:44px;padding-inline:6px;color:var(--ink);text-underline-offset:4px;font-size:16px}

/* Two grounds, one seam */
.split{position:relative;display:grid;grid-template-columns:1fr 1fr;isolation:isolate}
.side{position:relative;min-width:0}
.side.me{color:var(--on-deep)}
.ledger .side.me,.ground i:first-child{background:linear-gradient(150deg,var(--deep),var(--deep2))}
.ledger .side.them,.ground i:nth-child(2){background:
  radial-gradient(70% 60% at 20% 20%,var(--field1),transparent 70%),
  radial-gradient(60% 60% at 80% 85%,var(--field3),transparent 70%),
  var(--bg)}
.ground{position:fixed;inset:0;z-index:-1;display:grid;grid-template-columns:1fr 1fr}
.ground b{position:absolute;inset:0;background:linear-gradient(150deg,var(--deep),var(--deep2));opacity:var(--j)}
.rest,.foot{position:relative;background:var(--bg)}

/* Hero */
.hero{min-height:100svh;overflow:clip}
.hero .side{grid-row:1}
.hero .side.me{grid-column:1}
.hero .side.them{grid-column:2}
.hero-in{position:relative;grid-row:1;grid-column:1/-1;min-height:100svh;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;padding:96px 16px 40px;gap:24px;text-align:center}
.h-wrap{transform:translateY(calc(var(--hp)*-16vh));opacity:calc(1 - var(--hp)*1.7);position:relative;grid-row:1;align-self:end;width:100%;display:grid;justify-items:center;gap:20px}
.hl{position:relative;width:100%;font-size:clamp(2.3rem,min(6.1vw,11vh),6rem);line-height:1.22}
.hl .layer{display:block;white-space:nowrap}
[dir=ltr] .hl{font-size:clamp(1.25rem,5.6vw,5rem)}
.hl .tone{position:absolute;inset:0;pointer-events:none}
.hl .t-me{color:var(--on-deep);clip-path:inset(-20% 0 -20% 50%)}
.hl .t-them{color:var(--ink);clip-path:inset(-20% 50% -20% 0)}
.hl .base{color:transparent}
.hl .tone{user-select:none;-webkit-user-select:none}
[dir=ltr] .hl .t-me{clip-path:inset(-20% 50% -20% 0)}
[dir=ltr] .hl .t-them{clip-path:inset(-20% 0 -20% 50%)}
.hero-chars{transform:translateY(calc(var(--hp)*10vh)) scale(calc(1 - var(--hp)*.3));grid-row:2;position:relative;width:min(100%,920px);height:clamp(150px,27vh,260px);display:flex;justify-content:center;gap:clamp(44px,9vw,132px);align-items:center}
.hero-chars .pal{width:clamp(120px,22vh,212px);position:relative;animation:breath 5s ease-in-out infinite}
.hero-chars .pal.a{--c:#F2FAFF;--eye:#0F4F8C}
.hero-chars .pal.b{--c:var(--amber);--eye:var(--bg);animation-delay:-2.2s}
.hero-chars .pal svg{transition:transform .7s var(--ease)}
.loop-on .hero-chars .pal.a svg{transform:translateX(calc(var(--near)*-1*var(--d)))}
.loop-on .hero-chars .pal.b svg{transform:translateX(calc(var(--near)*var(--d)))}
.hero-chars{--near:0px;--d:1}
[dir=ltr] .hero-chars{--d:-1}
.hero-chars.met{--near:clamp(10px,3vw,40px)}
.h-pill{position:absolute;top:50%;left:50%;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#06283D;border-radius:99px;padding:8px 18px;font:700 15px/1.3 var(--display);white-space:nowrap;transform:translate(calc(-50% + var(--x,0px)),-50%) scale(var(--sc,.8));opacity:var(--op,0);transition:transform 1.1s var(--ease),opacity .4s;box-shadow:0 8px 26px -10px rgba(0,0,0,.35);z-index:4}
.hero-foot{grid-row:3;display:grid;justify-items:center;gap:14px;align-self:start;max-width:620px;position:relative;z-index:3;opacity:calc(1 - var(--hp)*2.4);transform:translateY(calc(var(--hp)*14vh))}
.lead{font-size:clamp(16px,1.5vw,19px);line-height:1.75;background:color-mix(in srgb,var(--bg) 88%,transparent);color:var(--ink);padding:12px 20px;border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;align-items:center}
.store{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 22px;border-radius:99px;background:var(--ink);color:var(--bg);font:700 16px/1 var(--display)}
.how{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 20px;border-radius:99px;background:color-mix(in srgb,var(--bg) 88%,transparent);color:var(--ink);text-decoration:none;font:600 16px/1 var(--display);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .3s var(--ease)}
.how:hover{transform:translateY(2px)}
.loop-btn[hidden]{display:none}
.calm *,.calm *::before,.calm *::after{animation-play-state:paused!important}
.loop-btn .i-play,.loop-btn.off .i-pause{display:none}
.loop-btn.off .i-play{display:block}
.loop-btn{position:absolute;bottom:18px;inset-inline-end:18px;z-index:5;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 80%,transparent);color:var(--ink);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* Seam */
.stage .seam{transform:scaleY(calc(1 - var(--j)));opacity:calc(1 - var(--j));transform-origin:center}
.ledger .seam{transform:scaleY(var(--pl))}
.seam{position:absolute;inset-block:0;left:50%;width:2px;margin-left:-1px;background:color-mix(in srgb,#fff 55%,transparent);z-index:6;transform-origin:top}
.seam i{position:absolute;inset:0;background:var(--amber);transform:scaleY(var(--p,0));transform-origin:top}

/* The story */
.story{height:1150svh;position:relative}
.stage{position:sticky;top:0;height:100svh;overflow:clip}
.stage .split{height:100%}
.stage .side{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(20px,3vw,56px);padding:clamp(20px,4vh,48px) clamp(20px,3.4vw,56px)}
.stage .side.them{grid-template-columns:auto minmax(0,1fr)}
.stage .them .caps{order:2}
.story.joined .side.them{color:var(--on-deep)}
.caps{position:relative;align-self:stretch;min-width:0}
.cap{position:absolute;inset-block:0;inset-inline:0;margin-block:auto;height:fit-content;opacity:0;pointer-events:none}
.cap.on{pointer-events:auto}
.who{display:block;font:600 14px/1.4 var(--display);margin-bottom:10px;opacity:.85}
.cap h2{font-size:clamp(1.6rem,3vw,2.9rem);margin-bottom:10px}
.cap p{font-size:clamp(15px,1.25vw,18px);line-height:1.75;max-width:34ch}
.cap .fine{font-size:14px;margin-top:10px;opacity:.85}
.cap .fine a{text-underline-offset:3px}
.pick{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;visibility:hidden}
.cap.on .pick{visibility:visible}
.pick button{min-height:48px;padding:0 22px;border-radius:99px;font:700 16px/1 var(--display);display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid color-mix(in srgb,var(--fill) 34%,transparent);transition:transform .25s var(--ease),background .25s}
.pick button.yes{background:var(--ink);color:var(--bg);border-color:transparent}
.pick button:hover{transform:translateY(-2px)}
.pick button:active{transform:scale(.97)}
.status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:12;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 16px;border-radius:99px;background:var(--ink);color:var(--bg);font:600 14px/1.2 var(--display);transition:background .4s;box-shadow:0 10px 30px -14px rgba(0,0,0,.4);font-variant-numeric:tabular-nums}
.status b{font-weight:600}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--bg);opacity:.5;transition:background .3s,opacity .3s}
.story.linked .status .dot{background:#5FE0B5;opacity:1}
.story.no .status .dot{background:#FF8FA3;opacity:1}
.fly{position:absolute;top:0;left:0;z-index:11;display:inline-flex;align-items:center;padding:8px 15px;border-radius:99px;background:#fff;color:#06283D;font:700 14px/1.2 var(--display);white-space:nowrap;transform:translate(calc(var(--fx,0px) - 50%),calc(var(--fy,0px) - 50%)) scale(var(--fs,1));opacity:var(--fo,0);box-shadow:0 14px 30px -12px rgba(0,0,0,.35);will-change:transform}

/* Phones. 1em scales with the phone. */
.phone{--pw:clamp(150px,min(23vw,calc((100svh - 72px)*.47)),330px);--sx:-1;--tilt:-7deg;--drift:1.6em;font-size:calc(var(--pw)/19);width:var(--pw);aspect-ratio:9/19;border-radius:3em;padding:.42em;background:#071C2A;box-shadow:0 2.4em 4.4em -1.8em rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.14);position:relative;line-height:1.35;color:var(--ink);transform:translate(calc(var(--j)*var(--sx)*var(--drift)),calc((1 - var(--en))*36%)) rotate(calc((1 - var(--en))*var(--tilt))) scale(calc(.92 + var(--en)*.08));will-change:transform}
.phone[data-me=n]{--sx:1;--tilt:7deg}
[dir=ltr] .phone{--sx:1;--tilt:7deg}
[dir=ltr] .phone[data-me=n]{--sx:-1;--tilt:-7deg}
.phone::before{content:"";position:absolute;z-index:5;top:.95em;left:50%;transform:translateX(-50%);width:5.2em;height:1.4em;border-radius:1em;background:#071C2A}
.scr{position:relative;width:100%;height:100%;border-radius:2.6em;overflow:hidden;background:
  radial-gradient(110% 34% at 0 0,color-mix(in srgb,var(--field1) 60%,transparent),transparent 72%),
  radial-gradient(110% 34% at 100% 100%,color-mix(in srgb,var(--field3) 50%,transparent),transparent 72%),
  var(--bg)}
.view{position:absolute;inset:0;padding:3.2em 1em 1em;display:flex;flex-direction:column;gap:.75em;opacity:0;transition:opacity .35s;pointer-events:none}
.view.on{opacity:1}
.apptop{display:flex;align-items:center;gap:.4em;font:900 1.5em/1 var(--display)}
.apptop .lg{width:1.25em;display:block}
.stats{display:flex;gap:.45em}
.stats span{flex:1;aspect-ratio:1;max-width:2.7em;display:grid;place-items:center;border-radius:50%;padding:.3em;background:var(--surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fill) 18%,transparent);font:700 1.05em/1 var(--display)}
.bigmsg{margin:auto;display:grid;justify-items:center;gap:.65em;text-align:center}
.bigmsg>span{width:6.4em;display:block}
.bigmsg b{font:900 1.45em/1.25 var(--display)}
.bigmsg small{font-size:1.05em;color:var(--muted)}
.pillbtn{text-align:center;padding:.85em;border-radius:99em;background:color-mix(in srgb,var(--fill) calc(24% + var(--press)*40%),var(--surface));font:700 1.1em/1 var(--display);transform:scale(calc(1 - var(--press)*.05))}
.moods{display:flex;justify-content:center;gap:.4em}
.moods span{width:2.4em;padding:.25em;border-radius:50%;background:var(--surface)}
.moods span.on{box-shadow:0 0 0 .13em var(--fill)}
.sess{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:.5em;padding:.6em .9em;border-radius:99em;background:color-mix(in srgb,var(--fill) 16%,var(--surface));font:600 1.02em/1 var(--display)}
.sess i{width:.55em;height:.55em;border-radius:50%;background:var(--success)}
.tabs{display:flex;justify-content:space-between;padding:.3em;border-radius:99em;background:var(--surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fill) 14%,transparent);font-size:1.25em}
.tabs span{flex:1;display:grid;place-items:center;padding:.38em;border-radius:99em;color:var(--muted)}
.tabs span.on{color:var(--ink);background:color-mix(in srgb,var(--fill) 22%,transparent)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55em .3em}
.tile{--k:clamp(0,calc(var(--g)*3.2 - var(--i)*.24),1);display:grid;justify-items:center;gap:.1em;font-size:1em;font-weight:500;min-width:0;opacity:calc(var(--k)*(1 - var(--dim)*.72));transform:translateY(calc((1 - var(--k))*1.2em)) scale(calc(.72 + var(--k)*.28))}
.tile span{white-space:nowrap}
.tile svg{width:3.7em;animation:breath 4.5s ease-in-out infinite;animation-delay:calc(var(--i)*-.7s)}
.phone[data-me=n] .tile{opacity:var(--k)}
.tile.sel{opacity:var(--k);transform:translateY(calc((1 - var(--k))*1.2em)) scale(calc(.72 + var(--k)*.28 + var(--dim)*.14))}
.send,.wait{position:absolute;inset-inline:1em;bottom:6.9em;display:flex;justify-content:center;font-size:1em}
.send{opacity:calc(var(--dim)*(1 - var(--land)));transform:translateY(calc((1 - var(--dim))*.6em))}
.send span{padding:.55em .95em;border-radius:99em;background:var(--ink);color:var(--bg);font:700 1.02em/1 var(--display)}
.wait{opacity:var(--land);color:var(--muted);font-weight:500}
.ask-v{background:var(--bg);clip-path:circle(calc(var(--land)*130%) at 50% 42%)}
.view.ask-v.on{opacity:1;transition:none}
.ask{margin:auto;display:grid;justify-items:center;gap:.7em;text-align:center}
.ringwrap{position:relative;width:9.6em}
.ringwrap svg.r{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ringwrap circle{fill:none;stroke-width:3;stroke:var(--line)}
.ringwrap circle.v{stroke:var(--fill);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--ring,0)}
.ringwrap>span{display:block;width:6em;margin:1.8em}
.ask b{font:900 1.4em/1.2 var(--display)}
.acts-m{display:flex;gap:.6em}
.acts-m span{width:2.9em;height:2.9em;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-size:1.1em}
.acts-m span:first-child{background:var(--success);color:var(--bg)}
.head{display:flex;align-items:center;gap:.5em;font:700 1.2em/1 var(--display);padding-bottom:.65em;border-bottom:1px solid var(--line);opacity:calc(1 - var(--x))}
.head>span{width:1.8em;display:block}
.head small{margin-inline-start:auto;font:500 .78em/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.chat{flex:1;display:flex;flex-direction:column;gap:.7em;font-size:1.1em;min-height:0}
.msg{--mc:var(--amber);padding-inline-start:.65em;border-inline-start:.2em solid var(--mc);opacity:0;transform:translateY(.7em) scale(.96);transform-origin:top;transition:opacity .3s,transform .45s var(--ease);display:none}
.msg[data-by=s]{--mc:var(--fill)}
.msg b{display:block;font:700 .82em/1.3 var(--display);color:var(--mc)}
.msg.on{display:block;opacity:1;transform:none}
.typing{display:none;gap:.28em;padding:.55em .7em;width:fit-content;border-radius:1em;background:var(--surface)}
.typing.on{display:flex}
.typing i{width:.42em;height:.42em;border-radius:50%;background:var(--muted);animation:dot 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
.ended{position:absolute;inset:0;display:grid;place-items:center;font:700 1.15em/1.4 var(--display);color:var(--muted);opacity:var(--x);pointer-events:none}
.comp{display:flex;align-items:flex-end;gap:.4em;opacity:calc(1 - var(--x))}
.comp .cam,.comp .sendb{width:2.5em;height:2.5em;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--surface);font-size:1em}
.comp .ic{width:1.25em;height:1.25em}
.comp .sendb{transition:background .2s,color .2s,transform .25s var(--ease)}
.comp.hot .sendb{background:var(--ink);color:var(--bg);transform:scale(1.06)}
.field{flex:1;min-width:0;min-height:2.5em;display:flex;align-items:center;padding:.4em .8em;border-radius:1.25em;background:var(--surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fill) 16%,transparent);overflow:hidden}
.draft{font-size:1.02em;line-height:1.3;color:var(--muted)}
.comp.hot .draft{color:var(--ink)}

/* What crosses and what never does */
.bare{padding-block:clamp(72px,12vh,140px)}
.bare h2{font-size:clamp(1.8rem,3.6vw,3.3rem);max-width:15em}
.bare-head{padding:clamp(72px,12vh,130px) clamp(20px,5vw,72px) 0;display:grid;gap:12px;max-width:1200px;margin-inline:auto}
.bare-head p{color:var(--muted);max-width:56ch}
.ledger{margin-top:clamp(36px,6vh,64px);overflow:clip}
.ledger .side.me{transform:translateX(calc((1 - var(--pl))*var(--dir)*-9%))}
.ledger .side.them{transform:translateX(calc((1 - var(--pl))*var(--dir)*-9%))}
.ledger .side{padding:clamp(32px,6vh,72px) clamp(20px,5vw,72px)}
.ledger h3{font-size:clamp(1.2rem,2vw,1.7rem);margin-bottom:22px}
.ledger li{font:700 clamp(1.3rem,3.2vw,2.5rem)/1.3 var(--display);padding-block:10px;opacity:0;transform:translateX(calc(var(--dir)*40px));transition:opacity .7s,transform 1s var(--ease);transition-delay:calc(var(--i)*70ms)}
.ledger{--dir:-1}
[dir=ltr] .ledger{--dir:1}
.ledger .side.them{--dir:1}
[dir=ltr] .ledger .side.them{--dir:-1}
.ledger.in li{opacity:1;transform:none}
.nope li{display:flex;align-items:center;gap:14px}
.nope li span{position:relative;display:inline-block}
.nope li span::after{content:"";position:absolute;inset-inline:-3%;top:calc(50% - .05em);height:.1em;background:var(--danger);border-radius:1em;transform:scaleX(0);transform-origin:var(--from,right);transition:transform .9s var(--ease);transition-delay:calc(var(--i)*110ms + .35s)}
[dir=ltr] .nope li span::after{--from:left}
.ledger.in .nope li span::after{transform:scaleX(1)}
.note{max-width:1200px;margin:28px auto 0;padding-inline:clamp(20px,5vw,72px);font-size:15px;color:var(--muted)}
.note p+p{margin-top:8px}
.note p{max-width:78ch}

/* Moods */
.moodsec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,80px);max-width:1200px;margin-inline:auto;padding:clamp(72px,12vh,140px) clamp(20px,5vw,72px)}
.moodsec h2{font-size:clamp(1.8rem,3.6vw,3.3rem);margin-bottom:14px}
.moodsec>div>p{color:var(--muted);max-width:42ch}
.mlist{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.mlist button{min-height:44px;padding:0 18px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font:600 15px/1 var(--display);transition:background .25s,color .25s}
.mlist button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:transparent}
.bigwrap{transform:translateY(calc((1 - var(--pm))*90px)) rotate(calc((1 - var(--pm))*-14deg)) scale(calc(.72 + var(--pm)*.28))}
.bigch{width:min(100%,380px);margin-inline:auto;--c:var(--fill)}
.bigch.m0{animation:breath 5s ease-in-out infinite}
.bigch.m1{animation:bounce 1.5s var(--ease) infinite}
.bigch.m2{animation:sway 6s ease-in-out infinite}
.bigch.m3{animation:hop .75s ease-in-out infinite}
.bigch.m4{animation:sigh 5s ease-in-out infinite}
.bigch.m5{animation:lean 2.2s ease-in-out infinite}
.bigch path.e{transition:d .4s var(--ease)}

/* Plans */
.plans{max-width:1200px;margin-inline:auto;padding:0 clamp(20px,5vw,72px) clamp(72px,12vh,130px)}
.plans h2{font-size:clamp(1.8rem,3.6vw,3.3rem);margin-bottom:28px}
.tw{overflow-x:auto}
.plans table{width:100%;min-width:480px;border-collapse:collapse;font-size:17px;font-variant-numeric:tabular-nums}
.plans th,.plans td{padding:16px 12px;text-align:start;border-bottom:1px solid var(--line)}
.plans thead th{font:800 20px/1.3 var(--display)}
.plans thead small{display:block;font:500 14px/1.4 var(--body);color:var(--muted)}
.plans tbody th{font-weight:500;color:var(--muted)}
.plans tbody th .ic{font-size:20px;vertical-align:-4px;margin-inline-end:10px;color:var(--fill)}
.plans .sh,.plan-note{display:none}

/* Close */
.close{position:relative;min-height:88svh;display:grid;place-content:center;justify-items:center;gap:22px;text-align:center;padding:64px 20px;color:var(--on-deep);overflow:hidden}
.close::before{content:"";position:absolute;inset:0;background:linear-gradient(150deg,var(--deep),var(--deep2));clip-path:circle(calc(var(--cp)*125%) at 50% 55%)}
.close>*{position:relative;opacity:clamp(0,calc(var(--cp)*2.6 - .9),1);transform:scale(calc(.82 + var(--cp)*.18))}
.close svg.logo{width:clamp(120px,18vw,190px);--c:#F2FAFF;--eye:#0F4F8C}
.close h2{font-size:clamp(3rem,10vw,6rem);line-height:1.1}
.close .store{background:var(--on-deep);color:#0F4F8C}
.close small{font-size:15px;color:var(--on-deep-muted)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding:22px clamp(20px,5vw,72px) 30px;font-size:15px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot a{text-underline-offset:3px;display:inline-block;padding-block:6px}

@keyframes dot{50%{transform:translateY(-.22em);opacity:.5}}
@keyframes breath{50%{transform:translateY(-5px) scale(1.012)}}
@keyframes bounce{0%,100%{transform:none}30%{transform:translateY(-14px)}}
@keyframes sway{50%{transform:rotate(-3deg) translateY(5px)}}
@keyframes hop{50%{transform:translateY(-16px)}}
@keyframes sigh{50%{transform:translateX(9px)}}
@keyframes lean{0%,70%,100%{transform:none}82%{transform:rotate(-6deg) translateY(-8px)}}

/* Without the script the story reads as a list */
html:not(.js) .story{height:auto}
html:not(.js) .stage{position:static;height:auto}
html:not(.js) .stage .split{grid-template-columns:1fr}
html:not(.js) .loop-btn,html:not(.js) .mlist,html:not(.js) .bigch,html:not(.js) .hero-chars,html:not(.js) .phone,html:not(.js) .status,html:not(.js) .fly,html:not(.js) .pick,html:not(.js) .seam{display:none}
html:not(.js) .stage .side,html:not(.js) .stage .side.them{display:block}
html:not(.js) .cap{position:static;opacity:1;transform:none;margin-bottom:28px}
html:not(.js) .ledger li{opacity:1;transform:none}

@media (max-width:820px){
  body{font-size:17px}
  .hero{grid-template-columns:1fr 1fr}
  .hl{font-size:clamp(1.5rem,7.5vw,4rem)}
  [dir=ltr] .hl{font-size:clamp(1.2rem,5.6vw,3rem)}
  .hero-chars .pal{width:clamp(96px,27vw,170px)}
  .hero-chars{height:clamp(110px,30vw,200px);gap:clamp(36px,12vw,90px)}
  .hero-in{padding-top:84px;gap:14px}
  .h-pill{font-size:13px;padding:6px 12px}
  .stage .split{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
  .stage .side,.stage .side.them{grid-template-columns:1fr;grid-template-rows:minmax(0,var(--caph,240px)) auto;align-content:center;padding:56px 10px 18px;gap:10px;justify-items:center}
  .stage .them .caps{order:0}
  .caps{width:100%}
  .cap{inset-block:auto 0;margin:0}
  .who{font-size:13px;margin-bottom:4px}
  .cap h2{font-size:19px;margin-bottom:4px}
  .cap p{font-size:14px;line-height:1.55}
  .cap .fine{font-size:12.5px;margin-top:4px}
  .pick{margin-top:8px;gap:6px}
  .pick button{min-height:44px;padding:0 14px;font-size:14px}
  .phone{--pw:min(45vw,calc((100svh - var(--caph,150px) - 104px)*.47),230px)}
  .phone{--drift:.8em}
  .status{top:14px;transform:translateX(-50%);font-size:12.5px;padding:6px 12px}
  .fly{font-size:12.5px;padding:7px 12px}
  .ledger{grid-template-columns:1fr}
  .tw{overflow:visible}
  .plans table,.plans thead,.plans tbody{display:block;min-width:0}
  .plans tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line);padding-block:12px}
  .plans thead tr{position:sticky;top:0}
  .plans thead td{display:none}
  .plans th,.plans td{padding:0;border:0;text-align:center}
  .plans thead th{font-size:17px}
  .plans thead small{white-space:nowrap;font-size:12.5px}
  .plans tbody th{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:8px;font:700 14.5px/1.3 var(--display)}
  .plans tbody th .ic{margin:0;font-size:18px}
  .plans tbody td{font:700 15px/1.3 var(--display)}
  .plans .lg{display:none}
  .plans .sh{display:inline}
  .plan-note{display:block;margin-top:14px;text-align:center;font-size:14px;color:var(--muted)}
  .moodsec{grid-template-columns:1fr}
  .bigch{width:min(68%,280px)}
  .seam.long{display:none}
  .ledger .seam{display:none}
}
@media (max-width:820px) and (max-height:680px){
  .stage .side,.stage .side.them{padding:48px 8px 12px;gap:6px}
  .who{font-size:12px;margin-bottom:2px}
  .cap h2{font-size:16px;margin-bottom:2px}
  .cap p{font-size:12.5px;line-height:1.45}
  .cap .fine{font-size:11.5px}
  .pick button{min-height:44px;padding:0 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}