/* The apply page (/apply and /es/registro; decision #210, docs/apply-page-plan.md §3), on top of styles.css: the
   Fawnzee look of the landing (cream ground, ink outlines with offset shadows, pink for the one action, turquoise for a
   chosen answer, yellow numbers, Bricolage Grotesque). Only design tokens from styles.css, so dark mode follows the
   device. Mobile first: 375 px is the design width, 320 px works, and from 1024 px the page is two columns (a sticky
   aside with the stepper and what happens next, and the form card). No other page loads this file. */

.apply {
  --field: var(--card);
  --field: color-mix(in srgb, var(--ground) 38%, var(--card));
  --chosen: var(--turquoise);
  --chosen: color-mix(in srgb, var(--turquoise) 52%, var(--card));
  --error-bg: var(--card);
  --error-bg: color-mix(in srgb, var(--pink) 9%, var(--card));
  --soft-yellow: var(--card);
  --soft-yellow: color-mix(in srgb, var(--yellow) 32%, var(--card));
  --arch: var(--yellow);
  display: grid;
  gap: 24px;
  grid-template-areas: "head" "card" "side";
}
.apply [hidden] { display: none !important; }
/* The landing's arch is muted at night, and the yellow banner's link stays dark ink in both themes (contrast). */
@media (prefers-color-scheme: dark) { .apply { --arch: var(--divider); } }
.banner-wrap .banner a, .apply-host-note a, .apply-done-test a { color: var(--on-bright); }
html:not(.js) [data-js-only] { display: none !important; }
.wrap.wide { max-width: 1120px; }

/* ---------- Header: the EN | ES switch (the landing's), 44 px targets ---------- */
.site-nav .lang-switch { display: inline-flex; gap: 2px; padding: 1px; border: 2px solid var(--outline); border-radius: 999px; background: var(--card); }
.site-nav .lang-switch a { min-height: 44px; min-width: 46px; padding: 0 12px; justify-content: center; font-size: .92rem; font-weight: 800; letter-spacing: .04em; }
.site-nav .lang-switch a:hover { background: var(--ground); }
.site-nav .lang-switch a[aria-current="true"] { background: var(--ink); color: var(--ground); }
/* On phones the form page's header is the brand and the switch only, like the landing (the footer has every link). */
@media (max-width: 559px) { .site-nav > a:not(.keep) { display: none; } }

/* ---------- The heading ---------- */
.apply-head { grid-area: head; position: relative; isolation: isolate; }
.apply .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pink-text); }
.apply .kicker::before { content: ""; width: 22px; height: 6px; flex: none; background: radial-gradient(circle, currentColor 2.4px, transparent 2.9px) 0 0 / 8px 6px repeat-x; }
.apply-head h1 { margin-top: 10px; font-size: clamp(2.05rem, 1.45rem + 3vw, 3.1rem); line-height: 1.04; letter-spacing: -0.025em; max-width: 16ch; }
.apply-head .lead { margin-top: 12px; font-size: 1.1rem; max-width: 34rem; }

/* ---------- The card ---------- */
.apply-card { grid-area: card; min-width: 0; background: var(--card); border: 2px solid var(--outline); border-radius: 22px; box-shadow: 4px 4px 0 var(--shadow); padding: 20px; }
@media (max-width: 359px) { .apply-card { padding: 16px; border-radius: 18px; } }
.apply-intro { margin-top: 10px; font-size: .95rem; color: var(--ink-2); }
/* The test-copy note in the card (the script shows it on any host but fawnzee.com when the page has no banner) */
.apply-host-note { margin: 0 0 18px; }
.apply-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-bottom: 16px; padding: 6px 6px 6px 14px; border: 2px solid var(--outline); border-radius: 14px; background: var(--soft-yellow); font-weight: 700; font-size: .95rem; }
.apply-draft p { padding-block: 8px; }
.apply-draft .apply-link { padding: 0; }
.apply-link { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--pink-text); font: 800 .95rem/1 var(--font); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }

