/* Mecavoy — shared design system for the v2 pages.
 *
 * Loaded AFTER /styles.css on every page (the integrity test requires every
 * page to link styles.css, and a few things still come from it: the box model,
 * the reduced-motion switch-off and the :target rules /oops.html runs on).
 * Everything here is scoped to body.ui, so a page without that class gets none
 * of it. The status pages, static and server-rendered, use section 14.
 *
 * Section 1 neutralizes the legacy global element rules inside body.ui at the
 * lowest specificity that still wins, using :where() so any class selector in a
 * page stylesheet beats it without a fight.
 *
 * BUTTONS: styles.css paints every <button> navy, including a hover rule at
 * specificity (0,2,1). Inside body.ui a button's colors come from custom
 * properties instead — set --bg, --fg, --bd, --bg-hover, --fg-hover on your
 * class (or use a .btn variant) rather than `background:` directly, and the
 * hover state follows without having to out-specify the legacy rule.
 */

/* ══ 0. tokens ════════════════════════════════════════════════════════════ */
:root{
  --c-ink:#1B1A19;
  --c-ink-2:#3F3A36;
  --c-ink-3:#6B635C;
  --c-ink-4:#8E857C;
  --c-paper:#FBF7EF;
  --c-paper-2:#F5EDDF;
  --c-sand:#EFE3CF;
  --c-surface:#FFFFFF;
  --c-line:#E8DDCB;
  --c-line-2:#D8C9B0;
  --c-navy-950:#141A3D;
  --c-navy-900:#1C2452;
  --c-navy-800:#232C60;
  --c-navy:#2E3A7D;
  --c-navy-600:#3B4788;
  --c-navy-400:#6470AA;
  --c-navy-100:#E3E6F3;
  --c-navy-50:#F1F2F9;
  --c-sun:#D9822B;
  --c-sun-600:#B8691C;
  --c-sun-100:#FBEBD9;
  --c-ok:#2F7D55;
  --c-ok-100:#E3F1E9;
  --c-err:#B4352B;
  --c-err-100:#F8E4E1;
  --c-warn:#9C6018;
  --c-warn-100:#F6E9D3;
  --c-warn-700:#7A4A10;
  --c-on-navy:#FBF7EF;
  --c-on-navy-2:rgba(251,247,239,.78);
  --c-on-navy-3:rgba(251,247,239,.56);

  --f-display:"Caprasimo",Georgia,"Times New Roman",Times,serif;
  --f-sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  --sh-1:0 1px 0 rgba(27,26,25,.04),0 1px 2px rgba(27,26,25,.06);
  --sh-2:0 1px 2px rgba(27,26,25,.05),0 8px 24px -12px rgba(27,26,25,.16);
  --sh-3:0 2px 6px rgba(27,26,25,.06),0 24px 48px -20px rgba(28,36,82,.28);
  --sh-4:0 4px 12px rgba(27,26,25,.08),0 40px 80px -24px rgba(20,26,61,.42);
  --ring:0 0 0 4px rgba(46,58,125,.16);

  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.2,1.3,.4,1);
  --d-1:140ms;
  --d-2:240ms;
  --d-3:420ms;
  --d-reveal:760ms;

  --container:1200px;
  --gutter:clamp(20px,4vw,40px);
  --section-y:clamp(80px,11vw,136px);
  --header-h:68px;
}

/* ══ 1. legacy neutralization (body.ui only) ════════════════════════════ */
html:has(body.ui){scroll-padding-top:calc(var(--header-h) + 18px)}
@media (prefers-reduced-motion:no-preference){
  html:has(body.ui){scroll-behavior:smooth}
}

body.ui{
  display:block;
  min-height:100svh;
  background:var(--c-paper);
  color:var(--c-ink-2);
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.65;
  overflow-x:clip;
}
body.ui::before,
body.ui::after{content:none;display:none}
/* overflow-x on body propagates to the viewport, so an element parked
   off-canvas before its reveal would still widen the layout viewport on
   phones. Clipping main as well contains it. */
body.ui main{overflow-x:clip}

:where(body.ui) :is(h1,h2,h3,h4,h5,h6){
  margin:0;
  font-family:var(--f-sans);
  font-size:inherit;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--c-ink);
  text-wrap:balance;
}
:where(body.ui) :is(p,ul,ol,figure,blockquote,dl,dd){margin:0}
:where(body.ui :is(ul,ol)[role=list]){list-style:none;padding:0}
:where(body.ui) img,
:where(body.ui) svg{display:block;max-width:100%}
:where(body.ui) img{height:auto}
:where(body.ui) a{color:inherit}
:where(body.ui) form{margin:0;width:auto}
:where(body.ui) footer{display:block;padding:0;font-size:inherit;color:inherit}

:where(body.ui) button{
  flex:initial;
  padding:0;
  border:0;
  border-radius:0;
  background:var(--bg,transparent);
  color:var(--fg,inherit);
  font:inherit;
  letter-spacing:inherit;
  white-space:normal;
  cursor:pointer;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out),
             border-color var(--d-1) var(--ease-out),box-shadow var(--d-1) var(--ease-out),
             transform var(--d-1) var(--ease-out),opacity var(--d-1) var(--ease-out);
}
/* Same specificity as styles.css's button:hover:not(:disabled), and later. */
:where(body.ui) button:hover:not(:disabled){
  background:var(--bg-hover,var(--bg,transparent));
  color:var(--fg-hover,var(--fg,inherit));
}
:where(body.ui) button:focus-visible{outline:2px solid var(--c-navy);outline-offset:3px}

/* The typo-fix chip is a legacy component reused on the landing page. Give it
   its colors back through the variables above. */
