/* Final typographic layer for the marketing pages.
   Every page links this file last, so the roles below win over the two base
   sheets. The scale itself lives in styles.css (:root, --t-* and --measure-*)
   and is documented in DESIGN.md.

   The page has six jobs for type, and each one owns a single step of the ramp:
   display (page title), section (h2), title (card and question headings),
   lede (the one paragraph that opens a block), body (everything you read),
   caption (sentence case mono) and the mono label, which is the only uppercase
   voice. Product mockups drawn in HTML (the departure board, the kiosk
   display, the route and ticket cards, the stop board) keep their own reduced
   sizes: they are pictures of the app, not page text. */

:root {
  --ink: #0a1522;
}

body {
  background-color: var(--ink);
}

.site-footer {
  background-color: #0a1522 !important;
}

/* ---------------------------------------------------------------------------
   1. Display: the page title, and nothing else
   --------------------------------------------------------------------------- */

.hero h1,
.subpage-hero h1,
.subpage-hero--city h1,
.city-page .subpage-hero--city h1,
.legal-hero h1 {
  font-size: var(--t-display);
  font-weight: 900;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}

/* A display line stacked five deep on a phone needs the extra leading that a
   two line headline does not. */
@media (max-width: 640px) {
  .hero h1,
  .subpage-hero h1,
  .subpage-hero--city h1,
  .city-page .subpage-hero--city h1,
  .legal-hero h1 {
    line-height: 1.04;
  }
}

/* ---------------------------------------------------------------------------
   2. Section: the second voice down from the page title
   --------------------------------------------------------------------------- */

.section h2,
.coverage-copy h2,
.screen-product-copy h2,
.download-grid h2,
.faq-intro h2,
.city-page .city-section .faq-intro h2,
.purpose-copy h2,
.inroom-section h2,
.quote-head h2,
.quote-success h3,
.route-copy h2,
.business-grid h2,
.city-page .city-terminus h2,
.city-terminus h2,
.feature-title {
  font-size: var(--t-section);
  font-weight: 800;
  letter-spacing: var(--tr-section);
  line-height: var(--lh-section);
  text-wrap: balance;
}

/* The coverage block and the advertising panel set their own size; bring them
   onto the section step so no heading jumps a whole role on one page. */
.coverage h3,
.b2b-ad-panel .business-grid h3 {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--t-section);
  font-weight: 800;
  letter-spacing: var(--tr-section);
  line-height: var(--lh-section);
  text-transform: none;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   3. Title: card headings, FAQ questions, sub-section heads
   --------------------------------------------------------------------------- */

.feature h3,
.reason h3,
.value h3,
.step h3,
.vertical h3,
.audience-item h3,
.screen-step h3,
.screen-points h3,
.screen-story h3,
.surface-card h3,
.message-card h3,
.check-list h3,
.faq-item h3,
.screen-item h3,
.board-head h3,
.journey-top h3,
.city-page .feature h3 {
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: var(--tr-title);
  line-height: var(--lh-title);
  text-wrap: balance;
}

/* Legal prose is a reading surface inside a sales site: keep its section
   headings a step below the marketing sections so the article stays scannable. */
