:root{
    color-scheme:dark;
    --bg:#0a0d12;
    --surface:#12161d;
    --surface-2:#181e27;
    --line:#232a35;
    --mint:#6ee7b7;
    --amber:#e0b45a;
    --blue:#5b8def;
    --text:#e8ecef;
    --muted:#8892a0;
    --faint:#586070;
    --ease:cubic-bezier(.2,.7,.2,1);
    /* Height of the sticky header, used to offset scroll targets so they don't
       land underneath it. Measured in-browser at 1280px wide; re-measure if the
       nav's padding or control sizes change. */
    --header-h:76px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em;}
  /* Balance headings only; h4 keeps the body face it already had. */
  h1,h2,h3,h4{text-wrap:balance;}
  .mono{font-family:'JetBrains Mono',monospace;}
  address{font-style:normal;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  ::selection{background:var(--mint);color:#0a0d12;}

  /* Off-screen until focused. Hidden outright while the age gate is up: the gate
     is an opaque z-index:200 overlay, so a reachable skip link behind it would
     send focus somewhere the user cannot see. */
  .skip-link{
    position:fixed;top:-120px;left:12px;z-index:300;
    background:var(--mint);color:#06110c;
    padding:11px 20px;border-radius:0 0 8px 8px;
    font-size:13.5px;font-weight:500;
    transition:top .15s;
  }
  .skip-link:focus{top:0;}

  /* subtle noise / grid texture */
  .grid-bg{
    position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
  }

  /* NAV */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(10,13,18,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;max-width:1180px;margin:0 auto;}
  .logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;letter-spacing:0.01em;}
  .logo img{width:28px;height:28px;object-fit:contain;}
  footer .logo img{width:26px;height:26px;}
  .nav-right{display:flex;align-items:center;gap:22px;}
  .account-btn{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);border:1px solid var(--line);padding:9px 16px;border-radius:100px;transition:border-color .2s;}
  .account-btn:hover{border-color:var(--mint);}

  /* `B30`: below 760px the nav links hide and the header is just the logo plus
     the Sign In button. At 360px that right-hand cluster once ran past the
     viewport (documentElement.scrollWidth 406 vs innerWidth 360), so every page
     scrolled sideways. The room comes back from the nav's own side padding and
     the cluster's spacing, and #accountLabel is clipped past 10ch so a long
     first name cannot push it out again. Measured at 360x740 in headless
     Chrome; re-measure here if the controls grow. */
  @media (max-width:560px){
    nav{padding:18px 14px;}
    .logo{font-size:17px;gap:8px;}
    .logo img{width:24px;height:24px;}
    .nav-right{gap:8px;}
    .account-btn{padding:9px 11px;gap:6px;font-size:12px;white-space:nowrap;}
    #accountLabel{max-width:10ch;overflow:hidden;text-overflow:ellipsis;}
  }

  /* HERO */
  .hero{position:relative;padding:100px 32px 80px;overflow:hidden;}
  .hero-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mint);
    border:1px solid rgba(110,231,183,0.25);background:rgba(110,231,183,0.06);
    padding:6px 12px;border-radius:100px;margin-bottom:24px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint);animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
  .hero h1{font-size:56px;font-weight:600;line-height:1.05;margin-bottom:22px;}
  .hero h1 .accent{color:var(--mint);}
  .hero p{font-size:17px;color:var(--muted);max-width:460px;margin-bottom:36px;}
  .btn-row{display:flex;gap:14px;flex-wrap:wrap;}
  .btn{
    padding:14px 26px;border-radius:8px;font-size:14px;font-weight:500;
    display:inline-flex;align-items:center;gap:8px;
    transition:background-color .2s, border-color .2s, transform .2s;
    cursor:pointer;border:none;font-family:inherit;line-height:inherit;
  }
  .btn-primary{background:var(--mint);color:#06110c;}
  .btn-primary:hover{background:#8ff0c4;transform:translateY(-1px);}
  .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);}
  .btn-ghost:hover{border-color:var(--muted);}

  /* Home page: the Order button is the loudest thing on the page. */
  .btn-lg{padding:22px 48px;font-size:19px;border-radius:12px;}
  .btn-primary.btn-lg{box-shadow:0 12px 48px rgba(110,231,183,0.25);}
  .btn-ghost.btn-lg{padding:21px 32px;font-size:15px;}
  .nav-order{padding:12px 26px;font-size:15px;}
  .hero-center{text-align:center;padding:120px 32px 96px;}
  .hero-center h1{font-size:76px;line-height:1.02;letter-spacing:-0.02em;max-width:820px;margin:0 auto 24px;}
  .hero-center p{font-size:18px;max-width:520px;margin:0 auto 44px;}
  .hero-center .btn-row,.band-center .btn-row{justify-content:center;}
  .band-center{padding:64px 32px;text-align:center;}
  .band-ruled{border-top:1px solid var(--line);padding-bottom:96px;}
  .band-inner{max-width:640px;margin:0 auto;}
  .band-center h2{font-size:30px;font-weight:600;margin-bottom:14px;}
  .band-center p{color:var(--muted);font-size:16px;margin-bottom:14px;}
  .band-center .btn-row{margin-top:24px;}
  @media (max-width:760px){
    .hero-center{padding:56px 16px 56px;}
    .hero-center h1{font-size:40px;}
    .hero-center p{font-size:16px;margin-bottom:32px;}
    .hero-center .btn-row{flex-direction:column;}
    .btn-lg{width:100%;justify-content:center;padding:20px 24px;}
    .band-center{padding:48px 16px;}
    .band-center h2{font-size:26px;}
  }
  @media (max-width:560px){.nav-order{padding:11px 16px;font-size:14px;}}

  /* chain diagram */
  .chain-box{position:relative;height:420px;display:flex;align-items:center;justify-content:center;}
  .chain-box svg{width:100%;height:100%;overflow:visible;}
  .bond{stroke:var(--line);stroke-width:2;}
  .bond-active{stroke:var(--mint);stroke-width:2;opacity:0;animation:draw 2.4s ease forwards;}
  @keyframes draw{
    0%{stroke-dashoffset:120;opacity:0;}
    15%{opacity:1;}
    100%{stroke-dashoffset:0;opacity:1;}
  }
  .node{fill:var(--surface-2);stroke:var(--line);stroke-width:1.5;}
  .node-label{font-family:'JetBrains Mono',monospace;font-size:11px;fill:var(--text);text-anchor:middle;dominant-baseline:middle;font-weight:500;}
  .node.hot{fill:rgba(110,231,183,0.12);stroke:var(--mint);}
  .node.hot .node-label{fill:var(--mint);}
  .seq-tag{font-family:'JetBrains Mono',monospace;font-size:11px;fill:var(--faint);}

  /* TRUST BAR */
  .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 32px;background:var(--surface);}
  .trust-inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;}
  .trust-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);}
  .trust-item svg{width:16px;height:16px;stroke:var(--mint);flex-shrink:0;}

  /* SECTION HEADS */
  section{padding:100px 32px;position:relative;z-index:1;}
  .sec-head{max-width:600px;margin-bottom:56px;}
  .sec-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mint);margin-bottom:14px;letter-spacing:0.04em;}
  .sec-head h2{font-size:34px;font-weight:600;margin-bottom:14px;}
  .sec-head p{color:var(--muted);font-size:16px;}

  /* PROCESS */
  .process{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .steps{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
  .step{padding:0 32px;position:relative;}
  .step:not(:last-child)::after{
    content:'';position:absolute;top:22px;right:0;width:1px;height:calc(100% - 22px);background:var(--line);
  }
  .step-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--mint);margin-bottom:16px;}
  .step h3{font-size:19px;font-weight:600;margin-bottom:10px;}
  .step p{font-size:14px;color:var(--muted);}

  /* SCIENCE SPLIT */
  .science{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
  .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:32px;}
  .stat{background:var(--surface);padding:24px;display:flex;flex-direction:column;align-items:flex-end;}
  .stat-num{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:600;color:var(--mint);}
  .stat-label{font-size:12.5px;color:var(--muted);margin-top:4px;}
  @media (max-width:760px){.stat{align-items:flex-start;}}

  /* COA callout */
  .coa-panel{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:30px;}
  .coa-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:13px;}
  .coa-row:last-child{border-bottom:none;}
  .coa-row .lbl{color:var(--muted);}
  .coa-row .val{color:var(--mint);}

  /* FOOTER */
  footer{border-top:1px solid var(--line);padding:60px 32px 32px;}
  .footer-inner{max-width:1180px;margin:0 auto;}
  .footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:48px;}
  .footer-brand p{color:var(--muted);font-size:13px;max-width:280px;margin-top:12px;}
  /* <address> defaults to italic. Labelled "Mailing address" deliberately; this
     is a mail-forwarding suite, not a lab. */
  .footer-addr{
    color:var(--muted);font-size:13px;line-height:1.7;
    margin-top:16px;max-width:280px;
  }
  .footer-addr-label{
    display:block;color:var(--faint);font-size:11px;
    text-transform:uppercase;letter-spacing:0.05em;margin-bottom:5px;
  }
  .footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
  .footer-col h4{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:16px;}
  .footer-col a{display:block;font-size:14px;color:var(--text);margin-bottom:12px;opacity:0.85;}
  .footer-col a:hover{opacity:1;color:var(--mint);}
  .disclaimer{
    border-top:1px solid var(--line);padding-top:28px;font-size:12px;color:var(--faint);line-height:1.7;
  }

  /* OVERLAY AND PANEL HEAD (shared by the account modal) */
  .overlay{
    position:fixed;inset:0;background:rgba(6,8,11,0.6);backdrop-filter:blur(2px);
    z-index:90;opacity:0;pointer-events:none;transition:opacity .25s;
  }
  .overlay.open{opacity:1;pointer-events:auto;}
  .drawer-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line);}
  .drawer-head h3{font-size:17px;font-weight:600;}
  .icon-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;display:flex;}
  .icon-btn:hover{color:var(--text);}
  .btn-block{width:100%;justify-content:center;}

  /* PANEL SHELL, FIELDS, TOAST */
  /* `B5`: the panel is a dialog (role="dialog" + aria-modal, set in app.js),
     so a closed one has to be out of the tab order and out of the
     accessibility tree, not merely parked offscreen. visibility does both,
     and delaying it by the length of the slide keeps the close animation
     visible. .open is still the only state flag. */
  .modal{
    position:fixed;top:0;right:0;height:100%;width:460px;max-width:94vw;
    background:var(--surface);border-left:1px solid var(--line);z-index:96;
    display:flex;flex-direction:column;transform:translateX(100%);
    visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s;
    overflow-y:auto;overscroll-behavior:contain;
  }
  .modal.open{transform:translateX(0);visibility:visible;transition:transform .3s ease;}
  .modal-inner{padding:24px;}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;}
  .field input{
    width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;
    padding:10px 12px;color:var(--text);font-family:'Inter',sans-serif;font-size:13.5px;
  }
  /* Deliberately does not suppress the outline; doing so was what let this rule
     out-specificity the global :focus-visible ring below (0,2,1 beats 0,1,0).
     The border tint stays as a pointer affordance. */
  .field input:focus{border-color:var(--mint);}
  .field input[type=checkbox]{width:auto;margin:0;}
  .field-row{display:flex;gap:10px;}
  .field-row .field{flex:1;}
  .payment-note{
    background:rgba(110,231,183,0.06);border:1px solid rgba(110,231,183,0.2);border-radius:10px;
    padding:14px 16px;font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:20px;
  }
  .payment-note strong{color:var(--mint);}
  .toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--mint);color:#06110c;padding:12px 22px;border-radius:100px;
    font-size:13px;font-weight:500;z-index:99;opacity:0;pointer-events:none;
    transition:opacity .25s, transform .25s;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  /* ACCOUNT / AUTH PANEL */
  .auth-tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:8px;padding:4px;margin-bottom:22px;}
  .auth-tab{flex:1;text-align:center;padding:9px 0;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;background:none;border:none;font-family:'Inter',sans-serif;transition:background-color .15s, color .15s;}
  .auth-tab.active{background:var(--surface);color:var(--text);}
  .auth-panel{display:none;}
  .auth-panel.active{display:block;}
  .auth-note{font-size:12px;color:var(--faint);text-align:center;margin-top:16px;}
  .auth-link{display:block;margin:12px auto 0;background:none;border:none;color:var(--muted);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer;}
  .account-summary{padding:8px 0;}
  .account-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
  .account-row .lbl{color:var(--muted);}

  .acct-welcome{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:18px;}
  .account-nav{display:flex;flex-direction:column;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:6px;margin-bottom:22px;}
  .account-nav-item{
    text-align:left;padding:10px 14px;border-radius:7px;font-size:13.5px;font-weight:500;
    color:var(--muted);background:none;border:none;font-family:'Inter',sans-serif;cursor:pointer;
    transition:background-color .15s, color .15s;
  }
  .account-nav-item:hover{color:var(--text);}
  .account-nav-item.active{background:var(--surface);color:var(--mint);}
  .account-nav-item.logout{color:#e08a8a;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 7px 7px;padding-top:12px;}
  .account-nav-item.logout:hover{color:#f0a0a0;}
  .acct-panel{display:none;}
  .acct-panel.active{display:block;}

  @media (max-width:900px){
    .hero-inner{grid-template-columns:1fr;}
    .hero h1{font-size:38px;}
    .steps{grid-template-columns:1fr;gap:32px;}
    .step::after{display:none;}
    .science{grid-template-columns:1fr;}
    .stat-grid{margin-bottom:0;}
  }
  @media (max-width:600px){
    .trust-inner{flex-direction:column;}
    .footer-top{flex-direction:column;}
  }

  :focus-visible{outline:2px solid var(--mint);outline-offset:2px;}
  [hidden]{display:none !important;}

  /* Scoped to controls rather than body: a page-wide rule would also remove
     double-tap-to-zoom, which some low-vision users rely on. */
  a,button,input,select,textarea{touch-action:manipulation;}

  /* Figures that get read down a column or compared against each other. */
  .stat-num,.coa-row .val,.lot-table{font-variant-numeric:tabular-nums;}

  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;}
    /* Neither animation nor transition covers scroll behaviour. */
    html{scroll-behavior:auto;}
    /* .bond-active is opacity:0 in its base rule and only reaches opacity:1
       through the draw animation; killing that above would leave the hero
       chain's active bonds permanently invisible. */
    .bond-active{opacity:1;}
  }

  /* ============================================================
     INTERIOR PAGES  (added when the single-page site was split)
     ============================================================ */
  main{position:relative;z-index:1;}

  /* Pre-existing bug, fixed here because it now spans every page: .account-btn
     sets light text but no background, so the UA ButtonFace default rendered
     the label near-white on near-white. */
  .account-btn{background:transparent;cursor:pointer;}

  .page-head{max-width:1180px;margin:0 auto;padding:70px 32px 8px;}
  .page-head h1{font-size:40px;font-weight:600;line-height:1.1;margin:14px 0 16px;}
  .page-head p{color:var(--muted);font-size:16px;max-width:640px;}

  .prose{max-width:1180px;margin:0 auto;padding:36px 32px 84px;}
  .prose h2{font-size:22px;font-weight:600;margin:38px 0 12px;}
  .prose h2:first-child{margin-top:0;}
  .prose p{color:var(--muted);font-size:15px;line-height:1.75;margin-bottom:14px;max-width:760px;}
  .prose ul{color:var(--muted);font-size:15px;line-height:1.85;margin:0 0 18px 20px;max-width:760px;}
  /* :not(.btn): an anchor styled as a button keeps the button's own colours.
     Without it this rule outranks .btn-primary and renders mint text on mint. */
  .prose a:not(.btn){color:var(--mint);}
  .prose a:not(.btn):hover{text-decoration:underline;}

  /* Policy pages: refund-policy, terms-and-conditions, shipping */
  .updated{font-size:12.5px;color:var(--faint);margin:0 0 6px;}
  .policy-sec{background:var(--surface);border:1px solid var(--line);border-radius:14px;
              padding:26px 28px;margin-bottom:16px;max-width:760px;}
  .policy-sec h2{font-size:17px;font-weight:600;margin:0 0 10px;}
  .policy-sec .sec-num{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;
                       color:var(--mint);margin-bottom:8px;}
  .policy-sec strong{color:var(--text);}
  .policy-sec p:last-child{margin-bottom:0;}
  /* keep one 760px reading column past the last policy card (shipping.html only:
     the sibling combinator matches nothing on pages without .policy-sec) */
  .policy-sec ~ .info-grid,.policy-sec ~ .faq-row{max-width:760px;}

  .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;margin:26px 0;}
  .info-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;}
  .info-card h3{font-size:15px;font-weight:600;margin-bottom:8px;}
  .info-card p,.info-card address{font-size:13.5px;color:var(--muted);line-height:1.65;margin:0;}
  .info-card .mono{color:var(--mint);font-size:13px;}
  a.info-card{display:block;transition:border-color .2s;}
  a.info-card:hover{border-color:var(--mint);}

  /* About: the chain as table of contents, then as the reading spine */
  .about-chain{max-width:1180px;margin:0 auto;padding:28px 32px 0;}
  .about-chain svg{width:816px;max-width:100%;height:auto;display:block;overflow:visible;}
  .about-chain .bond-active{animation-duration:.9s;}
  .about-chain .node-label{fill:var(--muted);font-size:12px;}
  .about-chain a:hover .node,.about-chain a:focus-visible .node{stroke:var(--mint);fill:rgba(110,231,183,0.12);}
  .about-chain a:hover .node-label,.about-chain a:focus-visible .node-label{fill:var(--mint);}
  .about-chain a:focus-visible{outline:none;}
  .node.amber{stroke:var(--amber);fill:rgba(224,180,90,0.12);}
  .about-spine{padding-top:56px;}
  .about-sec{position:relative;margin-left:9px;padding:0 0 44px 40px;border-left:2px solid var(--line);}
  .about-sec:last-child{border-left-color:transparent;padding-bottom:0;}
  .about-sec::before{content:"";position:absolute;left:-11px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--line);}
  .about-sec.amber::before{border-color:var(--amber);background:rgba(224,180,90,0.12);}
  .about-sec.amber h2{color:var(--amber);}
  .about-sec.end::before{border-color:var(--mint);background:rgba(110,231,183,0.12);}
  .about-sec h2{margin:0 0 10px;}
  .about-sec p{max-width:66ch;}
  @media (max-width:600px){.about-chain{display:none;}}

  .table-scroll{overflow-x:auto;margin:26px 0;}
  .lot-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px;}
  .lot-table th{
    text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;
    color:var(--faint);text-transform:uppercase;letter-spacing:0.07em;
    padding:0 14px 11px;border-bottom:1px solid var(--line);white-space:nowrap;
  }
  .lot-table td{padding:14px;border-bottom:1px solid var(--line);color:var(--muted);}
  .lot-table td.name{color:var(--text);font-weight:500;}
  .lot-table td.pure{color:var(--mint);font-family:'JetBrains Mono',monospace;}
  .lot-table a{color:var(--mint);}
  .lot-table a:hover{text-decoration:underline;}
  .lot-table tr:hover td{background:var(--surface);}

  .faq-row{border-bottom:1px solid var(--line);padding:22px 0;max-width:820px;}
  .faq-row:last-child{border-bottom:none;}
  .faq-row h3{font-size:15px;font-weight:600;margin-bottom:8px;}
  .faq-row p{font-size:14px;color:var(--muted);line-height:1.75;margin:0;}

  .split{display:grid;grid-template-columns:1.05fr 0.95fr;gap:44px;align-items:start;}
  .form-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;}
  .form-card h2{font-size:18px;font-weight:600;margin-bottom:18px;}
  .field textarea{
    width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;
    padding:10px 12px;color:var(--text);font-family:'Inter',sans-serif;font-size:13.5px;
    min-height:120px;resize:vertical;
  }
  .field textarea:focus{border-color:var(--mint);}
  .field select{
    width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;
    padding:10px 12px;color:var(--text);font-family:'Inter',sans-serif;font-size:13.5px;
  }
  .field select:focus{border-color:var(--mint);}

  /* order.html: the pay and password blocks */
  .payment-note p{margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.6;}
  .payment-note p strong{color:var(--text);}
  .order-card{
    max-width:640px;margin:0 auto 20px;padding:22px 28px;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:14px;
    border:1px solid rgba(110,231,183,0.35);border-radius:16px;
    background:linear-gradient(180deg,rgba(110,231,183,0.07),rgba(110,231,183,0.02));
  }
  .prose .order-card p{margin:0;max-width:none;}
  .order-card-pw{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;}
  .order-card-label{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--text);}
  .order-card .mono{font-size:22px;color:var(--text);background:var(--bg);border:1px dashed rgba(110,231,183,0.45);padding:6px 14px;border-radius:8px;}
  .order-card .btn-lg{padding:18px 44px;font-size:20px;gap:10px;}
  .prose .order-card .order-card-note{color:#d7dde3;font-size:15px;line-height:1.5;}
  .payment-note+p{margin-top:18px;}
  .btn-ghost.is-copied{border-color:var(--mint);color:var(--mint);}
  /* .steps was built for the homepage band; in the prose column the 32px side
     padding pushed the step headings past the h2 above them. */
  .prose .steps{margin:22px 0 8px;}
  .prose .step{padding:0 24px 0 0;}
  .prose .step:not(:last-child)::after{right:12px;}
  .btn-arrow{display:inline-block;transition:transform .2s;}
  .btn:hover .btn-arrow{transform:translateX(4px);}
  /* Motion only when the visitor has not asked for less. The reveal starts at
     opacity:0, so it must never reach the reduced-motion block above, where
     animation:none would leave the steps invisible (the .bond-active case). */
  @media (prefers-reduced-motion:no-preference){
    @keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
    @keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(110,231,183,0);}50%{box-shadow:0 0 0 6px rgba(110,231,183,0.08);}}
    .prose .step{animation:rise .5s ease both;}
    .prose .step:nth-child(2){animation-delay:.12s;}
    .prose .step:nth-child(3){animation-delay:.24s;}
    #formAccess{animation:glow 3s ease-in-out 3;}

    /* Page to page: the header stays put while the content crossfades up.
       Cross-document view transitions; browsers without them just navigate. */
    @view-transition{navigation:auto;}
    header{view-transition-name:site-header;}
    @keyframes vt-out{to{opacity:0;transform:translateY(-6px);}}
    @keyframes vt-in{from{opacity:0;transform:translateY(10px);}}
    ::view-transition-old(root){animation:vt-out .18s var(--ease) both;}
    ::view-transition-new(root){animation:vt-in .32s var(--ease) both;}

    /* Page entrance: the head of each page rises in, staggered. */
    .page-head > *,.hero > *{animation:rise .6s var(--ease) both;}
    .page-head > :nth-child(2),.hero > :nth-child(2){animation-delay:.06s;}
    .page-head > :nth-child(3),.hero > :nth-child(3){animation-delay:.12s;}
    .page-head > :nth-child(n+4),.hero > :nth-child(n+4){animation-delay:.18s;}

    /* Scroll reveal, driven by the scroll position itself (no JS). Where
       view timelines are unsupported the content simply sits still. */
    @supports (animation-timeline:view()){
      @keyframes reveal{from{opacity:0;transform:translateY(24px);}}
      .info-card,.faq-row,.stat,.coa-row,.lot-table tbody tr,.band-center,.policy-sec{
        animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 60%;
      }
      /* The header darkens and lifts over the first 80px of scroll. */
      @keyframes header-settle{to{background:rgba(10,13,18,0.96);box-shadow:0 8px 30px rgba(0,0,0,0.35);}}
      header{animation:header-settle linear both;animation-timeline:scroll();animation-range:0 80px;}
    }

    /* Hover: small lifts and glows, transform and opacity only. */
    .btn-primary{transition:background-color .2s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease);}
    .btn-primary:hover{box-shadow:0 8px 28px rgba(110,231,183,0.28);}
    .logo img{transition:transform .35s var(--ease);}
    .logo:hover img{transform:rotate(-12deg) scale(1.06);}
    .info-card{transition:border-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease);}
    a.info-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.35),0 0 0 1px rgba(110,231,183,0.15);}
    .footer-col a{background:linear-gradient(var(--mint),var(--mint)) 0 100%/0 1px no-repeat;width:fit-content;transition:background-size .25s var(--ease),color .2s,opacity .2s;}
    .footer-col a:hover{background-size:100% 1px;}
  }

  @media (max-width:860px){
    .split{grid-template-columns:1fr;gap:32px;}
    .page-head h1{font-size:31px;}
    .page-head{padding:48px 32px 8px;}
  }

/* The Coming Soon badge on the COA links (coa-library, new-lots). */
.coming-soon { color:var(--muted); font-size:12px; white-space:nowrap; }