/* =========================================================
   X-ONEPASS v4 — Authority Design System (Rebuilt)
   Goal: procedural / documentary / audit-friendly / non-marketing
   Key: buttons are immune to link visited coloring (cross-device)
   ========================================================= */

/* -----------------------------
   0) Root tokens
------------------------------ */
:root{
  /* Color system */
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #0b1220;
  --muted: rgba(11,18,32,.72);
  --subtle: rgba(11,18,32,.55);
  --hairline: rgba(11,18,32,.12);
  --hairline-strong: rgba(11,18,32,.18);

  --brand: #0b2a56;          /* deep institutional navy */
  --brand-ink: #ffffff;

  --link: #123a72;
  --link-visited: #0f2f5f;

  --warn-bg: #f3f6fb;
  --focus: #2b6de8;

  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fs-0: 12px;
  --fs-1: 13px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 20px;
  --fs-5: 28px;

  --lh: 1.55;

  /* Layout */
  --page: 980px;
  --measure: 72ch;
  --radius: 12px;
  --radius-sm: 10px;

  /* Shadow (minimal) */
  --shadow-1: 0 1px 0 rgba(0,0,0,.05), 0 10px 30px rgba(11,18,32,.06);
}

/* -----------------------------
   1) Reset / base
------------------------------ */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-3);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; }
code, pre{ font-family: var(--mono); }

/* Selection */
::selection{ background: rgba(43,109,232,.18); }

/* -----------------------------
   2) Layout wrappers
------------------------------ */
.container{
  max-width: var(--page);
  margin: 0 auto;
  padding: 24px 20px;
}
.page{
  max-width: var(--page);
  margin: 0 auto;
  padding: 28px 20px 40px;
}
.measure{
  max-width: var(--measure);
}

/* -----------------------------
   3) Header / nav
------------------------------ */
.site-header{
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.header-inner{
  max-width: var(--page);
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  gap: 18px;
  align-items: baseline;
  justify-content: space-between;
}
.brand{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brand-title{
  font-size: var(--fs-2);
  font-weight: 800;
  letter-spacing: .02em;
}
.brand-sub{
  font-size: var(--fs-1);
  color: var(--subtle);
}

.nav{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  justify-content: flex-end;
  font-size: var(--fs-2);
}

/* IMPORTANT: link styles apply to normal links, not buttons */
.nav a{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.nav a:hover{ color: var(--link); }
.nav a[aria-current="page"]{
  font-weight: 800;
}

/* -----------------------------
   4) Typography
------------------------------ */
h1, h2, h3{
  margin: 0 0 10px 0;
  letter-spacing: -.01em;
}
h1{
  font-size: var(--fs-5);
  line-height: 1.15;
  font-weight: 900;
}
h2{
  font-size: var(--fs-4);
  line-height: 1.25;
  font-weight: 900;
}
h3{
  font-size: var(--fs-3);
  line-height: 1.25;
  font-weight: 900;
}

p{ margin: 0 0 12px 0; }
.small{ font-size: var(--fs-2); color: var(--subtle); }
.muted{ color: var(--muted); }

.kicker{
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--subtle);
  font-weight: 800;
  margin-bottom: 6px;
}

/* -----------------------------
   5) Global link styling (scoped)
   - Applies ONLY to non-button links
   - This prevents iOS visited from tinting CTA buttons
------------------------------ */
a:not(.btn){
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:not(.btn):visited{
  color: var(--link-visited);
}
a:not(.btn):hover{
  color: var(--link);
  text-decoration-thickness: 2px;
}
a:not(.btn):focus-visible{
  outline: 3px solid rgba(43,109,232,.35);
  outline-offset: 2px;
  border-radius: 6px;
}

/* -----------------------------
   6) Cards / blocks
------------------------------ */
.card{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 18px 18px;
}
.card + .card{ margin-top: 18px; }

.section{
  margin-top: 18px;
}

.hr{
  height: 1px;
  background: var(--hairline);
  margin: 18px 0;
}

/* -----------------------------
   7) Badges
------------------------------ */
.badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}
.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: var(--fs-1);
  color: var(--subtle);
  background: #fff;
}

/* -----------------------------
   8) Lists
------------------------------ */
ul{
  margin: 10px 0 12px 18px;
  padding: 0;
}
li{ margin: 6px 0; }

/* -----------------------------
   9) Callouts (procedural boxes)
------------------------------ */
.callout{
  border: 1px solid rgba(43,109,232,.35);
  background: var(--warn-bg);
  border-radius: var(--radius-sm);
  padding: 14px 14px;
}
.callout-title{
  font-weight: 900;
  margin-bottom: 6px;
}
.callout p:last-child{ margin-bottom: 0; }

/* -----------------------------
   10) Buttons (ROOT CAUSE FIX)
   - Buttons are immune to link visited coloring
   - Cover all states + iOS Safari text-fill
------------------------------ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--hairline-strong);

  font-size: var(--fs-2);
  font-weight: 900;
  letter-spacing: .01em;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  background: #fff;
  color: var(--ink);

  text-decoration: none; /* for <a> */
}

