/* ==========================================================================
   lucas-yuan.com — design system
   Reference points: restraint and whitespace of Linear / Stripe / Mercury.
   No dependencies, no build step, no CDN. Mobile first. Light + dark.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* brand — deep green: quality, compliance, nothing to hide */
  --brand-700:#0A4E3C;
  --brand-600:#0E6B52;
  --brand-500:#12866A;
  --brand-300:#7FC3AF;
  --brand-100:#CFEDE1;
  --brand-050:#ECFDF5;

  /* accent — amber: attention, warnings, the "trader" side */
  --accent-700:#8A3F07;
  --accent-600:#B45309;
  --accent-500:#D97706;
  --accent-100:#F6E3C8;
  --accent-050:#FEF6E7;

  /* ink */
  --ink-900:#0B1220;
  --ink-700:#1F2937;
  --ink-500:#4B5563;
  --ink-300:#636E7E;

  /* surfaces */
  --bg:#F8FAFC;
  --bg-alt:#F1F5F9;
  --surface:#FFFFFF;
  --surface-2:#FCFDFE;
  --line:#E5E7EB;
  --line-strong:#D1D5DB;
  --on-brand:#FFFFFF;
  /* the CTA band and the footer are dark in both themes, so they must not
     follow --ink-900, which flips to a light value in dark mode */
  --band:#0B1220;
  --stop-soft-line:#F5D9D6;

  --ok:#0E6B52;
  --ok-soft:#ECFDF5;
  --warn:#8A5A00;
  --warn-soft:#FEF6E7;
  --stop:#B42318;
  --stop-soft:#FEF3F2;

  /* elevation — soft, never heavy */
  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 2px 6px rgba(16,24,40,.05);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --shadow-lg:0 2px 4px rgba(16,24,40,.05),0 20px 44px -16px rgba(16,24,40,.18);

  /* geometry */
  --r-pill:999px;
  --r-sm:8px;
  --r-btn:10px;
  --r-card:14px;
  --r-lg:20px;

  /* rhythm */
  --section-y:clamp(4.5rem,8vw,7.5rem);
  --gap:clamp(1.125rem,2vw,1.75rem);
  --container:1160px;
  --pad-x:24px;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

@media (prefers-color-scheme:dark){
  :root{
    --brand-700:#9CEBCF;
    --brand-600:#4FC7A4;
    --brand-500:#38B08C;
    --brand-300:#2F6B5A;
    --brand-100:#16332B;
    --brand-050:#0D2821;

    --accent-700:#F0C078;
    --accent-600:#DFA65A;
    --accent-500:#C98F41;
    --accent-100:#3B2C15;
    --accent-050:#221A0E;

    --ink-900:#F3F6FA;
    --ink-700:#CBD5E1;
    --ink-500:#98A6B8;
    --ink-300:#7A8798;

    --bg:#080D15;
    --bg-alt:#0C131E;
    --surface:#0F1722;
    --surface-2:#121A26;
    --line:#1E2937;
    --line-strong:#2C3A4C;
    --on-brand:#04150F;
    --band:#131D2C;
    --stop-soft-line:#5A2B2E;

    --ok:#5FD0A6;
    --ok-soft:#0D231B;
    --warn:#DFB060;
    --warn-soft:#211A0F;
    --stop:#E58C8C;
    --stop-soft:#241417;

    --shadow-xs:0 1px 2px rgba(0,0,0,.5);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.45);
    --shadow-lg:0 2px 6px rgba(0,0,0,.55),0 24px 50px -18px rgba(0,0,0,.75);
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:90px;
  color-scheme:light dark;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-500);
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.7;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  color:var(--ink-900);
  margin:0 0 .6em;
  font-weight:700;
  text-wrap:pretty;
}
h1{
  font-size:clamp(1.9rem,3.4vw,3rem);
  line-height:1.14;
  letter-spacing:-.022em;
  max-width:18ch;
}
h2{
  font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.2;
  letter-spacing:-.02em;
}
h3{font-size:1.1875rem;line-height:1.35;font-weight:600;letter-spacing:-.012em}
h4{font-size:1rem;line-height:1.4;font-weight:600}

p,li{max-width:68ch}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

a{color:var(--brand-600);text-decoration:none;text-underline-offset:2px}
a:hover{text-decoration:underline}

strong,b{color:var(--ink-900);font-weight:650}
small,.small{font-size:.875rem;line-height:1.6}
hr{border:0;border-top:1px solid var(--line);margin:var(--gap) 0}
img{max-width:100%;height:auto;display:block}
svg{display:block}
figure{margin:0}
code{font-family:var(--mono);font-size:.88em;background:var(--bg-alt);border:1px solid var(--line);border-radius:6px;padding:.1em .38em}

::selection{background:var(--brand-100);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px;border-radius:4px}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x);overflow-x:clip}
.narrow{max-width:800px}
.mid{max-width:940px}

.section{padding-block:var(--section-y)}
.section--alt{background:var(--bg-alt)}
.section--surface{background:var(--surface)}
.section--hairline{border-top:1px solid var(--line)}
.section--tight{padding-block:clamp(3rem,5vw,4.5rem)}

