/* ═══════════════════════════════════════════════════════════════════
   /application and /apply: the Apply page around the Interns section
   (templates/application.html, _apply_flow.html, apply.html).
   Approved prototype page-apply.html, round 3 (2026-10-07):

     .dfa-top     the river into the wall of faces (?hero=2, ?hero=3 are
                  hidden alternates); static/js/apply-hero.js draws it
     .dfa-look    What we look for (static/js/apply-look.js)
     .dfa-ready   Before you start: what to have ready + the three steps
     .dfa-stack   the real form as a stack of cards, and the closed card
     .dfa-review  the review card (static/js/apply-form.js)
     .dfa-done    after submitting: "Postmarked"

   Fields, labels, errors and buttons are the shared standard in
   df-forms.css (.dff-*); this file lays them out and never restyles them,
   except the colour swap a button needs on the dark brand ground.
   Every colour is a df-tokens.css token (tests/test_theme_tokens.py).
   The brand ground uses --df-brand-gradient and the --df-navy / --df-on-navy*
   tokens, which hold the same values in both themes, so the gradient band
   reads the same in light and dark.
   ═══════════════════════════════════════════════════════════════════ */

.dfa-top, .dfa-flow, .dfa-lookwrap, .dfa-stackwrap, .dfa-page {
    --dfa-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --dfa-ease: cubic-bezier(.22, 1, .36, 1);
    --dfa-on: var(--df-on-navy);
    --dfa-on-2: color-mix(in srgb, var(--df-on-navy) 80%, transparent);
    --dfa-grad: var(--df-brand-gradient);
    --dfa-gridlines: linear-gradient(color-mix(in srgb, var(--df-on-navy) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--df-on-navy) 5%, transparent) 1px, transparent 1px);
    --dfa-card-shadow: 0 30px 60px -28px color-mix(in srgb, var(--df-navy) 30%, transparent);
}
[data-theme="dark"] :is(.dfa-top, .dfa-flow, .dfa-lookwrap, .dfa-stackwrap, .dfa-page) {
    --dfa-card-shadow: 0 30px 60px -28px color-mix(in srgb, black 70%, transparent);
}

.dfa-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
/* Display recipe and sizes come from the shared type system (df-tokens.css). */
body.public .dfa-disp, body.public .dfa-disp:is(h1, h2) {
    font-family: var(--df-font-display); font-stretch: var(--df-display-stretch); font-variation-settings: var(--df-display-wdth); font-weight: var(--df-display-weight);
    text-transform: uppercase; line-height: var(--df-display-lh); letter-spacing: var(--df-display-ls); margin: 0; color: var(--df-ink);
}
.dfa-eyebrow, .dfa-mono { font: 600 12px var(--dfa-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--df-accent); margin: 0; }
.dfa-lede { font-family: var(--df-font-text); font-size: var(--df-type-lede); line-height: var(--df-type-lede-lh); color: var(--df-ink-2); max-width: 58ch; margin: 0 0 1rem; }
.dfa-lede b, .dfa-lede strong { color: var(--df-ink); }

/* status pill */
.dfa-st { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; padding: 6px 12px 6px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--df-ink) 7%, transparent); color: var(--df-ink); white-space: nowrap; }
.dfa-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--df-on-navy-closed); flex: none; }
.dfa-st.is-open i { background: var(--df-achieve-fill); animation: dfa-pulse 1.8s infinite; }
@keyframes dfa-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--df-achieve-fill) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }

/* the one colour swap: shared buttons on the dark brand ground */
.dfa-hero.is-dark .dff-b1, .dfa-look .dff-b1 { background: var(--dfa-on); color: var(--df-navy); }
.dfa-look .dff-b2 { background: color-mix(in srgb, var(--dfa-on) 10%, transparent); color: var(--dfa-on); border-color: transparent; }
.dfa-hero.is-dark .dff-b1:focus-visible, .dfa-look :is(.dff-b1, .dff-b2):focus-visible { outline-color: var(--df-on-navy-accent-deep); }
.dfa-hero .dff-b1 .ar { transition: transform .25s var(--dfa-ease); }
.dfa-hero .dff-b1:hover .ar { transform: translateX(3px); }