body.ui .status .fix{--bg:#FBF5EA;--fg:var(--c-navy);--bg-hover:var(--c-navy);--fg-hover:#FBF5EA}

:where(body.ui) :focus-visible{outline:2px solid var(--c-navy);outline-offset:3px}
body.ui ::selection{background:var(--c-navy-100);color:var(--c-ink)}

/* ══ 2. layout ══════════════════════════════════════════════════════════ */
.container{
  width:100%;
  max-width:calc(var(--container) + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{max-width:calc(820px + 2 * var(--gutter))}

.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(56px,7vw,88px)}
.section--paper2{background:var(--c-paper-2)}
.section--sand{background:var(--c-sand)}
.section--navy{
  background:var(--c-navy-900);
  color:var(--c-on-navy-2);
  --c-ink:var(--c-on-navy);
  --c-ink-2:var(--c-on-navy-2);
  --c-ink-3:var(--c-on-navy-3);
  --c-line:rgba(251,247,239,.14);
  --c-line-2:rgba(251,247,239,.22);
}
.section--navy .kicker{color:#F2B77A}

.section-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .kicker{justify-content:center}
.section-head > * + *{margin-top:18px}

.split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(40px,6vw,96px);
  align-items:center;
}
.split--reverse > :first-child{order:2}
@media (max-width:899px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split--reverse > :first-child{order:0}
}

.stack-xs > * + *{margin-top:8px}
.stack-sm > * + *{margin-top:14px}
.stack-md > * + *{margin-top:22px}
.stack-lg > * + *{margin-top:36px}

.cluster{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.divider{height:1px;border:0;margin:0;background:var(--c-line)}

/* ══ 3. type ════════════════════════════════════════════════════════════ */
/* Caprasimo has one weight and is heavy already. Never synthesize bold. */
.display-xl,.display-lg,.display-md{
  font-family:var(--f-display);
  font-weight:400;
  color:var(--c-ink);
  text-wrap:balance;
}
.display-xl{font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-.022em}
.display-lg{font-size:clamp(34px,4.4vw,56px);line-height:1.05;letter-spacing:-.018em}
.display-md{font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.014em}

.title-lg{font-size:clamp(20px,2vw,24px);font-weight:700;line-height:1.3;letter-spacing:-.012em;color:var(--c-ink)}
.title-md{font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.008em;color:var(--c-ink)}
.body-lg{font-size:clamp(18px,1.6vw,20px);line-height:1.6}
.body{font-size:17px;line-height:1.65}
.body-sm{font-size:15px;line-height:1.55}
.caption{font-size:13px;line-height:1.45;color:var(--c-ink-3)}
.tabular{font-variant-numeric:tabular-nums}
.text-navy{color:var(--c-navy)}
.section--navy .text-navy{color:#AEB8EE}
.measure{max-width:62ch}

:where(.ui) .lede{
  margin:0;
  max-width:60ch;
  font-size:clamp(18px,1.6vw,20px);
  line-height:1.6;
  color:var(--c-ink-2);
  text-wrap:pretty;
}
.section-head--center .lede{margin-inline:auto}
.section-head > .lede:not(:first-child){margin-top:18px}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  font-weight:750;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-navy);
}
.kicker::before{
  content:"";
  flex:none;
  width:22px;
  height:1.5px;
  background:currentColor;
  opacity:.7;
}
.kicker--plain::before{content:none}

/* ══ 4. buttons ═════════════════════════════════════════════════════════ */
body.ui .btn{
  --bg:transparent;
  --fg:var(--c-navy);
  --bd:transparent;
  --sh:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  min-height:48px;
  padding:0 22px;
  border:1px solid var(--bd);
  border-radius:12px;
  background:var(--bg);
  color:var(--fg);
  box-shadow:var(--sh);
  font-family:var(--f-sans);
  font-size:15.5px;
  font-weight:650;
  line-height:1.2;
  letter-spacing:-.003em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1) var(--ease-out),
             border-color var(--d-1) var(--ease-out),box-shadow var(--d-2) var(--ease-out),
             transform var(--d-1) var(--ease-out);
}
body.ui .btn:hover{background:var(--bg-hover,var(--bg));color:var(--fg-hover,var(--fg));border-color:var(--bd-hover,var(--bd))}
body.ui .btn:active{transform:translateY(1px)}
body.ui .btn:focus-visible{outline:2px solid var(--c-navy);outline-offset:3px}
body.ui .btn[aria-disabled=true],
body.ui .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

body.ui .btn-primary{
  --bg:var(--c-navy);--fg:#FBF7EF;--bg-hover:var(--c-navy-800);
  --sh:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px -12px rgba(28,36,82,.7);
}
body.ui .btn-secondary{--bg:var(--c-surface);--fg:var(--c-navy);--bd:var(--c-line-2);--bg-hover:var(--c-navy-50);--bd-hover:var(--c-navy-400);--sh:var(--sh-1)}
body.ui .btn-ghost{--bg:transparent;--fg:var(--c-navy);--bg-hover:var(--c-navy-50)}
body.ui .btn-on-navy{--bg:#FBF7EF;--fg:var(--c-navy-900);--bg-hover:#FFFFFF;--sh:0 10px 24px -12px rgba(0,0,0,.5)}
body.ui .btn-outline-on-navy{--bg:transparent;--fg:#FBF7EF;--bd:rgba(251,247,239,.36);--bg-hover:rgba(251,247,239,.08);--bd-hover:rgba(251,247,239,.7)}
body.ui .btn-danger{--bg:var(--c-err);--fg:#fff;--bg-hover:#9A2C23}
body.ui .btn-sm{min-height:38px;padding:0 14px;font-size:14px;border-radius:10px}
body.ui .btn-lg{min-height:56px;padding:0 28px;font-size:16.5px;border-radius:14px}
body.ui .btn-block{display:flex;width:100%}
body.ui .btn .ico{width:1.1em;height:1.1em}
body.ui .btn-arrow .ico{transition:transform var(--d-2) var(--ease-out)}
body.ui .btn-arrow:hover .ico{transform:translateX(3px)}

/* a quiet text link with an animated underline */
.link{
  color:var(--c-navy);
  font-weight:650;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
  transition:text-decoration-color var(--d-1) var(--ease-out);
}
.link:hover{text-decoration-color:currentColor}
.section--navy .link{color:#FBF7EF}

/* ══ 5. surfaces, badges, chips, icons ══════════════════════════════════ */
.surface{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}
.surface--flat{box-shadow:none}
.surface--pad{padding:clamp(20px,2.4vw,28px)}

.media{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--c-paper-2);
  isolation:isolate;
}
.media > picture,
.media > img,
.media > picture > img{display:block;width:100%;height:100%;object-fit:cover}
.media::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(27,26,25,.07);
  pointer-events:none;
}
/* One consistent warm grade, so photographs from different sources read as a set. */
.media--graded img{filter:saturate(.9) sepia(.07) contrast(1.03)}
.ratio-3x2{aspect-ratio:3/2}
.ratio-4x5{aspect-ratio:4/5}
.ratio-16x9{aspect-ratio:16/9}
.ratio-1x1{aspect-ratio:1/1}

.badge{
  --b-bg:var(--c-navy-50);
  --b-fg:var(--c-navy);
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:0 10px;
  border-radius:var(--r-pill);
  background:var(--b-bg);
  color:var(--b-fg);
  font-size:12.5px;
  font-weight:650;
  line-height:1.2;
  letter-spacing:.005em;
  white-space:nowrap;
}
.badge::before{content:none}
.badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--navy{--b-bg:var(--c-navy);--b-fg:#FBF7EF}
.badge--sun{--b-bg:var(--c-sun-100);--b-fg:#8A4A0D}
.badge--ok{--b-bg:var(--c-ok-100);--b-fg:#1F5E3E}
.badge--err{--b-bg:var(--c-err-100);--b-fg:#8E2921}
.badge--warn{--b-bg:var(--c-warn-100);--b-fg:var(--c-warn-700)}
.badge--neutral{--b-bg:#EFEAE2;--b-fg:var(--c-ink-3)}

.chip{
  --bg:var(--c-surface);
  --fg:var(--c-ink-2);
  --bd:var(--c-line-2);
  --bg-hover:var(--c-navy-50);
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:0 14px;
  border:1px solid var(--bd);
  border-radius:var(--r-pill);
  background:var(--bg);
  color:var(--fg);
  font-size:14px;
  font-weight:600;
  line-height:1.2;
}
.chip[aria-pressed=true]{--bg:var(--c-navy);--fg:#FBF7EF;--bd:var(--c-navy);--bg-hover:var(--c-navy-800)}
.chip--static{min-height:28px;padding:0 11px;font-size:13px}

.ico{
  flex:none;
  width:1.15em;
  height:1.15em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ico--lg{width:24px;height:24px}
.ico-tile{
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--c-navy-50);
  color:var(--c-navy);
}
.section--navy .ico-tile{background:rgba(251,247,239,.08);color:#F2B77A}

/* The brand chevron — the "v" of the wordmark, drawn as a paper plane. */
.chev-plane{fill:none;stroke:var(--c-navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.route-line{fill:none;stroke:var(--c-navy-400);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:2 7}

/* ══ 6. forms ═══════════════════════════════════════════════════════════ */
.fieldset{margin:0;padding:0;border:0;min-width:0}
.fieldset > legend{padding:0}
.fgroup{display:grid;gap:8px;min-width:0;align-content:start}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px}
.fgrid > .span-2{grid-column:1 / -1}
@media (max-width:640px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.flabel{font-size:14.5px;font-weight:650;line-height:1.3;color:var(--c-ink)}
.flabel .opt{font-weight:500;color:var(--c-ink-3)}
.req{color:var(--c-err);margin-left:2px}
.fhint{font-size:13.5px;line-height:1.5;color:var(--c-ink-3)}
.ferror{display:flex;gap:6px;align-items:flex-start;font-size:13.5px;font-weight:600;line-height:1.45;color:var(--c-err)}
.ferror:empty{display:none}

.ui .input,
.ui .textarea,
.ui .select{
  display:block;
  width:100%;
  min-width:0;
  min-height:48px;
  margin:0;
  padding:12px 14px;
  /* The border is the field's only edge on a white card, so it has to reach
     3:1 against white (ink-4 is 3.6:1); hover darkens it a step. */
  border:1px solid var(--c-ink-4);
  border-radius:var(--r-sm);
  background:var(--c-surface);
  color:var(--c-ink);
  font-family:var(--f-sans);
  font-size:16px;
  font-weight:500;
  line-height:1.4;
  text-align:left;
  outline:none;
  box-shadow:var(--sh-1);
  transition:border-color var(--d-1) var(--ease-out),box-shadow var(--d-1) var(--ease-out);
  -webkit-appearance:none;
  appearance:none;
}
/* ink-3 keeps placeholder text above 4.5:1 on white; the lighter weight is
   what tells it apart from an answer (ink, 500). */
.ui .input::placeholder,
.ui .textarea::placeholder{color:var(--c-ink-3);font-weight:400}
.ui .input:hover,
.ui .textarea:hover,
.ui .select:hover{border-color:var(--c-ink-3)}
.ui .input:focus,
.ui .textarea:focus,
.ui .select:focus{border-color:var(--c-navy);box-shadow:var(--ring)}
.ui .input[aria-invalid=true],
.ui .textarea[aria-invalid=true],
.ui .select[aria-invalid=true]{border-color:var(--c-err);box-shadow:0 0 0 4px rgba(180,53,43,.12)}
.ui .textarea{min-height:132px;line-height:1.55;resize:vertical}
.ui .select{
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B635C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px;
}
.ui .input:-webkit-autofill{-webkit-text-fill-color:var(--c-ink);-webkit-box-shadow:0 0 0 40px var(--c-surface) inset}

/* Checkbox rows. The control is a real input, restyled. */
.check{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:12px;
  align-items:start;
  font-size:15px;
  line-height:1.5;
  color:var(--c-ink-2);
  cursor:pointer;
}
.check input[type=checkbox]{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  margin:1px 0 0;
  border:1.5px solid var(--c-ink-4);
  border-radius:6px;
  background:var(--c-surface);
  cursor:pointer;
  transition:background-color var(--d-1) var(--ease-out),border-color var(--d-1) var(--ease-out);
}
.check input[type=checkbox]:hover{border-color:var(--c-navy)}
.check input[type=checkbox]:checked{
  border-color:var(--c-navy);
  background:var(--c-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7EF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
}
.check input[type=checkbox][aria-invalid=true]{border-color:var(--c-err)}
.check a{color:var(--c-navy);font-weight:650}

/* Choice cards (radio or checkbox inside a label). */
.radio-card{
  position:relative;
  display:grid;
  gap:10px;
  padding:20px 20px 20px 54px;
  border:1px solid var(--c-line-2);
  border-radius:var(--r-lg);
  background:var(--c-surface);
  box-shadow:var(--sh-1);
  cursor:pointer;
  transition:border-color var(--d-1) var(--ease-out),box-shadow var(--d-2) var(--ease-out),background-color var(--d-1) var(--ease-out);
}
.radio-card:hover{border-color:var(--c-navy-400)}
.radio-card > input{
  position:absolute;
  top:22px;
  left:20px;
  width:20px;
  height:20px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  border:1.5px solid var(--c-ink-4);
  border-radius:50%;
  background:var(--c-surface);
  cursor:pointer;
}
.radio-card > input[type=checkbox]{border-radius:6px}
.radio-card > input:checked{border:6px solid var(--c-navy)}
.radio-card > input[type=checkbox]:checked{
  border:1.5px solid var(--c-navy);
  background:var(--c-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7EF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
}
.radio-card:has(> input:checked){border-color:var(--c-navy);background:var(--c-navy-50);box-shadow:0 0 0 1px var(--c-navy),var(--sh-2)}
.radio-card:has(> input:focus-visible){outline:2px solid var(--c-navy);outline-offset:3px}

/* ══ 7. header ══════════════════════════════════════════════════════════ */
.skip-link{
  position:absolute;
  left:12px;
  top:-80px;
  z-index:100;
  padding:10px 16px;
  border-radius:10px;
  background:var(--c-navy);
  color:#FBF7EF;
  font-weight:700;
  text-decoration:none;
  transition:top var(--d-2) var(--ease-out);
}
.skip-link:focus{top:12px}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--header-h);
  background:rgba(251,247,239,.82);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--d-2) var(--ease-out),box-shadow var(--d-2) var(--ease-out),background-color var(--d-2) var(--ease-out);
}
.site-header[data-scrolled]{border-bottom-color:var(--c-line);box-shadow:0 8px 24px -20px rgba(27,26,25,.35)}
.site-header__inner{display:flex;align-items:center;gap:28px;height:100%}
.site-header__logo{display:block;flex:none;border-radius:6px}
.site-header__logo img{width:auto;height:27px}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.site-nav a{
  position:relative;
  padding:8px 12px;
  border-radius:8px;
  color:var(--c-ink-2);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:color var(--d-1) var(--ease-out),background-color var(--d-1) var(--ease-out);
}
.site-nav a:hover{color:var(--c-navy);background:rgba(46,58,125,.06)}
.site-nav a[aria-current=page]{color:var(--c-navy)}
.site-nav a[aria-current=page]::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:2px;
  height:2px;
  border-radius:2px;
  background:var(--c-navy);
}
.site-header__actions{display:flex;align-items:center;gap:10px;flex:none}
.nav-toggle{
  --bg:transparent;
  --bg-hover:rgba(46,58,125,.08);
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  place-items:center;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  display:block;
  width:20px;
  height:2px;
  border-radius:2px;
  background:var(--c-ink);
  transition:transform var(--d-2) var(--ease-out),opacity var(--d-1) var(--ease-out);
}
.nav-toggle__bars{position:relative}
.nav-toggle__bars::before,
.nav-toggle__bars::after{content:"";position:absolute;left:0}
.nav-toggle__bars::before{top:-6px}
.nav-toggle__bars::after{top:6px}
.nav-toggle[aria-expanded=true] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded=true] .nav-toggle__bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded=true] .nav-toggle__bars::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:959px){
  /* On desktop the nav's auto margin pushes the actions right. Here the nav
     leaves the row to become a dropdown, so the actions take the margin. */
  .site-header__actions{margin-left:auto}
  .nav-toggle{display:grid}
  .site-nav{
    position:absolute;
    top:var(--header-h);
    left:0;
    right:0;
    display:grid;
    gap:2px;
    margin:0;
    padding:12px var(--gutter) 22px;
    background:var(--c-paper);
    border-bottom:1px solid var(--c-line);
    box-shadow:0 24px 40px -28px rgba(27,26,25,.4);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity var(--d-2) var(--ease-out),transform var(--d-2) var(--ease-out),visibility 0s linear var(--d-2);
  }
  .site-nav a{padding:14px 12px;font-size:17px}
  .site-nav[data-open]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .site-nav a[aria-current=page]::after{content:none}
}
@media (max-width:420px){
  /* At 320px the logo, the CTA and the menu button only fit with a tighter gap. */
  .site-header__inner{gap:12px}
  .site-header__actions .btn{padding:0 12px;font-size:13.5px}
  .site-header__logo img{height:23px}
}

/* ══ 8. footer ══════════════════════════════════════════════════════════ */
.site-footer{
  padding-block:clamp(56px,7vw,80px) 28px;
  background:var(--c-paper-2);
  border-top:1px solid var(--c-line);
  color:var(--c-ink-3);
  font-size:15px;
}
.site-footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:40px 32px;
}
.site-footer__brand img{width:auto;height:26px}
.site-footer__brand p{margin-top:14px;max-width:30ch;color:var(--c-ink-3)}
.site-footer nav{display:grid;gap:10px;align-content:start}
.site-footer h2{
  margin-bottom:4px;
  font-size:12px;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-ink);
}
.site-footer a{
  justify-self:start;
  color:var(--c-ink-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--d-1) var(--ease-out),border-color var(--d-1) var(--ease-out);
}
.site-footer a:hover{color:var(--c-navy);border-bottom-color:currentColor}
.site-footer__legal{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px 24px;
  margin-top:clamp(40px,5vw,64px);
  padding-top:22px;
  font-size:13.5px;
  color:var(--c-ink-3);
}
/* The rule is drawn inside the gutters, so it spans the content and not the
   container's padding; a border-top would run 40px past both edges. */
.site-footer__legal::before{
  content:"";
  position:absolute;
  top:0;
  left:var(--gutter);
  right:var(--gutter);
  height:1px;
  background:var(--c-line);
}
/* Two columns from 860px down: between 760px and 860px the four-column grid
   left "support@mecavoy.com" wider than its column. */
@media (max-width:860px){
  .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer__brand{grid-column:1 / -1}
}

/* ══ 9. sticky mobile CTA ═══════════════════════════════════════════════ */
.sticky-cta{
  position:fixed;
  left:12px;
  right:12px;
  bottom:max(12px,env(safe-area-inset-bottom));
  z-index:60;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px 10px 18px;
  border:1px solid var(--c-line);
  border-radius:16px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:var(--sh-3);
  transform:translateY(calc(100% + 24px));
  visibility:hidden;
  transition:transform var(--d-3) var(--ease-out),visibility 0s linear var(--d-3);
}
.sticky-cta p{flex:1;min-width:0;font-size:14px;line-height:1.35;color:var(--c-ink-2)}
.sticky-cta strong{display:block;color:var(--c-ink);font-size:14.5px}
html.show-sticky-cta .sticky-cta{transform:none;visibility:visible;transition-delay:0s}
@media (min-width:900px){.sticky-cta{display:none}}
/* Room under the footer so the fixed bar never covers its last line. */
@media (max-width:899px){body.ui:has(.sticky-cta) .site-footer{padding-bottom:104px}}
/* While the bar shows, keyboard focus scrolls anything it would hide up above
   it. ui.js measures the bar into --sticky-cta-clearance; the fallback covers
   a bar of three lines. A different longhand from the scroll-padding-top in
   section 1. */
@media (max-width:899px){html.show-sticky-cta{scroll-padding-bottom:var(--sticky-cta-clearance,132px)}}

/* ══ 10. stamp (postmark) ═══════════════════════════════════════════════ */
.stamp{color:var(--c-navy)}
.stamp svg{overflow:visible}
.stamp .stamp-ring{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:3 5.5;opacity:.5}
.stamp .stamp-inner{fill:none;stroke:currentColor;stroke-width:2.5}
.stamp .stamp-mark{fill:none;stroke:currentColor;stroke-width:4.5;stroke-linejoin:miter;stroke-linecap:square}
.stamp .stamp-text{fill:currentColor;font-family:var(--f-sans);font-weight:800;font-size:12px;letter-spacing:2.6px}
.stamp .stamp-sub{fill:currentColor;font-family:var(--f-sans);font-weight:800;font-size:9.5px;letter-spacing:1.7px}
.stamp--sun{color:var(--c-sun-600)}

/* ══ 11. keyframes (shared vocabulary) ══════════════════════════════════ */
@keyframes ui-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}
@keyframes ui-surface{from{opacity:0;filter:blur(24px);transform:scale(1.06)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes ui-stamp{
  0%  {opacity:0;transform:rotate(-24deg) scale(1.7)}
  60% {opacity:1}
  100%{opacity:1;transform:rotate(-8deg) scale(1)}
}
@keyframes ui-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ui-shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
@keyframes ui-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ui-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ui-sheen{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes ui-spin{to{transform:rotate(360deg)}}
@keyframes ui-pop{0%{opacity:0;transform:translateY(8px) scale(.94)}100%{opacity:1;transform:none}}

/* ══ 12. scroll reveal (driven by ui.js) ════════════════════════════════
   html.js is set synchronously by boot.js, so these states exist only when
   script is running. The fail-safe animation reveals everything after four
   seconds if ui.js never arrives, so a failed script can never hide content. */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{
    transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out);
    transition-delay:calc(var(--i,0) * 70ms);
  }
  .js [data-reveal]:not(.is-in){
    opacity:0;
    transform:translateY(22px);
    animation:ui-reveal-failsafe 0s 4s forwards;
  }
  .js [data-reveal=fade]:not(.is-in){transform:none}
  .js [data-reveal=left]:not(.is-in){transform:translateX(-28px)}
  .js [data-reveal=right]:not(.is-in){transform:translateX(28px)}
  .js [data-reveal=scale]:not(.is-in){transform:scale(.96)}
}
@keyframes ui-reveal-failsafe{to{opacity:1;transform:none}}

/* ══ 13. utilities ══════════════════════════════════════════════════════ */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.nowrap{white-space:nowrap}
.center{text-align:center}
.mt-0{margin-top:0!important}

/* Advisor accounts on or off (html[data-accounts], set by boot.js before
   first paint). Without script the attribute is absent, and the page reads
   as it does with accounts off. */
html:not([data-accounts=open]) [data-accounts-show=open],
html[data-accounts=open] [data-accounts-show=off]{display:none!important}

/* ══ 14. status pages ═══════════════════════════════════════════════════
   The short pages somebody lands on after acting from an email or a form:
   the unsubscribe confirmation, its result and its bad-link page, the signup
   result, the refused-address page, the retired confirmation link, and the
   console's "document not available" notice. Some are files in this folder
   and some are rendered by the server with no script at all, so all of them
   work with scripting off: nothing here keys on html.js, and the animations
   are CSS that plays once on load. Every animation sits inside
   prefers-reduced-motion: no-preference, and the state it starts from or
   settles on is complete by itself.

     body.ui.status-page
       header.site-header                 logo only
       main.status-main > .container.status-stage
         .status-band                     optional photograph, washed out
         .status-card                     the white card, centered
           .status-art                    route, badge or stamp
           .kicker, h1.status-title, p.status-lede
           .status-addr, .status-alert, .status-actions, .status-note, .status-offer,
           .status-reasons, .status-list, .status-fine, .status-more, .status-back
       footer.site-footer

   Short rows with an icon (.status-list), a line of fine print, and a
   closed <details> (.status-more) for anything secondary: body text is
   16px or more on a phone, and nothing runs longer than a few lines.

   Class names stay clear of the legacy global names in styles.css (.card,
   .icon, .offer, .price, .terms, .sub, .status and friends). */

/* A column, so the footer meets the bottom of the window on a short page. */
body.ui.status-page{display:flex;flex-direction:column}
.status-main{flex:1 0 auto;padding-block:clamp(12px,2vw,28px) clamp(72px,9vw,120px)}

/* One-task pages: the header scrolls away with the page rather than sticking.
   The server-rendered pages run no script, so a sticky header there would
   never get the edge that ui.js adds on scroll. */
.status-page .site-header{position:relative}

/* ── the photograph behind the card ── */
.status-band{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  height:clamp(168px,22vw,288px);
  border-radius:var(--r-xl);
  background:var(--c-paper-2);
}
.status-band > picture,
.status-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.status-band img{object-position:50% 36%;filter:saturate(.72) sepia(.12) contrast(.94)}
/* Washed toward the page color, and fully into it at the bottom edge, so the
   card sits on paper rather than on the photograph. */
.status-band::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(251,247,239,.4) 0%,rgba(251,247,239,.68) 50%,var(--c-paper) 100%);
}

/* ── the card ── */
.status-card{
  position:relative;
  max-width:680px;
  margin:calc(-1 * clamp(104px,14vw,184px)) auto 0;
  padding:clamp(32px,4.6vw,56px) clamp(20px,4.6vw,60px) clamp(32px,4.2vw,52px);
  border:1px solid var(--c-line);
  border-radius:var(--r-xl);
  background:var(--c-surface);
  box-shadow:var(--sh-3);
  text-align:center;
}
.status-card--wide{max-width:780px}
.status-stage > .status-card:first-child{margin-top:clamp(24px,4vw,56px)}
/* On a phone the band would show as a thin strip above the card, so it goes,
   and the card's own art leads. */
@media (max-width:520px){
  .status-band{display:none}
  .status-card{margin-top:16px}
}

.status-art{display:flex;justify-content:center;margin:0 auto clamp(20px,2.6vw,28px)}
.status-title{
  margin-top:14px;
  font-family:var(--f-display);
  font-size:clamp(30px,4vw,44px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.016em;
  color:var(--c-ink);
  text-wrap:balance;
}
.status-art + .status-title{margin-top:0}
.status-lede{
  margin:16px auto 0;
  max-width:46ch;
  font-size:clamp(17px,1.5vw,19px);
  line-height:1.6;
  color:var(--c-ink-2);
  text-wrap:pretty;
}

/* The address an action applies to, set apart so there is no doubt which. */
.status-addr{
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  margin-top:18px;
  padding:10px 18px 10px 14px;
  border:1px solid var(--c-line-2);
  border-radius:var(--r-pill);
  background:var(--c-paper);
  color:var(--c-ink);
  font-size:16px;
  font-weight:650;
  line-height:1.35;
  text-align:left;
}
.status-addr .ico{width:20px;height:20px;color:var(--c-navy)}
/* pages.mjs marks break points after the @ and before each dot, so a long
   address wraps at those first; anywhere is the last resort. */
.status-addr span{min-width:0;overflow-wrap:anywhere}
/* A pill that wraps to two lines turns into a lozenge. */
@media (max-width:520px){
  .status-addr{border-radius:var(--r-md)}
}

/* Said when the unsubscribe could not be finished, above the button that
   tries again. */
.status-alert{
  display:flex;
  align-items:flex-start;
  gap:10px;
  max-width:52ch;
  margin:22px auto 0;
  padding:14px 16px;
  border:1px solid rgba(156,96,24,.28);
  border-radius:var(--r-md);
  background:var(--c-warn-100);
  color:var(--c-warn-700);
  font-size:16px;
  line-height:1.6;
  text-align:left;
  text-wrap:pretty;
}
.status-alert .ico{flex:none;width:20px;height:20px;margin-top:2px}
.status-alert .link{color:inherit}
.status-alert__lead{display:block;margin-bottom:4px;font-weight:650}

.status-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:28px;
}
@media (max-width:520px){
  .status-actions{flex-direction:column;align-items:stretch}
  .status-actions > .btn{width:100%}
}

/* Short rows, each led by an icon, in place of a paragraph. Centered as a
   block and read left to right. */
.status-list{
  display:grid;
  gap:12px;
  width:fit-content;
  max-width:min(100%,33em);
  margin:clamp(28px,3.4vw,36px) auto 0;
  padding:0;
  list-style:none;
  text-align:left;
}
.status-list > li{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:12px;
  align-items:start;
  font-size:16px;
  line-height:1.55;
  color:var(--c-ink-2);
  text-wrap:pretty;
}
.status-list .ico{width:20px;height:20px;margin-top:2px;color:var(--c-navy)}
/* Four short checks sit two by two where there is room. */
@media (min-width:600px){
  .status-list--pairs{grid-template-columns:repeat(2,max-content);column-gap:36px}
}

/* A reassurance or a condition, lifted out of the run of text: a title with
   its icon, then the rows under the title. */
.status-note{
  margin-top:clamp(32px,4vw,44px);
  padding:22px 26px 24px;
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  background:var(--c-paper);
  text-align:left;
}
.status-note__head{display:flex;align-items:center;gap:14px}
.status-note .ico-tile{width:40px;height:40px;border-radius:11px;background:var(--c-sun-100);color:var(--c-sun-600)}
.status-note .ico-tile .ico{width:21px;height:21px}
.status-note__title{font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.006em;color:var(--c-ink)}
.status-note__body{margin-top:16px}
.status-note .status-list{width:auto;max-width:none;margin:0}
.status-note .status-list .ico{color:var(--c-sun-600)}
.status-note p{margin-top:16px;padding-top:14px;border-top:1px solid var(--c-line);font-size:16px;line-height:1.6;color:var(--c-ink-2);text-wrap:pretty}
.status-note .status-note__terms{margin-top:8px;padding-top:0;border-top:0;font-size:15px}
/* Where there is room, the rows line up under the title rather than the icon. */
@media (min-width:521px){
  .status-note__body{padding-left:54px}
}
@media (max-width:520px){
  .status-note{padding:20px 18px 22px}
  .status-note__head{gap:12px}
  .status-note .ico-tile{width:36px;height:36px;border-radius:10px}
  .status-note .ico-tile .ico{width:19px;height:19px}
}
/* On the narrowest phones the title gets the full width. */
@media (max-width:360px){
  .status-note .ico-tile{display:none}
}

/* The offer, as a small navy ticket inside the card. */
.status-offer{
  margin-top:clamp(26px,3.4vw,36px);
  padding:24px clamp(20px,3vw,30px) 22px;
  border-radius:var(--r-lg);
  background:var(--c-navy-900);
  box-shadow:var(--sh-2);
  color:var(--c-on-navy-2);
  text-align:left;
}
.status-offer__eyebrow{font-size:12.5px;font-weight:750;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:#F2B77A}
/* A phone has no room for the eyebrow on one line, so it breaks at the dot,
   and the dot goes rather than hang at the end of the first line. */
@media (max-width:520px){
  .status-offer__dot{display:none}
  .status-offer__eyebrow .nowrap{display:block;margin-top:5px}
}
.status-offer__deal{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 16px;margin-top:10px}
.status-offer__price{font-family:var(--f-display);font-size:clamp(44px,5vw,56px);line-height:1;color:var(--c-on-navy)}
.status-offer__then{padding-bottom:5px;font-size:16px;font-weight:600;line-height:1.4;color:var(--c-on-navy)}
.status-offer__body{margin-top:16px;font-size:16px;line-height:1.6;text-wrap:pretty}
.status-offer strong{font-weight:700;color:var(--c-on-navy)}
.status-perks{display:grid;gap:8px;margin-top:16px;padding:0;list-style:none}
.status-perks > li{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;line-height:1.35;color:var(--c-on-navy)}
.status-perks .ico{width:17px;height:17px;stroke-width:2.2;color:#F2B77A}
.status-offer__terms{margin-top:18px;padding-top:14px;border-top:1px solid rgba(251,247,239,.16);font-size:15px}
.status-offer .link{color:#FBF7EF}

/* A footnote to the action above: centered, quieter, and never more than a
   couple of lines. Anything longer belongs in .status-more. */
.status-fine{margin:24px auto 0;max-width:52ch;font-size:15px;line-height:1.6;color:var(--c-ink-3);text-wrap:balance}
.status-fine + .status-fine{margin-top:14px}

/* Secondary detail, closed until asked for. A <details>, so it opens with
   scripting off. */
.status-more{margin:20px auto 0;max-width:52ch}
.status-more > summary{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:6px 4px;
  border-radius:8px;
  color:var(--c-navy);
  font-size:15px;
  font-weight:650;
  line-height:1.3;
  list-style:none;
  cursor:pointer;
}
.status-more > summary::-webkit-details-marker{display:none}
.status-more > summary::marker{content:""}
.status-more > summary::after{
  content:"";
  flex:none;
  width:7px;
  height:7px;
  margin-top:-3px;
  border-right:1.75px solid currentColor;
  border-bottom:1.75px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--d-2) var(--ease-out),margin var(--d-2) var(--ease-out);
}
.status-more[open] > summary::after{margin-top:3px;transform:rotate(-135deg)}
.status-more > summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.status-more > p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--c-ink-3);text-wrap:pretty}

/* /oops.html's four reasons. Which one shows is decided by the :target rules
   on .oops-reason and .oops-default in styles.css; nothing here may set
   display on them. */
.status-reasons{margin-top:clamp(26px,3.4vw,36px);text-align:left}
.status-reasons > section{
  padding:22px 24px;
  border:1px solid var(--c-line);
  border-left:3px solid var(--c-sun);
  border-radius:var(--r-md);
  background:var(--c-paper);
}
.status-reasons h2{font-family:var(--f-display);font-size:clamp(20px,2.2vw,24px);font-weight:400;line-height:1.2;letter-spacing:-.008em;color:var(--c-ink)}
.status-reasons p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--c-ink-2);text-wrap:pretty}
.status-reasons .status-list{width:auto;max-width:none;margin:14px 0 0}
.status-reasons .status-list .ico{color:var(--c-ok)}
.status-reasons .status-do{margin-top:18px;padding-top:16px;border-top:1px solid var(--c-line);font-weight:600;color:var(--c-ink)}
.status-reasons .status-aside{margin-top:6px;font-size:15px;color:var(--c-ink-3)}
/* The typo examples: what was typed, struck through, and what was meant. */
.status-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding:0;list-style:none}
.status-chips > li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:0 13px;
  border:1px solid var(--c-line-2);
  border-radius:var(--r-pill);
  background:var(--c-surface);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;
  line-height:1.2;
  color:var(--c-ink);
}
.status-chips s{color:var(--c-ink-4);text-decoration-thickness:1px}
.status-chips .ico{width:15px;height:15px;color:var(--c-sun-600)}