.section--dark{
  background:
    radial-gradient(900px 420px at 12% 0%,rgba(18,134,106,.28),transparent 62%),
    radial-gradient(700px 360px at 95% 100%,rgba(180,83,9,.18),transparent 60%),
    var(--band);
  color:#C7D2DE;
}
.section--dark h2,.section--dark h3,.section--dark h4,.section--dark strong{color:#fff}
.section--dark p{color:#A9B8C8}
.section--dark a{color:#8FE3C9}
.section--dark .eyebrow{color:#8FE3C9}
/* the brand green is too dark against the navy CTA band — lighten it there */
.section--dark .chip{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#D6E0EA;
}
.section--dark .chip svg{color:#8FE3C9}
.section--dark .chip--brand{
  background:rgba(18,134,106,.22);border-color:rgba(143,227,201,.45);color:#B9EEDD;
}

.section-head{max-width:660px;margin-bottom:clamp(2rem,3.4vw,3rem)}
.section-head h2{margin-bottom:.6rem}
.section-head p{color:var(--ink-500);margin-bottom:0}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center p{margin-inline:auto}

.eyebrow{
  display:block;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--brand-600);
  margin:0 0 .875rem;
}

.lede{font-size:1.125rem;line-height:1.65;color:var(--ink-500);max-width:52ch}

.center{text-align:center}
.muted{color:var(--ink-500)}
.dim{color:var(--ink-300)}

.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){ .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)} }

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
@media (max-width:900px){ .split{grid-template-columns:minmax(0,1fr)} }

/* --------------------------------------------------------------------------
   4. Skip link + header
   -------------------------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brand-600);color:var(--on-brand);
  padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:600;
}
.skip:focus{left:0}

.site-header{
  position:sticky;top:0;z-index:100;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.site-header.is-scrolled{
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 3px rgba(16,24,40,.05);
}
@supports not (background:color-mix(in srgb,red,blue)){ .site-header.is-scrolled{background:var(--bg)} }
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}

.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink-900);font-weight:650;letter-spacing:-.015em;font-size:.9875rem}
.brand:hover{text-decoration:none}
.brand-mark{
  width:32px;height:32px;flex:0 0 auto;border-radius:9px;
  background:linear-gradient(150deg,var(--brand-500),var(--brand-700));
  color:var(--on-brand);display:grid;place-items:center;
  font-size:.75rem;font-weight:700;letter-spacing:.03em;
}
.brand-text{display:block;line-height:1.2}
.brand-sub{display:block;font-size:.75rem;font-weight:450;color:var(--ink-300);letter-spacing:0}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  color:var(--ink-700);font-size:.9375rem;font-weight:500;
  padding:8px 12px;border-radius:var(--r-sm);
  transition:color .16s ease,background .16s ease;
}
.nav a:hover{background:var(--bg-alt);color:var(--ink-900);text-decoration:none}
.nav a[aria-current="page"]{color:var(--brand-600);font-weight:600}
.nav a.nav-cta{
  margin-left:8px;background:var(--brand-600);color:var(--on-brand);
  font-weight:600;padding:9px 16px;border-radius:var(--r-btn);
  box-shadow:var(--shadow-xs);
}
.nav a.nav-cta:hover{background:var(--brand-700);color:var(--on-brand);transform:translateY(-1px)}

/* mobile nav */
.menu{display:none;position:relative}
.menu summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 12px;font-size:.9375rem;font-weight:600;color:var(--ink-900);
  background:var(--surface);box-shadow:var(--shadow-xs);
}
.menu summary::-webkit-details-marker{display:none}
.menu .burger{width:15px;height:11px;position:relative;flex:0 0 auto}
.menu .burger span{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .16s ease,top .2s ease}
.menu .burger span:nth-child(1){top:0}
.menu .burger span:nth-child(2){top:4.5px}
.menu .burger span:nth-child(3){top:9px}
.menu[open] .burger span:nth-child(1){top:4.5px;transform:rotate(45deg)}
.menu[open] .burger span:nth-child(2){opacity:0}
.menu[open] .burger span:nth-child(3){top:4.5px;transform:rotate(-45deg)}

.menu-panel{
  position:absolute;right:0;top:calc(100% + 10px);width:min(82vw,280px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-lg);padding:8px;display:grid;gap:2px;
  animation:menuIn .16s ease both;
}
@keyframes menuIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.menu-panel a{padding:11px 13px;border-radius:var(--r-sm);color:var(--ink-700);font-size:.9875rem;font-weight:500}
.menu-panel a:hover{background:var(--bg-alt);color:var(--ink-900);text-decoration:none}
.menu-panel a[aria-current="page"]{background:var(--brand-050);color:var(--brand-700);font-weight:600}
.menu-panel .menu-foot{margin-top:6px;padding:11px 13px 5px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-300)}
/* Short labels keep the widest nav (eight items, plus the Email button on the
   homepage) inside the 1112px content box of the capped container, so the row
   no longer wraps above the breakpoint. Measured 848px on index.html.
   Below 1180px the stacked menu panel is used instead. */
@media (max-width:1180px){ .nav{display:none} .menu{display:block} }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand-600);color:var(--on-brand);border:1px solid var(--brand-600);
  padding:14px 22px;border-radius:var(--r-btn);
  font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.25;
  cursor:pointer;text-align:center;letter-spacing:-.005em;
  transition:transform .16s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
  box-shadow:var(--shadow-xs);
}
.btn:hover{
  background:var(--brand-700);border-color:var(--brand-700);color:var(--on-brand);
  text-decoration:none;transform:translateY(-1px);
  box-shadow:0 8px 20px -8px rgba(14,107,82,.55);
}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-xs)}
.btn svg{flex:0 0 auto}