/* ═══ Top ═══════════════════════════════════════════════════════════ */
.dfa-top { padding: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(40px, 7vh, 72px); }
.dfa-hero { position: relative; border-radius: 30px; padding: clamp(20px, 3.4vw, 44px); overflow: hidden; isolation: isolate; }
.dfa-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--dfa-gridlines); background-size: 48px 48px; }
.dfa-hero.is-dark { background: var(--dfa-grad); color: var(--dfa-on); }
.dfa-hero.is-light { background: var(--df-surface); color: var(--df-ink); }
.dfa-hero.is-light::before { background-size: 32px 32px; background-image: linear-gradient(color-mix(in srgb, var(--df-ink) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--df-ink) 4%, transparent) 1px, transparent 1px); }
[data-theme="dark"] .dfa-hero.is-light { box-shadow: inset 0 0 0 1px var(--df-line); }
.dfa-hero.is-dark .dfa-st { background: color-mix(in srgb, var(--dfa-on) 13%, transparent); color: var(--dfa-on); }
body.public .dfa-hh { font-size: var(--df-type-hero); margin: 10px 0 0; color: inherit; }
.dfa-sub { margin: 6px 0 0; color: var(--df-ink-3); font-size: 1rem; }
.dfa-hero.is-dark .dfa-sub { color: color-mix(in srgb, var(--dfa-on) 72%, transparent); }
.dfa-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.dfa-lk { font-weight: 600; font-size: 15px; color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); padding: 10px 4px; border-radius: 8px; transition: text-decoration-color .2s; }
.dfa-lk:hover { color: inherit; text-decoration-color: currentColor; }

/* the giant number: faded start figure, then the live one */
.dfa-gn { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; line-height: .8; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0; display: flex; align-items: baseline; gap: .08em; }
.dfa-gn-from { color: color-mix(in srgb, var(--df-ink) 18%, transparent); transition: opacity .22s var(--dfa-ease), transform .22s var(--dfa-ease); }
.dfa-hero.is-dark .dfa-gn-from { color: color-mix(in srgb, var(--dfa-on) 26%, transparent); }
.dfa-gn-from i { font-style: normal; font-weight: 500; font-size: .62em; display: inline-block; transform: translateY(-.1em); margin: 0 .08em; }
.dfa-gn.is-full .dfa-gn-from { opacity: 0; transform: translateX(-.15em); }
.dfa-gn-n { color: var(--df-accent); transition: color .22s var(--dfa-ease); }
.dfa-hero.is-dark .dfa-gn-n { color: var(--dfa-on); }
.dfa-hero.k2 .dfa-gn-n { color: var(--df-achieve); }
.dfa-hero.is-dark.k2 .dfa-gn-n { color: var(--df-on-navy-now); }
.dfa-cap { margin: 0; font-size: 1.04rem; line-height: 1.4; color: var(--df-ink-2); min-height: 1.4em; }
.dfa-cap b { color: var(--df-ink); font-weight: 700; }
.dfa-hero.is-dark .dfa-cap { color: var(--dfa-on-2); }
.dfa-hero.is-dark .dfa-cap b { color: var(--dfa-on); }

/* the river (a slider); colours are read by apply-hero.js */
.dfa-rv { position: relative; touch-action: pan-y; cursor: ew-resize; border-radius: 18px; -webkit-tap-highlight-color: transparent; user-select: none;
    --rd: var(--df-ink-2); --ra: var(--df-accent); --rh: var(--df-achieve); --rr: var(--df-line-strong); --kn: var(--df-ink); --kn2: var(--df-surface); }
.dfa-hero.is-dark .dfa-rv { --rd: color-mix(in srgb, var(--dfa-on) 88%, transparent); --ra: var(--df-on-navy-accent-deep); --rh: var(--df-on-navy-now); --rr: color-mix(in srgb, var(--dfa-on) 70%, transparent); --kn: var(--dfa-on); --kn2: var(--df-navy); }
.dfa-rv canvas { display: block; width: 100%; height: 100%; }
.dfa-rv:focus { outline: none; }
.dfa-rv:focus-visible { outline: 3px solid var(--df-accent); outline-offset: 4px; }
.dfa-hero.is-dark .dfa-rv:focus-visible { outline-color: var(--df-on-navy-accent-deep); }

/* stage words under the river */
.dfa-ticks { position: relative; height: 36px; margin-top: -4px; }
.dfa-ticks button { position: absolute; transform: translateX(-50%); font: inherit; font-weight: 600; font-size: 13px; color: var(--df-ink-3); background: none; border: 0; padding: 7px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .2s var(--dfa-ease), color .2s var(--dfa-ease); }
.dfa-ticks button:first-child { transform: none; margin-left: -11px; }
.dfa-ticks button:last-child { transform: translateX(-100%); margin-left: 11px; }
.dfa-ticks button:hover, .dfa-ticks button[aria-current="true"] { color: var(--df-ink); background: color-mix(in srgb, var(--df-ink) 7%, transparent); }
.dfa-hero.is-dark .dfa-ticks button { color: color-mix(in srgb, var(--dfa-on) 66%, transparent); }
.dfa-hero.is-dark .dfa-ticks button:hover, .dfa-hero.is-dark .dfa-ticks button[aria-current="true"] { color: var(--dfa-on); background: color-mix(in srgb, var(--dfa-on) 14%, transparent); }
.dfa-ticks button:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }
.dfa-hero.is-dark .dfa-ticks button:focus-visible { outline-color: var(--df-on-navy-accent-deep); }

