/* ============================================================
   Field Organizers — Louisville Democratic Party &
   Kentucky House Democratic Caucus Campaign Committee
   Design language after Civic Voice Partners:
   heavy geometric display, mono utility, red eyebrows,
   rounded cards, and one repeated device — the dividing bar.
   ============================================================ */

:root{
  --navy:      #093c76;   /* key color — page ground */
  --navy-deep: #062a55;   /* pressed states */
  --paper:     #f7f5f0;   /* card ground */
  --ink:       #11253f;   /* body text */
  --red:       #d92438;   /* eyebrows, required marks */
  --mist:      #a9c4e8;   /* secondary text on navy */

  --rule:      rgba(17,37,63,.14);
  --rule-soft: rgba(17,37,63,.08);
  --field:     #ffffff;
  --field-line:rgba(17,37,63,.28);


  /* ---- spacing scale -------------------------------------------------
     One 4px-based scale for everything. Before this the stylesheet used 35
     distinct px values and 26 different clamp() pairs, which is why the
     rhythm kept reading as accidental. Static steps for component-level
     spacing, fluid steps for the gaps between sections.
     Rule that must hold: --flow-xl (between cards) is larger than any gap
     inside a card, so the biggest break on the page is also the widest. */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;

  --flow-xs:  clamp(12px, 1.5vw, 16px);
  --flow-sm:  clamp(16px, 2vw,   24px);
  --flow-md:  clamp(24px, 3vw,   32px);
  --flow-lg:  clamp(32px, 4vw,   48px);
  --flow-xl:  clamp(48px, 5vw,   64px);
  --flow-2xl: clamp(48px, 6vw,   80px);

  --shell: 1140px;
  --jd-col: 240px;
  --r-card: 22px;
  --r-field: 14px;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease: cubic-bezier(.25,.46,.45,.94);
}

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

[hidden]{ display:none !important; }

/* The confirmation covers the page with a fixed overlay, and the flow content
   behind it is display:none, so the document is already exactly viewport height
   and cannot scroll. Locking overflow here would make the viewport
   non-scrollable, which stops the browser reserving the scrollbar gutter, which
   moved the centring axis and made the logo lockup jump sideways on submit. */
.is-done .masthead, .is-done main, .is-done .skip,
.is-closed .masthead, .is-closed main, .is-closed .skip{ display:none; }


html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* The scrollbar track is always present. Without this, the long form page has
     a scrollbar and the confirmation does not, so the centring axis moves by the
     scrollbar's width and the logo lockup visibly jumps sideways on submit.
     `scrollbar-gutter:stable` does not solve it, because a browser will not
     reserve a gutter for a root that is not scrollable. The cost is an inert
     track on the confirmation, which is invisible on any platform with overlay
     scrollbars, and is a far smaller artefact than the jump. */
  overflow-y:scroll;
  scrollbar-gutter:stable;
}

body{
  margin:0;
  background:var(--navy);
  color:var(--ink);
  font-family:var(--display);
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--s-6); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--paper); color:var(--ink);
  padding:var(--s-3) var(--s-4); border-radius:0 0 12px 0;
  font-family:var(--mono); font-size:.8125rem; text-transform:uppercase; letter-spacing:.08em;
}
.skip:focus{ left:0; }

/* ---------- shared type ---------- */


.card-title{
  margin:0;
  font-family:var(--display);
  font-variation-settings:'wdth' 86,'wght' 800;
  font-size:clamp(1.9rem,4.2vw,2.9rem);
  line-height:1.02;
  letter-spacing:-.015em;
  color:var(--navy);
}

/* ---------- logo lockup ---------- */

.lockup{
  display:flex; align-items:center; justify-content:center;
  gap:var(--flow-sm);
}
.lockup-seal{ height:clamp(56px,6.2vw,78px); width:auto; }
.lockup-word{ height:clamp(23px,2.4vw,30px); width:auto; }
.lockup-bar{
  display:block; width:2px; height:clamp(36px,4vw,50px); flex:0 0 2px;
  background:rgba(255,255,255,.38);
  border-radius:2px;
}

/* ---------- masthead ---------- */

.masthead{
  padding-top:var(--flow-lg);
  padding-bottom:var(--flow-lg);
  text-align:center;
  position:relative;
  overflow:hidden;
}


/* Derek's order: the CVP mark leads, the headline follows, then the two client
   logos below it as the supporting credit. */
