/* poofpdf.com — shared site stylesheet (header/footer/typography + app-specific styles).
   Self-hosted so the whole site stays same-origin / zero third-party network calls (see the
   Content-Security-Policy meta tag in each page). Mulish is bundled from @fontsource-variable/mulish
   (SIL Open Font License 1.1, Latin subset, variable weight 400-800). */

@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/mulish-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
   --font-sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand-blue:#11204e;
  --brand-blue-dark:#091330;
  --brand-gradient:linear-gradient(135deg,#16285b 0%,#091330 100%);
  --brand-orange:#a4441a;
  --brand-orange-dark:#853613;
  --bg:#eef1f9;
  --card:#ffffff;
  --ink:#1a2230;
  --ink-soft:#525c79;
  --border:#dbe0ec;
  --ok:#0e6b45;
  --warn:#7a5c05;
  --danger:#a8371f;
  --radius:14px;
  --shadow:0 2px 10px rgba(20,30,60,.06),0 1px 2px rgba(20,30,60,.08);
  --footer-ink:#c9d2ef;
  --footer-ink-strong:#ffffff;

   /* Global spacing scale and layout rhythm shared by every page. */
   --space-1:8px;
   --space-2:12px;
   --space-3:16px;
   --space-4:24px;
   --space-5:32px;
   --space-6:40px;
   --space-7:56px;
   --space-8:72px;
   --page-gutter:clamp(20px,4vw,48px);
   --page-block-space:clamp(32px,5vw,64px);
   --surface-padding:clamp(28px,4vw,48px);
   --section-space:clamp(40px,5vw,56px);
   --heading-content-gap:48px;
   --layout-max:1180px;
   --content-max:960px;
   --prose-measure:76ch;

  /* Brand-blue "tint" surfaces — the two light-blue backgrounds used for hover/active states,
     cards, badges and pills site-wide. Every light-blue background should reference one of these
     two instead of a one-off hex value, so there's exactly one "light blue" and one "stronger
     light blue" in the whole brand, not five near-identical near-duplicates. */
  --tint-blue:#f3f6ff;
  --tint-blue-strong:#e8ecfa;

  /* ===== Type scale — single source of truth for every heading/paragraph size on the site.
     p is the prose baseline (20px); headings scale up from there so h1 > h2 > … > h6 >= p.
     Component/chrome text that isn't prose (badges, table cells, nav labels, footer print,
     buttons, etc.) intentionally keeps its own smaller sizing — see comments at each spot. */
  --fs-p:20px;
  --fs-h6:20px;
  --fs-h5:22px;
  --fs-h4:24px;
  --fs-h3:27px;
  --fs-h2:31px;
  --fs-h1:38px;
  --lh-heading:1.25;
   --lh-body:1.7;
}
*{box-sizing:border-box;}

/* =========================================================================
   GLOBAL TYPE RULES — one shared baseline for every heading/paragraph on the
   site, driven by the --fs-*/--lh-* variables above. Page/component rules
   further down may still override color or margin for layout reasons, but
   font-size and line-height for real headings/paragraphs come from here.
   ========================================================================= */
h1,h2,h3,h4,h5,h6{margin:0;margin-bottom:var(--heading-content-gap);line-height:var(--lh-heading);font-weight:800;color:var(--ink);}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-h4);}
h5{font-size:var(--fs-h5);}
h6{font-size:var(--fs-h6);}
p{margin:0 0 var(--space-4);font-size:var(--fs-p);line-height:var(--lh-body);}

/* Visually hidden but still exposed to screen readers (standard sr-only clip pattern) — used to
   append accessible-name context (e.g. "home") after real visible text, per WCAG 2.5.3 Label in
   Name: the visible label must always come first/unmodified so it's a literal substring of the
   accessible name. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);}
button,input,select,textarea{font-family:var(--font-sans);}
body{padding-bottom:0;display:flex;flex-direction:column;min-height:100vh;}
body.modal-open{overflow:hidden;}
a{color:var(--brand-blue);}

/* Skip link — first focusable element on every page, visually hidden until focused. */
.skip-link{position:absolute;left:-9999px;top:auto;background:var(--brand-blue);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:100;font-size:13.5px;font-weight:600;text-decoration:none;}
.skip-link:focus{left:0;top:0;}
.availability-banner{margin:0;padding:var(--space-2) var(--page-gutter);background:var(--brand-gradient);color:var(--footer-ink-strong);font-size:14px;font-weight:700;line-height:1.45;text-align:center;}