/* faces */
.dfa-fc img, .dfa-fc i { display: block; height: auto; border-radius: 50%; object-fit: cover; aspect-ratio: 1; background: color-mix(in srgb, var(--df-ink) 12%, transparent); }
.dfa-hero.is-dark .dfa-fc img, .dfa-hero.is-dark .dfa-fc i { background: color-mix(in srgb, var(--dfa-on) 16%, transparent); }
.dfa-fc img { cursor: default; transition: opacity .25s var(--dfa-ease), filter .25s var(--dfa-ease), transform .2s var(--dfa-ease); }
.dfa-fc img:hover { transform: scale(1.35); position: relative; z-index: 2; }
.dfa-stk { display: inline-flex; align-items: center; }
.dfa-stk img { width: 34px; height: 34px; margin-left: -9px; box-shadow: 0 0 0 2.5px var(--df-surface); }
.dfa-stk img:first-child { margin-left: 0; }
.dfa-pop { opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .22s var(--dfa-ease), transform .22s var(--dfa-ease); pointer-events: none; }
.dfa-hero.k2 .dfa-pop { opacity: 1; transform: none; pointer-events: auto; }
.dfa-tip { position: fixed; z-index: 200; pointer-events: none; background: var(--df-ink); color: var(--df-paper); font-size: 13px; line-height: 1.35; padding: 8px 11px; border-radius: 12px; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s var(--dfa-ease); max-width: 260px; }
.dfa-tip.on { opacity: 1; transform: none; }

/* 4: Into the faces (default) */
.dfa-h4 { display: flex; flex-direction: column; gap: clamp(28px, 4.5vh, 48px); } /* more air between the head and the figures (Tassy, 2026-10-09) */
.dfa-h4-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 30px; flex-wrap: wrap; }
.dfa-h4-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 18px; }
.dfa-h4-l { min-width: 0; }
.dfa-h4 .dfa-gn { font-size: clamp(3.4rem, 8.5vh, 5.5rem); margin-bottom: 10px; }
.dfa-h4 .dfa-gn-from { flex: none; white-space: nowrap; } /* keep "1,713 →" on one line */ /* was up to 10rem; trimmed with the rest so this hero sits in line with the other pages (Tassy, 2026-10-09) */
.dfa-h4 .dfa-cap { margin-bottom: 22px; }
/* 22vh (was 26vh): pays for the hero-size headline so the card still fits 1280x800. */
.dfa-h4 .dfa-rv { height: clamp(130px, 18vh, 190px); }
.dfa-wall { display: grid; grid-template-columns: repeat(24, 20px); gap: 2px; padding-left: 2px; }
.dfa-wall img, .dfa-wall i { width: 20px; opacity: .16; filter: grayscale(1); }
.dfa-hero.k2 .dfa-wall img, .dfa-hero.k2 .dfa-wall i { opacity: 1; filter: none; }
/* with JS, a face shows only once its image has loaded (apply-hero.js
   removes one that fails, so the grid re-packs with no gaps) */
.js-faces .dfa-fc img:not(.is-in) { opacity: 0 !important; }

