/* BagBack design system — Material Design 3 (M3), light scheme, sized up for readability.
   One file for every page: the claim builder, the airport checklist, airline and guide pages, case and signing pages,
   the reviewer queue, and error pages. Tokens follow the M3 naming (md-sys-*); components follow the M3 specs with
   touch targets held at 48px or more and body text at 18px, because the audience skews older.
   Type: Roboto (M3 default) / Roboto Mono for references and figures. */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light only;
  /* Color roles (seed: teal #00696F; tertiary: brand orange) */
  --md-sys-color-primary: #00696F;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #9CF0F7;
  --md-sys-color-on-primary-container: #002022;
  --md-sys-color-secondary: #4A6365;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #CDE7EA;
  --md-sys-color-on-secondary-container: #051F21;
  --md-sys-color-tertiary: #A8421A;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFDBCF;
  --md-sys-color-on-tertiary-container: #380D00;
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;
  --md-sys-color-success: #1E6B3A;                 /* custom role: M3 has no success color */
  --md-sys-color-success-container: #C8F0D2;
  --md-sys-color-on-success-container: #00210B;
  --md-sys-color-warning: #6F5000;                 /* custom role */
  --md-sys-color-warning-container: #FFE08D;
  --md-sys-color-on-warning-container: #231A00;
  --md-sys-color-surface: #FAF8F3;
  --md-sys-color-surface-dim: #DBD7CE;
  --md-sys-color-surface-bright: #FDFCF9;
  --md-sys-color-surface-container-lowest: #FFFEFB;
  --md-sys-color-surface-container-low: #F4F1EA;
  --md-sys-color-surface-container: #EEEAE2;
  --md-sys-color-surface-container-high: #E8E4DB;
  --md-sys-color-surface-container-highest: #E2DED5;
  --md-sys-color-on-surface: #1C1B17;
  --md-sys-color-on-surface-variant: #4B4740;
  --md-sys-color-outline: #7A756C;
  --md-sys-color-outline-variant: #D3CDC2;
  --md-sys-color-inverse-surface: #31302B;
  --md-sys-color-inverse-on-surface: #F3F1EC;
  --md-sys-color-scrim: #000000;
  /* Shape */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 999px;
  /* Elevation (M3 levels 1–3) */
  --md-sys-elevation-1: 0 1px 2px rgba(40,36,28,.06), 0 6px 20px -10px rgba(40,36,28,.22);
  --md-sys-elevation-2: 0 2px 4px rgba(40,36,28,.06), 0 12px 32px -12px rgba(40,36,28,.26);
  --md-sys-elevation-3: 0 4px 8px rgba(40,36,28,.07), 0 20px 48px -16px rgba(40,36,28,.30);
  /* Type (M3 scale, sized up ~12% for readability) */
  --md-sys-typescale-font: "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
  --md-sys-typescale-mono: "Roboto Mono", Menlo, Consolas, monospace;
  --md-sys-typescale-display-font: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --md-sys-typescale-display-small: 600 40px/1.12 var(--md-sys-typescale-display-font);
  --md-sys-typescale-headline-large: 600 34px/1.18 var(--md-sys-typescale-display-font);
  --md-sys-typescale-headline-medium: 600 30px/1.2 var(--md-sys-typescale-display-font);
  --md-sys-typescale-headline-small: 600 26px/1.25 var(--md-sys-typescale-display-font);
  --md-sys-typescale-title-large: 500 24px/1.3 var(--md-sys-typescale-font);
  --md-sys-typescale-title-medium: 600 20px/1.35 var(--md-sys-typescale-font);
  --md-sys-typescale-title-small: 600 18px/1.4 var(--md-sys-typescale-font);
  --md-sys-typescale-body-large: 400 18px/1.55 var(--md-sys-typescale-font);
  --md-sys-typescale-body-medium: 400 16px/1.5 var(--md-sys-typescale-font);
  --md-sys-typescale-body-small: 400 14px/1.45 var(--md-sys-typescale-font);
  --md-sys-typescale-label-large: 500 16px/1.4 var(--md-sys-typescale-font);
  --md-sys-typescale-label-medium: 500 14px/1.4 var(--md-sys-typescale-font);
  --md-sys-typescale-label-small: 500 12px/1.4 var(--md-sys-typescale-font);
  /* State layers */
  --md-sys-state-hover: 8%;
  --md-sys-state-focus: 12%;
  --md-sys-state-pressed: 12%;
  /* Legacy aliases kept so page-specific inline styles keep working */
  --ground: var(--md-sys-color-surface); --surface: var(--md-sys-color-surface-container-lowest); --sunk: var(--md-sys-color-surface-container);
  --ink: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --line: var(--md-sys-color-outline-variant); --line-strong: var(--md-sys-color-outline);
  --accent: var(--md-sys-color-tertiary); --accent-ink: var(--md-sys-color-on-tertiary); --teal: var(--md-sys-color-primary); --teal-soft: var(--md-sys-color-primary-container);
  --good: var(--md-sys-color-success); --good-soft: var(--md-sys-color-success-container); --warn: var(--md-sys-color-warning); --warn-soft: var(--md-sys-color-warning-container);
  --crit: var(--md-sys-color-error); --crit-soft: var(--md-sys-color-error-container);
  --display: var(--md-sys-typescale-display-font); --body: var(--md-sys-typescale-font); --mono: var(--md-sys-typescale-mono);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 0; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-large); padding-block: 0 56px; padding-inline: clamp(16px, 4vw, 40px); }
h1, h2, h3, h4 { margin: 0; color: var(--md-sys-color-on-surface); text-wrap: balance; }
h1 { font: var(--md-sys-typescale-headline-large); }
h2 { font: var(--md-sys-typescale-headline-small); }
h3 { font: var(--md-sys-typescale-title-medium); }
p { margin: 0 0 14px; }
a { color: var(--md-sys-color-primary); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--md-sys-color-on-primary-container); }
button, input, select, textarea { font: inherit; color: inherit; }
small { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }
.wrap { max-width: 1180px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- 3. Text fields (M3 outlined) ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
  background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 14px 16px; width: 100%; min-width: 0; min-height: 56px; font: var(--md-sys-typescale-body-large);
}
input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover { border-color: var(--md-sys-color-on-surface); }
input:not([type=checkbox]):not([type=radio]):focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border: 2px solid var(--md-sys-color-primary); padding: 13px 15px; }
input.bad, select.bad { border: 2px solid var(--md-sys-color-error); padding: 13px 15px; }
input::placeholder, textarea::placeholder { color: var(--md-sys-color-outline); opacity: 1; }
input[type=checkbox], input[type=radio] { width: 24px; height: 24px; /* WCAG 2.2 target size */ min-height: 0; margin: 0; accent-color: var(--md-sys-color-primary); flex: none; }
label.f { display: flex; flex-direction: column; gap: 6px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium); }
label.f b { color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-label-large); }
label.chk { display: flex; gap: 14px; align-items: flex-start; font: var(--md-sys-typescale-body-large); padding: 10px 0; }
label.chk input { margin-top: 4px; }
label.chk small.why, .why { display: block; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); margin-top: 4px; }
.hint { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); margin: 8px 0 0; }
.row { display: grid; gap: 16px 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.row.one { grid-template-columns: 1fr; }

/* ---------- 4. Buttons (M3 common buttons; 48px+ targets) ---------- */
.btn, button.btn, a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 24px; border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-large); text-decoration: none; cursor: pointer; white-space: normal; text-align: center;
  background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); /* outlined */
  transition: background-color .15s, box-shadow .15s;
}
.btn:hover { background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover), transparent); color: var(--md-sys-color-primary); }
.btn:active { background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed), transparent); }
.btn.primary { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-color: transparent; box-shadow: none; } /* filled */
.btn.primary:hover { background: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-hover), var(--md-sys-color-primary)); color: var(--md-sys-color-on-primary); box-shadow: var(--md-sys-elevation-1); }
.btn.tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; } /* filled tonal */
.btn.text { border-color: transparent; padding-inline: 12px; } /* text button */
.btn.big { width: 100%; min-height: 60px; font-size: 20px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .38; cursor: default; box-shadow: none; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.rm { background: none; border: 0; color: var(--md-sys-color-on-surface-variant); cursor: pointer; font: var(--md-sys-typescale-label-large); padding: 8px 12px; min-height: 44px; border-radius: var(--md-sys-shape-corner-full); }
.rm:hover { background: color-mix(in srgb, var(--md-sys-color-error) var(--md-sys-state-hover), transparent); color: var(--md-sys-color-error); }

/* ---------- 5. Cards & sections (M3 filled / outlined cards) ---------- */
section.step, .card, .tier, section, .about > div, .how > div, .faq details, .grid li {
  background: var(--md-sys-color-surface-container-lowest); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent); box-shadow: var(--md-sys-elevation-1);
  border-radius: var(--md-sys-shape-corner-medium); padding: 22px 22px 24px; margin-bottom: 18px;
}
.tier.mid { border: 2px solid var(--md-sys-color-primary); background: var(--md-sys-color-surface-container-low); }
.sign { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.sign h2 { font: var(--md-sys-typescale-headline-small); }
.sign span { font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-primary); text-transform: none; letter-spacing: .02em; }
.lead { margin: 0 0 16px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-large); max-width: 66ch; }
.q { margin: 20px 0 0; }
.q > b { display: block; font: var(--md-sys-typescale-title-small); margin-bottom: 10px; }

/* Choice cards (selectable outlined cards; selected = secondary container + check) */
.choices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 16px 14px 48px;
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-lowest);
  cursor: pointer; font: var(--md-sys-typescale-body-large); transition: background-color .15s; }
.choice::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 2px solid var(--md-sys-color-on-surface-variant); background: var(--md-sys-color-surface-container-lowest); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.choice:hover { background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover), var(--md-sys-color-surface-container-lowest)); }
.choice:has(input:checked) { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: var(--md-sys-color-secondary-container); }
.choice:has(input:checked)::before { border-color: var(--md-sys-color-primary); background: radial-gradient(circle, var(--md-sys-color-primary) 0 45%, transparent 50%); }
.choice:has(input:focus-visible) { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }
.choice small { display: block; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }

/* Chips (assist / status) */
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: var(--md-sys-shape-corner-small);
  font: var(--md-sys-typescale-label-large); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.chip.warn { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.chip.good { background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
.chip.crit { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.chip.teal { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }

/* Banners & inline messages (M3 banner / supporting text) */
.msg, .ok, .err, .note, .say, .warnbox, .critbox, .example {
  display: block; margin: 12px 0 0; padding: 14px 16px; border-radius: var(--md-sys-shape-corner-small); font: var(--md-sys-typescale-body-large); border: 0; }
.msg { display: none; background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.msg.show { display: block; }
.msg.ok, .ok { background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
.err, .critbox { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.note, .warnbox, .example { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.say { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.say b { display: block; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); margin-bottom: 4px; text-transform: none; letter-spacing: 0; }
.example { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.example button { margin-left: auto; }
.fine { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); max-width: 80ch; margin-top: 24px; }

/* ---------- 6. Top app bar & header, footer ---------- */
.brand { display: inline-flex; align-items: center; gap: .3em; color: inherit; text-decoration: none; }
.brand b { color: var(--md-sys-color-primary); font-weight: inherit; }
.brand .mark { width: 1em; height: 1em; flex: none; }
.tag h1 .brand { gap: .28em; }
small.brand .mark, .top h1 small .mark { width: 1.4em; height: 1.4em; vertical-align: -.35em; margin-right: .3em; }
.tag { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-block: 26px 20px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.tag h1 { font: var(--md-sys-typescale-display-small); }
.tag h1 small { display: block; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); margin-bottom: 6px; text-transform: none; letter-spacing: 0; }
.tag p { margin: 10px 0 0; max-width: 58ch; font: var(--md-sys-typescale-body-large); }
/* Hero: a crop of the real sample letter, beside the headline on wide screens. Phones get no hero at all: the picture's
   first source is a 1x1 data URI at <=720px, so nothing is fetched, and the card is not shown. */
.tag > div { flex: 1 1 420px; }
.tag:has(.hero-letter) { align-items: center; }
.tag .hero-letter { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; width: 360px; max-width: 100%; color: inherit; text-decoration: none; }
.tag .hero-letter picture { display: block; transform: rotate(-1.2deg); transition: transform .2s ease; }
.tag .hero-letter img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); box-shadow: var(--md-sys-elevation-1); }
.tag .hero-letter:hover picture, .tag .hero-letter:focus-visible picture { transform: rotate(0); }
.tag .hero-cap { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); text-align: center; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .tag .hero-letter { display: none; } }
@media (prefers-reduced-motion: reduce) { .tag .hero-letter picture { transition: none; } }
.refline { margin: 0; align-self: center; text-align: right; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface); font-family: var(--md-sys-typescale-mono); }
.refline small { display: block; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); font-family: var(--md-sys-typescale-font); }
.topline { margin: 14px 0 0; font: var(--md-sys-typescale-body-medium); }
nav.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 16px 0 14px; border-bottom: 1px solid var(--md-sys-color-outline-variant); font: var(--md-sys-typescale-label-large); }
nav.top .logo { font: var(--md-sys-typescale-title-large); font-weight: 700; color: var(--md-sys-color-on-surface); text-decoration: none; margin-right: auto; }
nav.top a { color: var(--md-sys-color-primary); text-decoration: none; padding: 8px 0; }
nav.top a:hover { text-decoration: underline; }
.crumbs { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); margin: 18px 0 8px; }
.crumbs a { color: var(--md-sys-color-on-surface-variant); display: inline-block; padding: 3px 0; min-height: 24px; }
footer.site { margin-top: 40px; padding: 20px 22px; background: var(--md-sys-color-surface-container); border-radius: var(--md-sys-shape-corner-medium); display: flex; flex-wrap: wrap; gap: 8px 22px; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }

/* ---------- 7. Lists, tables, tabs ---------- */
table.items { width: 100%; border-collapse: collapse; font: var(--md-sys-typescale-body-medium); margin-top: 4px; }
table.items th { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--md-sys-color-outline-variant); text-transform: none; letter-spacing: 0; }
table.items td { padding: 8px; border-bottom: 1px solid var(--md-sys-color-outline-variant); vertical-align: middle; }
table.items td.num { text-align: right; font-family: var(--md-sys-typescale-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.items th.num { text-align: right; white-space: normal; overflow-wrap: normal; }
table.items input[type=number] { text-align: right; font-family: var(--md-sys-typescale-mono); }
table.items input:not([type=checkbox]), table.items select { min-height: 48px; padding: 10px 12px; font: var(--md-sys-typescale-body-medium); width: 100%; min-width: 0; box-sizing: border-box; }
/* Proportional columns: the description gets a third of the width, each number column about a tenth, so the table
   fits its column at every size instead of forcing a sideways scroll. */
table.items { table-layout: fixed; }
table.items th { white-space: normal; line-height: 1.25; overflow-wrap: anywhere; vertical-align: bottom; }
table.items th.full { width: 27%; } table.items th.whose { width: 12%; } table.items th.c-type { width: 15%; } table.items th.c-when { width: 16%; } table.items th.num { width: 11%; } table.items th.c-rcpt { width: 8%; } table.items th.c-rm { width: 9%; }
table.items td.num input[type=number] { width: 100%; padding-left: 8px; padding-right: 8px; }
table.items select { padding-left: 8px; padding-right: 22px; text-overflow: ellipsis; }
table.items td.rmcell { white-space: normal; padding-left: 4px; padding-right: 4px; text-align: center; }
table.items td.rmcell .rm { white-space: normal; line-height: 1.2; padding: 6px 4px; }
table.items input[type=checkbox] { margin: 0 auto; display: block; }
.tblwrap { overflow-x: auto; max-width: 100%; min-width: 0; }
.tblwrap table { min-width: 0; }
/* Below the two-column layout the tables become stacked cards: every field visible, no sideways scrolling. */
@media (max-width: 920px) {
  .tblwrap table { min-width: 0; }
  table.items thead { display: none; }
  table.items tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
  table.items td { display: block; border: 0; padding: 0; }
  table.items td[data-l]::before { content: attr(data-l); display: block; font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); margin-bottom: 4px; }
  table.items td.full { grid-column: 1 / -1; }
  table.items td.rmcell { grid-column: 1 / -1; text-align: right; }
  table.items td.num input[type=number], table.items select { width: 100%; min-width: 0; }
}
.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 14px 18px; min-height: 48px; cursor: pointer; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); margin-bottom: -1px; text-transform: none; letter-spacing: 0; border-radius: 3px 3px 0 0; }
.tabs button:hover { background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover), transparent); }
.tabs button[aria-selected="true"] { color: var(--md-sys-color-primary); border-bottom-color: var(--md-sys-color-primary); }
.panel { padding: 20px 22px 24px; }
.out { margin-top: 8px; background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); }
.out > h2 { padding: 20px 22px 0; }
.out > p { margin: 6px 22px 14px; color: var(--md-sys-color-on-surface-variant); }
pre.letter { font: 15px/1.6 var(--md-sys-typescale-mono); white-space: pre-wrap; background: var(--md-sys-color-surface-container-low); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); padding: 18px 20px; margin: 0; max-width: 80ch; }
.strat { margin: 0 0 16px; padding-left: 22px; max-width: 70ch; }
.strat li { margin-bottom: 8px; }
.check { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.check li { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); }
.check li input { margin-top: 4px; }
.check li small { display: block; }
ol.esc { padding-left: 22px; max-width: 70ch; margin: 0; }
ol.esc li { margin-bottom: 12px; }
ol.esc b { font: var(--md-sys-typescale-title-small); }
.cites { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); max-width: 75ch; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; margin: 0; font: var(--md-sys-typescale-body-medium); align-items: baseline; }
.kv dt { color: var(--md-sys-color-on-surface-variant); margin: 0; white-space: nowrap; }
.kv dd { margin: 0; font-family: var(--md-sys-typescale-mono); font-variant-numeric: tabular-nums; text-align: right; min-width: 0; overflow-wrap: anywhere; }
/* A long value (the claim address) drops under its label instead of squeezing the label column. */
.kv dd.long { grid-column: 1 / -1; text-align: left; margin-top: -6px; }
.kv dd.cap { color: var(--md-sys-color-on-surface); font-weight: 500; }
.faq details { padding: 0 20px; margin-bottom: 12px; }
.faq summary { cursor: pointer; font: var(--md-sys-typescale-title-small); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 500 26px/1 var(--md-sys-typescale-font); color: var(--md-sys-color-primary); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 18px; max-width: 70ch; }
.grid.airlines, ul.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); list-style: none; padding: 0; }
ul.grid li { padding: 16px 18px; margin: 0; }
ul.grid li a { font: var(--md-sys-typescale-title-small); text-decoration: none; }
ul.grid li small { display: block; margin-top: 4px; }
.chan { list-style: none; padding: 0; margin: 0; }
.chan li { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.chan li:last-child { border-bottom: 0; }
.chan li b { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); text-transform: none; letter-spacing: 0; padding-top: 2px; }
.chan li small { display: block; }
.cta { margin: 24px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; color: var(--md-sys-color-on-surface-variant); }
.cta .btn { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-color: transparent; }
/* C45 (GUIDE_TAPS): the one-tap row inside a guide; the guide's own case filled, the other two tonal */
.guide-taps { margin: 24px 0; }
.guide-taps-ask { margin: 0 0 8px; font-weight: 500; }
.guide-taps-row { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 8px; }
.guide-taps .btn.primary { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-color: transparent; }
@media (max-width: 640px) { .chan li { grid-template-columns: 1fr; } } /* .kv keeps two columns: its values are short and read best beside their labels */