.btn--secondary{background:transparent;color:var(--ink-700);border-color:var(--line);box-shadow:none}
.btn--secondary:hover{background:var(--surface);color:var(--ink-900);border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.btn--white{background:#fff;color:#0B1220;border-color:#fff}
.btn--white:hover{background:#F1F5F9;border-color:#F1F5F9;color:#0B1220}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);box-shadow:none}
.btn--outline-light:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7);color:#fff}

/* `.section--dark a` outranks the button colour, so a white CTA inside a dark
   section has to state its label colour here — otherwise it renders light teal
   on white (#8FE3C9 on #fff, about 1.5:1) in light mode */
.section--dark .btn--white{background:#fff;border-color:#fff;color:#0B1220}
.section--dark .btn--white:hover{background:#F1F5F9;border-color:#F1F5F9;color:#0B1220}

/* in dark mode the brand green is a bright teal, so a brand-filled button needs
   a dark label — the light-mode --on-brand (#fff) would sit on a light fill */
@media (prefers-color-scheme:dark){
  .section--dark .btn{
    background:#4FC7A4;border-color:#4FC7A4;color:#04150F;
  }
  .section--dark .btn:hover{background:#7FDCC0;border-color:#7FDCC0;color:#04150F}
  .section--dark .btn--white{background:#fff;border-color:#fff;color:#0B1220}
  .section--dark .btn--white:hover{background:#E7EDF3;border-color:#E7EDF3;color:#0B1220}
}
.btn--sm{padding:10px 16px;font-size:.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:520px){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
}

.text-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.95rem}
.text-link svg{transition:transform .18s ease}
.text-link:hover{text-decoration:none}
.text-link:hover svg{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.5rem,2.2vw,2rem);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.card h3{margin-bottom:.5rem}
.card > p{color:var(--ink-500);font-size:.9875rem}
.card--brand{border-color:var(--brand-600);box-shadow:0 0 0 1px var(--brand-600),var(--shadow)}
.card--quiet{box-shadow:none;background:var(--surface-2)}
.card--dark{background:var(--band);border-color:var(--band);color:#C7D2DE}
.card--dark h3,.card--dark strong{color:#fff}

.card-icon{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-050);color:var(--brand-600);border:1px solid var(--brand-100);
  margin-bottom:1.125rem;flex:0 0 auto;
}
.card-icon--accent{background:var(--accent-050);color:var(--accent-600);border-color:var(--accent-100)}
.card-icon--plain{background:var(--bg-alt);color:var(--ink-500);border-color:var(--line)}

.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:.875rem}
.card-foot{margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--line)}
.card-num{font-family:var(--mono);font-size:.8125rem;font-weight:600;color:var(--ink-300)}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--bg-alt);color:var(--ink-500);
}
.tag--brand{background:var(--brand-050);border-color:var(--brand-100);color:var(--brand-700)}
.tag--accent{background:var(--accent-050);border-color:var(--accent-100);color:var(--accent-700)}
.tag--ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.tag--stop{background:var(--stop-soft);border-color:var(--stop);color:var(--stop)}

.price{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:clamp(1.75rem,2.6vw,2.125rem);font-weight:700;color:var(--ink-900);
  letter-spacing:-.03em;line-height:1;margin:.35rem 0 1rem;
}
.price small{font-size:.875rem;font-weight:500;color:var(--ink-500);letter-spacing:0}

.plan-list{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.6rem}
.plan-list li{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;color:var(--ink-700);max-width:none}
.plan-list li svg{flex:0 0 auto;margin-top:4px}
.plan-list li.is-out{color:var(--ink-300)}
.plan-foot{margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--line);display:grid;gap:12px}
.plan-note{font-size:.8125rem;color:var(--ink-300)}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3.5rem,6vw,6rem);
  background:
    radial-gradient(1100px 620px at 78% -10%,var(--brand-050),transparent 66%),
    radial-gradient(760px 420px at 2% 8%,rgba(180,83,9,.05),transparent 70%),
    var(--bg);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(11,18,32,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(11,18,32,.045) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(720px 460px at 32% 12%,#000,transparent 74%);
  mask-image:radial-gradient(720px 460px at 32% 12%,#000,transparent 74%);
}
@media (prefers-color-scheme:dark){
  .hero::after{
    background-image:
      linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
      linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  }
}
.hero > .container{position:relative;z-index:1}
.hero-grid{
  display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(2.5rem,4vw,4rem);align-items:center;
}
.hero h1{margin-bottom:1.125rem}
.hero .lede{margin-bottom:1.75rem}
.hero-actions{margin-bottom:1.125rem}
.hero-note{font-size:.875rem;color:var(--ink-300);margin:0}
@media (max-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:3rem}
  .hero h1{max-width:22ch}
}

.hero-visual{position:relative;justify-self:end;width:100%;max-width:372px}
.hero-visual::before{
  content:"";position:absolute;inset:-14% -10% -8% -10%;z-index:0;
  background:radial-gradient(closest-side,rgba(18,134,106,.16),transparent 72%);
  filter:blur(6px);
}
.portrait-frame{
  position:relative;z-index:1;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);background:var(--bg-alt);
  aspect-ratio:4/5;
}
.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}

.evidence-card{
  position:absolute;z-index:2;left:clamp(-150px,-11vw,-62px);bottom:-58px;
  width:min(272px,86%);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-lg);padding:.7rem .95rem .75rem;
}
.evidence-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.34rem}
.evidence-card li{display:flex;align-items:center;gap:9px;font-size:.875rem;font-weight:500;color:var(--ink-700);max-width:none}
.evidence-card li svg{flex:0 0 auto}
.evidence-card .ev-muted{color:var(--ink-300);font-weight:450}
.evidence-card .ev-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-bottom:.5rem;margin-bottom:.55rem;border-bottom:1px solid var(--line);
  font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-300);
}
@media (max-width:1000px){
  .hero-visual{max-width:380px}
  .evidence-card{left:auto;right:-12px;bottom:-14px}
}
@media (max-width:520px){
  .evidence-card{position:static;width:100%;margin-top:1rem;box-shadow:var(--shadow-sm)}
  .hero-visual::before{display:none}
}

