/* Dawson Zhang — product portfolio.
   Geist at normal width. Every section is its own band (white / light tint) with an icon-tile header,
   so each block of information reads as one unit. Area colors appear as soft tints and small accents. */
:root{
 --paper:#fff;--tint:#f5f6f8;--mat:#eef0f3;--ink:#172033;--slate:#536074;--faint:#7a8496;--rule:#e3e6eb;--rule-strong:#cdd2da;
 --ai:#5b47e0;--ai-ink:#4330c9;--ai-soft:#efedfd;
 --fin:#0e8062;--fin-ink:#086449;--fin-soft:#e3f3ed;
 --edu:#b36d0c;--edu-ink:#8a5300;--edu-soft:#fbf1df;
 --fs:#2a5fd9;--fs-ink:#1b4cc0;--fs-soft:#e8effc;
 --accent:var(--fs);--accent-ink:var(--fs-ink);--accent-soft:var(--fs-soft);
 --live:#12925f;--live-soft:#e4f5ec;
 --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
 --ease:cubic-bezier(.2,.7,.2,1);
 --gap:68px;
 color-scheme:light;
}
body[data-domain=ai]{--accent:var(--ai);--accent-ink:var(--ai-ink);--accent-soft:var(--ai-soft)}
body[data-domain=fintech]{--accent:var(--fin);--accent-ink:var(--fin-ink);--accent-soft:var(--fin-soft)}
body[data-domain=education]{--accent:var(--edu);--accent-ink:var(--edu-ink);--accent-soft:var(--edu-soft)}
body[data-domain=fullstack]{--accent:var(--fs);--accent-ink:var(--fs-ink);--accent-soft:var(--fs-soft)}
.n-ai{--c:var(--ai);--c-ink:var(--ai-ink);--c-soft:var(--ai-soft)}
.n-fintech{--c:var(--fin);--c-ink:var(--fin-ink);--c-soft:var(--fin-soft)}
.n-education{--c:var(--edu);--c-ink:var(--edu-ink);--c-soft:var(--edu-soft)}
.n-fullstack{--c:var(--fs);--c-ink:var(--fs-ink);--c-soft:var(--fs-soft)}
.n-all{--c:var(--ink);--c-ink:var(--ink);--c-soft:var(--mat)}
.fcard,.door,.other{--accent:var(--c);--accent-ink:var(--c-ink);--accent-soft:var(--c-soft)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{text-wrap:pretty}
a{color:var(--accent-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
.i{flex:none;display:block}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:20}
.skip:focus{left:12px}
.wrap{--pad:40px;max-width:1240px;margin:0 auto;padding:0 var(--pad)}

/* Bands: each section is a distinct block */
.band{padding:var(--gap) 0;border-top:1px solid var(--rule)}
.band.tint{background:var(--tint)}
.hero-band{border-top:0;padding:56px 0 var(--gap);background:linear-gradient(180deg,#fff 0%,#fff 60%,var(--tint) 100%)}
.hero-band+.band{border-top:1px solid var(--rule)}

/* Icon tiles and section headers */
.itile{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);flex:none}
.itile.sm{width:34px;height:34px;border-radius:9px}
.itile.sm .i{width:18px;height:18px}
.n-ai .itile,.n-fintech .itile,.n-education .itile,.n-fullstack .itile,.n-all .itile{background:var(--c-soft);color:var(--c-ink)}
.sh{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.sh-text{flex:1;min-width:0}
.sh h2{font-size:26px;line-height:1.15}
.sh p{margin:3px 0 0;color:var(--slate);font-size:15px}
.sh-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ink);white-space:nowrap}
.sh-link:hover{color:var(--accent-ink)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--font);padding:12px 17px;border-radius:10px;text-decoration:none;border:1px solid var(--rule-strong);color:var(--ink);background:var(--paper);white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.small{padding:9px 14px;font-size:14px;border-radius:9px}
.top .btn.primary[aria-current=page]{background:transparent;color:var(--ink);border-color:var(--rule-strong);cursor:default}
.cta{display:flex;gap:10px;flex-wrap:wrap}

/* Top bar */
.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:64px}
.name{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;white-space:nowrap}
.mark{display:block;flex:none;color:var(--ink);transition:color .15s}
.name:hover .mark{color:var(--accent)}
.wm{font-size:17.5px;font-weight:650;letter-spacing:-.035em;line-height:1}
.wm i{font-style:normal;color:var(--accent)}
.domains{display:flex;gap:2px;margin-right:auto}
.domains a{display:inline-flex;align-items:center;gap:8px;color:var(--slate);text-decoration:none;font-size:14.5px;font-weight:500;padding:7px 11px;border-radius:8px;white-space:nowrap}
.domains a::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--c)}
.domains a.n-all::before{display:none}
.domains a:hover{color:var(--ink);background:var(--mat)}
.domains a[aria-current=page]{color:var(--c-ink);background:var(--c-soft);font-weight:600}