.cvp{
  display:inline-block;
  line-height:0;
  transition:opacity .18s var(--ease);
}
.cvp img{ height:clamp(50px,5.6vw,72px); width:auto; }
.cvp:hover{ opacity:.78; }

.supporting{
  /* It labels the lockup beneath it, so it reads as an eyebrow above the two
     org logos, one clear step over the facts strip (14-15px) rather than at the
     12px of a fine-print caption. Tracking eases off as the size grows, so it
     does not read as stretched. */
  margin:var(--flow-md) 0 var(--s-4);
  font-family:var(--mono);
  font-size:clamp(1.125rem,1.9vw,1.5rem); font-weight:600;
  letter-spacing:.085em; text-transform:uppercase;
  color:#a9c4e8;
}

.masthead-title{
  margin:var(--flow-md) 0 0;
  font-family:var(--display);
  font-variation-settings:'wdth' 84,'wght' 800;
  font-size:clamp(2.6rem,8.6vw,5.75rem);
  line-height:.92;
  letter-spacing:-.03em;
  text-wrap:balance;
  text-transform:uppercase;
  color:#fff;
}

.masthead-sub{
  margin:var(--flow-xs) auto 0;
  max-width:54ch;
  font-variation-settings:'wdth' 100,'wght' 500;
  font-size:clamp(.9375rem,1.2vw,1.0625rem);
  line-height:1.45;
  color:#e8f0fb;
}

/* fact strip — the dividing bar, repeated */
.facts{
  list-style:none;
  margin:var(--flow-md) 0 0;
  padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--s-2) 0;
  font-variation-settings:'wdth' 100,'wght' 600;
  font-size:clamp(.875rem,1.15vw,.9375rem);
  letter-spacing:.005em;
  color:#dce8f8;
}
.facts li{ padding:0 var(--s-4); position:relative; }
.facts li + li::before{
  content:''; position:absolute; left:0; top:50%;
  width:2px; height:15px; margin-top:-7.5px;
  background:rgba(220,232,248,.42); border-radius:2px;
}

.masthead-actions{
  margin-top:var(--flow-md);
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--s-3);
}
/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:52px;
  padding:0 var(--s-7);
  border:2px solid transparent;
  border-radius:999px;
  font-family:var(--display);
  font-variation-settings:'wdth' 96,'wght' 700;
  font-size:.9375rem; letter-spacing:.02em; line-height:1;
  text-decoration:none; cursor:pointer;
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease);
}
.btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.btn-solid{ background:var(--paper); color:var(--navy); border-color:var(--paper); }
.btn-solid:hover{ background:#fff; border-color:#fff; }

.btn-line{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-line:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

.btn-submit{
  background:var(--navy); color:#fff; border-color:var(--navy);
  min-height:56px; padding:0 var(--s-8); font-size:1rem;
}
.btn-submit:hover{ background:var(--navy-deep); border-color:var(--navy-deep); }
.btn-submit[aria-busy="true"]{ background:var(--navy-deep); border-color:var(--navy-deep); cursor:default; pointer-events:none; }

/* loading */
.spinner{ display:none; width:16px; height:16px; flex:0 0 16px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:999px; animation:spin .7s linear infinite; }
.btn-submit[aria-busy="true"] .spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg) } }

:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible{ border-radius:999px; }

/* ---------- cards ---------- */

.card{
  background:var(--paper);
  border-radius:var(--r-card);
  padding:var(--flow-xl) var(--flow-xl) var(--flow-lg);
  margin-bottom:var(--flow-xl);
  box-shadow:0 20px 50px rgba(3,20,45,.16);
}
.card-top{
  margin-bottom:var(--flow-md);
  padding-bottom:var(--flow-xs);
  border-bottom:2px solid var(--rule);
}
.masthead-sub .org{ display:inline-block; }

/* ---------- job description: side headings + spine ---------- */

.jd{
  display:grid;
  grid-template-columns:var(--jd-col) minmax(0,1fr);
  position:relative;
  padding-block:var(--flow-sm);
  border-top:1px solid var(--rule-soft);
}
.jd:first-of-type{ border-top:0; padding-top:0; }
.jd:last-of-type{ padding-bottom:0; }

