/* Landing page. Breakpoints: desktop >= 1000px, tablet 720-999px, phone < 720px.
   Radius rule: controls 12px, panels 20-24px, chips and dots fully round. */

body.home {
  padding-bottom: 0;
}

.home .bg-aurora {
  opacity: 0.4;
}

.home-main {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
}

.home section {
  scroll-margin-top: 72px;
}

/* Inline links inside running text. */
.hero-lead a,
.plans-note a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: rgba(143, 212, 131, 0.35);
  text-underline-offset: 3px;
}

.hero-lead a:hover,
.plans-note a:hover {
  text-decoration-color: currentColor;
}

/* Section heads */

.section-head {
  max-width: 760px;
  margin-bottom: 32px;
}

.section-head h2,
.avail-head h2 {
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.625rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Section headings carry the green underline of the original site. */
.section-head h2,
.avail-head h2 {
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--accent);
}

.section-head p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.plans,
.avail,
.routes,
.adcheck {
  padding: clamp(56px, 7vw, 96px) 0;
}

/* Hero */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 6vw, 96px);
}

.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 6%;
  right: 0;
  width: 56%;
  height: 90%;
  background: radial-gradient(closest-side, rgba(120, 196, 107, 0.13), transparent);
  pointer-events: none;
}

.hero-eyebrow {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Montserrat is wider than Onest, so the title runs a size smaller. */
.hero-title {
  font-size: clamp(2rem, 0.9rem + 3.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
}

.hero-title-lead {
  display: block;
  color: var(--accent);
}

.hero-service {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  white-space: nowrap;
}

.hero-service img {
  width: 0.82em;
  height: 0.82em;
  object-fit: contain;
}

.hero-service.is-switching {
  animation: hero-swap 0.5s cubic-bezier(0.3, 0, 0.2, 1);
}

@keyframes hero-swap {
  0% { opacity: 1; transform: none; filter: none; }
  45% { opacity: 0; transform: translateY(0.16em); filter: blur(4px); }
  55% { opacity: 0; transform: translateY(-0.16em); filter: blur(4px); }
  100% { opacity: 1; transform: none; filter: none; }
}

.hero-lead {
  max-width: 32em;
  margin-top: 22px;
  color: var(--muted);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Intro story: the login page animation. The box keeps the player size,
   a square stage plus its 52px control bar, before anything loads. */

.hero-story {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 560px;
}

.hero-story::before {
  content: '';
  display: block;
  padding-top: calc(100% + 52px);
}

.hero-story-fallback {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

.hero-story-fallback img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-story iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color-scheme: dark;
  visibility: hidden;
}

.hero-story.is-ready iframe {
  visibility: visible;
}

.hero-story.is-ready .hero-story-fallback {
  display: none;
}

/* Plans */

.plans .section-head {
  max-width: none;
}

.plans-includes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 16px;
  list-style: none;
  color: var(--muted);
  font-size: 0.9375rem;
}

.plans-includes li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.plans-includes svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.period-switch {
  display: inline-grid;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  gap: 4px;
  margin-bottom: 24px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.period-switch button {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 16px;
  line-height: 22px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.period-switch button:hover {
  color: var(--text);
}

.period-switch button[aria-checked="true"] {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.period-switch em {
  color: var(--accent-text);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.period-switch em:empty {
  display: none;
}

.plan-grid {
  --plan-gap: 12px;
  --plan-min: 252px; /* the full buy label still fits */
  /* Two columns only while every line of a narrow card fits on one line: the
     widest, "От 15 до 30 устройств", takes 139px plus 30px of padding. */
  --plan-min-compact: 172px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(
    calc((100% - 3 * var(--plan-gap)) / 4 - 0.5px),
    calc((4 * var(--plan-min) + 3 * var(--plan-gap) - 100%) * 999),
    clamp(
      calc((100% - var(--plan-gap)) / 2 - 0.5px),
      calc((2 * var(--plan-min-compact) + var(--plan-gap) - 100%) * 999),
      100%)), 1fr));
  /* Rows sit wider apart than columns: the best plan badge hangs half above its
     card and needs air below the row before it. */
  gap: 24px var(--plan-gap);
}

.plan {
  container: plan / inline-size;
  position: relative;
  display: flex;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.plan-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 20px 20px;
}

/* The recommended plan: an accent frame, a soft glow and a badge on the top edge. */
.plan.is-best {
  border-color: var(--accent-brd);
  background: linear-gradient(180deg, rgba(120, 196, 107, 0.1), transparent 55%), var(--surface);
  box-shadow: 0 0 0 1px var(--accent-brd), 0 18px 48px -24px rgba(120, 196, 107, 0.45);
}

.plan-badge {
  position: absolute;
  top: 0;
  left: 20px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--accent);
  color: #08110a;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: translateY(-50%);
}

.plan h3 {
  font-size: 1.125rem;
  font-weight: 650;
}

.plan-tag {
  min-height: 1.4em;
  color: var(--muted);
  font-size: 0.875rem;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 20px;
}

.plan-price strong {
  font-size: clamp(1.75rem, 1.35rem + 1vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.plan-price span {
  color: var(--muted);
  font-size: 0.9375rem;
}

.plan-total {
  min-height: 1.5em;
  color: var(--faint);
  font-size: 0.8125rem;
}

.plan-features {
  display: grid;
  gap: 6px;
  margin: 18px 0 22px;
  list-style: none;
  font-size: 0.9375rem;
}

.plan-buy {
  width: 100%;
  height: 46px;
  margin-top: auto;
  padding: 0 14px;
  font-size: 0.9375rem;
}

.label-short {
  display: none;
}

.plan-trial {
  display: block;
  margin-top: 6px;
  padding: 6px 0;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
  text-decoration: none;
}

.plan-trial:hover {
  color: var(--text);
}

@container plan (max-width: 251px) {
  .plan-body {
    padding: 16px 14px 12px;
  }

  .plan h3 {
    font-size: 1rem;
  }

  .plan-tag {
    display: none;
  }

  .plan-price {
    flex-wrap: wrap;
    gap: 0 4px;
    margin-top: 10px;
  }

  .plan-price strong {
    font-size: 1.5rem;
  }

  .plan-price span,
  .plan-total {
    font-size: 0.75rem;
  }

  .plan-features {
    gap: 4px;
    margin: 12px 0 14px;
    font-size: 0.8125rem;
  }

  .plan-buy {
    height: 44px;
  }

  .label-long {
    display: none;
  }

  .label-short {
    display: inline;
  }

  .plan-trial {
    font-size: 0.8125rem;
  }
}

.plans-note {
  max-width: 760px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.plans-rate-note {
  margin-top: 6px;
  color: var(--faint);
  font-size: 0.8125rem;
}

.plans-rate-note:empty {
  display: none;
}

/* Service availability: search and one tile per checked service. */

.avail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: end;
  gap: 16px 48px;
  margin-bottom: 24px;
}

.avail-updated {
  min-height: 1.4em;
  margin-top: 6px;
  color: var(--faint);
  font-size: 0.875rem;
}

.avail-search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #0f141b;
  cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.avail-search:focus-within {
  border-color: var(--accent-brd);
  box-shadow: 0 0 0 4px rgba(120, 196, 107, 0.12);
}

.avail-search svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.avail-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.avail-search input::placeholder {
  color: var(--faint);
}

.avail-search kbd {
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--faint);
  font: inherit;
  font-size: 0.75rem;
}

/* Four or two columns from the grid width, never a lone tile in a row. */
.avail-grid {
  --avail-gap: 10px;
  --avail-min: 168px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(
    calc((100% - 3 * var(--avail-gap)) / 4 - 0.5px),
    calc((4 * var(--avail-min) + 3 * var(--avail-gap) - 100%) * 999),
    calc((100% - var(--avail-gap)) / 2 - 0.5px)), 1fr));
  gap: var(--avail-gap);
}

/* Every part of a tile has its own grid slot with a fixed height, so the
   icon type, font metrics or engine cannot shift text between tiles. */
.avail-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 36px minmax(34px, 1fr) 22px 20px;
  grid-template-areas:
    "icon pct"
    "spark spark"
    "name name"
    "state state";
  align-items: center;
  min-height: 168px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.avail-tile[data-state="degraded"] {
  border-color: rgba(230, 180, 80, 0.4);
  background: linear-gradient(160deg, rgba(230, 180, 80, 0.14), transparent 65%), var(--surface);
}

.avail-tile[data-state="down"] {
  border-color: rgba(235, 100, 90, 0.45);
  background: linear-gradient(160deg, rgba(235, 100, 90, 0.16), transparent 65%), var(--surface);
}

.avail-tile img {
  grid-area: icon;
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.avail-pct {
  grid-area: pct;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.avail-spark {
  grid-area: spark;
  display: block;
  width: calc(100% + 32px);
  height: 34px;
  margin: 0 -16px;
  opacity: 0.8;
}

.avail-spark path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.avail-tile[data-state="degraded"] .avail-spark path { stroke: var(--state-degraded); }
.avail-tile[data-state="down"] .avail-spark path { stroke: var(--state-down); }

.avail-tile strong {
  grid-area: name;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 650;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avail-state {
  grid-area: state;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avail-tile[data-state="up"] .avail-state { color: var(--state-up); }
.avail-tile[data-state="degraded"] .avail-state { color: var(--state-degraded); }
.avail-tile[data-state="down"] .avail-state { color: var(--state-down); }

.avail-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 40px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--muted);
  text-align: center;
}

.avail-empty strong {
  color: var(--text);
  font-size: 1.0625rem;
}

.avail-empty .btn {
  margin-top: 6px;
}

/* Route rating: the administrator route table as cards of two lines. The
   first names the route, its status and score, the second holds the columns
   with their sparklines. Cards adapt to their own width. */

.routes-board {
  container: routes / inline-size;
}

.routes-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 16px;
}

.routes-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.routes-label {
  margin-right: 4px;
  color: var(--faint);
  font-size: 0.875rem;
}

.routes-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s;
}

.routes-switch:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

/* The real inputs stay in place for keyboards and screen readers. */
.routes-switch input,
.routes-segments input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.routes-toggle {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  transition: background-color 0.15s;
}

.routes-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}

.routes-switch input:checked + .routes-toggle {
  background: var(--accent);
}

.routes-switch input:checked + .routes-toggle::after {
  transform: translateX(14px);
}

.routes-switch input:focus-visible + .routes-toggle,
.routes-segments input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.routes-segments {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.routes-segments label {
  position: relative;
}

.routes-segments span {
  display: block;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 32px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.routes-segments span:hover {
  color: var(--text);
}

.routes-segments input:disabled + span {
  opacity: 0.4;
  cursor: not-allowed;
}

.routes-segments input:checked + span {
  background: var(--accent-dim);
  box-shadow: inset 0 0 0 1px var(--accent-brd);
  color: var(--accent-text);
}

.routes-hint,
.routes-empty {
  margin-bottom: 16px;
  color: var(--muted);
}

.routes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
  gap: 12px;
  list-style: none;
}

.route.is-placeholder {
  animation: route-wait 1.4s ease-in-out infinite alternate;
}

.route.is-placeholder * {
  color: transparent !important;
  border-color: transparent !important;
  background-color: transparent !important;
}

.route.is-placeholder .route-flag,
.route.is-placeholder .route-score-bar,
.route.is-placeholder .route-spark {
  visibility: hidden;
}

@keyframes route-wait {
  to { background-color: var(--surface-raised); }
}

[data-routes-more][data-pending] {
  visibility: hidden;
}

.route {
  container: route / inline-size;
  padding: 16px 18px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

/* The name and status keep their width, the score bar takes the rest. Rows
   and values have fixed heights: a card keeps its size whatever it shows, so
   a refresh or a missing value never moves the page. */
.route-head {
  display: grid;
  grid-template-columns: auto auto auto minmax(84px, 1fr);
  grid-template-areas: "rank name status score";
  grid-auto-rows: 28px;
  align-items: center;
  gap: 8px 12px;
}

[data-unscored] .route-head {
  grid-template-columns: auto auto auto;
  grid-template-areas: "rank name status";
  justify-content: start;
}

.route-rank {
  grid-area: rank;
  min-width: 2ch;
  color: var(--faint);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.route-name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.route-flag {
  flex-shrink: 0;
  width: 21px;
  height: 14px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.route-flag-code {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 0.5625rem;
}

.route-arrow {
  margin: 0 2px;
  color: var(--faint);
  font-weight: 500;
}

.route-status {
  grid-area: status;
  justify-self: start;
  padding: 2px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.route[data-status="0"] .route-status {
  border-color: rgba(120, 196, 107, 0.3);
  background: rgba(120, 196, 107, 0.12);
  color: var(--state-up);
}

.route[data-status="1"] .route-status,
.route[data-status="3"] .route-status {
  border-color: rgba(230, 180, 80, 0.3);
  background: rgba(230, 180, 80, 0.1);
  color: var(--state-degraded);
}

.route[data-status="2"] .route-status {
  border-color: rgba(235, 100, 90, 0.3);
  background: rgba(235, 100, 90, 0.12);
  color: var(--state-down);
}

.route[data-status="4"] .route-status {
  border-color: rgba(184, 119, 217, 0.3);
  background: rgba(184, 119, 217, 0.12);
  color: #c99be3;
}

.route-score {
  grid-area: score;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.route-score-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
}

.route-score-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}

.route-score b {
  min-width: 2.6em;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.route-score[data-zero] b {
  color: var(--state-down);
}

.route-score-none {
  grid-column: 1 / -1;
  color: var(--faint);
  font-size: 0.8125rem;
  text-align: right;
  white-space: nowrap;
}

.route-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.8fr);
  gap: 12px 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.route-metric {
  min-width: 0;
}

.route-metric dt {
  color: var(--faint);
  font-size: 0.75rem;
  line-height: 1.3;
}

.route-metric dd {
  margin-top: 2px;
}

.route-metric b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 24px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.route-nodata {
  display: block;
  color: var(--faint);
  font-size: 0.8125rem;
  line-height: 24px;
}

/* Colours of the administrator table: spread blue, latency amber, online green. */
.route-spark {
  --spark: #8ab8ea;
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 6px;
  overflow: visible;
}

.route-spark[data-kind="latency"] {
  --spark: #ffb357;
}

.route-spark[data-kind="online"] {
  --spark: var(--state-up);
}

.route-spark-line {
  fill: none;
  stroke: var(--spark);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.route-spark-line[data-gap] {
  stroke: rgba(255, 255, 255, 0.24);
}

/* The fills use the shared gradients from home.js, their colours live here. */
.route-spark-defs {
  position: absolute;
}

#route-fill-spread stop { stop-color: #8ab8ea; }
#route-fill-latency stop { stop-color: #ffb357; }
#route-fill-online stop { stop-color: var(--state-up); }
#route-fill-gap stop { stop-color: #fff; }

/* Uptime bars in the place a sparkline takes in the other columns. */
.route-bars {
  display: flex;
  gap: 2px;
  height: 28px;
  margin-top: 6px;
}

.route-bars i {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
}

.route-bars i[data-state="up"] {
  background: var(--state-up);
}

.route-bars i[data-state="down"] {
  background: var(--state-down);
}

.routes-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 16px;
}

.routes-note {
  color: var(--faint);
  font-size: 0.8125rem;
}

.routes-how {
  max-width: 760px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.routes-how summary {
  width: fit-content;
  color: var(--accent-text);
  font-weight: 600;
  cursor: pointer;
}

.routes-how p {
  margin-top: 8px;
}

/* Narrow cards: the route name gets the first line, status and score the second. */
@container route (max-width: 419px) {
  .route-head {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "rank name name"
      ". status score";
    row-gap: 8px;
  }

  [data-unscored] .route-head {
    grid-template-columns: auto auto;
    grid-template-areas:
      "rank name"
      ". status";
  }
}

/* Narrow board: three equal switches with the label above, the window across. */
@container routes (max-width: 559px) {
  .routes-toolbar {
    display: grid;
    gap: 14px;
  }

  .routes-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .routes-label {
    grid-column: 1 / -1;
    margin: 0;
  }

  .routes-switch {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    height: auto;
    padding: 10px 6px;
    font-size: 0.875rem;
  }

  .routes-segments {
    grid-column: 1 / -1;
    display: flex;
  }

  .routes-segments label {
    flex: 1;
  }

  .routes-segments span {
    padding: 0 4px;
    text-align: center;
  }
}

@container route (max-width: 299px) {
  .route-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Small desktop */

@media (min-width: 1000px) and (max-width: 1199px) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .hero-actions .btn {
    padding: 0 22px;
    font-size: 0.9375rem;
  }
}

/* Tablet */

@media (max-width: 999px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .hero::before {
    top: 45%;
    right: 0;
    width: 100%;
    height: 55%;
  }

  .hero-copy {
    max-width: 640px;
  }

  .hero-story {
    justify-self: start;
  }

  .avail-head {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phone */

@media (max-width: 719px) {
  .hero {
    gap: 32px;
    padding: 28px 0 48px;
  }

  .hero-eyebrow {
    margin-bottom: 12px;
    font-size: 0.875rem;
  }

  .hero-title {
    font-size: clamp(1.75rem, 0.6rem + 6vw, 2.5rem);
  }

  .hero-lead {
    margin-top: 16px;
  }

  .hero-actions {
    flex-direction: column;
    margin-top: 24px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .plans,
  .avail,
  .routes,
  .adcheck {
    padding: 48px 0;
  }

  .section-head {
    margin-bottom: 24px;
  }

  .section-head p {
    font-size: 1rem;
  }

  .plans-includes {
    gap: 8px 16px;
    font-size: 0.875rem;
  }

  .period-switch {
    display: grid;
    grid-auto-columns: 1fr;
    width: 100%;
  }

  .period-switch button {
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-height: 52px;
    padding: 6px 4px;
    line-height: 20px;
    font-size: 0.875rem;
  }

  .avail-head {
    margin-bottom: 20px;
  }

  .avail-search kbd {
    display: none;
  }

  .avail-tile {
    grid-template-rows: 28px minmax(28px, 1fr) 20px 18px;
    min-height: 140px;
    padding: 12px;
    border-radius: 16px;
  }

  .avail-tile img {
    width: 28px;
    height: 28px;
  }

  .avail-spark {
    width: calc(100% + 24px);
    height: 28px;
    margin: 0 -12px;
  }

  .avail-tile strong {
    font-size: 0.9375rem;
    line-height: 20px;
  }

  .avail-state {
    font-size: 0.8125rem;
    line-height: 18px;
  }
}

@media (max-width: 380px) {
  .hero-eyebrow {
    font-size: 0.8125rem;
    letter-spacing: -0.005em;
  }

}

@media (prefers-reduced-motion: reduce) {
  .hero-service.is-switching,
  .route.is-placeholder {
    animation: none;
  }
}