/* Paperclip to Porsche 911 · site styles
   Tokens come straight from Brand Foundations v1.0: black, white and silver only;
   Michroma for headlines, Manrope for reading, IBM Plex Mono for numbers and labels. */

:root{
  --ink:#0A0A0A; --panel:#1A1A1A; --white:#FFFFFF; --mist:#E8E8E8;
  --silver:#C0C0C0; --steel:#A8A8A8; --graphite:#8A8A8A;
  --rule:rgba(192,192,192,.22);
  --sig:linear-gradient(135deg,#8A8A8A 0%,#C0C0C0 28%,#E8E8E8 50%,#C0C0C0 72%,#A8A8A8 100%);
  --display:'Michroma','Eurostile','Arial Black',sans-serif;
  --body:'Manrope','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --head-h:72px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px)}
body{margin:0;background:var(--ink);color:var(--mist);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
img{height:auto}
a{color:var(--white)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--white);outline-offset:3px}
p{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;color:var(--white);margin:0;text-wrap:balance;letter-spacing:.01em}
h1{font-size:clamp(34px,6.4vw,72px);line-height:1.05}
h2{font-size:clamp(26px,4vw,40px);line-height:1.1}
h3{font-size:clamp(17px,2vw,20px);line-height:1.25;letter-spacing:.02em}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.lead{font-size:19px;line-height:1.5;font-weight:500;color:var(--white);max-width:60ch}
.muted{color:var(--steel)}
.silver-rule{display:block;width:176px;height:4px;background:var(--sig);border:0;margin:22px 0 0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--white);color:var(--ink);padding:10px 14px;font-family:var(--mono);font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 22px;font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--white);cursor:pointer;transition:background-color .15s,color .15s;touch-action:manipulation}
.btn-primary{background:var(--white);color:var(--ink)}
.btn-primary:hover{background:var(--mist);border-color:var(--mist)}
.btn-ghost{background:transparent;color:var(--white)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn[disabled]{opacity:.5;cursor:progress}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding-top:env(safe-area-inset-top)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--head-h)}
.logo{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none;min-height:44px}
.logo img{display:block;width:58px;height:auto}
.wordmark{font-family:var(--display);font-size:17px;letter-spacing:.08em;line-height:1;color:var(--white);white-space:nowrap}
.nav{display:flex;align-items:center;gap:6px}
.nav a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);text-decoration:none;padding:10px 12px;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--white)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--silver)}
.nav .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mist);animation:pulse 1.8s infinite}
.nav .nav-cta{margin-left:8px;background:var(--white);color:var(--ink);font-weight:600;padding:10px 16px}
.nav .nav-cta:hover{background:var(--mist);color:var(--ink)}
.nav .nav-cta[aria-current="page"]{color:var(--ink);box-shadow:none;outline:1px solid var(--white);outline-offset:3px}
@keyframes pulse{50%{opacity:.25}}
.menu-btn{display:none;background:none;border:1px solid var(--rule);color:var(--white);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;padding:0 14px;cursor:pointer}
@media (max-width:860px){
  .logo img{width:44px}
  .wordmark{font-size:13px}
  .menu-btn{display:inline-flex;align-items:center;gap:8px}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--ink);border-bottom:1px solid var(--rule);padding:8px max(20px,env(safe-area-inset-left)) 20px;display:none}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--rule);font-size:13px}
  .nav a[aria-current="page"]{box-shadow:none;color:var(--white)}
  .nav .nav-cta{margin:16px 0 0;justify-content:center;border-bottom:0}
}