/* The progress row (phones and tablets; the aside's stepper on desktop) */
.apply-progress { margin: -2px 0 18px; }
.apply-progress-step { display: none; }
.apply-progress-step.is-current { display: block; }
.apply-progress-step strong { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pink-text); }
.apply-progress-bar { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.apply-progress-bar li { height: 10px; border: 2px solid var(--outline); border-radius: 999px; background: var(--card); }
.apply-progress-bar li.is-done { background: var(--ink); }
.apply-progress-bar li.is-current { background: var(--pink); }

/* ---------- Steps ---------- */
.apply-form { margin-top: 6px; }
.apply-step + .apply-step { margin-top: 44px; padding-top: 36px; border-top: 2px dashed var(--divider); }
.js .apply-step { margin-top: 0; padding-top: 0; border-top: 0; }
.js .apply-step:not(.is-current) { display: none; }
.apply-step-title { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: clamp(1.4rem, 1.2rem + .9vw, 1.75rem); scroll-margin-top: 16px; }
.js .apply-step-title { margin-top: 0; }
/* The heading takes focus only from the script (tabindex="-1", for screen readers after Next or Back): no ring. */
.apply-step-title:focus, .apply-step-title:focus-visible { outline: none; }
.step-num { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--outline); border-radius: 50%; background: var(--yellow); color: var(--on-bright); font-size: 1.05rem; font-weight: 800; letter-spacing: 0; }
.apply-fields { display: grid; gap: 28px; margin-top: 24px; }

/* ---------- Questions ---------- */
.field { min-width: 0; margin: 0; padding: 0; border: 0; scroll-margin-top: 16px; }
.field-label { display: block; padding: 0; font-weight: 700; font-size: 1.06rem; line-height: 1.35; color: var(--ink); }
legend.field-label { width: 100%; }
.opt-tag { display: inline-block; margin-left: 8px; padding: 1px 9px; border: 1.5px solid var(--ink-2); border-radius: 999px; color: var(--ink-2); font-size: .74rem; font-weight: 700; letter-spacing: .02em; vertical-align: 2px; line-height: 1.5; }
.field-help { padding-top: 4px; font-size: .94rem; line-height: 1.45; color: var(--ink-2); }
.field-text input, .field-text textarea {
  display: block; width: 100%; margin-top: 10px; min-height: 52px; padding: 12px 14px;
  border: 2px solid var(--outline); border-radius: 14px; background: var(--field); color: var(--ink);
  font: 500 1.0625rem/1.4 var(--font); -webkit-appearance: none; appearance: none;
  transition: box-shadow .12s ease, background .12s ease;
}
.field-text textarea { min-height: 124px; resize: vertical; }
.field-text input:focus, .field-text textarea:focus { background: var(--card); box-shadow: 3px 3px 0 var(--shadow); }
.field-text input:focus-visible, .field-text textarea:focus-visible { outline: 3px solid var(--pink-text); outline-offset: 2px; border-radius: 14px; }
.field-text [aria-invalid="true"] { border-color: var(--pink-text); background: var(--error-bg); }
/* A question's message sits under its label (and help), above its answers, so it shows with a tall question's top. */
.field-error { display: none; }
.field-error:not(:empty) { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; color: var(--pink-text); font-size: .95rem; font-weight: 700; line-height: 1.4; }
.field-error:not(:empty)::before { content: "!"; flex: none; width: 20px; height: 20px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--pink-text); color: var(--card); font-size: .78rem; font-weight: 800; line-height: 1; }