/* Home hero: statement left, product logos right, numbers below */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px 56px;align-items:center}
.hero h1{font-size:clamp(36px,4.2vw,54px);line-height:1.05;letter-spacing:-.035em;max-width:14ch}
.hero .lede{font-size:18px;line-height:1.55;color:var(--slate);margin:18px 0 26px;max-width:46ch}
.htiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.htile{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--rule);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);height:100%;transition:border-color .15s,transform .2s var(--ease),box-shadow .2s}
.htile:hover{border-color:var(--c);transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(23,32,51,.4)}
.htile b{display:block;font-weight:600;font-size:15px;line-height:1.25}
.htile small{display:flex;align-items:center;gap:6px;color:var(--slate);font-size:12.5px;margin-top:3px}
.dot{display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--c);flex:none}
.statstrip{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule);border-radius:16px;background:#fff;overflow:hidden}
.statstrip li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:20px 22px;border-left:1px solid var(--rule)}
.statstrip li:first-child{border-left:0}
.statstrip .itile{grid-row:span 2}
.statstrip b{font-size:clamp(30px,3vw,40px);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.statstrip span{font-size:13.5px;color:var(--slate);line-height:1.3;margin-top:4px}

/* Product logos */
.logo{width:var(--s);height:var(--s);border-radius:calc(var(--s) * .24);flex:none;object-fit:cover;background:#fff;box-shadow:0 0 0 1px rgba(23,32,51,.1)}
.logo.mono{display:inline-grid;place-items:center;background:var(--c);color:#fff;font-weight:650;font-size:calc(var(--s) * .38);letter-spacing:-.02em;box-shadow:none;line-height:1}
.pid{display:flex;align-items:center;gap:14px;min-width:0}
.pid>div{min-width:0}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:550;line-height:1;padding:6px 10px;border-radius:999px;background:var(--mat);color:var(--slate)}
.chip.live{background:var(--live-soft);color:#0b6b45}
.chip.lock{background:#fdf1e1;color:#8a5300}
.chip.oss{background:#eceefe;color:#3b3ba8}
.chip.chain{background:#e6f1fb;color:#1f5e95}
.chip.solo{background:var(--accent-soft);color:var(--accent-ink)}
.achip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:550;color:var(--c-ink);margin-top:4px}
.schips{display:flex;flex-wrap:wrap;gap:6px}
.schips li{font-size:13px;color:var(--slate);background:var(--accent-soft);border-radius:8px;padding:5px 9px;line-height:1.2}
.schips b{color:var(--ink);font-weight:650;font-size:14px}

/* Browser-window frame */
.win{background:#fff;border-radius:10px;overflow:hidden;border:1px solid rgba(23,32,51,.14);box-shadow:0 1px 2px rgba(23,32,51,.06),0 22px 44px -28px rgba(23,32,51,.45)}
.win .bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:#f5f6f8;border-bottom:1px solid var(--rule)}
.win .bar i{width:8px;height:8px;border-radius:50%;background:#d6dae1;flex:none}
.win .bar span{margin:0 auto;transform:translateX(-12px);font-size:11.5px;line-height:17px;color:var(--slate);background:#fff;border:1px solid var(--rule);border-radius:5px;padding:0 12px;min-width:38%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}

/* Covers: soft tint holding the screenshot, a crop, or a flow diagram */
.cover{position:relative;overflow:hidden;background:var(--accent-soft);background-image:linear-gradient(color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px);background-size:24px 24px}
.cover.shot{padding:28px 0 0 28px}
.cover.shot .win{border-radius:10px 0 0 0;border-right:0;border-bottom:0}
.cover.odd{display:flex;align-items:center;justify-content:center;padding:0}
.cover.odd img{height:88%;width:auto;max-width:92%;object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(23,32,51,.1),0 24px 50px -24px rgba(23,32,51,.5)}
.cover.panel{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:28px 32px;color:var(--accent-ink)}
.panel-line{margin:0;font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-.01em;max-width:30ch}
.panel-id{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.panel-line.big{font-size:clamp(20px,2vw,26px);line-height:1.2;letter-spacing:-.02em;max-width:20ch}
.flow{counter-reset:s;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:24px}
.flow li{counter-increment:s;position:relative;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 30%,#fff);background:#fff;font-size:14px;font-weight:600;line-height:1.25;color:var(--ink)}
.flow li::before{content:counter(s);font-size:11.5px;font-weight:650;color:var(--accent-ink)}
.flow li+li::after{content:"";position:absolute;right:calc(100% + 4px);top:50%;width:16px;height:8px;margin-top:-4px;background:var(--accent);clip-path:polygon(0 3px,10px 3px,10px 0,16px 4px,10px 8px,10px 5px,0 5px)}

/* Area page hero */
.dhead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start}
.dhead.solo{grid-template-columns:1fr}
.kicker{display:flex;align-items:center;gap:12px;color:var(--accent-ink);font-weight:600;font-size:15px;line-height:1.35;margin:0 0 18px}
.dhead h1{font-size:clamp(34px,4vw,50px);line-height:1.05;letter-spacing:-.035em;margin:0 0 16px}
.dhead .lede{font-size:17.5px;line-height:1.6;color:var(--slate);margin:0 0 26px;max-width:54ch}
.proof{border:1px solid var(--rule);border-radius:16px;background:#fff;padding:22px 22px 8px}
.proof h2{font-size:14px;font-weight:600;color:var(--faint);letter-spacing:0;margin:0 0 6px}
.proof li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--rule)}
.proof li:first-child{border-top:0}
.proof b{display:block;font-weight:600;font-size:15.5px}
.proof li span{display:block;color:var(--slate);font-size:14.5px;line-height:1.5;margin-top:2px}

/* Rank marker */
.rank{font-weight:650;font-variant-numeric:tabular-nums;color:var(--accent-ink);letter-spacing:-.01em}
.place{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:13px;font-weight:600;color:var(--accent-ink)}
.place .rank{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:7px;background:var(--accent-soft);font-size:13px}

/* Stat tiles */
.stats{display:flex;flex-wrap:wrap;gap:10px}
.stat{margin:0;display:flex;flex-direction:column;gap:4px;padding:12px 16px;border-radius:12px;background:var(--accent-soft);min-width:110px}
.stat b{font-size:clamp(28px,2.6vw,36px);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat span{font-size:12.5px;color:var(--slate);line-height:1.3;max-width:14em}

/* Built list */
.built{display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.5;color:#2c3547}
.built li{display:flex;gap:10px;align-items:flex-start}
.built .i{color:var(--accent);margin-top:3px}

/* Highlight on a flagship's value line */
.hl{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--accent) 20%,transparent) 58%);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 2px}

/* Card footers */
.meta{margin-top:auto;padding-top:4px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding-top:16px;border-top:1px solid var(--rule)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-left:auto}
.btn.visit{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff;padding:10px 15px;font-size:14px}
.btn.visit:hover{background:var(--ink);border-color:var(--ink)}
.src{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;text-decoration:none;color:var(--ink)}

/* Stack */
.stack{display:flex;flex-wrap:wrap;gap:6px}
.stack li{font-size:12.5px;line-height:1;padding:6px 9px;border-radius:6px;color:var(--slate);border:1px solid var(--rule-strong);background:#fff}

/* Flagship: media left, story right */
.flag{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border:1px solid var(--rule);border-radius:18px;overflow:hidden;background:#fff}
.flag .cover{min-height:100%}
.flag .cover.shot{padding:32px;display:flex;align-items:center;justify-content:center}
.flag .cover.shot .win{width:100%;max-width:min(100%,calc(var(--nw) * .78))!important;border-radius:10px;border:1px solid rgba(23,32,51,.14)}
.flag .cover.odd{min-height:420px}
.flag .cover.odd img{height:auto;max-height:88%;max-width:80%}
.flag .cover.panel{padding:36px}
.flag .flow{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);row-gap:18px;max-width:340px}
.flag .flow li{flex-direction:row;align-items:baseline;gap:10px;padding:11px 14px;font-size:15px}
.flag .flow li+li::after,.work .flow li+li::after{right:auto;left:18px;top:auto;bottom:calc(100% + 3px);margin:0;width:8px;height:12px;clip-path:polygon(3px 0,5px 0,5px 7px,8px 7px,4px 12px,0 7px,3px 7px)}
.flag-text{padding:30px 32px 28px;display:flex;flex-direction:column;gap:16px}
.flag h2{font-size:30px;line-height:1.1;letter-spacing:-.03em}
.flag .angle{font-size:17.5px;line-height:1.55;margin:0}
.flag .summary{color:var(--slate);margin:0;font-size:15px}

/* Second and third */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.work{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:18px;overflow:hidden;background:#fff}
.work .cover{aspect-ratio:16/9}
.work .flow{grid-auto-flow:row;grid-auto-columns:auto;row-gap:12px;width:min(320px,100%);margin:0 auto}
.work .flow li{flex-direction:row;align-items:baseline;gap:8px;padding:6px 12px;font-size:13.5px}
.work .cover.panel .panel-line:not(.big){display:none}
.work-text{padding:24px 26px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.work h3{font-size:22px;line-height:1.15;letter-spacing:-.025em}
.work .angle{margin:0;font-size:15.5px;line-height:1.55}

/* Home: featured cards */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fcard{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:#fff}
.fcard .cover{aspect-ratio:16/10.4}
.fcard .cover.shot{padding:22px 0 0 22px}
.fbody{padding:20px 22px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.fcard h3{font-size:20px;line-height:1.2}
.fline{margin:0;color:#2c3547;font-size:15.5px;line-height:1.5}

/* Home: areas */
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.door{display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;border:1px solid var(--rule);border-top:3px solid var(--c);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .2s var(--ease),box-shadow .2s}
.door:hover{border-color:var(--c);transform:translateY(-2px);box-shadow:0 18px 36px -28px rgba(23,32,51,.45)}
.door-head{display:flex;align-items:center;justify-content:space-between}
.door .count{font-size:12.5px;font-weight:600;color:var(--c-ink);background:var(--c-soft);padding:5px 9px;border-radius:999px}
.door h3{font-size:20px;line-height:1.2}
.door-line{margin:0;color:var(--slate);font-size:14px;line-height:1.5}
.door ul{display:flex;flex-direction:column;margin-top:2px}
.door li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--rule)}
.door li b{display:block;font-weight:600;font-size:14px;line-height:1.3}
.door li small{display:block;color:var(--slate);font-size:12.5px;line-height:1.35}
.door .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--c-ink);padding-top:4px}

/* Home: all products grid */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ptile{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--rule);border-radius:14px;background:#fff;transition:border-color .15s,box-shadow .2s}
.ptile h3{font-size:15px;line-height:1.3;letter-spacing:-.01em}
.ptile .adot{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--slate);margin-top:2px}
.ptile>p{margin:0;font-size:13.5px;line-height:1.5;color:var(--slate);flex:1}
.ptile .row-visit{align-self:flex-start}
.ptile.go:hover{border-color:var(--rule-strong);box-shadow:0 14px 30px -24px rgba(23,32,51,.45)}

/* Home: talk band */
.talk{display:flex;align-items:center;gap:20px;padding:28px 30px;border:1px solid var(--rule);border-radius:18px;background:linear-gradient(120deg,var(--ai-soft),var(--fs-soft) 55%,var(--fin-soft))}
.talk .itile{background:#fff;color:var(--ink);width:48px;height:48px}
.talk-text{flex:1;min-width:0}
.talk h2{font-size:24px;line-height:1.2}
.talk p{margin:4px 0 0;color:var(--slate);font-size:15px;max-width:60ch}

/* Ranked list and other lists */
.rows{border:1px solid var(--rule);border-radius:16px;background:#fff;overflow:hidden}
.row{position:relative;display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr) auto;column-gap:28px;row-gap:8px;padding:18px 22px;border-top:1px solid var(--rule);align-items:center}
.row:first-child{border-top:0}
.ranked .row{grid-template-columns:2em minmax(0,14em) minmax(0,1fr) auto}
.row .rank{font-size:16px;color:var(--faint)}
.row-name{display:flex;align-items:center;gap:12px;min-width:0}
.row h3{font-size:16.5px;line-height:1.3;letter-spacing:-.01em}
.row-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.row .desc{margin:0;color:var(--slate);font-size:14.5px;line-height:1.55;max-width:68ch}
.host{margin:0;font-size:13px;color:var(--faint)}
.btn.row-visit{font-size:13px;padding:7px 11px;gap:5px;border-radius:8px;color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 40%,transparent);position:relative;z-index:1}
.row.go:hover,.ptile.go:hover{background:#fbfcfd}
.row.go:hover .row-visit,.ptile.go:hover .row-visit{background:var(--accent-soft)}
.row-meta{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;font-size:12.5px;color:var(--slate)}
.when{color:var(--faint);font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;gap:5px}
.tag::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--c)}
.row[hidden]{display:none}

/* Other areas */
.others{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.other{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--rule);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);transition:border-color .15s}
.other>span:not(.itile){flex:1;min-width:0}
.other b{display:block;font-weight:600;font-size:15px}
.other small{display:block;color:var(--slate);font-size:12.5px}
.other>.i{color:var(--faint)}
.other:hover{border-color:var(--c)}
.other:hover>.i{color:var(--c-ink)}

/* All-work filter */
.filter{position:sticky;top:64px;z-index:5;display:flex;gap:8px;padding:12px 0;margin:-12px 0 12px;background:var(--tint);overflow-x:auto;scrollbar-width:none}
.filter button{display:inline-flex;align-items:center;gap:7px;font:500 14px/1 var(--font);padding:9px 13px;border-radius:9px;border:1px solid var(--rule-strong);background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
.filter button .i{color:var(--c-ink,var(--ink))}
.filter button:hover{border-color:var(--ink)}
.filter button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.filter button[aria-pressed=true] .i{color:#fff}
.filter button span{opacity:.6;font-variant-numeric:tabular-nums}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;align-items:start}
.contact h1{font-size:clamp(36px,4.4vw,54px);letter-spacing:-.035em;line-height:1.05;margin:0 0 14px}
.contact .lede{font-size:17.5px;color:var(--slate);margin:0 0 28px;max-width:50ch}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.action{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border:1px solid var(--rule);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .2s}
.action:hover{border-color:var(--rule-strong);box-shadow:0 14px 30px -24px rgba(23,32,51,.45)}
.action b{display:block;font-weight:600;font-size:15px}
.action small{display:block;color:var(--slate);font-size:13px}
.contact-aside{border:1px solid var(--rule);border-radius:16px;background:#fff;padding:18px 20px 6px}
.contact-aside h2{font-size:14px;font-weight:600;color:var(--faint);letter-spacing:0;margin:0 0 6px}
.contact-aside li a{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--rule);color:var(--ink);text-decoration:none}
.contact-aside li:first-child a{border-top:0}
.contact-aside li a b{flex:1;font-weight:600;font-size:15px}
.contact-aside li a span{color:var(--faint);font-size:14px;font-variant-numeric:tabular-nums}
.contact-aside li a:hover b{color:var(--c-ink)}

/* Footer */
footer.foot{background:var(--ink);color:#c5cbd6;padding:48px 0 52px;font-size:14.5px}
footer.foot .wrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:32px 48px}
footer.foot .name{color:#fff}
footer.foot .mark{color:#2c3a57}
footer.foot .wm i{color:#8fa8ff}
footer.foot p{margin:10px 0 0;max-width:42ch}
.loc{display:flex;align-items:center;gap:6px;color:#98a1b2}
.foot-nav>p{margin:0 0 10px;color:#fff;font-weight:600}
.foot-nav li{margin:6px 0}
footer.foot a{color:#c5cbd6;text-decoration:none}
footer.foot a:hover{color:#fff}
footer.foot a.ico{display:inline-flex;align-items:center;gap:8px}

/* Whole-card links: the title link stretches over its card; secondary links sit above it */
.flag,.work,.fcard,.row.go,.ptile{position:relative}
.stretch{color:inherit;text-decoration:none;text-underline-offset:.14em;text-decoration-thickness:2px}
.stretch::after{content:"";position:absolute;inset:0;z-index:0}
.stretch:focus-visible{outline:none}
.flag:has(.stretch:focus-visible),.work:has(.stretch:focus-visible),.fcard:has(.stretch:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.row:has(.row-visit:focus-visible),.ptile:has(.row-visit:focus-visible){outline:3px solid var(--accent);outline-offset:-3px;border-radius:12px}
.ptile:has(.row-visit:focus-visible){outline-offset:2px}
.row .row-visit:focus-visible,.ptile .row-visit:focus-visible{outline:none}
.acts a,.src,.chips{position:relative;z-index:1}
.flag,.work,.fcard{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.cover img{transition:transform .35s var(--ease)}
@media (hover:hover){
 .flag:has(.stretch):hover,.work:has(.stretch):hover,.fcard:has(.stretch):hover{transform:translateY(-3px);border-color:var(--rule-strong);box-shadow:0 22px 44px -30px rgba(23,32,51,.4)}
 .flag:hover .cover img,.work:hover .cover img,.fcard:hover .cover img{transform:scale(1.02)}
 .flag:hover .stretch,.work:hover .stretch,.fcard:hover .stretch,.row.go:hover .stretch,.ptile.go:hover .stretch{text-decoration-line:underline}
}

/* Flow with more than four steps on a secondary card: a 3×2 snake on desktop */
@media (min-width:861px){
 .work .flow.long{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;column-gap:22px;row-gap:24px}
 .work .flow.long li{flex-direction:column;align-items:flex-start;gap:2px;padding:9px 11px;min-height:56px}
 .work .flow.long li+li::after{left:auto;right:calc(100% + 3px);top:50%;bottom:auto;margin-top:-4px;width:16px;height:8px;clip-path:polygon(0 3px,10px 3px,10px 0,16px 4px,10px 8px,10px 5px,0 5px)}
 .work .flow.long li:nth-child(4){grid-column:3;grid-row:2}
 .work .flow.long li:nth-child(5){grid-column:2;grid-row:2}
 .work .flow.long li:nth-child(6){grid-column:1;grid-row:2}
 .work .flow.long li:nth-child(4)::after{right:auto;left:50%;top:auto;bottom:calc(100% + 3px);margin:0 0 0 -4px;width:8px;height:16px;clip-path:polygon(3px 0,5px 0,5px 10px,8px 10px,4px 16px,0 10px,3px 10px)}
 .work .flow.long li:nth-child(5)::after,.work .flow.long li:nth-child(6)::after{right:auto;left:calc(100% + 3px);transform:scaleX(-1)}
}

@media (max-width:1100px){
 .top .wrap{gap:18px}
 .domains a{padding:7px 8px;font-size:14px}
 .hero{grid-template-columns:1fr}
 .hero h1{max-width:18ch}
 .doors{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .flag{grid-template-columns:1fr}
 .flag .cover.shot{padding:32px 32px 0}
 .flag .cover.odd{min-height:0;aspect-ratio:16/10}
 .dhead{grid-template-columns:1fr;gap:32px}
 .contact{grid-template-columns:1fr;gap:32px}
 .others{grid-template-columns:repeat(2,minmax(0,1fr))}
 footer.foot .wrap{grid-template-columns:1fr 1fr}
 .foot-brand{grid-column:1/-1}
}
@media (max-width:860px){
 :root{--gap:44px}
 .wrap{--pad:20px}
 .top .wrap{flex-wrap:wrap;gap:0 16px;min-height:0;padding-top:10px}
 .name{flex:1}
 .domains{order:3;width:calc(100% + 40px);margin:8px -20px 0;padding:0 14px 10px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
 .domains a:last-child{margin-right:20px}
 .domains::-webkit-scrollbar,.filter::-webkit-scrollbar{display:none}
 .filter{top:100px}
 html{scroll-padding-top:116px}
 .hero-band{padding-top:36px}
 .statstrip{grid-template-columns:1fr 1fr;margin-top:32px}
 .statstrip li:nth-child(odd){border-left:0}
 .statstrip li:nth-child(n+3){border-top:1px solid var(--rule)}
 .pair{grid-template-columns:1fr}
 .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .row,.ranked .row{grid-template-columns:minmax(0,1fr);padding:16px 18px}
 .ranked .row{grid-template-columns:auto minmax(0,1fr);column-gap:12px}
 .ranked .row .row-body,.ranked .row .row-visit{grid-column:1/-1}
 .btn.row-visit{justify-self:start}
 .work .cover.panel{aspect-ratio:auto}
 .talk{flex-wrap:wrap}
 .talk .cta{width:100%}
 .flow{grid-auto-flow:row;grid-auto-columns:auto;row-gap:16px}
 .flow li{flex-direction:row;align-items:baseline;gap:10px;padding:8px 12px}
 .flow li+li::after{right:auto;left:18px;top:auto;bottom:calc(100% + 3px);margin:0;width:8px;height:12px;clip-path:polygon(3px 0,5px 0,5px 7px,8px 7px,4px 12px,0 7px,3px 7px)}
}
@media (max-width:640px){
 body{font-size:15.5px}
 .wrap{--pad:16px}
 .domains{width:calc(100% + 32px);margin:8px -16px 0;padding:0 10px 10px}
 .sh{align-items:flex-start;flex-wrap:wrap;margin-bottom:22px}
 .sh h2{font-size:22px}
 .sh-link{width:100%;padding-left:54px}
 .htiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .htile{flex-direction:row;align-items:center;padding:12px}
 .htile .logo{--s:36px!important}
 .statstrip li{padding:16px;column-gap:10px}
 .statstrip .itile{display:none}
 .statstrip li{grid-template-columns:1fr}
 .fgrid,.doors,.pgrid,.others,.actions{grid-template-columns:1fr}
 .flag-text,.work-text{padding:22px 20px}
 .flag .cover.shot,.work .cover.shot,.fcard .cover.shot{padding:18px 0 0 18px}
 .flag .cover.panel,.cover.panel{padding:22px 20px}
 .flag .cover.odd{aspect-ratio:4/3}
 .talk{padding:22px 20px}
 footer.foot .wrap{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.flag:hover,.work:hover,.fcard:hover,.door:hover,.htile:hover{transform:none!important}.cover img{transform:none!important}}
@media print{.top,.filter{display:none}}
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
@media (max-width:640px){
 .pgrid{gap:8px}
 .ptile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:6px;padding:12px 14px}
 .ptile .pid{gap:12px}
 .ptile>p{grid-column:1/-1;grid-row:2;font-size:13px}
 .ptile .row-visit{grid-column:2;grid-row:1;align-self:center}
}

/* ---- Round 6 ---- */
/* Monogram tiles: icon on a light tint of the area color */
.logo.mono{background:var(--c-soft);color:var(--c-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)}
/* Rank prefix on titles */
h2 .rank,h3 .rank{color:var(--accent-ink);font-weight:600;margin-right:2px}
.work .pid{align-items:center}
.place{display:inline-flex;font-size:12px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);padding:3px 8px;border-radius:999px;margin:0 0 6px}
/* Flagship */
.flag .angle{font-size:18px;line-height:1.55;color:var(--ink)}
.ft-a,.ft-b{display:flex;flex-direction:column;gap:16px}
.ft-b{flex:1}
.flag.top{grid-template-columns:1fr}
.flag.top .flag-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px 48px;padding:30px 36px}
.flag.top .cover.panel{min-height:0;height:300px;padding:32px 40px;justify-content:center}
.flag.top .flow{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(0,1fr);max-width:none;column-gap:30px;row-gap:0}
.flag.top .flow li{flex-direction:column;align-items:flex-start;gap:4px;padding:16px 16px 18px;font-size:15.5px}
.flag.top .flow li+li::after{left:auto;right:calc(100% + 6px);top:50%;bottom:auto;margin-top:-4px;width:18px;height:8px;clip-path:polygon(0 3px,12px 3px,12px 0,18px 4px,12px 8px,12px 5px,0 5px)}
.flag.top .cover.odd{min-height:0;padding:36px 40px}
.flag.top .cover.odd img{height:auto;max-height:none;width:auto;max-width:min(100%,var(--nw,900px))}
/* Portrait panel crops: big, top-anchored, fading out at the bottom */
.work .cover.odd.tall,.fcard .cover.odd.tall{align-items:flex-start;padding-top:24px}
.work .cover.odd.tall img,.fcard .cover.odd.tall img{width:70%;max-width:70%;height:auto;-webkit-mask-image:linear-gradient(#000 70%,transparent 98%);mask-image:linear-gradient(#000 70%,transparent 98%);box-shadow:0 1px 2px rgba(23,32,51,.1),0 18px 40px -22px rgba(23,32,51,.45)}
/* Compact area head: title row with actions, then the three proof points as a row */
.dhead{grid-template-columns:minmax(0,1fr) auto;gap:0 40px;align-items:end}
.dhead .dhead-main{grid-column:1}
.dhead>.cta{grid-column:2;grid-row:1;padding-bottom:4px}
.dhead .lede{margin:0;max-width:78ch;font-size:16.5px}
.kicker{margin-bottom:12px}
.dhead h1{margin-bottom:10px}
.proof{grid-column:1/-1;margin-top:24px;padding:0;border:0;background:none}
.proof ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.proof li{border:1px solid var(--rule);border-radius:12px;background:#fff;padding:14px 16px;gap:12px}
.proof li:first-child{border-top:1px solid var(--rule)}
.proof b{font-size:14.5px}
.proof li span{font-size:13.5px;line-height:1.45}
body:not([data-domain=contact]) .hero-band:has(.dhead){padding:36px 0 40px}
/* Home: area cards with aligned rows */
@supports (grid-template-rows:subgrid){
 .doors{grid-template-rows:repeat(8,auto);row-gap:0}
 .door{display:grid;grid-row:span 8;grid-template-rows:subgrid;row-gap:0}
 .door>*{margin:0}
 .door-head{margin-bottom:12px}.door h3{margin-bottom:6px}.door-line{margin-bottom:10px}
 .door ul{display:contents}
}
.more-n{margin:0;padding:9px 0 0;border-top:1px solid var(--rule);font-size:13px;font-weight:600;color:var(--slate)}
.door .go{padding-top:10px}
/* Home: compact product tiles */
.ptile>p{flex:0 0 auto;min-height:3em}
.pchip{align-self:flex-start;list-style:none}
.seeall{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border:1px dashed var(--rule-strong);border-radius:14px;font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;background:#fff}
.seeall:hover{border-style:solid;border-color:var(--ink)}
.htile .short{display:none}
@media (max-width:1100px){
 .dhead{grid-template-columns:1fr}
 .dhead>.cta{grid-column:1;grid-row:auto;margin-top:18px}
 .flag.top .flag-text{grid-template-columns:1fr}
 .flag.top .cover.panel{height:auto}
}
@media (max-width:860px){
 .proof ul{grid-template-columns:1fr}
 .flag.top .flow{grid-auto-flow:row;grid-auto-columns:auto;row-gap:16px}
 .flag.top .flow li{flex-direction:row;align-items:baseline;padding:9px 12px;font-size:15px}
 .flag.top .flow li+li::after{right:auto;left:18px;top:auto;bottom:calc(100% + 3px);margin:0;width:8px;height:12px;clip-path:polygon(3px 0,5px 0,5px 7px,8px 7px,4px 12px,0 7px,3px 7px)}
 .domains{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
}
@media (max-width:640px){
 .hero .cta,.dhead>.cta{flex-direction:column}
 .hero .cta .btn,.dhead>.cta .btn{width:100%}
 .htile .full{display:none}.htile .short{display:inline}
 .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .stat{min-width:0;padding:10px 10px}
 .stat b{font-size:22px}
 .stat span{font-size:11.5px}
 .flag.top .flag-text{padding:22px 20px}
 .flag.top .cover.odd{padding:20px}
 .ptile .pchip{grid-column:2;grid-row:1}
 .ptile>p{min-height:0}
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cover.odd.wide img{width:88%;height:auto;max-width:min(88%,var(--nw))}
.hero-band:has(.dhead)+.band{padding-top:40px}
.hero-band:has(.dhead)+.band .sh{margin-bottom:20px}
.htile>span{min-width:0}
.htile b{overflow-wrap:anywhere}
@media (max-width:640px){.htile b{font-size:14px}}
@media (max-width:640px){.htile{gap:10px;padding:10px}.htile .logo{--s:32px!important}.htile b{font-size:13.5px;overflow-wrap:normal;word-break:normal}}
.trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.trio .work-text{padding:22px 22px}
.trio .work h3{font-size:20px}
@media (max-width:1100px){.trio{grid-template-columns:repeat(2,minmax(0,1fr))}.trio .work:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 10px)}}
@media (max-width:860px){.trio{grid-template-columns:1fr}}
@media (max-width:860px){.trio .work:last-child:nth-child(odd){width:auto;justify-self:stretch}}

/* ---- Phone layout (≤640px): one pass, written last so it wins ---- */
.domains .short{display:none}
@media (max-width:640px){
 :root{--gap:36px}
 body{font-size:15px}
 html{scroll-padding-top:104px}

 /* Header: brand + contact on one line, the five areas as an even segmented row underneath */
 .top .wrap{padding-top:8px;gap:0 12px}
 .top .btn.small{padding:8px 12px;font-size:13.5px}
 .domains{display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;gap:2px;width:100%;margin:6px 0 0;padding:0 0 8px;overflow:visible;-webkit-mask-image:none;mask-image:none}
 .domains a{justify-content:center;gap:5px;padding:6px 8px;font-size:13.5px;border-radius:7px}
 .domains a:last-child{margin-right:0}
 .domains a::before{width:6px;height:6px}
 .domains .full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .domains .short{display:inline}
 .filter{top:87px}

 /* Section headers */
 .sh{gap:12px;margin-bottom:18px;align-items:center}
 .sh .itile{width:34px;height:34px;border-radius:9px}
 .sh .itile .i{width:18px;height:18px}
 .sh h2{font-size:21px}
 .sh p{font-size:13.5px;line-height:1.45}
 #products .sh-link{display:none}
 .hero .cta .btn{min-width:0}

 /* Home hero */
 .hero-band{padding:28px 0 32px}
 .hero{gap:22px}
 .hero h1{font-size:33px;line-height:1.08}
 .hero .lede{font-size:15.5px;margin:12px 0 18px}
 .hero .cta{flex-direction:row;gap:8px}
 .hero .cta .btn{width:auto;flex:1;padding:11px 10px;font-size:14px}
 .htiles{gap:8px}
 .htile{padding:9px 10px;border-radius:12px}
 .statstrip{margin-top:20px;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:14px}
 .statstrip li{padding:12px 8px 11px;text-align:center;border-left:1px solid var(--rule)}
 .statstrip li:first-child{border-left:0}
 .statstrip li:nth-child(n+3){border-top:0}
 .statstrip li:nth-child(odd):not(:first-child){border-left:1px solid var(--rule)}
 .statstrip b{font-size:23px}
 .statstrip span{font-size:11.5px;line-height:1.25;margin-top:5px}

 /* Featured: a swipeable row; the next card peeks in from the right */
 .fgrid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));padding:2px var(--pad) 6px;scroll-padding:0 var(--pad);scrollbar-width:none}
 .fgrid::-webkit-scrollbar{display:none}
 .fcard{scroll-snap-align:start}
 .fcard .cover{aspect-ratio:16/10}
 .fcard .cover.shot{padding:14px 0 0 14px}
 .fbody{padding:14px 16px 16px;gap:10px}
 .fcard h3{font-size:18px}
 .fcard .logo{--s:38px!important;width:38px;height:38px}
 .fline{font-size:14.5px}
 .schips li{font-size:12px;padding:4px 8px}
 .schips b{font-size:13px}
 .fcard .foot-row{padding-top:12px;gap:10px}
 .fcard .chip.solo{display:none}
 .fcard .btn.visit{padding:9px 13px;font-size:13.5px}

 /* Areas: 2×2 tiles with the top products as logos */
 .doors{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:10px}
 .door{display:flex;flex-direction:column;grid-row:auto;gap:0;padding:14px 14px 12px;border-radius:13px}
 .door-head{margin-bottom:10px}
 .door-head .itile{width:34px;height:34px;border-radius:9px}
 .door-head .itile .i{width:18px;height:18px}
 .door .count{font-size:11.5px;padding:4px 8px}
 .door h3{font-size:16px;margin-bottom:10px}
 .door-line,.door .more-n{display:none}
 .door ul{display:flex;flex-direction:row;gap:6px;margin:0 0 10px}
 .door li{padding:0;border:0}
 .door li>span{display:none}
 .door li .logo{--s:30px!important;width:30px;height:30px}
 .door .go{margin-top:auto;padding-top:0;font-size:13px}

 /* More products: one list, each row tappable, icon-only visit button */
 .pgrid{gap:0;border:1px solid var(--rule);border-radius:14px;background:#fff;overflow:hidden}
 .ptile{border:0;border-top:1px solid var(--rule);border-radius:0;padding:11px 14px;row-gap:3px}
 .ptile:first-child{border-top:0}
 .ptile .pid{gap:11px}
 .ptile h3{font-size:14.5px}
 .ptile>p{font-size:12.5px;padding-left:47px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ptile .row-visit,.ptile .pchip{padding:7px;gap:0;font-size:0;border-radius:8px}
 .ptile .row-visit .i,.ptile .pchip .i{width:15px;height:15px}
 .seeall{margin-top:12px;padding:12px;font-size:14px}

 /* Talk */
 .talk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;align-items:center;padding:20px 18px;border-radius:16px}
 .talk .itile{width:40px;height:40px}
 .talk h2{font-size:19px}
 .talk p{grid-column:1/-1;font-size:14px}
 .talk-text{display:contents}
 .talk .cta{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .talk .cta .btn{padding:11px 10px;font-size:14px}

 /* Area pages */
 body:not([data-domain=contact]) .hero-band:has(.dhead){padding:26px 0 28px}
 .kicker{font-size:13.5px;gap:10px;margin-bottom:10px}
 .kicker .itile{width:34px;height:34px;border-radius:9px}
 .dhead h1{font-size:32px;margin-bottom:8px}
 .dhead .lede{font-size:15px;line-height:1.55}
 .dhead>.cta{margin-top:16px;gap:8px}
 .dhead>.cta .btn{padding:11px 12px;font-size:14px}
 .proof{margin-top:18px}
 .proof ul{gap:0;border:1px solid var(--rule);border-radius:14px;background:#fff;overflow:hidden}
 .proof li,.proof li:first-child{border:0;border-top:1px solid var(--rule);border-radius:0;padding:12px 14px}
 .proof li:first-child{border-top:0}
 .proof b{font-size:14px}
 .proof li span{font-size:13px}
 .hero-band:has(.dhead)+.band{padding-top:28px}

 /* Top work cards */
 .pair{gap:14px;margin-top:14px}
 .flag,.work{border-radius:16px}
 .flag .cover.shot,.work .cover.shot{padding:14px 0 0 14px}
 .flag .cover.odd{aspect-ratio:16/10}
 .work .cover.odd.tall{padding-top:16px}
 .flag-text,.work-text,.flag.top .flag-text{padding:16px 16px 16px;gap:12px}
 .ft-a,.ft-b{gap:12px}
 .flag .pid,.work .pid{gap:12px}
 .flag .pid .logo{--s:44px!important;width:44px;height:44px}
 .work .pid .logo{--s:38px!important;width:38px;height:38px}
 .flag h2{font-size:23px}
 .work h3,.trio .work h3{font-size:19px}
 .flag .angle{font-size:15.5px;line-height:1.5}
 .work .angle{font-size:14.5px;line-height:1.5}
 .stat{padding:9px 10px;border-radius:10px}
 .stat b{font-size:20px}
 .built{font-size:13.5px;gap:6px}
 .built .i{width:15px;height:15px;margin-top:2px}
 .work .built li:nth-child(n+3),.flag .built li:nth-child(n+4){display:none}
 .stack li{font-size:11.5px;padding:5px 7px}
 .foot-row{padding-top:12px;gap:10px}
 .btn.visit{padding:9px 13px;font-size:13.5px}
 .flag .cover.panel,.cover.panel{padding:18px 16px}

 /* Ranked and full lists: name and visit on one line, details under */
 .row,.ranked .row{grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:6px;padding:13px 14px}
 .ranked .row{grid-template-columns:1.6em minmax(0,1fr) auto}
 .row .rank{font-size:14px}
 .row-name{gap:10px}
 .row-name .logo{--s:34px!important;width:34px;height:34px}
 .row h3{font-size:15px}
 .row-body{grid-column:1/-1;gap:6px}
 .ranked .row .row-body{grid-column:1/-1}
 .row .desc{font-size:13.5px;line-height:1.5}
 .btn.row-visit,.ranked .row .row-visit{grid-column:-2;grid-row:1;align-self:center;justify-self:end;padding:7px 10px;font-size:12.5px}
 .row .chips .chip{font-size:11.5px;padding:5px 8px}
 .host{font-size:12px}

 /* Other areas: 2×2 */
 .others{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .other{flex-direction:column;align-items:flex-start;gap:8px;padding:13px 14px}
 .other .itile{width:34px;height:34px;border-radius:9px}
 .other b{font-size:14.5px}
 .other>.i{display:none}

 /* All work */
 .filter{gap:6px;padding:10px 0}
 .filter button{padding:8px 11px;font-size:13.5px}

 /* Contact */
 .contact{gap:24px}
 .contact h1{font-size:34px}
 .contact .lede{font-size:15.5px;margin-bottom:20px}
 .actions{gap:8px}
 .action{padding:12px 14px;gap:12px}
 .contact-aside{padding:14px 16px 4px}
 .contact-aside li a{padding:10px 0}

 /* Footer */
 footer.foot{padding:32px 0 36px;font-size:14px}
 footer.foot .wrap{gap:24px 32px}
}
@media (max-width:370px){
 .domains a{padding:6px 5px;font-size:12.5px}
 .domains a::before{display:none}
 .hero h1{font-size:29px}
 .statstrip b{font-size:20px}
}
@media (max-width:380px){
 .hero .cta .btn{font-size:13.5px;gap:6px;padding:11px 6px}
 .hero .cta .btn .i{display:none}
 .htile{gap:8px;padding:9px 8px}
 .htile .logo{--s:28px!important;width:28px;height:28px}
 .htile b{font-size:12.5px;overflow-wrap:anywhere}
}
@media (max-width:340px){.htile .logo{--s:24px!important;width:24px;height:24px}.htile b{font-size:12px;letter-spacing:-.02em}}