/* =========================================================================
   SITE HEADER (white, shared across all pages)
   ========================================================================= */
header.site-header{background:#fff;border-bottom:1px solid var(--border);padding:var(--space-4) var(--page-gutter);}
.site-header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);max-width:var(--layout-max);margin:0 auto;flex-wrap:wrap;}
.header-right{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;}
.logo-lockup{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1;}
.logo-lockup:focus-visible{outline:2.5px solid var(--brand-blue);outline-offset:4px;border-radius:4px;}
/* Header/footer logo: the illustrated PNG lockup (see public/logo.png). Its "poof" lettering is
   dark navy, so on the dark footer gradient it sits on a small light backing chip to keep it
   legible/high-contrast (WCAG 1.4.3) instead of disappearing into the background. */
.logo-img{height:38px;width:auto;display:block;}
.site-nav{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;}
.site-nav a{color:var(--ink-soft);text-decoration:none;font-size:13.5px;font-weight:600;padding:6px 2px;border-bottom:2px solid transparent;}
.site-nav a:hover{color:var(--brand-blue);}
.site-nav a[aria-current="page"]{color:var(--brand-blue);border-bottom-color:var(--brand-blue);}
.site-nav a:focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px;border-radius:3px;}

/* Header "Other Tools" dropdown (native <details>, no JS required) */
.nav-dropdown{position:relative;}
.nav-dropdown summary{cursor:pointer;color:var(--ink-soft);font-size:13.5px;font-weight:600;list-style:none;display:flex;align-items:center;gap:5px;padding:6px 2px;}
.nav-dropdown summary::-webkit-details-marker{display:none;}
.nav-dropdown summary::after{content:"";width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid var(--ink-soft);margin-left:1px;transition:transform .15s;}
.nav-dropdown:hover summary{color:var(--brand-blue);}
.nav-dropdown:hover summary::after{border-top-color:var(--brand-blue);}
.nav-dropdown[open] summary::after{transform:rotate(180deg);}
.nav-dropdown ul{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);list-style:none;margin:0;padding:8px;min-width:230px;z-index:20;}
.nav-dropdown li{margin:0;}
.nav-dropdown ul a{display:block;padding:8px 10px;border-radius:6px;font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:none;}
.nav-dropdown ul a:hover{background:var(--tint-blue);color:var(--brand-blue);}

/* Homepage hero */
.hero{padding:0 var(--space-1) var(--space-6);text-align:center;}
.hero h1{margin:0;margin-bottom:var(--heading-content-gap);color:var(--brand-blue);letter-spacing:-.01em;}
.hero-sub{margin:0 auto;max-width:56ch;color:var(--ink-soft);}
@media (max-width:600px){.hero h1{font-size:30px;}}

/* Short overview/disclaimer blurb under the upload dropzone. */
.intro-heading{margin:var(--space-5) 0 0;margin-bottom:var(--heading-content-gap);padding-top:var(--space-5);border-top:1px solid var(--border);color:var(--brand-blue);text-align:center;}
.intro-blurb{color:var(--ink-soft);margin:0;}
.intro-blurb a{color:var(--ink-soft);text-decoration:underline;}
.intro-blurb a:hover{color:var(--brand-blue);}
.seo-benefit{margin-top:var(--space-8);}
.card .seo-benefit h3{color:var(--brand-blue);text-align:center;}
.pdf-approaches{margin-top:var(--space-8);}
.card .pdf-approaches h3{margin-bottom:var(--heading-content-gap);color:var(--brand-blue);text-align:center;}
.pdf-approaches dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);margin:0;}
.pdf-approaches dl > div{border-top:3px solid var(--brand-blue);padding-top:var(--space-4);}
.pdf-approaches dl > div:nth-child(2){border-top-color:var(--ok);}
.pdf-approaches dl > div:nth-child(3){border-top-color:var(--brand-orange);}
.pdf-approaches dt{font-size:20px;font-weight:800;line-height:1.3;color:var(--ink);}
.pdf-approaches dd{margin:var(--space-2) 0 0;color:var(--ink-soft);font-size:16px;line-height:1.65;}
.pdf-limitations{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border);color:var(--ink-soft);}
.pdf-limitations p{margin:0;font-size:15px;line-height:1.6;}
.pdf-limitations p + p{margin-top:var(--space-3);}
.pdf-limitations a{color:var(--brand-blue);text-decoration:underline;}
@media (max-width:760px){
   .pdf-approaches dl{grid-template-columns:1fr;gap:22px;}
}