.status-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:28px;
  padding:6px 4px;
  border-radius:8px;
  color:var(--c-navy);
  font-size:15px;
  font-weight:650;
  text-decoration:none;
}
.status-back .ico{width:18px;height:18px;transition:transform var(--d-2) var(--ease-out)}
.status-back:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.status-back:hover .ico{transform:translateX(-3px)}

/* Phones: every line of copy at 16px, and 44px of height on anything that
   is tapped (the back link, the disclosure and the footer links). */
@media (max-width:599px){
  .status-fine,
  .status-more > p,
  .status-reasons .status-aside,
  .status-perks > li{font-size:16px}
  .status-offer__eyebrow{font-size:13.5px}
  .status-back,
  .status-more > summary{min-height:44px}
  .status-page .site-footer nav{gap:0}
  .status-page .site-footer nav a{padding-block:10px}
  .status-page .site-header__logo{padding-block:10px}
}

/* ── art: a badge, the postmark, or the route ── */
.status-art--badge{padding:9px}
.status-badge{
  position:relative;
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border-radius:50%;
  background:var(--c-navy-50);
  color:var(--c-navy);
}
.status-badge::before{
  content:"";
  position:absolute;
  inset:-9px;
  border:1.5px dashed currentColor;
  border-radius:50%;
  opacity:.3;
}
.status-badge .ico{width:34px;height:34px;stroke-width:1.7}
.status-badge--ok{background:var(--c-ok-100);color:var(--c-ok)}
.status-badge--sun{background:var(--c-sun-100);color:var(--c-sun-600)}

