:root{
    --black:#0a0a0a;
    --white:#ffffff;
    --grey-900:#161616;
    --grey-600:#6b6b6b;
    --grey-300:#d6d6d6;
    --grey-100:#f2f2f0;
    --ring: 2px solid var(--black);
    --max: 1180px;
    --gap-xl: clamp(4rem, 8vw, 8rem);
    --gap-lg: clamp(2.5rem, 5vw, 4.5rem);
    --font-head: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  section[id], footer[id]{scroll-margin-top:100px;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--black);
    background:var(--white);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,h4{
    font-family:var(--font-head);
    font-weight:600;
    line-height:1.08;
    margin:0;
    letter-spacing:-0.01em;
  }

  p{margin:0;}

  a{color:inherit; text-decoration:none;}

  img{max-width:100%; display:block;}

  .container{
    max-width:var(--max);
    margin:0 auto;
    padding:0 1.75rem;
  }

  .skip-link{
    position:absolute; left:-999px; top:0;
    background:var(--black); color:var(--white);
    padding:0.75rem 1.25rem; z-index:200;
  }
  .skip-link:focus{left:1rem; top:1rem;}

  :focus-visible{
    outline:2px solid var(--black);
    outline-offset:3px;
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:0.5rem;
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.95rem;
    padding:0.9rem 1.75rem;
    border-radius:999px;
    border:2px solid var(--black);
    cursor:pointer;
    transition:background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--black); color:var(--white);}
  .btn-primary:hover{background:var(--grey-900); transform:translateY(-1px);}
  .btn-ghost-dark{background:transparent; color:var(--black); border-color:var(--black);}
  .btn-ghost-dark:hover{background:var(--black); color:var(--white);}
  .btn-on-dark{background:var(--white); color:var(--black); border-color:var(--white);}
  .btn-on-dark:hover{background:transparent; color:var(--white);}
  .btn-ghost-light{background:transparent; color:var(--white); border-color:var(--white);}
  .btn-ghost-light:hover{background:var(--white); color:var(--black);}
  .btn-block{width:100%;}

  /* ---------- Nav ---------- */
  header.site-nav{
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,0.92);
    backdrop-filter:saturate(180%) blur(10px);
    border-bottom:1px solid var(--grey-300);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:0.9rem 1.75rem;
    max-width:var(--max); margin:0 auto;
  }
  .nav-logo img{height:54px; width:auto;}
  nav.nav-links{
    display:flex; align-items:center; gap:2rem;
  }
  nav.nav-links a{
    font-size:0.95rem; font-weight:500; color:var(--black);
    position:relative; padding:0.25rem 0;
  }
  nav.nav-links a::after{
    content:''; position:absolute; left:0; right:100%; bottom:-2px;
    height:2px; background:var(--black);
    transition:right 0.2s ease;
  }
  nav.nav-links a:hover::after{right:0;}
  .nav-cta{display:flex; align-items:center;}

  .hamburger{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    background:none; border:none; cursor:pointer; padding:0.5rem;
    position:relative; z-index:210; width:36px; height:36px;
  }
  .hamburger span{
    width:24px; height:2px; background:var(--black); display:block;
    transition:transform 0.3s ease, opacity 0.2s ease;
  }
  .hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.is-active span:nth-child(2){opacity:0;}
  .hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .mobile-panel{
    position:fixed; inset:0; z-index:200;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:var(--white);
    opacity:0; visibility:hidden;
    transform:scale(0.97);
    transition:opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
  }
  .mobile-panel.open{
    opacity:1; visibility:visible; transform:scale(1);
    transition:opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
  }
  .mobile-panel a{
    padding:0.9rem 0; font-size:1.4rem; font-weight:600;
    font-family:var(--font-head);
    text-align:center;
  }
  .mobile-panel-close{
    position:absolute; top:1.4rem; right:1.6rem;
    width:36px; height:36px; background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .mobile-panel-close span{
    position:absolute; width:24px; height:2px; background:var(--black);
  }
  .mobile-panel-close span:first-child{transform:rotate(45deg);}
  .mobile-panel-close span:last-child{transform:rotate(-45deg);}

  @media (max-width: 900px){
    nav.nav-links{display:none;}
    .hamburger{display:flex;}
  }

  /* ---------- Hero (the fork) ---------- */
  .hero{
    display:flex;
    align-items:stretch;
    min-height:calc(100vh - 68px);
    position:relative;
    padding:0;
  }
  .hero-half{
    display:flex; flex-direction:column; justify-content:center;
    flex:1 1 50%;
    padding:clamp(2.5rem,6vw,5rem);
    position:relative;
    overflow:hidden;
  }
  .hero-dark{
    background:var(--black); color:var(--white);
    animation:slideFromLeft 0.7s cubic-bezier(.16,.8,.24,1) both;
  }
  .hero-light{
    background:var(--white); color:var(--black);
    animation:slideFromRight 0.7s cubic-bezier(.16,.8,.24,1) both;
  }
  @keyframes slideFromLeft{ from{ transform:translateX(-3%); opacity:0;} to{ transform:translateX(0); opacity:1;} }
  @keyframes slideFromRight{ from{ transform:translateX(3%); opacity:0;} to{ transform:translateX(0); opacity:1;} }

  .hero-eyebrow{
    font-size:0.95rem; font-weight:500;
    color:var(--grey-600);
    margin-bottom:1.1rem;
  }
  .hero-dark .hero-eyebrow{color:var(--grey-300);}
  .hero-half h1{
    font-size:clamp(2.1rem, 3.4vw, 2.85rem);
    max-width:15ch;
    margin-bottom:1.25rem;
  }
  .hero-half p.sub{
    font-size:1.05rem;
    max-width:38ch;
    color:var(--grey-600);
    margin-bottom:2rem;
  }
  .hero-dark p.sub{color:#c9c9c9;}
  .hero-divider{
    position:absolute; left:50%; top:0; bottom:0;
    width:1px; background:var(--grey-300);
    display:flex; align-items:center; justify-content:center;
    z-index:5;
  }
  .hero-divider .ring{
    flex-shrink:0;
    width:76px; height:76px; border-radius:50%;
    border:2px solid var(--black);
    background:var(--white);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-head); font-weight:600; font-size:0.85rem;
    box-shadow:0 0 0 6px var(--white);
  }

  @media (max-width:900px){
    .hero{flex-direction:column; min-height:auto;}
    .hero-half{padding:3rem 1.75rem;}
    .hero-divider{display:none;}
  }

  /* ---------- Trust bar (infinite logo marquee) ---------- */
  .trust{
    border-bottom:1px solid var(--grey-300);
    padding:2.5rem 0;
    overflow:hidden;
  }
  .trust-heading{
    text-align:center;
    font-size:0.9rem;
    color:var(--grey-600);
    margin:0 0 1.5rem;
  }
  .marquee-wrap{
    overflow:hidden;
    width:100%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  }
  .marquee-track{
    display:flex;
    align-items:center;
    width:max-content;
    gap:clamp(3rem, 6vw, 5rem);
    animation:marquee-scroll 64s linear infinite;
  }
  .marquee-logo{
    height:clamp(40px, 5.5vw, 60px);
    width:auto;
    flex-shrink:0;
  }
  @keyframes marquee-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{animation:none;}
  }

  /* ---------- Sections generic ---------- */
  section{padding:var(--gap-xl) 0;}
  .section-head{
    max-width:640px; margin-bottom:var(--gap-lg);
  }
  .section-head h2{
    font-size:clamp(1.9rem, 3vw, 2.5rem);
    margin-bottom:1rem;
  }
  .section-head p{
    font-size:1.08rem; color:var(--grey-600); max-width:56ch;
  }
  .alt-bg{background:var(--grey-100);}

  /* ---------- About ---------- */
  .about-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--gap-lg);
    align-items:center;
  }
  .about-mark{
    display:flex; align-items:center; justify-content:center;
    margin-bottom:2rem;
  }
  .about-mark img{height:110px; width:auto;}
  .about-copy p{
    font-size:1.08rem; margin-bottom:1.4rem; color:var(--grey-900);
  }
  .about-stats{
    display:grid; grid-template-columns:1fr 1fr; gap:1.75rem;
    border-top:1px solid var(--grey-300);
    padding-top:1.75rem;
  }
  .about-stats dt{
    font-family:var(--font-head); font-weight:700; font-size:1.6rem;
  }
  .about-stats dd{
    margin:0.3rem 0 0; color:var(--grey-600); font-size:0.95rem;
  }

  /* ---------- Services (split, no cards) ---------- */
  .services-split{
    display:grid; grid-template-columns:1fr 1fr;
    border-top:1px solid var(--grey-300);
  }
  .service-col{
    display:flex; flex-direction:column;
    padding:var(--gap-lg) clamp(1rem,3vw,3rem);
    border-right:1px solid var(--grey-300);
  }
  .service-col .btn{margin-top:auto; align-self:flex-start;}
  .service-col:last-child{border-right:none;}
  .service-tag{
    display:inline-block; font-size:0.85rem; font-weight:600;
    color:var(--grey-600); margin-bottom:1.25rem;
  }
  .service-col h3{
    font-size:1.6rem; margin-bottom:1rem; max-width:16ch;
  }
  .service-col p{
    color:var(--grey-600); font-size:1.02rem; margin-bottom:1rem;
  }
  .service-col .benefit{
    color:var(--black); font-weight:500; margin-bottom:2rem;
  }
  @media (max-width:820px){
    .services-split, .about-grid{grid-template-columns:1fr;}
    .service-col{border-right:none; border-bottom:1px solid var(--grey-300);}
    .service-col:last-child{border-bottom:none;}
  }

  /* ---------- How it works (two tracks) ---------- */
  .tracks{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-lg);
  }
  .track h3{
    font-size:1.15rem; margin-bottom:2rem;
    padding-bottom:1rem; border-bottom:1px solid var(--grey-300);
  }
  .step{
    display:flex; gap:1.25rem; margin-bottom:2rem;
  }
  .step:last-child{margin-bottom:0;}
  .step-num{
    flex-shrink:0;
    width:44px; height:44px; border-radius:50%;
    border:2px solid var(--black);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-head); font-weight:600; font-size:1rem;
  }
  .step-body h4{font-size:1.05rem; font-weight:600; margin-bottom:0.35rem;}
  .step-body p{color:var(--grey-600); font-size:0.98rem;}
  @media (max-width:820px){ .tracks{grid-template-columns:1fr; gap:var(--gap-xl);} }

  /* ---------- Why us (stat grid) ---------- */
  .why-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:0;
    border-top:1px solid var(--grey-300);
    border-left:1px solid var(--grey-300);
  }
  .why-item{
    padding:2.25rem 1.75rem;
    border-right:1px solid var(--grey-300);
    border-bottom:1px solid var(--grey-300);
  }
  .why-item .val{
    font-family:var(--font-head); font-weight:700; font-size:1.6rem;
    margin-bottom:0.6rem; display:block;
  }
  .why-item .label{color:var(--grey-600); font-size:0.95rem;}
  @media (max-width:900px){ .why-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .why-grid{grid-template-columns:1fr;} }

  /* ---------- FAQ ---------- */
  .faq-list{max-width:760px; margin-left:auto; margin-right:auto;}
  .faq-item{
    border-bottom:1px solid var(--grey-300);
  }
  .faq-q{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1.5rem 0; font-family:var(--font-body); font-size:1.05rem; font-weight:600;
    color:var(--black);
  }
  .faq-icon{
    flex-shrink:0; width:22px; height:22px; position:relative;
  }
  .faq-icon::before, .faq-icon::after{
    content:''; position:absolute; background:var(--black);
    top:50%; left:50%; transform:translate(-50%,-50%);
  }
  .faq-icon::before{width:14px; height:2px;}
  .faq-icon::after{width:2px; height:14px; transition:transform 0.2s ease;}
  .faq-item.open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
  .faq-a{
    max-height:0; overflow:hidden; transition:max-height 0.25s ease;
  }
  .faq-a p{color:var(--grey-600); padding-bottom:1.5rem; max-width:62ch; font-size:1rem;}

  /* ---------- Scroll reveal ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  .why-grid .reveal:nth-child(2){transition-delay:0.08s;}
  .why-grid .reveal:nth-child(3){transition-delay:0.16s;}
  .why-grid .reveal:nth-child(4){transition-delay:0.24s;}
  .services-split .reveal:nth-child(2){transition-delay:0.12s;}
  .tracks .reveal:nth-child(2){transition-delay:0.12s;}
  .faq-list .reveal:nth-child(2){transition-delay:0.05s;}
  .faq-list .reveal:nth-child(3){transition-delay:0.1s;}
  .faq-list .reveal:nth-child(4){transition-delay:0.15s;}
  .faq-list .reveal:nth-child(5){transition-delay:0.2s;}
  .faq-list .reveal:nth-child(6){transition-delay:0.25s;}
  .faq-list .reveal:nth-child(7){transition-delay:0.3s;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
  }


  /* ---------- Footer ---------- */
  footer{background:var(--black); color:var(--white); padding:var(--gap-lg) 0 2rem;}
  .footer-top{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem;
    padding-bottom:var(--gap-lg);
    border-bottom:1px solid #2a2a2a;
  }
  .footer-brand img{height:48px; margin-bottom:1.25rem;}
  .footer-brand p{color:#a9a9a9; font-size:0.95rem; max-width:32ch;}
  .footer-col h4{font-size:0.95rem; margin-bottom:1.1rem; color:#a9a9a9; font-weight:600;}
  .footer-col a, .footer-col span{
    display:block; font-size:0.95rem; color:#e6e6e6; margin-bottom:0.75rem;
  }
  .footer-col .placeholder{color:#777;}
  .footer-bottom{
    display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
    padding-top:1.75rem; font-size:0.85rem; color:#8a8a8a;
  }
  .footer-bottom a{margin-right:1.25rem; color:#8a8a8a;}
  .footer-bottom a:hover{color:var(--white);}
  @media (max-width:820px){ .footer-top{grid-template-columns:1fr 1fr; row-gap:2rem;} }
  @media (max-width:520px){ .footer-top{grid-template-columns:1fr;} }

/* ---------- Legal pages (Privacy Policy / Terms of Service) ---------- */
.legal-hero{
  padding:var(--gap-lg) 0 2.5rem;
  border-bottom:1px solid var(--grey-300);
}
.legal-hero h1{font-size:clamp(2rem,3.4vw,2.7rem); margin-bottom:0.75rem;}
.legal-hero .updated{color:var(--grey-600); font-size:0.98rem;}
.legal-body{
  max-width:760px;
  padding:var(--gap-lg) 1.75rem;
  margin:0 auto;
}
.legal-body h2{
  font-size:1.3rem; margin-top:2.75rem; margin-bottom:1rem;
}
.legal-body h2:first-child{margin-top:0;}
.legal-body p{
  color:var(--grey-900); font-size:1.02rem; line-height:1.7; margin-bottom:1.1rem;
}
.legal-body ul{
  margin:0 0 1.1rem; padding-left:1.4rem; color:var(--grey-900);
}
.legal-body li{margin-bottom:0.5rem; line-height:1.6; font-size:1.02rem;}
.legal-body a{text-decoration:underline; font-weight:500;}
.legal-back{
  display:inline-block; margin:0 1.75rem 0; max-width:760px;
}

/* ============================================================
   BRAND INTRO SPLASH — fully isolated component.
   Uses "bi-" prefixed class names throughout so nothing here can
   collide with any existing site style. Safe to delete this whole
   block (plus its HTML in index.html and brand-intro.js) to remove
   the feature entirely with zero impact on the rest of the site.

   Structure: #brand-intro is just a fixed full-screen positioning
   context (no visuals of its own). Inside it, .bi-bg is a separate
   white background layer that fades independently, and .bi-stage
   holds the two logo pieces so they can be measured, moved and
   resized (via JS, since the destination is the real header logo's
   live on-screen position) without ever being affected by the
   background's fade.
   ============================================================ */
#brand-intro{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none; /* purely decorative; never blocks the real site */
}
#brand-intro .bi-bg{
  position:absolute;
  inset:0;
  background:#ffffff;
  z-index:1;
  transition:opacity 1.1s ease-out;
}
#brand-intro .bi-bg.bi-bg-hide{
  opacity:0;
}
#brand-intro .bi-stage{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(1.25rem, 4vw, 2.5rem);
  transition:opacity 0.3s ease-out; /* used only by the reduced-motion
                                        and failsafe handoff paths */
}
#brand-intro .bi-stage.bi-stage-hide{
  opacity:0;
}
#brand-intro .bi-symbol{
  width:clamp(76px, 18vw, 140px);
  height:auto;
  overflow:visible;
  will-change:transform;
}
#brand-intro .bi-wordmark{
  width:clamp(170px, 34vw, 320px);
  height:auto;
  overflow:visible;
  will-change:transform;
}
#brand-intro .bi-ring{
  fill:none;
  stroke:#231f20;
  stroke-width:14.47px;
  stroke-dasharray:1344;
  stroke-dashoffset:1344;
  animation:bi-draw-ring 0.8s 0.2s ease-in-out forwards;
}
#brand-intro .bi-fillshape{
  fill:#231f20;
  stroke:#231f20;
  stroke-width:1px;
  opacity:0;
  transform-origin:229.88px 231.92px;
  transform:scale(0.9);
  animation:bi-fade-scale 0.6s 0.55s ease-out forwards;
}
#brand-intro .bi-wordmark{
  opacity:0;
  transform:translateY(10px);
  animation:bi-fade-rise 0.85s 1.05s ease-out forwards;
}
/* Fallback-only: used by brand-intro.js if the header logo's position
   can't be measured (see the failsafe path) — a plain fade of the
   whole overlay, identical to the intro's original ending. */