/* --------------------------------------------------------------------------
   8. Stat cards
   -------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.25rem,2vw,1.75rem);box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.stat .num{
  display:flex;align-items:baseline;gap:2px;
  font-size:clamp(1.875rem,3.4vw,2.5rem);font-weight:700;color:var(--ink-900);
  letter-spacing:-.035em;line-height:1;margin-bottom:.6rem;
  font-variant-numeric:tabular-nums;
}
.stat .num .suffix{font-size:.5em;font-weight:600;color:var(--brand-600);letter-spacing:0}
.stat .lbl{font-size:.9375rem;font-weight:600;color:var(--ink-900);line-height:1.35;max-width:none}
.stat .sub{font-size:.8125rem;color:var(--ink-300);margin-top:.35rem;line-height:1.5;max-width:none}
@media (max-width:900px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .stats{grid-template-columns:minmax(0,1fr)} }

/* --------------------------------------------------------------------------
   9. Process — vertical timeline
   -------------------------------------------------------------------------- */
.timeline-v{list-style:none;margin:0;padding:0;position:relative}
.timeline-v::before{
  content:"";position:absolute;left:23px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(to bottom,var(--brand-100),var(--brand-100) 85%,transparent);
}
.tl-item{position:relative;padding-left:72px;padding-bottom:clamp(1.5rem,2.6vw,2.25rem)}
.tl-item:last-child{padding-bottom:0}
.tl-node{
  position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--brand-600);
  box-shadow:0 0 0 6px var(--bg);
}
.section--alt .tl-node{box-shadow:0 0 0 6px var(--bg-alt)}
.section--surface .tl-node{box-shadow:0 0 0 6px var(--surface)}
.tl-item--key .tl-node{background:var(--brand-600);border-color:var(--brand-600);color:var(--on-brand)}
.tl-body{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.25rem,2vw,1.625rem);box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.tl-item:hover .tl-body{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.tl-item--key .tl-body{border-color:var(--brand-600)}
.tl-body h3{margin-bottom:.4rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.tl-body h3 .tl-num{font-family:var(--mono);font-size:.8125rem;font-weight:600;color:var(--ink-300);letter-spacing:0}
.tl-body p{font-size:.9875rem;color:var(--ink-500);margin-bottom:.6rem}
.tl-meta{font-size:.8125rem;color:var(--ink-300);display:flex;gap:8px;align-items:flex-start;max-width:64ch}
.tl-meta svg{flex:0 0 auto;margin-top:3px}
@media (max-width:560px){
  .timeline-v::before{left:19px}
  .tl-item{padding-left:60px}
  .tl-node{width:40px;height:40px}
}

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-card)}
.table-scroll::-webkit-scrollbar{height:8px}
.table-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}

.compare{
  width:100%;border-collapse:separate;border-spacing:0;font-size:.9375rem;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm);
}
.compare th,.compare td{padding:1rem 1.125rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.compare thead th{
  background:var(--bg-alt);font-size:.75rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-500);
}
.compare thead th:nth-child(2){color:var(--accent-700)}
.compare thead th:nth-child(3){color:var(--brand-600)}
.compare tbody tr:last-child td,.compare tbody tr:last-child th{border-bottom:0}
.compare tbody th{font-weight:600;color:var(--ink-900);width:32%;background:var(--surface-2);font-size:.9375rem}
.compare td .cell{display:flex;align-items:flex-start;gap:9px}
.compare td .cell svg{flex:0 0 auto;margin-top:3px}
.compare td.no{color:var(--ink-500)}
.compare td.yes{color:var(--ink-700)}
.compare tbody tr:hover td,.compare tbody tr:hover th{background:var(--brand-050)}
@media (max-width:820px){ .compare{min-width:600px} }

/* On phones the comparison table becomes stacked cards: a horizontally
   scrolling table with clipped columns reads as broken, not as a table. */
@media (max-width:680px){
  .compare{min-width:0;border:0;background:transparent;box-shadow:none;border-radius:0;display:block}
  .compare thead{display:none}
  .compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare tr{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
    padding:1rem 1.125rem;margin-bottom:12px;box-shadow:var(--shadow-sm);
  }
  .compare tbody th{
    width:auto;background:transparent;padding:0 0 .7rem;border-bottom:0;
    font-size:.9375rem;font-weight:650;color:var(--ink-900);
  }
  .compare td{
    padding:.6rem 0;border-bottom:0;font-size:.9375rem;
  }
  .compare td:last-child{padding-bottom:0}
  .compare tbody tr:hover td,.compare tbody tr:hover th{background:transparent}
  .compare tbody tr:last-child{margin-bottom:0}
}

.timeline{width:100%;border-collapse:collapse;font-size:.9375rem;background:var(--surface)}
.timeline th,.timeline td{padding:.9rem 1.125rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.timeline thead th{background:var(--bg-alt);font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-500);font-weight:600}
.timeline td:first-child{font-weight:600;color:var(--ink-900)}
.timeline tbody tr:last-child td{border-bottom:0}
.timeline-wrap{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm)}
.timeline-wrap .table-scroll{border-radius:0}
@media (max-width:820px){ .timeline{min-width:560px} }
@media (max-width:680px){
  .timeline{min-width:0}
  .timeline,.timeline tbody,.timeline thead,.timeline tr,.timeline th,.timeline td{display:block;width:auto}
  .timeline thead{display:none}
  .timeline tr{padding:1rem 1.125rem;border-bottom:1px solid var(--line)}
  .timeline tr:last-child{border-bottom:0}
  .timeline td{border-bottom:0;padding:0}
  .timeline td:first-child{font-size:.9375rem;margin-bottom:.35rem}
  .timeline td + td{font-size:.875rem;color:var(--ink-500)}
  .timeline td + td strong{color:var(--ink-900)}
}

/* --------------------------------------------------------------------------
   11. Lists
   -------------------------------------------------------------------------- */
