/* ============================================================================
   Student Fares campaign — visual system
   ----------------------------------------------------------------------------
   Typography-led, not color-led (site plan §3b). ONE accent, drawn from Transit
   Forward Philadelphia's brand blue, reserved for the single number or bar that
   matters most in a given view. Everything else is ink and hairline rules.

   No gradients, no drop shadows on data, no alarm coloring on the billing gap —
   the gap is presented as a flow, not a warning (site plan §3c).

   Accent source: TFP's NationBuilder theme stylesheet, where #407ec9 is the
   dominant link/button color. To adopt an official TFP brand sheet, change the
   three --tfp-* values below and nothing else.
   ========================================================================== */

:root {
  /* --- SEPTA Student Fare Card palette -------------------------------------
     Taken from the card itself: amber face with a lighter diagonal band, heavy
     blue display type, one red rule. The site is dressed as the object it is
     arguing about, so the card's own restrictions can be read off the hero.

     Red is decorative only — it draws the card's rule. It never colors data,
     and it never marks the billing gap (site plan §3c: the gap is a flow, not
     a warning). Blue is the data accent. */
  --card:        #f3c654;
  --card-band:   #f8d67f;
  --card-deep:   #e0ae35;
  --septa-blue:  #1b4298;
  --septa-blue-d:#14316f;
  --septa-red:   #e0342b;

  /* Data accent = SEPTA blue */
  --tfp:        var(--septa-blue);
  --tfp-dark:   var(--septa-blue-d);
  --tfp-pale:   #dfe6f6;

  --ink:        #16191d;
  --ink-soft:   #454b53;
  --ink-muted:  #737a83;

  --surface:    #ffffff;
  --surface-2:  #fdf6e4;
  --rule:       #e3e6ea;
  --rule-firm:  #c9ced5;

  --sans:  "Libre Franklin", system-ui, -apple-system, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --wide:  1120px;
  --page:  920px;
  --prose: 680px;
}

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

/* Components that set their own `display` outrank the UA rule for [hidden]. */
[hidden] { display: none !important; }

/* <figure> carries a 40px browser default margin, which indents the testimonial
   cards and the billing diagram out of alignment with everything around them. */
figure { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Every figure sitewide uses tabular numerals so digits line up in columns and
   bars and never re-flow between values. */
.tnum, table, .stat-value, .bar-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: var(--tfp-dark); }

.wrap  { max-width: var(--wide);  margin: 0 auto; padding: 0 24px; }
.page  { max-width: var(--page);  margin: 0 auto; padding: 0 24px; }
.prose { max-width: var(--prose); margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px; font-weight: 600;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(140%) blur(8px);
  /* A hairline only. The card's own navy piping starts immediately below, and
     a second heavy rule here reads as a doubled border. */
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: var(--wide); margin: 0 auto; padding: 0 24px;
  height: 62px; display: flex; align-items: center; justify-content: space-between;
}
.nav-brand {
  font-family: var(--sans); font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
  display: flex; align-items: baseline; gap: 9px;
}
.nav-brand .brand-mark {
  display: inline-block; width: 22px; height: 14px; border-radius: 3px;
  background: var(--card); border: 1.5px solid var(--septa-blue);
  flex: none; transform: translateY(1px);
}
.nav-brand .brand-sub {
  font-weight: 400; color: var(--ink-muted); font-size: 13px;
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; padding: 8px 12px; border-radius: 6px;
  transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--surface-2); color: var(--ink); }