/* ---------- 8. Claim builder ---------- */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; margin-top: 24px; align-items: start; }
.flow > section.step { grid-column: 1; }
.flow > aside.ticket { grid-column: 2; grid-row: 1 / span 8; position: sticky; top: 16px; }
@media (max-width: 920px) { .flow { grid-template-columns: minmax(0, 1fr); } .flow > section.step, .flow > aside.ticket { grid-column: 1; grid-row: auto; } .flow > aside.ticket { position: static; } }
.how { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 22px; }
.how > div { margin: 0; padding: 18px 20px; background: var(--md-sys-color-surface-container-low); border: 0; }
.how b { display: block; font: var(--md-sys-typescale-title-medium); margin-bottom: 6px; }
.how b span { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font: var(--md-sys-typescale-label-large); margin-right: 10px; vertical-align: middle; }
.how p { margin: 0; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium); }
.ticket { background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); box-shadow: var(--md-sys-elevation-1); overflow: hidden; margin-bottom: 18px; padding: 0; }
.ticket .head { padding: 18px 20px 12px; border-bottom: 1px solid var(--md-sys-color-outline-variant); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ticket .head h2 { font: var(--md-sys-typescale-title-large); }
.big { padding: 16px 20px 8px; }
.big .lbl { font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); text-transform: none; letter-spacing: 0; }
.big .n { font: 500 clamp(30px, 8.5vw, 44px)/1.05 var(--md-sys-typescale-mono); color: var(--md-sys-color-tertiary); font-variant-numeric: tabular-nums; margin-top: 6px; }
.big .sub { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); margin-top: 6px; }
/* The reveal: once the four answers are in, the amount block becomes the win state. */
.big.won { background: var(--md-sys-color-primary-container); border-radius: var(--md-sys-shape-corner-medium); margin: 12px 14px 4px; padding: 16px 18px 12px; transition: background .4s ease; }
.big.won .lbl { color: var(--md-sys-color-on-primary-container); }
.big.won .n { color: var(--md-sys-color-on-primary-container); }
.feeline { margin: 10px 0 0; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface); }
.quickstart { margin-top: 12px; padding: 14px 16px; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-low); display: grid; gap: 10px; }
.quickstart > b { font: var(--md-sys-typescale-title-medium); }
.quickstart .btn { justify-self: start; }
.stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--md-sys-color-surface-container-lowest); border-top: 1px solid var(--md-sys-color-outline-variant); box-shadow: 0 -4px 16px rgba(0,0,0,.08); font: var(--md-sys-typescale-title-medium); }
.stickybar .btn { flex: none; }
.stickybar[hidden] { display: none; }
body.has-sticky { padding-bottom: 84px; }
@media (min-width: 921px) { .stickybar { display: none !important; } }
.installbar { margin-top: 18px; padding: 16px 18px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: grid; gap: 8px; font: var(--md-sys-typescale-body-medium); }
.installbar b { font: var(--md-sys-typescale-title-medium); }
.installbar .btn { justify-self: start; }
header h1 small a.homelink { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } header h1 small a.homelink:hover { border-bottom-color: currentColor; }
.objections { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 6px 0 18px; }
.objections > div { background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-medium); padding: 14px 16px; }
.objections b { display: block; font: var(--md-sys-typescale-title-medium); margin-bottom: 4px; }
.objections p { margin: 0; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.tier .tierlead { margin: -4px 0 10px; font: var(--md-sys-typescale-title-medium); color: var(--md-sys-color-primary); }
.big.won .sub { color: var(--md-sys-color-on-primary-container); opacity: .85; }
/* The letter, so far: a real preview of the demand letter, addressed to their airline, before any payment. */
details.letterprev summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
details.letterprev summary::-webkit-details-marker { display: none; }
details.letterprev summary h3 { margin: 0; }
details.letterprev summary span { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-primary); }
details.letterprev[open] summary span { display: none; }
details.letterprev pre.letter { white-space: pre-wrap; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface-container-low); border-left: 3px solid var(--md-sys-color-primary); padding: 12px 14px; margin: 10px 0 0; border-radius: var(--md-sys-shape-corner-small); max-height: 320px; overflow: auto; }