.ticks,.crosses,.dash{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li,.crosses li{position:relative;padding-left:29px;margin-bottom:.65rem;font-size:.9875rem;max-width:66ch}
.ticks li::before{
  content:"";position:absolute;left:4px;top:.55em;width:11px;height:6px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);
}
.crosses li::before{
  content:"";position:absolute;left:3px;top:.62em;width:13px;height:2px;
  background:var(--stop);border-radius:2px;
}
.dash li{position:relative;padding-left:22px;margin-bottom:.6rem;font-size:.9875rem;max-width:66ch}
.dash li::before{content:"";position:absolute;left:2px;top:.62em;width:11px;height:2px;background:var(--ink-300);border-radius:2px}
.ticks li:last-child,.crosses li:last-child,.dash li:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   12. Callouts
   -------------------------------------------------------------------------- */
.callout{
  border:1px solid var(--line);border-left:3px solid var(--brand-600);
  border-radius:var(--r-card);background:var(--surface);
  padding:clamp(1.25rem,2vw,1.75rem);
}
.callout h3,.callout h4{margin-bottom:.5rem}
.callout p{font-size:.9875rem;color:var(--ink-500)}
.callout p:last-child{margin-bottom:0}
.callout--ok{border-left-color:var(--ok);background:var(--ok-soft);border-color:var(--brand-100)}
.callout--warn{border-left-color:var(--accent-600);background:var(--warn-soft);border-color:var(--accent-100)}
.callout--stop{border-left-color:var(--stop);background:var(--stop-soft);border-color:var(--stop-soft-line)}
.callout--brand{background:var(--brand-050);border-color:var(--brand-100)}
.callout--big p{font-size:1.0625rem}
.stack{display:grid;gap:var(--gap)}

/* --------------------------------------------------------------------------
   13. Pull quote
   -------------------------------------------------------------------------- */
.pull{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.375rem,2.4vw,2rem);box-shadow:var(--shadow-sm);
  font-size:clamp(1.0625rem,1.7vw,1.3125rem);line-height:1.55;font-weight:500;
  color:var(--ink-900);letter-spacing:-.015em;margin:0;max-width:56ch;
  border-left:3px solid var(--brand-600);
}
.pull cite{
  display:block;margin-top:.875rem;font-size:.875rem;font-weight:500;font-style:normal;
  color:var(--ink-300);letter-spacing:0;line-height:1.6;
}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.faq-side{position:sticky;top:96px}
.faq-side h2{font-size:1rem;letter-spacing:0;margin-bottom:1rem;color:var(--ink-900)}
.faq-side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.faq-side a{
  display:block;padding:9px 12px;border-radius:var(--r-sm);
  font-size:.9375rem;color:var(--ink-500);font-weight:500;
  border-left:2px solid transparent;
}
.faq-side a:hover{background:var(--surface);color:var(--ink-900);text-decoration:none;border-left-color:var(--line-strong)}
/* `.faq-side a` is (0,1,1) and outranks `.btn` (0,1,0): without this the
   sidebar button rendered the link colour on the brand fill (1.17:1). */
.faq-side a.btn,.faq-side a.btn:hover{
  background:var(--brand-600);border:1px solid var(--brand-600);color:var(--on-brand);
}
.faq-side a.btn:hover{background:var(--brand-700);border-color:var(--brand-700)}
.faq-side .side-cta{
  margin-top:1.5rem;padding:1.125rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-sm);
}
.faq-side .side-cta p{font-size:.875rem;color:var(--ink-500);margin-bottom:.875rem;max-width:none}
@media (max-width:900px){
  .faq-layout{grid-template-columns:minmax(0,1fr)}
  .faq-side{position:static}
  .faq-side ul{display:flex;flex-wrap:wrap;gap:6px}
  .faq-side a{border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);padding:7px 13px;font-size:.875rem}
  .faq-side .side-cta{margin-top:1rem}
}

.faq-group{margin-bottom:clamp(2.5rem,4vw,3.5rem);scroll-margin-top:96px}
.faq-group:last-child{margin-bottom:0}
.faq-group-head{margin-bottom:1.25rem;padding-bottom:.875rem;border-bottom:1px solid var(--line)}
.faq-group-head h2{font-size:1.375rem;margin-bottom:.35rem}
.faq-group-head p{color:var(--ink-500);font-size:.9375rem;margin:0}

details.faq{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);margin-bottom:10px;overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
details.faq:hover{border-color:var(--line-strong);background:var(--surface-2)}
details.faq[open]{border-color:var(--brand-100);box-shadow:var(--shadow-sm);background:var(--surface)}
details.faq > summary{
  cursor:pointer;list-style:none;position:relative;
  padding:1.0625rem 3.25rem 1.0625rem 1.375rem;
  font-size:1.0625rem;font-weight:600;color:var(--ink-900);line-height:1.45;
  transition:color .18s ease;
}
details.faq > summary::-webkit-details-marker{display:none}
details.faq > summary:hover{color:var(--brand-700)}
details.faq > summary::after{
  content:"";position:absolute;right:1.375rem;top:50%;width:9px;height:9px;
  border-right:2px solid var(--ink-300);border-bottom:2px solid var(--ink-300);
  transform:translateY(-72%) rotate(45deg);
  transition:transform .22s ease,border-color .18s ease;
}
details.faq[open] > summary::after{transform:translateY(-28%) rotate(225deg);border-color:var(--brand-600)}
details.faq[open] > summary{color:var(--brand-700)}
.faq-q-num{
  display:inline-block;min-width:2rem;font-family:var(--mono);font-size:.8125rem;
  font-weight:600;color:var(--ink-300);
}
details.faq[open] .faq-q-num{color:var(--brand-600)}
.faq-body{
  padding:.25rem 1.375rem 1.5rem;border-top:1px solid var(--line);
  font-size:1rem;color:var(--ink-700);animation:faqIn .22s ease both;
}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.faq-body > *:first-child{margin-top:1.125rem}
.faq-body ul,.faq-body ol{padding-left:1.35rem;margin:0 0 1.1em;max-width:66ch}
.faq-body li{margin-bottom:.5rem}
.faq-body li::marker{color:var(--brand-600)}
details.faq.faq--key{border-left:3px solid var(--brand-600)}
.faq-anchor{float:right;margin-left:10px;color:var(--ink-300);font-family:var(--mono);font-size:.85em}
.faq-anchor:hover{color:var(--brand-600);text-decoration:none}