main{max-width:var(--layout-max);margin:var(--page-block-space) auto;padding:0 var(--page-gutter);width:100%;flex:1;}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--surface-padding);margin-bottom:var(--space-5);}
.card h2{margin-top:0;}
.card h3{margin:var(--space-5) 0 0;margin-bottom:var(--heading-content-gap);}
.flush-heading-top{margin-top:0;}
.audit-section-heading{margin-top:var(--space-3);}
.muted{color:var(--ink-soft);font-size:13px;}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:999px;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;background:var(--brand-gradient);color:#fff;transition:transform .1s,filter .15s;}
.btn:hover{filter:brightness(1.06);}
.btn:active{transform:scale(.98);}
.btn.secondary{background:#fff;color:var(--brand-blue);border:1.5px solid var(--brand-blue);}
.btn.ghost{background:transparent;color:var(--ink-soft);border:1.5px solid var(--border);}
.btn.ai{background:var(--brand-orange);color:#fff;}
.btn.ai:hover{background:var(--brand-orange-dark);filter:none;}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;}
.btn.small{padding:6px 14px;font-size:12.5px;}
#dropzone{border:2px dashed #b3bedc;border-radius:var(--radius);padding:var(--space-8) var(--space-4);text-align:center;background:var(--tint-blue);cursor:pointer;transition:border-color .15s,background .15s;}
#dropzone.drag{border-color:var(--brand-blue);background:var(--tint-blue-strong);}
#dropzone svg{width:46px;height:46px;color:var(--brand-blue);margin-bottom:var(--space-2);}
.dropzone-note{margin-top:var(--space-1);}
.upload-info{margin-top:var(--space-3);}
.dashboard-file-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3);}
.page-count-label{margin-left:var(--space-2);}
/* Real, visible, keyboard-focusable "choose a file" control -- styled to read as an inline text
   link (matches the rest of the site's link styling) rather than a boxy button, so it fits
   inside the sentence the way axesCheck's own uploader does it. */
.link-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--brand-blue);text-decoration:underline;cursor:pointer;}
.link-btn:focus-visible{outline:2.5px solid var(--brand-blue);outline-offset:3px;border-radius:3px;}

/* Upload section text — already matches the global p size; this just re-asserts it against the
   more-specific .muted/.intro-blurb rules elsewhere so this section reads as prominently as the
   hero, since it's the very first interactive thing a visitor sees. */