.jd-head{ padding-right:var(--s-7); }
.jd-head h3{
  /* 6px measured: aligns this heading's first baseline with the body's first
     line in the next column, without inflating the leading of the three
     headings that wrap to two lines. */
  margin:6px 0 0;
  font-family:var(--display);
  font-variation-settings:'wdth' 92,'wght' 700;
  font-size:.8125rem;
  line-height:1.4;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--navy);
  text-wrap:balance;
}
.jd-body{
  padding-left:var(--s-7);
}

.jd::before{
  content:'';
  position:absolute;
  left:var(--jd-col);
  top:var(--flow-sm); bottom:var(--flow-sm);
  width:2px;
  background:var(--rule);
}
.jd:first-of-type::before{ top:0; }
.jd:last-of-type::before{ bottom:0; }
.jd-body > :first-child{ margin-top:0; }
.jd-body > :last-child{ margin-bottom:0; }
.jd-body p{ margin:0 0 1em; max-width:70ch; }

.inline-link{
  color:var(--navy);
  font-variation-settings:'wdth' 100,'wght' 600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  transition:color .16s var(--ease);
}
.inline-link:hover{ color:var(--red); }

/* tick markers instead of bullets — same bar as the lockup */
.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{
  position:relative;
  padding-left:var(--s-6);
  margin-bottom:.85em;
  max-width:70ch;
}
.ticks li:last-child{ margin-bottom:0; }
.ticks li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:13px; height:2px;
  background:var(--red); border-radius:2px;
}

/* ---------- form ---------- */

.card-form form{ margin:0; }

.honeypot{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.honeypot input{ font-size:16px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

.draft{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-4);
  margin:0 0 var(--flow-sm);
  padding:var(--s-3) var(--s-6);
  border-radius:12px;
  background:rgba(9,60,118,.07);
  font-size:.875rem;
  color:rgba(17,37,63,.75);
}
.draft button{
  border:0; background:none; padding:0;
  font-family:var(--display); font-variation-settings:'wdth' 100,'wght' 700;
  font-size:.875rem; color:var(--navy);
  text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
}
.draft button:hover{ color:var(--red); }

.fs{ border:0; margin:0; padding:0; }
.fs-q{
  margin-top:var(--flow-md);
  padding-top:var(--flow-xs);
  border-top:2px solid var(--rule);
}

.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-5) var(--s-6);
}
.field{ margin:0; display:flex; flex-direction:column; }
.field-wide{ grid-column:1 / -1; }

.field > label,
.qlabel{
  font-family:var(--mono);
  font-size:.75rem; font-weight:500;
  letter-spacing:.075em; text-transform:uppercase;
  color:rgba(17,37,63,.72);
  margin-bottom:var(--s-2);
  display:block;
}
.qlabel{ text-transform:none; letter-spacing:0; font-family:var(--display);
  font-variation-settings:'wdth' 100,'wght' 500; font-size:1rem; line-height:1.5;
  color:var(--ink); margin-bottom:var(--s-3); }

.req{ color:var(--red); }

input[type=text],input[type=email],input[type=tel],input[type=url],input[type=date],textarea{
  width:100%;
  font-family:var(--display);
  font-variation-settings:'wdth' 100,'wght' 500;
  font-size:1rem;
  color:var(--ink);
  background:var(--field);
  border:2px solid var(--field-line);
  border-radius:var(--r-field);
  padding:var(--s-3) var(--s-4);
  min-height:48px;          /* iOS sizes a date input to its content instead of
                               matching the text inputs, so the box is pinned */
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
  appearance:none;
}

/* iOS renders the date value in its own pseudo-element, which it centres and
   gives its own margin. Left-align it so it sits where every other value does. */
input[type=date]{ display:block; min-width:100%; }
input[type=date]::-webkit-date-and-time-value{ text-align:left; margin:0; }
input[type=date]::-webkit-datetime-edit{ padding:0; line-height:normal; }
textarea{ display:block; resize:vertical; min-height:150px; line-height:1.6; border-radius:16px; }
/* display:block removes the inline-block baseline gap that left a few stray
   pixels under every textarea */

input[type=text]:hover,input[type=email]:hover,input[type=tel]:hover,
input[type=url]:hover,input[type=date]:hover,textarea:hover{ border-color:rgba(17,37,63,.38); }

input:focus,textarea:focus{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 4px rgba(9,60,118,.14);
}
input:focus-visible,textarea:focus-visible{ outline:none; }

