/* ==========================================================================
   Atchison Account Management — site styles

   Hand-written to replace the Duda export. The old site shipped ~1.2 MB of
   template CSS plus jQuery and a runtime, and still gave every page the same
   flat look: identical chrome, no hierarchy, content dumped between a nav and
   a footer. This is one stylesheet, no framework, no webfont request.

   Palette is sampled from the current logo (web-app/public/aam-logo.png):
   #478254 green, #373B3C charcoal. An older blue logo exists in the Duda
   export — it is NOT current; do not take brand colours from it.
   ========================================================================== */

:root {
  --brand:        #478254;   /* sampled from the logo mark */
  --brand-dark:   #36653F;
  --brand-light:  #EAF3EC;
  --navy:         #23292A;   /* the logo's charcoal, deepened for surfaces */
  --ink:          #373B3C;   /* sampled from the wordmark */
  --muted:        #616C6B;
  --line:         #E4E8E6;
  --bg:           #FFFFFF;
  --bg-soft:      #F6F8F6;
  --white:        #FFFFFF;
  --danger:       #B3261E;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 1px 2px rgba(30, 40, 34, .06), 0 8px 24px rgba(30, 40, 34, .07);
  --shadow-lg: 0 2px 4px rgba(30, 40, 34, .06), 0 18px 48px rgba(30, 40, 34, .13);
  --wrap:      1140px;
  /* Body content width. The green note filled the wrap while .prose and
     .faq were capped narrower, so the same page had three different text
     widths. One token now drives all of them — change it here only. */
  --content:   100%;
  --gutter:    clamp(20px, 5vw, 40px);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-dark); }

h1, h2, h3, h4 {
  color: var(--navy);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- header ---------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 20px; min-height: 74px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 42px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: 14px; }
.nav a {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem;
  padding: 9px 13px; border-radius: var(--radius-sm); white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.nav a:hover { background: var(--brand-light); color: var(--brand-dark); }
.nav a[aria-current="page"] { color: var(--brand-dark); background: var(--brand-light); font-weight: 600; }

/* Below this width the inline nav gives way to the Menu drawer, which carries
   the same links plus descriptions. One nav, two presentations. */
@media (max-width: 1080px) {
  .nav { display: none; }
}

/* ---------- buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(71, 130, 84, .30); }
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(71, 130, 84, .36); }
/* The ghost button only ever sits on a DARK surface (hero, CTA band, doors).
   It previously defaulted to --navy and was only made white inside .hero, so on
   the CTA band it rendered near-black on dark green — effectively invisible.
   White is the default now, and the light-surface variant is opt-in. */
.btn-ghost {
  background: transparent; color: #fff;
  border-color: rgba(255, 255, 255, .55);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .85); }
