/*
 * Beat My Bill — site stylesheet.
 *
 * Palette, radii and shadows follow the Beat My Bill app design system
 * (design/v2/beatmybill_v2.html): banded dark/light layout, lime as a filled
 * accent, hard offset shadows with no blur, generous radii.
 *
 * Structure and the provenance-chip system come from the reference page
 * direct-line-car-insurance.html and must not be altered — the chips are the
 * product.
 */
:root{
  --ink:#0d1b2a;
  --ink-soft:#3a4a5c;
  --ink-faint:#6b7c8f;
  --paper:#f4f6f0;          /* app paper — warmer than the reference page */
  --card:#ffffff;
  --lime:#c6ff00;
  --lime-dk:#a8d800;        /* app hover state */
  --rule:#e4e8df;           /* app hairline */
  --steel:#8a9aaa;          /* app muted text on dark */
  --shadow:#02060b;         /* app hard-shadow ink */
  --body-on-dark:#e8ecf0;
  --warn-bg:#fff8e1;
  --warn-edge:#e0b500;

  --display:'Montserrat',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --wrap:1080px;        /* single content width — every block lines up */
  --gap:2.5rem;
  --r:12px;                 /* app card radius */
  --lift:4px 4px 0 var(--ink);   /* app hard offset shadow */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}

a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:2px;
}

/* ---------- masthead ---------- */
.masthead{background:transparent;color:#fff}  /* let .topband's scan-line show through */
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:3.5rem}
.brand{color:#fff;text-decoration:none}
.masthead nav a{
  color:#fff;font-size:.8125rem;font-weight:500;
  margin-left:1.25rem;text-decoration:none;opacity:.85;
}
.masthead nav a:hover{opacity:1;text-decoration:underline}

/* ---------- breadcrumb ---------- */
.crumb{
  font-family:var(--mono);font-size:.75rem;color:var(--ink-faint);
  padding:1.25rem 0 0;
}
.crumb a{color:var(--ink-faint)}

/* ---------- title block ---------- */
.title{padding:.75rem 0 1.5rem}
h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.25rem,5.4vw,66px);
  line-height:.98;letter-spacing:-0.04em;
  margin:0 0 1.5rem;
  text-wrap:balance;
}
.standfirst{font-size:1.125rem;line-height:1.65;color:var(--ink-soft);margin:0 0 1.5rem;max-width:50ch}
.stamp{
  font-family:var(--mono);font-size:.75rem;color:var(--ink-faint);
  border-top:1px solid var(--rule);padding-top:.75rem;
}

