/* ═══════════════════════════════════════════════════════════════════
   qualbids · the canvas and its frame
   Brand navy from the qualbids wordmark, two offset frames as the one
   recurring motif, photography and the painting carry the color.
   Fonts are served from this site: no visitor IP goes to a third party.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{ font-family:'Geist'; font-style:normal; font-weight:300 600; font-display:swap; src:url(../fonts/geist-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Geist'; font-style:normal; font-weight:300 600; font-display:swap; src:url(../fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/barlow-condensed-600.woff2) format('woff2'); }

:root{
  --bg:#FDFCFC;
  --surface:#F5F3F1;
  --surface-2:#EEEBE7;
  --white:#FFFFFF;
  --ink:#0B0B0A;
  --ink-2:#55524E;
  --ink-3:#8D8984;
  --line:#E8E5E1;
  --line-2:#F0EEEB;
  --navy:#121970;
  --navy-d:#0C1153;
  --navy-h:#1B2390;
  --navy-t:#ECEDF6;

  --font:'Geist','Helvetica Neue',-apple-system,'Segoe UI',sans-serif;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
  --io:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.3,1.55,.5,1);

  --w:1200px;
  --gut:20px;
  --rail:0px;
  --nav:64px;
  --r:20px;
  --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M.6 9.4V.6h8.8' fill='none' stroke='%23121970' stroke-width='1.2'/%3E%3Crect x='3.6' y='3.6' width='8.8' height='8.8' fill='%23FDFCFC' stroke='%23121970' stroke-width='1.2'/%3E%3C/svg%3E");
}
@media (min-width:768px){ :root{ --gut:44px; --rail:22px; } }
@media (min-width:1100px){ :root{ --gut:72px; --rail:36px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav) + 16px); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.55; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; }
.intro-on body{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
::selection{ background:var(--navy); color:#fff; }
:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:6px; }
[hidden]{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip{ position:fixed; left:12px; top:-60px; z-index:400; background:var(--navy); color:#fff; padding:10px 16px; border-radius:999px; }
.skip:focus{ top:12px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.wrap,.shell{ width:min(100% - 2*var(--gut), var(--w)); margin-inline:auto; }

/* ── type ─────────────────────────────────────────────────────── */
h1,h2,h3{ margin:0; font-weight:300; letter-spacing:-.022em; text-wrap:balance; }
h2{ font-size:clamp(30px,3.2vw,44px); line-height:1.12; }
h3{ font-size:clamp(22px,2vw,28px); line-height:1.2; letter-spacing:-.015em; }
p{ margin:0; text-wrap:pretty; }
.num{ font-family:var(--cond); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:0; }
.label{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-3); margin-bottom:16px; }
.label::before{ content:""; flex:none; width:13px; height:13px; background:var(--mark) center/contain no-repeat; }
.label--dark{ color:rgba(255,255,255,.6); }
.label--dark::before{ filter:brightness(0) invert(1); opacity:.7; }

/* ── buttons ──────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:999px; background:var(--navy); color:#fff; font-size:15px; white-space:nowrap; transition:background-color .2s var(--ease), box-shadow .2s, transform .2s var(--out); }
.btn:hover{ background:var(--navy-h); }
.btn:active{ transform:scale(.98); }
.btn--ghost{ background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.btn--ghost:hover{ background:var(--white); box-shadow:inset 0 0 0 1px var(--navy); color:var(--navy); }
.btn--light{ background:#fff; color:var(--navy); }
.btn--light:hover{ background:var(--navy-t); }
.btn--sm{ height:36px; padding:0 14px; font-size:14px; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* ── the frame: content is the canvas, two rails sit just outside it ── */
.rails{ position:relative; }
.rails::before{ content:""; position:absolute; top:0; bottom:0; left:50%; z-index:0; pointer-events:none; width:calc(min(100% - 2*var(--gut), var(--w)) + 2*var(--rail)); transform:translateX(-50%); border-inline:1px solid var(--line); }
@media (max-width:767px){ .rails::before{ display:none; } }
.rails > section{ position:relative; z-index:1; }

.sec{ --pad:clamp(80px,9vw,136px); padding:var(--pad) 0; }
.sec::before{ content:""; position:absolute; top:0; left:0; right:0; border-top:1px solid var(--line); }
/* the qualbids mark where a section line crosses a rail */
.sec > .wrap:first-child{ position:relative; }
.sec > .wrap:first-child::before,.sec > .wrap:first-child::after{ content:""; position:absolute; top:calc(-1 * var(--pad) - 7px); width:13px; height:13px; background:var(--mark) center/contain no-repeat; pointer-events:none; }
.sec > .wrap:first-child::before{ left:calc(-1 * var(--rail) - 6px); }
.sec > .wrap:first-child::after{ right:calc(-1 * var(--rail) - 7px); }
@media (max-width:767px){ .sec > .wrap:first-child::before,.sec > .wrap:first-child::after{ display:none; } }

.head{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:24px 64px; align-items:end; margin-bottom:clamp(40px,4.5vw,64px); }
.head h2{ max-width:16em; }
.head__p{ font-size:17px; color:var(--ink-2); max-width:30em; }
@media (max-width:860px){ .head{ grid-template-columns:1fr; } }

