/* Tidlet site v11. Tokens and rules: docs/knowledge/design-system.md */
:root{--paper:#FBFBFD;--card:#FFFFFF;--mist:#F1F3F9;--line:#E1E5EF;--ink:#0B0D14;--slate:#566074;
--blue:#2F56E0;--blue-t:#2F56E0;--on-blue:#FFFFFF;--blue-soft:#E8EDFC;--plate:#2F56E0;--navy:#0A1030;--ok:#1F9D55;
--lift:0 1px 2px rgba(11,13,20,.06),0 12px 32px -16px rgba(11,13,20,.28);--float:0 2px 6px rgba(8,16,60,.18),0 24px 48px -20px rgba(8,16,60,.45);
--l:block;--d:none;--f:"Geist",-apple-system,sans-serif;--disp:"Bricolage Grotesque","Geist",sans-serif;--m:"Geist Mono",ui-monospace,Menlo,monospace;--r:8px;--R:20px;--e:cubic-bezier(.2,.7,.2,1);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#07080D;--card:#0F121B;--mist:#0F121B;--line:#1F2433;--ink:#ECEEF4;--slate:#98A0B3;
--blue:#3D5FEA;--blue-t:#8DA4FF;--on-blue:#FFFFFF;--blue-soft:#141B3A;--plate:#1E3699;--navy:#0D1330;--ok:#4ACB80;
--lift:0 1px 0 rgba(255,255,255,.04),0 16px 36px -16px rgba(0,0,0,.8);--float:0 2px 6px rgba(0,0,0,.5),0 24px 48px -20px rgba(0,0,0,.85);--l:none;--d:block;color-scheme:dark}}
:root[data-theme=dark]{--paper:#07080D;--card:#0F121B;--mist:#0F121B;--line:#1F2433;--ink:#ECEEF4;--slate:#98A0B3;
--blue:#3D5FEA;--blue-t:#8DA4FF;--on-blue:#FFFFFF;--blue-soft:#141B3A;--plate:#1E3699;--navy:#0D1330;--ok:#4ACB80;
--lift:0 1px 0 rgba(255,255,255,.04),0 16px 36px -16px rgba(0,0,0,.8);--float:0 2px 6px rgba(0,0,0,.5),0 24px 48px -20px rgba(0,0,0,.85);--l:none;--d:block;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.045em;text-wrap:balance}
h3{letter-spacing:-.025em}
p{margin:0}a{color:inherit}img{display:block;max-width:100%;height:auto}
.w{max-width:1200px;margin:0 auto;padding-inline:32px}
.mono{font-family:var(--m)}
.eyebrow{font:500 12px/1 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-t)}
.muted{color:var(--slate)}
:focus-visible{outline:2px solid var(--blue-t);outline-offset:3px;border-radius:4px}
.end :focus-visible,.plate.blue :focus-visible,.desk-plate :focus-visible,.scene :focus-visible{outline-color:#fff}
svg.i{width:16px;height:16px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ld .l{display:var(--l)}.ld .d{display:var(--d)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:12px;z-index:20;background:var(--paper);padding:8px 12px}

/* header */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line)}
.top .w{display:flex;align-items:center;height:64px;gap:32px}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:19px;letter-spacing:-.045em;text-decoration:none}
.nav{display:flex;gap:28px;font-size:14px;margin-left:auto}
.nav a{text-decoration:none;color:var(--slate);transition:color .15s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.top-r{display:flex;align-items:center;gap:12px}
.tbtn{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r);background:none;color:var(--slate);cursor:pointer}
.tbtn:hover{color:var(--ink)}
.tbtn .sun,:root[data-theme=dark] .tbtn .moon{display:none}
:root[data-theme=dark] .tbtn .sun{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tbtn .sun{display:block}:root:not([data-theme=light]) .tbtn .moon{display:none}}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--r);font:500 15px/1 var(--f);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .15s var(--e),background .15s,border-color .15s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn.sm{height:36px;padding:0 14px;font-size:14px}
.btn.b{background:var(--blue);color:var(--on-blue);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(20,40,140,.25)}
.btn.b:hover{background:color-mix(in srgb,var(--blue) 88%,#000)}
.btn.p{background:var(--ink);color:var(--paper)}
.btn.p:hover{background:color-mix(in srgb,var(--ink) 84%,var(--blue))}
.btn.s{border-color:var(--line);background:var(--card);color:var(--ink)}
.btn.s:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.btn.wh{background:#fff;color:#0B0D14}
.btn.wh:hover{background:#E8EDFC}
.btn.gh{border-color:rgba(255,255,255,.4);color:#fff}
.btn.gh:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn .price{font-family:var(--m);font-size:13px;padding-left:10px;margin-left:2px;border-left:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.lnk{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:15px;text-decoration:none;color:var(--blue-t)}
.lnk:hover{text-decoration:underline;text-underline-offset:3px}
.fine{font:400 13px/1.6 var(--m);color:var(--slate)}
.fine a{color:inherit}
.trust{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:0;padding:0;font-size:14px;color:var(--slate)}
.trust li{display:flex;align-items:center;gap:8px}
.trust svg{color:var(--ok)}

/* hero (home) */
.hero{padding-block:72px 0}
.hero-t{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}
.hero h1{font-size:80px;line-height:.96;letter-spacing:-.055em}
.hero h1 em{font-style:normal;color:var(--blue-t)}
.kick{display:inline-block;font:500 13px/1 var(--m);color:var(--blue-t);margin-bottom:28px;text-decoration:none}
.kick:hover{text-decoration:underline;text-underline-offset:4px}
.lede{font-size:20px;line-height:1.5;color:var(--slate);max-width:46ch}
.hero-t .btns{margin-top:20px}
.hero-t .trust{margin-top:24px}
/* search */
.search{position:relative;z-index:30;margin-top:28px;display:flex;align-items:center;gap:10px;height:54px;padding:0 12px 0 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:var(--lift);transition:border-color .2s var(--e),box-shadow .2s var(--e)}
.search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent)}
.search>svg{width:18px;height:18px;color:var(--slate)}
.search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:400 16px/1 var(--f);color:var(--ink)}
.search input::placeholder{color:var(--slate)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search kbd{font:500 12px/1 var(--m);color:var(--slate);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:4px 7px}
.q-res{position:absolute;left:-1px;right:-1px;top:calc(100% + 8px);z-index:20;list-style:none;margin:0;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:var(--float);animation:pop .16s var(--e)}
.q-res a{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:8px;text-decoration:none}
.q-res li[aria-selected=true] a{background:var(--mist)}
.q-res img{width:40px;height:40px;margin:-2px}
.q-res b{display:block;font-weight:600;letter-spacing:-.02em;font-size:15px}
.q-res small{display:block;color:var(--slate);font-size:13px;line-height:1.35}
.q-res .pr{font:500 13px/1 var(--m);color:var(--slate)}
.q-res .none{padding:12px 10px;color:var(--slate);font-size:14px}
.q-res .none a{display:inline;padding:0;color:var(--blue-t)}
.q-res mark{background:none;color:var(--blue-t)}

/* motion: hero load sequence + scroll reveal (all off under reduced motion) */
@keyframes up{from{opacity:0;transform:translateY(18px);filter:blur(6px)}}
@keyframes plate{from{opacity:0;transform:translateY(40px) scale(.97)}}
@keyframes fade{from{opacity:0}}
@keyframes wiggle{0%,100%{transform:none}25%{transform:rotate(-4deg)}50%{transform:rotate(3deg)}75%{transform:rotate(-2deg)}}
@media (prefers-reduced-motion:no-preference){
  .hero-t .kick{animation:up .6s var(--e) both}
  .hero-t h1{animation:up .7s var(--e) .06s both}
  .hero-t h1 em{display:inline-block;animation:wiggle .5s ease-in-out 1.3s both}
  .hero-t .lede{animation:up .6s var(--e) .16s both}
  .hero-t .search{animation:up .6s var(--e) .24s both}
  .hero-t .btns{animation:up .6s var(--e) .3s both}
  .hero-t .trust{animation:up .6s var(--e) .36s both}
  .desk-plate{animation:plate .9s var(--e) .28s both}
  .mb .glyph{animation:fade .4s var(--e) calc(.8s + var(--gi,4) * 70ms) both}
  .js .panels .pnl,.js .scene .pnl{opacity:0;transform:translateY(56px) scale(.95)}
  .js .panels .pnl.in,.js .scene .pnl.in{opacity:1;transform:none;transition:opacity .45s var(--e),transform .9s cubic-bezier(.16,1,.3,1)}
  .js .scene{animation:plate .9s var(--e) .1s both}
  .rise>*{animation:up .6s var(--e) both}
  .rise>*:nth-child(2){animation-delay:.06s}.rise>*:nth-child(3){animation-delay:.12s}.rise>*:nth-child(4){animation-delay:.18s}.rise>*:nth-child(5){animation-delay:.24s}
  .js [data-r]{opacity:0;transform:translateY(28px)}
  .js [data-r].in{opacity:1;transform:none;transition:opacity .6s var(--e) var(--rd,0s),transform .8s var(--e) var(--rd,0s)}
}

/* blue desktop plate with real app panels */
.desk-plate{position:relative;margin-top:56px;border-radius:var(--R);background:var(--plate);overflow:hidden;isolation:isolate}
.desk-plate::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.mb{display:flex;align-items:center;gap:16px;height:30px;padding:0 16px;background:rgba(255,255,255,.14);color:#fff;font:500 12px/1 var(--f)}
.mb .sp{flex:1}
.mb .glyph{display:grid;place-items:center;width:26px;height:22px;border-radius:5px}
.mb .glyph.on{background:rgba(255,255,255,.22)}
.mb .glyph svg{width:15px;height:15px}
.mb .t{font-family:var(--m);font-variant-numeric:tabular-nums}
.desk-b{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:20px 28px 0;min-height:520px}
.dicons{display:grid;align-content:start;gap:22px;padding-top:12px}
.dico{display:grid;justify-items:center;gap:6px;width:96px;font:500 11px/1.25 var(--m);text-align:center;color:#fff;word-break:break-word}
.dico svg{width:46px;height:38px;color:#fff;fill:rgba(255,255,255,.22);stroke-width:1.3}
.dico .fi{display:grid;place-items:end center;width:36px;height:44px;padding-bottom:6px;border-radius:4px;background:#fff;font:600 7px/1 var(--m);color:var(--blue);text-transform:uppercase}
.panels{position:relative;display:flex;justify-content:flex-end;align-items:flex-start;gap:20px}
.pnl{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:var(--lift);flex:none}
.desk-plate .pnl{border-color:rgba(255,255,255,.2);box-shadow:var(--float)}
.pnl img{width:100%}
.panels .pnl{width:min(310px,32%)}
.panels .pnl.p2{margin-top:56px}
.panels .pnl.p3{margin-top:120px}

/* facts strip */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px;border-block:1px solid var(--line)}
.facts>div{padding:24px 24px 24px 0}
.facts>div+div{padding-left:24px;border-left:1px solid var(--line)}
.facts b{display:block;font:600 40px/1 var(--f);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.facts small{font-size:.5em;letter-spacing:0}
.facts span{display:block;margin-top:8px;font-size:14px;color:var(--slate)}

/* sections */
.sec{padding-block:112px}
.sec+.sec{border-top:1px solid var(--line)}
.sec-h{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;margin-bottom:56px;align-items:end}
.sec-h h2,.h2{font-size:56px;line-height:1;margin-top:16px}
.sec-h p{color:var(--slate);font-size:18px;max-width:46ch}

/* app bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.tile{position:relative;grid-column:span 6;display:flex;flex-direction:column;min-height:620px;border-radius:var(--R);background:var(--mist);border:1px solid var(--line);overflow:hidden;text-decoration:none;transition:border-color .2s var(--e)}
.tile-t{padding:32px 32px 0;position:relative;z-index:1}
.tile-id{display:flex;align-items:center;gap:14px}
.tile-id img{width:56px;height:56px;margin:-4px}
.tile-id b{display:block;font-size:20px;font-weight:600;letter-spacing:-.03em}
.tile-id small{display:block;font:400 13px/1.4 var(--m);color:var(--slate)}
.tile h3{margin-top:24px;font-size:28px;line-height:1.12;max-width:20ch}
.tile p{margin-top:12px;color:var(--slate);max-width:46ch}
@media (min-width:721px){.tile p{min-height:4.8em}}
.tile .row{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:20px}
.tile-v{position:relative;flex:1;margin-top:32px;display:flex;justify-content:center;align-items:flex-start;min-height:280px}
.tile-v .pnl{position:absolute;top:0;width:340px;box-shadow:var(--float);transition:transform .25s var(--e)}
@media (hover:hover){.tile:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}.tile:hover .tile-v .pnl{transform:translateY(-6px)}}
.buy-s{font:500 14px/1 var(--f);display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);text-decoration:none}
.buy-s:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.buy-s .price{font-family:var(--m);font-size:13px;color:var(--slate)}

/* privacy band */
.band{background:var(--navy);color:#fff;padding-block:112px}
.band .eyebrow{color:#8DA4FF}
.band h2{font-size:56px;line-height:1;margin-top:16px;max-width:14ch}
.band .sec-h p{color:#B7BFD9}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.16)}
.stats>div{padding:32px 28px 8px 0}
.stats>div+div{padding-left:28px;border-left:1px solid rgba(255,255,255,.16)}
.stats b{display:block;font:600 64px/1 var(--f);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stats h3{margin-top:20px;font-size:17px;letter-spacing:-.02em}
.stats p{margin-top:8px;color:#B7BFD9;font-size:15px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:32px;border-radius:var(--R);border:1px solid var(--line);background:var(--card)}
.plan-n{margin:0;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;font-size:17px;letter-spacing:-.02em;min-height:28px}
.plan-n .badge{font:500 12px/1 var(--m);padding:6px 10px;border-radius:99px;background:var(--blue-soft);color:var(--blue-t)}
.plan-d{margin-top:8px;color:var(--slate);font-size:15px;min-height:48px}
.plan-p{display:flex;align-items:baseline;gap:12px;margin-top:24px}
.plan-p b{font:600 64px/1 var(--f);letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.plan-p s{font:400 18px/1 var(--m);color:var(--slate)}
.plan-p span{font:400 14px/1 var(--m);color:var(--slate)}
.plan .btn{margin-top:28px;width:100%}
.plan ul{list-style:none;margin:28px 0 0;padding:28px 0 0;border-top:1px solid var(--line);display:grid;gap:12px;font-size:15px}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li svg{color:var(--blue-t);margin-top:4px}
.plan.hi{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan.hi .plan-d,.plan.hi .plan-p s,.plan.hi .plan-p span{color:color-mix(in srgb,var(--paper) 62%,transparent)}
.plan.hi ul{border-color:color-mix(in srgb,var(--paper) 18%,transparent)}
.plan.hi li svg{color:#8DA4FF}
.plan.hi .badge{background:var(--blue);color:#fff}
.plan-icons{display:flex;margin-top:20px}
.plan-icons{gap:6px}.plan-icons img{width:40px;height:40px;margin:-3px}
.pay-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:24px}

@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .plan.hi{background:#111A3F;color:var(--ink);border-color:var(--blue)}:root:not([data-theme=light]) .plan.hi .plan-d,:root:not([data-theme=light]) .plan.hi .plan-p s,:root:not([data-theme=light]) .plan.hi .plan-p span{color:var(--slate)}:root:not([data-theme=light]) .plan.hi ul{border-color:#26306A}}
:root[data-theme=dark] .plan.hi{background:#111A3F;color:var(--ink);border-color:var(--blue)}:root[data-theme=dark] .plan.hi .plan-d,:root[data-theme=dark] .plan.hi .plan-p s,:root[data-theme=dark] .plan.hi .plan-p span{color:var(--slate)}:root[data-theme=dark] .plan.hi ul{border-color:#26306A}

/* steps */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.steps{list-style:none;margin:40px 0 0;padding:0;counter-reset:s;border-top:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:8px;padding-block:22px;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font:500 13px/1.75 var(--m);color:var(--blue-t)}
.steps b{display:block;font-weight:600;font-size:17px;letter-spacing:-.02em}
.steps p{color:var(--slate);font-size:15px;margin-top:4px;max-width:52ch}

/* get started (home) */
.go{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.go li{display:flex;flex-direction:column;padding:32px 32px 32px 0}
.go li+li{padding-left:32px;border-left:1px solid var(--line)}
.go b{font:500 13px/1 var(--m);color:var(--blue-t)}
.go h3{margin-top:20px;font-size:22px}
.go p{margin-top:8px;color:var(--slate);font-size:15px;max-width:40ch;flex:1}
.go .lnk{margin-top:20px}
.go-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
@media (max-width:960px){.go{grid-template-columns:1fr}.go li,.go li+li{padding:24px 0;border-left:0}.go li+li{border-top:1px solid var(--line)}}

/* plates: real screenshots in the tour */
.plate{background:var(--mist);border:1px solid var(--line);border-radius:var(--R);padding:56px;display:grid;place-items:center}
.plate.blue{background:var(--plate);border-color:transparent}
.plate.blue .pnl{border-color:rgba(255,255,255,.2);box-shadow:var(--float)}
.plate .pnl{width:min(340px,100%)}
.win{width:100%;max-width:680px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);box-shadow:var(--lift)}
.win-t{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-bottom:1px solid var(--line);font:500 12px/1 var(--f);color:var(--slate)}
.win-t i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.win-t span{margin-inline:auto;transform:translateX(-24px)}

/* faq */
.spec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 0;font-weight:500;font-size:17px;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 22px/1 var(--m);color:var(--slate);transition:transform .2s var(--e)}
summary:hover::after{color:var(--blue-t)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 20px;color:var(--slate);max-width:62ch}

/* closing band */
.end{background:var(--plate);color:#fff;padding-block:104px;position:relative;overflow:hidden;isolation:isolate}
.end::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to top,#000,transparent 90%)}
.end .w{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.end h2{font-size:56px;line-height:1}
.end p{margin-top:16px;color:#E8EDFC;font-size:18px;max-width:44ch}
.end .btns{margin-top:32px}
.shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;justify-self:end}
.shelf a{display:grid;justify-items:center;gap:10px;padding:20px 20px 18px;border-radius:16px;background:#fff;color:#0B0D14;text-decoration:none;font-weight:500;font-size:14px;border:1px solid rgba(255,255,255,.2);transition:background .2s var(--e)}
.shelf a:hover{background:#E8EDFC}
.shelf img{width:88px;height:88px}

/* product page hero */
.p-hero{padding-block:72px 0}
.p-hero .split{align-items:center}
.p-hero h1{font-size:64px;line-height:.98;letter-spacing:-.055em}
.p-hero .lede{margin-top:24px;font-size:19px}
.p-hero .btns{margin-top:32px}
.p-hero .fine{margin-top:16px}
.appid{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.appid img{width:72px;height:72px;margin:-6px}
.appid b{display:block;font-size:22px;font-weight:600;letter-spacing:-.03em}
.appid small{font:400 13px/1.4 var(--m);color:var(--slate)}
.scene{position:relative;border-radius:var(--R);background:var(--plate);overflow:hidden;isolation:isolate}
.scene::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.scene-b{display:flex;justify-content:flex-end;align-items:flex-start;gap:20px;padding:16px 24px 40px}
.scene-b .dicons{margin-right:auto}
.scene .pnl{width:min(340px,72%);border-color:rgba(255,255,255,.2);box-shadow:var(--float)}

/* tour, features, privacy, price (product pages) */
.tour{display:grid;gap:96px}
.stop{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:center}
.stop h3{font-size:28px;line-height:1.15}
.stop p{margin-top:12px;color:var(--slate);max-width:44ch}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;border-top:1px solid var(--line)}
.rules>div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;padding-block:24px;border-bottom:1px solid var(--line)}
.rules h3{font-size:17px}
.rules p{color:var(--slate);font-size:15px}
.priv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.priv>div{padding:28px 28px 32px 0}
.priv>div+div{padding-left:28px;border-left:1px solid var(--line)}
.priv h3{font-size:17px;display:flex;align-items:center;gap:10px}
.priv h3 svg{color:var(--blue-t);width:18px;height:18px}
.priv ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px;color:var(--slate);font-size:15px}
.buy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.buy-card{padding:36px;border-radius:var(--R);background:var(--card);border:1px solid var(--line);box-shadow:var(--lift)}
.tag-price{display:flex;align-items:baseline;gap:12px;font:600 80px/1 var(--f);letter-spacing:-.055em;margin-top:12px}
.tag-price small{font:400 15px/1 var(--m);letter-spacing:0;color:var(--slate)}
.buy .btns{margin-top:28px}
.incl{list-style:none;margin:24px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;gap:12px;font-size:15px}
.incl li{display:flex;gap:10px;align-items:flex-start}
.incl svg{color:var(--blue-t);margin-top:4px}
dl.kv{margin:0;display:grid;grid-template-columns:180px 1fr;border-top:1px solid var(--line)}
dl.kv dt,dl.kv dd{margin:0;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
dl.kv dt{color:var(--slate)}
dl.kv dd.mono{font-size:13px;line-height:1.75;font-variant-numeric:tabular-nums}
.other{display:grid;gap:12px}
.other a{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:#fff;color:#0B0D14;text-decoration:none;border:1px solid rgba(255,255,255,.2);transition:background .2s var(--e)}
.other a:hover{background:#E8EDFC}
.other img{width:48px;height:48px}
.other b{display:block;font-weight:600;letter-spacing:-.02em}
.other small{display:block;color:#576074;font-size:14px}

/* footer */
footer{border-top:1px solid var(--line);background:var(--paper)}
.foot{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:32px;padding-block:64px 48px;font-size:14px}
.foot p{color:var(--slate);max-width:36ch;margin-top:14px}
.foot-h{margin:0 0 14px;font:500 12px/1 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.foot nav{display:grid;gap:10px}
.foot nav a{text-decoration:none}.foot nav a:hover{color:var(--blue-t)}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px 32px;border-top:1px solid var(--line);font:400 12px/1.6 var(--m);color:var(--slate)}

/* ── animated stage (How it works) ── */
.stage{position:relative;border:1px solid var(--line);border-radius:var(--R);background:var(--mist);overflow:hidden;aspect-ratio:7/5}
.mbar{display:flex;align-items:center;gap:14px;height:28px;padding:0 14px;font:500 12px/1 var(--f);color:var(--ink);background:color-mix(in srgb,var(--card) 70%,transparent);border-bottom:1px solid var(--line)}
.mbar .sp{flex:1}
.mbar .ico{display:grid;place-items:center;width:24px;height:20px;border-radius:5px}
.mbar .ico.on{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.mbar .ico svg{width:14px;height:14px}
.panel{position:absolute;top:36px;right:14px;width:min(300px,62%);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--lift);font-size:13px;overflow:hidden}
.ph{display:flex;align-items:center;gap:8px;padding:11px 14px;font-weight:600;border-bottom:1px solid var(--line)}
.ph svg{width:15px;height:15px;color:var(--blue-t)}
.pb{padding:14px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.pb .ttl{font-size:15px;font-weight:600;letter-spacing:-.02em}
.grp{background:var(--mist);border-radius:8px}
.gr{display:flex;align-items:center;gap:9px;padding:8px 10px}
.gr+.gr{border-top:1px solid var(--line)}
.gr svg{width:14px;height:14px;color:var(--blue-t)}
.gr b{font-weight:500}.gr .c{margin-left:auto;font-family:var(--m);color:var(--slate);font-variant-numeric:tabular-nums}
.gr>div{flex:1;min-width:0}
.gr small{display:block;font:400 11px/1.3 var(--m);color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbtn{height:30px;border-radius:7px;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;font-weight:600;transition:transform .15s,opacity .2s}
.pbtn.press{transform:scale(.97)}
.pbtn.off{background:var(--mist);color:var(--slate)}
.okl{display:flex;align-items:center;gap:8px;color:var(--ok);font-weight:500;min-height:18px}
.okl span{color:var(--ink)}
.okl .u{margin-left:auto;font-size:12px;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:2px 8px}
.desk{position:absolute;inset:28px 0 0 0}
.f{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;font:400 10px/1.2 var(--m);color:var(--ink);text-align:center;transition:transform .5s var(--e),opacity .4s}
.f i{display:block;width:34px;height:42px;border-radius:4px;background:var(--card);border:1px solid var(--line);position:relative}
.f i::after{content:attr(data-x);position:absolute;bottom:4px;left:0;right:0;font:600 7px/1 var(--m);color:var(--blue-t);text-transform:uppercase}
.f span{max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd{position:absolute;left:18px;display:flex;align-items:center;gap:8px;font:500 11px/1 var(--f);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--e)}
.fd svg{width:30px;height:24px;color:var(--blue-t);fill:color-mix(in srgb,var(--blue-t) 18%,transparent);stroke-width:1.5}
.stage.done .fd{opacity:1;transform:none}
.stage.done .f{opacity:0}
.rn{display:grid;gap:2px;padding:8px 10px}
.rn+.rn{border-top:1px solid var(--line)}
.rn .nn{font:500 12px/1.3 var(--m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn .was{font:400 11px/1.3 var(--m);color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot{position:absolute;left:7%;top:24%;width:50%;aspect-ratio:4/3;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--lift);padding:16px;display:grid;align-content:start;gap:8px;transition:transform .6s var(--e),opacity .5s}
.shot .l{height:8px;border-radius:4px;background:var(--line)}
.shot .t{font:600 16px/1.2 var(--f);letter-spacing:-.02em}
.shot .cap{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font:400 10px/1 var(--m);color:var(--slate)}
.stage.done .shot{transform:translate(8%,-6%) scale(.92)}
.caret::after{content:"";display:inline-block;width:1px;height:12px;background:var(--blue-t);margin-left:1px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.stage-art{position:absolute;inset:0}
.replay{position:absolute;z-index:3;left:14px;bottom:12px;font:500 12px/1 var(--f);display:inline-flex;gap:6px;align-items:center;padding:7px 10px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--slate);cursor:pointer}
.replay:hover{color:var(--ink)}
.sw{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--lift);overflow:hidden;transition:transform .5s var(--e),opacity .4s}
.sw .win-t{height:26px;font-size:11px}.sw .win-t i{width:9px;height:9px}
.chatw{left:5%;top:14%;width:52%;height:72%}
.chatw .bub{margin:14px;width:fit-content;max-width:80%;padding:9px 12px;border-radius:12px;background:var(--mist);font-size:13px}
.chatw .inp{position:absolute;left:12px;right:12px;bottom:12px;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;align-items:center;font-size:12px;color:var(--slate)}
.att{display:none;align-items:center;gap:8px;color:var(--ink);font:500 11px/1.3 var(--m)}
.att .th,.thl{display:block;border-radius:5px;border:1px solid var(--line);background:linear-gradient(var(--blue) 0 0) 12% 70%/18% 34% no-repeat,linear-gradient(var(--blue) 0 0) 36% 70%/18% 54% no-repeat,linear-gradient(var(--blue) 0 0) 60% 70%/18% 24% no-repeat,var(--mist)}
.att .th{width:64px;height:42px}
.thl{height:96px}
.stage.done .att{display:flex;animation:pop .35s var(--e)}
.stage.done .inp .hint{display:none}
.keys{position:absolute;left:18%;top:44%;display:flex;gap:6px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .3s var(--e);z-index:2}
.keys kbd{min-width:38px;height:38px;padding:0 8px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);border-bottom-width:3px;background:var(--card);font:600 16px/1 var(--f);color:var(--ink)}
.stage.k1 .keys{opacity:1;transform:none}
.term{left:4%;top:11%;width:46%;height:46%;background:#0E1016;border-color:#23262F}
.term .win-t{border-color:#23262F;color:#9AA0AE}.term .win-t i{background:#2A2E39}
.term pre{margin:0;padding:10px 12px;font:400 11px/1.55 var(--m);color:#D6DAE3;white-space:pre;overflow:hidden}
.term .sel{background:rgba(115,144,255,.35)}
.note{left:4%;top:61%;width:46%;height:26%}
.note p{margin:10px 12px;font-size:12px;line-height:1.5;color:var(--slate)}
.note .clean{display:none;color:var(--ink)}
.stage.done .note .clean{display:block;animation:pop .35s var(--e)}
.stage.done .note .hint{display:none}
.rep{display:grid;gap:6px;font-size:12px;color:var(--slate)}
.rep div{display:flex;gap:7px;align-items:center;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .3s var(--e)}
.rep svg{width:12px;height:12px;color:var(--ok);flex:none}
.stage.done .rep div{opacity:1;transform:none}
.stage.done .rep div:nth-child(2){transition-delay:.08s}.stage.done .rep div:nth-child(3){transition-delay:.16s}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* links page */
.lk{max-width:520px;margin:0 auto;padding:72px 24px 96px;display:grid;gap:14px}
.lk h1{font-size:40px;line-height:1.05}
.lk>p{color:var(--slate);margin-bottom:12px}
.lk a.card{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:16px;text-decoration:none;background:var(--card);transition:border-color .15s}
.lk a.card:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}
.lk a.card img{width:48px;height:48px}
.lk .ic{width:40px;height:40px;margin:4px;border-radius:10px;display:grid;place-items:center;background:var(--mist);color:var(--slate);border:1px solid var(--line)}
.lk .ic svg{width:20px;height:20px}
.lk b{display:block;font-weight:600;letter-spacing:-.02em}
.lk small{color:var(--slate);font-size:14px}

/* responsive */
@media (max-width:1080px){
  .hero h1{font-size:64px}
  .panels .pnl.p3{display:none}
}
@media (max-width:960px){
  .hero-t,.split,.sec-h,.spec,.buy,.stop,.end .w{grid-template-columns:1fr;gap:40px}
  .nav{display:none}.top-r{margin-left:auto}
  .facts,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts>div:nth-child(3),.stats>div:nth-child(3){padding-left:0;border-left:0}
  .facts>div:nth-child(n+3){border-top:1px solid var(--line)}.stats>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}.plan.hi{grid-column:1/-1}
  .priv,.rules{grid-template-columns:1fr}.priv>div,.priv>div+div{padding:24px 0;border-left:0}.priv>div+div{border-top:1px solid var(--line)}
  .foot{grid-template-columns:repeat(3,minmax(0,1fr))}.foot>div:first-child{grid-column:1/-1}
  .sec-h h2,.h2,.band h2,.end h2{font-size:44px}
  .p-hero h1{font-size:52px}
  .dicons{display:none}.desk-b{grid-template-columns:1fr;min-height:0;padding-bottom:28px}.panels{justify-content:center}
  .panels .pnl.p2{display:none}
  .shelf{justify-self:start;grid-template-columns:repeat(4,minmax(0,1fr))}
  .tour{gap:64px}
}
@media (max-width:720px){
  .plans{grid-template-columns:1fr}
  .tile{grid-column:1/-1;min-height:560px}
  .stage[data-demo=snappaste] .panel,.stage[data-demo=cleancopy] .panel{display:none}
  .chatw{left:6%;width:88%;top:11%;height:70%}.keys{left:10%;top:40%}
  .term{left:6%;width:88%;top:9%;height:46%}.note{left:6%;width:88%;top:58%;height:27%}
}
@media (max-width:560px){
  .search kbd{display:none}
  .w{padding-inline:16px}.top .w{gap:16px}.top .btn.sm .price{display:none}
  .hero{padding-block:40px 0}.hero h1{font-size:44px;line-height:1}.lede{font-size:17px}
  .kick{margin-bottom:20px}
  .desk-plate{margin-top:40px;border-radius:16px}.mb .mm{display:none}.mb{gap:10px;padding:0 10px}
  .desk-b{padding:16px 16px 20px}.panels .pnl{width:100%}
  .facts{margin-top:40px}.facts>div,.facts>div+div{padding:18px 12px 18px 0}.facts>div:nth-child(even){padding-left:16px}.facts b{font-size:30px}
  .sec,.band{padding-block:72px}.sec-h{margin-bottom:32px;gap:16px}.sec-h p{font-size:16px}
  .sec-h h2,.h2,.band h2,.end h2{font-size:34px}
  .tile-t{padding:24px 24px 0}.tile h3{font-size:24px}.tile-v .pnl{width:min(300px,86%)}.tile{min-height:540px}
  .stats>div,.stats>div+div{padding:24px 12px 8px 0}.stats>div:nth-child(even){padding-left:16px}.stats b{font-size:44px}
  .plan{padding:24px}.plan-p b{font-size:52px}
  .end{padding-block:72px}.shelf{grid-template-columns:repeat(2,minmax(0,1fr));justify-self:stretch}.shelf img{width:64px;height:64px}
  .p-hero{padding-block:40px 0}.p-hero h1{font-size:40px;line-height:1.02}.appid{margin-bottom:24px}
  .scene-b{padding:12px 12px 24px;justify-content:center}.scene .pnl{width:100%}
  .rules>div{grid-template-columns:1fr;gap:4px}
  .plate{padding:20px}
  .buy-card{padding:24px}.tag-price{font-size:60px}
  dl.kv{grid-template-columns:112px 1fr}
  .stage{aspect-ratio:4/5}.panel{width:78%}.shot{width:56%;left:6%;top:auto;bottom:7%}.mm{display:none}.f{width:62px}
  .foot{grid-template-columns:1fr 1fr}
  .btn{padding:0 18px}
}

/* app showcase (home hero): tabs + live demo */
.show{position:relative;isolation:isolate;overflow:hidden;margin-top:56px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;padding:24px;border-radius:var(--R);background:var(--plate)}
.show::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.show-tabs{display:grid;gap:10px;align-content:center}
.st{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;width:100%;padding:16px 18px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:background .2s var(--e),border-color .2s var(--e)}
.st:hover{background:rgba(255,255,255,.15)}
.st img{width:44px;height:44px;margin:-3px}
.st b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.st small{display:block;font-size:13px;line-height:1.4;color:#E8EDFC}
.st[aria-selected=true]{background:#fff;border-color:#fff;color:#0B0D14}
.st[aria-selected=true] small{color:#576074}
.st .bar{position:absolute;left:18px;right:18px;bottom:8px;height:3px;border-radius:3px;background:#E8EDFC;overflow:hidden;opacity:0}
.st[aria-selected=true] .bar{opacity:1}
.st .bar::after{content:"";position:absolute;inset:0;background:#2F56E0;transform-origin:left;transform:scaleX(var(--p,0))}
.show-stage .stage{border-color:rgba(255,255,255,.3)}
.show .replay{display:none}
.show :focus-visible{outline-color:#fff}
.st:focus-visible{outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.show{animation:plate .9s var(--e) .28s both}}

/* sticky buy bar (phones) */
.mcta{display:none}
@media (max-width:720px){
  .mcta{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:16px;background:var(--ink);color:var(--paper);box-shadow:0 12px 32px -12px rgba(0,0,0,.5);transform:translateY(calc(100% + 24px));transition:transform .3s var(--e);visibility:hidden}
  .mcta.on{transform:none;visibility:visible}
  .mcta img{width:36px;height:36px;margin:-2px}
  .mcta span{flex:1;min-width:0}
  .mcta b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em}
  .mcta small{display:block;font-size:12px;color:color-mix(in srgb,var(--paper) 65%,transparent)}
  .mcta .btn{height:40px}
  footer{padding-bottom:84px}
}

/* 404 */
.nf{padding-block:96px 112px}
.nf h1{font-size:64px;line-height:1;margin-top:16px}
.nf .lede{margin-top:20px}
.nf .search{max-width:560px}
.nf-apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:40px;max-width:880px}
.nf-apps a{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);text-decoration:none;transition:border-color .15s}
.nf-apps a:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}
.nf-apps img{width:48px;height:48px}
.nf-apps b{display:block;font-weight:600;letter-spacing:-.02em}
.nf-apps small{display:block;color:var(--slate);font-size:14px}

@media (max-width:960px){
  .show{grid-template-columns:1fr;padding:16px;gap:16px}
  .show-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .st{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px;padding:12px 6px 16px}
  .st small{display:none}
  .st b{font-size:13px}
  .nf-apps{grid-template-columns:1fr}
}
@media (max-width:560px){
  .show{margin-top:40px;border-radius:16px;padding:12px;gap:12px}
  .st img{width:36px;height:36px}.st b{font-size:11px}.st{padding:10px 4px 14px}
  .st .bar{left:10px;right:10px;bottom:6px}
  .nf{padding-block:56px 72px}.nf h1{font-size:40px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation:none!important}}

/* ───────────────────────── v11 (2026-10-08) ─────────────────────────
   Display type: Bricolage Grotesque (optical size on). Home: annoyance ledger, network log, pricing table. */
h1,h2,.h2,.tag-price,.plan-p b,.stats b,.facts b{font-family:var(--disp);font-optical-sizing:auto;letter-spacing:-.028em}
h1{font-weight:650}
h2,.h2{font-weight:600}
h3{font-family:var(--f)}
.logo{font-family:var(--disp);font-weight:650;letter-spacing:-.04em}
.eyebrow{display:flex;align-items:center;gap:10px;letter-spacing:.08em}
.eyebrow::before{content:"";width:16px;height:1px;background:currentColor}
.sec-h h2,.h2,.band h2,.end h2{font-size:56px;line-height:1.02}

/* hero: the headline runs the full measure, then the lede and actions sit on a 5/7 split */
.hero{padding-block:88px 0}
.hero-t{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"k k" "h h" "l a";gap:0 64px;align-items:start}
.hero-t .kick{grid-area:k}
.hero-t h1{grid-area:h;font-size:88px;line-height:.98;letter-spacing:-.032em;max-width:15ch}
.hero-t .lede{grid-area:l;margin-top:40px;font-size:20px;color:var(--slate)}
.hero-a{grid-area:a;margin-top:32px}
.hero-a .search{margin-top:0}
.kick{display:inline-flex;align-items:center;gap:10px;width:fit-content;padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:99px;background:var(--card);font:500 13px/1 var(--f);color:var(--ink);margin-bottom:32px;transition:border-color .15s}
.kick span{padding:5px 8px;border-radius:99px;background:var(--blue-soft);color:var(--blue-t);font:500 11px/1 var(--m);letter-spacing:.04em;text-transform:uppercase}
.kick:hover{text-decoration:none;border-color:color-mix(in srgb,var(--blue) 45%,var(--line))}
.hero h1 em{font-style:normal;color:var(--blue-t);white-space:nowrap}

/* showcase: tabs read as a list of rows on the blue desktop, the live demo is the hero image */
.show{margin-top:72px;padding:28px;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px}
.show-tabs{gap:0;align-content:center}
.st:last-child{border-bottom:0}
.st{border:0;border-bottom:1px solid rgba(255,255,255,.18);border-radius:0;background:none;padding:18px 12px 20px}
.st:hover{background:rgba(255,255,255,.06)}
.st[aria-selected=true]{background:#fff;border-radius:12px;border-color:transparent;box-shadow:0 12px 32px -16px rgba(8,16,60,.6)}
.st .bar{bottom:9px}

/* annoyance ledger */
.ledger{border-top:1px solid var(--line)}
.led{display:grid;grid-template-columns:72px minmax(0,6fr) minmax(0,5fr);gap:0 48px;padding-block:56px;border-bottom:1px solid var(--line)}
.led-n{font:500 13px/1 var(--m);color:var(--slate);padding-top:18px;font-variant-numeric:tabular-nums}
.led-id{display:flex;align-items:center;gap:14px}
.led-id img{width:48px;height:48px;margin:-3px}
.led-id h3{font:600 20px/1.2 var(--f);letter-spacing:-.02em}
.led-id h3 a{text-decoration:none}
.led-id h3 a:hover{color:var(--blue-t)}
.led-id small{display:block;margin-top:2px;font:400 12px/1.4 var(--m);color:var(--slate);font-variant-numeric:tabular-nums}
.led-h{margin-top:28px;font:600 40px/1.05 var(--disp);letter-spacing:-.028em;text-wrap:balance;max-width:18ch}
.diff{margin:28px 0 0;border:1px solid var(--line);border-radius:8px;background:var(--card);font:400 13px/1.6 var(--m);overflow:hidden}
.diff>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px 16px}
.diff>div+div{border-top:1px dashed var(--line);background:color-mix(in srgb,var(--blue) 4%,var(--card))}
.diff dt{font:500 11px/1.9 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.diff dd{margin:0;overflow-wrap:break-word;white-space:pre-wrap}
.diff .was{color:var(--slate);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--slate) 70%,transparent)}
.diff .now{color:var(--ink);font-weight:500}
.diff .now span{display:inline-block;margin-left:4px;padding:0 5px;border-radius:4px;background:var(--blue-soft);color:var(--blue-t);font-size:11px;line-height:1.6}
.led-p{margin-top:20px;color:var(--slate);max-width:52ch}
.led .row{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:24px}
.led-v{position:relative;align-self:stretch;min-height:440px;border-radius:var(--R);background:var(--mist);border:1px solid var(--line);overflow:hidden;display:flex;justify-content:center;padding-top:48px}
.led-v::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--ink) 12%,transparent) 1px,transparent 1px);background-size:20px 20px;mask-image:linear-gradient(to bottom,#000,transparent 70%)}
.led-v .pnl{position:relative;width:min(340px,84%);height:fit-content;box-shadow:var(--float);transition:transform .25s var(--e)}
.led-v::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(to top,var(--mist),transparent)}
@media (hover:hover){.led:hover .led-v .pnl{transform:translateY(-6px)}}

/* privacy: the whole network log */
.band{padding-block:120px}
.priv-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.priv-t h2{max-width:12ch}
.priv-t>p{margin-top:24px;color:#B7BFD9;font-size:17px;max-width:44ch}
.zero{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
.zero li{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:baseline;padding-block:14px;border-bottom:1px solid rgba(255,255,255,.16);font-size:15px;color:#D5DAEA}
.zero b{font:600 28px/1 var(--disp);color:#fff;font-variant-numeric:tabular-nums}
.log{margin:0;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#060A22;font:400 13px/1.6 var(--m);color:#C9D0E6;overflow:hidden;box-shadow:0 24px 64px -32px rgba(0,0,0,.8)}
.log figcaption{display:flex;align-items:center;gap:14px;height:40px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.1);font:500 12px/1 var(--m);color:#8D96B5}
.log figcaption span{display:flex;gap:6px}
.log figcaption i{width:10px;height:10px;border-radius:50%;background:#262C4A}
.log ol{list-style:none;margin:0;padding:8px 0;counter-reset:r}
.log li{counter-increment:r;padding:16px 20px 16px 56px;position:relative}
.log li+li{border-top:1px dashed rgba(255,255,255,.1)}
.log li::before{content:counter(r,decimal-leading-zero);position:absolute;left:20px;top:17px;color:#4D5679;font-size:12px}
.rq{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.rq b{font-weight:600;color:#8DA4FF}
.rq span{color:#fff}
.rq em{font-style:normal;color:#8D96B5;margin-left:auto;font-size:12px}
.log dl{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:4px 16px;margin:10px 0 0;padding-left:14px;border-left:1px solid rgba(141,164,255,.3)}
.log dt{color:#AEB8D9}
.log dd{margin:0;color:#8D96B5;overflow-wrap:anywhere}
.log-f{padding:14px 20px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:#8D96B5}
.log-f b{font-weight:500;color:#fff}

/* pricing table */
.tiers{border-top:1px solid var(--ink)}
.tier-hd,.tier{display:grid;grid-template-columns:minmax(0,4fr) 184px minmax(0,1.5fr) minmax(0,3fr) 196px;gap:24px;align-items:center}
.tier-hd{padding-block:12px;border-bottom:1px solid var(--line);font:500 11px/1 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.tier{padding:28px 0;border-bottom:1px solid var(--line)}
.tier h3{font-size:20px;letter-spacing:-.02em}
.tier-n p{margin-top:4px;color:var(--slate);font-size:15px}
.tier-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.tier-p b{font:600 56px/1 var(--disp);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tier-p s,.tier-p span{font:400 15px/1 var(--m);color:var(--slate);white-space:nowrap}
.tier-u{display:grid;gap:4px;font:400 12px/1 var(--m);color:var(--slate)}
@media (min-width:961px){.tier-u span{display:none}}
.tier-u b{font:500 17px/1 var(--m);color:var(--ink);font-variant-numeric:tabular-nums}
.tier-i{font-size:15px;color:var(--slate)}
.tier .btn{width:100%}
.tier.hi{margin-inline:-24px;padding-inline:24px;border-radius:var(--r);background:var(--blue-soft);border-bottom-color:transparent}
.tier.hi .tier-i{color:var(--ink)}
.tier-ic{display:flex;gap:4px;margin-top:12px}
.tier-ic img{width:28px;height:28px;margin:-2px}

.go{border-bottom:0}

/* closing band: a Mac desktop with the menu bar and the four apps */
.home-end{padding-block:0 112px}
.home-end .mb{margin-bottom:80px}
.home-end .shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.home-end .shelf a{grid-template-columns:auto;padding:24px 16px 20px;border-radius:12px;font-weight:500}
.home-end .shelf img{width:64px;height:64px}

/* product pages share the new type */
.p-hero h1{font-size:68px;line-height:1;letter-spacing:-.032em}
.tag-price{font-weight:650}

@media (max-width:1080px){.hero-t h1{font-size:72px}.led{grid-template-columns:48px minmax(0,1fr) minmax(0,1fr);gap:0 32px}}
@media (max-width:960px){
  .show{grid-template-columns:1fr;padding:16px;gap:16px}
  .st{border-bottom:0;border-radius:12px}
  .hero-t{grid-template-columns:1fr;grid-template-areas:"k" "h" "l" "a";gap:0}
  .hero-t .lede{margin-top:28px}
  .led{grid-template-columns:1fr;gap:32px;padding-block:48px}
  .led-n{padding-top:0}
  .led-v{min-height:380px}
  .priv-g{grid-template-columns:1fr;gap:48px}
  .tier-hd{display:none}
  .tier{grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;padding:28px 0}
  .tier-n{grid-column:1/-1}
  .tier-u{justify-items:end;text-align:right}
  .tier-i{grid-column:1/-1}
  .tier .btn{grid-column:1/-1}
  .home-end .shelf{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:560px){
  .hero{padding-block:48px 0}
  .hero-t h1{font-size:46px;line-height:1.02}
  .kick{margin-bottom:24px}
  .show{margin-top:48px;padding:12px}
  .st{padding:10px 4px 14px}
  .sec-h h2,.h2,.band h2,.end h2{font-size:36px}
  .led-h{font-size:30px;margin-top:20px}
  .diff>div{grid-template-columns:1fr;gap:2px;padding:10px 12px}
  .led-v{min-height:340px;padding-top:28px}
  .band{padding-block:80px}
  .log li{padding:14px 14px 14px 40px}
  .log li::before{left:14px;top:15px}
  .rq em{margin-left:0;flex-basis:100%}
  .log dl{grid-template-columns:1fr;gap:0}
  .log dd{margin-bottom:6px}
  .tier-p b{font-size:44px}
  .tier.hi{margin-inline:-12px;padding-inline:12px}
  .home-end .mb{margin-bottom:56px}
  .home-end .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-hero h1{font-size:42px}
}

/* ── v12: TalkShare demo (a call window, the live ring, the share in the menu bar) ── */
.callw{left:3%;top:14%;width:45%;height:56%;background:#0E1016;border-color:#23262F}
.callw .win-t{border-color:#23262F;color:#9AA0AE}.callw .win-t i{background:#2A2E39}
.vts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;height:calc(100% - 26px)}
.vt{position:relative;border-radius:8px;background:#181B24;display:grid;place-items:center;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .15s var(--e)}
.vt.on{box-shadow:inset 0 0 0 2px var(--ok)}
.vt .av{width:44px;height:44px;border-radius:50%;background:#2A2E39;color:#D6DAE3;display:grid;place-items:center;font:600 13px/1 var(--f)}
.vt small{position:absolute;left:8px;bottom:6px;font-size:11px;color:#C9CEDA}
.mbar .mbp{font:600 11px/1 var(--f);font-variant-numeric:tabular-nums;margin-left:4px}
.mbar .ico.wide{width:auto;padding:0 6px;display:flex;align-items:center}
.tsr{position:relative;width:92px;height:92px;margin:2px auto 4px}
.tsr svg{width:100%;height:100%;transform:rotate(-90deg)}
.tsr circle{fill:none;stroke-width:3.6}
.tsr .trk{stroke:var(--line)}
.tsr .arc{stroke:var(--blue);stroke-linecap:round}
.tsr b{position:absolute;inset:0;display:grid;place-items:center;font:600 22px/1 var(--f);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rec{width:7px;height:7px;border-radius:50%;background:#E5484D;flex:none}
.tsel{margin-left:auto;font:400 11px/1 var(--m);color:var(--slate);font-variant-numeric:tabular-nums}
.card-shot{display:block;width:100%;max-width:360px;height:auto;margin-inline:auto;border-radius:12px;border:1px solid var(--line);box-shadow:var(--lift)}
@media (max-width:720px){
  .callw{left:6%;width:88%;top:10%;height:46%}
  .stage[data-demo=talkshare] .panel{top:auto;bottom:4%;right:6%;width:60%}
}

/* ── v15: SlideFind demo (the search window: type a word, the slides that mention it stay, ⌘C copies one) ── */
.sfw{left:3%;right:3%;top:38px;bottom:54px;display:flex;flex-direction:column}
.sfq{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-bottom:1px solid var(--line);font:500 15px/1 var(--f);color:var(--ink);flex:none}
.sfq>svg{width:15px;height:15px;color:var(--slate);flex:none}
.sfq .qt:empty::before{content:"Search slides";font-weight:400;color:var(--slate)}
.sfq .seg{margin-left:auto;display:flex;gap:2px;padding:2px;border-radius:6px;background:var(--mist);font:500 10px/1 var(--f);color:var(--slate)}
.sfq .seg span{padding:4px 7px;border-radius:4px}
.sfq .seg span:first-child{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.sfb{flex:1;min-height:0;padding:10px 12px;overflow:hidden}
.sfh{display:flex;align-items:center;gap:12px;min-height:14px;margin-bottom:8px}
.sfc{font:500 11px/1 var(--f);color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
.sfg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
.sl{min-width:0}
.sl .th{position:relative;aspect-ratio:16/9;padding:7% 8%;display:grid;align-content:start;gap:5px;border:1px solid #DCE1EC;border-radius:5px;background:#F7F8FB;overflow:hidden;transition:box-shadow .15s var(--e)}
.sl .th b{font:600 8px/1.2 var(--f);color:#0B0D14;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl .th i{display:block;width:58%;height:3px;border-radius:2px;background:#D5DAE6}
.sl .th i+i{width:42%}
.sl .th.dk{background:#11173A;border-color:#11173A}
.sl .th.dk b{color:#fff}
.sl .th.dk i{background:rgba(255,255,255,.28)}
.sl .th .bars{position:absolute;right:8%;bottom:12%;display:flex;align-items:flex-end;gap:3px;height:50%}
.sl .th .bars u{width:7px;border-radius:1px;background:#B7C3F4}
.sl .th .bars u:last-child{background:#2F56E0}
.sl p{margin-top:5px;font:500 10px/1.25 var(--f);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl small{display:block;font:400 9px/1.3 var(--f);color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl mark{background:none;color:inherit}
.stage.q .sl mark{color:var(--blue-t)}
.stage.q .sl[data-m="0"]{display:none}
.stage.q .sl[data-m="1"]{animation:pop .3s var(--e) both}
.sl.sel .th{box-shadow:0 0 0 2px var(--blue)}
.sfh .okl{margin-left:auto;min-height:0;font-size:11px;white-space:nowrap;overflow:hidden}
.sfh .okl svg{width:12px;height:12px;flex:none}
.sfh .okl span{overflow:hidden;text-overflow:ellipsis}
.stage[data-demo=slidefind] .keys{left:auto;right:7%;top:auto;bottom:16%}
@media (max-width:720px){
  .sfq .seg{display:none}
  .sfg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl:nth-child(n+5){display:none}
}

/* ── v16: PasteGuard, HushMic and SnapCue (sold on their own), nine apps in the showcase ── */
.new{display:inline-block;margin-left:8px;padding:3px 6px;border-radius:99px;background:var(--blue-soft);color:var(--blue-t);font:500 10px/1 var(--m);letter-spacing:.06em;text-transform:uppercase;vertical-align:3px}
.tier-n p .new{margin:0 8px 0 0;vertical-align:1px}
.tier-b{display:grid;gap:8px}
.tier-b .buy-s{justify-content:space-between;width:100%}
@media (max-width:960px){.tier-b{grid-column:1/-1}}
.hudshot{width:min(410px,100%);border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--lift)}
.hudshot img{width:100%}

/* showcase: nine tabs fit beside the stage */
@media (min-width:961px){
  .show-tabs .st{padding:9px 12px 12px;grid-template-columns:34px 1fr;gap:12px}
  .show-tabs .st img{width:34px;height:34px}
  .show-tabs .st b{font-size:15px}
  .show-tabs .st small{font-size:12px;line-height:1.3}
  .show-tabs .st .bar{bottom:5px;height:2px}
}
@media (max-width:960px){
  .show-tabs{grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
  .show-tabs .st{padding:10px 2px 14px;gap:6px}
  .show-tabs .st img{width:36px;height:36px}
  .show-tabs .st b{font-size:11px;letter-spacing:-.01em}
}
@media (max-width:720px){
  .show-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .show-tabs .st{grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px;padding:9px 4px 12px}
  .show-tabs .st img{width:30px;height:30px;margin:-2px}
  .show-tabs .st b{font-size:12px;white-space:nowrap}
  .show-tabs .st .bar{left:8px;right:8px;bottom:4px;height:2px}
}

/* closing shelf: nine apps in a 3×3 grid */
.home-end .shelf{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.home-end .shelf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.home-end .shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.home-end .shelf a{padding:16px 6px 14px;font-size:13px}.home-end .shelf img{width:52px;height:52px}}

/* the on-screen notice (PasteGuard, SnapCue) */
.hud{position:absolute;z-index:3;top:40px;left:50%;display:flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:99px;background:var(--card);border:1px solid var(--line);box-shadow:var(--float);white-space:nowrap;opacity:0;transform:translate(-50%,-8px);transition:opacity .2s var(--e),transform .3s var(--e)}
.hud-i{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none}
.hud-i svg{width:16px;height:16px}
.hud b{display:block;font:600 13px/1.2 var(--f);letter-spacing:-.01em}
.hud small{display:block;font:400 11px/1.3 var(--f);color:var(--slate)}
.stage.hd .hud{opacity:1;transform:translate(-50%,0)}

/* PasteGuard demo: a .env copied, pasted into ChatGPT with the secrets masked */
.pgenv{top:24%;height:40%}
.pgenv pre{font-size:10px}
.pgenv .k{color:#8DA4FF}
.stage.done .pgenv .sel{background:none}
.pgchat{left:53%;top:24%;width:43%;height:66%}
.pgmsg{display:none;margin:12px 12px 0 auto;width:fit-content;max-width:calc(100% - 24px);padding:9px 11px;border-radius:12px;background:var(--mist)}
.pgmsg pre{margin:0;font:400 9.5px/1.55 var(--m);color:var(--ink);white-space:pre-wrap;word-break:break-all}
.pgmsg u{text-decoration:none;color:var(--blue-t);background:var(--blue-soft);border-radius:3px;padding:0 1px}
.pgmsg p{margin-top:6px;font-size:12px}
.stage.done .pgmsg{display:block;animation:pop .35s var(--e)}
.pgchat .inp{position:absolute;left:12px;right:12px;bottom:12px;min-height:36px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;align-items:center;font-size:12px;color:var(--slate)}
.stage[data-demo=pastemask] .keys{left:20%;top:68%}
.stage[data-demo=pastemask].v .keys{left:66%;top:72%}

/* HushMic demo: a cough on a Zoom call mutes the Mac's mic, then it comes back */
.vt .lvl{position:absolute;right:8px;bottom:7px;display:flex;align-items:flex-end;gap:2px;height:14px}
.vt .lvl u{display:block;width:3px;height:20%;border-radius:1px;background:var(--ok);transition:height .1s}
.stage.mut .vt .lvl u{background:#5A6070;height:12%!important}
.vt .cough{position:absolute;top:8px;left:8px;padding:3px 7px;border-radius:99px;background:#E5484D;color:#fff;font:600 10px/1 var(--f);opacity:0;transform:scale(.9);transition:opacity .15s,transform .2s var(--e)}
.vt.cg .cough{opacity:1;transform:none}
.cmi .m-off{display:none}
.stage.mut .cmi .m-on{display:none}
.stage.mut .cmi .m-off{display:block;color:#E5484D}
.stage.mut .mbar .cmi{background:color-mix(in srgb,#E5484D 16%,transparent)}
.cms{display:flex;gap:8px;align-items:flex-start;min-width:0}
.cms .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);margin-top:5px;flex:none;transition:background .15s}
.stage.mut .cms .dot{background:#E5484D}
.cms b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em}
.cms small{display:block;font-size:11px;line-height:1.35;color:var(--slate)}
.cmn{display:flex;align-items:baseline;gap:8px}
.cmn b{font:600 30px/1 var(--f);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cmn span{font-size:12px;color:var(--slate)}
.cmk{display:block;margin-top:-6px;font-size:11px;color:var(--slate)}
.cmr .gr{padding:6px 10px;font-size:12px}
.cmr .tm{width:56px;flex:none;font:400 10px/1 var(--m);color:var(--slate);font-variant-numeric:tabular-nums}
.cmr .c{white-space:nowrap}
.cmr .c.now{color:#E5484D;font-family:var(--f)}
.cmr .gr.add{animation:pop .3s var(--e)}

/* SnapCue demo: two claps, the Test strip marks them, the music pauses */
.scply{left:4%;top:16%;width:46%;height:auto;padding-bottom:12px}
.scp{display:grid;grid-template-columns:44px minmax(0,1fr) 34px;gap:12px;align-items:center;padding:14px 14px 10px}
.scp .art{width:44px;height:44px;border-radius:8px;background:var(--blue-soft);color:var(--blue-t);display:grid;place-items:center}
.scp .art svg{width:20px;height:20px}
.sct b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em}
.sct small{display:block;font-size:11px;color:var(--slate)}
.scb{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center}
.scb svg{width:14px;height:14px}
.scb .s-pl{display:none;fill:currentColor;stroke:none}
.stage.paused .scb .s-pa{display:none}
.stage.paused .scb .s-pl{display:block}
.scbar{margin:0 14px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.scbar u{display:block;height:100%;width:var(--pg,43%);background:var(--ink)}
.sctm{display:flex;justify-content:space-between;margin:6px 14px 0;font:400 10px/1 var(--m);color:var(--slate);font-variant-numeric:tabular-nums}
.clap{position:absolute;left:17%;top:60%;z-index:2;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:99px;background:var(--card);border:1px solid var(--line);box-shadow:var(--lift);color:var(--blue-t);font:600 12px/1 var(--f);opacity:0;transform:scale(.9);transition:opacity .12s,transform .18s var(--e)}
.clap svg{width:20px;height:20px}
.clap.on{opacity:1;transform:none}
.sch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:-4px}
.sch b{font-size:12px;font-weight:600}
.sch small{font-size:10px;color:var(--slate)}
.strip{position:relative;height:26px;border:1px solid var(--line);border-radius:6px;background:var(--mist);display:flex;justify-content:space-around;align-items:center;padding:0 10%}
.strip i{display:block;width:1px;height:8px;background:var(--line)}
.strip u{position:absolute;top:5px;width:3px;height:14px;border-radius:2px;background:var(--blue);opacity:0;transform:scaleY(.4);transition:opacity .1s,transform .2s var(--e)}
.strip .c1{left:24%}
.strip .c2{left:33%}
.stage.c1 .strip .c1,.stage.c2 .strip .c2{opacity:1;transform:none}
.scok{font-size:12px;min-height:16px}
.stage[data-demo=clapremote] .hud{left:27%;top:auto;bottom:20%}
.scok svg{width:12px;height:12px;flex:none}
.scok span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){
  .pgenv{left:6%;width:88%;top:11%;height:31%}
  .pgchat{left:6%;width:88%;top:46%;height:46%}
  .stage[data-demo=pastemask] .keys{left:10%;top:30%}
  .stage[data-demo=pastemask].v .keys{left:60%;top:80%}
  .stage[data-demo=hushmic] .panel{top:auto;bottom:4%;right:6%;width:62%}
  .cmr .gr:nth-child(n+2){display:none}
  .scply{left:6%;width:88%;top:11%}
  .stage[data-demo=clapremote] .panel{top:auto;bottom:4%;right:6%;width:64%}
  .stage[data-demo=clapremote] .panel .grp{display:none}
  .clap{left:8%;top:44%}
  .stage[data-demo=clapremote] .hud{left:50%;top:52px;bottom:auto}
  .stage[data-demo=clapremote] .cms small{display:none}
}

/* ── Home v14 (2026-10-23): "What's bugging you?" in Liquid Glass, an itemized receipt for pricing, a glass Dock ── */
:root{--aura:#2F56E0;--aura1:#7C96FF;--aura2:#A8D8FF;--aura3:#C9D6FF;--glass:rgba(255,255,255,.56);--glass-hi:rgba(255,255,255,.8);--rim:rgba(255,255,255,.72);--edge:rgba(20,30,80,.12);--hair:rgba(11,13,20,.08);
--rc:#FFFFFF;--rc-ink:#16181F;--rc-dim:#555A66;--rc-rule:#A3A8B3}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--aura:#1E3699;--aura1:#2B47D9;--aura2:#0F5C9C;--aura3:#151E52;--glass:rgba(20,26,48,.52);--glass-hi:rgba(32,40,70,.74);--rim:rgba(255,255,255,.14);--edge:rgba(0,0,0,.5);--hair:rgba(255,255,255,.08);
--rc:#161A28;--rc-ink:#ECEEF4;--rc-dim:#98A0B3;--rc-rule:#454C61}}
:root[data-theme=dark]{--aura:#1E3699;--aura1:#2B47D9;--aura2:#0F5C9C;--aura3:#151E52;--glass:rgba(20,26,48,.52);--glass-hi:rgba(32,40,70,.74);--rim:rgba(255,255,255,.14);--edge:rgba(0,0,0,.5);--hair:rgba(255,255,255,.08);
--rc:#161A28;--rc-ink:#ECEEF4;--rc-dim:#98A0B3;--rc-rule:#454C61}

/* the light behind the glass: Tidlet blue with three soft pools, like a Tahoe wallpaper */
.hero-ask .show,.aura{background-color:var(--aura);background-image:radial-gradient(55% 70% at 8% 0%,var(--aura1),transparent 70%),radial-gradient(45% 60% at 96% 4%,var(--aura2),transparent 72%),radial-gradient(70% 70% at 60% 110%,var(--aura3),transparent 70%)}
.hero-ask .show::before{display:none}
.gl{background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);border:1px solid var(--rim);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 .5px var(--edge)}

/* hero: the question, then the search window */
.hero.hero-ask{padding-block:64px 0}
.hero-ask .hero-t{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"h a";gap:0 64px;align-items:end}
.hero-ask .hero-t>div:first-child{grid-area:h}
.hero-ask .hero-a{grid-area:a;margin-top:0}
.hero-ask .hero-t h1{font-size:76px;line-height:.98}
.hero-ask .kick{margin-bottom:28px}
.hero-ask .lede{margin-top:0;font-size:18px;text-wrap:pretty}
.hero-ask .show{margin-top:48px;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px;padding:24px}

/* Spotlight bar */
.ask{grid-column:1/-1;display:flex;align-items:center;gap:14px;height:68px;padding:0 16px 0 22px;border-radius:16px;background:var(--glass-hi);color:var(--ink)}
.ask>svg{width:22px;height:22px;flex:none;color:var(--slate);stroke-width:2.2}
.ask-in{position:relative;flex:1;min-width:0;height:100%}
.ask input,.ask-ghost{position:absolute;inset:0;width:100%;height:100%;font:500 26px/1 var(--disp);letter-spacing:-.025em;color:var(--ink)}
.ask input{border:0;outline:0;background:none;padding:0}
.ask input::placeholder{color:var(--slate)}
.ask-ghost{display:none;align-items:center;pointer-events:none;white-space:nowrap;overflow:hidden}
.show.demo .ask-ghost{display:flex}
.show.demo .ask input::placeholder{color:transparent}
.ask-caret{flex:none;width:2px;height:30px;margin-left:2px;border-radius:1px;background:var(--blue-t);animation:blink 1s steps(1) infinite}
.ask kbd{font:500 12px/1 var(--m);color:var(--slate);border:1px solid var(--edge);border-bottom-width:2px;border-radius:6px;padding:4px 7px}
.ask:focus-within{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 3px rgba(255,255,255,.7)}

/* results: a glass list, Spotlight's blue selection */
.show-l{display:flex;flex-direction:column;min-width:0;padding:8px;border-radius:16px}
.ask-h{padding:8px 10px 10px;font:500 12px/1.35 var(--m);color:var(--slate);overflow-wrap:anywhere}
.ask-h a{color:var(--blue-t)}
.hero-ask .show-tabs{gap:0;align-content:start}
.hero-ask .st{color:var(--ink);background:none;border:0;border-bottom:1px solid var(--hair);border-radius:10px;box-shadow:none}
.hero-ask .st:last-child{border-bottom:0}
.hero-ask .st:hover{background:var(--hair)}
.hero-ask .st small{color:var(--slate)}
.hero-ask .st[aria-selected=true]{background:var(--blue);color:#fff;border-color:transparent}
.hero-ask .st[aria-selected=true] small{color:rgba(255,255,255,.86)}
.hero-ask .st[aria-selected=true] img{border-radius:9px;box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.hero-ask .st .bar{background:rgba(255,255,255,.28)}
.hero-ask .st .bar::after{background:#fff}
.hero-ask .st.dim b{color:var(--slate);font-weight:500}
.hero-ask .st.dim img{opacity:.5}
@media (min-width:961px){
  .hero-ask .st.dim{padding-block:7px 8px}
  .hero-ask .st.dim small{display:none}
  .hero-ask .st.dim img{width:26px;height:26px;margin:1px 4px}
}
.hero-ask .show :focus-visible{outline-color:var(--blue-t)}
.hero-ask .show .st[aria-selected=true]:focus-visible{outline-color:#fff}

@media (max-width:1080px){.hero-ask .hero-t h1{font-size:60px}}
@media (max-width:960px){
  .hero-ask .hero-t{grid-template-columns:1fr;grid-template-areas:"h" "a";gap:28px}
  .hero-ask .show{grid-template-columns:1fr;padding:16px;gap:12px}
  .hero-ask .st{border-bottom:0}
}
@media (max-width:720px){
  .hero-ask .hero-t{gap:24px}
  .hero-ask .hero-t h1{font-size:42px;line-height:1}
  .hero-ask .lede{font-size:17px}
  .hero-ask .show{margin-top:40px;padding:12px;gap:10px;border-radius:16px}
  .ask{height:56px;gap:10px;padding:0 14px;border-radius:12px}
  .ask>svg{width:18px;height:18px}
  .ask input,.ask-ghost{font-size:18px}
  .ask-caret{height:22px}
  .ask kbd{display:none}
  .show-l{padding:6px;border-radius:12px}
  .ask-h{padding:6px 8px 8px;font-size:11px}
}

/* pricing: the bill, itemized */
.bill{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:start}
.bill-t{position:sticky;top:120px;display:grid;gap:20px;justify-items:start}
.bill-t h2{font-size:56px;line-height:1.02;text-wrap:balance}
.bill-t>p:not(.eyebrow){color:var(--slate);font-size:18px;max-width:46ch}
.bill-t .btns{margin-top:4px}
.bill-t>p.fine{font-size:13px;max-width:56ch}
.rcpt{margin:0;padding:40px 44px 52px;border-radius:var(--R);background:var(--mist)}
.rc-paper{position:relative;padding:30px 26px 22px;background:var(--rc);color:var(--rc-ink);font:400 13.5px/1.5 var(--m);font-variant-numeric:tabular-nums}
.rc-paper::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:linear-gradient(-45deg,transparent 33%,var(--rc) 33% 66%,transparent 66%),linear-gradient(45deg,transparent 33%,var(--rc) 33% 66%,transparent 66%);background-size:14px 20px;background-position:0 -10px}
.rc-h{display:grid;justify-items:center;gap:2px;padding-bottom:14px;text-align:center;font-size:12px;color:var(--rc-dim)}
.rc-h b{font:700 24px/1.2 var(--m);letter-spacing:.16em;color:var(--rc-ink)}
.rc-cols,.rc-items li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:baseline}
.rc-cols{padding:9px 0;border-block:1.5px dashed var(--rc-rule);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--rc-dim)}
.rc-items{list-style:none;margin:0;padding:8px 0}
.rc-items li{padding:4px 0}
.rn{color:var(--rc-dim)}
.ri a{font-weight:600;color:inherit;text-decoration:none}
.ri a:hover{text-decoration:underline;text-underline-offset:3px}
.ri small{display:block;font-size:11.5px;line-height:1.35;color:var(--rc-dim)}
.rc-g{padding:10px 0;border-top:1.5px dashed var(--rc-rule)}
.rt{display:flex;justify-content:space-between;gap:16px;padding:2px 0}
.rt span:last-child{text-align:right;white-space:nowrap}
.rc-tot{border-top:4px double var(--rc-ink)}
.rt.big{font:700 22px/1.3 var(--m);padding-block:2px 4px}
.rc-s{margin-bottom:2px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--rc-dim)}
.rc-f{text-wrap:balance;padding:14px 0 16px;border-top:1.5px dashed var(--rc-rule);text-align:center;font-size:12px;color:var(--rc-dim)}
.rc-paper .btn{width:100%}
.rc-stamp{position:absolute;top:14px;right:14px;padding:5px 8px;border:2px solid var(--blue-t);border-radius:6px;transform:rotate(-9deg);font:700 11px/1.1 var(--m);letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--blue-t)}
@media (max-width:960px){.bill{grid-template-columns:1fr;gap:40px}.bill-t{position:static}.bill-t h2{font-size:44px}}
@media (max-width:720px){
  .bill-t h2{font-size:34px}.bill-t>p:not(.eyebrow){font-size:16px}
  .rcpt{padding:16px 12px 28px;border-radius:16px}
  .rc-paper{padding:24px 14px 18px;font-size:12.5px}
  .rc-cols,.rc-items li{grid-template-columns:24px minmax(0,1fr) auto}
  .rc-stamp{top:10px;right:8px;font-size:10px}
}

/* closing band: the nine tools as a glass Dock */
.home-end .w{grid-template-columns:1fr;gap:48px}
.dock{display:flex;align-items:flex-end;gap:8px;justify-self:start;max-width:100%;height:86px;padding:10px 12px 12px;border-radius:24px}
.dock a{position:relative;display:block;flex:none;width:64px;height:64px;transition:width .2s var(--e),height .2s var(--e)}
.dock img{display:block;width:100%;height:100%}
.dock .tip{position:absolute;bottom:calc(100% + 10px);left:50%;padding:5px 9px;border-radius:7px;background:rgba(11,13,20,.86);color:#fff;font:600 12px/1 var(--f);white-space:nowrap;opacity:0;transform:translateX(-50%);transition:opacity .15s var(--e);pointer-events:none}
.dock a:hover .tip,.dock a:focus-visible .tip{opacity:1}
@media (hover:hover){.dock a:hover{width:88px;height:88px}.dock a:hover+a,.dock a:has(+a:hover){width:74px;height:74px}}
@media (max-width:720px){.dock{gap:4px;height:auto;padding:8px;border-radius:16px}.dock a{width:32px;height:32px}}
/* v15 (2026-11-02): Tidlet for iPhone section (#iphone), App Store badge, iPhone icon on /links */
.ios{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.ios-t>p:not(.eyebrow):not(.fine){margin-top:24px;font-size:18px;line-height:1.6;color:var(--slate);max-width:56ch}
.ios-t h2{max-width:16ch}
.as-badge{display:inline-block;margin-top:32px;border-radius:10px;line-height:0;transition:opacity .15s ease-out}
.as-badge:hover{opacity:.85}
.as-badge img{width:150px;height:50px}
.ios-t>p.fine{margin-top:16px}
.ios-ic{display:block;flex:none;line-height:0}
.ios-ic img{border-radius:22.5%;outline:1px solid var(--line);outline-offset:-1px}
.ios-c .ios-ic img{width:88px;height:88px}
.ios-l{margin:32px 0 0;border-top:1px solid var(--line)}
.ios-l div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;padding-block:16px;border-bottom:1px solid var(--line)}
.ios-l dt{font:500 12px/1.6 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding-top:2px}
.ios-l dd{margin:0;font-size:15px;line-height:1.5;color:var(--slate)}
.card .ios-ic{display:block;background:none;border:0;padding:0;margin:0;width:48px;height:48px}
.card .ios-ic img.l,.card .ios-ic img.d{width:40px;height:40px;margin:4px}
@media (max-width:960px){.ios{grid-template-columns:1fr;gap:40px}}
@media (max-width:560px){.ios-c .ios-ic img{width:64px;height:64px}.ios-l{margin-top:24px}.ios-l div{grid-template-columns:1fr;gap:4px}.ios-t>p:not(.eyebrow):not(.fine){font-size:16px}}