/* landing.css: the marketing page (hero, sections, FAQ) */
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font:800 19px/1 var(--f-display);font-stretch:115%;letter-spacing:-.015em;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:30px;flex:none;transition:transform .5s cubic-bezier(.5,1.6,.4,1)}
.brand:hover svg{transform:rotate(-8deg) scale(1.06)}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{padding:8px 12px;border-radius:var(--r);text-decoration:none;color:var(--ink-2);font-weight:500;font-size:15px;transition:color .15s,background .15s}
.nav-links a:hover{color:var(--ink);background:var(--brand-2)}
.chip-net{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border:1px solid var(--rule);border-radius:999px;font:500 12px/1 var(--f-mono);color:var(--ink-2);background:var(--sheet);white-space:nowrap}
.chip-net .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 2.6s ease-out infinite}
.chip-net.off .dot{background:var(--chalk)}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (max-width:960px){.nav-links{display:none}.nav .chip-net{margin-left:auto}}
.nav-links a{white-space:nowrap}
@media (max-width:1320px) and (min-width:961px){.nav .chip-net{display:none}.nav #site-theme{margin-left:auto}}
@media (max-width:1120px) and (min-width:961px){.nav-links a[href="#offline"],.nav-links a[href="#tools"]{display:none}}
@media (max-width:540px){.nav .chip-net{display:none}.nav #site-theme{margin-left:auto}.nav .btn.sm{padding:0 12px}}

/* hero */
.hero{padding-block:56px 84px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.hero-copy{min-width:0}
.hero h1{font:850 clamp(40px,5.6vw,70px)/1.02 var(--f-display);font-stretch:120%;letter-spacing:-.03em;margin:18px 0 22px}
.mark{background:linear-gradient(var(--marker-bg),var(--marker-bg)) no-repeat 0 90%/0% 40%;animation:sweep 1s .7s cubic-bezier(.65,.05,.25,1) forwards;padding:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@keyframes sweep{to{background-size:100% 40%}}
.lede{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink-2);max-width:34em;margin:0 0 30px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-meta{font:500 13px var(--f-mono);color:var(--ink-3);margin:16px 0 0}
.hero-fixes{list-style:none;margin:40px 0 0;padding:22px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.hero-fixes li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.ic-chip{width:34px;height:34px;border-radius:9px;background:var(--brand-2);color:var(--brand-ink);display:grid;place-items:center}
.ic-chip svg{width:18px;height:18px}
.hero-fixes strong{display:block;font-size:15px;line-height:1.3}
.hero-fixes span:not(.ic-chip){display:block;font-size:13.5px;line-height:1.45;color:var(--ink-2);margin-top:2px}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:48px}}
@media (max-width:520px){.hero-fixes{grid-template-columns:1fr}}

.hero-art{position:relative;min-width:0}
.sheet{position:relative;margin:0;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow);overflow:hidden}
.sheet canvas{display:block;width:100%;aspect-ratio:16/10.5;touch-action:pan-y;cursor:grab}
.sheet canvas:active{cursor:grabbing}
.seg{display:inline-flex;padding:3px;gap:2px;border:1px solid var(--rule);border-radius:10px;background:var(--sheet);position:relative}
.seg button{position:relative;z-index:1;border:0;background:transparent;padding:7px 14px;border-radius:7px;font:650 13px/1 var(--f-body);color:var(--ink-2);cursor:pointer;transition:color .25s}
.seg button[aria-pressed="true"]{color:var(--on-brand)}
.seg .thumb{position:absolute;top:3px;bottom:3px;left:3px;border-radius:7px;background:var(--brand);transition:transform .38s var(--ease),width .38s var(--ease)}
.sheet .seg{position:absolute;top:14px;left:14px;z-index:2;box-shadow:var(--shadow-sm)}
.titleblock{display:grid;grid-template-columns:2.1fr 1fr 1fr 1fr;border-top:1px solid var(--rule);font:500 11px/1.3 var(--f-mono);color:var(--ink)}
.titleblock div{padding:8px 12px;border-left:1px solid var(--rule);min-width:0}
.titleblock div:first-child{border-left:0}
.titleblock small{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.titleblock b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.annot{position:absolute;margin:0;font:600 23px/1 var(--f-hand);color:var(--brand);pointer-events:none;white-space:nowrap}
.annot svg{position:absolute;overflow:visible}
.annot-a{top:-34px;left:150px}
.annot-a svg{left:-46px;top:6px;width:44px;height:48px}
.annot-b{bottom:-40px;right:6px}
.annot-b svg{right:calc(100% + 4px);top:-26px;width:40px;height:34px}
@media (max-width:640px){.annot-a{display:none}.titleblock{grid-template-columns:1.6fr 1fr 1fr}.titleblock div:nth-child(3){display:none}}

/* sections */
section.band{padding-block:96px;border-top:1px solid var(--rule)}
.sec-head h2{font:800 clamp(30px,3.6vw,46px)/1.06 var(--f-display);font-stretch:116%;letter-spacing:-.025em;margin:12px 0 14px}
.sec-head p{color:var(--ink-2);margin:0;max-width:32em;font-size:17px}
.split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.6fr);gap:56px;align-items:start}
.split .sec-head{position:sticky;top:110px}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:28px}.split .sec-head{position:static}}