/* ---------- sections ---------- */
.section{padding-block:96px;border-top:1px solid var(--rule)}
.section.light{background:var(--white);color:#1A1A1A;border-top:0}
.section.light h2,.section.light h3{color:var(--ink)}
.section.light .eyebrow{color:#555}
.section.light .lead{color:var(--ink)}
.sec-head{margin-bottom:48px;max-width:980px}
.sec-head h2{margin-top:14px}
.sec-head .lead{margin-top:24px}
@media (max-width:640px){.section{padding-block:64px}.sec-head{margin-bottom:32px}}

/* ---------- home: hero ---------- */
.hero{padding-block:72px 0;overflow:hidden}
.hero-copy{padding-bottom:72px}
.hero h1{margin:18px 0 24px;font-size:clamp(34px,4.4vw,58px)}
.hero .lead{max-width:34ch;font-size:clamp(18px,2vw,21px);font-weight:400}
.hero .btn-row{margin-top:36px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end}
.hero-art{position:relative;padding-bottom:4px}
.hero-art img{display:block;width:100%;margin-bottom:-2px}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:8px}.hero-copy{padding-bottom:16px}.hero-art{max-width:560px;padding-bottom:48px}}
.holding{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;border:1px solid var(--rule);background:var(--panel);padding:16px 20px;margin-top:40px;text-decoration:none;color:inherit;max-width:640px;transition:border-color .15s}
.holding:hover{border-color:var(--silver)}
.holding .thumb{width:64px;height:64px;border:1px solid var(--rule);display:block;background:var(--ink)}
.holding .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.holding b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;color:var(--white);font-size:16px;line-height:1.3}
.holding .meta{font-family:var(--mono);font-size:13px;color:var(--steel)}
.holding .val{font-family:var(--mono);font-weight:600;background:var(--silver);color:var(--ink);padding:4px 10px;font-size:16px;white-space:nowrap}
.holding .eyebrow{margin-bottom:4px}
@media (max-width:520px){.holding{grid-template-columns:auto 1fr}.holding .val{grid-column:2;justify-self:start}}

/* ---------- home: story ---------- */
.story-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.story-grid .lead{margin-bottom:20px}
.story-grid p+p{margin-top:16px}
.rules-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rules-list li{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--rule);align-items:start}
.ico{width:56px;height:56px;background:var(--panel);border:1px solid var(--rule);display:grid;place-items:center}
.ico svg{width:26px;height:26px}
.rules-list b{display:block;color:var(--white);font-size:17px;font-weight:700}
.rules-title{font-family:var(--display);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--white);margin:0 0 16px}
.skyline{margin-top:40px;opacity:.9}
@media (max-width:900px){.story-grid{grid-template-columns:1fr;gap:48px}}