.nav-links a[aria-current="page"] {
  color: var(--septa-blue-d); font-weight: 700; background: var(--card);
}
.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: 6px; padding: 7px 9px; cursor: pointer; color: var(--ink);
}
@media (max-width: 820px) {
  .nav-links {
    display: none; position: absolute; top: 62px; left: 0; right: 0; z-index: 20;
    background: #fff; border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; gap: 0; padding: 6px 12px 12px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px; border-radius: 0; border-bottom: 1px solid var(--rule); }
  .nav-toggle { display: block; }
  .nav-brand .brand-sub { display: none; }
}



/* ----------------------------------------------------- yellow accent band --
   The hero and the section tints borrow the SEPTA Student Fare Card's palette:
   amber ground, heavy blue display type, one red rule. Red is decorative only —
   it never colors data, and never marks the billing gap (site plan §3c).
   -------------------------------------------------------------------------- */
/* The card's lanyard slot, sitting high in the amber band. */
.card-slot {
  width: 124px; height: 24px;
  background: var(--surface);
  border: 3px solid var(--septa-blue);
  border-radius: 8px;
  margin: 0 auto 34px;
}

/* Navy piping: the card's outline, rounded, running down both sides. */
.card-face {
  background: var(--card);
  border: 3px solid var(--septa-blue);
  border-radius: 24px;
  margin: 14px 14px 0;
  padding: 10px 0 34px;
}
.card-face > .wrap { padding: 0 26px; }
.card-face .eyebrow { color: var(--septa-blue-d); }
.card-face .eyebrow::after { background: rgba(27, 66, 152, .3); }
.card-face h1.hero-title { color: var(--septa-blue); }
.card-face .hero-sub { color: #3a3524; }

.card-strip {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px;
}
.card-lockup {
  font-weight: 800; font-size: 19px; letter-spacing: -0.02em; line-height: 1.05;
  color: var(--septa-blue);
}
.card-lockup span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--septa-blue-d); opacity: .78; margin-top: 5px; }
.card-serial { text-align: right; }
.card-serial b {
  display: block; font-weight: 800; font-size: clamp(1.4rem, 3.2vw, 2rem);
  letter-spacing: -0.02em; color: var(--septa-blue); line-height: 1;
}
.card-serial span { display: block; font-size: 12.5px; font-weight: 600; color: var(--septa-blue-d); margin-top: 6px; line-height: 1.45; }

/* The card's single red rule. */
.card-rule { height: 3px; background: var(--septa-red); border: 0; margin: 32px 0 18px; border-radius: 2px; }

.card-footline {
  font-weight: 700; font-size: clamp(.92rem, 1.7vw, 1.05rem); color: var(--septa-blue);
  letter-spacing: -0.005em; margin: 0;
}
.card-footline em { font-style: normal; color: var(--septa-red); }

.card-face .stats { border-top-color: var(--septa-blue); }
.card-face .stat { border-right-color: rgba(27, 66, 152, .28); }
.card-face .stat-value { color: var(--septa-blue); }
.card-face .stat-label { color: var(--septa-blue-d); }
@media (max-width: 760px) {
  .card-face .stat { border-bottom-color: rgba(27, 66, 152, .28); }
}

/* -------------------------------------------------------------------- hero */
.hero { padding: 68px 0 8px; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tfp-dark); margin: 0 0 20px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--rule); max-width: 180px;
}
h1.hero-title {
  font-family: var(--sans); font-weight: 800; letter-spacing: -0.028em;
  font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.08;
  margin: 0; max-width: 21ch; color: var(--ink);
}
.hero-sub {
  font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.55; color: var(--ink-soft); margin: 24px 0 0; max-width: 58ch;
}

/* ------------------------------------------------------------- stat blocks */
/* Pew-style: the number does the work. No card, no fill — a rule and a label. */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 52px 0 0; border-top: 2px solid var(--ink);
}
/* Each column keeps a gutter on both sides of its divider, so a label never
   runs up against the rule between it and its neighbour. */
.stat { padding: 24px 34px 8px 0; border-right: 1px solid var(--rule); }
.stat + .stat { padding-left: 34px; }
.stat:last-child { border-right: none; padding-right: 0; }
.stat-value {
  font-weight: 800; font-size: clamp(2.1rem, 4.4vw, 3rem);
  letter-spacing: -0.035em; line-height: 1; color: var(--tfp); display: block;
}
.stat-label {
  margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft);
  max-width: 30ch; text-wrap: pretty;
}
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr; }
  .stat,
  .stat + .stat {
    border-right: none; border-bottom: 1px solid var(--rule);
    padding: 20px 0 22px;
  }
  .stat:last-child { border-bottom: none; padding-bottom: 4px; }
}