/* Empty, the field shows iOS's own "mm/dd/yyyy" text, which reads like a
   filled-in value and lets iOS size the box to that text instead of to the
   other inputs. Hide the placeholder and keep it in the layout, so the box
   stays a plain, correctly sized field until there is a real date in it. */
input[type=date].is-empty::-webkit-datetime-edit{ opacity:0; }
input[type=date].is-empty:focus::-webkit-datetime-edit{ opacity:1; }
input[type=date].is-empty{ color:rgba(17,37,63,.45); }
input[type=date]:focus{ color:var(--ink); }

.field-bad input,.field-bad textarea{ border-color:var(--red); }
.field-bad input:focus,.field-bad textarea:focus{ box-shadow:0 0 0 4px rgba(217,36,56,.16); }

.hint{
  margin-top:var(--s-2);
  font-size:.875rem;
  line-height:1.45;
  color:rgba(17,37,63,.6);
}
.address-status.is-bad{ color:var(--red); }
.err{
  font-family:var(--mono);
  font-size:.75rem; letter-spacing:.03em;
  color:var(--red);
  margin-top:var(--s-2);
  display:none;
}
.field-bad .err,.qbody.field-bad .err{ display:block; }

/* address typeahead: the list hangs off the field, so .combo is the origin.
   Nothing between here and .card sets overflow, so it is never clipped. */
.combo{ position:relative; display:block; }

.combo-list{
  position:absolute;
  top:calc(100% + 6px);
  left:0; right:0;
  z-index:20;                    /* over the fields that follow, under .done */
  margin:0; padding:var(--s-1);
  list-style:none;
  max-height:min(46vh,304px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--field);
  border:2px solid var(--navy);  /* the same edge the field takes on focus */
  border-radius:var(--r-field);
  box-shadow:0 18px 40px rgba(3,20,45,.18);
}

/* One row, one line: 22px of text inside 11px of padding is the 44px touch
   target, and a long address truncates rather than reflowing the list. */
.combo-opt{
  display:block;
  min-height:44px;
  padding:var(--s-3) var(--s-4);
  border-radius:10px;
  font-family:var(--display);
  font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.9375rem; line-height:22px;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  transition:background-color .14s var(--ease), color .14s var(--ease);
}
.combo-opt:hover{ background:rgba(9,60,118,.08); color:var(--navy); }

/* the keyboard's position in the list, which hover alone cannot show */
.combo-opt.is-active{
  background:rgba(9,60,118,.12);
  color:var(--navy);
  box-shadow:inset 0 0 0 2px rgba(9,60,118,.3);
}

