/* ===========================================================
   ChromaCard — site.css
   Ink and paper is the system. Teal is the scan.

   Two kinds of surface:
   - "ink"  (--ink / --on-ink) is the brand-navy band. Constant
     across light and dark; it was already dark.
   - "a"    (--bg-a / --text-a) is the other surface. White in
     light mode, near-black in dark. Deliberately NOT the brand
     navy in dark mode, so the two dark surfaces stay distinct
     from each other instead of converging into one tone.

   All pairs verified against WCAG AA (4.5:1). Lowest is 5.69:1.
   2026-10-01: re-checked against the locked text rule (A15: WCAG 2 AA
   for typical vision and the three simulated color-blindness types,
   worst viewer counts). Light mode's legal-page numbers (teal on white,
   1.94) and the check marker on the green callout (4.33) failed; they now
   use --num and a darker --mark-good / --arrow, #197263. Lowest text pair
   site-wide is now the cross marker, 4.55.
   =========================================================== */

:root{
  --ink:#122354;
  --teal:#39C6B3;
  --paper:#ffffff;

  /* Brand ink band — constant across schemes */
  --on-ink:#E4E9F7;
  --on-ink-dim:#A9B4D6;

  /* Adaptive surface — light mode */
  --bg-a:#ffffff;
  --text-a:#122354;
  --text-a-dim:#55618A;
  --rule-a:rgba(18,35,84,.14);
  --bg-tint:#EFFAF9;

  /* Callout system — distinct per type, not just a border color, so the
     four kinds stay visually distinguishable without reading the text.
     Verified: body text 13.4-13.5:1. Markers, worst viewer (A15): check and
     arrow #197263 4.81-5.34, cross #92600B 4.55. */
  --bg-callout-green:#E8F5EC;
  --bg-callout-warn:#FBF1E0;
  --mark-good:#197263;
  --mark-warn:#92600B;
  --arrow:#197263;
  --num:#197263;      /* legal contents and section numbers: teal text on light surfaces */

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Card display widths. These govern QR legibility on screen: the QR is
     ~35% of a whole-phone image's width, so the slot width is what decides
     how many pixels each QR module gets. Do not shrink these without
     re-testing a scan. See CC_website_build.md. */
  --card-hero:440px;
  --card-gallery:440px;

  --shell:72rem;
  --gutter:clamp(1.5rem,5vw,3rem);
  --band:clamp(4rem,9vw,7rem);
  --measure:34rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg-a:#0B1220;
    --text-a:#EEF1FB;
    --text-a-dim:#93A0C6;
    --rule-a:rgba(255,255,255,.14);
    --bg-tint:#0E2420;

    /* Verified: body text 14.5-14.8:1, markers 9.26-9.35:1, arrow 8.83:1. */
    --bg-callout-green:#0E2417;
    --bg-callout-warn:#241D0C;
    --mark-good:#5FD99A;
    --mark-warn:#F0B94A;
    --arrow:#39C6B3;
    --num:#39C6B3;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light dark}
body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--text-a);
  background:var(--bg-a);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

h1,h2{margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.6vw,4.25rem);line-height:1.04;letter-spacing:-.028em;font-weight:700}
h2{font-size:clamp(1.75rem,3.2vw,2.4rem);line-height:1.14;letter-spacing:-.02em;font-weight:700}
p{margin:0 0 1.15em;max-width:var(--measure)}
p:last-child{margin-bottom:0}
.lead{font-size:1.1875rem;line-height:1.55;max-width:32rem}
a{color:inherit}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band)}
.ink{background:var(--ink);color:var(--paper)}
.ink h1,.ink h2{color:var(--paper)}
.ink p{color:var(--on-ink)}
.tint{background:var(--bg-tint)}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--teal);color:var(--ink);
  padding:.7rem 1.1rem;z-index:50;font-weight:650;border-radius:0 0 3px 0}
.skip:focus{left:0}

/* ---- header ---- */
.masthead{background:var(--ink);padding-block:1.15rem}
.masthead .shell{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.wordmark{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--paper);
  font-weight:650;letter-spacing:-.01em;font-size:1.0625rem}
.wordmark img{width:30px;height:30px}
.masthead a.jump{color:var(--teal);text-decoration:none;font-size:.9375rem;font-weight:550;
  border-bottom:1px solid transparent;padding-bottom:2px}
.masthead a.jump:hover{border-bottom-color:var(--teal)}

/* ---- hero: the card breaks the ink/paper boundary ---- */
.hero{position:relative;z-index:2;padding-bottom:var(--band)}
.hero .shell{display:grid;grid-template-columns:minmax(0,1fr) var(--card-hero);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{margin-bottom:1.5rem}
.hero .cta-row{margin-top:2rem}
.hero .fineprint{margin-top:1.5rem;font-size:.9375rem;color:var(--on-ink-dim)}
.heroCard{margin-bottom:calc(-1 * var(--band) - 2.5rem);justify-self:end;width:100%}
.after-hero{position:relative;z-index:1;padding-top:calc(var(--band) + 3rem)}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--teal);color:var(--ink);
  font:inherit;font-weight:650;font-size:1.0625rem;
  border:0;border-radius:2px;padding:.85rem 1.6rem;cursor:pointer;text-decoration:none}