/* ----------------------------------------------------------------- section */
.section { padding: 60px 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section.tint { background: var(--surface-2); border-top: 1px solid var(--card-deep); border-bottom: 1px solid var(--card-deep); }

h2 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.022em;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.18; margin: 0 0 8px; color: var(--ink);
}
h3 {
  font-family: var(--sans); font-weight: 700; font-size: 1.08rem;
  letter-spacing: -0.008em; margin: 30px 0 8px; color: var(--ink);
}
.section-intro {
  font-family: var(--serif); font-size: 1.09rem; line-height: 1.68;
  color: var(--ink-soft); margin: 14px 0 0; max-width: 66ch;
}
.kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 14px;
}

/* Long-form editorial copy. */
.copy { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.72; color: var(--ink-soft); }
.copy p { margin: 0 0 1.15rem; max-width: 68ch; }
.copy p:last-child { margin-bottom: 0; }
.copy strong { color: var(--ink); font-weight: 600; }
.copy ul { margin: 0 0 1.15rem; padding-left: 1.15rem; max-width: 68ch; }
.copy li { margin-bottom: .5rem; }

/* ------------------------------------------------------------ testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 34px; }
.quote { border-top: 3px solid var(--septa-red); padding-top: 20px; }
.quote blockquote {
  margin: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.62; color: var(--ink);
}
.quote cite {
  display: block; margin-top: 14px; font-family: var(--sans); font-style: normal;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.quote cite span { display: block; font-weight: 400; color: var(--ink-muted); margin-top: 2px; }
@media (max-width: 820px) { .quotes { grid-template-columns: 1fr; gap: 22px; } }

/* ------------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; margin-top: 26px; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
caption {
  caption-side: top; text-align: left; font-size: 13.5px; color: var(--ink-muted);
  padding-bottom: 12px; line-height: 1.5;
}
thead th {
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-muted);
  padding: 0 14px 9px 0; border-bottom: 2px solid var(--ink); vertical-align: bottom;
}
thead th.num, td.num { text-align: right; padding-right: 0; }
tbody td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
tbody tr:hover { background: var(--surface-2); }
tbody tr.is-emphasis td { background: #fdf0cf; }
tbody tr.is-emphasis:hover td { background: #fbe8b4; }
tbody tr.is-total td { font-weight: 700; color: var(--ink); border-bottom: none; border-top: 2px solid var(--ink); }
td.label { font-weight: 500; color: var(--ink); }
td .sub { display: block; font-size: 13px; color: var(--ink-muted); font-weight: 400; margin-top: 3px; }
.table-hint { display: none; }
.table-note { font-size: 13.5px; color: var(--ink-muted); margin: 14px 0 0; line-height: 1.55; max-width: 72ch; }

/* --------------------------------------------------------------- bar table */
/* Bars live inside the table rather than as a separate chart, so the figure and
   its numbers are one object — no legend lookup, no duplicated values. */
.bar-cell { width: 46%; min-width: 180px; padding-right: 0 !important; }
.bar-track { display: flex; align-items: center; gap: 10px; }
/* The bar is sized against this slot rather than the whole cell, so a full-width
   bar can never push its value label into the next column. */
.bar-slot { flex: 1 1 0%; min-width: 0; }
.bar {
  height: 15px; background: var(--rule-firm); border-radius: 0 3px 3px 0; min-width: 2px;
}
tr.is-emphasis .bar { background: var(--tfp); }
.bar-value { font-size: 14px; font-weight: 600; color: var(--ink); flex: none; }

/* ------------------------------------------------------------ scenario bars */
.scenario { border-top: 1px solid var(--rule); padding: 18px 0; }
.scenario:first-of-type { border-top: 2px solid var(--ink); }
.scenario-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.scenario-name { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.scenario-name span { display: block; font-weight: 400; font-size: 13.5px; color: var(--ink-muted); margin-top: 3px; max-width: 72ch; }
.scenario-total { font-weight: 700; font-size: 15.5px; color: var(--ink); }
.scenario-total span { font-weight: 400; color: var(--ink-muted); font-size: 13px; }
.stack { display: flex; gap: 2px; margin-top: 12px; height: 20px; align-items: stretch; }
.stack-base { background: var(--rule-firm); border-radius: 2px 0 0 2px; }
.stack-new  { background: var(--tfp); border-radius: 0 2px 2px 0; position: relative; }
.stack-new:only-child, .stack-base:only-child { border-radius: 2px; }
.stack-labels { display: flex; gap: 24px; margin-top: 10px; font-size: 13px; color: var(--ink-muted); }
.stack-labels b { color: var(--ink); font-weight: 600; }
.legend { display: flex; gap: 20px; margin: 0 0 22px; font-size: 13.5px; color: var(--ink-soft); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; }
.swatch { width: 13px; height: 13px; border-radius: 2px; flex: none; }
.swatch-base { background: var(--rule-firm); }
.swatch-new  { background: var(--tfp); }

/* ------------------------------------------------------------------ callout */
.callout {
  border-left: 4px solid var(--septa-red); background: var(--surface-2);
  padding: 20px 24px; margin: 30px 0; font-family: var(--serif);
  font-size: 1.02rem; line-height: 1.65; color: var(--ink-soft);
}
.callout p { margin: 0 0 .8rem; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }
.callout .callout-title {
  font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--ink);
  margin: 0 0 8px; letter-spacing: -0.005em;
}