/* file drop */
.filewrap{ display:block; position:relative; }
.filewrap input[type=file]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
  font-size:16px;          /* under 16px iOS zooms the page on focus */
}
.filedrop{
  display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  border:2px dashed var(--field-line);
  border-radius:var(--r-field);
  background:var(--field);
  padding:var(--s-5) var(--s-6);
  cursor:pointer;
  margin:0;
  transition:border-color .16s var(--ease), background-color .16s var(--ease);
}
.filedrop svg{ width:20px; height:20px; fill:none; stroke:var(--navy); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 20px; }
.filedrop-cta{
  font-family:var(--display);
  font-variation-settings:'wdth' 96,'wght' 700;
  font-size:.9375rem; text-transform:none; letter-spacing:0;
  color:var(--navy);
  margin:0;
}
.filedrop-sub{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(17,37,63,.5); margin:0;
}
.filewrap.is-over .filedrop{ border-color:var(--navy); background:#fff; }

/* .is-set already paints a solid navy border, so a focus style that only
   changed the border was invisible once a file was chosen. A ring layers on
   top of either state. */
.filewrap input[type=file]:focus-visible + .filedrop{
  border-color:var(--navy);
  background:#fff;
  box-shadow:0 0 0 3px var(--red);
}
.filewrap.is-set .filedrop{ border-style:solid; border-color:var(--navy); }

.filestatus{
  display:none;
  align-items:flex-start;
  gap:var(--s-2);
  margin-top:var(--s-3);
  font-family:var(--mono);
  font-size:.75rem; letter-spacing:.03em; line-height:1.5;
  color:var(--navy);
}
.filestatus.is-on{ display:flex; }
.filestatus.is-bad{ color:var(--red); }

/* the file is being compressed: a live indicator, not just a line of text */
.filestatus.is-working::before{
  content:''; flex:0 0 13px;
  width:13px; height:13px; margin-top:2px;
  border:2px solid rgba(9,60,118,.25);
  border-top-color:var(--navy);
  border-radius:999px;
  animation:spin .7s linear infinite;
}
.filewrap.is-working .filedrop{
  border-style:solid;
  border-color:var(--navy);
  cursor:progress;
  background:
    repeating-linear-gradient(115deg,
      rgba(9,60,118,.05) 0 12px, transparent 12px 24px) var(--field);
  animation:crawl 1.1s linear infinite;
}
.filewrap.is-working input[type=file]{ pointer-events:none; }
@keyframes crawl{ to{ background-position:24px 0, 0 0 } }

/* applicant questions */
.qlist{ display:flex; flex-direction:column; gap:var(--flow-md); }
.q{ min-width:0; }

.qbody{ min-width:0; position:relative; }

/* "Check Yes to continue." is short and never wraps, so it drops into the gap
   that already sits below the control instead of adding height and pushing
   every question under it down. The longer messages stay in flow, because
   those do wrap and would collide with the next question. */
.q .yes ~ .err{
  position:absolute;
  left:0; top:100%;
  margin-top:2px;
  white-space:nowrap;
}

.qtext{
  margin:0 0 var(--s-3);
  font-variation-settings:'wdth' 100,'wght' 500;
  font-size:1rem; line-height:1.5;
  color:var(--ink);
}
.yes{
  display:inline-flex; align-items:center; gap:var(--s-3);
  min-height:44px;                  /* 44px is the tap-target floor */
  padding:var(--s-2) var(--s-4) var(--s-2) 0;
  margin:calc(var(--s-2) * -1) 0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.yes input{ position:absolute; opacity:0; width:1px; height:1px; }
.yes-box{
  width:26px; height:26px; flex:0 0 26px;
  border:2px solid var(--field-line);
  border-radius:8px;
  background:var(--field);
  display:grid; place-items:center;
  transition:background-color .16s var(--ease), border-color .16s var(--ease);
}
.yes-box svg{
  width:16px; height:16px; fill:none; stroke:#fff;
  stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:scale(.6);
  transition:opacity .16s var(--ease), transform .16s var(--ease);
}
.yes-text{
  font-variation-settings:'wdth' 100,'wght' 600;
  font-size:1rem; line-height:1;
  color:var(--ink);
}
.yes:hover .yes-box{ border-color:rgba(17,37,63,.44); }
.yes input:checked + .yes-box{ background:var(--navy); border-color:var(--navy); }
.yes input:checked + .yes-box svg{ opacity:1; transform:scale(1); }
.yes input:focus-visible + .yes-box{ outline:3px solid var(--red); outline-offset:3px; }
.field-bad .yes-box{ border-color:var(--red); }

/* submit */
.submit-row{
  margin-top:var(--flow-md);
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-4);
}
.formerror{
  margin:var(--s-5) 0 0;
  padding:var(--s-4) var(--s-6);
  border-radius:14px;
  background:rgba(217,36,56,.09);
  border:2px solid rgba(217,36,56,.3);
  font-family:var(--mono); font-size:.8125rem; line-height:1.55; letter-spacing:.02em;
  color:#8e1523;
}

/* ---------- full-screen confirmation ---------- */
/* Mirrors the masthead: same lockup, same display type, same divider strip,
   so finishing the form lands you somewhere recognisably the same place. */

.done{
  position:fixed; inset:0; z-index:40;
  background:var(--navy);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  padding:var(--flow-xl) var(--s-5);
}
.done-inner{
  margin:auto;                 /* centres, and still scrolls when taller than the screen */
  width:100%; max-width:660px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

.done-lockup{ animation:rise .6s var(--ease) .04s both; }

.done-mark{
  width:clamp(74px,9vw,96px); height:clamp(74px,9vw,96px);
  flex:0 0 auto;
  border-radius:999px;
  background:var(--paper);
  display:grid; place-items:center;
  margin:var(--flow-lg) 0 var(--flow-md);
  animation:pop .55s var(--ease) .26s both;
}
.done-mark svg{
  width:52%; height:52%;
  fill:none; stroke:var(--navy);
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.done-mark svg path{
  stroke-dasharray:24;
  stroke-dashoffset:24;
  animation:draw .58s cubic-bezier(.65,0,.35,1) .6s forwards;
}
@keyframes pop{
  0%   { opacity:0; transform:scale(.5) }
  60%  { opacity:1; transform:scale(1.06) }
  100% { opacity:1; transform:scale(1) }
}
@keyframes draw{ to{ stroke-dashoffset:0 } }

.done-title{
  margin:0;
  font-variation-settings:'wdth' 78,'wght' 800;
  font-size:clamp(2.3rem,7.4vw,4.25rem);
  line-height:.94;
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:#fff;
  text-wrap:balance;
  animation:rise .6s var(--ease) .34s both;
}

.done-lead{
  margin:var(--flow-sm) 0 0;
  font-variation-settings:'wdth' 100,'wght' 600;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  line-height:1.4;
  color:#fff;
  animation:rise .6s var(--ease) .44s both;
}

.done-copy{
  margin:var(--s-3) auto 0; max-width:52ch;
  font-size:clamp(.9375rem,1.2vw,1.0625rem);
  line-height:1.55;
  color:#cfe0f6;
  text-wrap:pretty;
  animation:rise .6s var(--ease) .52s both;
}

.done-email{
  color:#fff;
  font-variation-settings:'wdth' 100,'wght' 600;
  overflow-wrap:anywhere;
}

.done-share{
  width:100%;
  margin-top:var(--flow-md);
  padding-top:var(--flow-sm);
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-4);
  animation:rise .6s var(--ease) .68s both;
}
.done-share-label{
  margin:0;
  font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.9375rem;
  color:#a9c4e8;
}

/* focus target for screen readers, not an interactive control */
.done-title:focus,.done-title:focus-visible{ outline:none; }

/* scroll targets take focus so the skip link still works; they are not
   interactive, so they must not paint a focus ring */
#apply:focus,#description:focus{ outline:none; }

/* ---------- applications closed ---------- */
/* The masthead, headline swapped, on the confirmation's full-screen ground.
   .cvp, .masthead-title, .supporting and .lockup are the page's own rules, not
   copies of them, so the two cannot drift apart. Only the spacing below the
   lockup and the display rules live here. */

/* These must sit after the .done block above: .closed also carries .done, both
   are one class deep, and source order is the only thing deciding it. */
.closed{ display:none; }
.is-closed .closed{ display:flex; }

/* Somebody who submits in the last minute and then watches the clock tick past
   it keeps their confirmation. .is-done always wins. */
.is-done .closed{ display:none !important; }

/* The masthead runs its fact strip at this distance below the lockup; the
   date line takes that slot here. */
/* Without balance the date stranded "18th." on a line of its own at phone
   width. */
.closed .done-lead{ margin-top:var(--flow-md); text-wrap:balance; }
.closed .done-copy{ max-width:44ch; }

/* ---------- the no-JS note above the form ---------- */
/* The only standing notice on the page. There is no countdown: the deadline
   is in the facts strip and under How to Apply, and the next thing the page
   says about it is the closed screen. This one exists because with JavaScript
   off nothing here can read the clock, and somebody deserves to know that
   before filling in nine fields. */

.formnote{
  display:flex; align-items:flex-start; gap:var(--s-3);
  margin:0 0 var(--flow-md);
  padding:var(--s-3) var(--s-5);
  border:1px solid var(--rule);
  border-radius:var(--r-field);
  background:rgba(217,36,56,.06);
  color:var(--ink);
  font-family:var(--display);
  font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.9375rem;
  line-height:1.5;
  text-wrap:pretty;
}

/* The dividing bar again, aligned to the cap height of the first line. */
.formnote-bar{
  flex:0 0 auto;
  width:22px; height:3px; border-radius:2px;
  margin-top:.66em;
  background:var(--red);
}

/* ---------- share ---------- */

.share{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--s-4);
  padding:0 0 var(--flow-2xl);
  text-align:center;
}
.share-title{
  margin:0;
  font-variation-settings:'wdth' 88,'wght' 800;
  font-size:clamp(1.1875rem,2.3vw,1.5rem);
  line-height:1.15; letter-spacing:-.01em;
  color:#fff;
  /* it needs 474px to set on one line; 34ch capped it at ~390 and stranded
     "us?" on its own. balance keeps the split even where it must wrap. */
  max-width:46ch;
  text-wrap:balance;
}
.share-links{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s-3); }

