:root{
  --orange:#EE9736; --orange-l:#F2C491;
  --blue:#549FFF; --blue-l:#97C4FF;
  --green:#99C34A; --green-l:#BAD881;
  --purple:#8B47BC; --purple-l:#AB7CCC;
  --yellow:#DCDF3F; --yellow-l:#EFF09B;
  --red:#DE2311; --red-l:#EA9F97;
  --teal:#4ED5EA; --teal-l:#81E5F4;
  --dpink:#BC47AD; --dpink-l:#CA76BF;
  --pink:#E93CA8;
  --ink:#000; --paper:#fff;
  /* soft panels: the palette, mixed toward white */
  --t-yellow:color-mix(in srgb,var(--yellow-l) 42%,#fff);
  --t-orange:color-mix(in srgb,var(--orange-l) 40%,#fff);
  --t-blue:color-mix(in srgb,var(--blue-l) 32%,#fff);
  --t-teal:color-mix(in srgb,var(--teal-l) 30%,#fff);
  --t-green:color-mix(in srgb,var(--green-l) 38%,#fff);
  --t-purple:color-mix(in srgb,var(--purple-l) 26%,#fff);
  --t-pink:color-mix(in srgb,var(--dpink-l) 22%,#fff);
  --muted:rgba(0,0,0,.58);
  --faint:rgba(0,0,0,.38);
  --hair:rgba(0,0,0,.07);
  --lift:0 1px 2px rgba(17,17,38,.05),0 24px 48px -24px rgba(17,17,38,.22);
  --r-xl:clamp(24px,2.4vw,36px); --r-lg:22px; --r-md:14px;
  --gutter:clamp(16px,2.2vw,32px);
  --pad:clamp(28px,5.6vw,96px);
  --head:"Geist", sans-serif;
  --body:"Satoshi", sans-serif;
  --ease:cubic-bezier(.7,0,.2,1);
  --soft:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);scroll-behavior:smooth;overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:400;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
a{color:inherit;text-decoration:none}
.wrap{max-inline-size:1520px;margin-inline:auto;padding-inline:var(--gutter)}
.h{font-family:var(--head);font-weight:300;text-transform:uppercase;letter-spacing:-0.025em;line-height:.95}
.panel{border-radius:var(--r-xl);padding:var(--pad)}
.sec{padding-block:10px}
.eb{display:inline-flex;align-items:center;gap:12px;font-family:var(--head);font-weight:400;font-size:12.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-block-end:28px}
.eb::before{content:"";inline-size:8px;block-size:8px;border-radius:2px;background:var(--pink);flex:none}
.eb b{font-weight:400;color:var(--ink)}
h2.h{font-size:clamp(40px,5.2vw,80px)}
.lede{font-size:clamp(18px,1.4vw,21px);font-weight:500;line-height:1.5;max-inline-size:40ch}

/* button: one rounded style everywhere */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.07em;font-size:14.5px;line-height:1;padding-block:20px 19px;padding-inline:30px;border-radius:999px;background:var(--ink);color:var(--paper);white-space:nowrap;transition:translate .3s var(--soft),box-shadow .3s var(--soft),background-color .3s ease}
.btn svg{inline-size:14px;block-size:14px;transition:translate .3s var(--soft)}
.btn:hover{translate:0 -2px;box-shadow:0 14px 28px -12px rgba(0,0,0,.45);background:#1c1c1c}
.btn:hover svg{translate:3px 0}
.btn:focus-visible,.tl:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.btn.inv{background:var(--paper);color:var(--ink)}
.btn.inv:hover{background:#f2f2f2;box-shadow:0 14px 28px -12px rgba(255,255,255,.35)}
.tl{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:17px;padding-block:13px;padding-inline:22px;border-radius:999px;background:rgba(255,255,255,.7);transition:background-color .25s ease}
.tl:hover{background:#fff}
.tl svg{inline-size:13px;block-size:13px}

/* scroll reveal (only when motion is welcome) */
.js-rv .rv{opacity:0;translate:0 18px;transition:opacity .6s var(--soft),translate .7s var(--soft)}
.js-rv .rv.on{opacity:1;translate:0 0}
.js-rv .rvb{opacity:0;translate:0 48px;scale:.985;transition:opacity 1s var(--soft),translate 1.1s var(--soft),scale 1.1s var(--soft)}
.js-rv .rvb.on{opacity:1;translate:0 0;scale:1}

/* hero: unchanged portrait clip */
.hero{position:relative;min-block-size:100vh;min-block-size:100svh;display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--ink);color:var(--paper);overflow:hidden}
.media{grid-area:1 / 1;position:relative;overflow:hidden;container-type:size}
.stage{position:absolute;inline-size:max(100cqw,calc(100cqh * 2400 / 1340));block-size:max(100cqh,calc(100cqw * 1340 / 2400));inset-inline-end:0;inset-block-start:50%;translate:0 -50%}
.stage video{position:absolute;inset:0;inline-size:100%;block-size:100%;display:block;object-fit:cover;object-position:50% 50%;background:#8f78c0}
.media .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.36) 0,rgba(0,0,0,.26) 36%,rgba(0,0,0,0) 60%)}
.top{position:absolute;inset-block-start:0;inset-inline:0;z-index:3;color:var(--paper)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;block-size:112px;max-inline-size:1440px;padding-inline:clamp(16px,3.4vw,56px)}
.top img{block-size:24px;inline-size:auto;display:block}
.top nav{display:flex;align-items:center;gap:clamp(28px,3.6vw,56px)}
.top nav a{font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:14px;letter-spacing:.06em;opacity:.92;transition:opacity .2s}
.top nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.top .menu{display:none}
.hero .in{grid-area:1 / 1;position:relative;z-index:2;align-self:center;padding-block:150px 110px;inline-size:100%;max-inline-size:1440px;padding-inline:clamp(16px,3.4vw,56px)}
.hero h1{font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-0.025em}
.hero h1 span{display:block}
.hero .sub{font-weight:500;font-size:24px;line-height:1.4;max-inline-size:28ch;margin-block:32px 44px}
.hero .btn{background:var(--paper);color:var(--ink)}
.hero .btn:hover{background:#f2f2f2}
.strip{position:relative;z-index:2;background:var(--paper);color:var(--ink)}
.strip .wrap{block-size:96px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:20px;font-weight:500}
@media (max-width:760px), (max-aspect-ratio: 3/2){
  .hero{min-block-size:90vh;min-block-size:90svh}
  .stage{inset-inline-end:auto;inset-inline-start:45%;inset-block-start:0;translate:-67.3% 0}
  .media .shade{background:linear-gradient(0deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.5) 34%,rgba(0,0,0,0) 58%)}
  .hero .in{align-self:end;padding-block:0 96px}
}
@media (min-width:761px) and (min-aspect-ratio: 3/2){
  .hero.aimed .stage{inset:0;inline-size:100%;block-size:100%;translate:none;scale:none}
  .hero.aimed .media .shade{background:linear-gradient(180deg,rgba(0,0,0,.28) 0,rgba(0,0,0,0) 16%),linear-gradient(90deg,rgba(0,0,0,.36) 0,rgba(0,0,0,.26) 36%,rgba(0,0,0,0) 60%)}
  .hero.aimed .sub{text-shadow:0 1px 14px rgba(40,20,70,.45)}
  .hero.aimed .stage video{inset:auto;object-fit:fill;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
  .media{background:linear-gradient(180deg,rgb(131,106,169) 0,rgb(127,102,165) 55%,rgb(111,85,148) 100%)}
  .stage{inset-block-start:auto;inset-block-end:0;translate:none;scale:var(--hero-scale,.74);transform-origin:100% 100%}
  .stage video{background:transparent;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 6%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 6%);mask-composite:intersect}
}

/* logos, right under the strip */
.logos{padding-block:8px 48px;text-align:center}
.logos .lab{font-family:var(--head);font-weight:400;font-size:12.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.marquee{--gap:112px;margin-block-start:12px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.track{display:flex;inline-size:max-content;animation:marquee 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logos ul{list-style:none;display:flex;align-items:center;gap:var(--gap);padding-inline-end:var(--gap);flex:none}
.logos li{display:flex;align-items:center;justify-content:center;block-size:64px;flex:none}
.logos img{display:block;block-size:calc(var(--h) * .92px);inline-size:auto;opacity:.86}
.static .marquee{-webkit-mask-image:none;mask-image:none}
.static .track{inline-size:auto;justify-content:center}
.static .logos ul.dup{display:none}
.static .logos ul{flex:1 1 auto;flex-wrap:wrap;justify-content:center;row-gap:44px;padding-inline-end:0;max-inline-size:1240px;margin-inline:auto}
@media (prefers-reduced-motion: reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .track{inline-size:auto;justify-content:center}
  .logos ul.dup{display:none}
  .logos ul{flex:1 1 auto;flex-wrap:wrap;justify-content:center;row-gap:44px;padding-inline-end:0;max-inline-size:1240px;margin-inline:auto}
}

/* 01 problem */
.problem{background:var(--t-yellow)}
.p-head{display:block}
.p-head h2{max-inline-size:12ch}
.p-head .lede{justify-self:end;color:var(--muted)}
.signs{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-block-start:72px}
.signs li{background:rgba(255,255,255,.78);border-radius:var(--r-lg);padding:22px 22px 26px;display:flex;flex-direction:column;gap:40px;min-block-size:220px}
.signs .tag{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:400;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.signs .tag i{inline-size:10px;block-size:10px;border-radius:50%;background:var(--c)}
.signs .t{font-weight:500;font-size:19px;line-height:1.38;margin-block-start:auto}
.verdict{margin-block-start:88px}
.verdict p{font-family:var(--head);font-weight:300;text-transform:uppercase;letter-spacing:-0.022em;font-size:clamp(28px,3.25vw,52px);line-height:1.04}
.verdict .v1{display:block;color:var(--faint)}
.verdict .v2{display:block}
.sq{display:inline-block;inline-size:.26em;block-size:.26em;border-radius:.05em;background:var(--pink);margin-inline-start:.08em;vertical-align:baseline}
.verdict .note{font-size:16px;color:var(--muted);max-inline-size:20ch;text-align:end;padding-block-end:8px}

/* debt chart */
.debt{background:var(--t-orange)}
.debt .top2{margin-block-end:72px}
.debt .lede{color:var(--muted);margin-block-start:28px}
.chartbox{inline-size:100%}
.chartbox svg{display:block;inline-size:100%;block-size:auto;overflow:visible}
.chartbox .cost{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease)}
.chartbox .gap{clip-path:inset(0 100% 0 0);transition:clip-path 2.4s var(--ease)}
.chartbox .lbl{opacity:0;transition:opacity .8s ease 1.8s}
.chartbox .lock{opacity:0;translate:0 10px;transition:opacity .7s ease .5s,translate .7s var(--soft) .5s}
.chartbox.in .cost{stroke-dashoffset:0}
.chartbox.in .gap{clip-path:inset(0 0 0 0)}
.chartbox.in .lbl{opacity:1}
.chartbox.in .lock{opacity:1;translate:0 0}

/* 02 solution */
.how{padding-block:clamp(88px,9vw,150px) 10px}
.how .head{padding-inline:var(--pad);margin-block-end:64px}
.how .head .lede{justify-self:end;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cards article{border-radius:var(--r-xl);display:flex;flex-direction:column;overflow:hidden}
.art{padding:clamp(22px,2.4vw,36px) clamp(22px,2.4vw,36px) 0;display:flex;justify-content:center}
.art .win{inline-size:100%;max-inline-size:420px;min-block-size:372px;display:flex;flex-direction:column}
.art .win > .loop{flex:1}
.art .win .ft{margin-block-start:auto !important}
.cards .body{padding:clamp(26px,2.6vw,40px) clamp(22px,2.4vw,36px) clamp(30px,2.8vw,44px);display:flex;flex-direction:column;flex:1}
.wk{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-block-end:18px}
.wk b{font-weight:400;color:var(--ink);background:#fff;border-radius:999px;padding:6px 10px 5px}
.cards h3{font-family:var(--head);font-weight:300;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(28px,2.4vw,36px);line-height:1;margin-block-end:14px}
.cards p{font-size:17px;color:rgba(0,0,0,.72)}

/* UI snippet kit */
.win{background:#fff;border-radius:var(--r-md);box-shadow:var(--lift);overflow:hidden;font-family:var(--body);text-align:start;position:relative}
.win .bar{display:flex;align-items:center;gap:6px;padding:12px 16px;box-shadow:inset 0 -1px 0 var(--hair)}
.win .bar i{inline-size:8px;block-size:8px;border-radius:50%;background:#e9e9ec}
.win .bar span{margin-inline-start:10px;font-size:12px;font-weight:500;color:var(--muted)}
.win .bar em{margin-inline-start:auto;font-style:normal;font-family:var(--head);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.cap{font-family:var(--head);font-weight:400;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.loop{animation:loop 9s ease infinite both}
@keyframes loop{0%,8%{opacity:0}14%,94%{opacity:1}100%{opacity:0}}

/* snippet 1: segment scoring */
.sc{padding:18px 16px 16px;display:flex;flex-direction:column;gap:6px}
.sc .hd{display:grid;grid-template-columns:20px minmax(0,1fr) 70px 28px;gap:10px;padding:0 10px 6px}
.sc .hd span:nth-child(4){text-align:end}
.sr{display:grid;grid-template-columns:20px minmax(0,1fr) 70px 28px;gap:10px;align-items:center;padding:11px 10px;border-radius:10px;position:relative}
.sr .ck{inline-size:18px;block-size:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #dcdce2;display:grid;place-items:center}
.sr .ck svg{inline-size:10px;block-size:10px;opacity:0}
.sr .nm{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr .nm small{display:block;font-size:11.5px;font-weight:400;color:var(--faint)}
.sr .mt{block-size:6px;border-radius:9px;background:#f0f0f3;overflow:hidden}
.sr .mt b{display:block;block-size:100%;inline-size:calc(var(--v) * 100%);border-radius:9px;background:rgba(0,0,0,.22);transform-origin:left;animation:grow 9s var(--soft) infinite both}
.sr .n{font-family:var(--head);font-size:15px;text-align:end;font-variant-numeric:tabular-nums;animation:fadein 9s ease infinite both}
.sr:nth-child(3) .mt b,.sr:nth-child(3) .n{animation-delay:.25s}
.sr:nth-child(4) .mt b,.sr:nth-child(4) .n{animation-delay:.5s}
@keyframes grow{0%,12%{transform:scaleX(0)}34%,100%{transform:scaleX(1)}}
@keyframes fadein{0%,24%{opacity:0}34%,100%{opacity:1}}
.sr.win1{background:var(--t-blue)}
.sr.win1 .mt b{background:var(--blue)}
.sr.win1 .ck{background:var(--ink);box-shadow:none}
.sr.win1 .ck svg{opacity:1}
.sr.win1{animation:hl 9s ease infinite both}
.sr.win1 .ck{animation:ck 9s var(--soft) infinite both}
@keyframes hl{0%,44%{background:transparent}52%,100%{background:var(--t-blue)}}
@keyframes ck{0%,48%{background:transparent;box-shadow:inset 0 0 0 1.5px #dcdce2;transform:scale(1)}53%{background:var(--ink);box-shadow:none;transform:scale(1.18)}58%,100%{background:var(--ink);box-shadow:none;transform:scale(1)}}
.sc .ft{display:flex;justify-content:space-between;align-items:center;margin-block-start:10px;padding:12px 10px 0;box-shadow:inset 0 1px 0 var(--hair);font-size:12px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px 5px;border-radius:999px;background:var(--ink);color:#fff}
.chip i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--green)}
.sc .chip{animation:pop 9s var(--soft) infinite both}
@keyframes pop{0%,56%{opacity:0;transform:translateY(6px)}62%,100%{opacity:1;transform:none}}

/* snippet 2: messaging doc */
.doc{padding:20px 22px 18px;display:flex;flex-direction:column;gap:14px}
.doc .blk{display:flex;flex-direction:column;gap:7px}
.doc .ty{font-weight:500;font-size:16px;line-height:1.3;white-space:nowrap}
.doc .ty span{display:block;inline-size:max-content;clip-path:inset(0 0 0 0)}
.doc .ty span:nth-child(1){animation:type1 9s steps(18) infinite both}
.doc .ty span:nth-child(2){animation:type2 9s steps(26) infinite both}
@keyframes type1{0%,12%{clip-path:inset(0 100% 0 0)}24%,100%{clip-path:inset(0 0 0 0)}}
@keyframes type2{0%,24%{clip-path:inset(0 100% 0 0)}38%,100%{clip-path:inset(0 0 0 0)}}
.ln{display:block;block-size:7px;border-radius:9px;background:#ececf0;transform-origin:left}
.doc .ln{animation:fill 9s var(--soft) infinite both}
.doc .a1{animation-delay:.0s}
.doc .ln.d1{animation-name:fill1}.doc .ln.d2{animation-name:fill2}.doc .ln.d3{animation-name:fill3}.doc .ln.d4{animation-name:fill4}.doc .ln.d5{animation-name:fill5}
@keyframes fill1{0%,38%{transform:scaleX(0)}46%,100%{transform:scaleX(1)}}
@keyframes fill2{0%,42%{transform:scaleX(0)}50%,100%{transform:scaleX(1)}}
@keyframes fill3{0%,46%{transform:scaleX(0)}54%,100%{transform:scaleX(1)}}
@keyframes fill4{0%,54%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
@keyframes fill5{0%,58%{transform:scaleX(0)}66%,100%{transform:scaleX(1)}}
.doc .ln.d6{animation-name:fill6}
@keyframes fill6{0%,62%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.doc .ft{display:flex;justify-content:space-between;align-items:center;padding-block-start:12px;box-shadow:inset 0 1px 0 var(--hair);font-size:12px;color:var(--muted)}
.state{position:relative;display:inline-grid}
.state > *{grid-area:1 / 1}
.state .s0{background:#f1f1f4;color:var(--muted);animation:s0 9s ease infinite both;opacity:0}
.state .s0 i{background:var(--orange)}
.state .s1{animation:s1 9s ease infinite both}
@keyframes s0{0%,70%{opacity:1}74%,100%{opacity:0}}
@keyframes s1{0%,70%{opacity:0;transform:scale(.92)}76%,100%{opacity:1;transform:none}}

/* snippet 3: context folder */
.tree{padding:16px 14px 16px;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.tree .row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px}
.tree .row svg{inline-size:15px;block-size:15px;flex:none}
.tree .row .sz{margin-inline-start:auto;font-family:var(--head);font-size:10.5px;letter-spacing:.08em;color:var(--faint)}
.tree .dir{font-weight:500}
.tree .f{padding-inline-start:34px;animation:file 9s var(--soft) infinite both}
.tree .f:nth-child(3){animation-name:file2}.tree .f:nth-child(4){animation-name:file3}.tree .f:nth-child(5){animation-name:file4}.tree .f:nth-child(6){animation-name:file5}
@keyframes file{0%,14%{opacity:0;transform:translateX(-8px)}22%,100%{opacity:1;transform:none}}
@keyframes file2{0%,22%{opacity:0;transform:translateX(-8px)}30%,100%{opacity:1;transform:none}}
@keyframes file3{0%,30%{opacity:0;transform:translateX(-8px)}38%,100%{opacity:1;transform:none}}
@keyframes file4{0%,38%{opacity:0;transform:translateX(-8px)}46%,100%{opacity:1;transform:none}}
@keyframes file5{0%,46%{opacity:0;transform:translateX(-8px)}54%,100%{opacity:1;transform:none}}
.tree .f.new{background:var(--t-teal)}
.tree .f.new{animation-name:file5,newbg}
@keyframes newbg{0%,54%{background:transparent}60%,100%{background:var(--t-teal)}}
.tree .ft{display:flex;justify-content:space-between;align-items:center;margin-block-start:10px;padding:12px 10px 0;box-shadow:inset 0 1px 0 var(--hair);font-size:12px;color:var(--muted)}
.tree .chip{animation:pop2 9s var(--soft) infinite both}
@keyframes pop2{0%,60%{opacity:0;transform:translateY(6px)}66%,100%{opacity:1;transform:none}}

/* the positioning bet */
.bet{background:var(--t-purple);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,112px);align-items:center}
.bet h2.h{font-size:clamp(38px,4.4vw,68px)}
.bet .copy p{font-size:19px;line-height:1.6;color:rgba(0,0,0,.72);max-inline-size:40ch;margin-block:32px 40px}
.facts{display:grid;gap:22px}
.facts div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:baseline}
.facts dt{font-family:var(--head);font-weight:400;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.facts dd{font-size:17px;font-weight:500}
.bets{padding:22px;display:flex;flex-direction:column;gap:10px;position:relative}
.bets .hl{position:absolute;inset-inline:22px;inset-block-start:22px;block-size:96px;border-radius:14px;box-shadow:0 0 0 1.5px var(--purple),0 10px 30px -14px rgba(139,71,188,.6);transform:translateY(212px);animation:scan 10s var(--soft) infinite both;pointer-events:none}
@keyframes scan{0%,6%{transform:translateY(0);opacity:0}10%,16%{transform:translateY(0);opacity:1}24%,30%{transform:translateY(106px)}38%,44%{transform:translateY(318px)}54%,94%{transform:translateY(212px);opacity:1}100%{transform:translateY(212px);opacity:0}}
.bt{block-size:96px;border-radius:14px;background:#f7f6f9;padding:16px 18px;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:start;opacity:.55;animation:dim 10s ease infinite both}
@keyframes dim{0%,50%{opacity:1}58%,100%{opacity:.55}}
.bt .rd{inline-size:20px;block-size:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #d6d4dc;margin-block-start:2px}
.bt .k{font-family:var(--head);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-block-end:9px}
.bt .ln{background:#e6e4ea;margin-block-end:7px}
.bt .ln:last-child{margin-block-end:0}
.bt.pick{background:#fff;opacity:1;animation:none;box-shadow:0 1px 2px rgba(17,17,38,.06)}
.bt.pick .rd{background:var(--purple);box-shadow:none;display:grid;place-items:center;animation:rd 10s var(--soft) infinite both}
.bt.pick .rd::after{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:#fff}
@keyframes rd{0%,54%{background:transparent;box-shadow:inset 0 0 0 1.5px #d6d4dc}58%,100%{background:var(--purple);box-shadow:none}}
.bt.pick .stmt{font-family:var(--head);font-weight:300;text-transform:uppercase;letter-spacing:-0.01em;font-size:clamp(17px,1.45vw,21px);line-height:1.1}
.bt .lk{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px 5px;border-radius:999px;background:var(--purple);color:#fff;animation:pop3 10s var(--soft) infinite both}
.bt .lk svg{inline-size:10px;block-size:10px}
@keyframes pop3{0%,58%{opacity:0;transform:scale(.85)}64%,100%{opacity:1;transform:none}}
.bets .ft{display:flex;justify-content:space-between;align-items:center;padding:14px 4px 0;font-size:12.5px;color:var(--muted)}

/* proof: testimonial carousel */
.proof{background:var(--t-pink);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,6vw,112px)}
.proof .side{display:contents}
.proof .eb{grid-column:1;grid-row:1;justify-self:start}
.proof h2.h{grid-column:1;grid-row:2;align-self:start}
.proof .car{grid-column:2;grid-row:2}
.proof h2.h{font-size:clamp(36px,3.8vw,58px)}
.dot:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.car{display:flex;flex-direction:column;gap:36px;min-inline-size:0;touch-action:pan-y}
.stage2{display:grid;clip-path:inset(-240px 0 -60px 0);overflow-x:clip}
.slide{grid-area:1 / 1;margin:0;display:flex;flex-direction:column;gap:36px;translate:calc(100% + 80px) 0;visibility:hidden;transition:none}
.slide.on{translate:0 0;visibility:visible;transition:translate .9s cubic-bezier(.65,0,.35,1)}
.slide.out{translate:calc(-100% - 80px) 0;visibility:hidden;transition:translate .9s cubic-bezier(.65,0,.35,1),visibility 0s linear .9s}
.slide blockquote{position:relative;font-weight:500;font-size:clamp(20px,1.75vw,27px);line-height:1.45;letter-spacing:-0.005em;margin-block-start:-0.3em}
.slide blockquote::before{content:"\201C";position:absolute;inset-inline-start:-0.02em;inset-block-start:-0.78em;font-family:var(--head);font-weight:300;font-size:3.4em;line-height:1;color:var(--pink)}
.who{display:flex;align-items:center;gap:16px;margin-block-start:auto}
.who .av{overflow:hidden;inline-size:64px;block-size:64px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--head);font-size:16px;letter-spacing:.06em;flex:none}
.who .av img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.who .name{display:block;font-weight:700;font-size:17px;line-height:1.3}
.who .role{font-size:15px;color:var(--muted)}
.dots{display:flex;gap:0;flex-wrap:wrap}
.dot{inline-size:18px;block-size:28px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.dot::before{content:"";inline-size:8px;block-size:8px;border-radius:999px;background:rgba(0,0,0,.18);transition:inline-size .4s var(--soft),background-color .3s ease}
.dot.on{inline-size:34px}
.dot.on::before{inline-size:26px;background:var(--ink)}

/* 04 about */
.about{background:var(--t-orange);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,128px);align-items:center}
.about figure{margin:0}
.about figure img{display:block;inline-size:100%;block-size:auto;border-radius:var(--r-lg)}
.about h2.h{font-size:clamp(34px,3.6vw,56px);line-height:1;margin-block-end:32px;max-inline-size:16ch}
.about p{font-size:19px;line-height:1.62;color:rgba(0,0,0,.76);max-inline-size:46ch;margin-block-end:20px}
.about p strong{font-weight:500;color:var(--ink)}
.about .tl{margin-block-start:20px}

/* 05 pricing */
.price{background:var(--t-green);display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(40px,5vw,96px);align-items:start}
.price .lead{font-size:clamp(34px,3.6vw,56px)}
.price .big{font-size:clamp(80px,10.4vw,176px);line-height:.86;letter-spacing:-0.045em;margin-block:36px 28px;white-space:nowrap}
.price .fx{font-size:20px;color:var(--muted)}
.inc{background:#fff;border-radius:var(--r-lg);padding:30px;box-shadow:var(--lift)}
.inc h3{font-family:var(--head);font-weight:400;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-block-end:14px}
.inc ul{list-style:none;margin-block-end:28px}
.inc li{display:flex;align-items:center;gap:14px;padding-block:14px;font-weight:500;font-size:17px}
.inc li + li{box-shadow:inset 0 1px 0 var(--hair)}
.inc li span{inline-size:24px;block-size:24px;border-radius:50%;background:var(--t-green);display:grid;place-items:center;flex:none}
.inc li svg{inline-size:11px;block-size:11px}
.inc .btn{inline-size:100%;justify-content:center}

/* footer */
.foot{padding-block:10px var(--gutter)}
footer{background:var(--ink);color:var(--paper);border-radius:var(--r-xl);padding:var(--pad)}
footer .grid2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:56px}
footer .brand img{block-size:28px;inline-size:auto;display:block}
footer .brand p{margin-block:28px 40px;font-size:20px;max-inline-size:24ch;color:rgba(255,255,255,.82)}
footer h4{font-family:var(--head);font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.5);margin-block-end:22px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:17px}
footer ul a{opacity:.86;transition:opacity .2s}
footer ul a:hover{opacity:1}
footer .base{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-block-start:104px;padding-block-start:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);font-size:14px;color:rgba(255,255,255,.5)}

/* static mode for screenshots, and reduced motion: every snippet rests in its finished state */
.static *,.static *::before,.static *::after{animation:none !important;transition:none !important}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

@media (max-width:1180px){
  .signs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .signs li{min-block-size:0;gap:28px}
  .signs li:last-child{grid-column:1 / -1}
  .cards{grid-template-columns:1fr;max-inline-size:640px;margin-inline:auto}
  .bet,.about,.proof{grid-template-columns:1fr}
  .about figure{max-inline-size:460px}
  .proof{gap:0}
  .proof .side{display:contents}
  .proof .eb,.proof h2.h,.proof .car{grid-column:auto;grid-row:auto}
  .proof .car{order:2;margin-block-start:64px}
  .slide blockquote{margin-block-start:0;padding-block-start:1.15em}
  .slide blockquote::before{inset-block-start:-0.55em}
  .price{grid-template-columns:1fr;align-items:start}
  footer .grid2{grid-template-columns:1fr 1fr}
  footer .brand{grid-column:1 / -1}
}
@media (max-width:860px){
  .p-head,.debt .top2,.how .head{grid-template-columns:1fr;gap:24px}
  .p-head .lede,.debt .lede,.how .head .lede{justify-self:start}
  .verdict{grid-template-columns:1fr}
  .verdict .note{text-align:start}
}
@media (max-width:760px){
  body{font-size:17px}
  .top .wrap{block-size:80px}
  .top img{block-size:18px}
  .top nav a{display:none}
  .top .menu{display:inline;font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:14px;letter-spacing:.06em}
  .hero .in{padding-block:0 28px}
  .hero h1{font-size:34px}
  .hero h1 span{display:inline}
  .hero .sub{font-size:16px;margin-block:18px 26px}
  .strip .wrap{block-size:auto;padding-block:28px 22px;font-size:17px}
  .logos{padding-block:4px 36px}
  .marquee{--gap:56px;margin-block-start:8px}
  .static .logos ul{row-gap:28px}
  .logos li{block-size:44px}
  .logos img{block-size:calc(var(--h) * .68px)}
  .panel,footer{padding:28px 22px}
  .eb{margin-block-end:20px}
  .signs{grid-template-columns:1fr;margin-block-start:44px;gap:10px}
  .signs li{padding:18px 18px 20px;gap:16px}
  .signs .t{font-size:18px}
  .verdict{margin-block-start:56px}
  .debt .top2{margin-block-end:40px}
  .how{padding-block:72px 10px}
  .how .head{padding-inline:6px;margin-block-end:36px}
  .art{padding:18px 16px 0}
  .art .win{min-block-size:0}
  .bets{padding:14px}
  .bets .hl{inset-inline:14px;inset-block-start:14px;block-size:112px;transform:translateY(244px)}
  @keyframes scan{0%,6%{transform:translateY(0);opacity:0}10%,16%{transform:translateY(0);opacity:1}24%,30%{transform:translateY(122px)}38%,44%{transform:translateY(366px)}54%,94%{transform:translateY(244px);opacity:1}100%{transform:translateY(244px);opacity:0}}
  .bt{block-size:112px;padding:14px;grid-template-columns:20px minmax(0,1fr);gap:12px}
  .bt{position:relative}
  .bt .lk{position:absolute;inset-block-start:11px;inset-inline-end:12px;padding:5px 9px 4px}
  .bt.pick .stmt{font-size:16px;line-height:1.12}
  .facts div{grid-template-columns:1fr;gap:4px}
  .bet .copy p,.about p{font-size:17px}
  .price .big{margin-block:24px 18px;font-size:19vw}
  .inc{padding:22px}
  footer{padding:44px 22px 28px}
  footer .grid2{grid-template-columns:1fr;gap:40px}
  footer .base{margin-block-start:64px}
}
.teach{background:var(--t-blue)}
.teach .thead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.teach .tt{font-family:var(--head);font-weight:300;text-transform:uppercase;letter-spacing:-0.02em;line-height:1.05;font-size:clamp(24px,2.2vw,34px);max-inline-size:24ch;margin:14px 0 0}
.teach .btn{white-space:nowrap}
.teach .venues{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.teach .venues li{background:rgba(255,255,255,.62);border-radius:18px;padding:20px 24px;display:flex;flex-direction:column;gap:6px}
.teach .venues .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.teach .venues .v{font-family:var(--head);font-weight:400;font-size:clamp(18px,1.5vw,22px);line-height:1.15;letter-spacing:-0.01em}
@media (max-width:760px){.teach .venues{grid-template-columns:1fr}.teach .venues li{padding:16px 20px}}
@media (min-width:1181px){ .about{align-items:start} }
/* equal section padding: nothing adds extra space after the last item */
.panel :last-child,footer :last-child{margin-block-end:0}

/* ===================== shared template: added for the multi-page site ===================== */
.skip{position:absolute;inset-inline-start:12px;inset-block-start:-60px;z-index:20;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:15px}
.skip:focus{inset-block-start:12px}
.top nav .links{display:contents}
.top nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;opacity:1}
.top .menu{background:none;border:0;color:inherit;cursor:pointer;padding:8px 0}
.top.solid{position:relative;color:var(--ink)}
.top.solid .wrap{block-size:96px}
.top .menu:focus-visible,.top nav a:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
@media (max-width:760px){
  .top.solid .wrap{block-size:72px}
  .top nav .links{display:none}
  .top.open nav .links{display:flex;flex-direction:column;position:absolute;inset-block-start:calc(100% - 8px);inset-inline:16px;background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:10px 8px;box-shadow:var(--lift);z-index:10}
  .top.open nav .links a{display:block;padding:14px 16px;font-size:15px;border-radius:12px}
  .top.open nav .links a:hover{background:#f4f4f6;text-decoration:none}
}

/* page head: one soft panel per page */
.ph{padding-block-start:6px}
.ph .panel{display:grid;gap:28px}
.ph h1.h{font-size:clamp(44px,6.4vw,104px);max-inline-size:14ch}
.ph .lede{color:rgba(0,0,0,.66)}
.ph .back{justify-self:start}
.crumbs{font-family:var(--head);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink)}

/* tags */
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:13.5px;font-weight:500;line-height:1;padding:9px 13px 8px;border-radius:999px;background:rgba(255,255,255,.72);color:rgba(0,0,0,.72)}

/* portfolio index */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{border-radius:var(--r-xl);padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;gap:22px;min-block-size:380px;transition:translate .35s var(--soft),box-shadow .35s var(--soft)}
a.card:hover{translate:0 -4px;box-shadow:var(--lift)}
a.card:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.card .logo{block-size:96px;display:flex;align-items:center;background:rgba(255,255,255,.72);border-radius:var(--r-lg);padding-inline:26px}
.card .logo img{display:block;max-block-size:34px;max-inline-size:78%;inline-size:auto;block-size:auto}
.card .k{font-family:var(--head);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card h2{font-family:var(--head);font-weight:300;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(28px,2.4vw,38px);line-height:1}
.card .line{font-size:18px;font-weight:500;line-height:1.4;margin-block-start:-8px}
.card .tags{margin-block-start:auto}
.card .tags li{font-size:12.5px;padding:8px 11px 7px}
.card .more{font-family:var(--head);font-size:13px;letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.card .more .sqx{inline-size:10px;block-size:10px;border-radius:2px;background:var(--pink)}

/* company page */
.co-head .logo{background:rgba(255,255,255,.72);border-radius:var(--r-lg);padding:28px 32px;justify-self:start}
.co-head .logo img{display:block;block-size:40px;inline-size:auto;max-inline-size:60vw}
.jump{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.jump a{display:inline-block;font-size:14.5px;font-weight:500;padding:10px 15px 9px;border-radius:999px;background:#fff;transition:background-color .2s}
.jump a:hover{background:#f2f2f2}
.item{border-radius:var(--r-xl);padding:clamp(24px,3.6vw,64px);background:#f6f6f8;scroll-margin-block-start:16px}
.item + .item{margin-block-start:14px}
.item .ih{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end;margin-block-end:clamp(24px,3vw,44px)}
.item h2{font-family:var(--head);font-weight:300;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(28px,3vw,48px);line-height:1}
.item .k{font-family:var(--head);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-block-end:14px;display:flex;align-items:center;gap:10px}
.item .k::before{content:"";inline-size:8px;block-size:8px;border-radius:2px;background:var(--pink)}
.item .desc{font-size:18px;line-height:1.6;color:rgba(0,0,0,.72);max-inline-size:62ch;margin-block-start:18px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}
.gallery.few{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
.shot{display:block;border-radius:var(--r-md);overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(17,17,38,.06);position:relative;aspect-ratio:1 / 1}
.shot img{display:block;inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 0;transition:scale .5s var(--soft)}
.shot:hover img{scale:1.03}
.shot:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.poster{border-radius:var(--r-md);overflow:hidden;display:block;max-inline-size:720px}
.poster img{display:block;inline-size:100%;block-size:auto}

/* lightbox */
dialog.lb{position:fixed;inset:0;inline-size:100vw;block-size:100dvh;max-inline-size:none;max-block-size:none;margin:0;border:0;padding:0;background:rgba(10,10,14,.94);color:#fff;display:none;grid-template-rows:auto minmax(0,1fr)}
dialog.lb[open]{display:grid}
dialog.lb::backdrop{background:rgba(10,10,14,.6)}
.lb-bar{display:flex;align-items:center;gap:10px;padding:14px clamp(16px,2.4vw,32px)}
.lb-cap{flex:1;min-inline-size:0;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.lb-n{font-family:var(--head);font-size:12.5px;letter-spacing:.12em;opacity:.6;margin-inline-end:8px}
.lb-bar button{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;padding:11px 16px 10px;border-radius:999px;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.lb-bar button:hover{background:rgba(255,255,255,.22)}
.lb-bar button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.lb-view{overflow:auto;display:grid;place-items:center;padding:0 clamp(16px,2.4vw,32px) clamp(16px,2.4vw,32px)}
.lb-view img{display:block;max-inline-size:100%;max-block-size:calc(100dvh - 90px);inline-size:auto;block-size:auto;border-radius:10px;background:#fff}
dialog.lb.tall .lb-view{place-items:start center}
dialog.lb.tall .lb-view img{max-block-size:none;inline-size:min(100%,1200px)}
@media (max-width:760px){.lb-cap{display:none}.lb-n{flex:1}}

/* articles */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.post-card{display:flex;flex-direction:column;border-radius:var(--r-xl);background:#f6f6f8;overflow:hidden;transition:translate .35s var(--soft),box-shadow .35s var(--soft)}
.post-card:hover{translate:0 -4px;box-shadow:var(--lift)}
.post-card:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.post-card img{display:block;inline-size:100%;block-size:auto;aspect-ratio:1200 / 630}
.post-card .pc{padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;gap:14px;flex:1}
.post-card .meta{font-family:var(--head);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.post-card h2,.post-card h3{font-family:var(--head);font-weight:300;text-transform:uppercase;letter-spacing:-0.015em;font-size:clamp(22px,1.8vw,28px);line-height:1.05}
.post-card p{font-size:16px;line-height:1.55;color:rgba(0,0,0,.66);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.posts.lead{grid-template-columns:repeat(2,minmax(0,1fr))}

.article-head .panel{display:grid;gap:26px}
.article-head h1.h{font-size:clamp(36px,4.8vw,76px);max-inline-size:20ch;line-height:1}
.byline{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15.5px;color:rgba(0,0,0,.66)}
.byline b{font-weight:500;color:var(--ink)}
.cover{border-radius:var(--r-xl);overflow:hidden;margin-block-start:14px}
.cover img{display:block;inline-size:100%;block-size:auto}
.prose{max-inline-size:720px;margin-inline:auto;padding-block:clamp(48px,6vw,96px);font-size:19px;line-height:1.7;color:rgba(0,0,0,.84)}
.prose > * + *{margin-block-start:1.1em}
.prose h2,.prose h3{font-family:var(--head);font-weight:300;text-transform:uppercase;letter-spacing:-0.015em;line-height:1.05;color:var(--ink);margin-block-start:2em}
.prose h2{font-size:clamp(28px,2.6vw,38px)}
.prose h3{font-size:clamp(24px,2.1vw,30px)}
.prose h2 + *,.prose h3 + *{margin-block-start:.8em}
.prose .step{margin-block-start:1.8em}
.prose .step strong{font-weight:700}
.prose ul{padding-inline-start:1.2em;display:grid;gap:.6em}
.prose li::marker{color:var(--pink)}
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--pink)}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{font-weight:500}
.legal.prose{font-size:17px}
.legal.prose h2{font-size:clamp(22px,2vw,28px)}

/* call to action panel at the end of inner pages */
.cta{background:var(--t-green);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 56px;align-items:end}
.cta h2.h{font-size:clamp(34px,4vw,64px);max-inline-size:18ch}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-block:clamp(56px,6vw,96px) 24px;padding-inline:clamp(6px,1vw,12px)}
.section-title h2{font-family:var(--head);font-weight:300;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(28px,3vw,48px);line-height:1}

/* 404 */
.nf .panel{min-block-size:62vh;display:flex;flex-direction:column;justify-content:center;gap:28px;background:var(--t-blue)}
.nf .big{font-family:var(--head);font-weight:300;font-size:clamp(120px,20vw,300px);line-height:.8;letter-spacing:-0.05em}
.btns{display:flex;flex-wrap:wrap;gap:10px}

@media (max-width:1180px){
  .grid,.posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
@media (max-width:760px){
  .grid,.posts,.posts.lead{grid-template-columns:1fr}
  .card{min-block-size:0}
  .item .ih{grid-template-columns:1fr}
  .co-head .jump{display:none}
  .item .ih .tl{justify-self:start}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gallery.few{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .prose{font-size:17.5px}
  .ph h1.h{font-size:44px}
  .article-head h1.h{font-size:34px}
}
.vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* phones and portrait screens (Maya, 11.10): text first on purple, then Maya below with the whole pointing pose in frame */
@media (max-width:760px), (max-aspect-ratio: 3/2){
  .hero{min-block-size:0;grid-template-rows:auto auto;background:rgb(138,114,175)}
  .hero .in{grid-area:1 / 1;align-self:start;padding-block:112px 0}
  .hero .media{grid-area:2 / 1;aspect-ratio:1.2425;background:none;container-type:normal}
  .hero .media .shade{display:none}
  .hero .stage{position:absolute;inset:0 auto 0 -33.1%;inline-size:140.8%;block-size:100%;translate:none;scale:none}
  .hero .stage video{inset:0;object-fit:fill;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
  .hero .sub{margin-block-end:22px}
}
@media (max-width:760px){
  footer .brand img{block-size:auto;inline-size:min(100%,240px)}
}
/* tablets: the six links don't fit, so use the Menu button from 1080px down (Maya, 11.10) */
@media (max-width:1080px){
  .top nav a{display:none}
  .top .menu{display:inline;font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:14px;letter-spacing:.06em}
  .top nav .links{display:none}
  .top.open nav .links{display:flex;flex-direction:column;position:absolute;inset-block-start:calc(100% - 8px);inset-inline:16px;background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:10px 8px;box-shadow:var(--lift);z-index:10}
  .top.open nav .links a{display:block;padding:14px 16px;font-size:15px;border-radius:12px}
  .top.open nav .links a:hover{background:#f4f4f6;text-decoration:none}
}
/* "All articles" / "All work" pill never wraps; on phones it sits on the heading's baseline (Maya, 11.10) */
.section-title .tl{white-space:nowrap;flex:none}
@media (max-width:760px){
  .section-title{align-items:center}
  .section-title .tl{font-size:15px;padding-block:10px;padding-inline:18px}
}
/* phones and portrait screens: the pointing-up clip sits under the button, fingertip just below it (Maya, 11.10) */
@media (max-width:760px), (max-aspect-ratio: 3/2){
  .hero{background:rgb(126,103,160)}
  .hero .media{aspect-ratio:720 / 1006;inline-size:min(100%,520px);margin-block-start:calc(-0.25 * min(100vw,520px))}
  .hero .stage{inset:0;inline-size:100%;block-size:100%;translate:none;scale:none}
  .hero .stage video{inset:0;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%);mask-image:linear-gradient(180deg,transparent 0,#000 16%)}
  .hero .in{position:relative;z-index:2}
}
@media (min-width:561px) and (max-aspect-ratio: 3/2){
  .hero .stage video{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%),linear-gradient(90deg,#000 72%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 16%),linear-gradient(90deg,#000 72%,transparent 100%);mask-composite:intersect}
}

/* positioning index gallery */
.ix-list{display:grid;gap:10px}
.ix-card{display:grid;grid-template-columns:120px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:28px;row-gap:14px;background:#f4f4f6;border-radius:var(--r-lg);padding:22px 30px;transition:background-color .25s}
.ix-card:hover{background:#ececf0}
.ix-s{grid-row:1 / 3;font-family:var(--head);font-weight:300;font-size:52px;line-height:1;letter-spacing:-0.03em}
.ix-s small,.ix-big small{font-size:.36em;color:var(--muted);letter-spacing:0;margin-inline-start:2px}
.ix-n b{display:block;font-weight:500;font-size:20px}
.ix-n span{font-size:15px;color:var(--muted)}
.ix-l{font-family:var(--head);font-size:12px;text-transform:uppercase;letter-spacing:.12em;padding:8px 14px;border-radius:999px;white-space:nowrap}
.ix-bar{grid-column:2 / 4;block-size:6px;border-radius:6px;background:rgba(0,0,0,.08);overflow:hidden}
.ix-bar i,.db i{display:block;block-size:100%;background:var(--ink);border-radius:inherit}
.ix-dims{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-block-start:36px}
.ix-dims li{background:#fff;border-radius:var(--r-md);padding:20px 22px}
.ix-dims b{font-weight:500}
.ix-dims span{float:right;font-family:var(--head);color:var(--muted)}
.ix-dims p{font-size:16px;color:var(--muted);margin-block-start:8px}
.ix-big{font-family:var(--head);font-weight:300;font-size:clamp(56px,7vw,104px);line-height:1;letter-spacing:-0.03em;margin-block:18px 20px}
.ix-big span{font-size:14px;letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;background:rgba(255,255,255,.7);padding:8px 14px;border-radius:999px;margin-inline-start:12px}
.ix-bars{list-style:none;display:grid;gap:18px;margin-block-start:8px}
.ix-bars li{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr) 56px;align-items:center;gap:20px}
.ix-bars .dn small{color:var(--muted);margin-inline-start:6px}
.db{block-size:10px;border-radius:10px;background:rgba(0,0,0,.08);overflow:hidden}
.dv{font-family:var(--head);text-align:end}
.lede a{text-decoration:underline}
@media (max-width:760px){
  .ix-card{grid-template-columns:76px minmax(0,1fr);padding:18px 20px;column-gap:16px}
  .ix-s{font-size:36px}
  .ix-l{grid-column:2;justify-self:start}
  .ix-card .ix-s{grid-row:1 / 3}
  .ix-bar{grid-column:1 / -1}
  .ix-bars li{grid-template-columns:1fr 48px;row-gap:8px}
  .ix-bars .dn{grid-column:1 / -1}
}
.panel h2.h + .lede{margin-block-start:22px}
@media (max-width:760px){.cta .btn{justify-self:start}}