/* 2: The slider is the river */
.dfa-h2 { display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 26px); }
.dfa-h2-top { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.dfa-h2-top .dfa-hh { margin: 0; }
.dfa-h2 .dfa-gn { font-size: clamp(5.6rem, min(19vh, 15vw), 11.5rem); }
.dfa-h2-trk { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.dfa-h2 .dfa-rv { height: clamp(110px, 17vh, 150px); }
.dfa-h2-end { padding-left: 8px; }

/* 3: Quiet number */
.dfa-h3 { text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.2vh, 22px); padding-top: clamp(28px, 6vh, 60px); padding-bottom: clamp(28px, 6vh, 60px); }
body.public .dfa-h3 .dfa-hh { margin: 0; }
.dfa-h3 .dfa-gn { font-size: clamp(6rem, min(27vh, 17vw), 15rem); justify-content: center; margin: clamp(6px, 2vh, 20px) 0 0; }
.dfa-h3 .dfa-cap { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; min-height: 34px; }
.dfa-h3 .dfa-stk img { width: 28px; height: 28px; }
.dfa-h3 .dfa-rv { width: min(100%, 880px); height: 56px; cursor: crosshair; }
.dfa-h3 .dfa-cta { justify-content: center; margin-top: 6px; }

@media (max-width: 1060px) {
    .dfa-wall { grid-template-columns: repeat(18, 16px); }
    .dfa-wall img, .dfa-wall i { width: 16px; }
}
@media (max-width: 760px) {
    .dfa-h4-body { grid-template-columns: minmax(0, 1fr); }
    .dfa-h4 .dfa-gn { font-size: 4.5rem; }
    .dfa-h4 .dfa-rv { height: 150px; }
    .dfa-wall { grid-template-columns: repeat(14, minmax(0, 1fr)); padding: 8px 0 0; gap: 3px; }
    .dfa-wall img, .dfa-wall i { width: 100%; }
    .dfa-wall > :nth-child(n+43) { display: none; }
    .dfa-h2-trk { grid-template-columns: minmax(0, 1fr); }
    .dfa-h2-end { padding: 6px 0 0; justify-self: end; }
    .dfa-h2 .dfa-rv { height: 120px; }
    .dfa-h2 .dfa-gn { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 7.6rem; }
    .dfa-h2 .dfa-gn-from { font-size: .34em; }
    /* 40px-tall taps on a phone (were 33px). */
    .dfa-ticks { height: 42px; }
    .dfa-ticks button { font-size: 13px; padding: 11px 10px; }
    .dfa-ticks button:first-child { margin-left: -10px; }
    .dfa-ticks button:last-child { margin-left: 10px; }
}
@media (max-width: 560px) {
    .dfa-wrap { padding: 0 16px; }
    .dfa-top .dfa-wrap { padding: 0 8px; }
    .dfa-hero { border-radius: 24px; padding: 20px 16px; }
    .dfa-h4 .dfa-gn { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 4.25rem; }
    .dfa-h4 .dfa-gn-from, .dfa-h3 .dfa-gn-from { font-size: .36em; }
    .dfa-h4-top { gap: 12px; }
    .dfa-h3 .dfa-gn { flex-direction: column; align-items: center; gap: 8px; font-size: 8rem; }
    .dfa-h3 .dfa-cap { min-height: 62px; }
}

/* ═══ What we look for ═════════════════════════════════════════════ */
.dfa-lookwrap { padding-bottom: clamp(40px, 7vh, 72px); }
.dfa-look { position: relative; isolation: isolate; overflow: hidden; background: var(--df-navy); color: var(--dfa-on); border-radius: 30px; padding: clamp(26px, 4vw, 52px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 30px clamp(28px, 4vw, 60px); align-items: center; scroll-margin-top: calc(var(--df-nav-h) + 16px); }
[data-theme="dark"] .dfa-look { box-shadow: inset 0 0 0 1px var(--df-navy-line); }
.dfa-look::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--dfa-gridlines); background-size: 48px 48px; }
body.public .dfa-look .dfa-look-h { font-size: var(--df-type-h2); color: var(--dfa-on); }
.dfa-look-list { display: grid; gap: 2px; margin: clamp(18px, 3vh, 30px) 0 clamp(18px, 3vh, 28px); }
.dfa-look-list button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 16px; border-radius: 16px; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.3; color: color-mix(in srgb, var(--dfa-on) 62%, transparent); transition: background .2s var(--dfa-ease), color .2s var(--dfa-ease); }
.dfa-look-list button::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .45; transition: transform .25s var(--dfa-ease), opacity .2s, background .2s; }
.dfa-look-list button:hover { color: var(--dfa-on); background: color-mix(in srgb, var(--dfa-on) 6%, transparent); }
.dfa-look-list button[aria-selected="true"] { color: var(--dfa-on); background: color-mix(in srgb, var(--dfa-on) 10%, transparent); }
.dfa-look-list button[aria-selected="true"]::before { background: var(--df-on-navy-now); opacity: 1; transform: scale(1.35); }
.dfa-look-list button:focus-visible { outline: 2px solid var(--df-on-navy-accent-deep); outline-offset: 2px; }
.dfa-look-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.dfa-look-r { min-width: 0; }
.dfa-proof { position: relative; background: var(--df-surface); color: var(--df-ink); border-radius: 26px; padding: clamp(22px, 2.6vw, 32px); min-height: clamp(330px, 46vh, 400px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; outline: none; }
.dfa-proof[hidden] { display: none; }
.dfa-proof + .dfa-proof { margin-top: 12px; }
.dfa-proof:focus-visible { box-shadow: 0 0 0 3px var(--df-on-navy-accent-deep); }
.dfa-proof-in { position: relative; animation: dfa-in .26s var(--dfa-ease); }
@keyframes dfa-in { from { opacity: 0; transform: translateY(6px); } }
.dfa-tag { display: inline-block; font: 600 11.5px var(--dfa-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--df-accent); }
.dfa-weeks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: 18px 0 12px; }
.dfa-weeks i, .dfa-leg i { border-radius: 9px; background: color-mix(in srgb, var(--df-ink) 7%, transparent); }
.dfa-weeks i { aspect-ratio: 1; animation: dfa-pop .35s var(--d) var(--dfa-ease) both; }
.dfa-weeks i.is-done, .dfa-leg i.is-done { background: linear-gradient(135deg, var(--df-accent), var(--df-achieve)); }
.dfa-weeks i.is-now, .dfa-leg i.is-now { background: var(--df-surface); box-shadow: inset 0 0 0 2.5px var(--df-accent); }
@keyframes dfa-pop { from { opacity: 0; transform: scale(.6); } }
.dfa-leg { display: flex; gap: 18px; font-size: 12.5px; color: var(--df-ink-3); margin-bottom: 22px; }
.dfa-leg span { display: inline-flex; gap: 7px; align-items: center; }
.dfa-leg i { width: 12px; height: 12px; border-radius: 4px; }
.dfa-big { font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px; max-width: 24ch; }
.dfa-pcap { margin: 0; color: var(--df-ink-3); font-size: 14.5px; line-height: 1.45; }
.dfa-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.dfa-post { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--df-ink); background: var(--df-panel); border-radius: 16px; padding: 8px 8px 12px; transform: rotate(calc((var(--i) - 1) * 1.6deg)); transition: transform .22s var(--dfa-ease), box-shadow .22s; animation: dfa-in .3s calc(var(--i) * 60ms) var(--dfa-ease) both; }
.dfa-post:hover, .dfa-post:focus-visible { color: var(--df-ink); transform: translateY(-4px) rotate(0); box-shadow: var(--df-shadow-soft); outline: none; }
.dfa-post:focus-visible { box-shadow: 0 0 0 2px var(--df-accent); }
.dfa-post .ph { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--df-navy); }
.dfa-post img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.dfa-post b { font-size: 13.5px; line-height: 1.25; padding: 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dfa-post small { font-size: 12px; color: var(--df-ink-3); padding: 0 4px; }
.dfa-ql { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; margin: 12px 0 8px; max-width: 520px; }
.dfa-qh { margin: 0 0 16px; color: var(--df-ink-3); font-size: 14.5px; }
.dfa-hrs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dfa-hrs span { padding: 14px 10px; border-radius: 14px; background: var(--df-panel); font-size: 14.5px; text-align: center; color: var(--df-ink-2); }
.dfa-hrs span.on { background: var(--df-ink); color: var(--df-paper); font-weight: 650; }
.dfa-ta { height: 110px; border-radius: 14px; background: var(--df-panel); padding: 14px 16px; }
.dfa-ta .cur { display: inline-block; width: 2px; height: 20px; background: var(--df-accent); animation: dfa-blink 1.1s steps(1) infinite; }
@keyframes dfa-blink { 50% { opacity: 0; } }
.dfa-cnt { display: flex; align-items: center; gap: 10px; font: 500 12.5px var(--dfa-mono); color: var(--df-ink-3); margin: 8px 0 0; }
.dfa-cnt i { flex: 1; height: 3px; border-radius: 3px; background: var(--df-line); }
.dfa-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.dfa-tools span { font: 600 15px var(--dfa-mono); padding: 10px 14px; border-radius: 12px; background: var(--df-panel); animation: dfa-in .3s var(--d) var(--dfa-ease) both; }
.dfa-tools span:first-child { background: var(--df-accent-soft); color: var(--df-accent); }
@media (max-width: 860px) { .dfa-look { grid-template-columns: minmax(0, 1fr); gap: 16px; } .dfa-proof { min-height: 0; } }
@media (max-width: 560px) {
    .dfa-lookwrap { padding-left: 8px; padding-right: 8px; }
    .dfa-look { border-radius: 24px; padding: 24px 16px; }
    .dfa-look-list { margin: 12px 0 14px; }
    .dfa-look-list button { padding: 8px 10px; font-size: .95rem; gap: 10px; }
    .dfa-proof { padding: 18px; border-radius: 20px; }
    .dfa-posts { gap: 6px; margin: 12px 0; }
    .dfa-post { padding: 5px 5px 8px; border-radius: 12px; }
    .dfa-post b { font-size: 11.5px; -webkit-line-clamp: 2; }
    .dfa-post small { display: none; }
    .dfa-weeks { gap: 4px; margin: 12px 0 10px; }
    .dfa-weeks i { border-radius: 6px; }
    .dfa-leg { margin-bottom: 12px; }
    .dfa-big { font-size: 1.2rem; }
    .dfa-hrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dfa-hrs span { padding: 10px 8px; }
    .dfa-ta { height: 70px; }
    .dfa-ql { font-size: 1.08rem; margin: 8px 0 6px; }
    .dfa-qh { margin-bottom: 10px; font-size: 13.5px; }
}

/* ═══ How to apply ═════════════════════════════════════════════════ */
.dfa-flow { padding-bottom: clamp(40px, 7vh, 72px); }
.dfa-flow > * + * { margin-top: clamp(40px, 7vh, 72px); }
#apply, #apply-form, #apply-review { scroll-margin-top: calc(var(--df-nav-h) + 16px); }

/* Before you start */
.dfa-ready { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 34px; align-items: center; background: var(--df-panel); border-radius: 28px; padding: 34px;
    background-image: linear-gradient(color-mix(in srgb, var(--df-line) 75%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--df-line) 75%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
body.public .dfa-ready h2 { font-size: var(--df-type-h2); margin: 14px 0 22px; }
.dfa-start { margin-top: 24px; }
.dfa-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dfa-steps li { position: relative; padding: 22px 16px 0 0; min-width: 0; }
.dfa-steps li::before { content: ""; position: absolute; top: 6px; left: 14px; right: 0; height: 2px; background: var(--df-line); }
.dfa-steps li:last-child::before { display: none; }
.dfa-steps i { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--df-surface); box-shadow: inset 0 0 0 2.5px var(--df-accent); }
.dfa-steps li:first-child i { background: var(--df-accent); }
.dfa-steps b { display: block; font-size: 1.12rem; letter-spacing: -.01em; color: var(--df-ink); }
.dfa-steps span { display: block; color: var(--df-ink-2); font-size: 14.5px; line-height: 1.4; margin-top: 4px; }
.dfa-steps.is-done { grid-column: 1 / -1; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--df-line); }
.dfa-steps.is-done li:first-child i { background: var(--df-ok); box-shadow: none; }
.dfa-steps.is-done b { font: 600 11.5px var(--dfa-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--df-accent); }
.dfa-steps.is-done span { font-size: 15.5px; color: var(--df-ink); font-weight: 600; overflow-wrap: anywhere; }
.dfa-callouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dfa-callout { background: var(--df-surface); border-radius: 18px; padding: 16px 18px; font-size: 15px; line-height: 1.4; color: var(--df-ink); }
.dfa-callout .dfa-mono { display: block; margin-bottom: 8px; }
.dfa-callout-row { display: flex; gap: 10px; align-items: center; }
.dfa-sil { width: 44px; height: 44px; border-radius: 12px; background: var(--df-panel); display: grid; place-items: center; flex: none; overflow: hidden; color: var(--df-line-strong); }
.dfa-sil svg { width: 34px; height: 34px; }
.dfa-pfl { display: inline-block; font: 500 12.5px var(--dfa-mono); background: var(--df-panel); border-radius: 8px; padding: 5px 8px; margin: 0 6px 6px 0; overflow-wrap: anywhere; }
.dfa-pfl b { color: var(--df-accent); font-weight: 600; }
@media (max-width: 980px) { .dfa-ready { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
    .dfa-ready { padding: 22px 18px; gap: 18px; border-radius: 24px; }
    body.public .dfa-ready h2 { margin: 10px 0 14px; }
    .dfa-steps li { padding-right: 8px; }
    .dfa-steps b { font-size: 1rem; }
    .dfa-steps span { font-size: 13px; }
    .dfa-steps.is-done { margin-top: 16px; padding-top: 16px; }
    .dfa-steps.is-done span { font-size: 13.5px; }
    .dfa-callouts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -18px; padding: 4px 18px 10px; scrollbar-width: none; }
    .dfa-callouts::-webkit-scrollbar { display: none; }
    .dfa-callout { flex: 0 0 76%; scroll-snap-align: start; }
}

/* the stack of cards */
.dfa-stackwrap { padding-bottom: 0; }
.dfa-flow + .dfa-stackwrap, main > .dfa-stackwrap { padding-bottom: clamp(40px, 7vh, 72px); }
.dfa-prog { display: flex; gap: 2px; width: min(340px, 100%); margin: 0 auto 6px; }
.dfa-prog[hidden] { display: none; }
.dfa-prog i { flex: 1 1 0; min-width: 0; height: 8px; border-radius: 2px; background: var(--df-line); transition: background .35s var(--dfa-ease); }
.dfa-prog i.on { background: var(--c, var(--df-accent)); }
.dfa-stack { position: relative; padding-top: 46px; max-width: 860px; margin: 0 auto; }
.dfa-ghost { position: absolute; left: 0; right: 0; border-radius: 28px; height: 120px; }
.dfa-ghost[hidden] { display: none; }
.dfa-ghost.g1 { top: 22px; margin: 0 22px; background: var(--df-cell); }
.dfa-ghost.g2 { top: 0; margin: 0 46px; background: var(--dfa-grad); }
.dfa-card { position: relative; background: var(--df-surface); border: 0; border-radius: 28px; box-shadow: var(--dfa-card-shadow); padding: 30px 34px; margin: 0; min-width: 0; }
[data-theme="dark"] .dfa-card { box-shadow: var(--dfa-card-shadow), inset 0 0 0 1px var(--df-line); }
.dfa-card + .dfa-card { margin-top: 20px; }
.dfa-card[hidden] { display: none; }
.dfa-stack.is-stepped .dfa-card { margin-top: 0; animation: dfa-cardin .55s var(--dfa-ease); }
.dfa-stack.is-stepped .dfa-card.is-back { animation-name: dfa-cardback; }
@keyframes dfa-cardin { from { opacity: 0; transform: translateY(26px) rotate(-1.6deg) scale(.97); } }
@keyframes dfa-cardback { from { opacity: 0; transform: translateY(-20px) rotate(1.4deg) scale(.98); } }
body.public .dfa-legend { float: left; width: 100%; padding: 0; margin: 0 0 14px; font-family: inherit; font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: -.005em; font-size: clamp(2.2rem, 4vw, 3.4rem); color: var(--df-ink); }
body.public .dfa-legend.is-small { font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--df-ink-3); }
.dfa-card > legend + * { clear: both; }
.dfa-legend + .dff-help { margin-top: -6px; }
.dfa-qn { font: 700 13px var(--dfa-mono); color: var(--df-accent); margin-right: 4px; }
.dfa-q { font-size: 1.15rem; }
.dfa-count { text-align: right; font-family: var(--dfa-mono); font-size: 12.5px; }
.dfa-warn { margin-bottom: 14px; }
.dfa-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.dfa-checks .dff { margin-bottom: 8px; }
.dfa-checks .dff-check { height: 100%; }
.dfa-soc { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.dfa-soc-x { color: var(--df-ink); }
.dfa-headshot { width: 120px; height: 120px; object-fit: cover; border-radius: 16px; display: block; margin-top: 10px; }
.dfa-card .df-crop-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.dfa-card .df-crop-tools label { font-weight: 600; font-size: .92rem; margin-right: .2rem; }
.dfa-card .df-crop-tools input[type="range"] { max-width: 200px; accent-color: var(--df-accent); }
.dfa-navrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.dfa-navrow .dff-b2[disabled] { opacity: .4; cursor: default; }
.dfa-plainfoot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 20px; }
.dfa-plainfoot[hidden] { display: none; }
#applyNotices .df-note { max-width: 860px; margin: 0 auto 1.25rem; }