#step-upload > p.muted,
#dropzone > div,
#step-upload .intro-blurb{font-size:var(--fs-p);line-height:1.55;}
@media (max-width:600px){
  #step-upload > p.muted,
  #dropzone > div,
  #step-upload .intro-blurb{font-size:18px;}
}
progress{width:100%;height:10px;border-radius:6px;overflow:hidden;accent-color:var(--brand-blue);}
.progress-wrap{margin:var(--space-4) 0;}
.tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--border);margin-bottom:var(--space-5);flex-wrap:wrap;}
.tab-btn{background:none;border:none;padding:var(--space-2) var(--space-3);font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;}
.tab-btn.active{color:var(--brand-blue);border-bottom-color:var(--brand-blue);background:var(--tint-blue-strong);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
table.wcag{width:100%;border-collapse:collapse;font-size:13.5px;}
table.wcag th,table.wcag td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
table.wcag th{color:var(--ink-soft);font-size:12px;text-transform:uppercase;letter-spacing:.04em;}
.wcag-summary{display:flex;gap:var(--space-1);flex-wrap:wrap;margin:var(--space-3) 0 var(--space-5);}
.wcag-category{margin-bottom:var(--space-6);}
.wcag-category h4{margin-bottom:var(--heading-content-gap);}
.wcag-category > p.muted{margin-top:0;margin-bottom:10px;}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
.badge-high, .badge-pass{background:#dcf5ea;color:var(--ok);}
.badge-medium, .badge-warn{background:#fdf4d2;color:var(--warn);}
.badge-low, .badge-fail{background:#fbe2db;color:var(--danger);}
.badge-info{background:var(--tint-blue-strong);color:var(--brand-blue);}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
.form-field{display:flex;flex-direction:column;gap:5px;}
.form-field label{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.form-field input, .form-field select, .form-field textarea{padding:9px 11px;border:1.5px solid var(--border);border-radius:8px;font-size:13.5px;font-family:inherit;background:#fff;}
.form-field.missing input{border-color:var(--danger);background:#fff1ee;}
.field-flag{font-size:11.5px;color:var(--danger);font-weight:600;}
.block-row{display:flex;align-items:flex-start;gap:10px;padding:8px 6px;border-bottom:1px solid var(--border);}
.block-row select{flex:none;width:90px;font-size:12px;padding:5px 6px;border-radius:6px;border:1.5px solid var(--border);}
.block-row .txt{flex:1;font-size:13px;line-height:1.4;padding-top:4px;word-break:break-word;}
.block-row .pg{flex:none;width:34px;color:var(--ink-soft);font-size:11.5px;padding-top:6px;}
.order-row{display:flex;align-items:center;gap:8px;padding:7px 6px;border-bottom:1px solid var(--border);background:#fff;cursor:grab;}
.order-row.dragging{opacity:0.4;}
.order-row.drop-target{border-top:2px solid var(--brand-blue);}
.order-row .handle{flex:none;color:var(--ink-soft);font-size:14px;line-height:1;}
.order-row .pg{flex:none;width:34px;color:var(--ink-soft);font-size:11.5px;}
.order-row .kind{flex:none;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);width:44px;}
.order-row .txt{flex:1;font-size:13px;line-height:1.35;word-break:break-word;}
.order-row .arrows{flex:none;display:flex;gap:2px;}
.order-row .arrows button{border:1.5px solid var(--border);background:#fff;border-radius:6px;width:24px;height:24px;font-size:12px;line-height:1;cursor:pointer;}
.order-row .arrows button:disabled{opacity:0.3;cursor:default;}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-4);}
.img-card{border:1.5px solid var(--border);border-radius:12px;padding:12px;background:var(--tint-blue);}
.img-card.flagged{border-color:#f1b199;background:#fff1ed;}
.img-card img{width:100%;height:120px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;}
.img-card textarea{width:100%;min-height:50px;font-size:12.5px;padding:6px 8px;border-radius:7px;border:1.5px solid var(--border);font-family:inherit;resize:vertical;}
.img-card .meta{font-size:11px;color:var(--ink-soft);margin-bottom:6px;}
.img-card .replacement-note{font-size:11px;color:var(--brand-orange-dark);background:#fff1ed;border:1px solid #f1b199;border-radius:6px;padding:5px 7px;margin-bottom:6px;}
.img-card .replacement-note.structured{color:#0a6b4f;background:#e9fbf3;border-color:#8fd8bc;}
.img-card label.dec{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:6px;color:var(--ink-soft);}
.table-card{border:1.5px solid var(--border);border-radius:12px;padding:var(--space-4);margin-bottom:var(--space-4);background:var(--tint-blue);}
.table-card table{border-collapse:collapse;width:100%;margin-top:10px;font-size:12px;}
.table-card table td, .table-card table th{border:1px solid var(--border);padding:5px 7px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.table-card table th{background:var(--tint-blue-strong);}
.table-card .head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.table-card .controls{display:flex;gap:14px;align-items:center;font-size:12.5px;color:var(--ink-soft);flex-wrap:wrap;}
.legend{display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft);margin-top:var(--space-3);}
.legend span{display:flex;align-items:center;gap:6px;}
.ai-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);background:#fdf1ea;border:1.5px solid #ecc19f;border-radius:12px;padding:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap;}
.ai-cta .txt{font-size:13.5px;color:var(--ink);flex:1;min-width:220px;}
.ai-cta .txt b{color:var(--brand-orange-dark);}
.ai-cta.prominent{background:#fbe3cd;border-color:var(--brand-orange);padding:18px 20px;}
.ai-cta .btn.ai{flex:none;}
/* modal */
#warnModalBg{position:fixed;inset:0;background:rgba(20,25,40,.55);display:none;align-items:center;justify-content:center;z-index:60;padding:20px;}
#warnModalBg.show{display:flex;}
#warnModal{background:var(--card);border-radius:16px;max-width:760px;width:100%;max-height:88vh;overflow:auto;padding:var(--space-5) var(--space-6);box-shadow:0 20px 60px rgba(0,0,0,.3);}
#warnModal h2{color:var(--danger);margin-top:0;display:flex;align-items:center;gap:10px;}
.warn-page-item{display:flex;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--border);align-items:center;}
.warn-page-item img{width:70px;height:90px;object-fit:cover;border:1px solid var(--border);border-radius:6px;background:#fafafa;}
.warn-page-item .txt{font-size:13px;}
.ack-row{display:flex;align-items:flex-start;gap:var(--space-2);margin-top:var(--space-4);background:#fff8df;padding:var(--space-3);border-radius:10px;font-size:13px;}
.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-5);}
.modal-review-action{display:flex;justify-content:flex-end;padding:var(--space-3) 0;}
.modal-review-action-top{border-bottom:1px solid var(--border);margin-bottom:var(--space-1);}
.modal-review-action-bottom{border-top:1px solid var(--border);margin-top:var(--space-3);}
.export-grid{display:grid;grid-template-columns:1fr;max-width:520px;gap:var(--space-4);}
.export-card{border:1.5px solid var(--border);border-radius:12px;padding:var(--space-4);}
.export-card h3{margin-top:0;}
.decision-group{border:1.5px solid var(--border);border-radius:8px;padding:var(--space-4);margin:0 0 var(--space-4);background:#fff;}
.decision-group-primary{border-color:var(--brand-blue);background:var(--tint-blue);}
.decision-group-primary.is-risk{border-color:var(--brand-orange);background:#fdf1e8;}
.decision-group legend{padding:0 6px;font-weight:700;font-size:14px;}
.decision-group.is-disabled{opacity:.58;}
.decision-reason{margin:0 0 12px;font-size:13px;line-height:1.45;}
.decision-option{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3);border:1.5px solid var(--border);border-radius:7px;background:#fff;cursor:pointer;}
.decision-option + .decision-option{margin-top:var(--space-2);}
.decision-option.is-recommended{border-color:var(--brand-blue);box-shadow:inset 3px 0 0 var(--brand-blue);}
.decision-option input{flex:none;margin-top:3px;}
.decision-option span{display:block;line-height:1.35;}
.decision-option small{display:block;color:var(--ink-soft);font-size:12px;margin-top:3px;}
.export-progress{margin-top:18px;padding:14px;border:1.5px solid var(--border);border-radius:8px;background:var(--tint-blue);}
.export-progress.is-error{border-color:var(--danger);background:#fff1ee;}
.progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:13px;}
.export-progress p{margin:7px 0 0;}
.task-progress{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);width:min(520px,calc(100vw - 32px));padding:14px 16px;border:2px solid var(--brand-blue);border-radius:8px;background:#fff;box-shadow:var(--shadow);z-index:90;}
.task-progress p{margin:7px 0 0;font-size:12.5px;color:var(--ink-soft);}
.task-progress.is-error{border-color:var(--danger);background:#fff1ee;}
.task-progress.is-error .task-progress-dismiss{margin-top:10px;}
.review-navigation{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;font-size:12.5px;color:var(--ink-soft);}
.review-navigation-top{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:var(--space-4) 0;}
.review-navigation-bottom{border-top:1px solid var(--border);margin-top:var(--space-4);}
.review-navigation .btn{flex:none;}
/* Hero recommendation banner (Structure / Color Contrast & Links tabs) -- the scan's own auto-
   computed "should you rebuild / should you fix contrast" verdict, always the first thing shown
   in the tab so it can't be missed or mistaken for one of the other lower-priority disclaimers
   further down. Baseline 20px per explicit user direction; .is-risk swaps the accent color to
   flag the riskier (visual-appearance-changing) recommendation. */
.hero-recommendation{font-size:20px;line-height:1.55;padding:var(--space-4);margin-bottom:var(--space-5);border:2px solid var(--brand-blue);border-radius:var(--radius);background:var(--tint-blue);}
.hero-recommendation.is-risk{border-color:var(--brand-orange);background:#fdf1e8;}
.hero-recommendation label{display:flex;align-items:flex-start;gap:12px;font-weight:700;cursor:pointer;}
.hero-recommendation input[type="checkbox"]{width:24px;height:24px;flex:none;margin-top:3px;}
.hero-recommendation b{color:var(--brand-blue);}
.hero-recommendation.is-risk b{color:var(--brand-orange-dark);}
/* A recommendation that's currently a no-op (e.g. heading-promotion while Rebuild & Tag is
   selected, since a full rebuild already re-tags every heading directly) -- grayed out rather
   than hidden, so it's still clear the option exists and WHY it's inactive right now. */
.hero-recommendation.is-disabled{border-color:var(--border);background:var(--bg-alt,#f4f4f6);}
.hero-recommendation.is-disabled label{cursor:not-allowed;color:var(--muted-text,#666);}
.hero-recommendation.is-disabled input[type="checkbox"]{cursor:not-allowed;}
.hero-recommendation.is-disabled b{color:inherit;}
/* Rebuild-ack checkbox label \u2014 same small-print size as .muted, kept as its own class (rather
   than an inline style="font-size:...") so the JS that renders it never hardcodes a font-size. */
.ack-label{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;margin-bottom:10px;color:var(--ink-soft);}
.conf-pill{font-size:11px;}
.hidden{display:none !important;}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;font-size:13px;box-shadow:var(--shadow);z-index:80;}
.spinner{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}
.file-pill{display:inline-flex;align-items:center;gap:8px;background:var(--tint-blue-strong);color:var(--brand-blue);padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;}
.checklist-item{display:flex;gap:var(--space-2);padding:var(--space-3) 0;border-bottom:1px solid var(--border);font-size:13px;}
.checklist-item input{margin-top:3px;}
@media (max-width:720px){
   .form-grid,.export-grid{grid-template-columns:1fr;}
   .tab-panel,.decision-group,.decision-option,.decision-option span{min-width:0;overflow-wrap:anywhere;}
   .ai-cta .txt{min-width:0;}
   .table-card{min-width:0;overflow:hidden;}
   .table-card table,table.wcag{display:block;max-width:100%;overflow-x:auto;}
   .review-navigation{align-items:stretch;flex-direction:column;}
   .review-navigation .btn{width:100%;}
}

/* =========================================================================
   LEGAL / CONTENT PAGES (About, Terms, Privacy, Accessibility)
   ========================================================================= */
.content-page{max-width:var(--content-max);margin-inline:auto;}
.content-page h1{margin-top:0;margin-bottom:var(--heading-content-gap);}
.content-page .updated{color:var(--ink-soft);font-size:12.5px;margin-top:calc(-1 * var(--space-2));margin-bottom:var(--space-5);}
.content-page h2{margin-top:var(--section-space);}
.content-page h3{margin-top:var(--space-6);}
.content-page p{color:var(--ink);}
.content-page > p,.content-page > ul,.content-page > ol{max-width:var(--prose-measure);}
.content-page li{font-size:var(--fs-p);line-height:var(--lh-body);color:var(--ink);}
.content-page li + li{margin-top:var(--space-2);}
.content-page ul, .content-page ol{margin:0 0 var(--space-5);padding-left:var(--space-4);}
.content-page a{text-decoration:underline;}

/* Single "back to home" link used once on FAQ/How-To (not repeated per-answer). */
.back-home-link{display:inline-flex;align-items:center;gap:var(--space-1);font-size:13.5px;font-weight:600;margin-bottom:var(--space-4);}

/* =========================================================================
   FAQ accordion (native <details>/<summary>, same zero-JS convention as the
   header/footer "Other Tools" dropdowns) -- used on faq.html and the
   product-troubleshooting mini-FAQ on how-to.html.
   ========================================================================= */
.faq-list{display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-5) 0 var(--space-6);}
.faq-item{border:1.5px solid var(--border);border-radius:12px;background:#fff;padding:var(--space-1) var(--space-4);}
.faq-item summary{cursor:pointer;list-style:none;font-weight:700;font-size:17px;color:var(--brand-blue);padding:var(--space-3) 0;display:flex;align-items:center;gap:var(--space-2);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .q-text{flex:1;}
.faq-item summary::after{content:"+";flex:none;font-size:22px;font-weight:400;color:var(--ink-soft);transition:transform .15s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-a{padding:var(--space-1) 0 var(--space-4);color:var(--ink);}
.faq-item .faq-a p{font-size:18px;line-height:var(--lh-body);}
.faq-item .faq-a p:last-child{margin-bottom:0;}

/* =========================================================================
   How-To page: illustrative product UI mockups (NOT real screenshots --
   hand-drawn approximations styled to match the real app, labeled as such
   so nobody mistakes them for the live UI, which will keep changing).
   ========================================================================= */
.howto-shot{border:1.5px solid var(--border);border-radius:12px;background:var(--tint-blue);padding:var(--space-4);margin:var(--space-4) 0 var(--space-5);}
.howto-shot .shot-chrome{display:flex;gap:var(--space-1);margin-bottom:var(--space-3);}
.howto-shot .shot-dot{width:9px;height:9px;border-radius:50%;background:#c7cee4;}
.howto-shot .shot-mock{background:#fff;border:1px solid var(--border);border-radius:10px;padding:var(--space-4);}
.howto-shot .shot-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--ink-soft);}
.howto-shot .shot-row b{color:var(--brand-blue);}
.howto-shot .shot-row:last-child{border-bottom:none;}
.howto-shot .shot-caption{margin:var(--space-3) 0 0;font-size:12px;color:var(--ink-soft);font-style:italic;}
.howto-upload-mock{padding:var(--space-6) var(--space-3);text-align:center;border-style:dashed;}
.howto-upload-title{font-weight:700;color:var(--brand-blue);}
.howto-upload-note{margin-top:var(--space-1);font-size:12.5px;color:var(--ink-soft);}
.howto-toc{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-4);margin:var(--space-4) 0 var(--space-6);background:var(--tint-blue);border:1px solid var(--border);border-radius:12px;text-align:center;}
.howto-toc a{font-size:13.5px;font-weight:600;}
.howto-eyebrow{display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--brand-orange-dark);margin-bottom:var(--space-2);}

/* =========================================================================
   SITE FOOTER (brand blue, shared across all pages)
   ========================================================================= */
footer.site-footer{background:var(--brand-gradient);color:var(--footer-ink);margin-top:var(--space-7);}
.site-footer-inner{max-width:var(--layout-max);margin:0 auto;padding:var(--space-7) var(--page-gutter) var(--space-6);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-7);}
/* Footer nav-group headings retain compact small-caps typography while sharing the global
   heading-to-content spacing used everywhere else. */
.footer-col h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--footer-ink-strong);margin:0;margin-bottom:var(--heading-content-gap);}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.footer-col a{color:var(--footer-ink);text-decoration:none;font-size:13.5px;}
.footer-col a:hover{color:#fff;text-decoration:underline;}
.footer-col a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:3px;}
.footer-brand .logo-img{height:76px;background:#fff;padding:14px 22px;border-radius:14px;}
/* Footer boilerplate copy under the logo is intentionally smaller than body prose (standard
   small-print footer convention), same reasoning as .footer-col h2 above. */
.footer-brand p{font-size:13px;line-height:1.55;color:var(--footer-ink);max-width:32ch;margin:12px 0 0;}
.footer-tools summary{cursor:pointer;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--footer-ink-strong);font-weight:700;list-style:none;display:flex;align-items:center;gap:6px;}
.footer-tools summary::-webkit-details-marker{display:none;}
.footer-tools summary::after{content:"";width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid var(--footer-ink-strong);margin-left:2px;transition:transform .15s;}
.footer-tools[open] summary::after{transform:rotate(180deg);}
.footer-tools ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.footer-tools a{color:var(--footer-ink);text-decoration:none;font-size:13.5px;}
.footer-tools a:hover{color:#fff;text-decoration:underline;}
.footer-legend{max-width:var(--layout-max);margin:0 auto;padding:0 var(--page-gutter) var(--space-4);display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:12px;color:var(--footer-ink);}
.footer-legend span{display:flex;align-items:center;gap:6px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding:var(--space-4) var(--page-gutter);}
.footer-bottom p{max-width:var(--layout-max);margin:0 auto;padding:0;font-size:12px;color:var(--footer-ink);text-align:center;}
@media (max-width:760px){
  .site-footer-inner{grid-template-columns:1fr;}
}