/* Choices: a visually hidden but focusable input, then its face. A chosen answer gets a check as well as its color. */
.opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.opt { position: relative; display: flex; max-width: 100%; cursor: pointer; }
.opt-input { position: absolute; top: 50%; left: 18px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.opt-face {
  display: flex; align-items: center; gap: 9px; min-height: 44px; max-width: 100%; padding: 8px 16px 8px 10px;
  border: 2px solid var(--outline); border-radius: 22px; background: var(--ground); color: var(--ink);
  font-size: .98rem; font-weight: 600; line-height: 1.25; -webkit-user-select: none; user-select: none;
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.opt:hover .opt-face { background: var(--card); }
.opt-mark { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); }
.opt-mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.opt-mark .i-tick { display: none; }
.opt-text { min-width: 0; }
.opt-input:checked + .opt-face { background: var(--chosen); box-shadow: 3px 3px 0 var(--shadow); transform: translate(-1px, -1px); }
.opt-input:checked + .opt-face .opt-mark { background: var(--ink); color: var(--card); }
.opt-input:checked + .opt-face .i-plus { display: none; }
.opt-input:checked + .opt-face .i-tick { display: inline; }
.opt-input:focus-visible + .opt-face { outline: 3px solid var(--pink-text); outline-offset: 3px; }
.opt-input[aria-invalid="true"] + .opt-face { border-color: var(--pink-text); }
.opt-input[aria-invalid="true"]:not(:checked) + .opt-face { background: var(--error-bg); }

/* Rows (long labels: areas, call times, consent): a box to check */
.opts-rows { flex-direction: column; flex-wrap: nowrap; }
.opts-rows .opt, .opts-rows .opt-face { width: 100%; }
.opts-rows .opt-face { align-items: flex-start; gap: 12px; padding: 11px 14px; border-radius: 14px; background: var(--field); }
.opts-rows .opt-mark { width: 24px; height: 24px; margin-top: -1px; border: 2px solid var(--outline); border-radius: 7px; background: var(--card); }
.opts-rows .i-plus, .opts-pills .i-plus { display: none; }
/* A single choice drawn as chips ("How did you hear about Fawnzee?"): a circle to fill like the pills, never the "+"
   of the multi-select chips. */
.opt-input[type="radio"] + .opt-face .i-plus { display: none; }
.face-chips .opt-input[type="radio"] + .opt-face .opt-mark { border: 2px solid var(--outline); }
.face-chips .opt-input[type="radio"]:not(:checked) + .opt-face .opt-mark { background: var(--card); }
.opt-clear-row { margin-top: 6px; }
.opt-clear { padding-inline: 4px; }

/* Pills (short single choices): a tidy grid that fills each row */
.opts-pills .opt { flex: 1 1 var(--pill, 132px); }
.opts-pills .opt-face { width: 100%; padding-right: 12px; border-radius: 14px; background: var(--field); }
.opts-pills .opt-mark { border: 2px solid var(--outline); background: var(--card); }
[data-field="consent"] .opt-face { font-weight: 500; }
[data-field="price"] { --pill: 158px; }
[data-field="contact_method"] { --pill: 150px; }
[data-field="years"] { --pill: 118px; }
[data-field="phone_type"] { --pill: 104px; }

/* The services question: the landing's groups, as tappable chips */
.chip-group { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.chip-group:first-of-type { margin-top: 16px; }
.chip-group .opts { margin-top: 10px; }
.group-label { width: 100%; padding: 0; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.group-note { margin-top: 8px; font-size: .9rem; color: var(--ink-2); }
.chip-group-later { margin-top: 22px; padding: 14px 14px 16px; border: 2px dashed var(--ink-2); border-radius: 18px; }
/* A bordered fieldset draws its legend in the border: floated, it sits inside like the other groups' labels. */
.chip-group-later > .group-label { float: left; }
.chip-group-later > .group-label + * { clear: both; margin-top: 0; padding-top: 10px; }
.opt-later .opt-face { border-style: dashed; background: transparent; }
.tag-later { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1.5px dashed var(--ink-2); border-radius: 999px; color: var(--ink-2); font-size: .72rem; font-weight: 800; letter-spacing: .02em; line-height: 1.6; white-space: nowrap; vertical-align: 1px; }
.opt-input:checked + .opt-face .tag-later { border-color: var(--ink); color: var(--ink); }
/* Inside the "Coming later" group its legend says it: the tag stays for screen readers only. */
.chip-group-later .tag-later { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.other { margin-top: 20px; }
.other .opts { margin-top: 0; }
.other-text { margin-top: 14px; }
.js .other-text:not(.is-open) { display: none; }

/* ---------- The notice at collection, the send failure, the buttons ---------- */
.apply-notice { margin-top: 32px; padding: 18px; border: 2px solid var(--outline); border-radius: 18px; background: var(--field); }
.apply-notice h3 { font-size: 1.08rem; font-weight: 800; }
.apply-notice dl { display: grid; gap: 10px; margin: 12px 0 0; }
.apply-notice dl > div { display: grid; gap: 1px; }
.apply-notice dt { font-size: .92rem; font-weight: 800; }
.apply-notice dd { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
.apply-notice-more { margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--divider); font-size: .92rem; font-weight: 600; }
@media (min-width: 640px) { .apply-notice dl > div { grid-template-columns: 9.5rem 1fr; gap: 14px; } }

.apply-alert { margin-top: 20px; padding: 14px 16px; border: 2px solid var(--outline); border-left-width: 8px; border-left-color: var(--pink-text); border-radius: 14px; background: var(--error-bg); font-weight: 600; line-height: 1.5; }
/* The script focuses the alert after a failed send (tabindex="-1"): a ring for keyboard users only. */
.apply-alert:focus { outline: none; }
.apply-alert:focus-visible { outline: 3px solid var(--pink-text); outline-offset: 3px; }
.apply-alert a { font-weight: 800; }

/* Next (or Send) comes first in the markup, then Back: on phones in that order top to bottom (the focus order); from
   520 px Back is drawn on the left and the main action on the right, which the keyboard still reaches first. */
.apply-nav { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.apply-nav .btn { width: 100%; }
.btn-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.apply-send[disabled] { cursor: progress; opacity: .8; transform: none; }
.apply-form[aria-busy="true"] .apply-back { visibility: hidden; }
@media (min-width: 520px) {
  .apply-nav { flex-direction: row-reverse; align-items: center; justify-content: space-between; }
  .apply-nav .btn { width: auto; }
}

/* ---------- Sent ---------- */
.apply-done { padding: 20px 0 6px; text-align: center; }
.apply-done-mark { width: 76px; height: 76px; margin: 0 auto; display: grid; place-items: center; border: 2px solid var(--outline); border-radius: 50%; background: var(--turquoise); box-shadow: 4px 4px 0 var(--shadow); }
.apply-done-mark svg { width: 42px; height: 42px; fill: none; stroke: var(--on-bright); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.apply-done h2 { margin-top: 22px; font-size: clamp(1.7rem, 1.35rem + 1.6vw, 2.3rem); }
.apply-done h2:focus { outline: none; }
.apply-done-text { max-width: 30rem; margin: 12px auto 0; font-size: 1.15rem; color: var(--ink-2); }
.apply-done-test { max-width: 30rem; margin: 18px auto 0; padding: 10px 14px; border: 2px solid var(--outline); border-radius: 14px; background: var(--yellow); color: var(--on-bright); font-weight: 700; }
.apply-done-home { margin-top: 26px; }

/* ---------- The aside: the stepper (desktop), what happens next, two reassurances ---------- */
.apply-side { grid-area: side; min-width: 0; }
.apply-stepper { display: none; margin-bottom: 30px; }
.apply-stepper-title, .apply-after h2 { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.apply-stepper ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.apply-stepper li { position: relative; }
.apply-stepper li + li::before { content: ""; position: absolute; left: 22px; top: -12px; height: 14px; border-left: 2px dashed var(--ink-2); }
.apply-stepper button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 6px 12px 6px 4px; border: 0; border-radius: 16px; background: transparent; color: var(--ink-2); font: 700 1.05rem/1.25 var(--font); text-align: left; cursor: default; }
.apply-stepper button:disabled { color: var(--ink-2); opacity: 1; }
.stepper-num { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--outline); border-radius: 50%; background: var(--card); color: var(--ink); font-weight: 800; }
.apply-stepper li.is-current button { color: var(--ink); }
.apply-stepper li.is-current .stepper-num { background: var(--pink); color: var(--on-pink); box-shadow: 3px 3px 0 var(--shadow); }
.apply-stepper li.is-done button { color: var(--ink); }
/* A done step is a link back only while it can be used (after sending, every step is done and none goes back). */
.apply-stepper li.is-done button:not(:disabled) { cursor: pointer; }
.apply-stepper li.is-done button:not(:disabled):hover { background: var(--card); }
.apply-stepper li.is-done button:not(:disabled) .stepper-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.apply-stepper li.is-done .stepper-num { background: var(--ink); color: var(--ground); }

.apply-after-steps { list-style: none; counter-reset: next; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.apply-after-steps li { counter-increment: next; position: relative; min-height: 62px; padding: 15px 16px 15px 60px; border: 2px solid var(--outline); border-radius: 18px; background: var(--card); line-height: 1.45; }
.apply-after-steps li::before { content: counter(next); position: absolute; left: 14px; top: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid var(--outline); border-radius: 50%; background: var(--yellow); color: var(--on-bright); font-weight: 800; }
.apply-aside-line { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.apply-aside-line svg { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--pink-text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.apply-aside-line a { font-weight: 700; }

/* The honeypot: off-screen (never display:none), aria-hidden and inert in the markup */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Tablets: one centered column ---------- */
@media (min-width: 640px) {
  .apply { max-width: 720px; margin-inline: auto; }
  .apply-card { padding: 28px 30px 30px; }
  .apply-after-steps { grid-template-columns: repeat(3, 1fr); }
  .apply-after-steps li { padding: 58px 16px 16px; }
  .apply-after-steps li::before { left: 16px; }
}

/* ---------- Desktop: a sticky aside beside the form ---------- */
@media (min-width: 1024px) {
  .apply {
    max-width: none; margin: 0; grid-template-columns: minmax(300px, 380px) minmax(0, 680px);
    grid-template-rows: auto 1fr; grid-template-areas: "head card" "side card"; gap: 30px 56px;
    justify-content: space-between; align-items: start; padding-top: 12px;
  }
  .apply-head h1 { font-size: 2.9rem; }
  /* The landing's dotted arch, behind the card's top corner (the hero's request card sits in front of one). */
  .apply-card { position: relative; }
  .apply-card::before {
    content: ""; position: absolute; z-index: -1; right: -34px; top: -38px; width: 230px; height: 300px;
    border-radius: 999px 999px 26px 26px; pointer-events: none;
    background: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 2.2px, transparent 2.7px) 0 0 / 20px 20px, var(--arch);
  }
  .apply-card { padding: 34px 38px 38px; box-shadow: 6px 6px 0 var(--shadow); }
  .js .apply-progress { display: none; }
  .js .apply-stepper { display: block; }
  .apply-after-steps { grid-template-columns: none; }
  .apply-after-steps li { padding: 15px 16px 15px 60px; }
  .apply-after-steps li::before { left: 14px; }
}
/* Until the page is wide enough for the arch's 34 px (about 1150 px, a classic scrollbar included), it stays inside the
   wrap's 28 px gutter: nothing scrolls sideways on a landscape iPad. */
@media (min-width: 1024px) and (max-width: 1159px) {
  .apply-card::before { right: -20px; }
}
@media (min-width: 1024px) and (min-height: 760px) {
  .apply-side { position: sticky; top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .opt-input:checked + .opt-face { transform: none; }
}