/* improvements */
.fixes{list-style:none;margin:0;padding:0}
.fix{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;padding-block:24px;border-top:1px solid var(--rule)}
.fix:first-child{border-top:0;padding-top:4px}
.fix .ic{width:44px;height:44px;border-radius:11px;border:1px solid var(--rule);background:var(--sheet);display:grid;place-items:center;color:var(--brand);transition:transform .35s cubic-bezier(.5,1.6,.4,1),background .2s}
.fix:hover .ic{transform:rotate(-8deg) scale(1.08);background:var(--brand-2)}
.fix .ic svg{width:22px;height:22px}
.fix .old{margin:0 0 6px;font-size:14px;color:var(--ink-3)}
.fix .old s{text-decoration-color:var(--redline);text-decoration-thickness:1.5px}
.fix h3{font:700 21px/1.25 var(--f-display);font-stretch:108%;letter-spacing:-.01em;margin:0 0 6px}
.fix p.desc{margin:0;color:var(--ink-2);max-width:40em}
.fix .try{display:inline-flex;gap:6px;align-items:center;margin-top:10px;font:500 12.5px var(--f-mono);color:var(--ink-3)}
.fix code{font:500 13px var(--f-mono);background:var(--brand-2);padding:1px 5px;border-radius:4px}
.fix .new{font:600 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-brand);background:var(--brand);padding:3px 6px;border-radius:4px;vertical-align:3px;margin-left:8px}

/* templates showcase */
.tpl-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:44px}
@media (max-width:980px){.tpl-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.tpl-row{grid-template-columns:1fr}}
.tpl-card{display:grid;gap:0;border:1px solid var(--rule);border-radius:6px;background:var(--sheet);overflow:hidden;cursor:pointer;text-align:left;padding:0;transition:transform .3s var(--ease),box-shadow .3s,border-color .2s}
.tpl-card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--shadow);border-color:var(--brand)}
.tpl-card:nth-child(even):hover{transform:translateY(-4px) rotate(.4deg)}
.tpl-card .thumb{aspect-ratio:16/10;background:var(--paper);display:block;width:100%;object-fit:cover;border-bottom:1px solid var(--rule)}
.tpl-card .meta{padding:12px 14px 14px;display:grid;gap:2px}
.tpl-card b{font-size:15px}
.tpl-card small{font:500 11.5px var(--f-mono);color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.tpl-foot{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--ink-2);font-size:15px}