.status-stamp{width:112px}
.status-stamp svg{width:100%;height:auto;transform:rotate(-8deg)}
/* Straight across the lower half of the inner ring, which is only about 70
   units wide at the baseline, so a little smaller than the arc text above. */
.status-stamp .stamp-sub{font-size:8.5px;letter-spacing:1.2px}

/* The chevron plane on its dotted route. The line is masked, so it can be
   drawn in (or behind the plane) without losing its dots; the plane is placed
   with a CSS transform, in the SVG's own units. At rest the whole route shows:
   on the confirmation the plane waits at the start, on the result it has
   arrived at the far end, and on the bad-link page it has stopped short of a
   gap in the route. */
.status-route{display:block;width:min(328px,100%);height:auto;overflow:visible}
.status-route__line{fill:none;stroke:var(--c-navy-400);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:2 7}
.status-route__reveal{fill:none;stroke:#fff;stroke-width:18;stroke-dasharray:1 1;stroke-dashoffset:0}
.status-route__origin{fill:var(--c-sun);stroke:var(--c-sun-100);stroke-width:5;paint-order:stroke}
.status-route__plane{transform:translate(46.1px,87.8px) rotate(-1.1deg)}
.status-route--away .status-route__plane{transform:translate(304px,8px) rotate(-18.5deg)}
.status-route .chev-plane{stroke-width:2.1}
/* Bad link: the mask leaves out 44% to 56% of the route's length, and the two
   ends of the break are marked in sun. The plane waits before it. */
.status-route--broken .status-route__reveal{stroke-dasharray:.44 .12 .44 1}
.status-route--broken .status-route__plane{transform:translate(123.8px,80.3px) rotate(-12.2deg)}
.status-route__break{fill:none;stroke:var(--c-sun);stroke-width:2;stroke-linecap:round}

/* The staff notice keeps only the legal line of the footer, under the
   footer's own top border. */
.site-footer--legal{padding-block:0 28px}
.site-footer--legal .site-footer__legal{margin-top:0}
.site-footer--legal .site-footer__legal::before{content:none}

@media (prefers-reduced-motion:no-preference){
  .status-band{animation:ui-fade .9s var(--ease-out) both}
  .status-card{animation:ui-rise .7s var(--ease-out) .05s both}
  .status-badge{animation:ui-pop .55s var(--ease-spring) .35s both}
  .status-stamp svg{animation:ui-stamp .62s var(--ease-spring) .4s both}

  /* Confirmation: the route draws itself ahead, the plane rolls up to the
     start and hovers twice, then stays put. */
  .status-route--ready .status-route__reveal{animation:ui-draw 1.4s var(--ease-out) .55s both}
  .status-route--ready .status-route__craft{
    animation:status-craft-in .6s var(--ease-out) .35s both,
              status-hover 1.8s var(--ease-in-out) 1.5s 2;
  }

  /* Result: the plane lifts off, the route draws in behind it, and it lands
     at the far end, where it stays. One pass. */
  .status-route--away .status-route__plane{animation:status-takeoff 2.4s linear .75s both}
  .status-route--away .status-route__reveal{animation:status-trail 2.4s linear .75s both}

  /* Bad link: the plane rolls up to the break and stays there. */
  .status-route--broken .status-route__craft{animation:status-craft-in .6s var(--ease-out) .35s both}
}

@keyframes status-craft-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes status-hover{0%,100%{transform:none}50%{transform:translateY(-3px)}}

/* Stops at equal steps of time along the route, spaced by arc length on an
   accelerating curve, so the plane speeds up the way a takeoff does. The
   linear timing between stops is what keeps the trail below in step with
   it. The last stop is the at-rest position above, so the animated page and
   the reduced-motion page end on the same picture. */
@keyframes status-takeoff{
  0%{transform:translate(46.1px,87.8px) rotate(-1.1deg)}
  8.33%{transform:translate(49.3px,87.7px) rotate(-1.3deg)}
  16.67%{transform:translate(57px,87.5px) rotate(-1.9deg)}
  25%{transform:translate(68.6px,87px) rotate(-2.9deg)}
  33.33%{transform:translate(83.8px,86px) rotate(-4.7deg)}
  41.67%{transform:translate(102.4px,84px) rotate(-7.7deg)}
  50%{transform:translate(123.9px,80.3px) rotate(-12.2deg)}
  58.33%{transform:translate(148.1px,73.7px) rotate(-18.6deg)}
  66.67%{transform:translate(174px,63px) rotate(-25.4deg)}
  75%{transform:translate(202.1px,49.9px) rotate(-24.8deg)}
  83.33%{transform:translate(233px,35.9px) rotate(-23.7deg)}
  91.67%{transform:translate(266.9px,21.7px) rotate(-21.8deg)}
  100%{transform:translate(304px,8px) rotate(-18.5deg)}
}
@keyframes status-trail{
  0%{stroke-dashoffset:.97}
  8.33%{stroke-dashoffset:.959}
  16.67%{stroke-dashoffset:.933}
  25%{stroke-dashoffset:.894}
  33.33%{stroke-dashoffset:.842}
  41.67%{stroke-dashoffset:.779}
  50%{stroke-dashoffset:.704}
  58.33%{stroke-dashoffset:.619}
  66.67%{stroke-dashoffset:.524}
  75%{stroke-dashoffset:.419}
  83.33%{stroke-dashoffset:.304}
  91.67%{stroke-dashoffset:.179}
  100%{stroke-dashoffset:0}
}