/* --------------------------------------------------------------------------
   15. Resource / sample cards
   -------------------------------------------------------------------------- */
.res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.res-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .res-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .res-grid,.res-grid--3{grid-template-columns:minmax(0,1fr)} }

.res{
  display:flex;flex-direction:column;gap:1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.25rem,2vw,1.625rem);box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.res:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.res-head{display:flex;align-items:center;gap:12px}
.res-icon{
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--accent-050);color:var(--accent-600);border:1px solid var(--accent-100);
}
.res-icon--brand{background:var(--brand-050);color:var(--brand-600);border-color:var(--brand-100)}
.res h3{font-size:1.0625rem;margin:0}
.res p{font-size:.9375rem;color:var(--ink-500);margin:0}
.res-meta{font-size:.8125rem;color:var(--ink-300);font-family:var(--mono)}
.res .res-actions{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap}

.pdf-frame{margin-top:1.25rem;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--bg-alt);box-shadow:var(--shadow-sm)}
.pdf-frame object{display:block;width:100%;height:min(70vh,560px);border:0}
.pdf-fallback{padding:2rem;text-align:center;color:var(--ink-500);font-size:.9375rem}

.doc-preview{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem;display:grid;gap:8px}
.doc-preview .line{height:8px;border-radius:4px;background:var(--bg-alt)}
.doc-preview .line.w90{width:90%}
.doc-preview .line.w75{width:75%}
.doc-preview .line.w60{width:60%}
.doc-preview .row{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* --------------------------------------------------------------------------
   16. Contact
   -------------------------------------------------------------------------- */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,4vw,4rem);align-items:start}
@media (max-width:960px){ .contact-layout{grid-template-columns:minmax(0,1fr)} }

.info-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.375rem,2.2vw,1.875rem);box-shadow:var(--shadow-sm);
}
.info-card h3{font-size:1.0625rem;margin-bottom:.5rem}
.contact-line{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;padding:.85rem 0;border-bottom:1px solid var(--line)}
.contact-line:last-of-type{border-bottom:0}
.contact-line .k{min-width:7.5rem;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-300)}
.contact-line .v{font-size:1rem;color:var(--ink-900);font-weight:500;word-break:break-word;max-width:none}
.contact-line .v.big{font-size:1.125rem;font-weight:600}
.copy-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy-btn{
  border:1px solid var(--line);background:var(--bg-alt);color:var(--ink-500);
  border-radius:var(--r-pill);padding:4px 11px;font-size:.75rem;font-weight:600;
  cursor:pointer;font-family:inherit;letter-spacing:.02em;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.copy-btn:hover{background:var(--brand-050);color:var(--brand-700);border-color:var(--brand-100)}

.qr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.25rem}
.qr-card{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-sm);padding:.875rem;text-align:center}
.qr-card img{width:100%;height:auto;border-radius:6px;background:#fff;padding:6px;border:1px solid var(--line)}
.qr-card figcaption{font-size:.8125rem;color:var(--ink-500);margin-top:.6rem;line-height:1.45}
.qr-card .big{display:block;color:var(--ink-900);font-weight:600;font-size:.9375rem;margin-bottom:1px}
@media (max-width:420px){ .qr-grid{grid-template-columns:minmax(0,1fr)} }

.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:6px 13px;font-size:.8125rem;font-weight:500;color:var(--ink-700);
}
.chip--brand{background:var(--brand-050);border-color:var(--brand-100);color:var(--brand-700);font-weight:600}
.chip svg{color:var(--brand-600)}

/* --------------------------------------------------------------------------
   17. Forms
   -------------------------------------------------------------------------- */
.form{display:grid;gap:1.125rem}
.field{display:grid;gap:.5rem}
.field label{font-size:.9375rem;font-weight:600;color:var(--ink-900)}
.field label .opt{font-weight:450;color:var(--ink-300);font-size:.875rem}
.field .hint{font-size:.8125rem;color:var(--ink-300)}
input[type=text],input[type=email],select,textarea{
  font-family:inherit;font-size:1rem;color:var(--ink-900);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:.8rem .95rem;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
input::placeholder,textarea::placeholder{color:var(--ink-300)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand-600);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-600) 16%,transparent);
}
@supports not (box-shadow:0 0 0 3px color-mix(in srgb,red,blue)){
  input:focus,select:focus,textarea:focus{box-shadow:none;outline:2px solid var(--brand-600)}
}
textarea{min-height:132px;resize:vertical}
select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;
}
.form-note{font-size:.875rem;color:var(--ink-500);max-width:62ch}
#form-status{font-weight:600;color:var(--brand-700);min-height:1.4em;font-size:.875rem}
.form-foot{padding-top:1rem;border-top:1px solid var(--line)}
@media (min-width:681px){ .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.125rem} }

/* --------------------------------------------------------------------------
   18. About page
   -------------------------------------------------------------------------- */
.about-head{display:grid;grid-template-columns:320px minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.portrait{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-lg);background:var(--bg-alt);aspect-ratio:4/5;
}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
@media (max-width:820px){
  .about-head{grid-template-columns:minmax(0,1fr);gap:2rem}
  .portrait{max-width:300px}
}