/* Button link state immunity (for anchors) */
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active,
a.btn:focus,
a.btn:focus-visible{
  color: var(--ink);
  -webkit-text-fill-color: var(--ink); /* iOS Safari */
  text-decoration: none;
}

/* Primary */
.btn-primary{
  background: var(--brand);
  border-color: rgba(11,18,32,.78);
  color: var(--brand-ink);
}
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:active,
a.btn-primary:focus,
a.btn-primary:focus-visible{
  color: var(--brand-ink);
  -webkit-text-fill-color: var(--brand-ink);
  text-decoration: none;
}

/* Quiet/secondary */
.btn-quiet{
  background: #fff;
  color: var(--ink);
}
a.btn-quiet:link,
a.btn-quiet:visited,
a.btn-quiet:hover,
a.btn-quiet:active,
a.btn-quiet:focus,
a.btn-quiet:focus-visible{
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  text-decoration: none;
}

/* Hover/active (kept minimal, procedural) */
.btn:hover{ border-color: rgba(11,18,32,.28); }
.btn-primary:hover{ filter: brightness(1.03); }
.btn:active{ transform: translateY(1px); }

@media (prefers-reduced-motion: reduce){
  .btn:active{ transform: none; }
}

/* Focus ring */
.btn:focus-visible{
  outline: 3px solid rgba(43,109,232,.45);
  outline-offset: 2px;
}

/* Disabled */
.btn[aria-disabled="true"],
.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button row */
.actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* -----------------------------
   11) Form styling
------------------------------ */
.form{
  margin-top: 10px;
}
.field{
  margin: 12px 0;
}
label{
  display: block;
  font-size: var(--fs-2);
  font-weight: 900;
  margin: 0 0 6px 0;
}
input[type="text"],
input[type="email"],
input[type="date"],
select,
textarea{
  width: 100%;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: var(--fs-3);
  background: #fff;
  color: var(--ink);
  outline: none;
}
textarea{ min-height: 110px; resize: vertical; }

input::placeholder,
textarea::placeholder{
  color: rgba(11,18,32,.40);
}

input:focus,
select:focus,
textarea:focus{
  border-color: rgba(43,109,232,.45);
  box-shadow: 0 0 0 3px rgba(43,109,232,.12);
}

.help{
  margin-top: 6px;
  font-size: var(--fs-1);
  color: var(--subtle);
}

.checkbox{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #fff;
}
.checkbox input{ margin-top: 3px; }

/* Turnstile container */
.turnstile{
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

/* -----------------------------
   12) Footer
------------------------------ */
.site-footer{
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}
.footer-inner{
  max-width: var(--page);
  margin: 0 auto;
  padding: 18px 20px;
  font-size: var(--fs-2);
  color: var(--subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

/* -----------------------------
   13) Page-specific helpers
------------------------------ */
.hero{
  max-width: var(--measure);
  margin-bottom: 16px;
}
.hero p{ color: var(--muted); }

.block-title{
  font-weight: 900;
  margin-bottom: 6px;
}
.rule{
  font-size: var(--fs-2);
  color: var(--subtle);
}

/* -----------------------------
   14) Responsive
------------------------------ */
@media (max-width: 760px){
  :root{ --page: 100%; }
  .header-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .nav{ justify-content: flex-start; gap: 12px; }
  .page{ padding: 20px 16px 34px; }
  .card{ padding: 16px; }
  h1{ font-size: 26px; }
  h2{ font-size: 18px; }
  .btn{
    width: 100%;
    justify-content: center;
  }
  .actions{ flex-direction: column; }
}

/* -----------------------------
   15) Safety: never allow anchor visited to bleed into buttons
   (belt-and-suspenders, still part of the core system)
------------------------------ */
a.btn:visited{ color: inherit; } /* harmless because states are already locked above */