/* JipJip — the site in the app's Paper look: paper page, ink type, black flap-board bands, and the
   lit switch's yellow kept for what matters. Colours are Paper.swift's; type is the app's own fonts,
   self-hosted (SIL OFL 1.1 — assets/fonts/OFL.txt, built by scripts/build-site-fonts.sh). */
@font-face{font-family:"JJ Fraunces";src:url(fonts/fraunces-semibold.woff2?v=3) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JJ Fraunces";src:url(fonts/fraunces-medium.woff2?v=3) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JJ Inter";src:url(fonts/inter-semibold.woff2?v=3) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JJ Inter";src:url(fonts/inter-medium.woff2?v=3) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JJ Inter";src:url(fonts/inter-regular.woff2?v=3) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JJ Mono";src:url(fonts/jbmono-medium.woff2?v=3) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JJ Mono";src:url(fonts/jbmono-bold.woff2?v=3) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JJ Mono";src:url(fonts/jbmono-extrabold.woff2?v=3) format("woff2");font-weight:800;font-display:swap}
:root{
  --paper:#F2EDE4; --paper2:#E8E1D5; --card:#FBF8F3; --ink:#141311; --ink2:#5E5850; --line:#D9D1C3;
  --board:#161514; --flap:#232120; --flap-top:#2B2826; --flap-text:#F6F1E6; --label:#8C857B; --on-board:#B3AB9F;
  --on:#FFB800; --on-deep:#D99A00; --red:#E5483B; --dash:#C4BAA9;
  --r:20px;
  --ledge:0 2px 0 rgba(0,0,0,.08);
  --shadow:0 24px 50px -28px rgba(20,19,17,.4);
  --serif:"JJ Fraunces",Georgia,"Times New Roman",serif;
  --font:"JJ Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JJ Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.6;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}

/* ---------- header ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
.nav.scrolled{background:var(--paper);box-shadow:0 1px 0 var(--line)}
.nav-in{width:min(1180px,100% - 32px);margin-inline:auto;height:72px;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:23px;letter-spacing:-.03em;color:var(--ink)}
.brand img{border-radius:10px}
.nav-links{display:flex;gap:28px;margin-left:auto;font-size:15px;font-weight:500;color:var(--ink2)}
.nav-links a{position:relative;padding:6px 0;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--on);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:600;transition:transform .2s,box-shadow .2s}
.btn-sm{height:40px;padding:0 20px;font-size:14px}
/* The lit switch: yellow with its deeper edge, the way the app draws the track when connected. */
.btn-on{background:var(--on);color:var(--ink);box-shadow:inset 0 0 0 1px var(--on-deep),0 2px 0 var(--on-deep)}
.btn-on:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--on-deep),0 3px 0 var(--on-deep)}

