/* ==========================================================================
   AQEVON RESOURCE LIBRARY — shared stylesheet
   Used ONLY by pages under /resources/. index.html keeps its own inline
   <style> block untouched — this file duplicates the relevant design tokens
   and patterns on purpose, so nothing here can ever affect the homepage.
   Same visual language: dark navy, cyan/amber accents, sharp 2px radius,
   hairline borders, Inter + IBM Plex Mono. See /AQEVON_DECISIONS.md for the
   Phase 1 Resource Library entry.
   ========================================================================== */

:root{
  --bg:#0B1220;
  --bg-alt:#0F1729;
  --panel:#121B2E;
  --border:#22314A;
  --text:#E7ECF5;
  --text-dim:#9FB0C9;
  --text-faint:#7888A1;
  --accent:#00D9C0;
  --accent-dim:#0A8F80;
  --amber:#E8A23A;
  --radius:2px;
  --maxw:1180px;
  --maxw-article:820px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }
body{
  background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono',monospace;}
.c-teal{color:var(--accent);} .c-white{color:var(--text);} .c-amber{color:var(--amber);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
a{color:inherit; text-decoration:none;}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
img, svg{max-width:100%;}

.grid-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:64px 64px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#04120F; padding:12px 20px; font-weight:700; font-size:14px;
  border-radius:var(--radius); text-decoration:none;
}
.skip-link:focus{ left:16px; top:16px; }

/* HEADER — identical structure to the homepage header, links point back at
   homepage anchors (/#section) since these are separate pages, not anchors. */
header{
  position:sticky; top:0; z-index:50; background:rgba(11,18,32,0.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:80px;}
.brandblock{display:flex; align-items:center; gap:10px;}
.brand-mark{width:26px; height:26px; flex:none; object-fit:contain; display:block;}
.brand-text{display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0;}
.logo{font-weight:800; font-size:19px; letter-spacing:0.5px; line-height:1; white-space:nowrap;}
/* Tagline on ONE horizontal line under AQEVON, matching the homepage header exactly. */
.brand-tagline{
  font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:0.3px;
  white-space:nowrap; line-height:1.3;
}
@media (max-width:560px){ .brand-tagline{display:none;} }
.navlinks{display:flex; gap:28px; font-size:14px; color:var(--text-dim); align-items:center;}
.navlinks a:hover{color:var(--accent);}
.navlinks a.current{color:var(--accent);}
.nav-cta{
  border:1px solid var(--accent-dim); color:var(--accent); padding:9px 18px; font-size:13px;
  font-weight:600; letter-spacing:0.3px; border-radius:var(--radius); transition:all .2s; white-space:nowrap;
}
.nav-cta:hover{background:var(--accent); color:#04120F; border-color:var(--accent);}
.menu-btn{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.menu-btn span{width:22px; height:2px; background:var(--text); display:block;}
@media (max-width:860px){
  .navlinks{
    position:fixed; top:80px; left:0; right:0; bottom:0; z-index:49; background:var(--bg);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 32px 32px; border-top:1px solid var(--border);
    transform:translateY(-8px); opacity:0; visibility:hidden; transition:all .18s ease;
  }
  .navlinks.open{transform:translateY(0); opacity:1; visibility:visible;}
  .navlinks a{width:100%; padding:16px 0; border-bottom:1px solid var(--border); font-size:16px;}
  .navlinks .nav-cta{margin-top:20px; text-align:center;}
  .menu-btn{display:flex;}
}

/* BREADCRUMB — new small component, only needed on multi-level pages */
.breadcrumb{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-faint);
  letter-spacing:0.3px; padding:18px 0; border-bottom:1px solid var(--border);
}
.breadcrumb a{color:var(--text-faint);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb .sep{margin:0 8px; color:var(--border);}
.breadcrumb .current{color:var(--text-dim);}

section{position:relative; z-index:1; padding:56px 0;}
@media (max-width:640px){ section{padding:40px 0;} }
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:24px; height:1px; background:var(--accent); flex:none;}
h1{font-size:clamp(28px,4vw,42px); font-weight:800; letter-spacing:-0.8px; line-height:1.12; max-width:820px; margin-bottom:14px;}
h2{font-size:clamp(22px,2.8vw,30px); font-weight:800; letter-spacing:-0.5px; max-width:720px; margin-bottom:10px;}
h3{font-size:17px; font-weight:700; margin-bottom:8px;}
.section-lead{color:var(--text-dim); max-width:680px; font-size:15.5px; margin-bottom:24px;}
p{color:var(--text-dim); font-size:14.5px; margin-bottom:14px; max-width:var(--maxw-article);}
.article-body p, .article-body li{font-size:15px; color:var(--text-dim); line-height:1.7;}
.article-body h3{margin-top:28px; color:var(--text);}
/* Major article sections use h2 for correct H1>H2>H3 semantics, but keep
   the same visual treatment former h3 section headers had — the heading
   LEVEL changed for accessibility/SEO structure, not the appearance. */
.article-body h2{font-size:17px; font-weight:700; letter-spacing:normal; max-width:none; margin-top:28px; margin-bottom:8px; color:var(--text);}
.article-body{max-width:var(--maxw-article);}

.btn-primary{
  background:var(--accent); color:#04120F; font-weight:700; font-size:14.5px;
  padding:15px 26px; border-radius:var(--radius); display:inline-block; transition:transform .15s; border:none; cursor:pointer;
}
.btn-primary:hover{transform:translateY(-2px);}
.btn-secondary{
  border:1px solid var(--border); color:var(--text); font-weight:600; font-size:14.5px;
  padding:15px 26px; border-radius:var(--radius); transition:all .15s; background:none; cursor:pointer; display:inline-block;
}
.btn-secondary:hover{border-color:var(--text-dim);}

/* Labels required by the content-quality bar: every framework/example gets
   one of these, never presented as unlabeled fact. */
.tag-label{
  display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace;
  font-size:10.5px; letter-spacing:1px; text-transform:uppercase; padding:5px 10px;
  border:1px solid var(--border); border-radius:var(--radius); color:var(--text-faint); margin-bottom:14px;
}
.tag-label.framework{color:var(--accent); border-color:var(--accent-dim);}
.tag-label.reference-arch{color:var(--amber); border-color:var(--amber);}
.framework-disclaimer{
  font-size:12.5px; color:var(--text-faint); border-left:2px solid var(--border); padding-left:14px; margin:18px 0;
}

/* RESOURCE HUB — hero/featured card + category rows */
.resource-hero{
  background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent);
  padding:24px 28px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  margin-bottom:36px;
}
.resource-hero .tag-label{margin-bottom:10px;}
.resource-hero h3{font-size:20px; margin-bottom:6px;}
.resource-hero p{margin-bottom:0; font-size:13.5px;}
.resource-category{margin-bottom:0; padding:22px 0; border-top:1px solid var(--border);}
.resource-category:first-of-type{border-top:none; padding-top:0;}
.resource-category:last-child{padding-bottom:0;}
.resource-category-title{
  display:flex; align-items:center; gap:9px; font-family:'IBM Plex Mono',monospace; font-size:12px;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--text-faint); margin-bottom:14px;
}
.resource-category-title::before{content:''; width:7px; height:7px; flex:none; background:var(--accent-dim);}
/* distinct accent per category — hierarchy without new decorative art */
#guides .resource-category-title::before{background:var(--accent);}
#checklists .resource-category-title::before{background:var(--accent-dim);}
#frameworks .resource-category-title::before{background:var(--amber);}
#labs .resource-category-title::before{background:var(--text-dim);}
.resource-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border);}
.resource-card{background:var(--bg-alt); padding:20px 20px; display:flex; flex-direction:column;}
.resource-card .kind{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--amber); letter-spacing:1px; text-transform:uppercase; margin-bottom:8px;}
.resource-card h3{font-size:15px; margin-bottom:6px;}
.resource-card p{font-size:12.5px; margin-bottom:10px; flex:1;}
.resource-card .readmore{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--accent); margin-top:auto;}
@media (max-width:860px){ .resource-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .resource-grid{grid-template-columns:1fr;} }