/* offline steps */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
.steps::before{content:"";position:absolute;left:24px;right:24px;top:24px;border-top:2px dashed var(--rule)}
.step{position:relative;min-width:0}
.step .n{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--sheet);border:1.5px solid var(--brand);color:var(--brand-ink);font:700 15px var(--f-mono);margin-bottom:18px;transition:background .3s,color .3s,transform .3s var(--ease)}
.step:hover .n{background:var(--brand);color:var(--on-brand);transform:scale(1.08)}
.step h3{font:700 18px/1.3 var(--f-display);font-stretch:108%;margin:0 0 6px}
.step p{margin:0;color:var(--ink-2);font-size:15px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;gap:32px 20px}.steps::before{display:none}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}
.meter{margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px;align-items:center;padding:26px 28px;background:var(--sheet);border:1px solid var(--rule);border-radius:6px}
.meter h3{margin:6px 0 0;font:700 20px/1.3 var(--f-display);font-stretch:108%}
.meter-bar{height:14px;border-radius:7px;background:var(--brand-2);overflow:hidden;position:relative}
.meter-bar i{position:absolute;inset:0 auto 0 0;width:2%;min-width:6px;background:var(--brand);border-radius:7px;transition:width 1.2s var(--ease)}
.meter-legend{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;font:500 12.5px var(--f-mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
@media (max-width:760px){.meter{grid-template-columns:1fr}}

/* tool sheet */
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden;margin-top:44px}
.key{background:var(--sheet);padding:18px 18px 16px;display:grid;gap:10px;align-content:start;transition:background .2s}
.key:hover{background:var(--brand-2)}
.key kbd{justify-self:start;min-width:28px;text-align:center}
.key strong{font-size:15px;line-height:1.3}
.key span{font-size:13.5px;color:var(--ink-2);line-height:1.45}

/* faq */
.faq{border-top:1px solid var(--rule)}
.qa{border-bottom:1px solid var(--rule)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border:0;background:none;text-align:left;cursor:pointer;font:650 18px/1.35 var(--f-body);color:var(--ink)}
.qa button .pm{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;transition:transform .35s var(--ease),background .2s}
.qa button .pm svg{width:16px;height:16px}
.qa button:hover .pm{background:var(--brand-2)}
.qa button[aria-expanded="true"] .pm{transform:rotate(45deg);background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.qa .ans>div{overflow:hidden}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans p{margin:0 0 22px;color:var(--ink-2);max-width:44em}
.qa .ans code{font:500 13.5px var(--f-mono);background:var(--brand-2);padding:2px 6px;border-radius:4px;color:var(--ink)}

/* final call to action: a chalkboard */
.final{padding-block:96px 40px;border-top:1px solid var(--rule)}
.final-card{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:32px;align-items:end;padding:44px;background:var(--board);color:var(--on-board);border-radius:6px;position:relative;overflow:hidden;
  background-image:radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.07),transparent 60%),radial-gradient(ellipse at 80% 100%,rgba(255,255,255,.05),transparent 55%)}