.btn:hover{background:#2fb3a1}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---- block 2 ---- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2rem,5vw,4rem);align-items:start}
.qrpanel{width:100%;border-radius:4px}
/* While the QR panel is commented out of index.php, block 2 runs full width
   instead of leaving a 320px hole. Re-enabling the panel undoes this on its own. */
.split:not(:has(.qrpanel)){grid-template-columns:minmax(0,1fr)}

/* ---- block 3 gallery: adapts to 1-4 cards, intentional at any count ---- */
.gallery{display:grid;gap:1.5rem;margin-top:2.75rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.gallery.count-1{grid-template-columns:minmax(0,var(--card-gallery))}
.gallery.count-2{grid-template-columns:repeat(2,minmax(0,280px))}
.gallery figure{margin:0}
.gallery img{width:100%;border-radius:3px}

/* ---- block 4 ---- */
.fork p{font-size:clamp(1.125rem,1.9vw,1.3125rem);line-height:1.5;max-width:40rem}
.fork p+p{border-left:2px solid var(--teal);padding-left:1.5rem;margin-top:2rem}
.fork h2{margin-bottom:1.75rem;max-width:20rem}

/* ---- block 5 ---- */
.nolist{list-style:none;margin:2.25rem 0 2.5rem;padding:0;max-width:40rem}
.nolist li{display:grid;grid-template-columns:9px 1fr;gap:1.1rem;align-items:start;
  padding-block:.9rem;border-top:1px solid var(--rule-a)}
.nolist li:last-child{border-bottom:1px solid var(--rule-a)}
.nolist li::before{content:"";width:9px;height:9px;background:var(--teal);margin-top:.55rem}
.nolist strong{font-weight:650}
.patent{margin-top:2.25rem;font-size:.9375rem;color:var(--text-a-dim)}

/* ---- block 6 form ---- */
.form{margin-top:2.5rem;max-width:34rem}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field span{font-size:.875rem;color:var(--on-ink-dim)}
.field input{font:inherit;font-size:1rem;color:var(--paper);background:transparent;
  border:1px solid rgba(255,255,255,.32);border-radius:2px;padding:.7rem .8rem}
.field input:focus-visible{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent}
fieldset{border:0;margin:1.5rem 0 0;padding:0}
legend{font-size:.875rem;color:var(--on-ink-dim);padding:0;margin-bottom:.6rem}
.pills{display:flex;gap:.6rem;flex-wrap:wrap}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pill span{border:1px solid rgba(255,255,255,.32);border-radius:2px;padding:.55rem 1.1rem;
  font-size:.9375rem;color:var(--paper)}
.pill input:checked+span{background:var(--teal);border-color:var(--teal);color:var(--ink);font-weight:600}
.pill input:focus-visible+span{outline:2px solid var(--teal);outline-offset:2px}
.form .btn{margin-top:1.75rem}
.confirm{margin-top:1.5rem;font-size:.9375rem;color:var(--on-ink-dim);max-width:34rem}
.confirm code{font:inherit}
.formerror{margin-top:1.25rem;padding:.75rem 1rem;border-left:2px solid var(--teal);
  font-size:.9375rem;color:var(--on-ink);max-width:34rem}

/* ---- FAQ ---- */
.faq{margin-top:2.25rem;max-width:44rem}
.faq details{border-top:1px solid var(--rule-a)}
.faq details:last-of-type{border-bottom:1px solid var(--rule-a)}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 2.5rem 1.1rem 0;position:relative;
  font-weight:600;font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{content:"";position:absolute;right:.35rem;top:50%;background:var(--teal)}
.faq summary::before{width:13px;height:2px;margin-top:-1px}
.faq summary::after{width:2px;height:13px;margin-top:-6.5px;right:.85rem}
.faq details[open] summary::after{opacity:0}
.faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.faq p{padding-bottom:1.35rem;max-width:40rem;color:var(--text-a-dim)}

/* ---- footer ---- */
.foot{padding-block:3.5rem}
.foot .shell{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.foot img{width:36px;height:36px;margin-bottom:.9rem}
.tagline{font-size:1.0625rem;color:var(--paper);font-weight:600;letter-spacing:-.01em}
.footlines{font-size:.9375rem;color:var(--on-ink-dim);line-height:1.9;text-align:right}
.footlines a{color:var(--on-ink);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.footlines a:hover{color:var(--teal);border-bottom-color:var(--teal)}

/* ---- short pages: thanks, 404 ---- */
.short{min-height:52vh;display:flex;align-items:center}
.short h1{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:1.25rem}
.short p{font-size:1.1875rem;color:var(--text-a-dim);max-width:32rem}
.short .btn{margin-top:2rem}

/* ===========================================================
   Legal pages — v5 markup reflowed. Wording untouched.
   =========================================================== */
.legal{padding-block:clamp(3rem,6vw,5rem)}
.legal .doc-hero{border-bottom:1px solid var(--rule-a);padding-bottom:2rem;margin-bottom:2.5rem}
.legal .hero-title{font-size:clamp(2rem,4.2vw,3rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.legal .hero-sub{margin-top:.75rem;color:var(--text-a-dim);font-size:.9375rem}
.legal .hero-meta{margin-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.legal .badge{display:inline-block;border:1px solid var(--rule-a);border-radius:2px;
  padding:.25rem .6rem;font-size:.8125rem;color:var(--text-a-dim)}
.legal .content{max-width:44rem}
.legal .toc-wrap{background:var(--bg-tint);padding:1.5rem;border-radius:3px;margin-bottom:2.5rem}
.legal .toc-title{font-weight:650;margin-bottom:.75rem}
.legal .toc-cols{columns:2;column-gap:2rem;font-size:.9375rem}
.legal .toc-cols a{color:var(--text-a-dim);text-decoration:none;display:block;padding:.2rem 0}
.legal .toc-cols a:hover{color:var(--text-a)}
.legal .toc-num{display:inline-block;min-width:1.5em;color:var(--num);font-weight:600}
.legal .section-num{display:inline-block;min-width:1.6em;color:var(--num)}
.legal .section{margin-bottom:2.5rem;scroll-margin-top:1.5rem}
.legal .section-header{font-size:1.375rem;font-weight:700;letter-spacing:-.015em;
  margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule-a)}
/* Numbered subsections (2.1, 4.3 ...) are <h2> in the legal markup. Sized
   between .section-header (1.375rem) and h3 (1.0625rem) so the hierarchy reads
   top-down; the global h2 is the marketing display size. (2026-10-01) */
.legal h2{font-size:1.1875rem;line-height:1.3;letter-spacing:-.01em;font-weight:650;margin:2rem 0 .6rem}
.legal h3{font-size:1.0625rem;font-weight:650;margin:1.75rem 0 .6rem}
.legal p,.legal li{max-width:44rem}
.legal ul,.legal ol{padding-left:1.25rem}
.legal li{margin-bottom:.5rem}
.legal a{color:var(--text-a)}
.legal .callout{border-left:2px solid var(--teal);background:var(--bg-tint);
  padding:1rem 1.25rem;margin:1.5rem 0;border-radius:0 3px 3px 0}
.legal .callout-warn{border-left-color:var(--mark-warn);background:var(--bg-callout-warn)}
.legal .callout-green{border-left-color:var(--mark-good);background:var(--bg-callout-green)}
.legal .callout-dark{border-left-color:var(--teal);background:var(--ink);color:var(--paper)}
.legal .callout-dark p{color:var(--on-ink);max-width:44rem}
.legal .callout-dark strong{color:var(--paper)}

/* doc-list: arrow marker by default, replaced with a colored check/cross
   when the list sits inside a callout — this is the paired "what we do /
   what we don't" device and needs the strongest per-item signal. */
.legal ul.doc-list{list-style:none;padding:0;margin:.75rem 0}
.legal ul.doc-list li{position:relative;padding:.4rem 0 .4rem 1.35rem;margin-bottom:0;
  border-bottom:1px solid var(--rule-a)}
.legal ul.doc-list li:last-child{border-bottom:none}
.legal ul.doc-list li::before{content:"\2192";position:absolute;left:0;top:.4rem;
  color:var(--arrow);font-weight:700}
.legal .callout ul.doc-list li::before{content:"\2713";color:var(--mark-good)}
.legal .callout-warn ul.doc-list li::before{content:"\2717";color:var(--mark-warn)}
.legal .callout ul.doc-list li,
.legal .callout-warn ul.doc-list li{border-bottom-color:rgba(18,35,84,.08)}
@media (prefers-color-scheme: dark){
  .legal .callout ul.doc-list li,
  .legal .callout-warn ul.doc-list li{border-bottom-color:rgba(255,255,255,.08)}
}
.legal .tbl-wrap{overflow-x:auto;margin:1.5rem 0}
.legal table{border-collapse:collapse;width:100%;font-size:.9375rem}
.legal th,.legal td{border:1px solid var(--rule-a);padding:.6rem .75rem;text-align:left;vertical-align:top}
.legal th{font-weight:650;background:var(--bg-tint)}
.legal code{font:inherit}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 60rem){
  .hero .shell{grid-template-columns:minmax(0,1fr) 340px;gap:2.5rem}
  .split{grid-template-columns:minmax(0,1fr) 260px}
}
@media (max-width: 40rem){
  .hero .shell{grid-template-columns:1fr;gap:3rem}
  .heroCard{justify-self:start;max-width:250px;margin-bottom:calc(-1 * var(--band) - 1rem)}
  .after-hero{padding-top:calc(var(--band) + 1.5rem)}
  .split{grid-template-columns:1fr;gap:2.25rem}
  .qrpanel{max-width:280px}
  .fields{grid-template-columns:1fr}
  .foot .shell{flex-direction:column}
  .footlines{text-align:left}
  .fork p+p{padding-left:1.1rem}
  .legal .toc-cols{columns:1}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}