/* ---------- home: benefits ---------- */
.benefits{list-style:none;margin:0;padding:0;border-top:1px solid #D0D0D0}
.benefits li{display:grid;grid-template-columns:72px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid #D0D0D0}
.benefits .ico{width:72px;height:72px;background:var(--ink);border:0}
.benefits .ico svg{width:30px;height:30px}
.benefits p{margin-top:8px;max-width:62ch}
.cert-panel{margin-top:48px;background:var(--ink);color:var(--mist);display:grid;grid-template-columns:1.4fr 1fr;align-items:center}
.cert-panel>img{padding:24px 32px}
.cert-panel img{display:block;width:100%;height:auto}
.cert-panel .txt{padding:40px}
.cert-panel .txt p{margin-top:14px;font-size:17px;color:var(--white)}
@media (max-width:820px){.cert-panel{grid-template-columns:1fr}.cert-panel .txt{padding:28px 24px 32px}}

/* ---------- home: tiers ---------- */
.tiers{display:grid;gap:16px}
.tier{display:grid;grid-template-columns:150px 1fr;border:1px solid var(--rule);background:var(--ink)}
.tier.finale{background:var(--panel);border-color:var(--silver)}
.tier-badge{display:grid;place-items:center;padding:20px;border-right:1px solid var(--rule)}
.tier-badge img{width:104px;height:104px}
.tier-body{padding:20px 24px 8px}
.tier-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 16px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.tier-top h3{font-size:20px}
.tier-top span{font-family:var(--mono);font-size:13px;color:var(--steel)}
.brk{display:grid;grid-template-columns:44px 170px 1fr 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.brk:last-child{border-bottom:0}
.brk .no{font-family:var(--mono);font-weight:600;font-size:18px;color:var(--white)}
.brk .range{font-family:var(--mono);font-weight:600;color:var(--white);font-size:15px}
.brk .lbl{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);margin-bottom:2px}
.tier-cols{display:grid;grid-template-columns:44px 170px 1fr 1fr;gap:16px;padding:0 24px 10px 174px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.tier-note{margin-top:20px;color:var(--steel);font-size:15px;max-width:72ch}
@media (max-width:960px){
  .tier-cols{display:none}
  .brk{grid-template-columns:36px 1fr;gap:4px 12px}
  .brk .range{grid-column:2}
  .brk .feat,.brk .extra{grid-column:2}
  .brk .lbl{display:block}
  .brk .feat{margin-top:8px}
}
@media (max-width:600px){
  .tier{grid-template-columns:1fr}
  .tier-badge{border-right:0;border-bottom:1px solid var(--rule);justify-content:start;padding:16px 20px;grid-template-columns:auto 1fr;display:flex;gap:16px}
  .tier-badge img{width:72px;height:72px}
  .tier-body{padding:16px 20px 4px}
}

/* ---------- home: steps ---------- */
.steps-grid{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:88px 1fr;gap:24px;position:relative;padding-bottom:36px}
.steps li:not(:last-child)::before{content:"";position:absolute;left:43px;top:88px;bottom:0;width:2px;background:linear-gradient(#C0C0C0,rgba(192,192,192,.15))}
.steps .dot{width:88px;height:88px;border-radius:50%;background:var(--panel);border:1px solid var(--rule);display:grid;place-items:center}
.steps .dot svg{width:32px;height:32px}
.steps .eyebrow{margin:10px 0 6px}
.steps p{margin-top:8px;max-width:52ch}
.need{background:var(--panel);padding:32px;border-top:2px solid var(--silver)}
.need ul{margin:12px 0 28px;padding-left:20px}
.need li{margin:6px 0;color:var(--white)}
.need p{color:var(--white)}
.need img{display:block;margin:28px auto 0;width:220px}
@media (max-width:900px){.steps-grid{grid-template-columns:1fr}}
@media (max-width:520px){.steps li{grid-template-columns:56px 1fr;gap:16px}.steps .dot{width:56px;height:56px}.steps .dot svg{width:24px;height:24px}.steps li:not(:last-child)::before{left:27px;top:56px}}

/* ---------- home: bigger picture ---------- */
.bigger{padding-bottom:72px}
.bigger .lead{margin-top:28px;max-width:62ch}
.bigger .sub{margin-top:16px;color:var(--steel);max-width:68ch}
.bigger .art{margin:64px auto 0;max-width:880px}
.bigger .art img{display:block;width:100%;height:auto}
.kindness{text-align:center;margin-top:40px}
.kindness p{font-family:var(--display);color:var(--white);font-size:clamp(26px,4.4vw,46px);line-height:1.2;text-wrap:balance}
.kindness .eyebrow{margin-top:18px}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:700;color:var(--white);font-size:17px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--silver);border-bottom:2px solid var(--silver);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{padding:0 0 22px;max-width:62ch}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr;gap:32px}}

/* ---------- closing CTA ---------- */
.closer{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.closer .lead{margin-top:20px}
.people{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;max-width:640px}
.person{border-top:2px solid var(--white);padding-top:14px}
.person b{display:block;color:var(--white);font-size:17px}
.person span,.person a{display:block;font-family:var(--mono);font-size:14px;color:var(--steel);text-decoration:none;line-height:1.8}
.person a:hover{color:var(--white)}
@media (max-width:760px){.closer{grid-template-columns:1fr}.people{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule);padding-block:40px calc(40px + env(safe-area-inset-bottom));font-size:14px;color:var(--steel)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.foot-top .logo img{width:52px}
.foot-top .wordmark{font-size:15px}
.foot-top nav{display:flex;gap:4px 20px;flex-wrap:wrap}
.foot-top nav a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);text-decoration:none;padding:8px 0}
.foot-top nav a:hover{color:var(--white)}
.foot-bot{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-top:24px}
.foot-bot .mono{color:var(--steel)}
.legal-note{margin-top:16px;font-size:13px;color:var(--graphite);max-width:90ch}

/* ---------- Be the next trade (form page) ---------- */
.page-hero{padding-block:64px 48px}
.page-hero h1{margin:16px 0 22px;font-size:clamp(32px,5.6vw,60px)}
.target{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:var(--panel);border:1px solid var(--rule);padding:18px 20px;margin-top:32px;max-width:720px}
.target .thumb{width:72px;height:72px;border:1px solid var(--rule)}
.target .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.target b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;color:var(--white);font-size:17px;line-height:1.3;margin-top:4px}
.target .val{font-family:var(--mono);font-weight:600;background:var(--silver);color:var(--ink);padding:4px 10px;font-size:18px;white-space:nowrap}
.target a{font-family:var(--mono);font-size:13px;color:var(--steel)}
@media (max-width:560px){.target{grid-template-columns:auto 1fr}.target .val{grid-column:2;justify-self:start}}

.form-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start;padding-bottom:96px}
@media (max-width:980px){.form-layout{grid-template-columns:1fr}}
.offer-form{background:var(--panel);border-top:2px solid var(--silver);padding:40px}
@media (max-width:560px){.offer-form{padding:28px 18px;margin-inline:-20px}}
.offer-form fieldset{border:0;margin:0 0 40px;padding:0}
.offer-form legend{display:block;width:100%;padding:0 0 14px;margin-bottom:24px;border-bottom:1px solid var(--rule);font-family:var(--display);text-transform:uppercase;color:var(--white);font-size:17px;letter-spacing:.04em}
.offer-form legend .eyebrow{display:block;margin-bottom:8px}
.offer-form legend.visually-hidden{width:1px;padding:0;margin:0;border:0}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.fgrid .full{grid-column:1/-1}
@media (max-width:640px){.fgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field>label,.field .label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.req{color:var(--silver);margin-left:4px}
.opt{color:var(--graphite);text-transform:none;letter-spacing:0;font-family:var(--body);font-size:12px;line-height:1;margin-left:6px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=url],.field input[type=number],.field select,.field textarea{
  width:100%;min-height:52px;background:var(--white);color:var(--ink);border:2px solid var(--white);border-radius:0;padding:12px 14px;font:500 16px/1.4 var(--body);appearance:none;-webkit-appearance:none}
.field textarea{min-height:110px;resize:vertical}
.field select{background-image:linear-gradient(45deg,transparent 50%,#0A0A0A 50%),linear-gradient(135deg,#0A0A0A 50%,transparent 50%);background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--silver);outline-offset:2px}
.field [aria-invalid="true"]{border-color:#FFFFFF;outline:3px solid #FFFFFF;outline-offset:2px;box-shadow:inset 0 0 0 2px var(--ink)}
.hint{font-size:14px;color:var(--steel)}
.err{font-size:14px;font-weight:700;color:var(--white);display:flex;gap:8px;align-items:flex-start}
.err::before{content:"!";flex:none;display:inline-grid;place-items:center;width:18px;height:18px;margin-top:2px;background:var(--white);color:var(--ink);font-family:var(--mono);font-size:12px;font-weight:700}
.err:empty{display:none}
.money{position:relative}
.money span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink);font-family:var(--mono);font-weight:600}
.money input{padding-left:30px!important;font-family:var(--mono)!important;font-weight:600!important}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--rule);color:var(--mist);cursor:pointer;font-size:15px;user-select:none}
.choice input:checked+span{background:var(--white);color:var(--ink);border-color:var(--white);font-weight:700}
.choice input:focus-visible+span{outline:2px solid var(--white);outline-offset:3px}
.check{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;cursor:pointer;font-size:15px;color:var(--white)}
.check input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:1px 0 0;border:2px solid var(--silver);background:transparent;display:grid;place-items:center;cursor:pointer}
.check input:checked{background:var(--white);border-color:var(--white)}
.check input:checked::after{content:"";width:6px;height:12px;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
.checks{display:grid;gap:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.tier-preview{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;padding:16px;border:1px solid var(--rule);background:var(--ink);margin-top:6px}
.tier-preview img{width:72px;height:72px}
.tier-preview b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;color:var(--white);font-size:15px}
.tier-preview p{font-size:14px;color:var(--steel);margin-top:4px}

.error-summary{border:2px solid var(--white);padding:20px 22px;margin-bottom:32px;background:var(--ink)}
.error-summary h2{font-size:17px;margin-bottom:10px}
.error-summary ul{margin:0;padding-left:20px}
.error-summary a{color:var(--white);font-weight:700}
.submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding-top:8px}
.submit-row p{font-size:14px;color:var(--steel);max-width:44ch}
.spinner{width:16px;height:16px;border:2px solid rgba(10,10,10,.3);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn[aria-busy="true"] .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.sent{background:var(--panel);border-top:2px solid var(--silver);padding:48px 40px;text-align:left}
.sent img{width:120px;height:120px;display:block;margin-bottom:24px}
.sent h2{font-size:clamp(26px,4vw,40px)}
.sent .lead{margin-top:18px}
.sent ol{margin:28px 0 0;padding-left:22px;max-width:56ch}
.sent li{margin:8px 0}
.sent .btn-row{margin-top:32px}
@media (max-width:560px){.sent{padding:32px 20px;margin-inline:-20px}}

.side{display:grid;gap:24px;position:sticky;top:calc(var(--head-h) + 24px)}
@media (max-width:980px){.side{position:static}}
.side-box{border:1px solid var(--rule);padding:24px}
.side-box h2{font-size:16px;letter-spacing:.04em;margin-bottom:16px}
.mini-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.mini-steps li{display:grid;grid-template-columns:36px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--rule);font-size:15px}
.mini-steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);color:var(--steel);font-size:13px;padding-top:2px}
.mini-steps b{color:var(--white);display:block}
.side .person{border-top:1px solid var(--rule);padding:14px 0 0;margin-top:14px}
.side .person:first-of-type{margin-top:0}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nav .live::before{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* ======================================================================
   Home page interactions
   ====================================================================== */

/* line drawings that draw themselves */
svg.draw{display:block;width:100%;height:auto}
.hero-art svg.draw{margin-bottom:-2px}

/* ---------- tier calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px 48px;align-items:center;background:var(--panel);border-top:2px solid var(--silver);padding:32px 36px;margin-bottom:40px}
.calc label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.calc-val{display:block;font-family:var(--mono);font-weight:600;font-size:clamp(40px,6vw,64px);line-height:1;color:var(--white);margin:14px 0 22px;font-variant-numeric:tabular-nums}
.calc-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--graphite);margin-top:10px}
.range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;touch-action:pan-y;--p:50%}
.range:focus{outline:none}
.range::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,#C0C0C0 0 var(--p),rgba(192,192,192,.18) var(--p) 100%)}
.range::-moz-range-track{height:6px;background:rgba(192,192,192,.18)}
.range::-moz-range-progress{height:6px;background:#C0C0C0}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:var(--white);border:4px solid var(--ink);box-shadow:0 0 0 1px var(--silver)}
.range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--white);border:4px solid var(--ink);box-shadow:0 0 0 1px var(--silver)}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--white)}
.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--white)}
.calc-out{display:grid;grid-template-columns:112px 1fr;gap:20px;align-items:center}
.calc-out img{width:112px;height:112px;transition:transform .35s cubic-bezier(.2,.8,.2,1.2)}
.calc-out img.pop{transform:scale(1.08) rotate(-6deg)}
.calc-out b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;color:var(--white);font-size:20px;line-height:1.2}
.calc-out p{margin-top:8px;font-size:15px;color:var(--mist)}
.calc-out p+p{color:var(--steel);font-size:14px}
@media (max-width:860px){.calc{grid-template-columns:1fr;padding:24px 20px}.calc-out{grid-template-columns:84px 1fr}.calc-out img{width:84px;height:84px}}
.brk{transition:background-color .25s}
.brk.hit{background:rgba(255,255,255,.07);box-shadow:inset 3px 0 0 var(--white);margin-inline:-12px;padding-inline:12px}
.tier.hit{border-color:var(--silver)}

/* ---------- steps light up on scroll ---------- */
.steps.js li .dot{transition:background-color .4s,border-color .4s}
.steps.js li .dot svg{transition:stroke .4s}
.steps.js li:not(:last-child)::before{background:rgba(192,192,192,.15)}
.steps.js li::after{content:"";position:absolute;left:43px;top:88px;bottom:0;width:2px;background:linear-gradient(#E8E8E8,#C0C0C0);transform:scaleY(0);transform-origin:top;transition:transform .8s ease}
.steps.js li:last-child::after{display:none}
.steps.js li.on .dot{background:var(--white);border-color:var(--white)}
.steps.js li.on .dot svg{stroke:var(--ink)}
.steps.js li.on.done::after{transform:scaleY(1)}
@media (max-width:520px){.steps.js li::after{left:27px;top:56px}}

/* ---------- certificate builder ---------- */
.cert-builder{margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:center}
@media (max-width:980px){.cert-builder{grid-template-columns:1fr}}
.cert-controls h3{font-size:20px}
.cert-controls>p{margin:10px 0 24px;font-size:15px;color:#333}
.cert-controls .field{margin-bottom:18px}
.cert-controls .field>label{color:#1A1A1A}
.cert-controls .field input{width:100%;min-height:48px;border:2px solid #0A0A0A;background:#fff;color:#0A0A0A;padding:10px 12px;font:500 16px/1.3 var(--body);border-radius:0}
.cert-controls .field input:focus{outline:2px solid #0A0A0A;outline-offset:2px}
.cert-controls .money span{color:#0A0A0A}
.cert-controls .btn{width:100%;margin-top:6px;background:var(--ink);color:var(--white);border-color:var(--ink)}
.cert-controls .btn:hover{background:#333;border-color:#333}

.cert-stage{perspective:1400px}
.cert{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;
  container-type:inline-size;position:relative;aspect-ratio:297/210;background:
    radial-gradient(120% 90% at 50% 40%,#1c1c1c 0%,#0d0d0d 60%,#070707 100%);
  color:var(--mist);box-shadow:0 30px 60px -30px rgba(0,0,0,.65),0 2px 0 rgba(255,255,255,.04) inset;
  transform:rotateX(var(--ry)) rotateY(var(--rx));transition:transform .5s cubic-bezier(.2,.7,.2,1);overflow:hidden;user-select:none}
.cert.live{transition:transform .08s linear}
/* engraved guilloche ground */
.cert::before{content:"";position:absolute;inset:0;opacity:.07;background:
  repeating-radial-gradient(circle at 50% 46%,transparent 0 .55cqw,#C0C0C0 .55cqw .62cqw),
  repeating-radial-gradient(circle at 18% 120%,transparent 0 .9cqw,#C0C0C0 .9cqw .96cqw);
  -webkit-mask:radial-gradient(70% 70% at 50% 46%,#000 30%,transparent 75%);mask:radial-gradient(70% 70% at 50% 46%,#000 30%,transparent 75%)}
/* foil sheen follows the pointer */
.cert::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(40cqw 30cqw at var(--mx) var(--my),rgba(255,255,255,.14),transparent 70%),
             linear-gradient(115deg,transparent 35%,rgba(255,255,255,.06) 48%,transparent 60%)}
.cert-frame{position:absolute;inset:2.6cqw;border:.32cqw solid transparent;border-image:var(--sig) 1;padding:2.2cqw 3.4cqw 1.8cqw;display:flex;flex-direction:column;align-items:center;text-align:center}
.cert-frame::before{content:"";position:absolute;inset:.9cqw;border:.08cqw solid rgba(192,192,192,.45);pointer-events:none}
.cert-c{position:absolute;width:3.2cqw;height:3.2cqw;border-color:#C0C0C0;border-style:solid;border-width:0}
.cert-c.tl{top:1.6cqw;left:1.6cqw;border-top-width:.18cqw;border-left-width:.18cqw}
.cert-c.tr{top:1.6cqw;right:1.6cqw;border-top-width:.18cqw;border-right-width:.18cqw}
.cert-c.bl{bottom:1.6cqw;left:1.6cqw;border-bottom-width:.18cqw;border-left-width:.18cqw}
.cert-c.br{bottom:1.6cqw;right:1.6cqw;border-bottom-width:.18cqw;border-right-width:.18cqw}
.cert-top{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2cqw}
.cert-badge{width:8.4cqw;height:8.4cqw;justify-self:start;transition:transform .4s}
.cert-badge.pop{transform:scale(1.1) rotate(-8deg)}
.cert-logo{display:flex;align-items:center;gap:1.2cqw}
.cert-logo img{width:6.6cqw;height:auto}
.cert-logo span{font-family:var(--display);font-size:1.9cqw;letter-spacing:.08em;color:var(--white);white-space:nowrap}
.cert-id{justify-self:end;text-align:right;font-family:var(--mono);line-height:1.4}
.cert-id span{display:block;font-size:.95cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.cert-id b{font-size:1.3cqw;font-weight:600;color:var(--mist)}
.foil,.cert .cert-title.foil{background:var(--sig);-webkit-background-clip:text;background-clip:text;color:transparent}
.cert-title{font-family:var(--display);font-weight:400;font-size:3.5cqw;letter-spacing:.08em;line-height:1.1;margin-top:1.6cqw;text-transform:uppercase}
.cert-rule{display:block;width:16cqw;height:.22cqw;background:var(--sig);margin:1.6cqw auto 1.4cqw}
.cert-small{font-size:1.35cqw;color:var(--steel);letter-spacing:.04em}
.cert-name{font-family:var(--display);font-size:4.4cqw;line-height:1.15;color:var(--white);margin:.8cqw 0 .6cqw;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;letter-spacing:.02em}
.cert-line{font-size:1.45cqw;color:var(--mist)}
.cert-line b{font-family:var(--mono);color:var(--white)}
.cert-grid{width:100%;display:grid;grid-template-columns:repeat(4,1fr);margin:2.2cqw 0 0;border-top:.1cqw solid rgba(192,192,192,.45);border-bottom:.1cqw solid rgba(192,192,192,.45)}
.cert-grid div{padding:1.1cqw .8cqw;border-left:.1cqw solid rgba(192,192,192,.25);min-width:0}
.cert-grid div:first-child{border-left:0}
.cert-grid dt{font-family:var(--mono);font-size:.95cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.cert-grid dd{margin:.5cqw 0 0;font-family:var(--mono);font-weight:600;font-size:1.55cqw;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cert-foot{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:3cqw;margin-top:auto}
.cert-sig{text-align:center;padding-bottom:.4cqw}
.cert-sig i{display:block;height:.1cqw;background:rgba(192,192,192,.7);margin-bottom:.9cqw}
.cert-sig b{display:block;font-size:1.35cqw;font-weight:700;color:var(--white)}
.cert-sig span{display:block;font-size:1.05cqw;color:var(--steel);margin-top:.2cqw}
.cert-seal{width:11cqw;height:11cqw;transform:rotate(-8deg)}
.cert-motto{font-family:var(--display);font-size:.95cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);margin-top:1.2cqw}
@media (prefers-reduced-motion:reduce){.cert,.cert.live{transform:none!important;transition:none}.calc-out img,.cert-badge{transition:none}}

/* ---------- meet the founder ---------- */
.founder{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:56px;align-items:center;margin-top:80px;padding-top:64px;border-top:1px solid var(--rule)}
.founder-photo{margin:0;position:relative;border:2px solid transparent;border-image:var(--sig) 1;background:var(--panel)}
.founder-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.founder-copy h3{font-size:clamp(26px,3.6vw,38px);margin-top:12px}
.founder-copy .silver-rule{margin:18px 0 24px}
.founder-copy .lead{margin-bottom:16px}
.founder-copy p+p{margin-top:14px}
.founder-copy p{max-width:58ch}
.founder-facts{display:grid;grid-template-columns:auto auto 1fr;margin:28px 0 0;border-top:1px solid var(--rule)}
.founder-facts div{padding:14px 20px 0 0;margin-right:20px}
.founder-facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.founder-facts dd{margin:4px 0 0;color:var(--white);font-weight:600;font-size:15px}
@media (max-width:820px){.founder{grid-template-columns:1fr;gap:32px;margin-top:56px;padding-top:48px}.founder-photo{max-width:340px}.founder-facts{grid-template-columns:1fr 1fr}.founder-facts div:last-child{grid-column:1/-1}}

/* ---------- where the proceeds go ---------- */
.proceeds{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:880px}
.proceeds li{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start;background:var(--panel);border-top:2px solid var(--silver);padding:22px 22px 24px}
.proceeds b{display:block;color:var(--white);font-size:17px;margin-bottom:4px}
.proceeds li>span:last-child{font-size:15px}
@media (max-width:700px){.proceeds{grid-template-columns:1fr}}

/* ---------- white sections for contrast ----------
   Inside .tone-light the colour tokens swap (black ↔ white, silver → dark silver),
   so text, buttons, rules and panels all follow. */
.tone-light{
  --ink:#FFFFFF; --panel:#F2F2F2; --white:#0A0A0A; --mist:#1A1A1A;
  --silver:#3F3F3F; --steel:#555555; --graphite:#6A6A6A;
  --rule:rgba(10,10,10,.14);
  --sig:linear-gradient(135deg,#757575 0%,#3F3F3F 28%,#171717 50%,#3F3F3F 72%,#575757 100%);
  background:#FFFFFF;color:var(--mist);color-scheme:light;border-top-color:transparent}
.tone-light .steps .dot svg{stroke:var(--white)}
.tone-light .steps li:not(:last-child)::before{background:linear-gradient(#3F3F3F,rgba(63,63,63,.15))}
.tone-light .steps.js li:not(:last-child)::before{background:rgba(10,10,10,.12)}
.tone-light .steps.js li::after{background:linear-gradient(#0A0A0A,#3F3F3F)}
.tone-light .steps.js li.on .dot svg{stroke:var(--ink)}
.tone-light .need img{filter:invert(1)}