/* Mirror forside.
   Motion verb: things open from the right edge, the way Chrome's side panel does.
   State (who you are, which buyer, which module, which billing period) lives in native
   radio inputs and is read with :has(), so every view works without JavaScript and with a
   keyboard. Swapped views share one grid cell, so switching never moves the page. */

@font-face{font-family:'Familjen Grotesk';src:url('assets/fonts/familjen-grotesk-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Hedvig Letters Serif';src:url('assets/fonts/hedvig-letters-serif-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Grotesk Fallback';src:local('Arial');size-adjust:96%;ascent-override:96%;descent-override:26%;line-gap-override:0%}

:root{
  --ground:#F4F5F2;--paper:#FFF;--ink:#212327;--muted:#51575C;--line:rgba(33,35,39,.14);--wash:#E6E8E3;--wash-2:#F0F1EE;
  --lime:#D1F95A;--night:#191B1E;--night-t:#B7BDBF;--night-l:rgba(244,245,242,.16);
  --sans:'Familjen Grotesk','Grotesk Fallback',ui-sans-serif,system-ui,sans-serif;--serif:'Hedvig Letters Serif',Georgia,serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --g:clamp(16px,2.78vw,48px);
  --t-h1:clamp(60px,7.36vw,136px);--t-h2:clamp(38px,4.45vw,80px);
  --bar:64px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.45 var(--sans);-webkit-font-smoothing:antialiased;font-synthesis:none;text-wrap:pretty;overflow-wrap:break-word}
img,svg,video{display:block}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{text-wrap:balance}
button{font:inherit;color:inherit}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0}
ol,ul{margin:0;padding:0;list-style:none}
mark{background:var(--lime);color:inherit;padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
section[id]{scroll-margin-top:var(--bar)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nb{white-space:nowrap}
.wrap{padding-inline:var(--g)}
.skip{position:absolute;left:12px;top:-64px;z-index:50;padding:10px 16px;border-radius:8px;background:var(--ink);color:var(--ground)}
.skip:focus{top:12px}

/* Swap: views share a cell, the hidden one leaves the tab order and the a11y tree */
.swap{display:grid;min-width:0}
.swap>*{grid-area:1/1;min-width:0}
[data-for],[data-k],[data-p]{transition:opacity .4s var(--ease) .06s,translate .55s var(--ease) .06s,visibility 0s}
html:has(#r-saelger:checked) [data-for="chef"],
html:has(#r-chef:checked) [data-for="saelger"],
html:has(#k-peter:not(:checked)) [data-k="peter"],
html:has(#k-helena:not(:checked)) [data-k="helena"],
html:has(#k-jonas:not(:checked)) [data-k="jonas"],
html:has(#p-aar:not(:checked)) [data-p="aar"],
html:has(#p-md:not(:checked)) [data-p="md"]{opacity:0;visibility:hidden;translate:10px 0;transition:opacity .18s linear,translate .18s linear,visibility 0s .18s}

/* Header */
.top{position:relative;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px;padding-inline:var(--g)}
.top-r{display:flex;align-items:center;gap:12px}
.logo{display:inline-block;border-radius:4px}
.logo img{height:30px;width:auto;transition:translate .45s var(--ease)}
.logo:hover img{translate:4px 0}
.nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);font-size:15px;font-weight:500}
.nav a{position:relative;padding:8px 0;text-decoration:none;white-space:nowrap}
.nav a:not(.login),.bar-nav a{background:linear-gradient(currentColor,currentColor) no-repeat right calc(100% - 4px)/0 1.5px;transition:background-size .45s var(--ease)}
.nav a:not(.login):hover,.bar-nav a:hover,.bar-nav a[aria-current="true"]{background-position:left calc(100% - 4px);background-size:100% 1.5px}
.bar-nav a[aria-current="true"]:hover{background-size:100% 3px}
.login{position:relative;padding:9px 18px;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;isolation:isolate;transition:color .3s}
.login::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateX(101%);transition:transform .45s var(--ease)}
.login:hover{color:var(--ground)}
.login:hover::before{transform:none}
.menu{display:none;position:relative}
.menu summary{display:flex;align-items:center;height:44px;padding:0 4px;font-weight:600;cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:48px;z-index:40;display:flex;flex-direction:column;min-width:240px;max-height:calc(100dvh - 90px);overflow:auto;padding:10px;border-radius:14px;background:var(--paper);box-shadow:0 18px 50px rgba(33,35,39,.2)}
.menu nav a{padding:10px 12px;text-decoration:none;font-weight:600}
.menu nav .m-2{padding:7px 12px 7px 24px;font-size:15px;font-weight:500;color:var(--muted)}
/* Sub-pages in the header: a real link that also opens on hover and keyboard focus */
.nav-g{position:relative}
.nav-g>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;rotate:45deg;translate:0 -3px}
.nav-d{position:absolute;left:-14px;top:100%;display:grid;width:300px;padding:8px;border-radius:14px;background:var(--paper);box-shadow:0 18px 50px rgba(33,35,39,.2),0 0 0 1px var(--line);opacity:0;visibility:hidden;translate:0 6px;transition:opacity .2s var(--ease),translate .3s var(--ease),visibility 0s .2s}
.nav-g:hover .nav-d,.nav-g:focus-within .nav-d{opacity:1;visibility:visible;translate:none;transition:opacity .2s var(--ease),translate .3s var(--ease),visibility 0s}
.nav.off .nav-d{opacity:0;visibility:hidden}
.nav .nav-d a{display:block;padding:9px 12px;border-radius:10px;background:none;white-space:normal;line-height:1.25;transition:background .2s}
.nav .nav-d a:hover{background:var(--wash)}
.nav-d b{display:block;font-weight:600}
.nav-d span{display:block;margin-top:1px;font-size:13.5px;font-weight:400;color:var(--muted)}
/* Cookie choice: both answers weigh the same */
.ck{position:fixed;right:var(--g);bottom:var(--g);z-index:50;width:min(400px,calc(100vw - 2*var(--g)));padding:16px 18px;border-radius:16px;background:var(--paper);box-shadow:0 18px 50px rgba(33,35,39,.22),0 0 0 1px var(--line);font-size:14.5px;line-height:1.4}
.ck[hidden]{display:none}
.ck p{margin:0 0 10px}
.ck .ck-h{margin-bottom:4px;font-size:16px;font-weight:600}
.ck-b{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ck-b button{height:44px;border:0;border-radius:999px;background:var(--ink);color:var(--ground);font-size:14.5px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.ck-b button:hover{background:#000;color:var(--lime)}
.ck-open{display:block;padding:4px 0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ck-open:hover{text-decoration:underline}

/* CTA: ink opens over the pill from the right edge, and the arrow travels through its disc */
.cta{position:relative;flex:none;display:inline-flex;align-items:center;gap:16px;height:60px;padding:0 8px 0 26px;overflow:hidden;isolation:isolate;border-radius:999px;background:var(--lime);color:var(--ink);font-size:18px;font-weight:600;letter-spacing:-.012em;text-decoration:none;white-space:nowrap;transition:color .35s var(--ease) .05s,transform .25s var(--ease)}
.cta::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--ink);transform:translateX(102%);transition:transform .6s var(--ease)}
.cta:active{transform:scale(.985)}
@media (hover:hover){
  .cta:hover{color:var(--lime)}
  .cta:hover::before{transform:none}
  .cta:hover .ar{background:var(--lime);color:var(--ink)}
}
.ar{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;overflow:hidden;border-radius:50%;background:var(--ink);color:var(--lime);transition:background .35s var(--ease) .05s,color .35s var(--ease) .05s}
.ar svg{transition:transform .5s var(--ease)}
.ar svg:nth-child(2){position:absolute;transform:translateX(-44px)}
.cta:hover .ar svg:nth-child(1){transform:translateX(44px)}
.cta:hover .ar svg:nth-child(2){transform:none}
.cta-s{height:44px;padding:0 5px 0 18px;gap:12px;font-size:15px}
.cta-s .ar{width:34px;height:34px}
.cta-w{display:flex;justify-content:space-between}
.cta .sm{display:none}
.fine{margin:0;font-size:14px;line-height:1.42;color:var(--muted)}

/* Hero: reads what, who, how to get in */
.hero{display:grid;grid-template-columns:11fr 13fr;min-height:calc(max(700px,100svh) - 72px)}
.hero-l{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2vw,30px);min-width:0;padding:clamp(20px,2.4vw,40px) var(--g) clamp(28px,3vw,48px)}
.h1{margin:0 0 0 -.03em;font-size:var(--t-h1);font-weight:600;line-height:.98;letter-spacing:-.045em}
.ln{display:block;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em;white-space:nowrap}
.ln>span{display:block;animation:ln-in .7s var(--ease) both;animation-delay:var(--d,0s)}
.lead{margin:0;max-width:30em;font-size:clamp(18px,1.46vw,24px);line-height:1.34;font-weight:500;letter-spacing:-.012em}
.pick-group legend{margin-bottom:8px;font-size:14px;font-weight:600}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick{position:relative;display:block;padding:14px 16px 15px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(33,35,39,.26);cursor:pointer;transition:background .3s,box-shadow .3s,transform .45s var(--ease)}
.pick input,.chip input,.seg-f input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pick:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--ink)}
.pick b{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:600;letter-spacing:-.012em;line-height:1.2}
.pick b::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);transition:background .3s,box-shadow .3s}
.pick span{display:block;margin-top:5px;font-size:14px;line-height:1.36;color:var(--muted)}
.pick:has(:checked){background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink)}
.pick:has(:checked) b::before{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink),inset 0 0 0 4px var(--paper)}
.pick:has(:focus-visible),.chip:has(:focus-visible),.seg-f label:has(:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.act{display:flex;align-items:center;gap:20px}
.act .fine{max-width:25em}

.stage{--dock:clamp(340px,27vw,500px);position:relative;overflow:hidden;min-width:0;background:var(--wash)}
.photo{position:absolute;inset:0 var(--dock) 0 0;transition:clip-path .9s var(--ease)}
.photo img{width:100%;height:100%;object-fit:cover}
/* The incoming photo opens over the outgoing one, which stays put until it is covered */
html:has(#r-saelger:checked) .photo[data-for="saelger"],
html:has(#r-chef:checked) .photo[data-for="chef"]{z-index:1;clip-path:inset(0);opacity:1;visibility:visible;translate:none;transition:clip-path .9s var(--ease)}
html:has(#r-saelger:checked) .photo[data-for="chef"],
html:has(#r-chef:checked) .photo[data-for="saelger"]{z-index:0;clip-path:inset(0 0 0 100%);opacity:1;visibility:visible;translate:none;transition:clip-path 0s .9s}

/* The side panel is the page's one recurring object: docked to the right edge, full height */
.dock{position:absolute;z-index:2;top:0;right:0;bottom:0;display:flex;width:var(--dock);background:var(--paper);box-shadow:-1px 0 0 var(--line),-30px 0 70px rgba(25,27,30,.16)}
.hero .dock{animation:dock-in 1s var(--ease) .12s both}
.dock-in{flex:1}
.pane{display:flex;flex-direction:column;min-width:0;padding:clamp(16px,1.5vw,24px)}
.pane-f{display:flex;align-items:center;gap:12px;margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:13px;line-height:1.35;color:var(--muted)}
.pill{flex:none;padding:7px 14px;border-radius:999px;background:var(--ink);color:var(--ground);font-size:13px;font-weight:600}
.say-l{font-size:clamp(19px,1.5vw,24px);line-height:1.3}
/* The draft sits in a field because that is where the seller edits it */
.draft{flex:1;min-height:120px;padding:12px 14px;border-radius:12px;background:#FAFAF8;box-shadow:inset 0 0 0 1px var(--line)}
.draft+.pane-f{margin-top:0;padding-top:12px;border-top:0}
.hero .say-l{font-size:clamp(20px,1.85vw,31px);line-height:1.26}
.hero .stats b{font-size:clamp(30px,2.7vw,46px)}
.hero .tbl td{padding-block:11px}
.tbl+.lab{margin-top:18px}

/* Product card */
.ui{padding:18px;border-radius:16px;background:var(--paper);box-shadow:0 18px 44px rgba(25,27,30,.14),0 2px 6px rgba(25,27,30,.06)}
.ui-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;font-size:13px;color:var(--muted)}
.ui-h b{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:14px;font-weight:600}
.who{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center}
.who strong{display:block;font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.who .t{display:block;font-size:13px;line-height:1.3;color:var(--muted)}
.av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--lime);font-size:13px;font-weight:700}
.tag{padding:3px 9px;border-radius:999px;background:var(--wash-2);font-size:12px;color:var(--muted)}
.brief{margin:12px 0 0;border-top:1px solid var(--line)}
.brief>div{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.brief dt{color:var(--muted)}
.brief dd{margin:0;min-width:0}
.brief small{display:block;font-size:12px;color:var(--muted)}
.lab{margin:12px 0 4px;font-size:13px;color:var(--muted)}
.lab-0{margin-top:0}
.say{margin:0;font-family:var(--serif);font-size:18px;line-height:1.32}
.say-f{margin:8px 0 0;font-size:12px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.stats div{padding:10px;border-radius:10px;background:var(--wash-2)}
.stats b{display:block;font-size:26px;line-height:1;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:4px;font-size:12px;line-height:1.2;color:var(--muted)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.tbl th{padding:6px 0;border-bottom:1px solid var(--line);font-size:12px;font-weight:500;color:var(--muted);text-align:right}
.tbl td{padding:7px 0;border-bottom:1px solid var(--line);text-align:right}
.tbl tr:last-child td{border-bottom:0;padding-bottom:0}
.tbl th:first-child,.tbl td:first-child{text-align:left}

/* Sticky bar: appears below the first screen and keeps the choice and the CTA in reach */
.bar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:var(--bar);padding-inline:var(--g);background:var(--ground);box-shadow:0 -1px 0 var(--line),0 1px 0 var(--line)}
html:not(.js) .switch{visibility:hidden}
.switch{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);white-space:nowrap}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--wash)}
.seg button{height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .3s,color .3s,transform .35s var(--ease)}
.seg button:hover{background:rgba(33,35,39,.14);transform:translateY(-1px)}
html:has(#r-saelger:checked) .seg [data-role="saelger"],
html:has(#r-chef:checked) .seg [data-role="chef"]{background:var(--ink);color:var(--ground)}
html:has(#r-saelger:checked) .seg [data-role="saelger"]:hover,
html:has(#r-chef:checked) .seg [data-role="chef"]:hover{background:#000;color:var(--lime)}
.bar-nav{display:flex;gap:clamp(14px,1.9vw,28px);font-size:15px;font-weight:500}
.bar-nav a{position:relative;padding:8px 0;text-decoration:none;white-space:nowrap}
.bar-cta{justify-self:end;justify-items:end}

/* Sections */
.sec{padding-block:clamp(56px,7vw,120px)}
.sec-h{display:grid;grid-template-columns:7fr 5fr;gap:var(--g);align-items:end;margin-bottom:clamp(22px,3vw,48px)}
.sec-h p{margin:0;max-width:27em;font-size:clamp(17px,1.32vw,21px);line-height:1.36;color:var(--muted)}
.h2{margin:0;font-size:var(--t-h2);font-weight:600;line-height:1.02;letter-spacing:-.035em}
.frame{overflow:hidden;border-radius:20px;background:var(--wash)}
.frame img{width:100%;height:100%;object-fit:cover;transition:scale 1.1s var(--ease)}
.tile:hover .frame img,.tile:focus-within .frame img{scale:1.03}
.js [data-reveal]{clip-path:inset(0 0 0 10% round 20px);opacity:0;transition:clip-path 1.1s var(--ease),opacity .6s var(--ease)}
.js [data-reveal].in{clip-path:inset(0 0 0 0 round 20px);opacity:1}

/* How it works: a real click on a real control */
.mock{overflow:hidden;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 34px 90px rgba(33,35,39,.11)}
.mock-bar{display:flex;align-items:center;gap:12px;height:58px;padding:0 16px;background:var(--wash)}
.mock-nav{display:flex;gap:6px}
.mock-nav i{width:9px;height:9px;border-left:2px solid rgba(33,35,39,.35);border-bottom:2px solid rgba(33,35,39,.35);transform:rotate(45deg)}
.mock-nav i+i{transform:rotate(225deg)}
.mock-url{flex:1;display:flex;align-items:center;min-width:0;height:36px;padding:0 16px;border-radius:999px;background:var(--paper);font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden}
.mk{display:inline-grid;flex:none;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--lime);font-size:14px;font-weight:700}
.mock-ico{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:var(--lime);cursor:pointer;transition:transform .35s var(--ease)}
.mock-ico:hover{transform:scale(1.06)}
.mock-ico:active{transform:scale(.96)}
.mock-ico::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--lime);opacity:0;pointer-events:none}
.mock-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,32vw,520px);overflow:hidden}
.prof{grid-column:1/-1;grid-row:1;padding:24px 28px;background:#F8F9F6}
.prof-ban{display:block;height:clamp(90px,9vw,160px);overflow:hidden;border-radius:12px;background:var(--wash)}
.prof-ban img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.prof-av{position:relative;display:grid;place-items:center;width:104px;height:104px;margin:-56px 0 0 24px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px #F8F9F6;font-size:30px;font-weight:600;letter-spacing:-.02em}
.prof h3{margin:14px 0 2px;font-size:30px;font-weight:600;line-height:1.1;letter-spacing:-.02em}
.prof p{margin:0;color:var(--muted)}
.sk{height:12px;margin-top:12px;border-radius:6px;background:var(--wash)}
.sk-r{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;margin-top:22px;max-width:62%}
.sk-r i{display:block;width:52px;height:52px;border-radius:10px;background:var(--wash)}
.sk-r .sk:first-child{margin-top:0}
.sk-r .sk{height:11px;margin-top:9px}
.panel{position:relative;grid-column:2;grid-row:1;min-width:0;padding:16px 24px 20px;background:var(--paper);box-shadow:-1px 0 0 var(--line),-24px 0 60px rgba(33,35,39,.07)}
.step-l{display:flex;align-items:center;gap:8px;margin:12px 0 8px;font-size:15px;font-weight:600}
.checks{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px}
.checks li{display:inline-flex;align-items:center;gap:5px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.chip{position:relative;display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:500;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.chip:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.chip:has(:checked){background:var(--ink);color:var(--ground)}
.panel .brief{margin:0 0 10px}
.panel .say{min-height:7.2em}
.how3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin-top:clamp(22px,2.6vw,40px)}
.how3 h3{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:clamp(20px,1.55vw,26px);font-weight:600;line-height:1.15;letter-spacing:-.015em}
.how3 p{margin:0;max-width:27em;font-size:16px;color:var(--muted)}

/* Demo choreography. Without JS or with reduced motion the finished state just shows. */
@media (prefers-reduced-motion:no-preference){
  .js .demo:not(.is-play) .panel{transform:translateX(102%)}
  .js .demo:not(.is-play) .seq{opacity:0;translate:0 8px}
  .js .demo:not(.is-play) .write{clip-path:inset(0 0 100% 0)}
  .js .demo.is-play .panel{transform:none;transition:transform .75s var(--ease)}
  .js .demo.is-play .seq{transition:opacity .4s var(--ease) var(--t,0s),translate .55s var(--ease) var(--t,0s)}
  .js .demo.is-play .write{clip-path:inset(0);transition:clip-path .85s linear 1.5s}
  .js .demo.is-play .how3 .mk{animation:mk-on .7s var(--ease) var(--t) both}
  .js .demo.is-play .mock-ico::after{animation:ping 3.4s var(--ease) 2.6s infinite}
  .write::after,.caret::after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.14em;background:var(--ink);animation:blink 1.3s steps(2,jump-none) infinite}
}

/* Benefits */
.ben{padding-top:0}
.ben-g{display:grid;grid-template-columns:7fr 5fr;gap:var(--g)}
.ben-r{display:flex;flex-direction:column;gap:clamp(22px,2.2vw,36px)}
.tile{margin:0;min-width:0}
.t-big .frame{height:clamp(320px,41.6vw,800px)}
.t-sm .frame{height:clamp(190px,17vw,330px)}
.tile figcaption{padding-top:14px}
.tile h3{margin:0 0 2px;font-size:clamp(22px,1.8vw,30px);font-weight:600;line-height:1.14;letter-spacing:-.02em}
.tile figcaption p{margin:0;font-size:16px;color:var(--muted)}
.frame-ui{display:flex;align-items:center;justify-content:center;padding:clamp(14px,1.5vw,24px);background:var(--wash)}
.stall{width:min(100%,430px)}

/* Modules */

/* Access */
.buy{background:var(--night);color:var(--ground)}
.buy :focus-visible{outline-color:var(--lime)}
.buy-g{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,88px);align-items:center;min-width:0}
.buy .h2{margin-bottom:clamp(22px,3vw,44px)}
.steps{display:flex;flex-direction:column;gap:22px}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.steps .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lime);color:var(--ink);font-size:18px;font-weight:700}
.steps b{display:block;font-size:clamp(21px,1.7vw,28px);font-weight:600;line-height:1.15;letter-spacing:-.015em}
.steps .d{display:block;margin-top:3px;max-width:31em;font-size:16px;color:var(--night-t)}
.pc{padding:clamp(20px,2.1vw,34px);border-radius:20px;background:var(--paper);color:var(--ink)}
.pc :focus-visible{outline-color:var(--ink)}
.seg-f{display:inline-flex;gap:2px;margin-bottom:14px;padding:3px;border-radius:999px;background:var(--wash)}
.seg-f label{position:relative;display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:600;cursor:pointer;transition:background .3s,color .3s}
.seg-f label:has(:checked){background:var(--ink);color:var(--ground)}
.price{display:flex;align-items:baseline;gap:10px;margin:0}
.roll{display:block;height:.98em;overflow:hidden;font-size:clamp(92px,8vw,136px);line-height:.98}
.roll b{display:block;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums;transition:transform .7s var(--ease)}
html:has(#p-md:checked) .roll b{transform:translateY(-100%)}
.per{font-size:16px;font-weight:500}
.pc-u{margin:8px 0 16px;font-size:15px;line-height:1.36;color:var(--muted)}
.pc-u p{margin:0}
.pc-u mark{color:var(--ink)}
.incl{margin-bottom:20px;font-size:16px}
.incl li{display:flex;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.incl svg{flex:none;margin-top:4px}
.pc h3{margin:0 0 6px;font-size:clamp(30px,2.5vw,42px);font-weight:600;line-height:1.05;letter-spacing:-.025em}
.pc-u-c{margin-top:0}
.pc-links{display:flex;justify-content:space-between;gap:12px;margin:14px 0 0;font-size:15px}
.pc-links a,.pc-links button{padding:3px 0;text-underline-offset:3px;transition:translate .45s var(--ease)}
.pc-links a:hover{translate:3px 0}
.pc-links button:hover{translate:-3px 0}
.pc-links button{border:0;background:none;font-weight:500;text-decoration:underline;cursor:pointer}

/* Close */
.end{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:clamp(420px,36vw,680px);overflow:hidden;background:#C3C9CB}
.end-bg{position:absolute;inset:0;width:100%;height:100%}
.end-bg img{width:100%;height:100%;object-fit:cover}
video.end-bg{object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
video.end-bg.on{opacity:1}
.end-t{position:relative;grid-column:2;align-self:center;padding:var(--g)}
.end-t .h2{margin-bottom:clamp(14px,1.6vw,24px)}

/* Footer */
.foot{display:grid;grid-template-columns:2.4fr repeat(4,1fr);gap:var(--g);padding-block:52px 28px;font-size:14px}
.foot-a p{margin:12px 0 0;max-width:30em;color:var(--muted);line-height:1.5}
.foot-a .u{display:inline-block;padding-block:4px;color:var(--ink);text-underline-offset:3px}
.foot h2{margin:0 0 8px;font-size:14px;font-weight:600}
.foot nav a{display:block;padding:4px 0;text-decoration:none}
.foot nav a:hover{text-decoration:underline}
.foot-z{grid-column:1/-1;margin:12px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* Sub-pages: same grid, same panel, same motion verb */
.nav a[aria-current="page"]{background-position:left calc(100% - 4px);background-size:100% 1.5px}
.bar-nav a[aria-current="page"]{background-position:left calc(100% - 4px);background-size:100% 1.5px}
.menu nav a[aria-current="page"]{font-weight:700}
.u{padding-block:3px;background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(100% - 2px)/100% 1px;text-decoration:none;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .25s var(--ease)}
.u:hover{background-size:100% 2.5px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:14px;color:var(--muted)}
.crumb a{padding-block:4px;text-underline-offset:3px}
.crumb a:hover{color:var(--ink)}
.h1-s{margin:0 0 0 -.02em;font-size:clamp(44px,4.9vw,92px);font-weight:600;line-height:1.01;letter-spacing:-.04em}
.h1-m{margin:0 0 0 -.015em;font-size:clamp(36px,3.5vw,66px);font-weight:600;line-height:1.05;letter-spacing:-.032em;text-wrap:balance}
.h2-m{margin-bottom:clamp(22px,3vw,44px)}
.hero-s{min-height:calc(max(640px,100svh) - 72px - var(--bar))}
.hero-s .hero-l{gap:clamp(14px,1.6vw,24px)}
.kick{margin:0 0 10px;font-size:15px;font-weight:600}
.when{display:block;font-size:14px;color:var(--muted)}
.mt-a{margin-top:auto}
.mt-a+.pane-f{margin-top:12px;padding-top:12px}
.no-dock{--dock:0px}
.fine a{color:var(--ink)}
.sec-t{padding-top:0}
.sec-s{padding-top:clamp(24px,3vw,48px)}
.sec-h .u{color:var(--ink)}
.flag{margin:0 0 clamp(20px,2.4vw,32px);padding:10px 14px;border-radius:10px;background:var(--wash-2);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;line-height:1.45;color:var(--muted)}

.page-h{display:grid;grid-template-columns:7fr 5fr;gap:clamp(14px,1.6vw,24px) var(--g);align-items:end;padding:clamp(14px,1.6vw,24px) var(--g) clamp(28px,3.4vw,56px)}
.page-h .crumb{grid-column:1/-1}
.lede{margin:0;max-width:30em;font-size:clamp(18px,1.46vw,24px);line-height:1.34;font-weight:500;letter-spacing:-.012em}
.lede a{color:inherit}
.art-h{align-items:stretch}
.art-h>div:not(.frame):not(.cover){display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,1.3vw,20px)}
.art-h .kick{margin:0}
.art-h .frame{height:clamp(220px,25vw,460px)}
.art-l{grid-template-columns:minmax(0,1fr)}
.lede-s{font-size:16px;font-weight:400;color:var(--muted)}
.by{margin:0;font-size:14px;color:var(--muted)}
.sr-h{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Photo tiles that link */
.g2,.g3{display:grid;gap:clamp(24px,2.4vw,40px) var(--g)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.link-tile>a{display:block;border-radius:20px;text-decoration:none}
.link-tile .frame{height:clamp(220px,20vw,380px)}
.g2>.link-tile .frame{height:clamp(240px,29vw,560px)}
.t-big.link-tile .frame{height:clamp(320px,36vw,700px)}
.t-sm.link-tile .frame{height:clamp(190px,15vw,290px)}
.ul{background:linear-gradient(currentColor,currentColor) no-repeat right 100%/0 2px;transition:background-size .5s var(--ease);padding-bottom:1px}
a:hover .ul,a:focus-visible .ul{background-position:left 100%;background-size:100% 2px}

/* Rows inside the panel and big rows on the page */
.pick-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);text-decoration:none}
.pick-row b{font-size:clamp(19px,1.5vw,24px);font-weight:600;line-height:1.15;letter-spacing:-.015em;overflow-wrap:anywhere}
.pick-row span{grid-row:2;font-size:14px;line-height:1.35;color:var(--muted)}
.hero-s .pane>.pick-row{flex:1;align-content:center}
.hero-s .pane .pick-row b{font-size:clamp(21px,1.9vw,32px)}
.hero-s .draft .big{font-size:clamp(30px,2.9vw,52px);line-height:1.08}
.hero-s .draft .big+.draft-s{font-size:clamp(16px,1.25vw,20px)}
.hero-s .pane>.brief-fill{flex:1;display:flex;flex-direction:column}
.brief-fill>div{flex:1;align-items:center}
.brief-fill dd{font-size:clamp(16px,1.25vw,20px);font-weight:500}
.brief-fill small{font-weight:400}
.pick-row svg{grid-row:1/3;grid-column:2;transition:translate .45s var(--ease)}
.pick-row:hover svg{translate:5px 0}
.rows{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:5fr 7fr;gap:8px var(--g);align-items:baseline;padding:clamp(16px,1.8vw,28px) 0;border-top:1px solid var(--line);text-decoration:none}
.row h3{margin:0;font-size:clamp(26px,2.6vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.028em;transition:translate .5s var(--ease)}
.row p{margin:0;max-width:34em;font-size:17px;color:var(--muted)}
a.row:hover h3{translate:8px 0}
.flow{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:13px}
.flow li{padding:4px 10px;border-radius:999px;background:var(--wash)}
.rows-b .row{align-items:start}

/* Panel contents for the modules */
.brief-w>div{grid-template-columns:92px 1fr}
.fun{display:flex;flex-direction:column;gap:5px;margin-bottom:6px}
.fun li{display:flex;align-items:center;width:var(--w);height:clamp(36px,3.2vw,50px);padding:0 14px;border-radius:10px;background:var(--wash-2);font-size:15px;font-weight:600;white-space:nowrap}
.fun .on{background:var(--lime)}
.draft-s{margin:8px 0 0;font-size:15px;line-height:1.4;color:var(--muted)}
.chat{display:flex;flex-direction:column;gap:8px;margin:14px 0 2px}
.chat .say{max-width:88%;padding:10px 14px;border-radius:14px;font-size:clamp(18px,1.4vw,22px);line-height:1.28}
.chat .ai{align-self:flex-start;background:var(--wash-2)}
.chat .me{align-self:flex-end;background:var(--lime)}
.av-d{background:var(--ink);color:var(--lime)}
.pc-v{display:flex;flex-direction:column}
.pc-v .incl{margin-bottom:20px}
.pc-tag{min-height:1.5em;margin:0 0 10px;font-size:15px;color:var(--muted)}
.pc-tag mark{color:var(--ink)}
.pc-p{margin:0;font-size:18px;font-weight:500}
.pc-p b{font-size:clamp(52px,4.6vw,84px);font-weight:600;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.pc-p .b-t{display:block;font-size:clamp(34px,3vw,52px);line-height:1.2;letter-spacing:-.03em}
.buy-h{max-width:18em;margin-bottom:clamp(24px,3vw,48px)}
.plans{align-items:stretch}
.plans .cta{font-size:16px;padding-left:20px;gap:10px}

/* Calculator */
.calc{display:grid;grid-template-columns:5fr 7fr;gap:var(--g);align-items:start}
.calc-in{display:flex;flex-direction:column;gap:22px}
.sl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline}
.sl label{font-weight:600}
.sl output{font-size:clamp(34px,3vw,52px);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sl input{grid-column:1/-1;width:100%;height:32px;margin:0;accent-color:var(--ink);cursor:pointer}
.calc-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.calc-out>div{display:flex;flex-direction:column;gap:6px;padding:clamp(14px,1.5vw,24px);border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.calc-out .on{background:var(--lime);box-shadow:none}
.calc-out dt{font-size:14px;font-weight:600}
.calc-out dd{margin:0;font-size:15px;line-height:1.3}
.calc-out b{display:block;font-size:clamp(46px,4.6vw,84px);font-weight:600;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.calc-out small{display:block;margin-top:8px;font-size:13px;line-height:1.35}

/* Questions */
.faq{border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:16px;align-items:center;padding:16px 0;font-size:clamp(19px,1.5vw,25px);font-weight:600;line-height:1.2;letter-spacing:-.015em;cursor:pointer;list-style:none;transition:translate .45s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{translate:5px 0}
.faq summary i{position:relative;width:18px;height:18px;justify-self:end}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;top:8px;left:0;width:18px;height:2px;background:currentColor;transition:rotate .45s var(--ease)}
.faq summary i::after{rotate:90deg}
.faq details[open] summary i::after{rotate:0deg}
.faq-a{padding:0 40px 18px 0;max-width:46em}
.faq-a p{margin:0;line-height:1.5;color:var(--muted)}
.faq-a a{color:var(--ink);text-underline-offset:3px}
.faq-g{display:grid;grid-template-columns:4fr 8fr;gap:12px var(--g);padding-bottom:clamp(32px,4vw,64px);scroll-margin-top:calc(var(--bar) + 16px)}
.faq-g h2{margin:0;font-size:clamp(26px,2.6vw,46px);font-weight:600;line-height:1.06;letter-spacing:-.028em}
section[id]{scroll-margin-top:calc(var(--bar) + 8px)}

/* People */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.facts dt{font-size:clamp(28px,2.6vw,46px);font-weight:600;line-height:1;letter-spacing:-.035em}
.facts dd{margin:4px 0 0;font-size:14px;line-height:1.3;color:var(--muted)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--ground)}
.duo picture,.duo img{display:block;width:100%;height:100%}
.duo img{object-fit:cover}
.person{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(14px,1.6vw,24px)}
.person .frame{aspect-ratio:4/5;align-self:start}
.person h3{margin:2px 0 8px;font-size:clamp(24px,2.1vw,36px);font-weight:600;line-height:1.1;letter-spacing:-.024em}
.person p{margin:0 0 12px;font-size:16px}
.person .when{margin:0}
.person blockquote{margin:0 0 12px;padding-left:12px;box-shadow:inset 3px 0 0 var(--lime)}
.person .brief{margin:0 0 12px}
.tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);border-top:2px solid var(--ink)}
.tl li{position:relative;padding-top:18px}
.tl li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 2px var(--ink)}
.tl time{font-size:14px;color:var(--muted)}
.tl h3{margin:2px 0 6px;font-size:clamp(20px,1.55vw,26px);font-weight:600;line-height:1.15;letter-spacing:-.015em}
.tl p{margin:0;font-size:16px;color:var(--muted)}
.how4{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
.how4 h3{align-items:flex-start}
.how4 .mk{margin-top:-1px}
.how4 .u{color:var(--ink)}
.how3 .when{margin-bottom:2px}
.founder{display:grid;grid-template-columns:clamp(96px,10vw,160px) minmax(0,1fr);gap:18px;align-items:center;text-decoration:none}
.founder .frame{aspect-ratio:1;border-radius:16px}
.founder h3{margin:0;font-size:clamp(22px,2vw,34px);font-weight:600;line-height:1.1;letter-spacing:-.024em}
.founder p{margin:4px 0 0;color:var(--muted);overflow-wrap:anywhere}

/* Tables */
.tblw{overflow-x:auto;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.tbl-l{width:100%;border-collapse:collapse;font-size:16px}
.tbl-l th,.tbl-l td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tbl-l thead th{font-size:14px;font-weight:600;color:var(--muted)}
.tbl-l tbody th{font-weight:500}
.tbl-l tr:last-child>*{border-bottom:0}
.tbl-c{min-width:600px}
.tbl-c tbody th{min-width:190px}
.tbl-hint{display:none;margin:0 0 8px;font-size:14px;color:var(--muted)}
.tbl-c td,.tbl-c thead th:not(:first-child){text-align:center}
.tbl-c .me{background:var(--lime);color:var(--ink)}
.yes{display:inline-grid;place-items:center}
.no{font-size:14px;color:var(--muted)}
.del{font-size:14px;color:var(--ink)}
.tbl-n{margin-top:12px;max-width:48em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);align-items:center}
.split .frame{height:clamp(260px,32vw,620px)}
.split .lead{margin:0 0 clamp(16px,1.8vw,26px)}

/* Lost-deal comparisons */
.vs{display:grid;gap:clamp(20px,2.2vw,32px)}
.vs article{display:grid;grid-template-columns:4fr 8fr;gap:10px var(--g);padding-top:clamp(16px,1.8vw,26px);border-top:1px solid var(--line)}
.vs h3{margin:0;font-size:clamp(22px,1.9vw,32px);font-weight:600;line-height:1.14;letter-spacing:-.02em}
.vs-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vs-g>div{padding:14px 16px;border-radius:14px;background:var(--wash-2)}
.vs-g .on{background:var(--lime)}
.vs-g .on .when{color:var(--ink);font-weight:600}
.vs-g p{margin:4px 0 0;font-size:16px;line-height:1.38}

/* Ebook covers: a poster each, number cut by the right edge */
.cover{position:relative;display:flex;flex-direction:column;overflow:hidden;min-height:clamp(240px,24vw,440px);padding:clamp(14px,1.5vw,24px);border-radius:16px;background:var(--night);color:var(--ground);isolation:isolate}
.cover b{max-width:13em;margin-top:8px;font-size:clamp(23px,2.1vw,38px);font-weight:600;line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.c-m,.c-p{font-size:13px;font-weight:500}
.c-p{margin-top:auto}
.c-n{position:absolute;right:-.06em;bottom:-.17em;z-index:-1;font-size:clamp(120px,13.5vw,260px);font-weight:600;line-height:1;letter-spacing:-.06em;color:var(--lime);transition:translate .7s var(--ease)}
.c-lime{background:var(--lime);color:var(--ink)}
.c-lime .c-n{color:var(--ink)}
.c-paper{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.c-paper .c-n{color:var(--lime)}
.book>a{display:block;border-radius:16px;text-decoration:none}
.book a:hover .c-n,.book a:focus-visible .c-n{translate:-.08em 0}
.book figcaption .when{margin-bottom:2px}
.dock .cover{flex:none;min-height:clamp(170px,14vw,260px)}
.dock .cover b{font-size:clamp(21px,1.7vw,30px)}
.dock .cover .c-n{font-size:clamp(100px,9vw,170px)}
.dock .cover+.lab{margin-top:12px}
.dock .incl{margin-bottom:14px;font-size:15px}
.art-h>.cover{min-height:clamp(240px,25vw,460px)}

/* Reading: the text beside a docked panel */
.read{--side:clamp(290px,24vw,420px);display:grid;grid-template-columns:minmax(0,1fr) var(--side);border-top:1px solid var(--line)}
.read-m{min-width:0;padding:clamp(28px,3.6vw,64px) var(--g) clamp(44px,5vw,88px)}
.read-s{position:sticky;top:var(--bar);align-self:start;height:calc(100svh - var(--bar));overflow-y:auto;background:var(--paper);box-shadow:-1px 0 0 var(--line),-30px 0 70px rgba(25,27,30,.06)}
.read-nb{--bar:0px}
.read-in{display:flex;flex-direction:column;min-height:100%;padding:clamp(16px,1.5vw,24px)}
.read-cta{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.read-in>.read-cta:first-child{margin-top:0;border-top:0;padding-top:0}
.read-t{margin:0 0 4px;font-size:clamp(20px,1.6vw,26px);font-weight:600;line-height:1.15;letter-spacing:-.018em}
.read-cta .fine{margin-bottom:12px}
.read-cta .swap{justify-items:start}
.toc{display:flex;flex-direction:column;margin-bottom:16px;font-size:15px;line-height:1.28}
.toc a{position:relative;padding:7px 0 7px 14px;color:var(--muted);text-decoration:none;transition:color .2s}
.toc a::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--lime);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{color:var(--ink);font-weight:600}
.toc a[aria-current="true"]::before{transform:none}
.mtoc{display:none}
.prose{max-width:43rem;margin-inline:auto;font-size:18px;line-height:1.58}
.prose>:first-child{margin-top:0}
.prose p{margin:0 0 1em}
.prose a{text-underline-offset:3px}
.prose h2{margin:1.9em 0 .55em;font-size:clamp(28px,2.5vw,42px);font-weight:600;line-height:1.1;letter-spacing:-.026em;scroll-margin-top:calc(var(--bar) + 18px)}
.prose h3{margin:1.5em 0 .4em;font-size:clamp(20px,1.6vw,26px);font-weight:600;line-height:1.2;letter-spacing:-.014em}
.prose ul:not(.qs),.prose ol:not(.rel){margin:0 0 1em;padding-left:1.2em;list-style:disc}
.prose li{margin-bottom:.35em}
.prose .kapn{display:block;margin-bottom:6px;font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted)}
.prose .ey{margin:1.7em 0 -.2em;font-size:14px;font-weight:500;color:var(--muted)}
.prose .ey+h3{margin-top:.3em}
.tldr{margin-bottom:1.6em;padding:16px 18px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.tldr .lbl{display:block;margin-bottom:4px;font-size:14px;font-weight:600}
.tldr p{margin:0;font-size:17px;line-height:1.48}
.prose .pq{margin:1.1em 0;padding:2px 0 2px 16px;box-shadow:inset 3px 0 0 var(--lime);font-family:var(--serif);font-size:21px;line-height:1.36}
.kv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.42}
.prose .kv b{font-size:14px;font-weight:500;color:var(--muted)}
.prose .kv p{margin:0}
.qr,.tc,.oc{margin:1.1em 0;padding:16px 18px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.qr .kv:last-child{padding-bottom:0}
.prose .qh{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-weight:600}
.prose .qh b{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 8px;border-radius:10px;background:var(--ink);color:var(--lime);font-size:14px}
.prose .tc h3{margin:0 0 6px}
.prose .tc p{font-size:16px;line-height:1.48}
.prose .tc-ex{margin:0 0 8px;padding:10px 12px;border-radius:10px;background:var(--wash-2);font-family:var(--serif);font-size:18px;line-height:1.34}
.prose .tc-ex span{display:block;margin-bottom:3px;font-family:var(--sans);font-size:13px;color:var(--muted)}
.prose .tc-w{margin:0;font-size:14px;color:var(--muted)}
.prose .oc-n{margin:0;font-size:14px;color:var(--muted)}
.prose .oc-q{margin:4px 0 12px;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.oc-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.oc-b,.oc-m{padding:12px 14px;border-radius:12px;background:var(--wash-2)}
.oc-m{background:var(--ink);color:var(--ground)}
.prose .oc-c{margin:0;font-size:16px;line-height:1.46}
.oc-g b{display:block;margin-bottom:3px;font-size:13px;font-weight:500;opacity:.75}
.qs{display:grid;gap:8px;margin:0 0 1em;list-style:none;padding:0}
.qs li{margin:0;padding:10px 14px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:16px;line-height:1.45}
.prose .nw{white-space:nowrap}
.tw{overflow-x:auto;margin:1em 0;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.tw table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;line-height:1.38}
.tw th,.tw td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tw th{font-weight:600}
.tw tr:last-child td{border-bottom:0}
.rel{display:grid;margin:0;padding:0;list-style:none}
.prose .rel>li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;margin:0;padding:clamp(16px,1.8vw,26px) 0;border-top:1px solid var(--line)}
.prose .rel>li:first-child{border-top:0;padding-top:0}
.rm{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:14px;color:var(--muted)}
.rm time{font-weight:600;color:var(--ink)}
.rm .v{font-variant-numeric:tabular-nums}
.rm .st{padding:2px 10px;border-radius:999px;background:var(--wash);font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.rm .st.ok{background:var(--lime)}
.prose .rel h3{margin:0 0 4px}
.prose .rel p{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}
.older summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:18px 0;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.older summary::-webkit-details-marker{display:none}
.older summary i{display:inline-flex;rotate:90deg;transition:rotate .35s var(--ease)}
.older[open] summary i{rotate:-90deg}
.older summary svg{width:14px;height:14px}

/* Signup */
.e404{display:flex;flex-direction:column;justify-content:center;gap:24px;min-height:calc(100svh - 72px);padding-block:32px}
.e404 .h1-s{max-width:14em}

/* Hero intro, on the same ease as everything else */
.rise{animation:rise .6s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes dock-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes ln-in{from{transform:translateY(105%)}to{transform:none}}
@keyframes mk-on{0%{background:var(--ink);color:var(--lime)}40%{background:var(--lime);color:var(--ink);scale:1.14}100%{background:var(--ink);color:var(--lime);scale:1}}
@keyframes ping{0%{opacity:.9;transform:scale(1)}45%,100%{opacity:0;transform:scale(1.5)}}
@keyframes blink{0%{opacity:1}100%{opacity:0}}
@keyframes drift{from{translate:0 -2.5%}to{translate:0 2.5%}}

/* A slow drift while scrolling, only where the browser can tie it to scroll */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:901px){
    .tile .frame img{height:106%;margin-top:-3%;animation:drift linear both;animation-timeline:view()}
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{clip-path:none;opacity:1}
}

@media (max-width:1180px){
  .bar{grid-template-columns:1fr auto}
  .bar-nav{display:none}
}
@media (max-width:1040px){
  .nav{display:none}
  .menu{display:block}
  .act{flex-direction:column;align-items:flex-start;gap:12px}
  .act .fine{max-width:none}
}
@media (max-width:900px){
  :root{--bar:60px;--t-h1:15.4vw;--t-h2:10.6vw}
  .top{height:56px}
  .logo img{height:26px}
  .top-cta{display:none}
  .login{padding:7px 14px;font-size:14px}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-l{gap:14px;padding:18px var(--g) 22px}
  .picks{grid-template-columns:minmax(0,1fr)}
  .pick{padding:12px 14px}
  .cta{display:flex;justify-content:space-between;width:100%}
  .cta-s{display:inline-flex;width:auto;gap:8px;padding:0 5px 0 14px}
  .cta .lg{display:none}
  .cta .sm{display:inline}
  .stage{overflow:visible;background:none;margin-inline:var(--g);padding-top:46vw;margin-bottom:6px}
  .photo{inset:0 0 auto;height:52vw;overflow:hidden;border-radius:16px}
  .dock{position:relative;top:auto;right:auto;bottom:auto;width:auto;margin:0 10px;border-radius:16px;box-shadow:0 18px 44px rgba(25,27,30,.16)}
  .hero .dock{animation:rise .9s var(--ease) .2s both}
  .pane-f{margin-top:14px!important}
  .draft{min-height:0}
  .draft+.pane-f{margin-top:0!important}
  .switch #bar-l{display:none}
  .seg button{height:44px;padding:0 14px}
  .sec{padding-block:48px}
  .sec-h{grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:20px}
  .mock{border-radius:16px}
  .mock-nav{display:none}
  .mock-bar{height:56px;padding:0 12px}
  .mock-body{grid-template-columns:minmax(0,1fr)}
  .prof{display:none}
  .panel{grid-column:1;padding:14px 16px 18px;box-shadow:none}
  .how3{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:20px}
  .ben-g{grid-template-columns:minmax(0,1fr);gap:26px}
  .ben-r{gap:26px}
  .t-big .frame,.t-sm .frame{height:58vw}
  .frame-ui{height:auto!important;padding-block:18px}
  .hero .say-l{font-size:19px;line-height:1.3}
  .buy-g{grid-template-columns:minmax(0,1fr);gap:28px}
  .end{grid-template-columns:minmax(0,1fr);min-height:150vw;align-content:start}
  .end-t{grid-column:1;align-self:start;padding:32px var(--g)}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;padding-block:36px 24px}
  .foot-a{grid-column:1/-1}
  .hero-s{min-height:0}
  .hero-s .pane>.pick-row{flex:none}
  .tbl-hint{display:block}
  .tbl-l th,.tbl-l td{padding:12px}
  .h1-s{font-size:11.4vw}
  .h1-m{font-size:8.6vw}
  .page-h{grid-template-columns:minmax(0,1fr);padding-block:10px 24px}
  .art-h .frame,.art-h>.cover{height:56vw;min-height:0}
  .g2,.g3,.how4,.tl,.calc,.calc-out,.split,.vs article,.vs-g,.faq-g,.person,.oc-g{grid-template-columns:minmax(0,1fr)}
  .link-tile .frame,.g2>.link-tile .frame,.t-big.link-tile .frame,.t-sm.link-tile .frame,.split .frame{height:58vw}
  .row{grid-template-columns:minmax(0,1fr)}
  .tl{border-top:0;border-left:2px solid var(--ink);gap:20px;padding-left:18px}
  .tl li{padding-top:0}
  .tl li::before{top:5px;left:-25px}
  .duo{overflow:hidden;margin-inline:var(--g);padding-top:0;margin-bottom:8px;border-radius:16px;height:74vw}
  .person .frame{aspect-ratio:1}
  .cover{min-height:68vw}
  .c-n{font-size:40vw}
  .dock .cover{min-height:44vw}
  .dock .cover .c-n{font-size:32vw}
  .read{grid-template-columns:minmax(0,1fr)}
  .read-s{display:none}
  .read-m{padding-block:20px 40px}
  .mtoc{display:block;margin-bottom:20px;padding:0 14px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:16px}
  .mtoc summary{display:flex;align-items:center;min-height:48px;font-weight:600;cursor:pointer}
  .mtoc .toc{margin-bottom:8px}
  .mtoc .toc a{min-height:40px;display:flex;align-items:center}
  .prose{font-size:17px}
  .kv{grid-template-columns:minmax(0,1fr);gap:2px}
  .prose .rel>li{grid-template-columns:minmax(0,1fr);gap:6px}
  .rm{flex-direction:row;flex-wrap:wrap;gap:4px 10px}
  .faq-a{padding-right:0}
  .founder{grid-template-columns:88px minmax(0,1fr)}
}

/* Front page: what it costs, and where to read on */
.sec-more{margin:clamp(18px,2vw,28px) 0 0;font-size:17px;font-weight:600}
.free-n{font-size:clamp(92px,8vw,136px);font-weight:600;line-height:.98;letter-spacing:-.05em}
.pc-d{margin-top:10px}
.pc-f{margin:8px 0 0}
.how3 li:nth-child(n+4){margin-top:8px}

/* A sub-page hero without the panel: the photo takes the whole side */
.stage:not(:has(.dock)) .photo{right:0}
/* The list of sub-processors has seven columns, so it scrolls rather than squeezes */
.prose .tbl-l{min-width:1040px;font-size:14.5px;line-height:1.35}
.prose .tbl-l th,.prose .tbl-l td{padding:10px 12px;vertical-align:top}

/* The number on the light ebook covers must be readable too */
.c-paper .c-n{color:#7D8287}

/* The panel takes the height it needs, so nothing is ever cut off; a short window just makes the hero taller */
@media (min-width:901px){
  .stage{display:flex;justify-content:flex-end}
  .stage.no-dock,.stage.duo{display:block}
  .stage.duo{display:grid}
  .stage .dock{position:relative;top:auto;right:auto;bottom:auto;flex:none}
}
.hero-s .draft .big{font-size:clamp(26px,2.3vw,40px)}
/* Without and with, on the module pages */
.vs-why ul{margin:8px 0 0;padding:0;list-style:none}
.vs-why li{padding:10px 0;border-top:1px solid rgba(33,35,39,.12);font-size:clamp(17px,1.3vw,20px);line-height:1.34}
.vs-why li:first-child{border-top:0}
.vs-why>div{padding:clamp(18px,2vw,30px)}
.end-f{margin:10px 0 0;font-size:15px;font-weight:500}
/* A statement that stands alone in the panel carries its weight */
.hero .pane>.big{margin:6px 0 14px;font-size:clamp(28px,2.5vw,44px);font-weight:600;line-height:1.08;letter-spacing:-.025em}

/* Open points in the legal drafts stand out until they are settled */
.tbd{padding:1px 6px;border-radius:6px;background:var(--lime);font-size:.86em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ck-inline{display:inline-block;padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--ground);font-size:15px;font-weight:600}
.ck-inline:hover{background:#000;color:var(--lime);text-decoration:none}
.prose code{font-size:.92em}