/* ---------- hero ---------- */
.hero{position:relative;padding:150px 0 120px;background:var(--paper);overflow:hidden;overflow:clip}
/* Clip sideways only, so the phones' soft shadow runs on into the next section instead of ending in a line. */
@supports (overflow:clip){.hero{overflow:visible;overflow-x:clip}}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.blob{position:absolute;border-radius:50%}
.b1{width:620px;height:620px;right:-140px;top:-60px;background:radial-gradient(circle,rgba(255,184,0,.2),transparent 68%)}
.b2{width:460px;height:460px;left:-200px;top:300px;background:radial-gradient(circle,rgba(217,209,195,.75),transparent 70%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1px var(--line),var(--ledge);border-radius:999px;padding:9px 15px;margin-bottom:24px}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--on);box-shadow:0 0 0 4px rgba(255,184,0,.25)}
h1{font-family:var(--serif);font-size:clamp(40px,5.4vw,68px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-weight:600}
/* The name is always set in the wordmark's upright Inter, as the logo and the app set it: Fraunces' swash
   capital J leans, and "JipJip" in it reads as tilted. */
.wm{font-family:var(--font);font-weight:600;letter-spacing:-.03em;font-size:.94em}
.h1-a{display:block}
/* a highlighter stroke in the switch's yellow */
.h1-b{background:linear-gradient(transparent 58%,var(--on) 58%,var(--on) 90%,transparent 90%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}
.lead{margin-top:22px;font-size:18px;color:var(--ink2);max-width:540px}
.store-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.store-row-center{justify-content:center}
.store{display:inline-flex;align-items:center;gap:11px;height:58px;padding:0 20px 0 12px;border-radius:14px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.store-tx{display:flex;flex-direction:column;line-height:1.1;text-align:left;white-space:nowrap}
.store small{font:700 10px/1.2 var(--mono);letter-spacing:.08em}
.store b{font-size:18px;font-weight:600;letter-spacing:-.01em}
a.store:hover{transform:translateY(-3px)}
/* Google's mark sits on an ink coin (the app's coin), so its yellow quarter stays visible on our yellow. */
.store-coin{width:36px;height:36px;flex:none;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.store-coin svg{width:20px;height:20px}
.store-on{background:var(--on);color:var(--ink);box-shadow:inset 0 0 0 1px var(--on-deep),0 3px 0 var(--on-deep)}
.store-on:hover{box-shadow:inset 0 0 0 1px var(--on-deep),0 5px 0 var(--on-deep)}
/* Not on the App Store yet: an outline that reads as unavailable and is not a link. */
.store-soon{padding-left:16px;color:var(--ink2);border:1.5px dashed var(--dash);cursor:default}
.meta{margin-top:18px;font-size:13.5px;color:var(--ink2)}

/* coming-soon platforms */
.soon-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.soon-label{font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-right:4px}
.soon{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:11px;border:1.5px dashed var(--dash);color:var(--ink2);font-size:14px;cursor:default}
.soon b{font-weight:500}
.soon-row-light{justify-content:center;margin-top:22px}
.soon-row-light .soon-label{color:var(--label)}
.soon-row-light .soon{border-color:#4A4643;color:var(--on-board)}

/* device stage */
.stage{position:relative;height:600px}
.layer{position:absolute;inset:0;will-change:transform}
/* --u is one point of the app's 390-point-wide phone layout, so every size below is the app's own. */
.phone{--u:.6615px;position:absolute;width:280px;height:580px;border-radius:46px;background:#141311;padding:11px;box-shadow:0 50px 90px -30px rgba(20,19,17,.5),inset 0 0 0 2px #2B2826}
.phone::before{content:"";position:absolute;top:20px;left:50%;width:92px;height:26px;margin-left:-46px;border-radius:20px;background:#141311;z-index:3}
.screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#F2EDE4}
.phone-front{left:44%;top:6px;transform:rotate(6deg)}
.phone-back{left:6%;top:60px;transform:rotate(-8deg);opacity:.98}

/* Paper screens — the app as it ships (Paper.swift palette, HomeScreen / NodeListScreen layout) */
.pp{display:flex;flex-direction:column;padding:calc(var(--u)*58) calc(var(--u)*20) calc(var(--u)*30);color:#141311;font-family:"JJ Inter",var(--font);font-weight:500;line-height:1.2;text-align:left}
.pp svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.pp-bar{display:flex;align-items:center;justify-content:space-between;flex:none}
.pp-ib{width:calc(var(--u)*44);height:calc(var(--u)*44);border-radius:50%;background:#FBF8F3;box-shadow:inset 0 0 0 1px #D9D1C3,0 calc(var(--u)*2) 0 rgba(0,0,0,.08);display:grid;place-items:center}
.pp-ib svg{width:calc(var(--u)*21);stroke-width:1.9}
.pp-pill{display:flex;align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*44);padding:0 calc(var(--u)*14);border-radius:999px;background:#FBF8F3;box-shadow:inset 0 0 0 1px #D9D1C3,0 calc(var(--u)*2) 0 rgba(0,0,0,.08);font-weight:600;font-size:calc(var(--u)*13);white-space:nowrap}
.pp-pill svg{width:calc(var(--u)*15);stroke-width:2.6}

/* server list */
.pp-title{font-family:"JJ Fraunces",Georgia,serif;font-weight:600;font-size:calc(var(--u)*40);letter-spacing:-.01em;line-height:1.1;margin:calc(var(--u)*18) 0}
.pp-row{display:flex;align-items:center;gap:calc(var(--u)*14);padding:calc(var(--u)*13) calc(var(--u)*14)}
.pp-row-card,.pp-card{background:#FBF8F3;border-radius:calc(var(--u)*20);box-shadow:inset 0 0 0 1px #D9D1C3,0 calc(var(--u)*2) 0 rgba(0,0,0,.08)}
.pp-row-card{box-shadow:inset 0 0 0 calc(var(--u)*1.6) #141311,0 calc(var(--u)*2) 0 rgba(0,0,0,.08);margin-bottom:calc(var(--u)*14)}
.pp-card{border-radius:calc(var(--u)*22)}
.pp-sep{height:1px;background:#D9D1C3;margin-left:calc(var(--u)*62)}
.pp-coin{width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:50%;flex:none;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(20,19,17,.12)}
.pp-coin-auto{background:#141311;color:#F2EDE4}
.pp-coin-auto svg{width:calc(var(--u)*22);stroke-width:1.9}
.pp-flag-jp{background:radial-gradient(circle,#BC002D 0 29%,#fff 31%)}
.pp-flag-sg{background:linear-gradient(#EF3340 50%,#fff 50%)}
.pp-rt{display:flex;flex-direction:column;gap:calc(var(--u)*2);flex:1;min-width:0}
.pp-rt b{font-family:"JJ Fraunces",Georgia,serif;font-weight:500;font-size:calc(var(--u)*19);white-space:nowrap}
.pp-rt small{font-size:calc(var(--u)*13);color:#5E5850;white-space:nowrap}
.pp-check{width:calc(var(--u)*24);height:calc(var(--u)*24);border-radius:50%;background:#141311;color:#F2EDE4;display:grid;place-items:center;flex:none}
.pp-check svg{width:calc(var(--u)*16);stroke-width:3}

/* home */
.pp-centre{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:calc(var(--u)*56)}
.pp-word{font-weight:600;font-size:calc(var(--u)*52);letter-spacing:-.03em;line-height:1}
.pp-tg{width:calc(var(--u)*245);height:calc(var(--u)*115);margin-top:calc(var(--u)*30)}
.pp-tg-in{position:relative;width:calc(var(--u)*196);height:calc(var(--u)*92);transform:scale(1.25);transform-origin:0 0}
.pp-track{position:absolute;inset:0;border-radius:999px;overflow:hidden;background:#E8E1D5;box-shadow:inset 0 0 0 calc(var(--u)*1.2) #D9D1C3;transition:background-color .34s ease-out,box-shadow .34s ease-out}
.pp-track::before{content:"";position:absolute;inset:0;opacity:0;background:repeating-linear-gradient(135deg,rgba(20,19,17,.85) 0 calc(var(--u)*7.8),#FFB800 0 calc(var(--u)*18.4));background-size:calc(var(--u)*26) calc(var(--u)*26);transition:opacity .2s}
.pp-track::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,0) 35%,rgba(255,255,255,.18))}
.pp-knob{position:absolute;top:calc(var(--u)*8);left:calc(var(--u)*8);width:calc(var(--u)*76);height:calc(var(--u)*76);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff,#E9E3D8 70%);box-shadow:inset 0 0 0 1px #D3CABB,0 calc(var(--u)*4) 0 rgba(0,0,0,.22),0 calc(var(--u)*8) calc(var(--u)*14) rgba(0,0,0,.12);transition:transform .55s cubic-bezier(.34,1.5,.64,1)}
.pp-knob-in{position:absolute;inset:calc(var(--u)*10);border-radius:50%;background:radial-gradient(circle at 65% 70%,#FBF8F2,#EDE7DC);box-shadow:inset 0 0 0 calc(var(--u)*1.2) #DCD4C6}
.pp-power{position:relative;width:calc(var(--u)*26);stroke-width:2.7;color:#141311;transition:color .3s}
.pp-cap{margin-top:calc(var(--u)*14);min-height:calc(var(--u)*13);font:700 calc(var(--u)*10.5)/1.2 "JJ Mono",ui-monospace,monospace;letter-spacing:calc(var(--u)*1.4);color:#9A9286}
[data-phase=connecting] .pp-track{background:#FFB800}
[data-phase=connecting] .pp-track::before{opacity:1;animation:pp-hazard .9s linear infinite}
[data-phase=on] .pp-track{background:#FFB800;box-shadow:inset 0 0 0 calc(var(--u)*1.2) #D99A00}
[data-phase=on] .pp-knob,[data-phase=connecting] .pp-knob{transform:translateX(calc(var(--u)*104))}
[data-phase=on] .pp-power{color:#A87400}
@keyframes pp-hazard{to{background-position:calc(var(--u)*26) 0}}

/* the black split-flap panel */
.pp-panel{flex:none;background:#161514;border-radius:calc(var(--u)*22);padding:calc(var(--u)*14) calc(var(--u)*16) calc(var(--u)*16);box-shadow:0 calc(var(--u)*3) 0 rgba(0,0,0,.2),0 calc(var(--u)*14) calc(var(--u)*24) rgba(0,0,0,.12)}
.pp-lbl{font:700 calc(var(--u)*10.5)/1 "JJ Mono",ui-monospace,monospace;letter-spacing:calc(var(--u)*1.4);color:#8C857B;padding-bottom:calc(var(--u)*7)}
.pp-wf{position:relative;display:flex;align-items:center;gap:calc(var(--u)*8);height:calc(var(--u)*46);padding:0 calc(var(--u)*12);margin-bottom:calc(var(--u)*14);border-radius:calc(var(--u)*8);background:linear-gradient(#2B2826,#232120);perspective:calc(var(--u)*300)}
.pp-wf::after,.pp-cells i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#000}
.pp-wtx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;font-family:"JJ Fraunces",Georgia,serif;font-weight:600;font-size:calc(var(--u)*24);line-height:1;color:#F6F1E6;transform-origin:50% 50%}
.pp-server{font-weight:500;font-size:calc(var(--u)*22)}
[data-phase=on] .pp-status{color:#FFB800}
.pp-lamp{width:calc(var(--u)*10);height:calc(var(--u)*10);margin-right:calc(var(--u)*6);border-radius:50%;background:#4A4643;flex:none}
[data-phase=connecting] .pp-lamp{background:#FFB800;animation:pp-blink 1.04s ease-in-out infinite}
[data-phase=disconnecting] .pp-lamp{background:#8C857B;animation:pp-blink 1.04s ease-in-out infinite}
[data-phase=on] .pp-lamp{width:calc(var(--u)*18);height:calc(var(--u)*18);margin-right:calc(var(--u)*2);background:#FFB800 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%23141311' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat;box-shadow:0 0 calc(var(--u)*5) rgba(255,184,0,.6)}
@keyframes pp-blink{0%,100%{opacity:.2}50%{opacity:1}}
.pp-auto{flex:none;font:800 calc(var(--u)*10)/1 "JJ Mono",ui-monospace,monospace;color:#141311;background:#FFB800;border-radius:calc(var(--u)*4);padding:calc(var(--u)*3) calc(var(--u)*6)}
.pp-updown{flex:none;width:calc(var(--u)*16);stroke-width:2.6;color:#8C857B}
.pp-meters{display:flex;justify-content:space-between;align-items:flex-start;height:calc(var(--u)*50)}
.pp-rates{display:flex;align-items:center;gap:calc(var(--u)*3)}
.pp-ps+.pp-arrow{margin-left:calc(var(--u)*7)}
.pp-arrow{width:calc(var(--u)*11);stroke-width:3.4;color:#8C857B}
.pp-ps{font:700 calc(var(--u)*10)/1 "JJ Mono",ui-monospace,monospace;color:#8C857B}
.pp-cells{display:inline-flex;gap:calc(var(--u)*1.3);perspective:calc(var(--u)*120)}
.pp-cells i{position:relative;display:block;width:calc(var(--u)*13.3);height:calc(var(--u)*18.9);border-radius:calc(var(--u)*1.9);background:linear-gradient(#2B2826,#232120);font:800 calc(var(--u)*12.2)/calc(var(--u)*18.9) "JJ Mono",ui-monospace,monospace;font-style:normal;text-align:center;color:#F6F1E6}
.pp-cells i.dash{line-height:calc(var(--u)*14)}

/* doodles */
.dd{position:absolute;fill:none;stroke:#141311;stroke-width:2.2;opacity:.85}
.dd1{width:34px;left:2%;top:22px;fill:#FFB800;stroke:#141311}
.dd2{width:26px;right:4%;top:40px;stroke:#D99A00}
.dd3{width:52px;right:0;top:250px;fill:#FBF8F3}
.dd4{width:64px;left:-2%;top:330px}
.dd5{width:60px;left:40%;top:-10px;stroke:#D99A00}
.dd6{width:90px;right:6%;bottom:40px}
.dd7{width:26px;left:36%;bottom:10px;fill:#FFD666}
.dd8{width:30px;left:4%;bottom:70px;fill:#E8E1D5}

/* hero toast — a Paper card, like the app's own notices */
.toast{position:absolute;left:-6%;bottom:30px;display:flex;align-items:center;gap:12px;width:262px;padding:14px 16px;border-radius:18px;background:#FBF8F3;box-shadow:inset 0 0 0 1px #D9D1C3,0 3px 0 rgba(0,0,0,.08),0 24px 48px -20px rgba(20,19,17,.35);font-family:"JJ Inter",var(--font);text-align:left;opacity:0}
.toast span:last-child{display:flex;flex-direction:column;line-height:1.3}
.toast b{font-size:13px;font-weight:600;color:#141311}
.toast small{font-size:11.5px;font-weight:500;color:#5E5850}
.t-ic{width:34px;height:34px;flex:none;border-radius:50%;background:#FFB800;display:grid;place-items:center;box-shadow:0 0 10px rgba(255,184,0,.45)}
.t-ic svg{width:20px;fill:none;stroke:#141311;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- sections ---------- */
.sec{padding:110px 0}
.sec-title{font-family:var(--serif);font-size:clamp(30px,3.6vw,46px);line-height:1.12;letter-spacing:-.02em;color:var(--ink);font-weight:600;text-align:center;max-width:820px;margin-inline:auto;text-wrap:balance}
.sec-sub{margin:16px auto 0;max-width:640px;text-align:center;color:var(--ink2);font-size:17px;text-wrap:balance}
/* a black flap-board band, like the app's status panel */
.sec-board{background:var(--board);color:var(--flap-text)}
.sec-board .sec-title{color:var(--flap-text)}
.sec-board .sec-sub{color:var(--on-board)}

.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:60px}
.feat{position:relative;display:flex;gap:20px;padding:30px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),var(--ledge);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;overflow:hidden;overflow:clip;--mx:50%;--my:50%}
.feat::before{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(255,184,0,.13),transparent 60%);opacity:0;transition:opacity .3s}
.feat:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.feat:hover::before{opacity:1}
.f-ic{position:relative;width:60px;height:60px;flex:none;border-radius:18px;background:var(--ink);display:grid;place-items:center;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.f-ic svg{width:30px;height:30px;fill:none;stroke:var(--on);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.feat:hover .f-ic{transform:rotate(-6deg) scale(1.08)}
.feat:hover .f-spin{animation:spin 1.1s cubic-bezier(.5,0,.3,1)}
.feat>div:last-child{position:relative}
.feat h3{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-bottom:6px}
.feat p{color:var(--ink2);font-size:15.5px}
@keyframes spin{to{transform:rotate(360deg)}}
.f-spin{transform-origin:12px 12px;transform-box:view-box}

/* route diagram, drawn on the board */
.route{position:relative;margin:60px auto 0;max-width:1000px;aspect-ratio:1000/360}
.route-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rt-bg{fill:none;stroke:#3A3633;stroke-width:3;stroke-dasharray:3 9;stroke-linecap:round}
.rt-line{fill:none;stroke:url(#routeGrad);stroke-width:4;stroke-linecap:round}
.rt-block circle{fill:var(--board);stroke:var(--red);stroke-width:3}
.rt-block path{stroke:var(--red);stroke-width:3;stroke-linecap:round}
.rt-block{opacity:0}
.rt-packet{fill:var(--on);stroke:var(--board);stroke-width:3;filter:drop-shadow(0 0 8px rgba(255,184,0,.75))}
.rt-label{font:700 13px var(--mono);letter-spacing:.12em;text-transform:uppercase;fill:var(--label)}
.node{position:absolute;top:50%;transform:translateY(-50%);width:18%;min-width:130px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 12px;border-radius:22px;background:linear-gradient(var(--flap-top),var(--flap));box-shadow:0 3px 0 rgba(0,0,0,.4),inset 0 0 0 1px #34302D;transition:box-shadow .4s}
.node-you{left:0}.node-srv{right:0}
.node b{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--flap-text);margin-top:10px}
.node small{font-size:12.5px;color:var(--label)}
.n-ic{width:48px;height:48px;border-radius:15px;position:relative}
.n-ic.you{background:rgba(255,184,0,.12)}
.n-ic.you::after{content:"";position:absolute;left:16px;top:9px;width:16px;height:30px;border:2.4px solid var(--on);border-radius:5px}
.n-ic.srv{background:var(--on)}
.n-ic.srv::before,.n-ic.srv::after{content:"";position:absolute;left:11px;right:11px;height:10px;border:2.2px solid var(--ink);border-radius:3px}
.n-ic.srv::before{top:11px}.n-ic.srv::after{bottom:11px}
.node-srv.lit{box-shadow:0 0 0 6px rgba(255,184,0,.2),0 0 40px -6px rgba(255,184,0,.45),inset 0 0 0 1px var(--on-deep)}
.route-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:12px;background:linear-gradient(var(--flap-top),var(--flap));box-shadow:0 3px 0 rgba(0,0,0,.4),inset 0 0 0 1px #34302D;font-family:var(--serif);font-weight:600;font-size:16px;color:var(--flap-text);white-space:nowrap}
.rs-dot{width:10px;height:10px;border-radius:50%;background:var(--label)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.steps li{display:flex;gap:14px;padding:22px;border-radius:20px;background:var(--flap);box-shadow:inset 0 0 0 1px #2E2B28}
.steps li>span{width:34px;height:34px;flex:none;border-radius:10px;background:var(--on);color:var(--ink);font:800 15px/1 var(--mono);display:grid;place-items:center}
.steps b{font-family:var(--serif);font-weight:600;color:var(--flap-text);font-size:17px}
.steps p{color:var(--on-board);font-size:14.5px;margin-top:2px}

/* privacy */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px}
.led{padding:32px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),var(--ledge)}
.led h3{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink);margin-bottom:14px}
.led ul{list-style:none;display:grid;gap:12px}
.led li{position:relative;padding-left:32px;color:var(--ink);font-size:15.5px}
.led li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%}
.led li::after{content:"";position:absolute}
.led-yes li::before{background:var(--ink)}
.led-yes li::after{left:7px;top:7px;width:5px;height:9px;border:solid var(--on);border-width:0 2px 2px 0;transform:rotate(45deg)}
.led-no li::before{background:var(--paper2);box-shadow:inset 0 0 0 1px var(--line)}
.led-no li::after{left:5px;top:12px;width:10px;height:2px;background:var(--ink2);border-radius:2px}
.limits{margin-top:22px;padding:28px 32px;border-radius:24px;background:var(--paper2);border:1.5px dashed var(--dash)}
.limits h3{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);margin-bottom:10px}
.limits ul{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;padding-left:18px;color:var(--ink2);font-size:14.5px}

/* CTA — the board again, with the yellow lit on it */
.cta{position:relative;padding:110px 0;background:var(--board);color:var(--flap-text);text-align:center;overflow:hidden;overflow:clip}
.cta-shine{will-change:transform;position:absolute;inset:-40% -10%;background:linear-gradient(115deg,transparent 40%,rgba(255,184,0,.07) 50%,transparent 60%);transform:translateX(-60%)}
.cta-in{position:relative}
.cta h2{font-family:var(--serif);font-size:clamp(32px,4.4vw,56px);letter-spacing:-.02em;line-height:1.08;font-weight:600}
.cta h2 span{color:var(--on)}
.cta p{margin-top:14px;font-size:18px;color:var(--on-board)}
.cta .store-soon{color:var(--on-board);border-color:#4A4643}

/* footer — continues the board under the download band */
.foot{background:var(--board);color:var(--on-board);padding:64px 0 28px;border-top:1px solid var(--flap-top)}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px}
.brand-light{color:var(--flap-text)}
.foot-brand p{margin-top:14px;font-size:14px;max-width:320px;color:var(--label)}
.foot nav,.foot-in>div:last-child{display:flex;flex-direction:column;gap:9px;font-size:14px}
.foot b{font:700 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--label);margin-bottom:4px}
.foot a{transition:color .2s}
.foot a:hover{color:var(--on)}
.foot-legal{margin-top:44px;padding-top:22px;border-top:1px solid var(--flap-top);font-size:12.5px;color:var(--label)}

/* reveal initial state only when JS runs (no-JS = everything visible) */
.js .reveal,.js [data-hero]{visibility:hidden}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav-links{display:none}
  .nav-in .btn{margin-left:auto}
  .hero{padding:120px 0 90px}
  .hero-grid{grid-template-columns:1fr;gap:10px;text-align:center}
  .lead,.kicker{margin-inline:auto}
  .store-row,.soon-row{justify-content:center}
  .stage{height:560px;max-width:560px;width:100%;margin:10px auto 0}
  .feat-grid,.ledger{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .hero{padding:104px 0 56px}
  .lead{font-size:16.5px}
  .store{height:54px;flex:1 1 calc(50% - 6px);min-width:150px}
  .store{gap:8px;padding:0 12px 0 10px}
  .store-soon{padding-left:12px}
  .store b{font-size:16.5px}
  .store-coin{width:30px;height:30px}
  .store-coin svg{width:17px;height:17px}
  .soon-label{flex-basis:100%;text-align:center;margin:0}
  .stage{height:470px}
  .phone{--u:.518px;width:220px;height:456px;border-radius:38px;padding:9px}
  .screen{border-radius:30px}
  .phone::before{width:74px;margin-left:-37px;height:22px;top:16px}
  .phone-front{left:36%;top:0}
  .phone-back{left:0;top:44px}
  .soon-row{gap:6px}
  .soon{height:34px;padding:0 10px;gap:5px;font-size:13px}
  .soon svg{width:16px;height:16px}
  /* Narrow: one line, in the blank under the switch — where the app puts its own notices. */
  .toast{left:35%;right:1%;width:auto;top:240px;bottom:auto;padding:8px 10px;gap:8px;border-radius:14px}
  .toast b{font-size:11.5px}.toast small{display:none}
  .t-ic{width:24px;height:24px}.t-ic svg{width:14px}
  .dd4,.dd6{display:none}
  .sec{padding:80px 0}
  .feat{padding:20px;gap:14px}
  .f-ic{width:46px;height:46px;border-radius:14px}
  .f-ic svg{width:24px;height:24px}
  .feat h3{font-size:19px}
  .feat p{font-size:15px}
  .route{aspect-ratio:auto;height:566px;margin-inline:-16px;padding:0 16px 40px;overflow:hidden;overflow:clip}
  .route .node-you{left:16px}.route .node-srv{right:16px;bottom:40px}
  .route-svg{top:135px;left:50%;width:660px;height:238px;margin-left:-330px}
  .rt-label{font-size:20px}
  .rt-line{stroke-width:5}
  .node{top:auto;transform:none;width:44%;min-width:0;padding:12px}
  .node-you{top:0;left:0}.node-srv{bottom:0;right:0}
  .route-status{top:50%;font-size:15px;padding:8px 14px}
  .limits ul{grid-template-columns:1fr}
  .led{padding:24px}
  .foot-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .feat,.f-ic,.store,.btn{transition:none}
  .feat:hover .f-spin{animation:none}
  .pp-track::before,.pp-lamp{animation:none!important}
  .pp-knob{transition:none}
}