/*
 * Design tokens from the Routific Website Figma file (variables on node 7166:92349).
 * Code components render inside Shadow DOM, so tokens are declared on :host as well as :root
 * (:root covers the local preview and Webflow's own page; :host covers the shadow tree).
 */
:host,
:host {
  /* Brand */
  --rt-indigo-100: #374cd2;
  --rt-indigo-200: #667afa;
  --rt-yellow-200: #ffad0a;
  --rt-yellow-border: #b97b01;
  --rt-turquoise: #45c4d7;
  --rt-primary-500: #326bfc;
  --rt-primary-600: #1750e3;
  --rt-hero-blue: #1f36a7;
  --rt-hero-lilac: #eceefb;

  /* Text */
  --rt-text-primary: #282828;
  --rt-text-secondary: #676d7e;
  --rt-text-tertiary: #9da1af;

  /* Route colours */
  --rt-route-violet: #7547bf;
  --rt-route-pink: #ff85a9;
  --rt-route-sky: #269ed1;
  --rt-route-lilac: #a770db;

  /* Type — Proxima Nova is expected to be loaded by the Webflow site (Adobe Fonts);
     Plus Jakarta Sans and Figtree are loaded from Google Fonts by useDocumentFonts(). */
  --rt-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --rt-font-heading: "Figtree", system-ui, sans-serif;
  --rt-font-body: "proxima-nova", "Proxima Nova", "Figtree", system-ui, sans-serif;
  --rt-font-ui: "SF Pro Text", -apple-system, "Inter", system-ui, sans-serif;

  /* Radii */
  --rt-radius-md: 8px;
  --rt-radius-lg: 16px;

  /* Vector map (Hero/showcase/MapBase.tsx): Mapbox-light look of the current Routific UI */
  --map-land: #edeff3;
  --map-street: #fcfdfe;
  --map-park: #d3e9d1;
  --map-water: #b3caf3;
  --map-industrial: #f2e4c6;
  --map-highway: #aab3c7;
  --map-highway-edge: #fcfdfe;
}

/* Route quality benchmark page (not in Figma). Light only, like the rest of the site. */
/* Layout: one 1120 container, one left edge. Text sits in a 720 column on that edge; quotes and key
   numbers ride in a 352 right rail (desktop); wide figures and Table 6 span the full 1120. */