/* the double frame, the wordmark's two canvases, used on key pictures */
.dframe{ position:relative; isolation:isolate; }
.dframe::before{ content:""; position:absolute; inset:-1.5px; z-index:-1; border:1.5px solid var(--navy); clip-path:polygon(0 0,100% 0,100% calc(var(--off) + 1px),calc(var(--off) + 1px) calc(var(--off) + 1px),calc(var(--off) + 1px) 100%,0 100%); transform:translate(0,0); transition:transform 1.1s var(--out) .15s, opacity .4s; opacity:0; }
.dframe.in::before,.no-js .dframe::before{ transform:translate(calc(-1 * var(--off,14px)), calc(-1 * var(--off,14px))); opacity:1; }

/* ── surfaces ─────────────────────────────────────────────────── */
.stage{ position:relative; background:var(--surface); border-radius:24px; overflow:hidden; }
.tabs{ display:inline-flex; gap:2px; padding:4px; border-radius:999px; background:rgba(11,11,10,.05); }
.tabs button{ position:relative; height:36px; padding:0 16px; border-radius:999px; font-size:14px; color:var(--ink-2); white-space:nowrap; transition:color .2s, background-color .25s var(--ease), box-shadow .25s; }
.tabs button:hover{ color:var(--ink); }
.tabs button[aria-selected="true"]{ background:var(--white); color:var(--navy); box-shadow:0 1px 2px rgba(11,11,10,.06), 0 4px 14px -6px rgba(11,11,10,.12); }

/* ═════════ INTRO ═════════ */
.intro{ display:none; position:fixed; inset:0; z-index:300; background:var(--bg); transition:background-color .55s var(--ease) .5s; }
.intro-on .intro{ display:block; }
.intro__dots{ position:absolute; inset:0; width:100%; height:100%; transition:opacity .5s var(--ease); }
.intro__mark{ position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
.intro__logo{ width:100%; height:auto; overflow:visible; }
.intro__f{ fill:none; stroke:var(--navy); stroke-width:9.6; stroke-dasharray:1 1; stroke-dashoffset:1; }
.intro__l{ fill:var(--navy); opacity:0; transition:opacity .45s var(--ease); }
.intro.s-word .intro__l{ opacity:1; }
.intro.s-frame .intro__f--front{ stroke-dashoffset:0; transition:stroke-dashoffset .75s var(--io); }
.intro.s-frame .intro__f--back{ stroke-dashoffset:0; transition:stroke-dashoffset .7s var(--io) .28s; }
.intro__line{ position:absolute; left:0; right:0; text-align:center; font-size:15px; color:var(--ink-2); opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease), transform .8s var(--out); }
.intro.s-frame .intro__line{ opacity:1; transform:none; transition-delay:.35s; }
.intro.s-out{ background:rgba(253,252,252,0); pointer-events:none; }
.intro.s-out .intro__dots,.intro.s-out .intro__line{ opacity:0; transition-delay:0s; }
.intro.s-out .intro__mark{ transition:transform 1s var(--io); }

/* hero settles in after the intro */
.hero__title .w{ display:inline-block; }
.js .hero__title .w{ opacity:0; transform:translateY(.45em); transition:opacity .7s var(--ease), transform 1s var(--out); transition-delay:calc(var(--i) * 45ms); }
.js .hero-in .hero__title .w{ opacity:1; transform:none; }
.js .hero__ctas,.js .hero__lede,.js .hero__stage{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform 1s var(--out); }
.js .hero-in .hero__ctas{ opacity:1; transform:none; transition-delay:.35s; }
.js .hero-in .hero__lede{ opacity:1; transform:none; transition-delay:.45s; }
.js .hero-in .hero__stage{ opacity:1; transform:none; transition-delay:.6s; }

/* ═════════ NAV ═════════ */
.nav{ position:sticky; top:0; z-index:90; background:rgba(253,252,252,.86); -webkit-backdrop-filter:saturate(1.6) blur(16px); backdrop-filter:saturate(1.6) blur(16px); transition:box-shadow .3s; }
.nav.is-solid{ box-shadow:0 1px 0 var(--line); }
.nav__in{ height:var(--nav); display:flex; align-items:center; gap:36px; }
.mark{ display:inline-flex; align-items:center; color:var(--navy); }
.logo{ width:64px; height:35px; }
.intro-on .nav .logo{ opacity:0; }
.nav .logo{ transition:opacity .2s; }
.nav__links{ display:flex; gap:28px; font-size:14.5px; color:var(--ink-2); }
.nav__links a{ transition:color .2s; }
.nav__links a:hover{ color:var(--navy); }
.nav__cta{ margin-left:auto; display:flex; gap:8px; }
.nav__burger{ display:none; margin-left:auto; width:40px; height:40px; position:relative; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); background:var(--white); }
.nav__burger span:not(.sr){ position:absolute; left:12px; right:12px; height:1.5px; background:var(--ink); transition:transform .35s var(--out); }
.nav__burger span:nth-child(1){ top:16px; } .nav__burger span:nth-child(2){ top:22px; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }
.menu{ border-top:1px solid var(--line); padding:12px var(--gut) 24px; display:grid; background:var(--bg); }
.menu > a{ font-size:22px; font-weight:300; padding:12px 0; border-bottom:1px solid var(--line-2); }
.menu__cta{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px; }
@media (max-width:1060px){ .nav__links{ display:none; } }
@media (max-width:640px){ .nav__cta{ display:none; } .nav__burger{ display:block; } }