/* ---------- provenance chips ---------- */
.chip{
  display:inline-block;vertical-align:middle;
  font-family:var(--mono);font-size:.625rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.15rem .4rem;border-radius:2px;
  border:1px solid currentColor;
  white-space:nowrap;
}
.chip--v{color:#1c6b3f}
.chip--u{color:#9a6b00;background:var(--warn-bg)}
.chip--g{color:var(--ink-faint)}

/* ---------- the call card (signature element) ---------- */
.callcard{
  background:var(--ink);color:#fff;border-radius:20px;
  padding:2.25rem;margin:0 0 var(--gap);
  border-left:6px solid var(--lime);
}
.callcard .label{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lime);margin:0 0 .5rem;
}
.callcard .number{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(1.75rem,5vw,2.75rem);
  letter-spacing:-0.02em;color:var(--lime);text-decoration:none;
  display:inline-block;line-height:1.2;
}
.callcard .number:hover{color:#fff}
.callcard .meta{
  font-size:.875rem;color:#b9c6d2;margin:.5rem 0 0;
}
.callcard .chip--v{color:var(--lime);background:transparent}

.ivr{
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:1.25rem;padding-top:1.25rem;
}
.ivr h2{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:#b9c6d2;
  margin:0 0 .875rem;
}
.ivr ol{margin:0;padding:0;list-style:none;counter-reset:step}
.ivr li{
  counter-increment:step;position:relative;
  padding-left:2rem;margin-bottom:.75rem;font-size:.9375rem;color:#e8ecf0;
}
.ivr li:last-child{margin-bottom:0}
.ivr li::before{
  content:counter(step);position:absolute;left:0;top:.05rem;
  font-family:var(--mono);font-size:.75rem;font-weight:700;
  color:var(--ink);background:var(--lime);
  width:1.35rem;height:1.35rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.ivr .say{color:var(--lime);font-weight:600}

/* ---------- sections ---------- */
section{margin:0 0 var(--gap)}
h2.sec{
  font-family:var(--display);font-weight:900;
  font-size:clamp(1.75rem,3.2vw,44px);
  letter-spacing:-0.03em;line-height:1.05;
  margin:0 0 1.75rem;text-wrap:balance;
}
p{margin:0 0 .875rem}
p:last-child{margin-bottom:0}

.box{
  background:var(--card);border:1px solid var(--rule);
  border-radius:16px;padding:28px;
}
.box--warn{background:var(--warn-bg);border-color:var(--warn-edge)}
.box + .box{margin-top:.875rem}

.rights li{margin-bottom:.75rem}
.rights li:last-child{margin-bottom:0}
/* Title-style <strong> is opted in explicitly with .t. Everything else stays
   inline — :first-child cannot be used here because it ignores text nodes, so
   "It does <strong>not</strong> cap..." matched it and broke onto three lines. */
.rights strong.t{display:block;font-size:.9375rem}

/* ---------- tactic / counter pairs ---------- */
.pair{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:28px;margin-bottom:1.125rem;box-shadow:var(--lift);border-radius:16px;
}
.pair:last-child{margin-bottom:0}
.pair .they,.pair .you{margin:0}
.pair .they{font-weight:600;margin-bottom:.5rem}
.pair .you{
  font-size:.9375rem;color:var(--ink-soft);
  padding-top:.5rem;border-top:1px dashed var(--rule);
}
.pair .tag{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:.15rem;
}

/* ---------- phrases ---------- */
.phrase{
  background:var(--card);border:1px solid var(--rule);
  border-left:4px solid var(--ink);border-radius:0 var(--r) var(--r) 0;
  padding:1rem 1.125rem;margin-bottom:.75rem;
}
.phrase p{font-size:1.0625rem;margin:0 0 .5rem}
.phrase .note{font-size:.8125rem;color:var(--ink-faint);margin:0}

/* ---------- sources table ---------- */
table{width:100%;border-collapse:collapse;font-size:.875rem}
th,td{text-align:left;padding:.625rem .5rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:500;
}
td:first-child{font-weight:600;width:38%}

/* ---------- signup ---------- */
.signup{background:var(--ink);color:#fff;border-radius:20px;padding:2.25rem;margin-bottom:var(--gap)}
.signup h2{font-family:var(--display);font-weight:800;font-size:1.125rem;margin:0 0 .5rem}
.signup p{color:#b9c6d2;font-size:.9375rem;margin:0 0 1rem}
.signup form{display:flex;gap:.5rem;flex-wrap:wrap}
.signup input{
  flex:1 1 12rem;padding:.75rem;border:1px solid #3a4a5c;border-radius:8px;
  background:#16283a;color:#fff;font-family:var(--body);font-size:1rem;
}
.signup input::placeholder{color:#7e90a3}
.signup button{
  padding:.75rem 1.25rem;border:0;border-radius:8px;
  background:var(--lime);color:var(--ink);
  font-family:var(--body);font-weight:700;font-size:1rem;cursor:pointer;box-shadow:2px 2px 0 var(--shadow);
}
.signup button:hover{background:var(--lime-dk)}
.signup .small{font-size:.75rem;color:#7e90a3;margin:.75rem 0 0}
/* Turnstile widget takes its own full row beneath the action row */
.signup .cf-turnstile{flex:1 1 100%;min-height:65px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);margin-top:2.5rem;padding:1.5rem 0 3rem}
footer p{font-size:.8125rem;color:var(--ink-faint)}
footer a{color:var(--ink-faint)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ==========================================================================
   ADDITIONS beyond the reference page (direct-line-car-insurance.html).
   The reference page has no month selector and no inline form feedback, so
   these are new components. Existing rules and tokens above are unmodified —
   everything here reuses the same variables and visual idiom.
   ========================================================================== */

/* month selector — matches .signup input exactly */
.signup select{
  flex:1 1 12rem;padding:.75rem;border:1px solid #3a4a5c;border-radius:8px;
  background:#16283a;color:#fff;font-family:var(--body);font-size:1rem;
}
.signup select:invalid{color:#7e90a3}

/* inline success / failure feedback */
.signup .status{
  font-size:.875rem;margin:.875rem 0 0;padding:.625rem .75rem;
  border-radius:4px;border-left:3px solid;
}
.signup .status--ok{background:#16283a;border-color:var(--lime);color:#e8ecf0}
.signup .status--err{background:var(--warn-bg);border-color:var(--warn-edge);color:#5c4600}

.signup button[disabled]{opacity:.6;cursor:not-allowed}

/* hub + index link rows reuse .pair; make the link itself the emphasis */
.pair .they a{text-decoration-thickness:2px}


/* ==========================================================================
   APP IDENTITY — from design/v2/beatmybill_v2.html
   Banded dark/light layout, lime logo mark, eyebrow labels, dark footer.
   ========================================================================== */

/* logo lockup — matches .logo-mark / .logo-word in the app demo:
   34px lime tile, and "BeatMyBill" as one word with "My" at half opacity. */
.brand{display:inline-flex;align-items:center;gap:11px;font-size:19px}
.brand .mark{
  width:34px;height:34px;border-radius:8px;
  background:var(--lime);color:var(--ink);
  font-family:var(--display);font-weight:900;font-size:20px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.brand .word{
  font-family:var(--display);font-weight:900;
  font-size:19px;letter-spacing:-0.02em;color:#fff;
}
.brand .word .my{opacity:.5}

/* dark top band: masthead and title read as one block, as on the app hero */
.topband{background:var(--ink);color:#fff}
.topband .crumb,.topband .crumb a{color:var(--steel)}
.topband .title{padding:1.5rem 0 4.5rem}
.topband h1{color:#fff}
.topband h1 em{font-style:normal;color:var(--lime)}
.topband .standfirst{color:var(--body-on-dark)}
.topband .stamp{
  color:var(--steel);
  border-top:1px solid rgba(255,255,255,.16);
}
main.wrap{padding-top:80px;padding-bottom:24px}  /* app .light rhythm */

/* eyebrow labels above section headings */
.eyebrow{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .35rem;
}

/* dark footer band, as on the app */
footer{
  background:var(--ink);color:var(--steel);
  border-top:0;margin-top:3rem;padding:2rem 0 3rem;
}
footer p{color:var(--steel);font-size:.8125rem}
footer a{color:var(--body-on-dark)}

/* ── Signature scan-line ──
   Lime diagonal hatch at 4%, from the app demo. Applied to every dark block so
   the ink surfaces have the app's texture rather than reading as flat navy.
   Static, so unlike the demo it is not gated behind prefers-reduced-motion —
   there is no motion to reduce, and gating it would strip the identity for
   anyone with that preference set. */
.scan{
  background-image:repeating-linear-gradient(-45deg,
    rgba(198,255,0,0.04) 0px, rgba(198,255,0,0.04) 1px,
    transparent 1px, transparent 8px);
}

/* ── More lime, as the app uses it ── */
.masthead nav a:hover{opacity:1;color:var(--lime);text-decoration:none}
footer a:hover{color:var(--lime)}
.eyebrow.lime{color:var(--lime)}
h1 em{font-style:normal;color:var(--lime)}
.callcard .number:hover{color:#fff}

/* ── One content width ──
   Every block — hero, prose, card grid, callcard, signup — is the width of the
   shell, so nothing steps in or out. The only exception is .standfirst, which
   keeps the app's own 50ch cap on its hero sub. */

/* app card grids */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid .pair{margin-bottom:0;height:100%}

/* eyebrow, at app size */
.eyebrow{
  font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:#5d6b78;margin:0 0 14px;
}

@media (max-width:860px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .wrap{padding:0 20px}
  .box,.pair{padding:20px}
  .callcard,.signup{padding:1.5rem}
}

.topband .eyebrow,.callcard .eyebrow{color:var(--lime)}

/* ══ Motion ══
   Deliberately restrained: a cross-document fade between pages, a press on the
   cards, and a short settle on the hero. The press works with the design rather
   than against it — the card moves toward its hard shadow instead of floating
   above it, which a hard offset shadow implies.
   Everything here is inside a prefers-reduced-motion guard. */

/* native cross-document transitions; ignored by browsers without support */
@view-transition{navigation:auto}

@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:bmb-out .18s ease both}
  ::view-transition-new(root){animation:bmb-in .26s ease both}
  @keyframes bmb-out{to{opacity:0}}
  @keyframes bmb-in{from{opacity:0;transform:translateY(6px)}}

  /* cards press toward their shadow */
  .pair{transition:transform .14s ease, box-shadow .14s ease}
  .pair:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}

  /* the callcard is the signature element — lift the number, not the card */
  .callcard .number{transition:color .14s ease, transform .14s ease}
  .callcard .number:hover{transform:translateX(2px)}

  /* lime CTA presses into its shadow */
  .signup button{transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
  .signup button:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shadow)}
  .signup button:active{transform:translate(2px,2px);box-shadow:none}

  /* nav and chips */
  .masthead nav a{transition:color .14s ease, opacity .14s ease}
  .chip{transition:transform .14s ease}
  .pair:hover .chip{transform:translateY(-1px)}

  /* hero settles on arrival */
  .topband .title > *{animation:bmb-rise .4s ease both}
  .topband .title > h1{animation-delay:.02s}
  .topband .title > .standfirst{animation-delay:.07s}
  .topband .title > .stamp{animation-delay:.12s}
  @keyframes bmb-rise{from{opacity:0;transform:translateY(8px)}}

  /* inline form feedback fades in rather than appearing */
  .signup .status{animation:bmb-rise .28s ease both}
}

/* ══ Navigation ══
   Seven categories, always present in the DOM. No disclosure widget: a closed
   <details> hides its own content, so the first attempt at this made the whole
   nav vanish on desktop. On narrow screens the links WRAP onto extra rows.
   The previous approach — a horizontal scroll strip with a faded trailing
   edge — is retired: the fade masked the strip's right edge permanently, so
   the last link stayed ghosted even when scrolled fully across. Wrapping
   keeps every link visible with no JavaScript and nothing cut off. */
.navlinks{display:flex;align-items:center}
.masthead nav a{
  color:#fff;font-size:.8125rem;font-weight:500;
  margin-left:1.25rem;text-decoration:none;opacity:.85;white-space:nowrap;
}
.masthead nav a:hover{opacity:1;color:var(--lime);text-decoration:none}

@media (max-width:820px){
  .masthead .wrap{
    height:auto;flex-direction:column;align-items:flex-start;
    gap:.5rem;padding-top:.85rem;padding-bottom:.6rem;
  }
  .navlinks{
    width:100%;flex-wrap:wrap;
    gap:.45rem 1.1rem;
    padding-bottom:.35rem;
  }
  .masthead nav a{margin-left:0;font-size:.875rem;opacity:1}
}