.legal-block h2 {
  max-width: 30ch;
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   4. Lede: one opening paragraph, larger and quieter than the body
   --------------------------------------------------------------------------- */

.hero-lede,
.subpage-lede,
.legal-hero .subpage-lede,
.city-page .subpage-hero--city .subpage-lede,
.coverage-lede,
.screen-product-lede,
.section-lede,
.route-copy .section-lede,
.city-page .city-section .section-lede,
.city-stops-intro .section-lede,
.faq-intro > p:not(.section-index),
.showroom-copy > p:not(.section-index),
.purpose-copy > p:not(.section-index),
.inroom-copy > p {
  max-width: var(--measure-lede);
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  text-wrap: pretty;
}

.hero-lede {
  max-width: var(--measure-hero);
}

/* Ink stays with the surface: the base rules carry section-lede-light and
   section-lede-dark, and this layer must not repaint them. */

/* The closing note under a call to action is prose, not a label. */
.closing-note {
  max-width: 62ch;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
  color: rgba(10, 17, 24, 0.8);
}

/* ---------------------------------------------------------------------------
   5. Body: the reading voice. 16px floor, 1.62 leading, 66 character measure
   --------------------------------------------------------------------------- */

.feature p,
.reason p,
.value p,
.step p,
.vertical p,
.audience-item p,
.screen-step p,
.screen-points p,
.screen-item figcaption p,
.surface-desc,
.surface-tagline,
.message-card p,
.closing-copy,
.pricing-copy p,
.screen-story p,
.business-grid p,
.price-list li,
.price-extras,
.check-list p,
.faq-item > p,
.setup-steps p,
.setup-copy > p,
.airport-steps p,
.airport-fares-body,
.airport-answer,
.legal-block p,
.legal-alpha li,
.inroom-tier-list li,
.format-compare td,
.city-page .feature p,
.city-route-copy p {
  max-width: var(--measure);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

/* A stacked pair of paragraphs needs air between them, not a first-line
   indent on top of a block gap. */
main p + p {
  margin-top: 0.85em;
}

/* The plain paragraph under a section head reads as the measure, never as a
   narrow column of ragged lines. */
.coverage > p {
  max-width: var(--measure);
  margin-top: 22px;
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

/* ---------------------------------------------------------------------------
   6. Labels: uppercase mono, 12px, one tracking value, short words only
   --------------------------------------------------------------------------- */

.mono,
.section-index,
.section-index span,
.feature-num,
.reason-index,
.value-index,
.step-index,
.audience-index,
.screen-point-icon,
.kicker,
.hero-download-label,
.hero-download-meta,
.hero-app-label,
.proof-chip,
.coverage-map-tag,
.stat-grid span,
.city-list li,
.subpage-note,
.frame-tag,
.surface-best,
.surface-price,
.showroom-note,
.quote-head .mono,
.quote-format span,
.quote-format strong,
.quote-field > span,
.quote-mail,
.quote-demo,
.footer-col h3,
.nav-desktop a,
.text-link,
.stat-block span,
.hero-price span,
.showroom-teaser-cta,
.price-amount span,
.price-free,
.footer-bottom,
.airport-lines-label,
.airport-lines-mode,
.airport-step-tag,
.airport-step-no,
.inroom-card-title,
.city-board-head,
.city-board-go,
.city-terminus-name,
.city-rail-label,
.fact span,
.price-card > .mono,
.legal-meta dt,
.legal-contact li > span,
.format-compare caption,
.format-compare thead th,
.setup-tags li,
.stop-list .mono,
.airport-ticket-issuer,
.airport-ticket-label,
.airport-ticket-valid,
.airport-ticket-methods li,
.quote-field-error {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tr-label);
}

/* The two smallest real controls: the language switcher. Never below the
   11px floor, on any page or any theme. */
.lang-switch,
.lang-menu-trigger,
.lang-menu-item,
.btn-compact {
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
}

.btn {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
}

.skip-link,
.section-index span,
.mobile-nav nav a span {
  font-size: var(--t-label);
}

/* ---------------------------------------------------------------------------
   7. Captions: sentence case. A caption is a sentence you read, so it drops
      the label treatment and keeps the mono face and its calm.
   --------------------------------------------------------------------------- */

.visual-caption,
.coverage-map figcaption,
.subpage-caption,
.showroom-large figcaption,
.showroom-teaser figcaption,
.airport-photo-caption,
.price-note,
.screens-foot p,
.screens-hint,
.download-meta,
.stat-note,
.stats-note {
  max-width: var(--measure-caption);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-transform: none;
}

.screens-foot p,
.screens-hint,
.download-meta {
  color: var(--muted);
}

.section-light .download-meta,
.section-paper .download-meta,
.section-light .screens-hint,
.section-paper .screens-hint,
.section-light .screens-foot p,
.section-paper .screens-foot p {
  color: var(--muted-dark);
}

/* Captions on light and paper surfaces need the darker muted ink. */
.section-light .visual-caption,
.section-light .coverage-map figcaption,
.section-light .showroom-teaser figcaption,
.section-light .subpage-caption,
.section-paper .visual-caption,
.section-paper .showroom-teaser figcaption,
.section-paper .subpage-caption {
  color: var(--muted-dark);
}

.stat-note {
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   8. Footer: the reading sizes of the page, not an index of labels
   --------------------------------------------------------------------------- */

.footer-brand p {
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.6;
}

.footer-brand > a,
.footer-brand .footer-company {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

.footer-brand .footer-company {
  margin-top: 5px;
  color: var(--muted);
}

.footer-col a {
  padding: 6px 0;
  font-size: 1rem;
}

/* The screen strip numbers sit beside a heading, so they read at label size. */
.screen-item figcaption .mono {
  font-size: var(--t-label);
}

/* ---------------------------------------------------------------------------
   9. Figures that must line up: every number that stacks is tabular
   --------------------------------------------------------------------------- */

.stat-grid strong,
.stat-block strong,
.price-amount strong,
.price-amount span,
.airport-ticket-price,
.airport-ledger dd,
.airport-route-measure,
.airport-route-stop-meta,
.city-phone-clock,
.journey-time strong,
.format-compare td,
.departures td,
.departures th,
.hero-price strong,
.message-price,
.price-payment {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   10. Surfaces carried over from the earlier polish pass
   --------------------------------------------------------------------------- */

/* Havgra-style dark section treatment */
.b2b-ad-panel {
  padding: 76px 0;
  border-top: 1px solid var(--line-light);
  background-color: var(--ink);
  color: var(--paper);
}

.screen-product {
  padding-bottom: 0;
}

.coverage .city-list {
  gap: 10px;
}

.coverage .city-list li {
  padding: 10px 14px;
}

/* Remove the decorative image shadows, the grid fields and the hard offsets. */
.hero-app-shot,
.route-app img,
.showroom-frame img,
.showroom-large img,
.showroom-teaser-link img {
  filter: none !important;
}

.map-panel,
.coverage-map-frame,
.subpage-frame,
.purpose-visual,
.audience-visual,
.display-frame,
.download-card,
.price-card,
.quote-panel {
  box-shadow: none !important;
}

.hero::before,
.subpage-hero::before {
  display: none;
}

.coverage-plate-canvas,
.radar-mock,
.bus-mock {
  background-image: none !important;
}

@media (max-width: 720px) {
  .b2b-ad-panel {
    padding: 56px 0;
  }
}

/* ---------------------------------------------------------------------------
   11. Landing: the page's own moves at full strength
   The hero title sits at the ceiling of the display step and the schedule
   block becomes a timetable index instead of four equal text cards. Images
   stay flat: no drop shadows, no hard offsets.
   --------------------------------------------------------------------------- */

.hero h1 {
  font-size: clamp(3.4rem, 6.2vw, 6rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.hero-app {
  max-width: 320px;
}

@media (max-width: 980px) {
  .hero h1 {
    font-size: clamp(3.4rem, 9.2vw, 5.8rem);
  }
}

@media (max-width: 720px) {
  .hero h1 {
    font-size: clamp(2.55rem, 12.5vw, 4.8rem);
  }
}

/* The badges and their note are one thought. Left as three flex children the
   note wrapped alone under the label at tablet widths, reading as a stray
   label rather than a qualifier on the two store buttons. */
.hero-download-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

/* Sõiduplaanid: a timetable index of the four modes. Same copy, same order,
   same link, now at the weight of a section rather than four equal cards. */

.schedule-section h2 {
  max-width: 20ch;
}

.schedule-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px 56px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}

.schedule-meta .section-lede {
  max-width: 58ch;
  margin: 0;
}

.schedule-meta .btn {
  max-width: 100%;
  flex: 0 1 auto;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

.schedule-index {
  margin: 44px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-dark);
  list-style: none;
}

.schedule-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 22px 40px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line-dark);
}

.schedule-row h3 {
  margin: 0;
  font-size: clamp(1.6rem, 2.55vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

.schedule-row p {
  max-width: 46ch;
  margin: 0;
  color: var(--muted-dark);
  font-size: var(--t-body);
  line-height: 1.6;
  text-wrap: pretty;
}

.mode-badge {
  display: grid;
  width: 60px;
  height: 60px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
}

.mode-badge svg {
  width: 27px;
  height: 27px;
}

.mode-bus {
  background: var(--bus);
}

.mode-train {
  background: var(--train);
}

.mode-tram {
  background: var(--tram);
}

.mode-live {
  background: var(--regional);
}

@media (max-width: 980px) {
  .schedule-row {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px 24px;
    padding: 28px 0;
  }

  .schedule-row h3,
  .schedule-row p {
    grid-column: 2;
  }

  .mode-badge {
    grid-row: 1 / span 2;
    width: 54px;
    height: 54px;
    align-self: start;
  }

  .mode-badge svg {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 720px) {
  .schedule-meta {
    margin-top: 24px;
    padding-top: 22px;
  }

  .schedule-index {
    margin-top: 32px;
  }

  .schedule-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px 18px;
    padding: 24px 0;
  }

  .schedule-row h3 {
    font-size: clamp(1.45rem, 6.4vw, 1.8rem);
  }

  .mode-badge {
    width: 48px;
    height: 48px;
  }

  .mode-badge svg {
    width: 23px;
    height: 23px;
  }
}

/* Rakendus: the three phones carry more of the page at desktop. */

.phone {
  max-width: 330px;
}

.screen-item figcaption {
  max-width: 330px;
}

.screen-item:nth-child(2) {
  padding-top: 40px;
}

.screen-item:nth-child(3) {
  padding-top: 80px;
}

@media (max-width: 860px) {
  .screen-item,
  .screen-item:nth-child(2),
  .screen-item:nth-child(3) {
    padding-top: 0;
  }

  /* The scroller is full bleed, so the caption needs its own inset to keep
     the "01" off the viewport edge. */
  .screen-item figcaption {
    padding-left: 20px;
  }
}

/* Download: the proof numbers land at the scale of the section. */

.download-card {
  max-width: 420px;
  padding: 36px;
}

.download-card > img {
  width: 96px;
  height: 96px;
}

.stat-grid {
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
}

.stat-grid strong {
  font-size: 2.15rem;
  letter-spacing: -0.05em;
}

.stat-grid.has-rating strong {
  font-size: 1.55rem;
}

.stat-grid span {
  font-size: var(--t-micro);
}

.download-meta {
  color: rgba(10, 17, 24, 0.78);
}

@media (max-width: 720px) {
  .download-card {
    padding: 28px;
  }

  .stat-grid strong {
    font-size: 1.9rem;
  }
}

/* GO NOW Screen: the headline spans the section instead of stacking five deep
   in the narrow copy column, and the showroom keeps the yellow offset. */

.screen-product-head {
  margin-bottom: 56px;
}

.screen-product-head h2 {
  max-width: 30ch;
  font-size: var(--t-section);
  font-weight: 800;
  letter-spacing: var(--tr-section);
  line-height: var(--lh-section);
  text-wrap: balance;
}

.screen-product-head .screen-product-lede {
  max-width: var(--measure-lede);
  margin-top: 24px;
}

.screen-product-visual {
  width: min(100%, 760px);
}

/* The dark advertising band follows the light section with its own padding, so
   the section's bottom padding is zero. The wrap needs its own space, or the
   showroom caption sits flush against the band and reads as clipped. */
.screen-product > .wrap {
  margin-bottom: 88px;
}

@media (max-width: 980px) {
  .screen-product-head {
    margin-bottom: 40px;
  }
}

@media (max-width: 720px) {
  .screen-product-head h2 {
    max-width: 24ch;
  }
}

/* The advertising panel lost its section index when the panel was simplified,
   so the three-column grid was handing the button the whole second column. */

.b2b-ad-panel .business-grid {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px 48px;
}

.b2b-ad-panel .business-grid h3 {
  max-width: 16ch;
}

.b2b-ad-panel .business-grid .btn {
  justify-self: end;
}

@media (max-width: 980px) {
  .b2b-ad-panel .business-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .b2b-ad-panel .business-grid .btn {
    justify-self: start;
  }
}