/* closed */
.dfa-closed { padding: 40px 38px 34px; }
body.public .dfa-closed h2 { font-size: var(--df-type-h2); margin: 18px 0 14px; }
.dfa-closed .dfa-lede { margin: 0; }

@media (max-width: 640px) {
    .dfa-stack { padding-top: 40px; }
    .dfa-card { padding: 22px 18px; }
    .dfa-closed { padding: 28px 20px; }
    .dfa-ghost.g1 { margin: 0 12px; }
    .dfa-ghost.g2 { margin: 0 24px; }
    .dfa-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6px; }
    .dfa-checks .dff-check { padding: 10px; gap: 8px; font-size: 13px; line-height: 1.3; }
    .dfa-checks .dff-check input { width: 18px; height: 18px; }
    .dfa-navrow .dff-b1, .dfa-navrow .dff-b2 { padding: 11px 16px; font-size: 14.5px; }
}

/* review: the application card */
.dfa-review[hidden] { display: none; }
body.public .dfa-rev-h { font-size: var(--df-type-h2); outline: none; }
.dfa-rev { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 22px; }
.dfa-rev-card, .dfa-rev-list { background: var(--df-surface); border-radius: 22px; padding: 26px; min-width: 0; }
[data-theme="dark"] :is(.dfa-rev-card, .dfa-rev-list) { box-shadow: inset 0 0 0 1px var(--df-line); }
.dfa-rev-card { position: sticky; top: calc(var(--df-nav-h) + 16px); }
.dfa-rev-who { display: flex; gap: 14px; align-items: center; }
.dfa-rev-ph { width: 58px; height: 58px; border-radius: 16px; flex: none; background: var(--df-panel) center / cover no-repeat; }
.dfa-rev-id { min-width: 0; }
.dfa-rev-id b { display: block; font-size: 18px; overflow-wrap: anywhere; color: var(--df-ink); }
.dfa-rev-id span { color: var(--df-ink-3); font-size: 14px; overflow-wrap: anywhere; }
.dfa-rev-bar { display: flex; gap: 2px; margin: 22px 0 18px; }
.dfa-rev-bar i { flex: 1 1 0; height: 8px; border-radius: 2px; background: var(--df-line); }
.dfa-rev-bar i.on { background: var(--c, var(--df-accent)); }
.dfa-rev-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--df-line); padding-top: 14px; margin: 0 0 20px; font-size: 13px; }
.dfa-rev-stats dt { font: 600 11px var(--dfa-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--df-ink-3); }
.dfa-rev-stats dd { margin: 2px 0 0; font-weight: 700; color: var(--df-ink); }
.dfa-rev-miss { margin: 0 0 14px; background: var(--df-danger-soft); border-radius: 14px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.dfa-rev-miss[hidden] { display: none; }
.dfa-rev-miss button { all: unset; cursor: pointer; font-size: 13px; padding: 4px 10px; border-radius: 999px; color: var(--df-danger); background: color-mix(in srgb, var(--df-danger) 12%, var(--df-surface)); }
.dfa-rev-miss button:focus-visible { outline: 2px solid var(--df-accent); }
.dfa-submit { width: 100%; margin-bottom: 4px; }
.dfa-rev-list { max-height: min(560px, 64vh); overflow: auto; overscroll-behavior: contain; }
.dfa-rb-g { padding: 18px 0; border-top: 1px solid var(--df-line); }
.dfa-rb-g:first-child { border-top: 0; padding-top: 4px; }
.dfa-rb-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dfa-rb-h b { font-size: 17px; color: var(--df-ink); }
.dfa-rb-g dl { margin: 0; display: grid; gap: 8px; }
.dfa-rb-r { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 14px; font-size: 15px; }
.dfa-rb-r.is-q { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.dfa-rb-r dt { color: var(--df-ink-3); font-weight: 400; }
.dfa-rb-r dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.5; color: var(--df-ink); }
.dfa-rb-r img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.dfa-rb-r details summary { cursor: pointer; }
.dfa-rb-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: var(--df-ok-soft); color: var(--df-ok); margin: 0 4px 4px 0; }
.dfa-rb-miss { color: var(--df-danger); }
@media (max-width: 980px) {
    .dfa-rev { grid-template-columns: minmax(0, 1fr); }
    .dfa-rev-card { position: static; }
    .dfa-rev-list { max-height: none; }
}
@media (max-width: 640px) {
    .dfa-rev-card, .dfa-rev-list { padding: 18px; }
    .dfa-rb-r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ═══ /apply: page head and "Postmarked" ═══════════════════════════ */
.dfa-page { padding: 1.5rem 0 0; }
body.public .dfa-page-h { font-size: var(--df-type-hero); margin: 0 0 clamp(24px, 4vh, 40px); }
.dfa-done { padding: 1.5rem 0 clamp(40px, 7vh, 72px); }
.dfa-postmark { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; background: var(--df-panel); border-radius: 30px; padding: 40px; overflow: hidden; }
.dfa-postmark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--df-ink) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--df-ink) 6%, transparent) 1px, transparent 1px); background-size: 22px 22px;
    -webkit-mask: radial-gradient(ellipse at center, black 30%, transparent 85%); mask: radial-gradient(ellipse at center, black 30%, transparent 85%); }