.final-card h2{font:850 clamp(32px,4.4vw,56px)/1.02 var(--f-display);font-stretch:120%;letter-spacing:-.03em;margin:0 0 12px}
.final-card p{margin:0;color:color-mix(in srgb,var(--on-board) 72%,transparent);max-width:32em}
.final-card .btn{background:var(--chalk);border-color:var(--chalk);color:#1A1500}
.final-card .btn:hover{box-shadow:3px 3px 0 var(--on-board)}
.final-card .scribble{position:absolute;right:-20px;top:-30px;width:280px;opacity:.22;pointer-events:none;color:var(--chalk)}
@media (max-width:760px){.final-card{grid-template-columns:1fr;padding:30px 24px}}
footer.foot{padding-block:28px 48px}
.foot .titleblock{border:1px solid var(--rule);border-radius:6px;background:var(--sheet);grid-template-columns:2fr 1fr 1fr 1fr}
@media (max-width:640px){.foot .titleblock{grid-template-columns:1fr 1fr}.foot .titleblock div:nth-child(3){border-left:0}.foot .titleblock div:nth-child(n+3){border-top:1px solid var(--rule)}}

/* scroll rise: content is always visible, it only shifts into place */
.rise{transform:translateY(22px);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.rise.in{transform:none}
@media (prefers-reduced-motion: reduce){.rise{transform:none}}

/* research section */
.research-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center}
@media (max-width:940px){.research-grid{grid-template-columns:1fr}}
.res-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.res-list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.res-list b{display:block;font-size:15px}
.res-list span:not(.ic-chip){display:block;font-size:14px;color:var(--ink-2);line-height:1.45}
.res-sym{font:600 19px/1 var(--f-body)}
.res-sheet img{display:block;width:100%;aspect-ratio:520/640;object-fit:contain;background:var(--paper)}

/* phones: show the live demo right after the buttons, then the feature list */
@media (max-width:940px){
  .hero{padding-block:32px 64px}
  .hero-grid{gap:0}
  .hero-copy{display:contents}
  .hero-art{order:1;margin:36px 0 34px}
  .hero-fixes{order:2;margin-top:12px}
}
@media (max-width:480px){
  .hero h1{font-size:clamp(34px,10vw,44px);margin:14px 0 16px}
  .lede{font-size:16.5px;margin-bottom:24px}
  .cta-row .btn{flex:1 1 100%}
  .cta-meta{font-size:12px}
  section.band{padding-block:64px}
  .final{padding-block:64px 32px}
}
@media (pointer: coarse){
  .seg button{padding:12px 18px}
  .qa button{padding:20px 0}
}

/* medium windows: the menu keeps its links, the network chip steps aside */
@media (max-width:1180px){.nav .chip-net{display:none}.nav .nav-links{margin-left:auto}.nav-links a{padding:8px 10px}}
@media (max-width:1180px) and (min-width:961px){.nav #site-theme{margin-left:4px}}
.research-grid>*{min-width:0}
@media (max-width:480px){.btn{white-space:normal;text-align:center;height:auto;min-height:48px;padding-block:12px}.nav .btn.sm{white-space:nowrap;height:38px;min-height:0;padding-block:0}.cta-row{flex-direction:column;align-items:stretch}.cta-row .btn{width:100%}}

/* New in 4.0: feature cards and devices strip */
.new-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:8px}
.new-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 22px 18px;border:1px solid var(--rule);border-radius:12px;background:var(--sheet);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .3s;transition-delay:var(--d,0ms)}
.new-card::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,var(--brand),transparent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.new-card:hover,.new-card:focus-visible{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--shadow-md,0 12px 30px rgba(0,0,0,.12));transition-delay:0ms}
.new-card:hover::after,.new-card:focus-visible::after{transform:scaleX(1)}
.new-card .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--brand-2);color:var(--brand-ink)}
.new-card .ic svg{width:22px;height:22px}
.new-card b{font:750 19px/1.25 var(--f-display);font-stretch:108%}
.new-card>span:not(.ic){color:var(--ink-2);font-size:15px;line-height:1.5}
.new-card em{margin-top:auto;padding-top:6px;font:600 13px var(--f-mono);font-style:normal;color:var(--brand-ink);display:inline-flex;gap:6px;align-items:center}
.new-card em svg{width:14px;height:14px;transition:transform .25s}
.new-card:hover em svg{transform:translateX(4px)}
.devices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:28px;border:1px solid var(--rule);border-radius:12px;background:var(--sheet);overflow:hidden}
.devices>div{display:flex;flex-direction:column;gap:6px;padding:18px;border-left:1px solid var(--rule)}
.devices>div:first-child{border-left:0}
.devices svg{width:22px;height:22px;color:var(--brand)}
.devices b{font:700 15px/1.3 var(--f-display)}
.devices span{font-size:13.5px;color:var(--ink-2);line-height:1.45}
@media (max-width:1000px){.devices{grid-template-columns:repeat(2,minmax(0,1fr))}.devices>div{border-left:0;border-top:1px solid var(--rule)}.devices>div:nth-child(even){border-left:1px solid var(--rule)}.devices>div:nth-child(-n+2){border-top:0}}
@media (max-width:560px){.devices{grid-template-columns:1fr}.devices>div,.devices>div:nth-child(even){border-left:0}.devices>div:nth-child(2){border-top:1px solid var(--rule)}}
@media (prefers-reduced-motion: reduce){.new-card,.new-card::after,.new-card em svg{transition:none}}

/* very large screens at 1x: scale the whole page so text is readable from a sofa */
@media (min-width: 2400px) and (max-resolution: 1.3dppx) { #site { zoom: 1.3 } }
@media (min-width: 3000px) and (max-resolution: 1.3dppx) { #site { zoom: 1.75 } }