/* ═════════ HERO ═════════ */
.hero{ padding:clamp(56px,7vw,104px) 0 clamp(72px,8vw,120px); }
.hero__head{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:28px 64px; align-items:end; }
.hero__title{ font-size:clamp(42px,5.4vw,72px); line-height:1.03; letter-spacing:-.034em; max-width:12em; }
.hero__ctas{ display:flex; gap:8px; margin-top:32px; flex-wrap:wrap; }
.hero__lede{ font-size:17px; color:var(--ink-2); max-width:28em; padding-bottom:8px; }
@media (max-width:860px){ .hero__head{ grid-template-columns:1fr; } .hero__lede{ order:2; padding:0; } }

.hero__stage{ margin-top:clamp(44px,5vw,64px); height:clamp(480px,44vw,600px); }
.stage__tabs{ position:absolute; left:50%; top:20px; transform:translateX(-50%); z-index:3; }
.crowd{ position:absolute; inset:0; }
.crowd__table{ position:absolute; left:50%; top:50%; border-radius:50%; background:var(--navy-t); box-shadow:inset 0 0 0 1px rgba(18,25,112,.08); transform:translate(-50%,-50%) scale(.9); opacity:0; transition:opacity .8s var(--ease), transform 1.1s var(--out); }
.crowd.is-group .crowd__table{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.cp{ position:absolute; left:0; top:0; width:128px; height:128px; border-radius:50%; will-change:transform,opacity; transition:transform 1.15s var(--io), opacity .6s var(--ease); }
.cp > span{ position:absolute; inset:0; border-radius:50%; overflow:hidden; animation:drift var(--d,7s) ease-in-out var(--dl,0s) infinite alternate; }
.cp img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cp .s{ opacity:0; transition:opacity .7s var(--ease) .25s; }
.cp.is-seat > span{ animation:none; box-shadow:0 0 0 4px var(--white), 0 0 0 5.5px var(--navy), 0 18px 36px -14px rgba(18,25,112,.4); }
.cp.is-seat .s{ opacity:1; }
.crowd.is-final .cp > span{ animation:none; }
@keyframes drift{ from{ transform:translate(-3px,-2px); } to{ transform:translate(3px,3px); } }
.cl{ position:absolute; left:0; top:0; font-size:13px; color:var(--ink-2); white-space:nowrap; transform:translate(-50%,0); opacity:0; transition:opacity .5s var(--ease); pointer-events:none; }
.cl.on{ opacity:1; }
.stage__caption{ position:absolute; left:0; right:0; bottom:22px; text-align:center; z-index:3; pointer-events:none; }
.stage__count{ display:flex; justify-content:center; align-items:baseline; gap:8px; font-size:16px; color:var(--ink-2); }
.stage__count .num{ font-size:40px; line-height:1; color:var(--navy); min-width:2ch; text-align:right; }
.stage__sub{ font-size:14px; color:var(--ink-3); margin-top:2px; transition:opacity .3s; }
.stage__replay{ position:absolute; right:16px; bottom:16px; z-index:3; width:36px; height:36px; border-radius:50%; background:var(--white); display:grid; place-items:center; box-shadow:0 1px 2px rgba(11,11,10,.08); opacity:0; transition:opacity .3s; }
.stage__replay svg{ width:16px; height:16px; fill:none; stroke:var(--navy); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.crowd-done .stage__replay{ opacity:1; }
@media (max-width:640px){
  .hero__stage{ height:520px; border-radius:20px; }
  .stage__tabs{ top:14px; }
  .stage__tabs button{ padding:0 12px; font-size:13.5px; }
  .cl{ font-size:12px; }
  .stage__count .num{ font-size:34px; }
}

/* ═════════ WHAT WE DO ═════════ */
.what__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,6vw,96px); align-items:center; }
.stats{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 32px; }
.stat{ padding:24px 0 28px; border-top:1px solid var(--line); display:grid; gap:10px; align-content:start; }
.stat:nth-child(n+3){ border-bottom:1px solid var(--line); }
.stat dt{ font-size:clamp(64px,6.4vw,92px); line-height:.86; color:var(--navy); }
.stat dd{ margin:0; font-size:15px; color:var(--ink-2); max-width:17em; }
.canvas{ margin:0; padding:16px 0 0 16px; }
.canvas__frame{ --off:16px; padding:12px; background:var(--bg); border:1.5px solid var(--navy); }
.canvas__art{ width:100%; height:auto; aspect-ratio:800/542; }
.canvas__art path{ stroke-dasharray:1 1; stroke-dashoffset:var(--d,1); }
.palette{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 20px; margin-top:28px; padding-left:4px; }
.palette span{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-3); transition:color .4s var(--ease); }
.palette span::before{ content:""; width:10px; height:10px; border-radius:2px; background:var(--c); transform:scale(.4); opacity:.3; transition:transform .5s var(--spring), opacity .4s; }
.palette span.on{ color:var(--ink); }
.palette span.on::before{ transform:none; opacity:1; }
@media (max-width:960px){ .what__grid{ grid-template-columns:1fr; } .canvas{ order:-1; } }
@media (max-width:520px){ .stat dt{ font-size:60px; } .stats{ gap:0 18px; } .palette{ grid-template-columns:1fr 1fr; } }