.ico{
  display:inline-grid; place-items:center;
  width:46px; height:46px;
  border:2px solid rgba(255,255,255,.28);
  border-radius:999px;
  color:#fff; text-decoration:none;
  transition:background-color .18s var(--ease), border-color .18s var(--ease);
}
.ico svg{ width:17px; height:17px; fill:currentColor; }
.ico:hover{ background:rgba(255,255,255,.14); border-color:#fff; }

/* ---------- motion ---------- */

.js-on .reveal{ opacity:0; transform:translateY(14px); animation:rise .7s var(--ease) both; }
.js-on .reveal[data-reveal="1"]{ animation-delay:.04s }
.js-on .reveal[data-reveal="2"]{ animation-delay:.13s }
.js-on .reveal[data-reveal="3"]{ animation-delay:.22s }
.js-on .reveal[data-reveal="4"]{ animation-delay:.31s }
.js-on .reveal[data-reveal="5"]{ animation-delay:.40s }
@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* The cards fade only, with no transform. A transform on a 1,500px block gets
   promoted to a compositing layer that Chrome mis-paints during scroll, which
   is what used to clip them. Opacity alone needs no layer, and this runs on
   load so it has finished before anyone scrolls. */
.js-on .card{ animation:fade .5s var(--ease) both; }
.js-on #description{ animation-delay:.49s; }
.js-on #apply{ animation-delay:.58s; }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

.reveal-up.is-armed{ opacity:0; transform:translateY(22px);
  transition:opacity .62s var(--ease), transform .62s var(--ease); }
.reveal-up.is-armed.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0s !important;
    transition-duration:.001ms !important; }
  .reveal,.js-on .reveal,.reveal-up.is-armed,.js-on .card{ opacity:1 !important; transform:none !important; }
  .done-lockup,.done-mark,.done-title,.done-lead,.done-copy,.done-share{
    opacity:1 !important; transform:none !important; }
  .done-mark svg path{ stroke-dashoffset:0 !important; }
  .spinner{ display:none !important; }
  .filestatus.is-working::before,.filewrap.is-working .filedrop{ animation:none !important; }
  .ico:hover{ transform:none; }
}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .jd{ grid-template-columns:minmax(0,1fr); gap:var(--s-3); }
  .jd-head{ padding-right:0; }
  .jd-body{ padding-left:0; }
  .jd::before{ display:none; }
  .jd-body p,.ticks li{ max-width:none; }
}