/* Simple ordered checklist pattern, reused by any checklist-style resource.
   2-column on desktop to keep long checklists from turning into a very long
   single-column scroll; each item is kept intact within its column. */
.checklist{list-style:none; counter-reset:cl; column-count:2; column-gap:36px;}
.checklist li{
  counter-increment:cl; position:relative; padding:12px 0 12px 40px; border-bottom:1px solid var(--border);
  font-size:14px; color:var(--text-dim); break-inside:avoid; -webkit-column-break-inside:avoid;
}
.checklist li::before{
  content:counter(cl, decimal-leading-zero); position:absolute; left:0; top:12px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent-dim);
}
.checklist li:last-child{border-bottom:none;}
@media (max-width:760px){ .checklist{column-count:1;} }
/* strictly-ordered decision paths must stay single-column and read top to
   bottom — reuses the numbered-item look without the multi-column split */
.checklist-linear{column-count:1;}
/* Higher-specificity selector (.article-body .checklist-group-title) so this
   always wins over the more generic .article-body h2 rule above, regardless
   of source order — these are h2 elements for semantic correctness but keep
   their own distinct label styling, not the generic section-heading look. */
.article-body .checklist-group-title{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); margin:0 0 6px; font-weight:800; max-width:none;}

/* Domain grid for the 50-question checklist: five semantic .checklist-group
   containers (each a heading + its own <ol class="checklist">) placed in a
   2-column grid — 01–10 left / 11–20 right / 21–30 left / 31–40 right /
   41–50 full-width (odd group out). Reduces vertical scroll while keeping
   each domain's 10 questions intact and sequential; row spacing is handled
   by the grid gap, not per-title margins, so alignment stays consistent
   across columns. Each group's own list is forced single-column since the
   grid already provides the 2-up layout. */