/* ═════════ HOW IT WORKS ═════════ */
.how{ padding:12px; }
.how__tabs{ display:flex; width:100%; justify-content:space-between; overflow-x:auto; scrollbar-width:none; background:rgba(11,11,10,.04); }
.how__tabs::-webkit-scrollbar{ display:none; }
.how__tabs button{ flex:1 0 auto; overflow:hidden; }
.how__tabs button i{ position:absolute; left:16px; right:16px; bottom:5px; height:2px; border-radius:2px; background:var(--line); opacity:0; }
.how__tabs button i::after{ content:""; position:absolute; inset:0; border-radius:2px; background:var(--navy); transform-origin:left; transform:scaleX(var(--p,0)); }
.how__tabs button[aria-selected="true"] i{ opacity:1; }
.how__panel{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:12px; margin-top:12px; }
.how__media{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:var(--surface-2); }
.how__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.how__img.is-new{ clip-path:inset(0 100% 0 0); transform:scale(1.04); transition:clip-path 1s var(--io), transform 1.6s var(--out); }
.how__img.is-new.go{ clip-path:inset(0 0 0 0); transform:none; }
.how__text{ display:flex; flex-direction:column; justify-content:flex-end; gap:16px; padding:clamp(20px,3vw,40px); transition:opacity .35s var(--ease), transform .5s var(--out); }
.how__text p{ color:var(--ink-2); max-width:28em; }
.how__get{ margin:12px 0 0; padding-top:18px; border-top:1px solid var(--line); display:grid; gap:4px; }
.how__get dt{ font-size:14px; color:var(--ink-3); }
.how__get dd{ margin:0; font-size:16px; color:var(--navy); }
.how.is-swap .how__text{ opacity:0; transform:translateY(6px); }
@media (max-width:860px){
  .how__panel{ grid-template-columns:1fr; }
  .how__text{ padding:20px 12px 12px; }
  .how__tabs{ justify-content:flex-start; }
}

