@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,opsz,wght@0,8..60,300..800;1,8..60,300..800&display=swap');

/* public/assets/site.css — cohesive light theme */

/* ---------- Design tokens (consolidated) ---------- */
:root{
  --bg:#f7fbff;
  --panel:#ffffff;
  --text:#0b1220;
  --muted:#4b5563;

  --accent:#2563eb;          /* brand blue */
  --accent-2:#60a5fa;        /* lighter blue */
  --link-hover:#1e40af;
  --accent-hover:#1e40af;

  --brand-blue:#2563eb;
  --ink-900:#0f172a;
  --ink-700:#334155;
  --ink-500:#64748b;
  --line:#e7eefc;

  --radius:0px;              /* hard edges (final look) */
  --gap:16px;
  --shadow:0 10px 25px rgba(2,6,23,.08);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{font-size:17px}
body{
  margin:0;
  font-family:"Source Sans 3", ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans";
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:
    /* stronger brand-blue flares (unchanged positions, deeper mix) */
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 62%),
    radial-gradient(1000px 520px at 90% 0%,  color-mix(in srgb, var(--accent-2) 28%, transparent), transparent 62%),

    /* darker base wash that keeps readability; top edge approaches the brand hue */
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 18%, #ffffff) 0%,
      color-mix(in srgb, var(--accent) 12%, #f6faff) 32%,
      color-mix(in srgb, var(--accent) 8%,  #eef4ff) 64%,
      color-mix(in srgb, var(--accent) 6%,  #eaf2ff) 82%,
      color-mix(in srgb, var(--accent) 4%,  #e6f3ff) 100%
    ),

    /* subtle paper texture; keep as-is */
    repeating-linear-gradient(180deg, rgba(0,0,0,.004) 0, rgba(0,0,0,0) 4px);

  background-attachment: scroll, scroll, scroll, scroll;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

img{max-width:100%;height:auto}
a{color:#2253d9;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover,a:focus{color:var(--link-hover);text-decoration-thickness:2px}

/* ---------- Global content width ---------- */
main,.container{max-width:1100px;margin:0 auto;padding:18px}

/* ---------- Top navigation (“hotbar”) ---------- */
.top{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(120%) blur(8px);
  box-shadow:0 4px 16px rgba(2,6,23,.06);
}
.top .inner{
  max-width:1100px;margin:0 auto;padding:10px 16px;
  display:flex;justify-content:center;align-items:center;gap:28px;
}
.top .inner a{
  position:relative;display:inline-flex;align-items:center;
  padding:8px 10px;border-radius:10px;text-decoration:none;
  color:var(--text);transition:background .2s ease,color .2s ease,text-shadow .2s ease;
  white-space:nowrap;
}
.top .inner a:hover{background:rgba(2,6,23,.04)}
.top .inner a:hover::after,
.top .inner a[aria-current="page"]::after{
  content:"";position:absolute;left:8px;right:8px;bottom:4px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#2a6cf0 0%,#6aa8ff 100%);box-shadow:0 4px 12px rgba(37,99,235,.35);
}

/* ---------- Layout helpers ---------- */
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---------- Typography ---------- */
h1{font-size:32px;margin:10px 0 18px}
h2{font-size:24px;margin:18px 0 10px}
h3{font-size:20px;margin:10px 0 8px}
.h4{font-size:16px;font-weight:700;margin:0 0 8px}
.small{font-size:14px;color:var(--muted)}
.lead{font-size:18px;line-height:1.6;color:var(--text)}

/* ---------- Cards ---------- */
.card{
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 18px;
  border:1px solid rgba(15,23,42,.06);
}
.card .muted{color:var(--muted)}
.card + .card{margin-top:var(--gap)}

/* ---------- Buttons ---------- */
.btn,.btn:link,.btn:visited{
  display:inline-block;padding:10px 14px;border-radius:10px;border:none;cursor:pointer;
  font-weight:600;color:#fff;background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:0 6px 16px rgba(37,99,235,.20);text-decoration:none;
  transition:filter .15s ease,color .15s ease,background .15s ease;
}
.btn:hover,.btn:focus{filter:brightness(1.05);outline:2px solid transparent;outline-offset:2px}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-outline{
  color:var(--accent);background:#fff;border:1px solid rgba(37,99,235,.35);
  box-shadow:0 4px 10px rgba(2,6,23,.06);
}
.btn-outline:hover{background:rgba(37,99,235,.05)}

/* ---------- Forms ---------- */
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input,select,textarea{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(15,23,42,.2);
  background:#fff;box-shadow:inset 0 1px 2px rgba(2,6,23,.04);font:inherit;
}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
  background-position:calc(100% - 18px) 16px, calc(100% - 12px) 16px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
input:focus,select:focus,textarea:focus{outline:2px solid #2a6cf0;outline-offset:2px}

/* ---------- Footer / Legal links ---------- */
footer,.site-footer{
  display:flex;justify-content:center;align-items:center;padding:28px 12px 40px;color:var(--muted);
}
.footer-links,.page-legal,.legal.center,.legal{
  display:flex;justify-content:center;align-items:center;gap:18px;
}
.footer-links a,.page-legal a,.legal.center a,.legal a{padding:2px 4px}
.footer-links span,.page-legal span,.legal.center span,.legal span{margin:0 2px;opacity:.6}

footer.container,.footer-links,.page-legal,.legal,.legal.center{ text-align:center; }
footer.container{ padding:16px 0 22px; }
footer.container a{ margin:0 8px; }
footer.container span[aria-hidden="true"]{ display:inline-block;margin:0 6px;color:#94a3b8; }

/* ---------- Accessibility helpers ---------- */
.visually-hidden{
  position:absolute !important;height:1px;width:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* ---------- Reference page components ---------- */
.ref-board{display:grid;gap:var(--gap);grid-template-columns:1.1fr .9fr;align-items:start}
.ref-board .ref-card{
  padding:14px 16px;border-radius:12px;border:1px solid rgba(2,6,23,.10);
  background:#fff;box-shadow:var(--shadow);
}
.ref-board .ref-card + .ref-card{margin-top:var(--gap)}
.ref-card h3{margin-top:0}

.ref-panel{
  padding:14px 16px;border-radius:12px;border:1px solid rgba(2,6,23,.10);
  background:#fff;box-shadow:var(--shadow);
}
.ref-panel__scroll{overflow:auto;padding-right:.25rem}
.ref-panel__list{margin:0;padding-left:1.25rem}
.ref-panel__item + .ref-panel__item{margin-top:.75rem}
.ref-panel__desc{margin:.25rem 0 0 0}

@media (max-width:980px){
  .ref-board{grid-template-columns:1fr}
  .ref-panel__scroll{max-height:none}
}

.page-legal{text-align:center;margin:32px 0}

/* ---------- Who page lists ---------- */
/* Align lists with card headings (no extra left indent) */
body#who ul,
body#who ol{
  font-size:1rem;
  line-height:1.6;
  margin-left:0;
  padding-left:0;            /* remove UA padding so text lines up with headers */
  list-style-position: inside; /* keep markers visible without extra padding */
}
body#who li + li{margin-top:6px}

/* ---------- Home: buttons centered ---------- */
body#home .card .actions{display:flex;justify-content:center}
body#home .card .actions .btn,
body#home .card .actions .btn-primary{margin-left:0;margin-right:0}
body#home main.container > .card:first-of-type > :has(> .btn){
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
}
body#home main.container > .card:first-of-type > :has(> .btn) .btn{margin:0}

/* Fallback for browsers without :has() */
@supports not (selector(:has(*))){
  body#home main.container > .card:first-of-type{text-align:center}
  body#home main.container > .card:first-of-type .btn{display:inline-block;margin:0 8px}
  body#home main.container > .card:first-of-type h2,
  body#home main.container > .card:first-of-type p{text-align:left}
}

/* ---------- Report page layout (scoped) ---------- */
main.container > .grid.grid-2:has(#optional-actions){grid-template-columns:1fr;align-items:start}
main.container > .grid.grid-2:has(#optional-actions) > .card{margin-top:0 !important;height:auto}
main.container > .grid.grid-2:has(#optional-actions) > .card:last-child{
  display:grid;gap:var(--gap);grid-template-columns:1fr;
}
@media (min-width:900px){
  main.container > .grid.grid-2:has(#optional-actions) > .card:last-child{grid-template-columns:1fr 1fr}
}
main.container > .grid.grid-2:has(#optional-actions) > .card:last-child #optional-actions{grid-column:1}
main.container > .grid.grid-2:has(#optional-actions) > .card:last-child #optional-actions ~ h2,
main.container > .grid.grid-2:has(#optional-actions) > .card:last-child #optional-actions ~ ul{grid-column:2}
@media (min-width:900px){
  main.container > .grid.grid-2:has(#optional-actions) > .card:last-child{
    display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;align-items:start;column-gap:var(--gap);row-gap:var(--gap);
  }
  main.container > .grid.grid-2:has(#optional-actions) > .card:last-child h2:has(+ #optional-actions){grid-column:1;grid-row:1;margin-top:0}
  main.container > .grid.grid-2:has(#optional-actions) > .card:last-child #optional-actions{grid-column:1;grid-row:2}
  main.container > .grid.grid-2:has(#optional-actions) > .card:last-child #optional-actions ~ h2{grid-column:2;grid-row:1;margin-top:0}
  main.container > .grid.grid-2:has(#optional-actions) > .card:last-child #optional-actions ~ ul{grid-column:2;grid-row:2;margin-top:0}
}

/* ---------- Header & Nav ---------- */
.site-header{background:#fff;border-bottom:1px solid var(--line)}
.header-flex{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:8px 0}
.logo-wordmark{font-weight:700;font-size:18px;letter-spacing:.2px;color:var(--ink-900)}
.logo-wordmark .accent{color:var(--brand-blue)}
.nav{display:flex;flex-wrap:wrap;gap:16px}
.nav a{text-decoration:none;color:var(--ink-900);padding:8px 2px;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:#c7d7ff}
.nav a[aria-current="page"]{border-bottom-color:var(--brand-blue)}

/* ---------- Trust strip (final centered version) ---------- */
.trust-strip{background:#fff;border-bottom:1px solid var(--line)}
.trust-strip .container,
.trust-strip .trust-grid{
  display:flex !important;justify-content:center !important;align-items:center !important;
  gap:48px !important;padding:8px 0 !important;text-align:center !important;
}
.trust-strip .trust-item{margin:0 !important;color:var(--brand-blue)}
.trust-strip .trust-item b{color:var(--brand-blue)}

/* ---------- Hero & timeline ---------- */
.hero{padding:28px 0 12px;background:transparent}
.hero .container{max-width:960px}
.hero h1{margin:0 0 6px;font-size:32px;line-height:1.1;color:var(--ink-900)}
.hero p{margin:0;color:var(--ink-700);font-size:18px}
#home .hero{text-align:center}
#home .hero .container{max-width:880px;margin:0 auto}

.video-rail{border-bottom:1px solid var(--line);background:#fff}
.video-rail .container{display:flex;gap:12px;overflow-x:auto;padding:10px 0;scroll-snap-type:x mandatory;justify-content:center}
.rail-item{
  flex:0 0 auto;scroll-snap-align:start;padding:8px 10px;border:1px solid var(--line);
  background:#fff;cursor:pointer;user-select:none;font-size:14px;color:var(--ink-700);
}
.rail-item[aria-current="true"]{border-color:var(--brand-blue);color:var(--ink-900);outline:2px solid var(--brand-blue);outline-offset:-2px}

.video-player{background:#fff;border:1px solid var(--line);margin-top:12px}
.video-player .title{padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600}
.video-player .title a{color:var(--ink-900);text-decoration:underline}
.video-player .frame{position:relative;width:100%;padding-top:56.25%;background:#000}
.video-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Inline CTAs list (under player) */
.inline-steps{margin:10px 0 0;padding:0 2px}
.inline-steps ol{margin:0;padding-left:18px}

/* Newspaper modules */
.modules{margin-top:24px}
.modules .grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (max-width:820px){.modules .grid{grid-template-columns:1fr}}
.module{background:#fff;border:1px solid var(--line)}
.module .rule{height:3px;background:var(--brand-blue)}
.module .inner{padding:14px 16px}
.module h3{margin:0 0 8px}
.module p{margin:0 0 10px}

/* ---------- Fallback embed card ---------- */
.embed-fallback{
  padding:16px;display:grid;grid-auto-flow:column;gap:12px;align-items:center;justify-content:start;
  background:#fff;border:1px solid var(--line);
}
.embed-fallback p{margin:0;color:var(--ink-700)}
.embed-fallback .btn{display:inline-block;padding:8px 12px;border:1px solid var(--line);background:#fff;text-decoration:none}
.embed-note{margin-top:8px;color:var(--ink-700);font-size:14px}

/* ---------- Homepage below-player bits ---------- */
#home .checklist{margin:10px 0 14px}
#home .checklist ol{margin:0;padding-left:18px;line-height:1.35}
#home .checklist li + li{margin-top:4px}

/* ---------- Next steps grid (final variant kept) ---------- */
#home .steps-grid{
  margin:14px 0 28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  background:transparent;border:0;padding:0;
}
#home .steps-grid .step{
  display:flex;align-items:center;gap:14px;min-height:170px;padding:24px 22px;
  background:#fff;color:var(--ink-900);text-decoration:none;border:1px solid var(--line);box-sizing:border-box;
}
#home .steps-grid .step .num{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  background:var(--brand-blue);color:#fff;font-weight:700;font-size:18px;flex:0 0 42px;
}
#home .steps-grid .step .txt{font-size:17px;line-height:1.5}
#home .steps-grid .step.is-link:hover,
#home .steps-grid .step.is-link:focus-visible{border-color:#c7d7ff;background:#f9fbff;outline:none;cursor:pointer}
@media (max-width:720px){
  #home .steps-grid{grid-template-columns:1fr}
  #home .steps-grid .step{min-height:150px}
}

/* ---------- Global shadow kill switch ---------- */
.card,.card:hover,.card:focus,.panel,.paper,.callout{box-shadow:none !important}

/* ======== VAERS / CHARTS ======== */
.chart-wrap canvas{display:block;width:100%;height:340px !important}

/* VAERS wide table */
.vaers-wide-table{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vaers-wide-table .table-card{background:#fff;border:1px solid var(--line);border-radius:0;padding:12px 12px 8px}
.table-head,.table-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.table-head{font-weight:600;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.table-row{padding:6px 0;border-bottom:1px solid rgba(0,0,0,.05)}
.table-row:last-child{border-bottom:0}
.table-head span:last-child,.table-row span:last-child{text-align:right;white-space:nowrap}
@media (max-width:860px){.vaers-wide-table{grid-template-columns:1fr}}

/* On-brand line tinting */
:root{
  --vaers-line-strong: color-mix(in srgb, var(--accent) 26%, transparent);
  --vaers-line-soft:   color-mix(in srgb, var(--accent) 14%, transparent);
}
.table-head{border-bottom-color:var(--vaers-line-strong)}
.table-row{border-bottom-color:var(--vaers-line-soft)}

/* VAERS breakdowns compact table */
#vaersBreakdownsTable .table-simple{width:100%;border-collapse:collapse;font-size:.95rem}
#vaersBreakdownsTable .table-simple thead th{text-align:left;border-bottom:1px solid rgba(0,0,0,.08);padding:8px 6px}
#vaersBreakdownsTable .table-simple tbody td{padding:8px 6px;border-bottom:1px solid rgba(0,0,0,.05)}
#vaersBreakdownsTable .vaers-title{margin:18px 0 8px}
#vaersBreakdownsTable .vaers-note{color:#64748b;font-size:.9rem;margin-top:8px}

/* --- Superscripts/subscripts normalization --- */
sup,sub{font-size:.75em;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.2em}
sup, sup a{ text-decoration:none;color:inherit }
sup a:hover{text-decoration:underline}
/* Full-width, title-less embed that aligns with cards */
.embed-full { margin: 0; }
.embed-full .frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
}
.embed-full iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* 2 rows × 3 columns for six bullets, collapses to single column on small screens */
ul.grid-2x3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 24px;                 /* row gap, column gap */
  list-style: disc inside;
  padding-left: 0;
  margin: 0;                    /* avoid margin-collapsing with heading */
  align-items: start;            /* ensure top alignment across columns */
}

/* FIRST grid right after a section heading:
   padding avoids margin collapse and fixes the “row 1 sits high” effect */
:is(h2, h3) + ul.grid-2x3 {
  padding-top: 16px;            /* tune to 14–18px if you want tighter/looser */
}

ul.grid-2x3 > li {
  /* optional: breathe a bit and ensure nice wrap */
  line-height: 1.5;
}

/* On narrow screens, fall back to a single column */
@media (max-width: 900px) {
  ul.grid-2x3 {
    grid-template-columns: 1fr;
    gap: 8px 0;
  }
}
/* Inline link buttons near the textarea helper */
.support-links {
  margin: 6px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.support-links .btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef3ff;
  color: #2b59c3;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.support-links .btn-link:hover { background: #e3ecff; }
.support-links .dot { color: #9aa3b2; }
.video-fallback { color: #fff; text-align: center; padding: 24px; }
.video-fallback .btn { display: inline-block; margin-top: 8px; }
.video-fallback { text-align: center; padding: 16px 0; }
.video-fallback .btn { display: inline-block; margin-top: 6px; }
/* --- Seam-proof background overlay --- */
body { background: #ffffff !important; position: relative; }
body::before{
  content:"";
  position: fixed;
  inset: -20% -20%;
  z-index: -1;
  pointer-events: none;
    background:
    /* stronger brand-blue flares */
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 62%),
    radial-gradient(1000px 520px at 90% 0%,  color-mix(in srgb, var(--accent-2) 28%, transparent), transparent 62%),

    /* darker base wash using brand blue at the top */
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 18%, #ffffff) 0%,
      color-mix(in srgb, var(--accent) 12%, #f6faff) 32%,
      color-mix(in srgb, var(--accent) 8%,  #eef4ff) 64%,
      color-mix(in srgb, var(--accent) 6%,  #eaf2ff) 82%,
      color-mix(in srgb, var(--accent) 4%,  #e6f3ff) 100%
    ),

    /* paper texture stays */
    repeating-linear-gradient(180deg, rgba(0,0,0,.004) 0, rgba(0,0,0,0) 4px);
}
/* === Fix: show gradient from the very top, remove solid white cover === */
:root{ --brand-blue: var(--accent); } /* --accent is #2563eb in your tokens */

/* remove the solid white body paint and the hidden overlay */
body { background: transparent !important; }
body::before { content: none !important; }

/* paint the gradient behind everything from the top edge */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(1200px 600px at 10% -10%,
      color-mix(in srgb, var(--brand-blue) 38%, transparent), transparent 62%),
    radial-gradient(1000px 520px at 90% 0%,
      color-mix(in srgb, var(--brand-blue) 30%, transparent), transparent 62%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-blue) 18%, #ffffff) 0%,
      color-mix(in srgb, var(--brand-blue) 12%, #f6faff) 32%,
      color-mix(in srgb, var(--brand-blue) 8%,  #eef4ff) 64%,
      color-mix(in srgb, var(--brand-blue) 6%,  #eaf2ff) 82%,
      color-mix(in srgb, var(--brand-blue) 4%,  #e6f3ff) 100%
    ),
    repeating-linear-gradient(180deg, rgba(0,0,0,.004) 0, rgba(0,0,0,0) 4px);

  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* let the gradient show behind top bars */
.top { background: rgba(255,255,255,.72); } /* keep your blur bar, no change */
/* === Invert gradient: white top → brand blue bottom (site-wide) === */
/* Uses your existing brand token (buttons/logo): --accent = #2563eb */
:root { --brand-blue: var(--accent); }

/* keep earlier fixes */
body { background: transparent !important; }
body::before { content: none !important; }

/* draw the gradient from the very top, but trending to blue at the bottom */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    /* blue flares concentrated below the fold */
    radial-gradient(1000px 520px at 20% 115%,
      color-mix(in srgb, var(--brand-blue) 32%, transparent), transparent 62%),
    radial-gradient(1100px 560px at 80% 120%,
      color-mix(in srgb, var(--brand-blue) 24%, transparent), transparent 64%),

    /* white → brand blue wash */
    linear-gradient(
      180deg,
      #ffffff 0%,
      color-mix(in srgb, var(--brand-blue) 6%,  #ffffff) 35%,
      color-mix(in srgb, var(--brand-blue) 14%, #eef4ff) 60%,
      color-mix(in srgb, var(--brand-blue) 26%, #e9f0ff) 80%,
      var(--brand-blue) 100%
    ),

    /* subtle paper texture */
    repeating-linear-gradient(180deg, rgba(0,0,0,.004) 0, rgba(0,0,0,0) 4px);

  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* keep the two upper site bars solid white so they don't pick up blue */
header, .header, .site-header, .top, .topbar, .top-bar, .navbar, .nav, .nav-bar {
  background: #ffffff !important;
}
/* === Spread the gradient across the page (white → brand blue) === */
:root { --brand-blue: var(--accent); } /* #2563eb in your tokens */

html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    /* larger, lower flares so color builds gradually */
    radial-gradient(1500px 780px at 30% 135%,
      color-mix(in srgb, var(--brand-blue) 20%, transparent), transparent 72%),
    radial-gradient(1600px 820px at 70% 140%,
      color-mix(in srgb, var(--brand-blue) 16%, transparent), transparent 74%),

    /* slower, more spread-out wash */
    linear-gradient(
      180deg,
      #ffffff 0%,
      color-mix(in srgb, var(--brand-blue) 4%,  #ffffff) 45%,
      color-mix(in srgb, var(--brand-blue) 10%, #f6faff) 65%,
      color-mix(in srgb, var(--brand-blue) 18%, #eef4ff) 78%,
      color-mix(in srgb, var(--brand-blue) 28%, #e9f0ff) 90%,
      var(--brand-blue) 100%
    ),

    /* subtle paper texture (unchanged) */
    repeating-linear-gradient(180deg, rgba(0,0,0,.004) 0, rgba(0,0,0,0) 4px);

  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* keep the two upper bars white */
header, .header, .site-header, .top, .topbar, .top-bar, .navbar, .nav, .nav-bar {
  background: #ffffff !important;
}
/* === Start gradient lower (near red line), white → brand blue === */
:root{
  --brand-blue: var(--accent);            /* #2563eb in your tokens */
  --grad-gap: clamp(120px, 17vh, 240px);  /* distance from top before color starts */
}

html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* override previous bg */
  background:
    /* larger/lower flares so color builds gradually */
    radial-gradient(1500px 780px at 30% 135%,
      color-mix(in srgb, var(--brand-blue) 20%, transparent), transparent 72%),
    radial-gradient(1600px 820px at 70% 140%,
      color-mix(in srgb, var(--brand-blue) 16%, transparent), transparent 74%),

    /* white until --grad-gap, then ramp to blue */
    linear-gradient(
      180deg,
      #ffffff 0,
      #ffffff var(--grad-gap),
      color-mix(in srgb, var(--brand-blue) 6%,  #ffffff) calc(var(--grad-gap) + 80px),
      color-mix(in srgb, var(--brand-blue) 12%, #f6faff) 55%,
      color-mix(in srgb, var(--brand-blue) 20%, #eef4ff) 75%,
      color-mix(in srgb, var(--brand-blue) 30%, #e9f0ff) 90%,
      var(--brand-blue) 100%
    ),

    /* subtle paper texture */
    repeating-linear-gradient(180deg, rgba(0,0,0,.004) 0, rgba(0,0,0,0) 4px) !important;

  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* keep the two upper bars white */
header, .header, .site-header, .top, .topbar, .top-bar, .navbar, .nav, .nav-bar {
  background: #ffffff !important;
}
/* === Smoothen gradient ramp (same start height) === */
:root{
  --brand-blue: var(--accent);             /* #2563eb */
  --grad-gap: clamp(120px, 17vh, 240px);   /* unchanged start height */
}

html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    /* softer/lower flares to avoid abruptness */
    radial-gradient(1600px 860px at 28% 138%,
      color-mix(in srgb, var(--brand-blue) 14%, transparent), transparent 76%),
    radial-gradient(1700px 900px at 72% 142%,
      color-mix(in srgb, var(--brand-blue) 12%, transparent), transparent 78%),

    /* eased white → blue (more stops near the start = gentler onset) */
    linear-gradient(
      180deg,
      #ffffff 0,
      #ffffff var(--grad-gap),

      /* gentle onset */
      color-mix(in srgb, var(--brand-blue) 3%,  #ffffff)  calc(var(--grad-gap) + 20px),
      color-mix(in srgb, var(--brand-blue) 5%,  #ffffff)  calc(var(--grad-gap) + 60px),
      color-mix(in srgb, var(--brand-blue) 9%,  #f9fbff)  calc(var(--grad-gap) + 140px),

      /* mid ramp */
      color-mix(in srgb, var(--brand-blue) 14%, #f3f7ff) 50%,
      color-mix(in srgb, var(--brand-blue) 20%, #eef4ff) 68%,

      /* approach */
      color-mix(in srgb, var(--brand-blue) 28%, #eaf1ff) 86%,
      var(--brand-blue) 100%
    ),

    /* paper texture */
    repeating-linear-gradient(180deg, rgba(0,0,0,.004) 0, rgba(0,0,0,0) 4px) !important;

  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* keep the two upper bars white */
header, .header, .site-header, .top, .topbar, .top-bar, .navbar, .nav, .nav-bar {
  background: #ffffff !important;
}
/* === Uniform white → blue gradient, starting just below top bars === */
:root{
  --brand-blue: var(--accent);                  /* #2563eb in your tokens */
  --bars-height: clamp(92px, 10vh, 140px);      /* combined height of the two white bars */
  --bottom-strength: 82%;                       /* lighten bottom vs full brand blue */
}

/* ensure old overlays don't interfere */
body { background: transparent !important; }
body::before { content: none !important; }

/* single, smooth, full-viewport gradient */
html::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* one linear gradient (+ subtle paper texture) for uniform density */
  background:
    linear-gradient(
      180deg,
      /* keep top bars white, then begin a gentle ramp */
      #ffffff 0,
      #ffffff var(--bars-height),

      /* eased progression (more stops early to avoid an abrupt start) */
      color-mix(in srgb, var(--brand-blue) 4%,  #ffffff)  calc(var(--bars-height) + 40px),
      color-mix(in srgb, var(--brand-blue) 8%,  #fbfdff)  calc(var(--bars-height) + 120px),
      color-mix(in srgb, var(--brand-blue) 12%, #f7faff)  calc(var(--bars-height) + 220px),
      color-mix(in srgb, var(--brand-blue) 16%, #f3f7ff)  40%,
      color-mix(in srgb, var(--brand-blue) 22%, #eef4ff)  58%,
      color-mix(in srgb, var(--brand-blue) 28%, #eaf1ff)  74%,
      color-mix(in srgb, var(--brand-blue) 36%, #e6efff)  86%,
      color-mix(in srgb, var(--brand-blue) var(--bottom-strength), #eaf2ff) 100%
    ),
    repeating-linear-gradient(180deg, rgba(0,0,0,.004) 0, rgba(0,0,0,0) 4px);

  background-attachment: fixed, fixed;
  background-repeat: no-repeat, repeat;
}

/* keep the two upper bars solid white */
header, .header, .site-header, .top, .topbar, .top-bar, .navbar, .nav, .nav-bar {
  background: #ffffff !important;
}
/* === Footer visibility (repo: footer.container + links) === */
footer,
footer.container,
.site-footer{
  color:#fff !important;             /* strong contrast on blue */
  text-shadow: 0 1px 2px rgba(0,0,0,.25); /* subtle lift over gradient */
}

footer a,
footer.container a,
.site-footer a{
  color:#fff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

footer a:hover,
footer.container a:hover,
.site-footer a:hover{
  text-decoration-thickness: 2px;
  filter: brightness(1.05);
}
/* === Steps CTA buttons (replace clickable cards with explicit buttons) === */
#home .steps-grid .step { cursor: default; } /* no hand cursor on cards */

/* remove old hover lift if it existed on .is-link */
#home .steps-grid .step.is-link:hover,
#home .steps-grid .step.is-link:focus { transform: none; background: #fff; border-color: #d7e3ff; }

/* CTA container aligns to text baseline on mobile and right edge on wide screens */
#home .steps-grid .step .actions { margin-top: 14px; display: flex; gap: 10px; }
@media (min-width: 720px){
  #home .steps-grid .step { display: flex; gap: 18px; align-items: flex-start; }
  #home .steps-grid .step .txt { flex: 1 1 auto; }
  #home .steps-grid .step .actions { align-self: center; }
}

/* Button look matching brand */
.step-cta{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 10px;
  font-weight: 700; font-size: 15px; line-height: 1;
  text-decoration: none; user-select: none;
  background: var(--accent);        /* brand blue (#2563eb) */
  color: #fff; border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .06s ease, filter .12s ease, box-shadow .12s ease;
}
.step-cta:hover{ filter: brightness(1.05); }
.step-cta:active{ transform: translateY(1px); }
.step-cta:focus-visible{
  outline: 2px solid #fff; outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .45);
}

/* keep numbering badge visually balanced with the new button */
#home .steps-grid .step .num{ min-width: 44px; height: 44px; display: inline-flex; align-items:center; justify-content:center; }
/* === Steps: inline CTA next to text + site gradient button === */

/* put number, text, and button on one row without changing the grid */
#home .steps-grid .step{
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
#home .steps-grid .step .num{ flex: 0 0 56px; } /* number stays where it is */
#home .steps-grid .step .txt{ flex: 1 1 auto; }

/* make the CTA inline with the first line of text */
#home .steps-grid .step .actions{
  margin: 0 0 0 12px;
  align-self: baseline;           /* align with text baseline */
  display: inline-block;
}

/* mobile: keep number + text; button drops beneath text */
@media (max-width: 720px){
  #home .steps-grid .step{ flex-direction: column; }
  #home .steps-grid .step .actions{ margin: 8px 0 0 56px; align-self: flex-start; }
}

/* site-themed gradient button (lighter → brand blue) */
:root { --brand-blue: var(--accent); } /* #2563eb in your tokens */

.step-cta{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  font: 700 15px/1.1 inherit;
  color: #fff; text-decoration: none;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-blue) 14%, #ffffff) 0%,
      color-mix(in srgb, var(--brand-blue) 26%, #eaf2ff) 60%,
      var(--brand-blue) 100%
    );
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .06s ease, filter .12s ease;
}
.step-cta:hover{ filter: brightness(1.06); }
.step-cta:active{ transform: translateY(1px); }
.step-cta:focus-visible{
  outline: 2px solid #fff; outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(37,99,235,.45);
}

/* ensure old card-hover styling doesn't fight this */
#home .steps-grid .step { cursor: default; }
#home .steps-grid .step.is-link:hover,
#home .steps-grid .step.is-link:focus { transform: none; background: #fff; border-color: #d7e3ff; }
/* Steps: make CTA inline with text, clean spacing */
#home .steps-grid .step{ display:flex; gap:16px; align-items:flex-start; }
#home .steps-grid .step .num{ flex:0 0 56px; }
#home .steps-grid .step .txt{
  flex:1 1 auto;
  display:inline; /* keep text and button in the same line flow */
}
#home .steps-grid .step .txt .step-cta{
  display:inline-flex; vertical-align:baseline; margin-left:.75rem; margin-top:-2px;
}

/* Mobile: if it wraps too tight, drop to next line cleanly */
@media (max-width:720px){
  #home .steps-grid .step{ flex-direction:column; }
  #home .steps-grid .step .num{ margin-bottom:6px; }
  #home .steps-grid .step .txt .step-cta{ display:inline-flex; margin-left:0; margin-top:8px; }
}

/* Site-themed gradient button */
:root{ --brand-blue: var(--accent); }
.step-cta{
  padding:10px 14px; border-radius:10px; font:700 15px/1.1 inherit;
  color:#fff; text-decoration:none; user-select:none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-blue) 14%, #ffffff) 0%,
    color-mix(in srgb, var(--brand-blue) 26%, #eaf2ff) 60%,
    var(--brand-blue) 100%
  );
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 1px 0 rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .06s ease, filter .12s ease;
}
.step-cta:hover{ filter:brightness(1.06); }
.step-cta:active{ transform:translateY(1px); }
.step-cta:focus-visible{ outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 3px rgba(37,99,235,.45); }

/* kill any old card-hover */
#home .steps-grid .step.is-link:hover,
#home .steps-grid .step.is-link:focus{ transform:none; background:#fff; border-color:#d7e3ff; }
/* Gradient: remove visible band at top, keep smooth ramp */
:root{
  --bars-height: clamp(92px, 10vh, 140px);
}

html::before{
  background:
    linear-gradient(
      180deg,
      #ffffff 0,
      #ffffff calc(var(--bars-height) + 1px),              /* tiny buffer past bars */
      color-mix(in srgb, var(--brand-blue) 3%, #ffffff)  calc(var(--bars-height) + 48px),
      color-mix(in srgb, var(--brand-blue) 7%, #f9fbff)   calc(var(--bars-height) + 140px),
      color-mix(in srgb, var(--brand-blue) 12%, #f5f8ff)  45%,
      color-mix(in srgb, var(--brand-blue) 20%, #eef4ff)  70%,
      color-mix(in srgb, var(--brand-blue) 28%, #eaf1ff)  86%,
      color-mix(in srgb, var(--brand-blue) 80%, #eaf2ff)  100%
    ),
    repeating-linear-gradient(180deg, rgba(0,0,0,.004) 0, rgba(0,0,0,0) 4px) !important;
}
/* === Step CTA: remove top line, smoother gradient, same theme === */
:root { --brand-blue: var(--accent); }

/* base */
.step-cta{
  position: relative;                             /* for ::before overlay */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 10px;
  font: 700 15px/1.1 inherit; color: #fff; text-decoration: none;
  /* smoother light→blue gradient; no dark edge at top */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-blue) 6%,  #ffffff) 0%,
    color-mix(in srgb, var(--brand-blue) 18%, #eef6ff) 58%,
    color-mix(in srgb, var(--brand-blue) 30%, #e7f0ff) 100%
  );
  border: 0;                                      /* remove border edge */
  background-clip: padding-box;                   /* avoid border bleed lines */
  box-shadow: 0 1px 1px rgba(0,0,0,.06);          /* subtle lift */
  transition: transform .06s ease, filter .12s ease;
}

/* faint top highlight (not a dark line) */
.step-cta::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  pointer-events:none;
}

.step-cta:hover{ filter: brightness(1.06); }
.step-cta:active{ transform: translateY(1px); }
.step-cta:focus-visible{
  outline: 2px solid #fff; outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(37,99,235,.45);
}
/* === Steps: center CTA under text; solid brand-blue button, no hover highlight === */
#home .steps-grid .step{ display:flex; gap:16px; align-items:flex-start; }
#home .steps-grid .step .num{ flex:0 0 56px; }
#home .steps-grid .step .txt{ flex:1 1 auto; }

/* Center button below the paragraph inside the text column */
#home .steps-grid .step .txt .step-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:12px auto 0;          /* centers under the text */
}

/* Solid brand-blue button to match site buttons; no hover change */
:root { --brand-blue: var(--accent); }

#home .steps-grid .step .txt .step-cta{
  padding:10px 14px;
  border-radius:10px;
  font:700 15px/1.1 inherit;
  color:#fff !important;
  text-decoration:none;
  background: var(--brand-blue) !important;
  border:0 !important;
  box-shadow:none !important;
  transition:none !important;
}

#home .steps-grid .step .txt .step-cta:hover,
#home .steps-grid .step .txt .step-cta:active{
  filter:none !important;
  transform:none !important;
}

/* Accessible focus ring without visual hover */
#home .steps-grid .step .txt .step-cta:focus-visible{
  outline:2px solid #fff; 
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(37,99,235,.45);
}

/* Mobile: keep centered; add a little breathing room */
@media (max-width:720px){
  #home .steps-grid .step{ flex-direction:column; }
  #home .steps-grid .step .num{ margin-bottom:6px; }
  #home .steps-grid .step .txt .step-cta{ margin:10px auto 0; }
}
/* === Steps: stable layout + centered CTA below text; solid site-blue buttons === */
#home .steps-grid .step{ display:flex; gap:16px; align-items:flex-start; }
#home .steps-grid .step .num{ flex:0 0 56px; }

/* critical: ensure block formatting so centering works */
#home .steps-grid .step .txt{ flex:1 1 auto; display:block; }
#home .steps-grid .step .txt .actions{
  margin-top:12px;
  display:block;
  text-align:center; /* centers the button under the paragraph */
}

/* buttons match site style: solid brand blue, white text, no hover highlight */
:root{ --brand-blue: var(--accent); } /* your brand blue token */

#home .steps-grid .step .txt .step-cta{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  font:700 15px/1.1 inherit;
  color:#fff !important;
  background: var(--brand-blue) !important;
  border:0 !important;
  box-shadow:none !important;
  text-decoration:none;
  transition:none !important;
}
#home .steps-grid .step .txt .step-cta:hover,
#home .steps-grid .step .txt .step-cta:active{ filter:none !important; transform:none !important; }
#home .steps-grid .step .txt .step-cta:focus-visible{
  outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 3px rgba(37,99,235,.45);
}

/* remove any earlier inline/hover/card rules that could leak through */
#home .steps-grid .step.is-link:hover,
#home .steps-grid .step.is-link:focus{ transform:none; background:#fff; border-color:#d7e3ff; }
/* === Steps: match site pill buttons + perfectly centered under text === */

/* Center the CTA within the text column (keeps paragraph left-aligned) */
#home .steps-grid .step .txt { flex: 1 1 auto; }
#home .steps-grid .step .txt .actions{
  display: block;
  width: 100%;
  margin-top: 12px;
  text-align: center;              /* exact centering within the column */
}

/* Pill button style to match site ("Generate", "Open selected board page") */
:root { --brand-blue: var(--accent); } /* #2563eb */

#home .steps-grid .step .txt .step-cta{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 16px;
  border-radius: 12px;
  font: 700 15px/1.1 inherit;
  color: #fff !important;
  text-decoration: none;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--brand-blue) 42%, #9fc3ff) 0%,
              var(--brand-blue) 100%);
  border: 0;
  box-shadow:
    0 10px 26px rgba(37,99,235,.20),   /* soft glow like other pills */
    inset 0 1px 0 rgba(255,255,255,.25);
  transition: none;                    /* no hover highlight */
}

#home .steps-grid .step .txt .step-cta:hover,
#home .steps-grid .step .txt .step-cta:active{
  filter: none; transform: none;       /* keep appearance steady */
}

#home .steps-grid .step .txt .step-cta:focus-visible{
  outline: 2px solid #fff; outline-offset: 2px;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.45),
    0 10px 26px rgba(37,99,235,.20),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* Mobile spacing still centered */
@media (max-width: 720px){
  #home .steps-grid .step .txt .actions{ margin-top: 10px; }
}
/* === Homepage steps: center CTA and use global pill button === */
#home .steps-grid .step .txt { flex: 1 1 auto; display: block; }
#home .steps-grid .step .txt .actions{
  display: flex;
  justify-content: center;   /* exact horizontal centering */
  margin-top: 12px;
  width: 100%;
}

/* Make .btn pill style win over previous .step-cta rules on the homepage */
#home .steps-grid .step .txt .step-cta.btn{
  padding: 11px 16px;
  border-radius: 12px;
  color: #fff !important;
  background: linear-gradient(180deg, var(--accent-2), var(--accent)) !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(37,99,235,.20), inset 0 1px 0 rgba(255,255,255,.25) !important;
  text-decoration: none;
  transition: filter .15s ease, color .15s ease, background .15s ease;
}
#home .steps-grid .step .txt .step-cta.btn:hover{ filter: brightness(1.05); }
#home .steps-grid .step .txt .step-cta.btn:active{ transform: none; }
#home .steps-grid .step .txt .step-cta.btn:focus-visible{
  outline: 2px solid #fff; outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(37,99,235,.45),
              0 6px 16px rgba(37,99,235,.20),
              inset 0 1px 0 rgba(255,255,255,.25) !important;
}
/* === Home steps: exact centering of CTAs under text === */
#home .steps-grid .step{ display:flex; gap:16px; align-items:flex-start; }
#home .steps-grid .step .num{ flex:0 0 56px; }

/* make the text column a 1-col grid: text stays left, actions row can center */
#home .steps-grid .step .txt{
  flex:1 1 auto;
  display:grid;
  grid-auto-flow: row;
  align-content:start;        /* keep content hugging the top */
  justify-items:stretch;      /* text uses full column width, left-aligned */
}

/* center the button row precisely within the column */
#home .steps-grid .step .txt .actions{
  display:block;
  margin-top:12px;
  justify-self:center;        /* <-- true horizontal center */
  width:auto;
  text-align:initial;         /* avoid inherited centering drift */
}

/* ensure no stray margins shift the pill */
#home .steps-grid .step .txt .step-cta{ margin:0; }
@media (max-width:720px){
  #home .steps-grid .step{ flex-direction:column; }
  #home .steps-grid .step .num{ margin-bottom:6px; }
  #home .steps-grid .step .txt .actions{ margin-top:10px; }
}
/* === Home steps: center CTA within the white space under the text === */
#home .steps-grid .step{ display:flex; gap:16px; align-items:stretch; }
#home .steps-grid .step .num{ flex:0 0 56px; }

#home .steps-grid .step .txt{
  flex:1 1 auto;
  display:grid;
  grid-template-rows: auto 64px;   /* row 1: text, row 2: white-space area */
  align-content:start;
}

#home .steps-grid .step .txt > :first-child{ margin-bottom: 0.5rem; } /* text spacing only */
#home .steps-grid .step .txt .actions{
  margin:0;                        /* no bias from margins */
  align-self:center;               /* vertical center in the white-space row */
  justify-self:center;             /* exact horizontal center */
  display:block;
  width:auto;
}

#home .steps-grid .step .txt .actions .step-cta{ margin:0; }

/* mobile: smaller white-space row but keep true centering */
@media (max-width:720px){
  #home .steps-grid .step{ flex-direction:column; }
  #home .steps-grid .step .num{ margin-bottom:6px; }
  #home .steps-grid .step .txt{ grid-template-rows:auto 56px; }
}
/* === Home steps: optical centering of CTAs across the whole card === */
/* Card uses: number badge 42px + gap 14px → shift pill left by half = 28px */
#home .steps-grid .step{ gap:14px !important; }          /* lock the gap used in math */
#home .steps-grid .step .txt{ display:block; }

#home .steps-grid .step .txt .actions{
  display:flex;
  justify-content:center;         /* center within the text column */
  align-items:center;
  margin-top:14px;                /* sit in the white space below the copy */
  transform: translateX(-28px);   /* optical correction: center in full card */
}

#home .steps-grid .step .txt .actions .btn,
#home .steps-grid .step .txt .actions .step-cta{
  margin:0;                       /* no residual margins nudging it */
}

/* On mobile, no correction needed (layout stacks) */
@media (max-width:720px){
  #home .steps-grid .step{ gap:12px !important; }
  #home .steps-grid .step .txt .actions{ transform:none; }
}
/* === Home steps: true vertical center in the white area + optical shadow fix === */

/* Let the whole card stretch vertically so we can center within the text column */
#home .steps-grid .step{ align-items: stretch !important; }

/* Make the text column 2 rows: text on row 1, button row takes remaining space */
#home .steps-grid .step .txt{
  display: grid !important;
  grid-template-rows: auto 1fr !important;  /* row 2 = the white space area */
  align-content: start !important;
}

/* Put the CTA in row 2 and center it both ways inside that area */
#home .steps-grid .step .txt .actions{
  margin: 0 !important;
  align-self: center !important;   /* vertical center in the white-space row */
  justify-self: center !important; /* horizontal center (we still keep the left nudge below) */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  /* keep the previous optical left-centering AND nudge up 3px to counter drop-shadow */
  transform: translate(-28px, -3px) !important;
}

/* Mobile: no transforms needed */
@media (max-width: 720px){
  #home .steps-grid .step .txt{ grid-template-rows: auto auto !important; }
  #home .steps-grid .step .txt .actions{ transform: none !important; }
}

/* tiny link under “Reports submitted: N” */
.trust-mini{
  display:block;
  margin-top:2px;
  font-size:12px;
  line-height:1.1;
  color:var(--brand-blue);
  text-decoration:none;
}
.trust-mini:hover{text-decoration:underline}
/* Center the page-level title across all pages, without touching section/card headers */
main > h1:first-of-type,
main .page-title,
main .hero h1 {
  text-align: center;
}

/* Keep subheads in components left-aligned */
.card h2, .card h3,
.modal h2, .modal h3,
.accordion h2, .accordion h3,
.table h2, .table h3 {
  text-align: left;
}
/* Center the blurb paragraph that immediately follows the page H1 */
.container > h1 + p.small {
  text-align: center;
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}