.cv-item{
  display:grid;grid-template-columns:11.5rem minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);
  padding:clamp(1.5rem,2.6vw,2.25rem) 0;border-bottom:1px solid var(--line);
}
.cv-item:last-child{border-bottom:0;padding-bottom:0}
.cv-when{font-family:var(--mono);font-size:.8125rem;color:var(--ink-300);line-height:1.6}
.cv-when strong{display:block;font-family:var(--font);font-size:.9375rem;color:var(--ink-900);margin-bottom:.2rem;font-weight:600}
.cv-body h3{margin-bottom:.25rem}
.cv-body .role{color:var(--ink-500);font-size:.9375rem;margin-bottom:1rem}
@media (max-width:680px){ .cv-item{grid-template-columns:minmax(0,1fr);gap:.75rem} }

.creds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cred{
  display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.8rem 1rem;font-size:.9375rem;font-weight:500;color:var(--ink-900);
}
.cred svg{flex:0 0 auto;color:var(--brand-600)}
@media (max-width:560px){ .creds{grid-template-columns:minmax(0,1fr)} }

.banner{border-radius:var(--r-card);border:1px solid var(--line);overflow:hidden;display:block;box-shadow:var(--shadow-sm)}

/* --------------------------------------------------------------------------
   19. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative;overflow:hidden;
  padding-block:clamp(2.5rem,4.5vw,4rem) clamp(2.5rem,4.5vw,3.5rem);
  background:
    radial-gradient(900px 420px at 12% -30%,var(--brand-050),transparent 68%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.page-hero h1{max-width:22ch;margin-bottom:1rem}
.page-hero .lede{margin-bottom:1.75rem}
.breadcrumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.8125rem;color:var(--ink-300);margin-bottom:1.125rem}
.breadcrumb a{color:var(--ink-500)}
.breadcrumb a:hover{color:var(--brand-600)}
.breadcrumb span{color:var(--ink-300)}

/* --------------------------------------------------------------------------
   20. Flow diagram figure
   -------------------------------------------------------------------------- */
.flow-figure{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.125rem,2.4vw,2rem);box-shadow:var(--shadow-sm);
}
.flow-figure svg{width:100%;height:auto;overflow:hidden}
.flow-figure figcaption{margin-top:1.25rem;padding-top:1.125rem;border-top:1px solid var(--line);font-size:.9375rem;color:var(--ink-500)}
.flow-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:.875rem;font-size:.8125rem;color:var(--ink-500)}
.flow-legend span{display:inline-flex;align-items:center;gap:8px}
.flow-legend i{width:22px;height:3px;border-radius:2px;display:inline-block;flex:0 0 auto}
.flow-legend .sw-brand{background:var(--brand-600)}
.flow-legend .sw-ink{background:var(--ink-300)}
.flow-legend .sw-dash{background:repeating-linear-gradient(90deg,var(--stop) 0 5px,transparent 5px 10px)}

/* the wide SVG needs room; below 760px a stacked CSS version replaces it,
   because at phone width the SVG text would render at ~6px and be unreadable */
.flow-svg{display:block}
.flow-sm{display:none}
.flow-d{display:block}
/* at very narrow widths the portrait moves into the hero column and the card
   would overflow; below 380px the portrait image is dropped instead. The
   evidence card has to survive — it is static and full width below 520px. */
