/* ==========================================================================
   AgnCred marketing site
   1. Type stacks
   2. Base styles and keyframes (from the design export)
   3. Header and footer chrome, and the interaction classes
   4. FAQ disclosure cards
   5. Subpage content typography (body class="subpage")
   6. Responsive nav
   ========================================================================== */

/* Section 1 (type stacks and tokens) and the header, menu and footer chrome
   now live in chrome.css, which every page links beside this file. */

/* --------------------------------------------------------------------------
   2. Base styles and keyframes (from the design export, unchanged)
   -------------------------------------------------------------------------- */

html{scroll-behavior:smooth}
body{margin:0;background:#F5F4EF;color:#0A0E1A;font-family:var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;overflow-wrap:break-word}
a{color:#03625A}a:hover{color:#02423D}
::selection{background:#DDF0ED;color:#02423D}
:focus-visible{outline:2px solid #0B8578;outline-offset:2px}
@keyframes caret{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slIn{from{opacity:0;transform:translateX(-300px)}60%{opacity:1;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes hc{0%{opacity:0}3%,96%{opacity:1}100%{opacity:0}}
@keyframes hj1{0%,4%{opacity:0}5.5%,96%{opacity:1}100%{opacity:0}}
@keyframes hj2{0%,6%{opacity:0}7.5%,96%{opacity:1}100%{opacity:0}}
@keyframes hj3{0%,8%{opacity:0}9.5%,96%{opacity:1}100%{opacity:0}}
@keyframes hj4{0%,10%{opacity:0}11.5%,96%{opacity:1}100%{opacity:0}}
@keyframes hj5{0%,12%{opacity:0}13.5%,96%{opacity:1}100%{opacity:0}}
@keyframes hj6{0%,14%{opacity:0}15.5%,96%{opacity:1}100%{opacity:0}}
@keyframes hj7{0%,16%{opacity:0}17.5%,96%{opacity:1}100%{opacity:0}}
@keyframes hlb{0%,18%{opacity:0}20%,96%{opacity:1}100%{opacity:0}}
@keyframes hs1{0%,19%{opacity:0}20%,22%{opacity:1}23%,100%{opacity:0}}
@keyframes hs2{0%,22%{opacity:0}23%,25%{opacity:1}26%,100%{opacity:0}}
@keyframes hhf{0%,25%{opacity:0}27%,96%{opacity:1}100%{opacity:0}}
@keyframes hsg{0%,28%{stroke-dashoffset:1;opacity:1}36%,96%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes hky{0%,37%{opacity:0}40%,96%{opacity:1}100%{opacity:0}}
@keyframes hdp{0%,43%{stroke-dashoffset:1;opacity:1}48%,96%{stroke-dashoffset:0;opacity:1}100%{opacity:0}}
@keyframes hb4{0%,48%{opacity:0}51%,96%{opacity:1}100%{opacity:0}}
@keyframes hk3{0%,52%{stroke-dashoffset:1;opacity:1}55%,96%{stroke-dashoffset:0;opacity:1}100%{opacity:0}}
@keyframes hb3{0%,55%{opacity:0}57%,96%{opacity:1}100%{opacity:0}}
@keyframes hk2{0%,58%{stroke-dashoffset:1;opacity:1}61%,96%{stroke-dashoffset:0;opacity:1}100%{opacity:0}}
@keyframes hb2{0%,61%{opacity:0}63%,96%{opacity:1}100%{opacity:0}}
@keyframes hk1{0%,64%{stroke-dashoffset:1;opacity:1}67%,96%{stroke-dashoffset:0;opacity:1}100%{opacity:0}}
@keyframes hb1{0%,67%{opacity:0}69%,96%{opacity:1}100%{opacity:0}}
@keyframes hwp{0%,70%{transform:translateY(1200px)}76%,100%{transform:translateY(0)}}
@keyframes hshf{0%,96%{opacity:1}100%{opacity:0}}
@keyframes hsl1{0%,78%{opacity:0;transform:translateX(-300px)}82%{opacity:1;transform:translateX(40px)}84%,96%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
@keyframes hsl2{0%,78.7%{opacity:0;transform:translateX(-300px)}82.7%{opacity:1;transform:translateX(40px)}84.7%,96%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
@keyframes hsl3{0%,79.4%{opacity:0;transform:translateX(-300px)}83.4%{opacity:1;transform:translateX(40px)}85.4%,96%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
@keyframes hvr{0%,89%{opacity:0}91%,96%{opacity:1}100%{opacity:0}}
#wipeRect{animation:hwp 12s cubic-bezier(0.22,1,0.36,1) infinite}
#sl1{animation:hsl1 12s cubic-bezier(0.22,1,0.36,1) infinite}
#sl2{animation:hsl2 12s cubic-bezier(0.22,1,0.36,1) infinite}
#sl3{animation:hsl3 12s cubic-bezier(0.22,1,0.36,1) infinite}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}#heroAnim *{animation:none !important}}

/* --- Everything below the chrome ----------------------------------------- */

.pad-link{display:inline-flex;align-items:center;min-height:var(--hit-min);padding:5px 2px;margin:-5px -2px}
.doc-link{display:inline-flex;align-items:center;min-height:var(--hit-min);padding:2px 0}

/* --- Buttons: one primary, then outline or text (systemic 2.2) -------------
   .btn-primary is the ONE filled variant and a view draws it once. It was
   three inline-styled fills (hero, verify, pricing). Everything else is an
   outline (.btn-outline, .btn-hero-alt, .btn-replay) or a plain link, and the
   gate in qa/a11y/axe-gate.mjs fails a page that fills a second one.
   The header pair (.btn-ghost, .btn-line) is in chrome.css and neither fills,
   so the home page has one fill and the guide pages have none. */
.btn-primary,.btn-outline,.btn-verify{display:inline-flex;align-items:center;justify-content:center;min-height:var(--hit-min);box-sizing:border-box;font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.3;text-decoration:none;border-radius:6px;cursor:pointer;transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease}
.btn-primary{background:#0B8578;color:#FFFFFF;border:0;padding:14px 28px}
.btn-primary:hover{color:#FFFFFF;box-shadow:0 0 0 1px #5FBFB4, 0 0 22px rgba(95,191,180,0.35)}
.btn-primary:active{transform:translateY(1px);background:#02423D}
/* On the light pricing band. */
.btn-outline{background:transparent;color:#03625A;border:1px solid #03625A;padding:13px 28px}
.btn-outline:hover{background:#DDF0ED;color:#02423D}
.btn-outline:active{transform:translateY(1px)}

.btn-hero-alt:hover{border-color:#5FBFB4 !important;color:#5FBFB4 !important}
.btn-hero-alt:active{transform:translateY(1px) !important}

.term-tab:hover{color:#F5F4EF !important}

.btn-replay{min-height:var(--hit-min)}
.btn-replay:hover{border-color:#5FBFB4 !important;color:#5FBFB4 !important}
.btn-replay:active{transform:translateY(1px) !important}

.own-input:focus{border-color:#0B8578 !important}

/* Verify sits on the dark terminal panel, so it is an outline in pine-300. */
.btn-verify{background:transparent;color:#5FBFB4;border:1px solid #5FBFB4;padding:11px 26px;font-size:14px}
.btn-verify:hover{background:rgba(95,191,180,0.12);color:#5FBFB4}
.btn-verify:active{transform:translateY(1px)}

.receipt-row:hover{background:rgba(11,133,120,0.07) !important}

.int-card:hover{border-color:#0B8578 !important}


/* --------------------------------------------------------------------------
   4. FAQ disclosure cards
   -------------------------------------------------------------------------- */

.faq-group{margin:34px 0 0;font-family:var(--font-display);font-size:14px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:#02423D}
.faq-group:first-child{margin-top:0}
.faq-item{background:#FFFFFF;border:1px solid #E0DED6;border-radius:6px;margin-top:14px}
.faq-item[open]{border-color:#0B8578}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-height:24px;padding:16px 18px;font-size:16px;font-weight:600;line-height:1.5;color:#0A0E1A}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary:hover{color:#03625A}
.faq-item summary::after{content:"+";flex:0 0 auto;font-family:var(--sans);font-size:16px;font-weight:700;line-height:1.5;color:#03625A}
.faq-item[open] summary::after{content:"\2212"}
.faq-answer{margin:0;padding:0 18px 18px;font-size:15px;line-height:1.7;color:#374151;max-width:74ch}

/* --------------------------------------------------------------------------
   5. Subpage content typography (body class="subpage")
   -------------------------------------------------------------------------- */

.subpage{background:#F5F4EF}
.subpage .doc{max-width:820px;margin:0 auto;padding:clamp(48px,7vw,84px) clamp(20px,4vw,48px) clamp(64px,8vw,96px)}
/* Display sizes were scaled by ~0.65 when the condensed display face
   was retired, to hold the measure of a long guide title on two lines. Space
   Grotesk is not condensed either, so those sizes stand. The uppercase and
   the tracking are untouched. */
.subpage .doc h1{margin:0 0 20px;font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(26px,3.3vw,38px);line-height:1.06;letter-spacing:0.035em;color:#0A0E1A}
.subpage .doc h2{margin:40px 0 12px;font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.3;color:#0A0E1A}
.subpage .doc h3{margin:28px 0 10px;font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.35;color:#0A0E1A}
.subpage .doc p,.subpage .doc li{font-size:16px;line-height:1.7;color:#374151}
.subpage .doc p{margin:0 0 16px}
.subpage .doc ul,.subpage .doc ol{margin:0 0 16px;padding-left:22px}
.subpage .doc li{margin:0 0 8px}
.subpage .doc a{color:#03625A}
.subpage .doc a:hover{color:#02423D}
.subpage .doc .lede{font-size:17.5px;line-height:1.65;color:#374151;max-width:62ch}
.subpage .doc .eyebrow{margin:0 0 12px;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:0.18em;color:#02423D;text-transform:uppercase}
.subpage .doc hr{border:none;height:1px;background:#E0DED6;margin:36px 0}
.subpage .doc code{font-family:var(--mono);font-size:13.5px;background:#FFFFFF;border:1px solid #E0DED6;border-radius:4px;padding:1px 5px;color:#02423D}
.subpage .doc pre{margin:0 0 20px;background:#0A0E1A;color:#C9D1E0;font-family:var(--mono);font-size:11.5px;line-height:1.7;padding:12px 14px;border-radius:6px;overflow:auto}
.subpage .doc pre code{background:none;border:none;padding:0;color:inherit;font-size:inherit}
/* F01: text is never cut off. A long identifier or file path in inline code has no space to break at, so it pushed the page wider than a phone (the doc column is a block, so the break opportunity has to be allowed on the text itself). Code inside pre keeps its own scroll and does not wrap. */
.subpage .doc{overflow-wrap:break-word}
.subpage .doc code,.subpage .doc td,.subpage .doc th{overflow-wrap:anywhere}
.subpage .doc pre code{overflow-wrap:normal}
.subpage .doc blockquote{margin:0 0 20px;padding:2px 0 2px 16px;border-left:2px solid #03625A;color:#374151}
.subpage .doc table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px;display:block;overflow-x:auto}
.subpage .doc th,.subpage .doc td{border:1px solid #E0DED6;padding:10px 12px;text-align:left;vertical-align:top;line-height:1.6;color:#374151}
.subpage .doc th{background:#FFFFFF;font-weight:700;color:#0A0E1A}
.subpage .doc img{max-width:100%;height:auto}
.subpage .doc .breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 18px;font-family:var(--sans);font-size:13px;color:#6B7385}
.subpage .doc .breadcrumb li:not(:last-child)::after{content:"/";margin-left:8px;color:#6B7385}
.subpage .doc .breadcrumb a{color:#03625A;text-decoration:none}
.subpage .doc .breadcrumb a:hover{color:#02423D;text-decoration:underline}

/* Score-card receipt rows: at ultra-narrow widths the four-column grid
   (92px date, company, key id, verify) exceeds the viewport; the key id
   column is the least essential and folds away below 400px. */
@media (max-width:400px){
  .receipt-row{grid-template-columns:78px 1fr auto !important;gap:8px !important}
  .receipt-row span:nth-child(3){display:none}
}