/* ═════════ PORTRAIT · data by data, pixel by pixel ═════════ */
.portrait__track{ position:relative; height:330vh; }
.portrait__sticky{ position:sticky; top:var(--nav); height:calc(100vh - var(--nav)); display:grid; align-items:center; }
.pstage{ height:calc(100vh - var(--nav) - 40px); min-height:560px; max-height:880px; }
.pstage__top{ position:absolute; left:20px; right:20px; top:20px; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.phases{ list-style:none; margin:0; display:inline-flex; gap:2px; padding:4px; border-radius:999px; background:rgba(11,11,10,.05); }
.phases li{ height:32px; padding:0 14px; display:grid; place-items:center; border-radius:999px; font-size:14px; color:var(--ink-3); transition:color .3s, background-color .3s, box-shadow .3s; }
.phases li.on{ background:var(--white); color:var(--navy); box-shadow:0 1px 2px rgba(11,11,10,.06), 0 4px 14px -6px rgba(11,11,10,.12); }
.pstage__state{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-3); }
.pstage__ok{ height:28px; padding:0 12px; display:inline-flex; align-items:center; border-radius:999px; background:var(--navy); color:#fff; font-size:13px; opacity:0; transform:translateY(4px); transition:opacity .4s, transform .4s var(--out); }
.pstage__ok.on{ opacity:1; transform:none; }
.pstage__px{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.pframe{ --off:14px; position:absolute; left:50%; top:calc(50% + 24px); z-index:2; margin:0; height:min(calc(100% - 156px), 50vw); aspect-ratio:4/5; transform:translate(-50%,-50%); border:1.5px solid var(--navy); padding:10px; background:var(--bg); }
.pframe::after{ content:""; position:absolute; inset:10px; background:radial-gradient(circle, rgba(18,25,112,.16) 1px, transparent 1.4px) 0 0/14px 14px; opacity:calc(1 - var(--ph,0)); pointer-events:none; }
.pframe img{ width:100%; height:100%; object-fit:cover; opacity:var(--ph,0); filter:grayscale(var(--gs,1)) contrast(1.04); }
.frags,.notes{ list-style:none; margin:0; padding:0; }
.frags li{ position:absolute; z-index:4; left:var(--l,auto); right:var(--r,auto); top:var(--y); width:clamp(180px,17vw,236px); padding:12px 14px; border-radius:12px; background:var(--white); box-shadow:0 1px 2px rgba(11,11,10,.05), 0 12px 30px -16px rgba(11,11,10,.25); font-size:15px; line-height:1.35; opacity:var(--o,0); transform:translate(var(--tx,0px), var(--ty,0px)) scale(var(--s,1)); }
.frags li span{ display:block; font-size:12.5px; color:var(--ink-3); margin-bottom:3px; }
.notes li{ position:absolute; z-index:4; left:var(--l,auto); right:var(--r,auto); top:var(--y); width:clamp(170px,16vw,220px); padding-left:14px; border-left:1.5px solid var(--navy); font-size:16px; line-height:1.35; color:var(--navy); opacity:var(--o,0); transform:translateX(calc((1 - var(--o,0)) * 10px)); }
.notes li[data-side="l"]{ border-left:0; border-right:1.5px solid var(--navy); padding:0 14px 0 0; text-align:right; transform:translateX(calc((1 - var(--o,0)) * -10px)); }
.notes li span{ display:block; font-size:12.5px; color:rgba(18,25,112,.6); margin-bottom:3px; }
.moments{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:clamp(56px,7vw,96px); }
.moment{ margin:0; display:grid; gap:14px; }
.moment img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px; }
.moment figcaption{ display:grid; gap:2px; padding:0 4px; }
.moment b{ font-weight:400; font-size:16px; }
.moment span{ font-size:15px; color:var(--ink-3); }
.traits{ margin:clamp(40px,5vw,64px) 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:0 32px; }
.traits div{ padding-top:18px; border-top:1px solid var(--line); display:grid; gap:6px; align-content:start; }
.traits dt{ font-size:14px; color:var(--ink-3); }
.traits dd{ margin:0; font-size:16px; }
.fineprint{ margin-top:28px; font-size:13px; color:var(--ink-3); }
@media (max-width:860px){
  .portrait__track{ height:auto; }
  .portrait__sticky{ position:relative; top:auto; height:auto; }
  .pstage{ height:auto; min-height:0; max-height:none; padding:72px 14px 16px; display:grid; gap:16px; }
  .pstage__top{ left:14px; right:14px; top:14px; }
  .pstage__state #pState{ display:none; }
  .pframe{ position:relative; left:auto; top:auto; transform:none; height:auto; width:min(78%, 340px); justify-self:center; }
  .frags{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .frags li{ position:relative; left:auto; right:auto; top:auto; width:auto; font-size:14px; padding:10px 12px; }
  .frags .frags__long{ grid-column:1 / -1; }
  .notes{ display:none; }
  .moments{ grid-template-columns:1fr 1fr; }
  .moment:first-child{ grid-column:1 / -1; }
  .moment:first-child img{ aspect-ratio:4/3; }
  .traits{ grid-template-columns:1fr 1fr; gap:24px 20px; }
}
@media (max-width:520px){ .traits{ grid-template-columns:1fr; gap:0; } .traits div{ padding:16px 0; } }

/* ═════════ WHO WE RECRUIT ═════════ */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tile{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:48px; min-height:300px; padding:28px; border-radius:var(--r); background:var(--surface); overflow:hidden; isolation:isolate; transition:color .35s var(--ease); }
.tile::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--navy); clip-path:circle(0% at var(--mx,90%) var(--my,10%)); transition:clip-path .7s var(--io); }
.tile:hover::before,.tile:focus-visible::before{ clip-path:circle(150% at var(--mx,90%) var(--my,10%)); }
.tile:hover,.tile:focus-visible{ color:#fff; }
.tile::after{ content:""; position:absolute; right:22px; top:22px; width:36px; height:36px; border-radius:50%; background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 13l6-6M8 7h5v5' fill='none' stroke='%23121970' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; box-shadow:0 1px 2px rgba(11,11,10,.08); transition:transform .4s var(--out); }
.tile:hover::after{ transform:rotate(45deg); }
.tile__q{ font-size:clamp(21px,1.8vw,24px); font-weight:300; line-height:1.25; letter-spacing:-.015em; padding-right:40px; }
.tile__foot{ display:grid; gap:6px; }
.tile__m{ font-size:14px; color:var(--ink-3); transition:color .35s; }
.tile__foot p{ font-size:15px; color:var(--ink-2); transition:color .35s; }
.tile:hover .tile__m,.tile:focus-visible .tile__m{ color:rgba(255,255,255,.6); }
.tile:hover .tile__foot p,.tile:focus-visible .tile__foot p{ color:rgba(255,255,255,.85); }
.js .bento .tile{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .9s var(--out), color .35s var(--ease); transition-delay:calc(var(--i,0) * 70ms), calc(var(--i,0) * 70ms), 0s; }
.js .bento.in .tile{ opacity:1; transform:none; }
@media (max-width:960px){ .bento{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .bento{ grid-template-columns:1fr; } .tile{ min-height:0; gap:32px; padding:24px; } }

/* ═════════ GUARANTEE ═════════ */
.guar{ position:relative; background:var(--navy); color:#fff; border-radius:28px; padding:clamp(28px,5vw,64px); overflow:hidden; isolation:isolate; }
.guar__main{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px 64px; align-items:center; }
.guar__copy{ display:grid; justify-items:start; }
.guar h2{ max-width:13em; }
.guar__p{ color:rgba(255,255,255,.76); margin:20px 0 32px; max-width:30em; }
.guar__seats{ position:relative; aspect-ratio:1.35; width:100%; }
.guar__table{ position:absolute; left:50%; top:50%; width:58%; height:46%; transform:translate(-50%,-50%); border-radius:50%; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); display:grid; place-content:center; justify-items:center; gap:2px; font-size:14px; color:rgba(255,255,255,.6); }
.guar__table .num{ font-size:clamp(48px,5vw,68px); line-height:.9; color:#fff; }
.gs{ position:absolute; width:17%; aspect-ratio:1; border-radius:50%; overflow:hidden; transform:translate(-50%,-50%) scale(.6); opacity:0; box-shadow:0 0 0 3px var(--navy), 0 0 0 4.5px rgba(255,255,255,.5); transition:opacity .5s var(--ease), transform .8s var(--spring); }
.gs img{ width:100%; height:100%; object-fit:cover; }
.gs.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.guar__terms{ margin:clamp(40px,5vw,64px) 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:0 32px; }
.guar__terms div{ padding-top:20px; border-top:1px solid rgba(255,255,255,.18); display:grid; gap:8px; align-content:start; }
.guar__terms dt{ font-size:14px; color:rgba(255,255,255,.55); }
.guar__terms dd{ margin:0; font-size:15.5px; color:rgba(255,255,255,.9); }
@media (max-width:960px){ .guar__main{ grid-template-columns:1fr; } .guar__terms{ grid-template-columns:1fr 1fr; gap:24px 24px; } }
@media (max-width:560px){ .guar{ border-radius:22px; } .guar__terms{ grid-template-columns:1fr; gap:0; } .guar__terms div{ padding:16px 0; } }

/* ═════════ TEAM · a gallery wall ═════════ */
.wall{ list-style:none; margin:0; padding:clamp(40px,5vw,72px); border-radius:24px; background:var(--surface); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:48px 28px; align-items:start; }
.art{ --rot:-2.5deg; }
.art:nth-child(even){ --rot:2deg; }
.art--tim{ grid-column:1 / 5; grid-row:1 / 3; align-self:center; }
.art--greg{ grid-column:5 / 8; grid-row:1; margin-top:36px; }
.art--desirae{ grid-column:8 / 11; grid-row:1; }
.art--nala{ grid-column:11 / 13; grid-row:1; margin-top:72px; }
.art--jonathan{ grid-column:5 / 8; grid-row:2; }
.art--denise{ grid-column:8 / 11; grid-row:2; margin-top:-28px; }
.art--tallulah{ grid-column:11 / 13; grid-row:2; margin-top:12px; }
.art button{ display:block; width:100%; text-align:left; }
.art__pic{ --off:9px; position:relative; display:block; padding:8px; background:var(--white); border:1.5px solid var(--navy); isolation:isolate; transition:transform .5s var(--out); }
.art__pic::before{ content:""; position:absolute; inset:-1.5px; z-index:-1; border:1.5px solid var(--navy); clip-path:polygon(0 0,100% 0,100% calc(var(--off) + 1px),calc(var(--off) + 1px) calc(var(--off) + 1px),calc(var(--off) + 1px) 100%,0 100%); opacity:0; transform:translate(0,0); transition:transform .55s var(--out), opacity .3s; }
@media (hover:none){ .art__pic::before{ opacity:.4; transform:translate(calc(-1 * var(--off)), calc(-1 * var(--off))); } }
.art__pic img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.art__more{ position:absolute; inset:8px; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; color:#fff; font-size:16px; font-weight:300; line-height:1.35; background:rgba(12,17,83,.86); opacity:0; transition:opacity .35s var(--ease); }
.art__more span{ display:block; font-size:12.5px; font-weight:400; color:rgba(255,255,255,.62); margin:14px 0 4px; }
.art__more span:first-child{ margin-top:0; }
.art--pet .art__more{ font-size:14.5px; padding:14px; }
.art__plate{ display:inline-grid; gap:1px; margin-top:16px; padding:8px 12px; background:var(--white); box-shadow:0 1px 2px rgba(11,11,10,.06); }
.art__plate b{ font-weight:500; font-size:15px; letter-spacing:-.01em; }
.art__plate span{ font-size:13px; color:var(--ink-3); white-space:nowrap; }
.art button[aria-expanded="true"] .art__more{ opacity:1; }
.art button:hover .art__pic::before,.art button[aria-expanded="true"] .art__pic::before,.art button:focus-visible .art__pic::before{ --off:14px; opacity:1; transform:translate(calc(-1 * var(--off)), calc(-1 * var(--off))); }
@media (hover:hover){ .art button:hover .art__more{ opacity:1; } }
.js .wall .art{ opacity:0; transform:translateY(-22px) rotate(var(--rot)); transform-origin:50% -24px; transition:opacity .6s var(--ease), transform 1.3s var(--spring); transition-delay:calc(var(--i,0) * 90ms); }
.js .wall.in .art{ opacity:1; transform:none; }
@media (max-width:900px){
  .wall{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 18px; padding:28px 20px; }
  .art__plate span{ white-space:normal; }
  .art{ grid-column:auto !important; grid-row:auto !important; margin-top:0 !important; align-self:start; }
  .art--tim{ grid-column:1 / -1 !important; width:min(100%, 360px); justify-self:center; }
  .art__plate{ padding:6px 10px; } .art__plate b{ font-size:14px; } .art__plate span{ font-size:12px; }
}

/* ═════════ QUOTE ═════════ */
.quote{ margin:0; background:var(--surface); border-radius:24px; padding:clamp(28px,5vw,72px); display:grid; gap:32px; }
.quote__mark{ width:72px; height:auto; color:var(--navy); }
.quote blockquote{ margin:0; }
.quote p{ font-size:clamp(24px,2.6vw,34px); font-weight:300; line-height:1.3; letter-spacing:-.018em; max-width:27em; }
.quote figcaption{ display:grid; gap:2px; font-size:15px; }
.quote figcaption span{ color:var(--ink-3); }

/* ═════════ BID ═════════ */
.bid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,6vw,96px); align-items:start; }
.bid__intro{ position:sticky; top:calc(var(--nav) + 32px); display:grid; gap:0; }
.bid__intro h2{ margin-bottom:16px; }
.checks{ list-style:none; margin:32px 0; padding:0; display:grid; gap:14px; }
.checks li{ position:relative; padding-left:30px; font-size:16px; }
.checks li::before{ content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%; background:var(--navy-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5' fill='none' stroke='%23121970' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.bid__alt{ font-size:15px; color:var(--ink-3); }
.bid__alt a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.form{ background:var(--white); border-radius:var(--r); padding:clamp(20px,3vw,32px); box-shadow:0 0 0 1px var(--line), 0 30px 60px -40px rgba(11,11,10,.22); }
.form__steps{ list-style:none; margin:0 0 28px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.form__steps li{ font-size:13px; color:var(--ink-3); padding-top:10px; position:relative; transition:color .3s; }
.form__steps li::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:3px; background:var(--line-2); }
.form__steps li::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:3px; background:var(--navy); transform-origin:left; transform:scaleX(0); transition:transform .5s var(--out); }
.form__steps li.is-on,.form__steps li.is-done{ color:var(--ink); }
.form__steps li.is-on::after,.form__steps li.is-done::after{ transform:none; }
.step{ border:0; margin:0; padding:0; min-width:0; display:none; }
.step.is-on{ display:grid; gap:20px; animation:fadeIn .4s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.step legend{ font-size:24px; font-weight:300; letter-spacing:-.015em; padding:0; margin-bottom:4px; }
.opts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.opt{ position:relative; cursor:pointer; }
.opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.opt span{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:12px 16px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--line); font-size:15px; line-height:1.3; transition:box-shadow .2s, background-color .2s; }
.opt span::after{ content:""; flex:none; width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--line); transition:box-shadow .25s var(--out); }
.opt:hover span{ box-shadow:inset 0 0 0 1px var(--ink-3); }
.opt input:checked + span{ background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--navy); }
.opt input:checked + span::after{ box-shadow:inset 0 0 0 5.5px var(--navy); }
.opt input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:2px; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field{ display:grid; gap:8px; align-content:start; }
.field > span{ font-size:14px; color:var(--ink-2); }
.field input,.field textarea{ width:100%; border:0; border-radius:10px; background:var(--white); padding:12px 14px; font-size:16px; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .2s; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#B3AFA9; }
.field input:focus,.field textarea:focus{ outline:none; box-shadow:inset 0 0 0 1px var(--navy), 0 0 0 4px rgba(18,25,112,.08); }
.field input[aria-invalid="true"]{ box-shadow:inset 0 0 0 1px #C2412D; }
.stepper{ display:grid; grid-template-columns:44px 1fr 44px; height:46px; border-radius:10px; box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.stepper button{ font-size:20px; color:var(--ink-2); transition:background-color .2s; }
.stepper button:hover{ background:var(--surface); }
.stepper input{ border:0; text-align:center; font-size:16px; font-variant-numeric:tabular-nums; background:transparent; -moz-appearance:textfield; min-width:0; }
.stepper input:focus{ outline:none; }
.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.seg{ display:grid; grid-template-columns:repeat(3,1fr); height:46px; padding:3px; border-radius:12px; background:var(--surface); }
.seg label{ position:relative; cursor:pointer; }
.seg input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.seg span{ height:100%; display:grid; place-items:center; border-radius:9px; font-size:14px; color:var(--ink-2); transition:background-color .2s, color .2s, box-shadow .2s; }
.seg input:checked + span{ background:var(--white); color:var(--ink); box-shadow:0 1px 2px rgba(11,11,10,.08); }
.seg input:focus-visible + span{ outline:2px solid var(--ink); }
.fine{ font-size:13.5px; color:var(--ink-3); }
.fine a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }
.err{ color:#C2412D; font-size:14px; }
.err:empty{ display:none; }
.form__summary{ display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
.form__summary:empty{ display:none; }
.form__summary span{ height:28px; padding:0 10px; display:inline-flex; align-items:center; border-radius:999px; background:var(--surface); font-size:13px; color:var(--ink-2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; animation:fadeIn .3s var(--ease); }
.form__nav{ display:flex; justify-content:space-between; gap:8px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line-2); }
.form__nav #bidNext,.form__nav #bidSend{ margin-left:auto; }
.form__done{ display:grid; justify-items:center; text-align:center; gap:10px; padding:48px 12px; }
.form__done svg{ width:56px; height:56px; margin-bottom:8px; }
.form__done circle{ fill:var(--surface); }
.form__done path{ fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:30; stroke-dashoffset:30; animation:tick .6s var(--out) .15s forwards; }
@keyframes tick{ to{ stroke-dashoffset:0; } }
.form__done p{ color:var(--ink-2); }
.form.sent > :not(.form__done){ display:none !important; }
@media (max-width:960px){ .bid{ grid-template-columns:1fr; } .bid__intro{ position:relative; top:auto; } .checks{ margin:24px 0; } }
@media (max-width:560px){ .opts,.row{ grid-template-columns:1fr; } }

/* ═════════ TAKE PART ═════════ */
.part{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; padding:12px; border-radius:24px; background:var(--surface); }
.part__img{ border-radius:16px; overflow:hidden; min-height:320px; }
.part__img img{ width:100%; height:100%; object-fit:cover; }
.part__body{ padding:clamp(16px,3vw,40px); display:grid; align-content:center; }
.part__body h2{ margin-bottom:14px; }
.part__form{ display:grid; gap:14px; margin-top:28px; }
.part__form .btn{ justify-self:start; margin-top:4px; }
.check{ display:grid; grid-template-columns:20px 1fr; gap:12px; font-size:13.5px; line-height:1.5; color:var(--ink-2); cursor:pointer; }
.check input{ appearance:none; width:20px; height:20px; margin:1px 0 0; border-radius:6px; background:var(--white); box-shadow:inset 0 0 0 1.5px #CFCBC5; display:grid; place-items:center; cursor:pointer; transition:background-color .2s, box-shadow .2s; }
.check input::after{ content:""; width:10px; height:6px; border-left:1.8px solid #fff; border-bottom:1.8px solid #fff; transform:rotate(-45deg) scale(0); margin-top:-2px; transition:transform .25s var(--out); }
.check input:checked{ background:var(--navy); box-shadow:none; }
.check input:checked::after{ transform:rotate(-45deg) scale(1); }
.check a{ color:var(--ink); text-decoration:underline; text-decoration-color:#CFCBC5; text-underline-offset:2px; }
.part__ok{ font-size:18px; }
@media (max-width:860px){ .part{ grid-template-columns:1fr; } .part__img{ min-height:0; aspect-ratio:3/2; } }

/* ═════════ FOOTER ═════════ */
.foot{ border-top:1px solid var(--line); padding:64px 0 28px; }
.foot__grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:32px; padding-bottom:56px; }
.foot__brand p{ margin-top:12px; font-size:15px; color:var(--ink-3); max-width:18em; }
.foot__grid > div:not(.foot__brand){ display:grid; gap:9px; align-content:start; font-size:15px; }
.foot__grid a:hover{ color:var(--ink-2); }
.foot__grid address{ font-style:normal; color:var(--ink-2); margin-top:4px; }
.foot__k{ font-size:14px; color:var(--ink-3); margin-bottom:4px; }
.foot__base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3); }
.foot__base a:hover{ color:var(--ink); }
@media (max-width:860px){ .foot__grid{ grid-template-columns:1fr 1fr; } .foot__brand{ grid-column:1 / -1; } }

/* footer wordmark */
.foot__logo{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:8px 0 40px; color:var(--navy); }
.foot__logo svg{ width:clamp(150px,22vw,280px); height:auto; }
.foot__logo span{ font-size:15px; color:var(--ink-3); padding-bottom:6px; }
@media (max-width:560px){ .foot__logo{ flex-direction:column; align-items:flex-start; } }

/* ═════════ REVEAL ═════════ */
.js .rv{ opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease), transform .9s var(--out); }
.js .rv.in{ opacity:1; transform:none; }

/* ═════════ REVIEW MODE · ?review outlines every claim that needs sign-off ═════════ */
.review [data-draft]{ position:relative; outline:1.5px dashed #C2412D; outline-offset:4px; }
.review [data-draft]::after{ content:"To confirm · " attr(data-draft); position:absolute; left:0; top:calc(100% + 8px); z-index:20; font-size:12px; line-height:1.4; background:#C2412D; color:#fff; padding:6px 9px; border-radius:6px; max-width:340px; width:max-content; font-weight:400; letter-spacing:0; }

/* ═════════ LEGAL PAGES ═════════ */
.legal-page{ padding:56px 0 120px; }
.draft-banner{ background:#C2412D; color:#fff; font-size:13px; padding:10px var(--gut); text-align:center; }
.legal__head{ display:grid; gap:16px; max-width:46rem; padding-bottom:40px; margin-bottom:48px; border-bottom:1px solid var(--line); }
.legal__head h1{ font-size:clamp(38px,4.4vw,56px); line-height:1.08; letter-spacing:-.028em; }
.legal__head .lede{ font-size:17px; color:var(--ink-2); }
.legal__head .lede a{ text-decoration:underline; text-underline-offset:3px; }
.legal__meta{ display:flex; gap:20px; flex-wrap:wrap; font-size:14px; color:var(--ink-3); }
.legal__grid{ display:grid; grid-template-columns:220px minmax(0,44rem); gap:clamp(32px,6vw,96px); }
.legal__toc{ position:sticky; top:calc(var(--nav) + 24px); align-self:start; display:grid; gap:2px; max-height:calc(100vh - 120px); overflow:auto; }
.legal__toc a{ color:var(--ink-3); font-size:14px; padding:5px 0 5px 12px; border-left:1px solid var(--line); transition:color .2s, border-color .2s; }
.legal__toc a:hover,.legal__toc a.on{ color:var(--ink); border-left-color:var(--ink); }
.legal__body{ font-size:16px; line-height:1.7; color:var(--ink-2); }
.legal__body h2{ font-size:clamp(24px,2.2vw,28px); color:var(--ink); margin:56px 0 14px; scroll-margin-top:calc(var(--nav) + 20px); }
.legal__body h2:first-child{ margin-top:0; }
.legal__body h3{ font-size:16px; font-weight:500; letter-spacing:0; color:var(--ink); margin:28px 0 8px; }
.legal__body p,.legal__body ul,.legal__body ol{ margin:0 0 14px; }
.legal__body ul{ padding-left:20px; }
.legal__body li{ margin-bottom:6px; }
.legal__body strong{ color:var(--ink); font-weight:500; }
.legal__body a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); }
.legal__body table{ width:100%; border-collapse:collapse; margin:10px 0 24px; font-size:14.5px; line-height:1.5; }
.legal__body th{ text-align:left; font-size:13px; font-weight:400; color:var(--ink-3); padding:10px 12px 10px 0; border-bottom:1px solid var(--ink); }
.legal__body td{ padding:12px 12px 12px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.legal__body td:first-child{ color:var(--ink); }
.legal__box{ background:var(--surface); border-radius:16px; padding:22px 24px; margin:18px 0 24px; }
.legal__box p:last-child{ margin-bottom:0; }
.fill{ background:rgba(194,65,45,.1); color:#C2412D; padding:0 4px; border-radius:4px; }
@media (max-width:900px){ .legal__grid{ grid-template-columns:1fr; } .legal__toc{ position:relative; top:auto; max-height:none; padding-bottom:20px; border-bottom:1px solid var(--line); } .legal__body table{ display:block; overflow-x:auto; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; }
  .portrait__track{ height:auto; } .portrait__sticky{ position:relative; top:auto; height:auto; }
  .pframe::after{ content:""; position:absolute; inset:10px; background:radial-gradient(circle, rgba(18,25,112,.16) 1px, transparent 1.4px) 0 0/14px 14px; opacity:calc(1 - var(--ph,0)); pointer-events:none; }
.pframe img{ opacity:1; filter:none; } .frags li{ opacity:1; } .pstage__ok{ opacity:1; transform:none; }
  .canvas__art path{ stroke-dashoffset:0; } .palette span{ color:var(--ink); } .palette span::before{ transform:none; opacity:1; }
}