.btn-ghost-dark { color: var(--navy); border-color: var(--line); }
.btn-ghost-dark:hover { background: var(--bg-soft); border-color: var(--brand); }
.btn-outline { background: #fff; color: var(--brand-dark); border-color: var(--line); box-shadow: var(--shadow); }
.btn-outline:hover { border-color: var(--brand); transform: translateY(-1px); }
.btn-lg { padding: 16px 34px; font-size: 1.05rem; }

/* ---------- hero ------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(71, 130, 84, .52), transparent 62%),
    radial-gradient(620px 420px at 8% 108%, rgba(71, 130, 84, .28), transparent 60%),
    linear-gradient(152deg, #1B211F 0%, #2B3A31 54%, #212B25 100%);
  background-color: var(--navy);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 72% 12%, #000, transparent 72%);
}
.hero-in { position: relative; z-index: 1; padding: clamp(64px, 9vw, 116px) 0 clamp(56px, 8vw, 100px); }
.hero h1 { color: #fff; max-width: 17ch; }
.hero .lede { font-size: clamp(1.06rem, 1rem + .5vw, 1.28rem); color: #CFDCD2; max-width: 60ch; margin-bottom: 2rem; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #9CCBA6; margin-bottom: 20px;
  padding: 6px 14px; border: 1px solid rgba(156, 203, 166, .38); border-radius: 999px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- sections -------------------------------------------------- */
.section { padding: clamp(56px, 8vw, 92px) 0; }
.section-soft { background: var(--bg-soft); border-block: 1px solid var(--line); }
.section-head { max-width: 66ch; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head p { color: var(--muted); font-size: 1.06rem; }

.page-head { padding: clamp(44px, 6vw, 76px) 0 clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.page-head p { color: var(--muted); font-size: 1.1rem; max-width: 62ch; margin-bottom: 0; }

.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #CBDFD0; }
.card h3 { margin-bottom: .4em; }
.card p { color: var(--muted); font-size: .98rem; }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px;
  display: grid; place-items: center; background: var(--brand-light); color: var(--brand-dark);
}
.card-icon svg { width: 24px; height: 24px; }

/* ---------- prose ----------------------------------------------------- */
.prose { max-width: var(--content); }
.prose h2 { margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.lead { font-size: 1.14rem; color: var(--muted); }

/* ---------- FAQ ------------------------------------------------------- */
.faq { max-width: var(--content); }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
  margin-bottom: 12px; box-shadow: var(--shadow); overflow: hidden;
}
.faq details[open] { border-color: #CBDFD0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; position: relative;
  font-weight: 600; color: var(--navy); font-size: 1.03rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq .answer { padding: 0 24px 22px; color: var(--muted); }
.faq .answer p:first-child { margin-top: 0; }

.notice {
  max-width: var(--content);
  border-left: 4px solid var(--brand); background: var(--brand-light);
  padding: 20px 24px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 32px;
}
.notice p { color: #274632; margin-bottom: 0; font-size: .98rem; }
.notice strong { color: var(--navy); }

/* ---------- forms ----------------------------------------------------- */
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--shadow); }
.field { margin-bottom: 20px; }
.field label, .fieldset-label { display: block; font-weight: 600; font-size: .93rem; color: var(--navy); margin-bottom: 7px; }
.field .hint { font-weight: 400; color: var(--muted); font-size: .87rem; }
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=date], .field input[type=file], .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1px solid #D3DAD5; border-radius: var(--radius-sm);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field :is(input, select, textarea):focus {
  border-color: var(--brand); outline: none; box-shadow: 0 0 0 4px rgba(71, 130, 84, .16);
}
.field-row { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.choice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; font-size: .98rem; }
.choice input { margin-top: 5px; flex-shrink: 0; }
.required { color: var(--danger); }
.form-note { color: var(--muted); font-size: .88rem; margin-top: 18px; }

/* ---------- payments -------------------------------------------------- */
.pay-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.pay-card { display: flex; flex-direction: column; }
.pay-card .fee { font-size: .88rem; font-weight: 600; color: var(--muted); margin-bottom: 18px; }
.pay-card .fee.free { color: #1B7A4B; }
.pay-card .btn { margin-top: auto; }

.info-strip { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.info-strip h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-dark); margin-bottom: .7em; }
.info-strip p, .info-strip a { color: var(--muted); font-size: .98rem; margin: 0; }
.info-strip a { color: var(--brand-dark); }