/* --------------------------------------------------------------- solution */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 34px; }
.step { border-top: 2px solid var(--ink); padding-top: 18px; }
.step-num {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--tfp-dark);
  text-transform: uppercase; margin-bottom: 10px;
}
.step h3 { margin: 0 0 8px; font-size: 1.02rem; }
.step p { margin: 0; font-family: var(--serif); font-size: .98rem; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: 24px; } }

/* -------------------------------------------------------------- momentum */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 34px; }
.card { border-top: 1px solid var(--rule-firm); padding-top: 18px; }
.card h3 { margin: 0 0 8px; font-size: 1.02rem; }
.card p { margin: 0; font-family: var(--serif); font-size: .98rem; line-height: 1.62; color: var(--ink-soft); }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; gap: 24px; } }

/* ------------------------------------------------------- billing diagram */
.diagram { margin: 32px 0 0; }
/* The flow needs a minimum width to stay legible; below that it scrolls inside
   its own container rather than shrinking the labels into illegibility. */
.diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.diagram svg { width: 100%; min-width: 620px; height: auto; display: block; }
.diagram-hint { display: none; font-size: 12.5px; color: var(--ink-muted); margin: 8px 0 0; }
@media (max-width: 700px) { .diagram-hint { display: block; } }
.diagram figcaption { font-size: 13.5px; color: var(--ink-muted); margin-top: 14px; line-height: 1.55; max-width: 70ch; }

/* ------------------------------------------------------------- endorsers */
.supporters h2 { font-size: clamp(1.75rem, 3.6vw, 2.4rem); }
.supporters .section-intro { margin-bottom: 30px; }

/* Logo wall: white tiles on the amber tint. Logos are sized by area (width/height
   set in the markup) so wide wordmarks and square badges carry similar weight.
   The two campaign leads get double-width tiles; dense flow backfills gaps. */
.logo-wall {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  grid-auto-flow: row dense; gap: 10px;
}
.logo-wall .logo {
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  height: 104px; padding: 12px 8px;
  display: flex; align-items: center; justify-content: center;
}
.logo-wall .logo.lead { grid-column: span 2; }
.logo-wall img { max-width: 100%; height: auto; object-fit: contain; }

.supporter-list-h {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin: 34px 0 12px;
}
.supporter-list {
  list-style: none; margin: 0; padding: 0;
  columns: 3 240px; column-gap: 32px;
  font-size: 14.5px; line-height: 1.45; color: var(--ink);
}
.supporter-list li {
  break-inside: avoid; padding: 6px 0; border-bottom: 1px solid rgba(224,174,53,.35);
}