#brand-intro.bi-fadeout{
  animation:bi-overlay-fadeout 0.4s 0s ease-in forwards;
}

@keyframes bi-draw-ring{ to{ stroke-dashoffset:0; } }
@keyframes bi-fade-scale{ to{ opacity:1; transform:scale(1); } }
@keyframes bi-fade-rise{ to{ opacity:1; transform:translateY(0); } }
@keyframes bi-overlay-fadeout{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* Reduced motion: skip the draw/rise choreography entirely — a
   single quick fade in, a brief hold, then a simple crossfade
   handoff with no movement (handled in JS). Higher specificity
   (id + class) than the default rules above, so this safely
   overrides them without needing !important anywhere. */
#brand-intro.bi-reduced .bi-ring{
  stroke-dashoffset:0;
  animation:bi-simple-fade 0.3s ease-out forwards;
}
#brand-intro.bi-reduced .bi-fillshape{
  transform:none;
  animation:bi-simple-fade 0.3s ease-out forwards;
}
#brand-intro.bi-reduced .bi-wordmark{
  transform:none;
  animation:bi-simple-fade 0.3s ease-out forwards;
}
@keyframes bi-simple-fade{ from{ opacity:0; } to{ opacity:1; } }

@media (max-width:480px){
  #brand-intro .bi-stage{ gap:1.1rem; }
}