.rt-rb {
  --bg: #fbfbfd;
  --paper: #ffffff;
  --ink: #171b2c;
  --ink-2: #3a4058;
  --muted: #646b84;
  --rule: #e2e5ef;
  --indigo: #374cd2;
  --indigo-soft: #eef0fd;
  --yellow: #ffad0a;
  --code-bg: #10153f;
  --code-fg: #c9cff7;
  --code-hi: #7fe3a8;
  --map-bg: #ffffff;
  --callout-bg: #171b2c;
  --callout-fg: #ffffff;
  --font-display: "Plus Jakarta Sans", "Figtree", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --s-section: 96px;
  --s-block: 40px;
  --s-para: 16px;
  --radius: 16px;
  --pad: 24px;
  --text: 720px;
  --rail: 352px;
}
.rt-rb { background: var(--bg); color: var(--ink); font: 17px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; padding-inline: 20px; padding-block: 0 var(--s-section); }
.rt-rb *, .rt-rb *::before, .rt-rb *::after { box-sizing: border-box; }
.rt-rb-wrap { max-width: 1120px; margin-inline: auto; }
.rt-rb h1, .rt-rb h2, .rt-rb h3 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; margin: 0; letter-spacing: -0.012em; }
.rt-rb h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.6rem); line-height: 1.05; font-weight: 800; }
.rt-rb h2 { font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.2rem); line-height: 1.2; }
.rt-rb h3 { font-size: 1.25rem; line-height: 1.3; }
.rt-rb p { margin: 0; }
.rt-rb a { color: var(--indigo); text-underline-offset: 3px; }
.rt-rb-label { font: 600 12px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rt-rb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/1 var(--font-body); padding: 13px 20px; border-radius: 12px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; background: transparent; }
.rt-rb-btn-yellow { background: var(--yellow); border-color: #b97b01; color: #171b2c; }
.rt-rb-btn-line { border-color: var(--indigo); color: var(--indigo); }
.rt-rb-btn-line[aria-pressed="true"] { background: var(--indigo); color: var(--paper); }
.rt-rb button:focus-visible, .rt-rb a:focus-visible { outline: 2px solid #326bfc; outline-offset: 3px; }

.rt-rb-s { margin-top: var(--s-section); display: grid; grid-template-columns: minmax(0, var(--text)) minmax(0, var(--rail)); column-gap: 48px; justify-content: start; align-items: start; }
.rt-rb-s.is-tight { margin-top: var(--s-block); }
.rt-rb-main { display: flex; flex-direction: column; gap: var(--s-para); min-width: 0; }
.rt-rb-main > figure, .rt-rb-main > .rt-rb-tblock, .rt-rb-main > .rt-rb-measures, .rt-rb-main > .rt-rb-callout { margin-block: calc(var(--s-block) - var(--s-para)); }
.rt-rb-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.rt-rb-main ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.rt-rb-main > p { color: var(--ink-2); }

.rt-rb-hero { padding-block: 56px 48px; border-bottom: 1px solid var(--rule); }
/* MIT logo (brand.mit.edu): the M of the logo is 640/769 of the lock-up's height (640/720 of the logo's);
   that width is the clear space kept free of text and rules on every side. */
.rt-rb-partner { --mit-h: 64px; --mit-m: calc(var(--mit-h) * 0.833); display: flex; align-items: center; gap: var(--mit-m); flex-wrap: wrap; }
.rt-rb-logo { display: block; height: var(--mit-h); width: auto; flex: none; }
.rt-rb-logo.is-custom { max-width: 320px; object-fit: contain; }
.rt-rb-partner p { font: 700 19px/1.35 var(--font-display); color: var(--ink); padding-left: 20px; border-left: 1px solid var(--rule); }
.rt-rb-partner p span { display: block; font: 400 16px/1.4 var(--font-serif); color: var(--muted); }
.rt-rb-hero-grid { margin-top: 56px; /* ≥ the MIT logo's clear space */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
.rt-rb-hero-left { display: flex; flex-direction: column; min-width: 0; }
.rt-rb-hero .rt-rb-sub { margin-top: 18px; font: 400 1.3rem/1.5 var(--font-serif); color: var(--ink-2); max-width: 46ch; }
.rt-rb-facts { margin-top: auto; padding-top: 32px; display: flex; flex-wrap: wrap; gap: 16px 28px; }
.rt-rb-facts div { min-width: 0; border-top: 2px solid var(--ink); padding-top: 10px; }
.rt-rb-facts b { display: block; font: 700 1.4rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.rt-rb-facts span { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.rt-rb-run { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--pad); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rt-rb-run h3 { font-size: 1.15rem; }
.rt-rb-code { background: var(--code-bg); color: var(--code-fg); border: 1px solid var(--rule); border-radius: 12px; padding: 40px 16px 14px; font: 400 0.74rem/1.8 var(--font-mono); overflow-x: auto; white-space: pre; position: relative; }
.rt-rb-code b { color: var(--code-hi); font-weight: 400; }
.rt-rb-code .c { color: #7f88c4; }
.rt-rb-copy { position: absolute; top: 10px; right: 10px; font: 600 11px/1 var(--font-mono); padding: 6px 8px; border-radius: 6px; border: 1px solid #2d3577; background: #1a2058; color: #c9cff7; cursor: pointer; }
.rt-rb-run .rt-rb-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.rt-rb-run .rt-rb-api { border-top: 1px solid var(--rule); padding-top: 14px; font-size: 0.92rem; color: var(--ink-2); }
.rt-rb-run .rt-rb-api a { font-weight: 700; }

.rt-rb figure { margin: 0; }
.rt-rb-fig { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--pad); }
.rt-rb figure.rt-rb-wrap { margin: var(--s-block) auto 0; }
.rt-rb figcaption, .rt-rb .rt-rb-tcap { font: 400 0.98rem/1.55 var(--font-serif); color: var(--ink-2); max-width: 75ch; }
.rt-rb figcaption { margin-top: 16px; }
.rt-rb-tcap { margin-bottom: 10px; }
.rt-rb figcaption b, .rt-rb .rt-rb-tcap b { font: 700 0.95rem/1 var(--font-body); color: var(--ink); }
.rt-rb-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rt-rb-plan { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--map-bg); min-width: 0; }
.rt-rb-plan-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.rt-rb-plan-head h4 { margin: 0; font: 700 1rem/1 var(--font-display); color: var(--ink); }
.rt-rb-plan-head span { font: 500 0.8rem/1 var(--font-mono); color: var(--muted); }
.rt-rb-map { display: block; width: 100%; height: auto; }
.rt-rb-fig-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; align-items: center; margin-bottom: 16px; }
.rt-rb-vote { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.rt-rb-vote p { font: 700 1.1rem/1.2 var(--font-display); margin-right: 8px; }
.rt-rb-reveal { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rt-rb-reveal div { border-radius: 12px; padding: 14px 16px; background: var(--indigo-soft); min-width: 0; }
.rt-rb-reveal b { display: block; font: 700 1rem/1.3 var(--font-display); color: var(--ink); }
.rt-rb-reveal span { font-size: 0.93rem; color: var(--ink-2); }
.rt-rb-reveal .rt-rb-revstat { display: flex; gap: 18px; margin-top: 8px; font: 500 0.85rem/1.3 var(--font-mono); color: var(--ink-2); }
.rt-rb-reveal .rt-rb-revstat em { display: block; font: 700 1.2rem/1.1 var(--font-display); font-style: normal; color: var(--ink); }

.rt-rb-quote { margin: 0; border-left: 3px solid var(--yellow); padding: 4px 0 4px 20px; }
.rt-rb-quote p { font: 400 1.3rem/1.45 var(--font-serif); color: var(--ink); }
.rt-rb-quote cite { display: block; margin-top: 10px; font: 600 0.9rem/1.3 var(--font-body); font-style: normal; color: var(--muted); }
.rt-rb-aside { background: var(--indigo-soft); border-radius: var(--radius); padding: var(--pad); }
.rt-rb-aside p { font: italic 400 1.05rem/1.6 var(--font-serif); color: var(--ink); }
.rt-rb-aside cite { display: block; margin-top: 10px; font: 600 0.88rem/1.3 var(--font-body); font-style: normal; color: var(--muted); }
.rt-rb-measures { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rt-rb-measures li { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0 18px 16px; min-width: 0; overflow: hidden; }
.rt-rb-measure-ill { display: block; width: calc(100% + 36px); height: auto; margin: 0 -18px 14px; background: var(--map-bg); border-bottom: 1px solid var(--rule); }
.rt-rb-measures .rt-rb-label { font-size: 11px; }
.rt-rb-measures b { display: block; margin-top: 6px; font: 700 1.1rem/1.25 var(--font-display); color: var(--ink); }
.rt-rb-measures p { margin-top: 6px; font: 400 0.9rem/1.45 var(--font-body); color: var(--muted); }
.rt-rb-measure-link { margin-top: auto; padding-top: 14px; font: 600 0.85rem/1 var(--font-body); text-decoration: none; }
.rt-rb-measure-link:hover { text-decoration: underline; }

.rt-rb-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rt-rb-tabs .rt-rb-label { margin-right: 6px; }
.rt-rb-tab { font: 600 14px/1 var(--font-body); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.rt-rb-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rt-rb-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.rt-rb-day { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); cursor: pointer; min-width: 0; }
.rt-rb-day b { font: 700 15px/1.2 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.rt-rb-day span { font: 400 12px/1.3 var(--font-body); color: var(--muted); }
.rt-rb-day[aria-selected="true"] { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); background: var(--indigo-soft); }
@media (max-width: 760px) {
  .rt-rb-days { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .rt-rb-day { flex: none; width: 150px; }
}
.rt-rb-statrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); background: var(--paper); }
.rt-rb-statrow div { padding: 10px 14px; min-width: 0; }
.rt-rb-statrow div + div { border-left: 1px solid var(--rule); }
.rt-rb-statrow b { display: block; font: 700 clamp(0.9rem, 0.6rem + 0.8vw, 1.1rem)/1.2 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-rb-statrow span { font-size: 0.78rem; color: var(--muted); }
.rt-rb-statrow .is-good b { color: var(--indigo); }

.rt-rb-result-head { display: flex; flex-direction: column; gap: 6px; }
.rt-rb-result-head .rt-rb-label { color: var(--indigo); }
.rt-rb-result-head h2 { font-size: 1.75rem; }
.rt-rb-subhead { font-size: 1.25rem; margin-top: 12px; }
.rt-rb-big { font: 800 clamp(2.2rem, 1.8rem + 1.6vw, 3rem)/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; padding-top: 12px; border-top: 2px solid var(--ink); }
.rt-rb-big small { display: block; margin-top: 10px; font: 400 1rem/1.45 var(--font-serif); color: var(--ink-2); }

.rt-rb-tblwrap { overflow-x: auto; }
.rt-rb table { width: 100%; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.rt-rb table.is-narrow { width: auto; min-width: min(100%, 460px); }
.rt-rb table.is-narrow td:first-child, .rt-rb table.is-narrow th:first-child { padding-right: 48px; }
.rt-rb th, .rt-rb td { text-align: right; padding: 11px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.rt-rb th:first-child, .rt-rb td:first-child { text-align: left; padding-left: 0; white-space: normal; }
.rt-rb thead th { font: 600 0.75rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1.5px solid var(--ink); }
.rt-rb td.win { font-weight: 700; color: var(--indigo); }
.rt-rb td .rt-rb-wr { display: inline-flex; align-items: center; gap: 8px; }
.rt-rb td .rt-rb-wr i { width: 60px; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; display: inline-block; }
.rt-rb td .rt-rb-wr i::before { content: ""; display: block; height: 100%; width: var(--w); background: var(--indigo); }
.rt-rb td.tie { font: italic 400 0.95rem/1.3 var(--font-serif); color: var(--muted); }
.rt-rb sup { font: 600 0.68rem/1 var(--font-mono); color: var(--indigo); }
.rt-rb-foot { font: 400 0.88rem/1.55 var(--font-serif); color: var(--muted); max-width: 90ch; }
.rt-rb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.rt-rb-two > * { min-width: 0; }
.rt-rb-summary .rt-rb-result-head { margin-bottom: 28px; }
.rt-rb-summary .rt-rb-tcap { margin-bottom: 12px; }
.rt-rb-widetable .rt-rb-foot { margin-top: 14px; }
.rt-rb-callout { background: var(--callout-bg); border-radius: var(--radius); padding: 28px var(--pad); }
.rt-rb-callout p { font: 400 1.35rem/1.45 var(--font-serif); color: var(--callout-fg); }

.rt-rb-band { margin-top: var(--s-section); margin-inline: -20px; padding: 72px 20px; background: var(--paper); border-block: 1px solid var(--rule); }
.rt-rb-band .rt-rb-main { max-width: var(--text); }
.rt-rb-links { display: flex; flex-wrap: wrap; gap: 10px 24px; font: 600 0.98rem/1.3 var(--font-body); }
.rt-rb-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.rt-rb-ph { font: 600 0.72rem/1 var(--font-mono); font-style: normal; color: var(--muted); background: var(--indigo-soft); padding: 3px 6px; border-radius: 4px; }

@media (max-width: 1100px) {
  .rt-rb-s { grid-template-columns: minmax(0, var(--text)); }
  .rt-rb-rail { position: static; margin-top: var(--s-block); }
}
@media (max-width: 900px) {
  .rt-rb-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .rt-rb-reveal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .rt-rb-two, .rt-rb-measures, .rt-rb-pair { grid-template-columns: minmax(0, 1fr); }
  .rt-rb-measure-ill { height: 104px; }
  .rt-rb { --pad: 16px; --s-section: 72px; }
  .rt-rb-partner { --mit-h: 52px; }
  .rt-rb-partner p { padding-left: 0; border-left: 0; }
  .rt-rb table.is-full td:first-child, .rt-rb table.is-full th:first-child { position: sticky; left: 0; min-width: 150px; background: var(--bg); z-index: 1; }
}

.rt-rb-mapbg { fill: var(--map-bg); }
.rt-rb-chart { display: block; width: 100%; height: auto; }
.rt-rb-grid { stroke: var(--rule); }
.rt-rb-tick { font: 12px var(--font-mono); fill: var(--muted); }
.rt-rb-n { font: 11px var(--font-body); fill: var(--muted); }
.rt-rb-end { font: 600 13px var(--font-body); fill: var(--muted); }
.rt-rb-end.is-us { font-weight: 700; fill: var(--indigo); }
.rt-rb-tick.is-hi { fill: var(--ink); font-weight: 600; }
.rt-rb-guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.rt-rb-hit { cursor: pointer; outline: none; }
.rt-rb-hit:focus-visible { stroke: #326bfc; stroke-width: 2; }
.rt-rb-tip rect { fill: var(--paper); stroke: var(--rule); filter: drop-shadow(0 4px 10px rgba(23, 27, 44, 0.12)); }
.rt-rb-tip-h { font: 600 12px var(--font-mono); fill: var(--muted); letter-spacing: 0.04em; }
.rt-rb-tip-t { font: 500 13px var(--font-body); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.rt-rb-tip-t.is-us { font-weight: 700; fill: var(--indigo); }
.rt-rb-ill { font: 600 14px var(--font-body); fill: #646b84; }
.rt-rb-ill.is-hot { font-weight: 700; fill: #c4512b; stroke: #fff; stroke-width: 4px; paint-order: stroke; }
.rt-rb-reveal[hidden] { display: none; }
.rt-rb-map.is-pending { aspect-ratio: 1; background: var(--map-bg); }
.rt-rb { padding-bottom: 0; }
.rt-rb-band { margin-bottom: 0; }
.rt-rb-result-head h2 { scroll-margin-top: 56px; }
/* after the phone rule that makes the first column sticky on the page background */
.rt-rb-summary table.is-full td:first-child, .rt-rb-summary table.is-full th:first-child { background: var(--paper); }