/* ------------------------------------------------------------------ forms */
.form-embed { margin-top: 26px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.form-embed iframe { display: block; width: 100%; border: 0; }

.tool { border: 1px solid var(--rule-firm); border-radius: 8px; padding: 26px; margin-top: 26px; background: #fff; }
.tool label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 7px; }
.tool input[type="text"], .tool textarea, .tool select {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  border: 1px solid var(--rule-firm); border-radius: 6px; padding: 11px 13px;
  background: #fff; line-height: 1.55;
}
.tool textarea { min-height: 260px; resize: vertical; }
.tool input:focus, .tool textarea:focus, .tool select:focus { outline: 2px solid var(--tfp); outline-offset: -1px; border-color: var(--tfp); }
.tool .field { margin-bottom: 18px; }
.tool-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.tool-meta { font-size: 13px; color: var(--ink-muted); margin-top: 12px; line-height: 1.5; }
.tool-meta.warn { color: #8a5a00; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans);
  font-size: 14.5px; font-weight: 600; padding: 11px 20px; border-radius: 6px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s;
}
.btn-primary { background: var(--tfp); color: #fff; }
.btn-primary:hover { background: var(--tfp-dark); }
.btn-primary[aria-disabled="true"] { background: var(--rule-firm); color: #fff; cursor: not-allowed; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--rule-firm); }
.btn-secondary:hover { border-color: var(--ink-muted); background: var(--surface-2); }

/* ---------------------------------------------------------------- actions */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* --------------------------------------------------------------- details */
details.method { border-top: 1px solid var(--rule); margin-top: 34px; padding-top: 18px; }
details.method summary {
  cursor: pointer; font-weight: 600; font-size: 15px; color: var(--tfp-dark); list-style: none;
  display: flex; align-items: center; gap: 8px;
}
details.method summary::-webkit-details-marker { display: none; }
details.method summary::before { content: "+"; font-weight: 700; font-size: 16px; }
details.method[open] summary::before { content: "\2212"; }
details.method .copy { margin-top: 16px; }

/* ------------------------------------------------------------------- faq */
.faq-item { border-top: 1px solid var(--rule); padding: 26px 0; }
.faq-item:first-of-type { border-top: 2px solid var(--ink); }
.faq-item h3 { margin: 0 0 10px; font-size: 1.12rem; letter-spacing: -0.012em; }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--ink); color: #fff; margin-top: 0; padding: 52px 0 34px; }
.footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer h4 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8f979f; margin: 0 0 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; }
.footer li a { font-size: 14.5px; text-decoration: none; color: #dfe3e7; }
.footer li a:hover { color: #fff; text-decoration: underline; }
.footer-about { font-size: 14.5px; line-height: 1.62; color: #b9c0c7; max-width: 42ch; }
.footer-bottom { border-top: 1px solid #333a41; margin-top: 36px; padding-top: 20px; font-size: 13px; color: #8f979f; line-height: 1.6; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } }

/* --------------------------------------------------------------- utility */
.lede { font-family: var(--serif); font-size: 1.15rem; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; margin: 16px 0 0; }
.pending { color: var(--ink-muted); font-style: italic; font-size: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media print {
  /* Page furniture that makes no sense in a printed document: navigation, the
     footer, interactive widgets, scroll hints, and a "Download as PDF" button
     inside the PDF itself. */
  .nav, .footer, .tool, .form-embed, .actions, .skip,
  .card-slot, .table-hint, .diagram-hint, .rate-tool, .reel-layout { display: none !important; }

  body { font-size: 10.5pt; background: #fff; }

  /* The amber card face is a screen device; on paper it is a solid ink block. */
  .card-face {
    background: #fff !important; border: 0 !important; border-radius: 0 !important;
    margin: 0 !important; padding: 0 0 18pt !important;
    border-bottom: 2pt solid var(--septa-blue) !important;
  }
  .card-face > .wrap { padding: 0 !important; }
  .wrap, .page, .prose { max-width: none; padding: 0; }

  h1.hero-title { font-size: 26pt; }
  h2 { font-size: 15pt; margin-top: 20pt; }
  h3 { font-size: 12pt; }

  /* Keep figures and their captions together, and never split a table row. */
  h2, h3 { break-after: avoid; page-break-after: avoid; }
  table, .callout, .diagram, figure { break-inside: avoid; page-break-inside: avoid; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  .table-wrap { overflow: visible; background: none !important; }
  table { min-width: 0; font-size: 9pt; }
  .diagram svg { min-width: 0; }
  .diagram-scroll { overflow: visible; }

  /* nav.js opens every <details> before printing so the sources and methodology
     land in the PDF; this just tidies how they look on paper. */
  details.method { border-top: 1px solid #ccc; }
  details.method summary { font-weight: 700; color: var(--ink); list-style: none; }
  details.method summary::before { content: none; }

  a { text-decoration: none; color: inherit; }
}


/* ============================================================================
   MOBILE PASS
   The site is read on phones by students and on desktops by Council staff, so
   the phone layout is designed rather than inherited.
   ========================================================================== */
@media (max-width: 700px) {
  body { font-size: 16px; }

  .wrap, .page, .prose { padding: 0 18px; }

  /* Tighter vertical rhythm — the desktop 60px gutters read as dead space. */
  .section { padding: 38px 0; }
  .card-face { padding: 8px 0 32px; margin: 10px 10px 0; border-radius: 18px; border-width: 2.5px; }
  .card-face > .wrap { padding: 0 16px; }
  .card-slot { width: 96px; height: 20px; border-width: 2.5px; margin-bottom: 26px; }
  .hero { padding: 30px 0 6px; }

  /* Hero: the card's serial block stacks under the lockup, left-aligned, and
     stops competing with the headline for the top-right corner. */
  .card-strip { flex-direction: column; gap: 16px; margin-bottom: 22px; }
  .card-serial { text-align: left; }
  .card-serial b { font-size: 1.6rem; }
  .card-serial span { margin-top: 4px; }
  .card-serial span br { display: none; }

  h1.hero-title { max-width: none; }
  .hero-sub { margin-top: 18px; }
  .card-rule { margin: 24px 0 14px; }

  /* Stats: the third one no longer needs a bottom rule against the band edge. */
  .stats { margin-top: 30px; }
  .stat-label { max-width: none; }

  h2 { font-size: 1.4rem; }
  h3 { margin-top: 24px; }
  .section-intro, .lede { font-size: 1.02rem; }
  .copy { font-size: 1.02rem; }
  .copy p, .copy ul { max-width: none; }

  .quotes { margin-top: 26px; }
  .steps, .cards { margin-top: 26px; }

  /* Tables scroll; the hint tells the reader they can, and the edge fade shows
     there is more to the right. */
  .table-wrap {
    margin-top: 20px;
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 28px 100% no-repeat,
      linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right / 28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(22,25,29,.14), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(22,25,29,.14), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .section.tint .table-wrap {
    background:
      linear-gradient(to right, var(--surface-2) 30%, rgba(253,246,228,0)) left / 28px 100% no-repeat,
      linear-gradient(to left,  var(--surface-2) 30%, rgba(253,246,228,0)) right / 28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(22,25,29,.14), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(22,25,29,.14), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  table { font-size: 14px; min-width: 520px; }
  thead th { font-size: 10.5px; padding-right: 12px; }
  tbody td { padding: 11px 12px 11px 0; }
  td .sub { font-size: 12px; }
  .bar-cell { min-width: 150px; }
  .bar-value { font-size: 13px; }
  .table-hint { display: block; font-size: 12.5px; color: var(--ink-muted); margin: 8px 0 0; }

  /* Scenario bars: the name and the total stop sharing a line. */
  .scenario { padding: 16px 0; }
  .scenario-head { gap: 4px; }
  .scenario-name { font-size: 15px; }
  .scenario-name span { max-width: none; }
  .scenario-total { font-size: 17px; }
  .stack { height: 18px; }
  .legend { gap: 10px 18px; margin-bottom: 18px; }

  .callout { padding: 16px 18px; margin: 22px 0; }

  .logo-wall { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .logo-wall .logo { height: 84px; padding: 10px; }
  .logo-wall img { max-height: 58px; width: auto; }
  .supporter-list { font-size: 14px; }

  /* Actions become full-width tap targets rather than inline chips. */
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { justify-content: center; width: 100%; }
  .tool { padding: 18px; }
  .tool textarea { min-height: 300px; font-size: 16px; } /* 16px stops iOS zooming on focus */
  .tool input[type="text"], .tool select { font-size: 16px; }
  .tool-actions { flex-direction: column; align-items: stretch; }
  .tool-actions .btn { justify-content: center; width: 100%; }

  .form-embed iframe { height: 1400px; }

  .faq-item { padding: 20px 0; }
  .faq-item h3 { font-size: 1.05rem; margin-top: 0; }

  .footer { padding: 38px 0 26px; }
  .footer-bottom { margin-top: 26px; font-size: 12.5px; }
}

/* Small phones. */
@media (max-width: 400px) {
  .wrap, .page, .prose { padding: 0 15px; }
  h1.hero-title { font-size: 1.78rem; }
  .stat-value { font-size: 2rem; }
}

/* Nothing on the page may push the body sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ------------------------------------------------------- take-up control -- */
.rate-tool {
  border: 1px solid var(--rule-firm); border-radius: 8px;
  padding: 20px 22px; margin: 0 0 26px; background: var(--surface-2);
}
.rate-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.rate-tool label {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-muted);
}
/* Says what the number is, so the explanatory note below isn't load-bearing. */
.rate-gloss {
  display: block; margin-top: 4px; font-weight: 400; font-size: 12.5px;
  letter-spacing: 0; text-transform: none; color: var(--ink-muted);
}
.rate-value {
  font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--septa-blue);
}
.rate-tool input[type="range"] {
  width: 100%; margin: 14px 0 10px; accent-color: var(--septa-blue);
  height: 24px; cursor: pointer;
}
.rate-row + .rate-row {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule);
}
.rate-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule);
}
.rate-hint { font-size: 13px; color: var(--ink-muted); }
.rate-badge { margin: 2px 0 0; }
.rate-badge { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.rate-badge.adjusted { color: #8a5a00; }
.btn-sm { padding: 7px 13px; font-size: 13px; }
.rate-note {
  font-size: 13.5px; line-height: 1.55; color: var(--ink-muted);
  margin: 14px 0 0; max-width: 76ch;
}
.rate-note strong { color: var(--ink-soft); }
@media (max-width: 700px) {
  .rate-tool { padding: 16px; }
  .rate-head { flex-direction: column; gap: 2px; }
  .rate-value { font-size: 1.35rem; }
  .rate-foot { align-items: flex-start; }
  .rate-tool input[type="range"] { height: 32px; }
}

/* ---------------------------------------------------------- the menu ----- */
/* Good / Better / Best is a path, so each rung is a card that states its own
   price, both readings of the contested premium, and what it would take. */
.scenario.is-reference { opacity: .82; }

.scenario.tier {
  position: relative;
  border: 1px solid var(--rule-firm);
  border-left: 4px solid var(--septa-blue);
  border-radius: 8px;
  padding: 20px 22px 18px;
  margin-top: 14px;
  background: #fff;
}
.scenario.tier:first-of-type { border-top: 1px solid var(--rule-firm); }
.tier-good   { border-left-color: var(--rule-firm); }
.tier-better { border-left-color: var(--septa-blue); }
.tier-best   { border-left-color: var(--septa-red); }

.tier-label {
  font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 10px;
}
.tier-better .tier-label { color: var(--septa-blue); }
.tier-best   .tier-label { color: var(--septa-red); }

.tier-range {
  margin: 12px 0 0; font-size: 13px; color: var(--ink-muted);
  padding-top: 12px; border-top: 1px dashed var(--rule);
}
.tier-range b { color: var(--ink); font-weight: 700; }
.tier-note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-muted); }

.scenario.is-aside {
  border: 1px dashed var(--rule-firm); border-radius: 8px;
  padding: 18px 22px 16px; margin-top: 26px; background: var(--surface-2);
}
.scenario.is-aside .scenario-name { color: var(--ink-soft); }

@media (max-width: 700px) {
  .scenario.tier, .scenario.is-aside { padding: 16px 14px 14px; }
  .tier-range { font-size: 12.5px; }
}

/* ------------------------------------------------------------- the reel --- */
/* Instagram's own embed endpoint, framed directly — no third-party script, so
   the page keeps its zero-dependency footprint. The frame needs a fixed height
   because without Instagram's resize script it cannot size itself. */
.reel-layout {
  display: grid; grid-template-columns: 1fr 380px; gap: 52px; align-items: center;
}
.reel-text h2 { margin-bottom: 6px; }
.reel-embed { max-width: 380px; }
.reel-embed iframe {
  width: 100%; height: 640px; display: block;
  border: 1px solid var(--rule-firm); border-radius: 8px; background: #fff;
}
.reel-embed figcaption {
  font-size: 13px; line-height: 1.5; color: var(--ink-muted); margin-top: 12px;
}
@media (max-width: 860px) {
  .reel-layout { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .reel-embed { max-width: none; }
  .reel-embed iframe { height: 600px; }
}