:root{
    --c:#9ca5c0;   /* light slate */
    --m:#5a6d95;   /* slate */
    --y:#e1e4ec;   /* neutral */
    --k:#2e3338;   /* ink */
    --muted:#6e757b;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  section[id]{ scroll-margin-top:80px; }
  body{
    font-family:"Segoe UI", Helvetica, Arial, sans-serif;
    background:#fbfbf9; color:var(--k); line-height:1.6;
  }
  .display{
    font-family:"Segoe UI", Helvetica, Arial, sans-serif;
    font-weight:800; letter-spacing:-.5px; line-height:1.08;
  }
  .wrap{ max-width:1020px; margin:0 auto; padding:0 24px; }

  /* CMYK registration strip */
  .cmykbar{ display:flex; height:8px; }
  .cmykbar div{ flex:1; }
  .cmykbar .bc{ background:#5a6d95; } .cmykbar .bm{ background:#7b8aab; }
  .cmykbar .by{ background:#9ca5c0; } .cmykbar .bk{ background:#e1e4ec; }

  header{
    background:#fff; border-bottom:2px solid var(--m);
    position:sticky; top:0; z-index:10;
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; }
  .logo{ text-decoration:none; color:var(--k); font-size:24px; display:inline-flex; align-items:baseline; gap:6px; }
  .logo .bill{ color:var(--k); font-weight:300; }
  .logo .pop{
    color:var(--m); background:none; padding:0;
    border:none; box-shadow:none;
    transform:none; display:inline-block; font-weight:600;
  }
  .cta-sm{
    text-decoration:none; color:var(--k); background:#fff;
    border:2px solid var(--k); box-shadow:3px 3px 0 var(--k);
    font-weight:700; font-size:14px; padding:9px 18px;
    transition:transform .08s, box-shadow .08s; display:inline-block;
  }
  .cta-sm:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--k); }
  .nav .navlinks{ margin-left:auto; display:flex; align-items:center; gap:18px; }
  .nav a.navlink{
    text-decoration:none; color:var(--k); font-weight:700; font-size:14px;
    padding:6px 2px; border-bottom:2px solid transparent;
  }
  .nav a.navlink:hover{ border-bottom-color:var(--m); }
  .cta-sm.solid{ background:var(--k); color:#fff; box-shadow:3px 3px 0 var(--m); }
  .cta-sm.solid:hover{ box-shadow:1px 1px 0 var(--m); }

  /* HERO */
  .hero{ padding:64px 0 56px; }
  .badge{
    display:inline-block; background:#fff; color:var(--k);
    border:2px solid var(--k);
    font-weight:700; font-size:13px; letter-spacing:.3px;
    padding:6px 14px; margin-bottom:32px;
  }
  .badge::before{
    content:""; display:inline-block; width:10px; height:10px;
    background:var(--c); margin-right:9px;
  }
  h1{
    font-size:clamp(36px, 6.5vw, 68px); max-width:840px; margin-bottom:24px;
  }
  .sub{
    font-size:clamp(17px, 2.2vw, 20px); font-weight:500; color:var(--muted);
    max-width:620px; margin-bottom:14px;
  }
  .cta{
    display:inline-block; text-decoration:none; color:#fff; background:var(--k);
    border:2px solid var(--k); box-shadow:4px 4px 0 var(--c);
    font-weight:800; font-size:18px; letter-spacing:.2px;
    padding:16px 36px; transition:transform .08s, box-shadow .08s;
  }
  .cta:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--c); }
  .hero .note{ margin-top:18px; font-size:14px; font-weight:600; color:var(--muted); }

  /* VALUES */
  .values{ padding:48px 0 64px; }
  .values h2{ font-size:clamp(26px,4vw,36px); margin-bottom:40px; }
  .values h2 span{ box-shadow:inset 0 -14px 0 rgba(156,165,192,.45); padding:0 4px; }
  .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
  @media (max-width:820px){ .grid{ grid-template-columns:1fr; } }
  .card{
    background:#fff; border:2px solid var(--k); box-shadow:4px 4px 0 var(--k);
    padding:30px 26px; position:relative;
  }
  .card .k-chip{
    font-weight:800; font-size:18px;
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    border:2px solid var(--k); color:var(--k); margin-bottom:18px;
  }
  .card:nth-child(1) .k-chip{ background:var(--c); }
  .card:nth-child(2) .k-chip{ background:var(--y); }
  .card:nth-child(3) .k-chip{ background:var(--m); color:#fff; }
  .card:nth-child(4) .k-chip{ background:var(--k); color:#fff; }
  .card h3{ font-weight:800; font-size:19px; margin-bottom:12px; line-height:1.25; }
  .card p{ font-size:15px; color:var(--muted); }

  /* MISSION */
  .mission{ background:#fff; color:var(--k); padding:56px 0 64px; }
  .mission .eyebrow{
    font-size:13px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase;
    color:var(--m); margin-bottom:24px;
  }
  .mission blockquote{
    font-size:clamp(28px, 4.2vw, 46px); font-weight:800; line-height:1.22;
    letter-spacing:-.5px; max-width:900px;
  }
  .mission blockquote em{ font-style:normal; color:var(--m); }
  .mission .closer{ margin-top:28px; font-size:clamp(19px,2.5vw,26px); font-weight:800; }
  .mission .minibar{ display:flex; width:180px; height:10px; margin-top:36px; }
  .mission .minibar div{ flex:1; }

  /* NUMBERS */
  .numbers{ background:#f7f7f9; border-top:2px solid var(--k); border-bottom:2px solid var(--k); padding:56px 0 64px; }
  .numbers h2{ font-size:clamp(26px,4vw,36px); margin-bottom:12px; }
  .numbers h2 span{ box-shadow:inset 0 -14px 0 rgba(156,165,192,.45); padding:0 4px; }
  .numbers .lede{ font-size:16px; color:var(--muted); font-weight:500; max-width:640px; margin-bottom:40px; }
  .qgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-bottom:56px; }
  @media (max-width:820px){ .qgrid{ grid-template-columns:1fr; } }
  .bubble{ background:#fff; border:2px solid var(--k); box-shadow:4px 4px 0 var(--k); padding:24px 22px; position:relative; }
  .bubble:nth-child(odd){ transform:rotate(-.6deg); }
  .bubble:nth-child(even){ transform:rotate(.5deg); }
  .bubble .q{ display:inline-block; font-weight:800; font-size:18px; font-style:italic; padding:4px 12px; border:2px solid var(--k); margin-bottom:14px; }
  .bubble:nth-child(1) .q{ background:var(--y); }
  .bubble:nth-child(2) .q{ background:var(--c); }
  .bubble:nth-child(3) .q{ background:var(--m); color:#fff; }
  .bubble:nth-child(4) .q{ background:var(--k); color:#fff; }
  .bubble p{ font-size:15px; color:var(--muted); }
  .numbers h3{ font-weight:800; font-size:clamp(20px,3vw,26px); margin-bottom:20px; }
  .ratewrap{ overflow-x:auto; background:#fff; border:2px solid var(--k); box-shadow:4px 4px 0 var(--k); margin-bottom:14px; }
  .rates{ width:100%; border-collapse:collapse; font-size:15px; min-width:640px; }
  .rates th{ text-align:left; font-size:13px; letter-spacing:.5px; text-transform:uppercase; border-bottom:2px solid var(--k); padding:14px 16px; background:#fff; }
  .rates td{ padding:13px 16px; border-bottom:1px solid #e2e2e6; font-weight:500; }
  .rates tr:last-child td{ border-bottom:none; }
  .rates td.total{ font-weight:800; background:rgba(255,242,0,.35); }
  .numbers .fn{ font-size:13px; color:var(--muted); max-width:820px; margin-bottom:48px; }
  .aud{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
  .trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  @media (max-width:820px){ .trio{ grid-template-columns:1fr; } }
  @media (max-width:820px){ .aud{ grid-template-columns:1fr; } }
  .aud .card h3, .numbers .card h3{ font-size:19px; margin-bottom:12px; }
  .numbers .closer{ margin-top:44px; font-weight:800; font-size:clamp(19px,2.6vw,25px); max-width:860px; }
  .numbers .closer em{ font-style:normal; color:var(--m); }

  /* WAITLIST */
  .waitlist{ background:var(--k); color:#fff; padding:64px 0; }
  .waitlist .wrap{ text-align:center; }
  .waitlist h2{ font-size:clamp(30px,5vw,48px); margin-bottom:16px; }
  .waitlist h2 .pow{ color:var(--c); }
  .waitlist p{ color:#d9d9d9; font-weight:500; max-width:560px; margin:0 auto 36px; font-size:17px; }
  .form{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; max-width:560px; margin:0 auto; }
  .form input{
    flex:1 1 280px; padding:15px 18px; font-size:16px; font-weight:500;
    border:2px solid #fff; background:#fff; color:var(--k); outline:none;
  }
  .form input:focus{ border-color:var(--c); box-shadow:0 0 0 3px rgba(156,165,192,.45); }
  .form button{
    padding:15px 30px; font-size:16px; font-weight:800; cursor:pointer;
    background:var(--c); color:var(--k); border:2px solid var(--c);
    transition:transform .08s;
  }
  .form button:hover{ transform:translate(1px,1px); }
  .waitlist .fine{ margin-top:20px; font-size:13px; color:#9a9a9a; font-weight:500; }
  .thanks{
    display:none; margin:24px auto 0; max-width:560px; font-size:15px; font-weight:600;
    background:#fff; color:var(--k); padding:14px 18px;
  }

  footer{ padding:40px 0 48px; text-align:center; font-size:14px; font-weight:500; color:var(--muted); }
  footer a{ color:var(--k); font-weight:700; text-decoration:none; border-bottom:2px solid var(--m); }
  .reg{ letter-spacing:6px; font-size:15px; margin-top:14px; font-weight:800; }
  .reg .rc{ color:var(--c); } .reg .rm{ color:var(--m); } .reg .ry{ color:#d4c500; } .reg .rk{ color:var(--k); }
  /* Section ledes, FAQ, form select, and mobile nav */
  .values .lede{ font-size:16px; color:var(--muted); font-weight:500; max-width:680px; margin:-24px 0 40px; }
  #faq .card h3{ font-size:17px; }
  #about p{ font-size:18px; font-weight:500; max-width:720px; margin-bottom:18px; }
  #about .portrait{
    float:right; width:300px; max-width:42%; height:auto;
    margin:6px 0 18px 32px; border:2px solid var(--k); box-shadow:6px 6px 0 var(--k);
  }
  @media (max-width:640px){ #about .portrait{ float:none; width:100%; max-width:100%; margin:0 0 24px; } }
  #about .punch, #datasafe .punch, #states .punch, #platform .punch{ font-weight:800; font-size:20px; }
  .bigpunch{
    font-weight:800; letter-spacing:-.5px; line-height:1.08;
    margin-top:44px; white-space:nowrap; font-size:clamp(14px,4.2vw,44px);
  }
  #states .punch, #platform .punch{ margin-top:56px; max-width:860px; }
  #states .punch em, #platform .punch em{ font-style:normal; color:var(--m); }
  #about .aside{ color:var(--muted); font-style:italic; }
  .values .card p a, .values .lede a{ color:var(--k); font-weight:700; text-decoration:none; border-bottom:2px solid var(--m); }
  .form select{
    flex:1 1 100%; padding:15px 18px; font-size:16px; font-weight:500; font-family:inherit;
    border:2px solid #fff; background:#fff; color:var(--k); outline:none;
  }
  .form select:focus{ border-color:var(--c); box-shadow:0 0 0 3px rgba(156,165,192,.45); }
  @media (max-width:640px){ .nav .navsec{ display:none; } }