@media (max-width:344px){
  .facts li + li::before{ content:none; }
  .facts li{ padding:0 var(--s-2); }
}

@media (max-width:620px){
  body{ font-size:16.5px; }

  .masthead-title{ font-variation-settings:'wdth' 78,'wght' 800; }

  /* three inline, then the deadline on its own line. A separator can never
     start a line, which was the orphaned-bar bug. */
  .facts{ gap:0; font-size:.8125rem; }
  .facts li{ padding:0 var(--s-3); }
  .facts li:nth-child(4){
    flex:0 0 100%;
    padding:var(--s-3) 0 0;
    color:#fff;
    font-variation-settings:'wdth' 100,'wght' 700;
  }
  .facts li:nth-child(4)::before{ content:none; }
  .masthead{ padding-bottom:var(--flow-md); }
  .masthead-sub{ text-wrap:balance; }

  /* the share button takes its own row so the four icons stay on one line */
  .share-links .btn-line{ flex:0 0 100%; }

  /* dragging is not a thing on a touch screen */
  .filedrop-sub{ display:none; }
  .filedrop{ border-style:solid; }
  .shell{ padding-inline:var(--s-5); }
  .lockup{ gap:var(--s-4); }
  .lockup-seal{ height:54px; }
  .lockup-word{ height:22px; }
  .lockup-bar{ height:34px; }
  .grid{ grid-template-columns:minmax(0,1fr); }
  .facts li{ padding:0 var(--s-3); }
  .masthead-actions .btn{ width:100%; }
  .submit-row .btn-submit{ width:100%; }
  .card{ padding:var(--s-7) var(--s-6) var(--s-6); border-radius:18px; }

  /* addresses are routinely wider than the field here, so they ellipsise;
     smaller type fits more of the street before the cut. */
  .combo-list{ max-height:min(54vh,272px); }
  .combo-opt{ font-size:.875rem; padding:var(--s-3) var(--s-4); }
}