:root{--bg:#f5f5f2;--ink:#0b0b0b;--mute:#8a8a85;--line:#d9d9d4;--use:#1fbf6a;--skp:#ff3b1f;--wat:#2f4bff;--g:clamp(16px,2vw,28px);--pad:clamp(20px,3.2vw,48px);--f:"Inter Tight",system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--f);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}ul,ol{list-style:none}
::selection{background:var(--ink);color:var(--bg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skiplink{position:absolute;left:-999px}.skiplink:focus{left:12px;top:12px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:20}
:focus-visible{outline:2px solid var(--wat);outline-offset:3px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--pad)}
.c-1-4{grid-column:1/5}.c-1-5{grid-column:1/6}.c-1-7{grid-column:1/8}.c-1-8{grid-column:1/9}.c-1-9{grid-column:1/10}.c-1-10{grid-column:1/11}.c-3-9{grid-column:3/10}.c-5-8{grid-column:5/9}.c-5-12{grid-column:5/13}.c-7-12{grid-column:7/13}.c-8-12{grid-column:8/13}.c-9-12{grid-column:9/13}.c-10-12{grid-column:10/13}
.mute{color:var(--mute)}.meta{font-size:13px;line-height:1.4;color:var(--mute)}.fine{font-size:12px;color:var(--mute)}
/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:10;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:center;padding:18px var(--pad);transition:transform .5s var(--ease),background .3s;mix-blend-mode:difference;color:#fff}
.nav.hide{transform:translateY(-100%)}
.logo{grid-column:1/4;font-weight:700;font-size:20px;letter-spacing:-.04em;white-space:nowrap}.logo sup{font-size:9px;font-weight:500;margin-left:1px}
.logo-drop{display:inline-block;max-width:var(--w,1em);margin-right:-.04em;clip-path:inset(0);letter-spacing:0;opacity:1;vertical-align:baseline;white-space:nowrap;transition:max-width .4s var(--ease),opacity .4s var(--ease),margin-right .4s var(--ease)}
.nav.scrolled .logo-drop{max-width:0;margin-right:0;opacity:0}
.navlinks{grid-column:4/11;display:flex;gap:22px;font-size:14px;font-weight:500}
.navlinks a{white-space:nowrap}
.navlinks a,.foot a,.arrow-btn{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.navlinks a:hover,.foot a:hover,.arrow-btn:hover{background-size:100% 1px}
.navcta{grid-column:11/13;justify-self:end;font-size:14px;font-weight:500}
.menu{display:none}
/* type */
.display{font-weight:600;font-size:clamp(56px,9.6vw,172px);line-height:.88;letter-spacing:-.055em;grid-column:1/13;max-width:11.5ch}
.display-2{font-weight:600;font-size:clamp(52px,8.4vw,150px);line-height:.9;letter-spacing:-.05em}
.h-l{font-weight:600;font-size:clamp(40px,5.2vw,88px);line-height:.92;letter-spacing:-.045em}
.h-s{font-weight:500;font-size:22px;line-height:1.15;letter-spacing:-.02em}
.body-l{font-size:clamp(18px,1.5vw,22px);line-height:1.3;letter-spacing:-.015em;margin-bottom:28px}
/* hero */
.hero{padding-top:clamp(120px,15vw,220px);row-gap:clamp(40px,5vw,72px);padding-bottom:clamp(48px,6vw,96px)}
.hero-verb{font-size:22px;letter-spacing:-.02em;font-weight:500;display:flex;gap:.35em;flex-wrap:wrap}
.rot{position:relative;display:inline-block;height:1.2em;overflow:hidden;overflow:clip;min-width:4.2em}
.rot b{position:absolute;left:0;top:0;font-weight:600;opacity:1;transform:translateY(110%);transition:transform .7s var(--ease),opacity .7s var(--ease)}
.rot b.is-active{transform:none}
.rot b.is-exit{opacity:0;transform:translateY(-110%)}
.rot b.is-instant{transition:none}
.v-use{color:var(--use)}.v-skp{color:var(--skp)}.v-wat{color:var(--wat)}
.hero-lede{font-size:22px;line-height:1.25;letter-spacing:-.02em;max-width:30ch}
/* art plates: original CSS compositions standing in for tool output */
.plate-hero{padding:0 var(--pad)}
.plate{overflow:hidden}
.art{width:100%;aspect-ratio:16/9;transition:transform 1.1s var(--ease);background:#ddd}
.art.tall{aspect-ratio:4/5}
.art-1{aspect-ratio:21/9;background:
 radial-gradient(circle at 72% 50%,#0b0b0b 0 18%,transparent 18.2%),
 repeating-linear-gradient(90deg,transparent 0 22px,rgba(11,11,11,.9) 22px 24px),
 linear-gradient(100deg,#c9d6ff,#2f4bff 55%,#0b0b0b)}
.art-2{background:radial-gradient(circle at 30% 60%,#ff3b1f 0 22%,transparent 22.3%),radial-gradient(circle at 62% 40%,#f5f5f2 0 14%,transparent 14.3%),#0b0b0b}
.art-3{background:repeating-radial-gradient(circle at 50% 110%,#e9e4d8 0 18px,#0b0b0b 18px 20px)}
.art-4{background:conic-gradient(from 200deg at 40% 55%,#1fbf6a,#e9ffb0,#f5f5f2,#1fbf6a);}
.plate figcaption,.cap{display:flex;gap:12px;align-items:baseline;padding-top:12px;font-size:14px}
.lbl,.job{margin-left:auto;color:var(--mute)}
.lbl{border:1px solid var(--line);padding:1px 8px;border-radius:99px;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
/* signup */
.signup-row{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(56px,7vw,110px);align-items:start}
.signup{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--ink);row-gap:0}
.signup input{border:0;background:transparent;font:500 clamp(24px,2.6vw,40px)/1 var(--f);letter-spacing:-.03em;padding:8px 0 16px;outline:0;min-width:0}
.signup input::placeholder{color:#b9b9b4}
.signup .hp{position:absolute;left:-9999px;width:1px;height:1px;padding:0;overflow:hidden}
.signup .fine,.signup .ok{grid-column:1/3;position:relative;top:16px}
.signup .ok.is-err{color:var(--skp)}
.signup .arrow-btn:disabled{opacity:.4;cursor:default}
.signup .arrow-btn:disabled:hover i{transform:none}
.arrow-btn{display:inline-flex;gap:.4em;align-items:center;font:500 15px var(--f);background-color:transparent;border:0;cursor:pointer;color:inherit;padding-bottom:2px;align-self:center}
.arrow-btn i{font-style:normal;display:inline-block;transition:transform .45s var(--ease)}.arrow-btn:hover i{transform:translateX(5px)}
/* sections */
.sec{padding:clamp(88px,11vw,180px) 0}
.sec-h{margin-bottom:clamp(40px,5vw,80px);align-items:end}
.sec-h .meta{justify-self:start;max-width:34ch}
#weekly-stack>.sec-h{margin-bottom:clamp(18px,2.2vw,28px)}
.verdict-key{padding:0 var(--pad);margin-bottom:clamp(28px,3.4vw,48px);display:grid;gap:6px}
.legend{display:flex;flex-wrap:wrap;align-items:baseline;font:400 12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--mute)}
.legend>span{white-space:nowrap}
.legend>span+span::before{content:"·";margin:0 .7em}
.legend b{font-weight:500}
.verdict-key .fine{max-width:78ch;line-height:1.45}
.ink{background:var(--ink);color:var(--bg)}.ink .meta,.ink .mute{color:#8a8a85}
/* work */
.work{row-gap:clamp(56px,7vw,110px);align-items:start}
.item-link{display:block}.item-link .art{will-change:transform}
.item-link>div:first-child{overflow:hidden}
.item{overflow:visible}.item .art{transform-origin:center}
.item-link:hover .art{transform:scale(1.035)}
.item-link{position:relative}
.cap h3{font-size:14px;font-weight:600}
.v{font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.v::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.item-link .lbl{display:inline-block;margin-top:10px}
.note{font-size:14px;color:var(--mute);max-width:46ch;margin-top:8px;opacity:0;transform:translateY(-4px);transition:.5s var(--ease)}
.item-link:hover .note,.item-link:focus .note{opacity:1;transform:none}
.item:nth-child(2){margin-top:clamp(80px,12vw,200px)}
/* plate wrapper overflow for scale */
.item .art{display:block}
.item-link{overflow:hidden}
/* case study */
.dim{color:#5c5c58}
.act-cta{margin:22px 0 16px}
.previews{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{position:relative;overflow:hidden;border:1px solid #2a2a28}
.tile .art{aspect-ratio:1;transform:scale(1.12)}
.tile:hover .art{transform:scale(1.18)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,11,.7),rgba(11,11,11,.08) 52%);pointer-events:none}
.lock{position:absolute;left:12px;bottom:12px;z-index:1;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#f5f5f2;border:1px solid rgba(245,245,242,.42);padding:3px 8px;border-radius:99px}
/* index list */
.index{padding:0 var(--pad);border-top:1px solid var(--ink)}
.index a{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease),color .3s}
.index .n{grid-column:1/2;font-size:13px;color:var(--mute)}
.index .t{grid-column:2/7;font-weight:600;font-size:clamp(24px,2.6vw,40px);letter-spacing:-.035em;line-height:1}
.index .d{grid-column:7/11;font-size:14px;color:var(--mute)}
.index .s{grid-column:7/11;grid-row:2;padding-top:6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.index .p{grid-column:11/13;justify-self:end;font-size:15px;font-weight:500}
.index a:hover{padding-left:18px;padding-right:0}
.index li:hover~li a,.index:hover a:not(:hover){color:#b9b9b4}
/* tiers + plans */
.tiers{border-top:1px solid var(--ink)}
.tier{display:grid;grid-template-columns:1fr 1fr;gap:8px var(--g);padding:22px 0;border-bottom:1px solid var(--line)}
.tier h3{font-size:15px;font-weight:600}.tier p:last-child{grid-column:2;font-size:14px;color:var(--mute);margin-top:-4px}
.amt{font-weight:600;font-size:clamp(40px,4.2vw,68px);line-height:.95;letter-spacing:-.05em;grid-column:2;grid-row:1}
.amt small{font-size:14px;font-weight:500;letter-spacing:0;color:var(--mute);margin-left:4px}
.tier-flag{grid-template-columns:1fr auto;align-items:baseline;border-top:4px solid var(--ink);padding-top:18px;margin-top:10px}
.tier-flag h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.03em}
.tier-flag .amt{white-space:nowrap;justify-self:end}
.tier-flag .limit,.tier-flag .pitch,.tier-flag .includes,.tier.tier-flag p.fine{grid-column:1/-1}
.tier-flag .limit{font-size:13px;color:var(--mute);margin-top:4px}
.tier-flag .pitch{font-size:15px;line-height:1.35;letter-spacing:-.015em;max-width:42ch;margin-top:16px}
.tier-flag .includes{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g);row-gap:8px;margin-top:18px;font-size:14px;line-height:1.35;color:var(--mute)}
.tier.tier-flag p.fine{margin-top:16px;font-size:12px}
.tier-foot{display:flex;justify-content:space-between;gap:20px;padding-top:20px;flex-wrap:wrap}
.plans{row-gap:40px}
.plan{border-top:1px solid var(--ink);padding-top:20px;display:flex;flex-direction:column;gap:12px;min-height:340px}
.plan h3{font-size:15px;font-weight:600;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.plan .amt{font-size:clamp(56px,6vw,96px)}
.plan>p:not(.amt):not(.meta){font-size:15px;max-width:30ch}
.plan .arrow-btn{margin-top:auto;align-self:flex-start}
.plan.on{border-top-width:4px;padding-top:17px}
.flag{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;background:var(--ink);color:var(--bg);padding:3px 8px;border-radius:99px}
/* independence */
.indep{border-top:1px solid #333;padding-top:20px}
.indep ol{counter-reset:i;margin-top:12px}
.indep li{counter-increment:i;display:grid;grid-template-columns:40px 1fr;padding:14px 0;border-bottom:1px solid #262624;font-size:16px;color:#bdbdb8}
.indep li::before{content:counter(i,decimal-leading-zero);color:#5c5c58;font-size:13px;padding-top:2px}
.indep b{color:var(--bg);font-weight:600}
/* faq */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-weight:500;font-size:clamp(20px,1.9vw,28px);letter-spacing:-.025em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;transition:transform .45s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--mute)}
.faq p{padding:0 0 24px;max-width:56ch;color:#4a4a47}
/* footer */
.foot{background:var(--bg);border-top:1px solid var(--ink);padding-top:28px;overflow:hidden}
.foot-top{font-size:14px;row-gap:24px}.foot ul{display:grid;gap:4px}
.wordmark{font-weight:600;font-size:clamp(80px,21.5vw,400px);line-height:.8;letter-spacing:-.07em;padding:clamp(60px,8vw,140px) var(--pad) 0;white-space:nowrap;margin-left:-.04em}
.foot-fine{padding:18px var(--pad) 22px}
/* reveal */
.reveal{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.reveal{opacity:1;transform:none}}
/* mobile */
@media (max-width:860px){
 .grid>*{grid-column:1/-1!important}
 .nav{mix-blend-mode:normal;color:var(--ink);background:rgba(245,245,242,.92);backdrop-filter:blur(12px);grid-template-columns:1fr auto auto;gap:16px}
 .logo{grid-column:auto}.navcta{grid-column:auto}
 .menu{display:grid;gap:5px;background:none;border:0;padding:8px 0;cursor:pointer}.menu span:not(.sr){width:22px;height:1.5px;background:currentColor;transition:.4s var(--ease)}
 .menu[aria-expanded=true] span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}.menu[aria-expanded=true] span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
 .navlinks{position:fixed;inset:60px 0 auto;flex-direction:column;gap:0;background:var(--bg);padding:8px var(--pad) 28px;font-size:32px;font-weight:600;letter-spacing:-.04em;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease)}
 .navlinks.open{clip-path:inset(0 0 0 0)}.navlinks li{border-bottom:1px solid var(--line);padding:8px 0}
 .hero{row-gap:28px}.hero-verb,.hero-lede{font-size:19px}
 .legend{flex-direction:column;align-items:flex-start;gap:4px}
 .legend>span+span::before{content:none;margin:0}
 .art-1{aspect-ratio:4/3}
 .item:nth-child(2){margin-top:0}.note{opacity:1;transform:none}
 .sec-h{row-gap:14px}
 .index a{grid-template-columns:28px 1fr auto;row-gap:6px}.index .n{grid-column:1}.index .t{grid-column:2}.index .p{grid-column:3;grid-row:1}.index .d{grid-column:2/4}.index .s{grid-column:2/4;grid-row:auto}
 .signup{grid-template-columns:1fr}.signup .arrow-btn{justify-self:start;padding:12px 0}.signup .fine,.signup .ok{grid-column:1;top:0;padding-bottom:8px}
 .tier{grid-template-columns:1fr}.amt,.tier p:last-child{grid-column:1;grid-row:auto}
 .tier-flag .amt{justify-self:start}
 .tier-flag .includes{grid-template-columns:1fr}
 .plan{min-height:0}
}
@media (max-width:1100px){
 .tier-flag .includes{grid-template-columns:1fr}
}