@media (max-width:380px){ .portrait-frame{display:none} }
@media (max-width:760px){
  .flow-svg{display:none}
  .flow-sm{display:block}
  .flow-sm ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
  .flow-sm li{display:grid;gap:8px}
  .flow-sm .fs-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .flow-sm .fs-box{
    display:inline-flex;align-items:center;gap:7px;
    border:1px solid var(--line);border-radius:var(--r-sm);
    padding:9px 13px;font-size:.875rem;font-weight:600;color:var(--ink-900);
    background:var(--surface);
  }
  .flow-sm .fs-you{background:var(--brand-600);border-color:var(--brand-600);color:var(--on-brand)}
  .flow-sm .fs-me{background:var(--brand-050);border-color:var(--brand-100);color:var(--brand-700)}
  .flow-sm .fs-no{background:var(--stop-soft);border-color:var(--stop);color:var(--stop);border-style:dashed}
  .flow-sm .fs-arrow{color:var(--ink-300);font-family:var(--mono);font-size:1rem;line-height:1}
  .flow-sm .fs-note{font-size:.8125rem;color:var(--ink-500);max-width:44ch}
}

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.site-footer{background:var(--band);color:#93A3B6;padding:clamp(3rem,5vw,4.5rem) 0 2rem}
.site-footer h4{color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:1rem}
.site-footer a{color:#B9C7D6}
.site-footer a:hover{color:#8FE3C9;text-decoration:none}
.site-footer p{color:#8595A8;font-size:.875rem}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:2.25rem}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:.6rem;font-size:.9rem;max-width:none}
.footer-brand{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:650;margin-bottom:.875rem;font-size:.9875rem}
.footer-brand:hover{color:#fff;text-decoration:none}
.footer-brand .brand-mark{background:linear-gradient(150deg,var(--brand-500),var(--brand-700));color:var(--on-brand)}
.footer-bottom{
  margin-top:clamp(2rem,3.5vw,2.75rem);padding-top:1.375rem;border-top:1px solid rgba(255,255,255,.11);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8125rem;color:#7B8CA0;
}
.footer-legal{max-width:54ch}
@media (max-width:1000px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr;gap:1.75rem} }

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */
.inline-links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:.9375rem}
.inline-links a{display:inline-flex;align-items:center;gap:6px}
.note{font-size:.875rem;color:var(--ink-500);border-left:2px solid var(--line-strong);padding-left:.9rem;margin:1.25rem 0}
.sticky-aside{position:sticky;top:96px}
@media (max-width:1000px){ .sticky-aside{position:static} }
.mt-0{margin-top:0}.mt-1{margin-top:.75rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.5rem}.mt-4{margin-top:4rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.75rem}.mb-2{margin-bottom:1.5rem}.mb-3{margin-bottom:2.5rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[id]{scroll-margin-top:90px}

/* --------------------------------------------------------------------------
   23. Motion
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px)}
.js-ready .reveal{
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--reveal-delay,0ms);
}
.js-ready .reveal.is-visible{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
.js-ready [data-draw]{
  stroke-dasharray:var(--dash,600);stroke-dashoffset:var(--dash,600);
  transition:stroke-dashoffset 1.5s cubic-bezier(.5,0,.2,1);
}
.js-ready .is-visible [data-draw],.js-ready [data-draw].is-visible{stroke-dashoffset:0}
.js-ready [data-fade]{opacity:0;transition:opacity .55s ease .35s}
.js-ready .is-visible [data-fade],.js-ready [data-fade].is-visible{opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.js-ready .reveal{opacity:1!important;transform:none!important}
  .js-ready [data-draw]{stroke-dashoffset:0!important}
  .js-ready [data-fade]{opacity:1!important}
}

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */
@media print{
  :root{--bg:#fff;--bg-alt:#fff;--surface:#fff;--ink-900:#000;--ink-700:#111;--ink-500:#333;--line:#bbb}
  .site-header,.site-footer,.btn,.menu,.skip,.qr-grid,.hero-visual,.faq-side .side-cta{display:none!important}
  .hero,.page-hero,.section--dark{background:#fff!important;color:#000!important}
  /* .section--dark and its dark cards keep literal light-on-dark colours,
     which printed as white on white once the band background went white */
  .section--dark h2,.section--dark h3,.section--dark h4,.section--dark strong,
  .card--dark h2,.card--dark h3,.card--dark h4,.card--dark strong{color:#000!important}
  .section--dark p,.section--dark li,.section--dark .card--dark p,
  .section--dark .card--dark li{color:#222!important}
  .section--dark a,.section--dark .eyebrow{color:#0A4E3C!important}
  .section--dark .card--dark{background:#fff!important;border-color:#ccc!important}
  .section--dark .chip{background:#fff!important;border-color:#ccc!important;color:#222!important}
  .hero::after{display:none}
  .reveal,.js-ready .reveal{opacity:1!important;transform:none!important}
  .section{padding-block:1.1rem;border-top:1px solid #ccc}
  .card,.callout,.res,.tl-body,.stat{box-shadow:none;border-color:#ccc;break-inside:avoid}
  h1{font-size:23pt;max-width:none}h2{font-size:14pt}h3{font-size:11.5pt}
  body{font-size:10.5pt;line-height:1.45;background:#fff}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
  details.faq{break-inside:avoid}
  details.faq > .faq-body{display:block!important}
}


/* ===== 联系方式可见性（2026-10-02 追加） ===== */
.nav-mail {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px; margin-right: 8px;
  border: 1px solid var(--line); border-radius: 10px;
  font-size: .875rem; font-weight: 600; color: var(--ink-700);
  text-decoration: none; background: var(--surface);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.nav-mail:hover { border-color: var(--brand-600); color: var(--brand-600); transform: translateY(-1px); }
.nav-mail svg { flex: none; }
@media (max-width: 1023px) { .nav-mail { display: none; } }

.qr-inline { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; }
.qr-inline__item { margin: 0; display: flex; align-items: center; gap: 12px; }
.qr-inline__item img {
  border-radius: 10px; border: 1px solid rgba(255,255,255,.28);
  background: #fff; padding: 5px; flex: none;
}
.qr-inline__item figcaption { display: flex; flex-direction: column; gap: 2px; font-size: .8125rem; line-height: 1.45; }
.qr-inline__item figcaption strong { font-size: .9375rem; }


/* ===== evidence-card 改成可点击链接（2026-10-02） ===== */
a.evidence-card{
  text-decoration:none;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.evidence-card:hover{
  transform:translateY(-4px);
  border-color:var(--brand-600);
  box-shadow:0 2px 4px rgba(16,24,40,.05), 0 18px 40px rgba(16,24,40,.14);
}
a.evidence-card:focus-visible{
  outline:2px solid var(--brand-600);outline-offset:3px;
}
.evidence-card .ev-more{
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  margin-top:.6rem;padding-top:.5rem;border-top:1px solid var(--line);
  font-size:.8125rem;font-weight:600;color:var(--brand-600);
}
.evidence-card .ev-more svg{flex:0 0 auto;transition:transform .18s ease}
a.evidence-card:hover .ev-more svg{transform:translateX(3px)}
/* 卡片本身不再拦截内部 ul 的排版 */
a.evidence-card{display:block}


/* ===== hero 证据卡定位微调（2026-10-02） ===== */
@media (min-width:1001px){
  .hero-visual{max-width:372px;justify-self:end}
  .portrait-frame img{object-position:50% 14%}
  .evidence-card{left:clamp(-150px,-11vw,-62px);bottom:-58px;width:min(272px,86%)}
  .evidence-card .ev-more{white-space:nowrap}
}
/* 宽屏时右栏更宽，卡片可以再往左一点 */
@media (min-width:1500px){
  .evidence-card{left:clamp(-190px,-12vw,-90px)}
}
/* 1001-1180：右栏较窄，卡片收敛，避免压脸 */
@media (min-width:1001px) and (max-width:1180px){
  .evidence-card{left:-96px;bottom:-52px;width:min(258px,84%)}
}
@media (max-width:520px){
  .evidence-card .ev-more{white-space:normal}
}

/* ---- illustrations -------------------------------------------------------
   Engineering-diagram style figures. Kept as separate SVG files so they can
   be cached and reused; .fig wraps them with an optional caption.            */
.fig { margin: 28px 0 8px; }
.fig img {
  display: block; width: 100%; height: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
}
.fig figcaption {
  margin-top: 10px;
  font-size: 12.75px; line-height: 1.6; color: var(--ink-300);
}
@media (max-width: 640px) {
  .fig img { padding: 6px; border-radius: 10px; }
}