.ticket .kv { padding: 10px 20px 16px; grid-template-columns: minmax(0, 1fr) auto; } /* the ticket's labels are sentences: let them wrap, keep the amounts on one line */
.ticket .kv dt { white-space: normal; }
.ticket .kv dd { white-space: nowrap; }
.meter { height: 8px; background: var(--md-sys-color-surface-container-highest); margin: 0 20px 14px; border-radius: var(--md-sys-shape-corner-full); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--md-sys-color-primary); transition: width .3s; }
.meter i.over { background: var(--md-sys-color-warning); }
.dl { border-top: 1px solid var(--md-sys-color-outline-variant); padding: 16px 20px; }
.dl h3 { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); margin-bottom: 10px; text-transform: none; letter-spacing: 0; }
.dl ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dl li { display: grid; grid-template-columns: 6px 1fr auto; gap: 0 12px; font: var(--md-sys-typescale-body-medium); align-items: start; }
.dl li i { display: block; width: 6px; height: 100%; min-height: 32px; border-radius: 3px; background: var(--md-sys-color-success); }
.dl li.urgent i { background: var(--md-sys-color-warning); } .dl li.passed i { background: var(--md-sys-color-error); }
.dl li .d { font-family: var(--md-sys-typescale-mono); font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; text-align: right; }
.dl li.passed .d { color: var(--md-sys-color-error); } .dl li.urgent .d { color: var(--md-sys-color-warning); }
.dl li small { display: block; line-height: 1.35; }
.price { margin-top: 32px; }
.price h2 { margin-bottom: 4px; }
.price p.lead { margin: 0 0 16px; }
.tiers { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tier { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.tier h3 { font: var(--md-sys-typescale-title-large); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tier h3 span { font: 500 26px/1 var(--md-sys-typescale-mono); color: var(--md-sys-color-on-surface); }
.tier ul { margin: 0; padding-left: 20px; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); flex: 1; }
.tier .btn { align-self: stretch; }
.whatyouget { margin-top: 32px; padding: 0; border: 0; background: none; }
.whatyouget h2 { margin-bottom: 14px; }
.whatyouget li b { display: block; font: var(--md-sys-typescale-title-small); margin-bottom: 4px; }
.whatyouget li small { display: block; font: var(--md-sys-typescale-body-medium); }
.faq { margin-top: 32px; }
.faq h2, .about h2 { margin-bottom: 12px; }
.about { margin-top: 32px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.about > div { margin: 0; }
.about h2 { font: var(--md-sys-typescale-title-large); }
.about p { margin: 0 0 10px; max-width: 60ch; }
.about p:last-child { margin-bottom: 0; }
.about a.mail { font: var(--md-sys-typescale-title-small); }

/* ---------- 9. Airport checklist (belt) ---------- */
body.belt { padding-inline: 16px; }
.top { position: sticky; top: 0; z-index: 2; background: var(--md-sys-color-surface); padding-block: 12px 12px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.top .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.top .row > * { min-width: 0; }
.top h1 { font: var(--md-sys-typescale-headline-medium); }
.top h1 small { display: block; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); margin-bottom: 4px; }
.clock { text-align: right; }
.clock .lbl { font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); text-transform: none; letter-spacing: 0; }
.clock .n { font: 500 32px/1 var(--md-sys-typescale-mono); color: var(--md-sys-color-tertiary); font-variant-numeric: tabular-nums; margin-top: 4px; }
.clock .n.over { color: var(--md-sys-color-error); } .clock .n.calm { color: var(--md-sys-color-primary); }
.clock .sub { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.card h2 { display: flex; gap: 12px; align-items: baseline; }
.card h2 .k { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 10px; border-radius: 50%; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font: var(--md-sys-typescale-label-large); text-transform: none; letter-spacing: 0; }
.card p { margin: 10px 0 0; }
.card label.f { margin-top: 14px; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 8px; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-full); overflow: hidden; }
.seg button { background: var(--md-sys-color-surface-container-lowest); border: 0; border-left: 1px solid var(--md-sys-color-outline); padding: 12px 6px; min-height: 48px; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface); cursor: pointer; min-width: 0; line-height: 1.2; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.ck { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ck li { display: grid; grid-template-columns: 28px minmax(0, 1fr); overflow-wrap: anywhere; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); }
.ck li input { margin-top: 3px; }
.ck li.done { background: var(--md-sys-color-success-container); border-color: var(--md-sys-color-success-container); }
.ck li b { display: block; font: var(--md-sys-typescale-label-large); }
.ck li small { display: block; margin-top: 2px; }
.ref { font: 500 22px/1.2 var(--md-sys-typescale-mono); letter-spacing: .08em; text-transform: uppercase; }
.bad { color: var(--md-sys-color-error); font: var(--md-sys-typescale-body-medium); } .hm { color: var(--md-sys-color-warning); font: var(--md-sys-typescale-body-medium); }
p.ok { background: none; color: var(--md-sys-color-success); padding: 0; font: var(--md-sys-typescale-body-medium); }
.chan a { word-break: break-all; }

/* ---------- 10. Case, signing, approval, reviewer pages ---------- */
.next { margin-top: 20px; background: var(--md-sys-color-surface-container-low); border: 0; border-radius: var(--md-sys-shape-corner-large); padding: 20px 22px; }
.next h2 { margin-top: 10px; }
.next p { margin: 8px 0 0; max-width: 70ch; }
.grid.case, .case .grid, .grid:not(ul):not(.airlines) { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin-top: 20px; align-items: start; }
@media (max-width: 900px) { .grid:not(ul):not(.airlines) { grid-template-columns: minmax(0, 1fr); } } /* minmax(0, …): a long claim address or link must not widen the column past a phone screen (Q52, 2026-10-19) */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 6px 1fr; gap: 0 14px; padding: 12px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.tl li:last-child { border-bottom: 0; }
.tl i { display: block; width: 6px; border-radius: 3px; background: var(--md-sys-color-outline-variant); }
.tl li.outbound i { background: var(--md-sys-color-primary); } .tl li.inbound i { background: var(--md-sys-color-tertiary); } .tl li.system i { background: var(--md-sys-color-success); }
.tl .h { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font: var(--md-sys-typescale-body-medium); }
.tl .h b { font: var(--md-sys-typescale-title-small); }
.tl .h time { font: var(--md-sys-typescale-body-small); font-family: var(--md-sys-typescale-mono); color: var(--md-sys-color-on-surface-variant); }
.tl details { margin-top: 6px; } .tl summary { cursor: pointer; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); }
.tl pre { font: 14px/1.55 var(--md-sys-typescale-mono); white-space: pre-wrap; background: var(--md-sys-color-surface-container-low); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); padding: 12px 14px; margin: 8px 0 0; }
.up { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.up li { display: grid; grid-template-columns: 1fr auto; gap: 10px; font: var(--md-sys-typescale-body-medium); align-items: start; }
.up small, .docs li span { display: block; }
.up .d { font: var(--md-sys-typescale-body-small); font-family: var(--md-sys-typescale-mono); color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.docs { list-style: none; margin: 0 0 12px; padding: 0; font: var(--md-sys-typescale-body-medium); }
.docs li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.opts { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.opts li a { display: flex; align-items: center; min-height: 52px; padding: 12px 16px; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-medium); text-decoration: none; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-label-large); }
.opts li a:hover { background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover), transparent); border-color: var(--md-sys-color-primary); }
.seq { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.seq li { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); padding: 14px 16px; }
.seq label { display: flex; gap: 12px; align-items: flex-start; font: var(--md-sys-typescale-body-medium); }
.seq input { margin-top: 3px; }
.seq details { margin: 6px 0 0 34px; } .seq summary { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); cursor: pointer; }
.pk, .props { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.props li { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); padding: 12px 14px; }
main.page { max-width: 760px; margin: 24px auto; background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); padding: 24px 26px; }
main.page h1 { font: var(--md-sys-typescale-headline-small); margin: 0 0 12px; }
.who { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium); }
@media print { .tag, .flow > section.step, .tabs, .price, .example, .btns, .fine, .topline, .msg, .next, .btn, form, nav.top, footer.site, .how { display: none !important; } .flow { grid-template-columns: 1fr; } .ticket { position: static; box-shadow: none; } body { background: #fff; color: #000; } }

/* Audit 2026-09-23: category eyebrow, product screenshots, proof strip, founder card, comparison tables, reviews line. */
.eyebrow { margin: 0 0 4px; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); letter-spacing: .04em; text-transform: uppercase; }
.whatyouget li.withshot { display: flex; flex-direction: column; }
.whatyouget .shot { display: block; margin-top: 12px; text-decoration: none; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
.whatyouget .shot img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; object-position: top; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); background: #fff; }
.whatyouget .shot span { display: block; margin-top: 6px; }
.proof { margin-top: 24px; padding: 18px 22px; }
.proof .counter { margin: 0; font: var(--md-sys-typescale-title-medium); }
.proof .counter b { color: var(--md-sys-color-primary); font-family: var(--md-sys-typescale-mono); }
.proof .wall { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.proof .wall li { background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-medium); padding: 14px 16px; margin: 0; }
.proof .wall img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.proof .wall blockquote { margin: 0 0 8px; font: var(--md-sys-typescale-body-large); }
.proof .wall footer { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.proof .wall .got { display: block; margin-top: 4px; color: var(--md-sys-color-primary); font-family: var(--md-sys-typescale-mono); }
.founder { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.founder img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 1px solid var(--md-sys-color-outline-variant); }
.founder b { display: block; font: var(--md-sys-typescale-title-medium); }
.founder small { display: block; color: var(--md-sys-color-on-surface-variant); }
.founder span { display: block; margin-top: 4px; font: var(--md-sys-typescale-label-large); }
.compare-wrap { margin: 18px 0 8px; }
.compare-wrap h3 { font: var(--md-sys-typescale-title-medium); margin: 16px 0 8px; }
table.compare { width: 100%; border-collapse: collapse; font: var(--md-sys-typescale-body-medium); margin: 0 0 6px; }
table.compare th, table.compare td { padding: 10px 10px; border-bottom: 1px solid var(--md-sys-color-outline-variant); text-align: left; vertical-align: top; }
table.compare thead th { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
table.compare tbody th { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface); font-weight: 500; }
table.compare .us { background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); font-weight: 500; }
table.compare thead th.us { color: var(--md-sys-color-primary); }
@media (max-width: 640px) { table.compare { font: var(--md-sys-typescale-body-small); } table.compare th, table.compare td { padding: 8px 6px; } }
.reviews { margin-top: 24px; padding: 14px 22px; }
.reviews p { margin: 0; }

/* Audit 2026-09-23: category eyebrow, product screenshots, proof strip, founder card, comparison tables, reviews line. */
.eyebrow { margin: 0 0 4px; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); letter-spacing: .04em; text-transform: uppercase; }
.whatyouget li.withshot { display: flex; flex-direction: column; }
.whatyouget .shot { display: block; margin-top: 12px; text-decoration: none; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
.whatyouget .shot img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; object-position: top; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); background: #fff; }
.whatyouget .shot span { display: block; margin-top: 6px; }
.proof { margin-top: 24px; padding: 18px 22px; }
.proof .counter { margin: 0; font: var(--md-sys-typescale-title-medium); }
.proof .counter b { color: var(--md-sys-color-primary); font-family: var(--md-sys-typescale-mono); }
.proof .wall { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.proof .wall li { background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-medium); padding: 14px 16px; margin: 0; }
.proof .wall img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.proof .wall blockquote { margin: 0 0 8px; font: var(--md-sys-typescale-body-large); }
.proof .wall footer { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.proof .wall .got { display: block; margin-top: 4px; color: var(--md-sys-color-primary); font-family: var(--md-sys-typescale-mono); }
.founder { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.founder img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 1px solid var(--md-sys-color-outline-variant); }
.founder b { display: block; font: var(--md-sys-typescale-title-medium); }
.founder small { display: block; color: var(--md-sys-color-on-surface-variant); }
.founder span { display: block; margin-top: 4px; font: var(--md-sys-typescale-label-large); }
.founder span a { display: inline-block; padding: 3px 0; min-height: 24px; } /* WCAG 2.2 target size (QA Q20) */
.compare-wrap { margin: 18px 0 8px; }
.compare-wrap h3 { font: var(--md-sys-typescale-title-medium); margin: 16px 0 8px; }
table.compare { width: 100%; border-collapse: collapse; font: var(--md-sys-typescale-body-medium); margin: 0 0 6px; }
table.compare th, table.compare td { padding: 10px 10px; border-bottom: 1px solid var(--md-sys-color-outline-variant); text-align: left; vertical-align: top; }
table.compare thead th { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
table.compare tbody th { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface); font-weight: 500; }
table.compare .us { background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); font-weight: 500; }
table.compare thead th.us { color: var(--md-sys-color-primary); }
@media (max-width: 640px) { table.compare { font: var(--md-sys-typescale-body-small); } table.compare th, table.compare td { padding: 8px 6px; } }
.reviews { margin-top: 24px; padding: 14px 22px; }
.reviews p { margin: 0; }
.herocta { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 18px; }
.herocta .btn { min-height: 52px; font-size: 18px; padding-inline: 22px; }
.herocta span { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
/* 2026-10-05: the delayed-bag line in the hero and the "Bag late? Get your money back" panel at step 1; the deadline tool. */
.herodelay { margin: 12px 0 0; font: var(--md-sys-typescale-body-medium); max-width: 60ch; overflow-wrap: anywhere; }
.delaypitch { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); min-width: 0; overflow-wrap: anywhere; }
.delaypitch p { margin: 6px 0 0; }
.delaypitch .fine { margin-top: 8px; color: inherit; }
.delaypitch .btns { margin-top: 10px; }
.dlform .choices { margin-top: 8px; }
.dlform select, .dlform input[type=date] { width: 100%; max-width: 100%; }
#dlResults .dl li > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { #dlResults .dl { padding: 12px 0; } #dlResults .dl li { grid-template-columns: 6px 1fr; } #dlResults .dl li .d { grid-column: 2; grid-row: 1; text-align: left; font-weight: 600; } #dlResults .dl li > div { grid-column: 2; } #dlResults .dl li i { grid-row: 1 / span 2; } }

/* ---------- Warmth pass (2026-09-24): motion and softer edges ---------- */
.btn, .choice, .grid li, .tier, .how > div, .faq details, .faq summary, nav.top a, .topline a, footer.site a { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.btn:active:not(:disabled) { transform: scale(.98); }
.grid li:hover, .tier:hover, .how > div:hover { box-shadow: var(--md-sys-elevation-2); transform: translateY(-1px); }
.ticket { box-shadow: var(--md-sys-elevation-2); border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent); }
.tag h1 small { font-family: var(--md-sys-typescale-font); }
h1 .brand, h1 .brand span { font-family: var(--md-sys-typescale-font); }
.faq summary { font-family: var(--md-sys-typescale-font); }
@media (prefers-reduced-motion: reduce) { .grid li:hover, .tier:hover, .how > div:hover, .btn:active:not(:disabled) { transform: none; } }
/* Wrapper sections hold cards; they are not cards themselves. */
.how, .about, .faq { background: none; border: 0; box-shadow: none; padding: 0; }
.faq h2, .about h2 { margin-top: 0; }

/* Bylines and sources (2026-09-24) */
.byline { margin: -6px 0 16px; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.byline a { color: inherit; }
.sources { margin-top: 28px; padding: 18px 22px; }
.sources h2 { font: var(--md-sys-typescale-title-medium); margin-bottom: 8px; }
.sources ul { margin: 0; padding-left: 20px; font: var(--md-sys-typescale-body-medium); }
.sources li { margin: 0 0 8px; overflow-wrap: anywhere; }
.sources small { display: block; }

/* Photo readers: the accent colour and a camera, so "snap it" reads differently from "type it". */
.btn.snap { display: inline-flex; align-items: center; gap: 8px; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); border-color: transparent; }
.btn.snap::before { content: ''; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn.snap:hover { background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) var(--md-sys-state-hover), var(--md-sys-color-tertiary-container)); color: var(--md-sys-color-on-tertiary-container); box-shadow: var(--md-sys-elevation-1); }
.btn.snap:disabled { opacity: .5; }