/* ---------- CTA band -------------------------------------------------- */
.cta {
  background: linear-gradient(140deg, var(--navy) 0%, #2F4436 100%);
  color: #fff; border-radius: var(--radius); padding: clamp(34px, 5vw, 60px); text-align: center;
}
.cta h2 { color: #fff; }
.cta p { color: #C7D6CB; max-width: 56ch; margin-inline: auto; margin-bottom: 1.8rem; }
.cta .hero-actions { justify-content: center; }

/* ---------- footer ---------------------------------------------------- */
.ftr { background: var(--navy); color: #AEBCB1; padding: clamp(46px, 6vw, 72px) 0 30px; margin-top: 0; }
.ftr-grid { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.ftr h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.1em; }
.ftr a { color: #AEBCB1; text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: .55em; }
.ftr .logo-mark { background: #fff; padding: 12px 16px; border-radius: var(--radius-sm); display: inline-block; margin-bottom: 18px; }
/* width:auto is load-bearing. The global `img { max-width:100% }` fights a
   fixed height and squashes the logo out of its 614x203 aspect ratio. */
.ftr .logo-mark img { height: 44px; width: auto; max-width: none; }
.ftr-badges { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.ftr-badges img { height: 54px; width: auto; background: #fff; padding: 6px; border-radius: 7px; }
.ftr-base {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .13);
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  justify-content: space-between;
  font-size: .87rem; color: #91A296;
}
.ftr-base .credit { margin-left: auto; }
.ftr-base .credit a { color: #AEBCB1; }
.ftr-base nav { display: flex; gap: 20px; flex-wrap: wrap; }

.disclosure {
  background: #171C19; color: #8B9A8F; font-size: .84rem; padding: 16px 0; text-align: center;
}
.disclosure p { margin: 0; }
/* ==========================================================================
   Full-bleed layout, the split landing, and side drawers

   Concatenated after theme.css into /Style/site.css by build.py.
   ========================================================================== */

/* Full bleed: sections span the viewport; only text gets a measure. */
.bleed { width: 100%; max-width: none; padding-inline: 0; }
.bleed-pad { padding-inline: clamp(20px, 5vw, 64px); }
.measure { max-width: 74ch; }
.measure-wide { max-width: 1180px; margin-inline: auto; }

/* ---------- the two doors ---------------------------------------------- */
/* The landing is a fork, not a pitch. Two people arrive wanting opposite
   things: someone who received a letter and needs to pay or dispute, and a
   business evaluating us. Sending both to one marketing page served neither,
   and buried the FDCPA dispute route under sales copy. */
/* The landing is a door, not a page: header, doors, footer and the disclosure
   strip together occupy exactly one viewport, so there is nothing to scroll.
   The doors absorb whatever height is left rather than the doors guessing at
   `100svh - 74px`, which ignored the footer and left a few hundred pixels of
   pointless scroll underneath. */
body.landing { min-height: 100svh; display: flex; flex-direction: column; }
body.landing > main { flex: 1 1 auto; display: flex; min-height: 0; }
body.landing .doors { flex: 1 1 auto; min-height: 0; }

.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

/* Stacked, the two doors genuinely need more than one screen, so let it scroll
   rather than crushing the copy. Same on a short landscape window. */
@media (max-width: 860px), (max-height: 620px) {
  body.landing { min-height: 0; }
  body.landing > main { display: block; }
  .doors { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .doors { grid-template-columns: 1fr; }
}

.door {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  /* Vertical padding is vh-based, horizontal is vw-based. It was vw on both
     axes, so on a short-but-wide window the padding grew with the WIDTH and
     pushed the landing past one screen — the height was what was actually
     running out. */
  padding: clamp(28px, 5vh, 80px) clamp(24px, 5vw, 88px);
}
.door::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.door:hover::before, .door:focus-within::before { transform: scale(1.04); }

/* Debtor side — charcoal, the calmer surface. */
.door-debtor { color: #EDF1EE; }
.door-debtor::before {
  background:
    radial-gradient(680px 520px at 18% 12%, rgba(71, 130, 84, .30), transparent 62%),
    linear-gradient(168deg, #2B3231 0%, #1E2423 60%, #191E1D 100%);
}
/* Client side — green. */
.door-client { color: #F2F7F3; }
.door-client::before {
  background:
    radial-gradient(700px 540px at 82% 88%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(155deg, #4E8C5C 0%, #3E7449 55%, #2F5C39 100%);
}

/* The logo's own motif — rising bars and an arrow — drawn as the background
   texture, rather than a stock gradient mesh borrowed from somewhere else. */
.door-art {
  position: absolute; z-index: -1; right: -4%; bottom: -6%;
  width: min(58%, 420px); opacity: .16; pointer-events: none;
  transition: opacity .4s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
.door:hover .door-art { opacity: .24; transform: translateY(-6px); }

.door-eyebrow {
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  opacity: .82; margin-bottom: 18px;
}
.door h2 {
  color: inherit; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  letter-spacing: -.03em; margin-bottom: .45em; max-width: 15ch;
}
.door p { font-size: clamp(1rem, .95rem + .35vw, 1.16rem); opacity: .92; max-width: 42ch; margin-bottom: 2rem; }
.door-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.door .btn-solid { background: #fff; color: #23292A; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.door .btn-solid:hover { background: #F3F6F3; transform: translateY(-1px); }
.door .btn-line { background: transparent; color: inherit; border-color: rgba(255, 255, 255, .5); }
.door .btn-line:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .8); }

.door-foot {
  margin-top: 2.2rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .92rem; opacity: .82;
}
.door-foot a { color: inherit; }
.door-foot .lnk { text-decoration: underline; cursor: pointer; background: none; border: 0; color: inherit; font: inherit; padding: 0; }

/* ---------- drawers ----------------------------------------------------- */
/* Everything reachable without leaving the page. Each drawer's content also
   lives at its own URL, so a direct link and a visitor without JavaScript
   still work — the drawer is an enhancement, never the only route. */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 26, 22, .55); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s;
}
.drawer-backdrop.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: min(560px, 100vw); max-width: 100vw;
  background: var(--bg); box-shadow: -18px 0 60px rgba(20, 26, 22, .26);
  display: flex; flex-direction: column;
  transform: translateX(101%);
  transition: transform .34s cubic-bezier(.32, .72, .28, 1);
}
/* Presence is controlled by the `hidden` attribute alone. An earlier version
   also used visibility:hidden, which silently broke the focus move into the
   drawer — a visibility:hidden element cannot take focus, so keyboard and
   screen-reader users were left behind on the page while the drawer opened. */
.drawer.open { transform: translateX(0); }
.drawer-wide { width: min(760px, 100vw); }
.drawer-left { right: auto; left: 0; transform: translateX(-101%); box-shadow: 18px 0 60px rgba(20, 26, 22, .26); }
.drawer-left.open { transform: translateX(0); }

/* The header carries the same charcoal-into-green move as the two doors, so a
   drawer reads as part of the same system rather than a plain white panel. The
   gradient is oversized and drifts slowly; it is a background-position
   animation, which the compositor handles cheaply. */
.drawer-head {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 22px clamp(20px, 3vw, 32px); border-bottom: 0;
  flex-shrink: 0; color: #fff;
  /* The lightest stop is capped at the brand green. The gradient drifts, so
     the title can sit over any part of it; a lighter stop measured only
     3.4:1 against white, which is fine for large text but leaves nothing
     spare. #478254 holds 4.58:1 across the whole sweep. */
  background: linear-gradient(115deg, #1E2423 0%, #2F5C39 45%, #3E7449 75%, #478254 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: drawer-drift 22s ease-in-out infinite alternate;
}
/* a soft highlight so the flat gradient has some depth */
.drawer-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 160% at 88% -30%, rgba(255, 255, 255, .22), transparent 60%);
}
.drawer-head > * { position: relative; z-index: 1; }
.drawer-head h2 { margin: 0; font-size: 1.25rem; color: #fff; letter-spacing: -.01em; }

@keyframes drawer-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer-head { animation: none; }
}

.drawer-close {
  margin-left: auto; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .14);
  color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.drawer-close:hover {
  background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .7);
  transform: rotate(90deg);
}
.drawer-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.drawer-body { overflow-y: auto; padding: clamp(22px, 3vw, 34px); flex: 1; -webkit-overflow-scrolling: touch; }
.drawer-body .form-card { border: 0; box-shadow: none; padding: 0; }
.drawer-body > :last-child { margin-bottom: 0; }
.drawer-intro { color: var(--muted); font-size: .98rem; margin-bottom: 22px; }

/* Scroll lock. `overflow:hidden` alone does not hold iOS Safari, so the body is
   pinned with position:fixed and the offset restored on close (see the JS).
   scrollbar-gutter keeps the page from jumping sideways when the scrollbar
   disappears under the lock. */
html { scrollbar-gutter: stable; }
body.drawer-open {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
}

/* The drawer itself must still scroll while the page behind it cannot. */
.drawer { overscroll-behavior: contain; }
.drawer-body { overscroll-behavior: contain; }

/* Reduced motion: no slide, just appear. theme.css already collapses transition
   durations globally, but the transform start position would still be applied
   for one frame, so remove it outright. */
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-left { transition: none; }
  .drawer:not(.open) { transform: none; opacity: 0; }
  .drawer.open { transform: none; opacity: 1; }
}

.drawer-nav { list-style: none; margin: 0; padding: 0; }
.drawer-nav li { border-bottom: 1px solid var(--line); }
.drawer-nav a {
  display: block; padding: 16px 4px; text-decoration: none; color: var(--navy);
  font-size: 1.06rem; font-weight: 600;
  transition: color .16s ease, padding-left .16s ease;
}
.drawer-nav a:hover { color: var(--brand-dark); padding-left: 10px; }
.drawer-nav .sub { display: block; font-weight: 400; font-size: .87rem; color: var(--muted); margin-top: 2px; }
.drawer-cta { margin-top: 26px; display: grid; gap: 10px; }

/* header trigger buttons */
.hdr-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink); font: inherit; font-size: .92rem;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); }
.icon-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.icon-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.icon-btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
@media (max-width: 700px) { .icon-btn .lbl { display: none; } .icon-btn { padding: 10px 12px; } }

/* payment options inside the drawer */
.pay-row { display: grid; gap: 14px; margin-bottom: 26px; }
.pay-opt {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
  display: flex; align-items: flex-start; gap: 16px; text-decoration: none; color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pay-opt:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); }
.pay-opt .mark {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px;
  background: var(--brand-light); color: var(--brand-dark); display: grid; place-items: center;
}
.pay-opt .mark svg { width: 22px; height: 22px; }
.pay-opt h3 { margin: 0 0 3px; font-size: 1.05rem; }
.pay-opt p { margin: 0; font-size: .92rem; color: var(--muted); }
.pay-opt .tag { display: block; font-size: .79rem; font-weight: 700; color: var(--brand-dark); margin-top: 5px; }
.pay-opt .tag.fee { color: var(--muted); }

.contact-list { list-style: none; margin: 0 0 26px; padding: 0; }
.contact-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-list .k { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); min-width: 74px; padding-top: 2px; }
.contact-list .v { font-weight: 600; color: var(--navy); }
.contact-list .v a { color: var(--brand-dark); text-decoration: none; }
.contact-list .v a:hover { text-decoration: underline; }
.contact-list .v small { display: block; font-weight: 400; color: var(--muted); font-size: .88rem; }

/* The landing page is only the fork, so its footer stays minimal. */
.doors-foot {
  background: var(--navy); color: #AEBCB1; padding: 26px 0;
  font-size: .87rem;
}
/* Matches the inner div by position, not by class. This was `.doors-foot
   .wrap` and stopped applying the moment that div became .bleed-pad for the
   full-bleed footer — the landing footer quietly stopped being a flex row. */
.doors-foot > div { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.doors-foot .credit { margin-left: auto; }
.doors-foot .credit a { color: #AEBCB1; }
.doors-foot a { color: #AEBCB1; }
.doors-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* Short viewports: the door copy is sized off the WIDTH, so on a 1366x768
   laptop it kept its full desktop scale while the height ran out and pushed the
   landing into a stub scroll. Tighten type and rhythm as the height shrinks so
   the fork still lands on one screen. */
@media (max-height: 880px) {
  .door h2 { font-size: clamp(1.55rem, 1rem + 1.7vw, 2.35rem); margin-bottom: .35em; }
  .door p { font-size: 1rem; margin-bottom: 1.35rem; }
  .door-eyebrow { margin-bottom: 12px; }
  .door-actions { gap: 10px; }
  .door .btn-lg { padding: 12px 24px; font-size: .98rem; }
  .door-foot { margin-top: 1.3rem; padding-top: .9rem; font-size: .87rem; }
  .doors-foot { padding: 16px 0; }
  .disclosure { padding: 11px 0; font-size: .8rem; }
  .hdr-in { min-height: 64px; }
  .brand img { height: 36px; }
}