/* Header logo hiding, strictly scoped to the intro being active.
   Opacity only (never display:none), so the header logo's position
   and dimensions can still be measured via getBoundingClientRect()
   the whole time. The instant "intro-active" is removed from <body>
   at handoff (see brand-intro.js), this rule stops applying and the
   header logo's styling is exactly what it always was — nothing
   here persists afterward. */
body.intro-active .nav-logo img{
  opacity:0;
  transition:opacity 0.25s ease-out;
}


/* ============================================================
   ABOUT PAGE (about.html) — additive only; reuses existing tokens
   ============================================================ */
.eyebrow{
  font-family:var(--font-body); font-size:0.82rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--grey-600); margin-bottom:1.25rem;
}
.about-narrow{max-width:820px;}
.about-hero{padding-top:clamp(3.5rem,7vw,6.5rem);}
.about-hero h1{
  font-size:clamp(2.3rem,5vw,3.8rem); line-height:1.05;
  margin-bottom:var(--gap-lg); max-width:18ch;
}
.about-h2{font-size:clamp(1.9rem,3.4vw,2.7rem); margin-bottom:var(--gap-lg); max-width:20ch;}
.prose p{
  font-size:1.12rem; line-height:1.75; color:var(--grey-900); margin-bottom:1.4rem;
}
.prose p:last-child{margin-bottom:0;}
.prose p.emphasis{
  font-family:var(--font-head); font-weight:600; font-size:1.3rem; line-height:1.45;
  color:var(--black); padding-top:1.5rem; margin-top:2rem;
  border-top:1px solid var(--grey-300);
}
.pull-quote{
  margin:2.5rem 0 2.75rem; padding:2rem 0;
  border-top:2px solid var(--black); border-bottom:2px solid var(--black);
  font-family:var(--font-head); font-weight:600;
  font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.2; letter-spacing:-0.01em;
}
.founder-col h3{max-width:none; font-size:1.8rem;}
.founder-col .service-tag{margin-bottom:1rem;}
.founder-col .benefit{margin-bottom:0; padding-top:1.25rem; border-top:1px solid var(--grey-300);}
.diff-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--grey-300);}
.diff-list li{
  display:flex; gap:clamp(1.25rem,3vw,2.5rem);
  padding:2rem 0; border-bottom:1px solid var(--grey-300);
}
.diff-num{
  flex-shrink:0; width:2.5rem;
  font-family:var(--font-head); font-weight:600; font-size:1rem; color:var(--grey-600);
  padding-top:0.3rem;
}
.diff-list h3{font-size:1.3rem; margin-bottom:0.6rem;}
.diff-list p{color:var(--grey-600); font-size:1.02rem; line-height:1.65;}
.diff-list .fine-print{font-size:0.9rem; margin-top:0.75rem; font-style:italic;}
.value-list{margin:0; border-top:1px solid var(--grey-300);}
.value-list > div{
  display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.4fr);
  gap:1.5rem; padding:1.75rem 0; border-bottom:1px solid var(--grey-300);
}
.value-list dt{font-family:var(--font-head); font-weight:600; font-size:1.35rem;}
.value-list dd{margin:0; color:var(--grey-600); font-size:1.02rem; line-height:1.65;}
.about-cta{background:var(--black); color:var(--white); text-align:center;}
.about-cta h2{font-size:clamp(2rem,4vw,3rem); margin-bottom:1.25rem;}
.about-cta p{max-width:56ch; margin:0 auto 2.25rem; color:var(--grey-300); font-size:1.1rem;}
.about-cta-buttons{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}
@media (max-width:700px){
  .value-list > div{grid-template-columns:1fr; gap:0.5rem;}
  .diff-list li{gap:1rem;}
  .diff-num{width:2rem;}
}