/* Copy strip: the airline's form, one field at a time, sticky so it follows the list. */
.copystrip { position: sticky; top: 8px; z-index: 5; margin: 0 0 14px; padding: 14px 16px 12px; background: var(--md-sys-color-surface-container-lowest); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent); border-radius: var(--md-sys-shape-corner-large); box-shadow: var(--md-sys-elevation-2); }
.copystrip .cs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); }
.copystrip .cs-head .btn { min-height: 40px; }
.copystrip .cs-label { margin-top: 8px; font: var(--md-sys-typescale-title-medium); }
.copystrip .cs-value { margin: 6px 0 10px; max-height: 120px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--md-sys-typescale-body-medium); font-family: var(--md-sys-typescale-mono); background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-small); padding: 8px 10px; }
.copystrip .cs-btns { display: flex; gap: 8px; align-items: center; }
.copystrip .cs-btns .btn { flex: none; }
.copystrip .cs-btns .btn.big { flex: 1 1 auto; width: auto; min-height: 52px; font-size: 18px; }
.copystrip .cs-dots { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px; }
.copystrip .cs-dots i { display: block; width: 14px; height: 6px; border-radius: 3px; background: var(--md-sys-color-surface-container-highest); }
.copystrip .cs-dots i.done { background: var(--md-sys-color-success); }
.copystrip .cs-dots i.now { background: var(--md-sys-color-tertiary); }
.copystrip .hint { margin: 8px 0 0; }
.pk li.now { outline: 2px solid var(--md-sys-color-tertiary); outline-offset: 2px; border-radius: var(--md-sys-shape-corner-medium); }
.pk li.copied .n { background: var(--md-sys-color-success); color: #fff; }
@media (max-width: 640px) { .copystrip { top: 0; border-radius: 0 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large); margin-inline: -16px; } .copystrip .cs-btns { flex-wrap: wrap; } .copystrip .cs-btns .btn.big { order: -1; flex-basis: 100%; } .copystrip .cs-btns .btn:not(.big) { flex: 1 1 auto; } }