.checklist-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 36px;}
.checklist-grid .checklist-group:last-child{grid-column:1 / -1;}
.checklist-grid .checklist{column-count:1;}
@media (max-width:760px){
  .checklist-grid{grid-template-columns:1fr;}
  .checklist-grid .checklist-group:last-child{grid-column:auto;}
}

/* Per-group visible numbering. CSS counters (counter-reset/counter-increment)
   are entirely independent of the HTML <ol start> attribute -- start only
   affects the native ::marker, not a custom counter like `cl` used by
   .checklist li::before above. Without this, every .checklist-grid group
   would visibly render 01-10 regardless of its `start` value, since the
   base .checklist rule (higher up this file) resets `cl` to 0 on every
   <ol>. These five modifier classes (applied on each .checklist-group,
   not via fragile :nth-child) re-seed the counter per group so the
   VISIBLE numbers match the domain: 01-10, 11-20, 21-30, 31-40, 41-50.
   Each selector has 4 classes of specificity, safely beating the 1-class
   .checklist rule regardless of source order. */
.checklist-grid .checklist-group.cl-g1 .checklist{counter-reset:cl 0;}
.checklist-grid .checklist-group.cl-g2 .checklist{counter-reset:cl 10;}
.checklist-grid .checklist-group.cl-g3 .checklist{counter-reset:cl 20;}
.checklist-grid .checklist-group.cl-g4 .checklist{counter-reset:cl 30;}
.checklist-grid .checklist-group.cl-g5 .checklist{counter-reset:cl 40;}

/* Small inline diagram tiles — reuses the exact node/arrow grammar already
   established on the homepage hero/CTA diagrams, for visual continuity. */
.diagram-wrap{border:1px solid var(--border); background:var(--panel); padding:26px 22px; margin:20px 0 26px; overflow-x:auto;}
.diagram-wrap svg{display:block; margin:0 auto;}
.diagram-caption{font-size:11px; color:var(--text-faint); text-align:center; margin-top:10px; letter-spacing:0.2px;}

.decision-table{width:100%; border-collapse:collapse; font-size:13.5px; margin:18px 0 26px;}
.decision-table th, .decision-table td{border:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top;}
.decision-table th{background:var(--panel); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.5px; text-transform:uppercase; color:var(--text-faint);}
.decision-table td{color:var(--text-dim);}

/* Vertical architecture-stage flow, used by Architecture Lab pages. The
   first/last steps (Sources / Applications) get a neutral accent bar to read
   as boundary systems outside AQEVON's governed pipeline; the numbered
   stages in between share one consistent teal accent bar — a small,
   information-carrying distinction, not decoration. */