.dfa-postmark > * { position: relative; }
body.public .dfa-post-h.dfa-disp { font-size: var(--df-type-hero); outline: none; margin-bottom: 22px; }
.dfa-post-l .dff-b1 { margin-top: 8px; }
.dfa-post-r { position: relative; width: 260px; max-width: 100%; justify-self: center; margin-top: 56px; }
.dfa-envelope { height: 170px; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--df-surface); color: var(--df-ink); }
.dfa-envelope b { overflow-wrap: anywhere; }
.dfa-envelope .dfa-mono { color: var(--df-ink-3); }
.dfa-envelope .dfa-mono + b + .dfa-mono { margin-top: 6px; }
.dfa-pm { position: absolute; top: -56px; right: -6px; width: 130px; height: 130px; border-radius: 50%; border: 3px solid currentColor; color: var(--df-accent); background: color-mix(in srgb, var(--df-surface) 70%, transparent);
    display: grid; place-content: center; text-align: center; font: 700 10px var(--dfa-mono); letter-spacing: .1em; transform: rotate(-12deg); animation: dfa-stamp .6s var(--dfa-ease) both; padding: 12px; }
.dfa-pm b { display: block; font-size: 26px; font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; letter-spacing: 0; margin: 4px 0; font-family: "Bricolage Grotesque", system-ui, sans-serif; }
@keyframes dfa-stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.6); } }
@media (max-width: 760px) {
    .dfa-postmark { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; border-radius: 24px; }
    .dfa-post-r { margin-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    :is(.dfa-top, .dfa-flow, .dfa-lookwrap, .dfa-stackwrap, .dfa-page) *,
    :is(.dfa-top, .dfa-flow, .dfa-lookwrap, .dfa-stackwrap, .dfa-page) *::before { animation: none !important; transition: none !important; }
}