/* Form-filling bookmark for the airlines we have a field map for. */
.fillkit { margin: 0 0 14px; padding: 12px 16px; }
.fillkit summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.fillkit summary::-webkit-details-marker { display: none; }
.fillkit summary span { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.fillkit ol { margin: 12px 0 0; padding-left: 22px; }
.fillkit li { margin: 0 0 8px; }
.fillkit .bookmarklet { cursor: grab; }

/* Calendar links on the case page. */
.cal { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.cal b { display: block; font: var(--md-sys-typescale-title-small); }
.cal span { display: block; margin: 2px 0 8px; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.cal .btns { margin-top: 0; }
.cal small { display: block; margin-top: 6px; }

/* The texting opt-in on the case page and its picture on /sms. */
.consent { margin: 8px 0 0; padding: 12px 14px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; background: var(--md-sys-color-surface-container-low, #f6f3ee); }
.consent .chk { display: flex; gap: 10px; align-items: flex-start; font: var(--md-sys-typescale-body-medium); }
.consent .chk input { margin-top: 1px; width: 24px; height: 24px; flex: none; }

.tier.off { opacity: .55; }
.tier.off .chip { visibility: hidden; }

/* Eligibility widget in the hero. */
.bytext { margin: 14px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--md-sys-color-secondary-container, #dcefe6); color: var(--md-sys-color-on-secondary-container, #0b2a2c); }
.bytext-h { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.bytext-h b { font: var(--md-sys-typescale-title-medium); }
.bytext-h span { font: var(--md-sys-typescale-body-medium); }
.bytext-form { display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: 8px 14px; align-items: start; }
.bytext-form .chk { grid-column: 1 / -1; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-secondary-container, #0b2a2c); padding: 0; }
.bytext-form .chk input { margin-top: 0; width: 24px; height: 24px; flex: none; }
.bytext-form .btns { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 720px) { .bytext-form { grid-template-columns: 1fr; } }
.elig { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 16px; background: var(--md-sys-color-surface-container-lowest, #fff); }
.elig-h { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 10px; }
.elig-h b { font: var(--md-sys-typescale-title-medium); } .elig-h span { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.elig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.elig-grid .f input[type=number] { max-width: 120px; }
.elig-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.elig-toggle label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 999px; font: var(--md-sys-typescale-body-medium); cursor: pointer; }
.elig-toggle label:has(input:checked) { background: var(--md-sys-color-secondary-container); border-color: transparent; }
.elig-toggle input { margin: 0; }
.elig-out { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.elig-out p:first-child { font: var(--md-sys-typescale-title-small); margin: 0 0 4px; }
@media (max-width: 720px) { .elig-grid { grid-template-columns: 1fr; } }

/* Text as the front door (2026-10-02): the hero's text button on phones, the QR code on desktops, the opt-in form folded under. */
.bytext-go { display: block; }
.tag .bytext-phone { margin: 0; max-width: none; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bytext-desk { display: none; gap: 14px; align-items: center; }
.bytext-desk .qr { flex: none; background: #fff; border-radius: 10px; padding: 4px; line-height: 0; }
.bytext-desk .qr svg { width: 148px; height: 148px; }
.tag .bytext-desk p { margin: 0; font: var(--md-sys-typescale-body-medium); }
.bytext-desk .num { white-space: nowrap; }
.tag .bytext-consent { margin: 10px 0 0; max-width: none; font: var(--md-sys-typescale-body-small); }
.bytext-more { margin-top: 10px; }
.bytext-more summary { cursor: pointer; font: var(--md-sys-typescale-label-large); }
.bytext-more .bytext-form { margin-top: 10px; }
@media (hover: hover) and (pointer: fine) and (min-width: 721px) { .bytext-phone { display: none; } .bytext-desk { display: flex; } }

/* The trust lines beside the price (ticket and hand-off card). */
.trust1 { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font: var(--md-sys-typescale-body-medium); }
.trust1 li { margin: 0; padding-left: 18px; position: relative; }
.trust1 li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--md-sys-color-primary); }
.trust1 li[hidden] { display: none; }
/* The trust list also sits inside .dl (the Start box); undo the deadlines-list grid there, which split each bullet's bold and plain text into columns on phones (Matt, 2026-10-03). */
.dl .trust1 { display: grid; gap: 4px; }
.dl .trust1 li { display: block; font: var(--md-sys-typescale-body-medium); }
.dl .trust1 li[hidden] { display: none; }

/* Hand-off review card: a text draft opens as four facts and one button; the builder waits behind "Edit details". */
.textreview { margin: 16px 0 24px; padding: 18px 20px; border-radius: var(--md-sys-shape-corner-large, 20px); background: var(--md-sys-color-surface-container-low); border: 1px solid var(--md-sys-color-outline-variant); }
.textreview h2 { margin: 2px 0 6px; }
.textreview .big.won { margin: 10px 0; }
.textreview .tr-facts { margin: 10px 0 14px; }
.textreview .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 10px; }
@media (max-width: 720px) { .textreview .row { grid-template-columns: 1fr; } }
body.text-review header.tag, body.text-review .topline, body.text-review .how, body.text-review .flow, body.text-review #exampleBar, body.text-review #stickyBar { display: none !important; }

/* Founder card with the note; the photo only when the file exists. Recovered counter beside the proof. */
.founder .note { margin: 6px 0 4px; font: var(--md-sys-typescale-body-large); }
.founder.nophoto { display: block; }
.founder.big img { width: 160px; height: 160px; }
.recovered { margin: 24px 0 0; padding: 14px 18px; font: var(--md-sys-typescale-title-medium); border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-low); }
.recovered b { color: var(--md-sys-color-primary); font-family: var(--md-sys-typescale-mono); }
.whatyouget .more { display: inline-block; margin-top: 6px; font: var(--md-sys-typescale-label-large); }

/* Proof beside the $1 button (2026-10-04): sample-letter link and the founder line, in the Start box (.dl) and on the text review card.
   Plain divs and paragraphs, not list items, so the .dl li deadline grid never applies. Wraps inside 375 px. */
.proof1 { margin: 0 0 12px; font: var(--md-sys-typescale-body-medium); min-width: 0; overflow-wrap: anywhere; }
.founder1 { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font: var(--md-sys-typescale-body-small); min-width: 0; }
.founder1 picture { flex: none; display: block; line-height: 0; }
.founder1 img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--md-sys-color-outline-variant); }
.founder1 p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.proof1 a { display: inline-block; min-height: 24px; line-height: 24px; }
/* C4: the filing promise directly under each $1 button (off until GUARANTEE_24H=1) */
.guarantee1 { margin: 8px 0 0; font: var(--md-sys-typescale-body-medium); font-weight: 600; color: var(--md-sys-color-on-surface); min-width: 0; overflow-wrap: anywhere; }
.big .n.prompt { font-family: inherit; font-weight: 600; font-size: clamp(24px, 6.5vw, 32px); line-height: 1.15; overflow-wrap: anywhere; }
/* Start-now shortcut under the claim box (2026-10-05): the $1 button sits at the foot of a long ticket on phones. */
.ticket .nowstart { margin: 0 20px 14px; }
.ticket .nowstart .btn { width: 100%; min-height: 48px; }
/* C5: the founder line under the estimate's Start button (full row below it, never above) */
.ticket .nowstart .founderest { flex: 1 1 100%; margin: 0; }
/* Web-form carrier line beside the $1 buttons (2026-10-05). */
#startWrap2 .portalline { flex-basis: 100%; margin: 0; }
.portalline { overflow-wrap: anywhere; }

/* 2026-10-10 conversion UI: the estimate range, the worth slider, the DIY block, lighter page sections, no table overflow on phones */
.big .n.range { font-size: clamp(24px, 7.2vw, 40px); overflow-wrap: anywhere; }
.worth { margin: 4px 14px 8px; padding: 10px 14px; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-low); }
.worth label { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.worth b { font: var(--md-sys-typescale-title-small); }
.worth output { font: 500 16px/1.2 var(--md-sys-typescale-mono); color: var(--md-sys-color-primary); }
.worth input[type=range] { width: 100%; min-height: 44px; margin: 4px 0 0; accent-color: var(--md-sys-color-primary); }
.worth .fine { display: block; }
.diy { margin: 10px 14px 4px; padding: 12px 14px; border-left: 3px solid var(--md-sys-color-tertiary); background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-small); }
.diy b { display: block; font: var(--md-sys-typescale-title-small); margin-bottom: 4px; }
.diy p { margin: 0; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.elig-n { margin: 0; font: 600 clamp(26px, 7.5vw, 36px)/1.1 var(--md-sys-typescale-mono); color: var(--md-sys-color-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.elig-lbl { margin: 2px 0 8px; }
details.more { margin: 12px 0; padding: 0; border: 0; background: none; box-shadow: none; }
details.more > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); }
details.more[open] > summary { margin-bottom: 8px; }
.faq details.faq-more { padding: 0; border: 0; background: none; box-shadow: none; }
.faq details.faq-more > summary { color: var(--md-sys-color-primary); }
@media (max-width: 480px) {
  table.compare { table-layout: fixed; }
  table.compare th, table.compare td { padding: 6px 4px; overflow-wrap: anywhere; hyphens: auto; }
  table.compare thead th { font-size: 12px; }
}
.founder > div { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; } .founder picture { flex: none; } /* the about card scrolled sideways at 320–375 px */

/* Hero (2026-10-10): the headline the ad's search swaps in (intent.js) is the big h1; the brand sits on a small line above it. */
.tag .herobrand { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; }
.tag .herobrand .brand { font: var(--md-sys-typescale-title-large); font-weight: 600; }
.tag .herobrand .brand .mark { width: 1.2em; height: 1.2em; }
.tag .herobrand .eyebrow { margin: 0; font-size: 12px; }
.tag h1.herohead { font: var(--md-sys-typescale-display-small); margin: 0 0 12px; }
@media (max-width: 600px) { .tag h1.herohead { font: var(--md-sys-typescale-headline-medium); font-weight: 600; } }
/* B-LAS1 (2026-10-16): the brand relationship, one line directly under the h1 on every pot screen ("BagBack is an independent claim
   service, not Delta Air Lines."), on the first screen at 390x667 with the button and the clock. Body-small, set tight (two lines are
   38 px), so the generic landing's longer authority line and treaty clock still leave the Snap button on the 667 px screen. */
.tag p.brandrel { margin: -4px 0 0; max-width: 58ch; font: var(--md-sys-typescale-body-small); line-height: 1.35; font-weight: 500; color: var(--md-sys-color-on-surface); }

/* One path, payoff first, one primary per screen (2026-10-11, Matt: "Yes"). */
/* The quick box: the range is the biggest thing in it, a small label, Start full width under it, the rules behind "Why this range?". */
.tag .elig-out p { max-width: none; }
.tag .elig-out .elig-n { margin: 0; font: 700 clamp(34px, 10vw, 48px)/1.05 var(--md-sys-typescale-mono); color: var(--md-sys-color-primary); letter-spacing: -0.02em; }
.tag .elig-out .elig-lbl { margin: 4px 0 0; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.tag .elig-out .elig-go { margin: 12px 0 0; flex-direction: column; align-items: stretch; gap: 6px; }
.tag .elig-out .elig-go .fine { margin: 0; }
.tag .elig-out .elig-go .btn { min-height: 52px; font-size: 18px; }
@media (min-width: 721px) { .tag .elig-out .elig-go { flex-direction: row; align-items: center; } }
.whyrange { margin: 8px 0 0; }
.whyrange > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); }
.tag .whyrange p, .whyrange p { margin: 4px 0 0; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); max-width: 60ch; }
.ticket .whyrange.tk { margin: 0 20px 4px; }
/* C14 pot-of-gold ad landing (2026-10-14): on /?intent= the first screen is the headline, the authority line, the truth line, the
   airline's clock and one button. The four questions, the late-bag line and the text block fold away until asked for (header.tag.pot;
   .ask4 unfolds the questions; the text block is moved under "Or text the photo instead"). The plain home page has none of these classes. */
.tag.pot .elig-h, .tag.pot .elig-grid, .tag.pot .herodelay, .tag.pot > div > .bytext { display: none; }
.tag.pot.ask4 .elig-h { display: flex; } .tag.pot.ask4 .elig-grid { display: grid; }
.tag.pot:not(.ask4) .elig:has(> #elOut[hidden]) { display: none; }
/* C23 (2026-10-19), the one-tap first screen: the h1, one line, three buttons and the foot line, nothing else. The eyebrow goes on every pot
   screen; the brand line (B-LAS1; kept in the markup directly under the h1 so file, crawler and tests agree), the nav strip (Q43, now on the
   plain page too) and how-it-works wait for the tap; the tap hides the line, the buttons and the foot and opens the number screen (#tapNum).
   The late-bag line comes back on the number screen (its deadlines-check link); the footer carries the rest. */
.tag.pot .herobrand .eyebrow, .tag.pot:not(.tapped) p.brandrel, .tag.pot.tapped p.herosub, .tag.pot.tapped .pot-tap, .tag.pot.tapped .pot-foot { display: none; }
.tag.pot:not(.tapped) + .topline, .tag.pot:not(.tapped) ~ .how { display: none; }
.tag.pot.tapped .herodelay { display: block; }
.tag .pot-tap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; max-width: 480px; }
.tag .pot-tap .btn.big { min-height: 56px; font-size: 18px; padding-inline: 8px; }
.tag .pot-foot { margin: 10px 0 0; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.tag.pot.tapped p.brandrel { margin-top: 6px; }
.tag.pot .pot-sms .bytext { display: block; margin-top: 10px; }
.tag .pot-auth { margin: 6px 0 0; max-width: 58ch; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.tag .pot-cap .pot-intl { display: block; margin-top: 2px; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); } /* C17: the Montreal figure, a fine line under the US figure */
.tag .pot-clock { margin: 12px 0 0; max-width: none; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); }
.tag .pot-msg { margin: 8px 0 0; font: var(--md-sys-typescale-body-medium); }
.tag .pot-or { margin: 8px 0 0; }
.linkish { background: none; border: 0; padding: 0; min-height: 44px; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); text-decoration: underline; cursor: pointer; text-align: left; }
.pot-sms { margin-top: 10px; } .pot-sms > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-primary); }
/* The number screen (C23): the ceiling, the clock, the citations, the chase and Start, in #tapNum; the raisers and the fee as money kept stay
   with the quick box's own range (.elig-out) once the remaining answers give one. */
.tag .tap-num { margin: 14px 0 0; }
.tag .tap-num .pot-cap { margin: 0; max-width: 58ch; font: var(--md-sys-typescale-title-large); color: var(--md-sys-color-on-surface); }
.tag .elig-out .pot-raise-h { margin: 10px 0 0; font: var(--md-sys-typescale-label-large); }
.tag .elig-out .pot-raise { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; max-width: none; }
.tag .elig-out .pot-raise .chip { cursor: pointer; border: 0; min-height: 36px; }
.tag .tap-num .pot-chase { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.tag .tap-num .pot-chase li { font: var(--md-sys-typescale-body-medium); }
.tag .tap-num .pot-chase b { display: inline-block; min-width: 4.6em; color: var(--md-sys-color-primary); font-variant-numeric: tabular-nums; }
.tag .tap-num .pot-tapline { margin: 6px 0 0; font: var(--md-sys-typescale-body-medium); }
.tag .tap-num .tap-go { margin: 12px 0 0; max-width: 480px; flex-direction: column; align-items: stretch; gap: 6px; }
.tag .tap-num .tap-go .fine { margin: 0; }
/* Winning formula (2026-10-20): the contact step after the first tap (CONTACT_BEFORE_NUMBER) and the free-path line under Start (FREE_PATH_LINE). */
.tag .tap-contact { margin: 14px 0 0; max-width: 480px; }
.tag .tap-contact-h { margin: 0 0 8px; max-width: 58ch; font: var(--md-sys-typescale-title-medium); color: var(--md-sys-color-on-surface); }
.tag .tap-contact .emailstep-row .btn { flex: 1 1 100%; min-height: 56px; }
.tag .tap-contact .fine, .tag .tap-contact .pot-msg { margin: 6px 0 0; }
.tag .tap-contact label.chk { padding: 6px 0 0; font: var(--md-sys-typescale-body-small); }
.tag .tap-contact label.chk input { width: 24px; height: 24px; flex: none; }
.tag .tap-num .pot-free { margin: 8px 0 0; max-width: 480px; }
.tag .elig-out .pot-fee { margin: 8px 0 0; font: var(--md-sys-typescale-body-medium); }
/* The ticket: the range big enough to lead the screen. */
.big .n.range { font-size: clamp(32px, 9vw, 46px); font-weight: 700; letter-spacing: -0.02em; }
@media (min-width: 921px) { .ticket .big .n.range { font-size: 34px; } } /* the side column on laptops: keep the range on one line */
.big.won .sub { font: var(--md-sys-typescale-body-small); }
/* Secondary actions are quiet: the photo readers are outline buttons (no salmon fill), the flat-fee tier and the bottom Start
   in the ticket (when "Start now" already sits under the number) step down, and the hero's text button stops being filled once
   the quick box has a number. */
.flow .btn.snap { background: transparent; color: var(--md-sys-color-primary); border-color: var(--md-sys-color-outline); }
.flow .btn.snap:hover { background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover), transparent); color: var(--md-sys-color-primary); box-shadow: none; }
.ticket.has-now #startCase { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.tag.has-est #smsGo { background: transparent; color: var(--md-sys-color-primary); border-color: var(--md-sys-color-outline); min-height: 48px; font-size: 16px; }
/* Hero: one line under the headline; the full description leads How it works. */
.tag p.herosub { margin-top: 0; }
.how .howlead { grid-column: 1 / -1; margin: 0; max-width: 70ch; font: var(--md-sys-typescale-body-large); color: var(--md-sys-color-on-surface); }
/* The airline's rules: one line, the rest under Details. */
#carrierHint .rule1 { display: block; }
#carrierHint details.rules > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; color: var(--md-sys-color-primary); font: var(--md-sys-typescale-label-large); }
#carrierHint details.rules p { margin: 0; }
/* Step 1 after the quick box: the carried estimate, answered questions collapsed, only what the case still needs. */
.carried { margin: 12px 0 4px; padding: 14px 16px; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.carried p { margin: 0; }
.carried-lbl { font: var(--md-sys-typescale-label-medium); }
.carried-n { font: 700 clamp(32px, 9vw, 44px)/1.1 var(--md-sys-typescale-mono); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.carried-sub { font: var(--md-sys-typescale-body-small); }
.q .qdone { display: none; }
.q.done .qdone { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 4px 4px 4px 14px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); font: var(--md-sys-typescale-body-large); }
.q.done .qdone .btn { min-height: 44px; flex: none; }
.q.done > b { margin-bottom: 6px; color: var(--md-sys-color-on-surface-variant); }
.q.done .choices, .q.done .why, .q.done .delaypitch { display: none; }
#s1.carried > .lead, #s1.carried > .why, #s1.carried .fwdhint { display: none; }
.stickybar #stickyN { flex: 1 1 auto; min-width: 0; font: 600 13px/1.2 var(--md-sys-typescale-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybar .btn { min-height: 48px; padding-inline: 16px; font-size: 16px; }
/* "Email me this estimate and my deadlines" (2026-10-19): under the quick box's range and the ticket's range. Secondary: an outline
   button beside one field (stacked on a phone), never wider than the box, below Start so Start stays the primary. */
.emailstep { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--md-sys-color-outline-variant); min-width: 0; }
.emailstep-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.emailstep-row input { flex: 1 1 200px; min-width: 0; }
.emailstep-row .btn { flex: 1 1 auto; white-space: normal; min-height: 48px; }
.emailstep .emailstep-fine, .emailstep .emailstep-msg { margin: 6px 0 0; overflow-wrap: anywhere; }
.ticket .emailstep.tk { margin: 0 20px 14px; }
.emailstep .emailstep-fine { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }

/* ==========================================================================================================================
   BagBack house style ("make it real", 2026-11-05). Matt: "a distinct look per brand", "no human touch" today.
   A travel product, so the cues come from the trip itself: a manila luggage tag, a boarding-pass strip, a letter on paper,
   a yellow claim stamp. Our own typefaces, served from this site (no font service):
     Bricolage Grotesque (headings: warm, a little quirky), Atkinson Hyperlegible Next (body: built for legibility, and our
     travelers skew older), Atkinson Hyperlegible Mono (dates, references, money). All SIL OFL 1.1: FONTS-LICENSE.txt.
   This layer only re-points the tokens above and adds the new blocks; every component keeps its markup.
   ========================================================================================================================== */
@font-face { font-family: "BagBack Display"; src: url("/bb-display.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "BagBack Text"; src: url("/bb-text.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "BagBack Mono"; src: url("/bb-mono.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
:root {
  --md-sys-typescale-font: "BagBack Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --md-sys-typescale-mono: "BagBack Mono", Menlo, Consolas, monospace;
  --md-sys-typescale-display-font: "BagBack Display", "Segoe UI", Helvetica, Arial, sans-serif;
  --md-sys-typescale-display-small: 750 40px/1.08 var(--md-sys-typescale-display-font);
  --md-sys-typescale-headline-large: 750 34px/1.12 var(--md-sys-typescale-display-font);
  --md-sys-typescale-headline-medium: 700 30px/1.16 var(--md-sys-typescale-display-font);
  --md-sys-typescale-headline-small: 700 26px/1.2 var(--md-sys-typescale-display-font);
  --md-sys-typescale-title-large: 650 24px/1.25 var(--md-sys-typescale-display-font);
  /* Palette: luggage-tag manila, deep harbour teal, tag orange, claim-stamp yellow */
  --md-sys-color-primary: #0E5A5E;
  --md-sys-color-primary-container: #CBEBE6;
  --md-sys-color-on-primary-container: #00201F;
  --md-sys-color-secondary-container: #DDE9E4;
  --md-sys-color-tertiary: #B9481A;
  --md-sys-color-tertiary-container: #FFE0CC;
  --md-sys-color-surface: #F6F0E4;
  --md-sys-color-surface-bright: #FFFCF6;
  --md-sys-color-surface-container-lowest: #FFFDF8;
  --md-sys-color-surface-container-low: #F0E9DA;
  --md-sys-color-surface-container: #E9E0CD;
  --md-sys-color-surface-container-high: #E2D8C2;
  --md-sys-color-surface-container-highest: #DBD0B8;
  --md-sys-color-on-surface: #1D1A15;
  --md-sys-color-on-surface-variant: #4C4538;
  --md-sys-color-outline: #84796A;
  --md-sys-color-outline-variant: #D6CAB3;
  --bb-stamp: #F2C14E;           /* the yellow of a claim stamp / priority tag */
  --bb-ink: #14363A;             /* the dark edge under a filled button */
  --bb-paper: #FFFEFA;
  --md-sys-shape-corner-medium: 14px;
}
h1, h2, .tag h1 { letter-spacing: -0.012em; }
.btn, button.btn, a.btn { border-radius: 12px; }
.btn.primary { box-shadow: 0 3px 0 var(--bb-ink); }
.btn.primary:hover { box-shadow: 0 2px 0 var(--bb-ink); transform: translateY(1px); }
.btn.primary:active { box-shadow: 0 0 0 var(--bb-ink); transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) { .btn.primary:hover, .btn.primary:active { transform: none; } }
section.step, .card, .tier, section, .about > div, .faq details, .grid li { border-color: var(--md-sys-color-outline-variant); box-shadow: 0 1px 0 rgba(60,48,28,.08); }

/* The short description that replaced the 1-2-3 cards */
.how { display: block; margin-top: 18px; }
.how .howlead { margin: 0 0 6px; max-width: 72ch; }
.how .howmore { margin: 0; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }

/* A yellow "SAMPLE" stamp, for anything that is an example */
.stamp { display: inline-block; font: 700 13px/1 var(--md-sys-typescale-mono); letter-spacing: .12em; text-transform: uppercase; color: #3B2A00; background: var(--bb-stamp); padding: 6px 9px 5px; border-radius: 4px; transform: rotate(-2deg); vertical-align: middle; box-shadow: 0 1px 0 rgba(0,0,0,.18); }
h2 .stamp { margin-left: 8px; font-size: 12px; }

/* ---- The real sample (home page, the real-sample slot) ---- */
section.real { margin: 34px 0 18px; padding: 28px clamp(18px, 3vw, 34px) 26px; background: var(--md-sys-color-surface-container-low); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 18px; box-shadow: none; position: relative; }
section.real::before { content: ""; position: absolute; top: 18px; right: 22px; width: 18px; height: 18px; border-radius: 50%; background: var(--md-sys-color-surface); box-shadow: inset 0 0 0 2px var(--md-sys-color-outline-variant); } /* the tag's eyelet */
.real .kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
.real h2 { font: var(--md-sys-typescale-headline-medium); margin: 0 0 10px; max-width: 32ch; }
.real .real-lead { max-width: 64ch; }
.real h3 { font: 700 15px/1.3 var(--md-sys-typescale-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--md-sys-color-tertiary); margin: 0 0 10px; }
.pass { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 18px 0 22px; background: var(--bb-paper); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; overflow: hidden; }
.pass > div { padding: 12px 14px; border-left: 2px dashed var(--md-sys-color-outline-variant); min-width: 0; }
.pass > div:first-child { border-left: 0; }
.pass small { display: block; font: 600 12px/1.2 var(--md-sys-typescale-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }
.pass b { display: block; font: 700 26px/1.15 var(--md-sys-typescale-mono); color: var(--md-sys-color-on-surface); overflow-wrap: anywhere; }
.pass .ref b { font-size: 17px; line-height: 1.9; }
.pass span { display: block; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.real-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; }
.real-grid > div, .real-letter { background: var(--bb-paper); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 18px 20px; min-width: 0; }
.tl2 { list-style: none; margin: 0 0 10px; padding: 0 0 0 18px; border-left: 2px solid var(--md-sys-color-outline-variant); }
.tl2 li { position: relative; margin: 0 0 14px; display: grid; gap: 1px; }
.tl2 li::before { content: ""; position: absolute; left: -26px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--md-sys-color-primary); box-shadow: 0 0 0 3px var(--bb-paper); }
.tl2 li.theirs::before { background: var(--md-sys-color-tertiary); }
.tl2 time { font: 700 15px/1.3 var(--md-sys-typescale-mono); color: var(--md-sys-color-on-surface); }
.tl2 span { font: var(--md-sys-typescale-body-medium); }
.tl2 small { font: var(--md-sys-typescale-label-small); color: var(--md-sys-color-on-surface-variant); }
table.sum { width: 100%; border-collapse: collapse; font: var(--md-sys-typescale-body-medium); }
table.sum td, table.sum th { padding: 7px 0; border-bottom: 1px dotted var(--md-sys-color-outline-variant); text-align: left; vertical-align: top; font-weight: 400; }
table.sum td.num { text-align: right; padding-left: 12px; font-family: var(--md-sys-typescale-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.sum tr.sub th, table.sum tr.sub td { font-weight: 700; border-bottom: 1px solid var(--md-sys-color-outline); }
table.sum tr.tot th, table.sum tr.tot td { font: 800 20px/1.3 var(--md-sys-typescale-display-font); border-bottom: 3px double var(--md-sys-color-on-surface); padding-top: 12px; }
table.sum tr.tot td.num { font-family: var(--md-sys-typescale-mono); color: var(--md-sys-color-primary); }
.real .fine { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); margin: 10px 0 0; }
.real-letter { margin-top: 18px; }
.real-letter .paper { max-height: 460px; overflow: auto; padding: 22px 26px 22px 52px; background-color: #fff; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 6px; box-shadow: 0 10px 24px -18px rgba(40,30,10,.45); font: 400 16px/1.6 var(--md-sys-typescale-font); background-image: linear-gradient(90deg, transparent 38px, rgba(185,72,26,.18) 38px, rgba(185,72,26,.18) 39px, transparent 39px); }
.real-letter .paper p { margin: 0 0 12px; max-width: 70ch; }
.real-letter > p { margin: 12px 0 0; }
.real-foot { margin: 16px 0 0; font: var(--md-sys-typescale-label-large); }
@media (max-width: 860px) {
  .real-grid { grid-template-columns: 1fr; }
  .pass { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pass > div:nth-child(4) { border-left: 0; }
  .pass > div:nth-child(n+4) { border-top: 2px dashed var(--md-sys-color-outline-variant); }
}
@media (max-width: 420px) { .pass b { font-size: 21px; } .real-letter .paper { padding: 16px 14px 16px 34px; background-position: -14px 0; max-height: 380px; font-size: 15px; } }

/* ---- The founder: a face in a fixed slot, initials underneath, a yellow tag behind it ---- */
section.maker { margin-top: 34px; padding: 26px clamp(18px, 3vw, 34px); background: var(--bb-paper); }
section.maker h2 { margin: 0 0 16px; }
.founder { align-items: flex-start; gap: clamp(16px, 3vw, 30px); }
.face { --face: 132px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--face); height: var(--face); border-radius: 22px; background: var(--md-sys-color-primary-container); box-shadow: 8px 8px 0 var(--bb-stamp); }
.face.s132 { --face: 132px; } .face.s160 { --face: 160px; } .face.s200 { --face: 200px; }
.face .mono { font: 800 calc(var(--face) * .36)/1 var(--md-sys-typescale-display-font); color: var(--md-sys-color-primary); letter-spacing: -0.02em; }
.face picture, .face img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; border: 0; }
.founder .face img, .founder.big .face img { width: 100%; height: 100%; border-radius: inherit; border: 0; }
.face img { color: transparent; font-size: 0; } /* QA 2026-11-05: a photo that fails to load paints no alt text over the initials (the alt stays for screen readers) */
.founder .who { flex: 1 1 0; min-width: 0; }
.madeby { margin: 0 0 12px; font: 700 14px/1.4 var(--md-sys-typescale-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--md-sys-color-tertiary); }
blockquote.story { margin: 0 0 14px; padding: 2px 0 2px 18px; border-left: 4px solid var(--md-sys-color-tertiary); }
blockquote.story p { margin: 0 0 10px; font: 400 19px/1.6 var(--md-sys-typescale-font); max-width: 66ch; color: var(--md-sys-color-on-surface); }
blockquote.story footer { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
blockquote.story footer::before { content: "\2014\00a0"; }
mark.draftmark { display: inline-block; margin: 0 0 10px; padding: 4px 9px; background: var(--bb-stamp); color: #3B2A00; font: 700 13px/1.3 var(--md-sys-typescale-mono); border-radius: 4px; }
.founder .bio { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); max-width: 66ch; }
@media (max-width: 600px) { .founder { flex-direction: column; } .face.s132 { --face: 112px; } .face.s200 { --face: 160px; } }

/* ---- Content pages: About, the rules, the changelog ---- */
.about-head { display: flex; align-items: center; gap: clamp(20px, 4vw, 40px); flex-wrap: wrap; margin: 10px 0 26px; }
.about-head > div { flex: 1 1 300px; min-width: 0; }
.founder.big { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 12px 0 22px; }
ul.facts { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
ul.facts li { padding: 10px 14px; background: var(--md-sys-color-surface-container-low); border-left: 4px solid var(--bb-stamp); border-radius: 4px; font: var(--md-sys-typescale-body-medium); }
ul.rulelist { padding-left: 20px; } ul.rulelist li { margin: 0 0 10px; max-width: 72ch; }
p.checked { display: inline-block; padding: 8px 12px; background: var(--md-sys-color-surface-container-low); border: 1px dashed var(--md-sys-color-outline); border-radius: 8px; font: 600 15px/1.4 var(--md-sys-typescale-mono); }
p.sumline { font: 400 16px/1.7 var(--md-sys-typescale-mono); background: var(--bb-paper); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 10px; padding: 12px 16px; overflow-wrap: anywhere; }
ol.changes { list-style: none; padding: 0 0 0 20px; margin: 18px 0; border-left: 2px solid var(--md-sys-color-outline-variant); }
ol.changes > li { position: relative; margin: 0 0 20px; }
ol.changes > li::before { content: ""; position: absolute; left: -28px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--md-sys-color-tertiary); box-shadow: 0 0 0 4px var(--md-sys-color-surface); }
ol.changes time, ol.changes .unreleased { font: 700 16px/1.4 var(--md-sys-typescale-mono); }
ol.changes ul { margin: 6px 0 0; padding-left: 18px; }
.founder.nophoto { display: flex; }
.wrap > h2 { margin: 30px 0 10px; }
@media (max-width: 600px) { blockquote.story p { font-size: 17px; } }

/* /rules on a phone (QA, 2026-11-05): the site-wide narrow rule (overflow-wrap: anywhere, fixed layout) split "International",
   "Southwest" and every check date mid-word. Here words wrap whole, the source / since column folds into the cell beside it, and the
   four remaining columns size to their content. */
table.fold .chk { display: none; margin-top: 4px; font: var(--md-sys-typescale-label-small); color: var(--md-sys-color-on-surface-variant); font-weight: 400; }
@media (max-width: 480px) {
  table.compare.rules { table-layout: auto; }
  table.compare.rules th, table.compare.rules td { overflow-wrap: break-word; hyphens: manual; }
  table.fold .src { display: none; }
  table.fold .chk { display: block; }
}
/* The sample's pass strip on a phone (QA, 2026-11-05): at 320-390 px "Delta" and the file reference broke mid-word. Smaller
   gutters and type that scales with the screen keep every value on one line. */
@media (max-width: 420px) {
  .pass > div { padding: 10px 8px; }
  .pass b { font-size: clamp(15px, 5.4vw - 2px, 21px); overflow-wrap: normal; white-space: nowrap; }
  .pass .ref b { font-size: clamp(10px, 4.1vw - 3px, 17px); line-height: 1.9; }
}
@media (max-width: 360px) {
  .pass { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pass > div:nth-child(n) { border-left: 2px dashed var(--md-sys-color-outline-variant); border-top: 0; }
  .pass > div:nth-child(odd) { border-left: 0; }
  .pass > div:nth-child(n+3) { border-top: 2px dashed var(--md-sys-color-outline-variant); }
  .pass .ref b { font-size: 13px; }
}

/* Long URLs and tokens wrap instead of pushing the page sideways (2026-11-06: /airlines/delta-air-lines scrolled ~120 px at 390 px,
   British Airways ~220 px). break-word only breaks a word that cannot fit on its own line, and it leaves min-content sizing alone,
   so tables and flex rows (the /rules tables, the sample's pass strip) lay out exactly as before. Links in running text may break
   anywhere, since a URL has no word to keep whole. */
body { overflow-wrap: break-word; }
.wrap :is(p, li, dd) > a { overflow-wrap: anywhere; }

/* ==========================================================================================================================
   Home page tidy-up (Q's design review, 2026-11-06). Fewer stock rounded cards: the builder's steps, what-you-get, the FAQ and
   the about columns read as one page divided by rules, not a stack of floating boxes. Two things keep their frame because the
   frame means something: the ticket (your estimate) and the sample claim (a luggage tag), plus the recommended plan. Labels are
   sentence case in the text colour, not small orange capitals. Shorter on a phone: flat steps get the full width (fewer lines),
   tighter gaps, the founder once.
   ========================================================================================================================== */
.flow > section.step, .whatyouget ul.grid li, .faq > details, section.about > div, section.maker, .price .tier:not(.mid) {
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.flow > section.step { padding: 26px 0 6px; margin: 0; border-top: 1px solid var(--md-sys-color-outline-variant); }
.flow > section.step#s1 { border-top: 0; padding-top: 6px; }
.flow > aside.ticket + section.step { border-top: 0; }
.whatyouget ul.grid li { padding: 14px 0 0; border-top: 2px solid var(--md-sys-color-on-surface); }
.faq > details { margin: 0; padding: 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.faq > details:first-of-type { border-top: 1px solid var(--md-sys-color-outline-variant); }
.faq > details.faq-more { border-bottom: 0; }
.faq > details.faq-more > details { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); border-radius: 0; box-shadow: none; background: none; }
section.about { gap: 6px 28px; padding-top: 22px; border-top: 1px solid var(--md-sys-color-outline-variant); }
section.about > div { padding: 0; }
section.maker { padding: 26px 0 8px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.price .tier:not(.mid) { padding: 18px 2px; border-top: 1px solid var(--md-sys-color-outline-variant); }
/* The labels: no more small orange capitals */
.madeby { font: 600 16px/1.4 var(--md-sys-typescale-font); letter-spacing: 0; text-transform: none; color: var(--md-sys-color-on-surface-variant); }
.real h3 { font: var(--md-sys-typescale-title-medium); font-family: var(--md-sys-typescale-display-font); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--md-sys-color-on-surface); }
.eyebrow { letter-spacing: 0; text-transform: none; }
.whatyouget .shot img { max-height: 200px; }
@media (max-width: 600px) {
  .flow > section.step { padding-top: 20px; }
  .flow > section.step .lead { margin-bottom: 10px; }
  .flow .q { margin-top: 16px; }
  section.real { margin: 26px -8px 14px; padding: 22px 16px 20px; }
  .whatyouget, .faq, .price { margin-top: 24px; }
  .whatyouget .shot img { max-height: 150px; }
  section.maker { margin-top: 24px; padding-top: 20px; }
  section.maker .face.s132 { --face: 64px; box-shadow: 4px 4px 0 var(--bb-stamp); border-radius: 14px; }
  section.maker blockquote.story { padding-left: 14px; }
  section.maker blockquote.story p { font-size: 16px; }
  section.about { margin-top: 20px; padding-top: 16px; }
}
section.price { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 26px 0 0; border-top: 1px solid var(--md-sys-color-outline-variant); }
@media (max-width: 600px) {
  /* the face and the byline share a row; the story takes the full width under them */
  section.maker .founder { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px 14px; align-items: center; }
  section.maker .founder .who { display: contents; }
  section.maker .founder .madeby { margin: 0; }
  section.maker .founder .who > :not(.madeby) { grid-column: 1 / -1; }
  section.about > div + div { margin-top: 12px; }
}