.arch-flow{max-width:600px; margin:22px 0 30px;}
.arch-step{
  position:relative; background:var(--panel); border:1px solid var(--border);
  border-left-width:3px; border-left-color:var(--accent-dim); padding:16px 20px 16px 22px;
}
.arch-step:first-child, .arch-step:last-child{background:var(--bg-alt); border-left-color:var(--text-faint);}
.arch-step .idx{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--accent-dim); letter-spacing:1px; margin-bottom:4px;}
.arch-step:first-child .idx, .arch-step:last-child .idx{color:var(--text-faint);}
.arch-step h4{font-size:14.5px; font-weight:700; margin-bottom:4px;}
.arch-step p{font-size:12.5px; color:var(--text-dim); margin-bottom:0;}
.arch-flow-arrow{text-align:center; color:var(--text-faint); font-size:16px; padding:1px 0; line-height:1;}
.principles-list{list-style:none;}
.principles-list li{
  position:relative; padding:10px 0 10px 26px; border-bottom:1px solid var(--border); font-size:14px; color:var(--text-dim);
}
.principles-list li:last-child{border-bottom:none;}
.principles-list li::before{content:'✓'; position:absolute; left:0; top:10px; color:var(--accent);}

.next-action{
  background:var(--panel); border:1px solid var(--border); padding:26px 28px; margin-top:36px;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.next-action p{margin-bottom:0; max-width:480px;}

footer{padding:40px 0 32px; border-top:1px solid var(--border); font-size:13px; color:var(--text-faint);}
footer a{color:var(--text-dim);}
footer a:hover{color:var(--accent);}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.footer-mark{width:28px; height:28px; flex:none; object-fit:contain; display:block;}
.footer-brand .logo{font-size:16px;}
.footer-tagline{
  font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:0.3px;
  white-space:nowrap; line-height:1.3; margin-top:3px;
}
.footer-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}

/* Compact footer nav — brand block + three link columns (Services /
   Resources / Company), kept deliberately small (12-13px links, tight gaps)
   so the footer stays a single visual block and doesn't grow into a tall
   multi-row footer. Sits above the existing copyright .footer-row. */
.footer-compact{display:flex; justify-content:space-between; flex-wrap:wrap; gap:28px; padding-bottom:22px; border-bottom:1px solid var(--border); margin-bottom:16px;}
.footer-cols{display:flex; gap:36px; flex-wrap:wrap;}
.footer-col h4{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.8px; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; font-weight:600;}
.footer-col a{display:block; font-size:13px; color:var(--text-dim); margin-bottom:7px; text-decoration:none;}
.footer-col a:last-child{margin-bottom:0;}
.footer-col a:hover{color:var(--accent);}
@media (max-width:640px){ .footer-compact{flex-direction:column; gap:24px;} .footer-cols{gap:28px;} }

/* RESEARCH PAGE — small set of additions reused only by
   /ai-authorization-assurance/, built from the exact same tokens/components
   as the rest of this stylesheet rather than a new visual language. */

/* Neutral-marker variant of .principles-list: a dash instead of a checkmark,
   since these are open research questions/considerations, not completed
   items — the checkmark in the base list implies "done," which would be
   the wrong signal on a research page. */
.principles-list.research-list li::before{content:'—'; color:var(--text-faint);}

/* Four (three primary + one lower-emphasis secondary) research-hypothesis
   cards. Reuses the hairline-grid card language already used by
   .resource-grid / homepage .problem-grid, just scoped locally since this
   page is the only one that needs it. */
.hypothesis-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); margin:20px 0 28px;}
.hypothesis-card{background:var(--bg-alt); padding:20px 22px;}
.hypothesis-card .n{font-family:'IBM Plex Mono',monospace; color:var(--accent-dim); font-size:12px; margin-bottom:8px;}
.hypothesis-card h3{font-size:15px; margin-bottom:6px;}
.hypothesis-card p{font-size:13px; color:var(--text-dim); margin-bottom:0;}
.hypothesis-card.secondary{opacity:0.82;}
.hypothesis-card.secondary .n{color:var(--text-faint);}
@media (max-width:640px){ .hypothesis-grid{grid-template-columns:1fr;} }

.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* AI READINESS SCORE TOOL — additions used only by
   /tools/ai-readiness-score/. Reuses .field/.btn-primary/.form-success/
   .form-retry-row (already defined on the homepage's own inline stylesheet
   and duplicated in spirit here) rather than inventing a second form
   language; only the quiz-specific pieces (options, progress, score bars)
   are new. */
.quiz-progress{
  position:sticky; top:81px; z-index:10; background:var(--bg); padding:10px 0;
  border-bottom:1px solid var(--border); margin-bottom:24px; font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; color:var(--text-faint); letter-spacing:0.5px;
}
.quiz-progress-track{height:3px; background:var(--border); margin-top:8px; overflow:hidden;}
.quiz-progress-fill{height:100%; background:var(--accent); width:0%; transition:width .2s ease;}
.quiz-dimension{margin-bottom:32px;}
.quiz-dimension-title{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px; font-weight:800;
}
.quiz-q{margin-bottom:22px;}
.quiz-q-text{font-size:14.5px; color:var(--text); margin-bottom:10px; font-weight:600; line-height:1.4;}
.quiz-options{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
.quiz-option{
  text-align:left; border:1px solid var(--border); background:var(--bg-alt); color:var(--text-dim);
  padding:10px 14px; font-size:13px; border-radius:var(--radius); cursor:pointer; transition:border-color .15s;
  font-family:inherit; line-height:1.4;
}
.quiz-option:hover{border-color:var(--text-dim);}
.quiz-option.selected{border-color:var(--accent); background:rgba(0,217,192,0.08); color:var(--text);}
@media (max-width:560px){ .quiz-options{grid-template-columns:1fr;} }

.quiz-submit-row{display:flex; justify-content:center; margin:32px 0 8px;}
.quiz-note{text-align:center; font-size:12.5px; color:var(--text-faint); margin-bottom:0;}

.score-results{display:none;}
.score-overall{
  background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent);
  padding:26px 28px; margin-bottom:24px; text-align:center;
}
.score-overall .num{font-family:'IBM Plex Mono',monospace; font-size:44px; font-weight:800; color:var(--accent); line-height:1;}
.score-overall .band{font-size:14.5px; color:var(--text-dim); margin-top:8px; max-width:520px; margin-left:auto; margin-right:auto;}
.score-bars{margin-bottom:28px;}
.score-bar-row{margin-bottom:16px;}
.score-bar-head{display:flex; justify-content:space-between; font-size:13px; color:var(--text-dim); margin-bottom:6px;}
.score-bar-head .val{font-family:'IBM Plex Mono',monospace; color:var(--text);}
.score-bar-track{height:8px; background:var(--border); border-radius:var(--radius); overflow:hidden;}
.score-bar-fill{height:100%; background:var(--accent-dim);}

.unlock-panel{background:var(--panel); border:1px solid var(--border); padding:26px 28px; margin-bottom:28px;}
.unlock-panel h3{font-size:16.5px; margin-bottom:6px;}
.unlock-panel p{font-size:13.5px; color:var(--text-dim); margin-bottom:16px;}
.unlock-panel .field-row{display:flex; gap:12px; flex-wrap:wrap;}
.unlock-panel .field-row .field{flex:1 1 200px;}

.narrative-panel{display:none; background:var(--bg-alt); border:1px solid var(--border); padding:26px 28px; margin-bottom:28px;}
.narrative-panel .tag-label{margin-bottom:12px;}
.narrative-panel .narrative-text{font-size:14.5px; color:var(--text-dim); line-height:1.75; white-space:pre-line;}
.narrative-loading{display:none; text-align:center; padding:20px 0; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--text-faint);}

/* FORM ELEMENTS — resource sub-pages never had a form before the readiness
   tool's email-unlock panel, so this stylesheet had none either. Copied
   from the homepage's inline stylesheet (index.html) verbatim so this
   tool's form looks identical to every existing AQEVON form rather than
   falling back to unstyled browser defaults. */
label{display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:6px; font-family:'IBM Plex Mono',monospace; letter-spacing:0.3px;}
input, textarea, select{
  width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text);
  padding:12px 14px; border-radius:var(--radius); font-family:'Inter',sans-serif; font-size:14.5px;
}
input:focus, textarea:focus, select:focus{border-color:var(--accent);}
.field{margin-bottom:18px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:640px){ .field-row{grid-template-columns:1fr;} }
.form-note{font-size:12px; color:var(--text-faint); margin-top:14px;}
.form-success{display:none; background:rgba(0,217,192,0.08); border:1px solid var(--accent-dim); padding:16px 18px; font-size:13.5px; color:var(--text); border-radius:var(--radius); margin-top:16px;}
.form-success.show{display:block;}
.form-success.error{background:rgba(232,162,58,0.08); border-color:var(--amber);}
.form-retry-row{display:flex; align-items:center; gap:16px; margin-top:12px; flex-wrap:wrap;}
.form-retry-btn{padding:9px 18px; font-size:13px;}
.form-mailto-link{font-size:12.5px; color:var(--accent); letter-spacing:0.3px;}
.form-mailto-link:hover{text-decoration:underline;}