.home-hero {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-page);
}

.hero-layout {
  display: grid;
  min-height: calc(100svh - var(--header-height));
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(28px, 5vw, 76px);
  align-items: center;
  padding-top: clamp(34px, 5vw, 70px);
  padding-bottom: 24px;
}

.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding-block: 20px;
}

.hero-copy h1 {
  max-width: 9em;
  margin-top: 1rem;
  margin-bottom: 1.05rem;
}

.hero-actions {
  margin-bottom: 1.1rem;
}

.hero-lead {
  max-width: 39rem;
  margin-bottom: 1.05rem;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.75;
}

.hero-lead strong {
  color: var(--color-ink);
  font-weight: 700;
}

.hero-trust {
  max-width: 43rem;
  margin-bottom: .65rem;
}

.hero-trust li {
  color: var(--color-ink);
}

.signup-note {
  margin-bottom: 0;
  color: var(--color-muted);
  font-size: .84rem;
}

.hero-visual {
  position: relative;
  align-self: stretch;
  min-height: 470px;
  border-left: 1px solid var(--color-line);
  background: var(--color-panel);
}

.hero-visual::before {
  position: absolute;
  inset: 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  content: "";
  pointer-events: none;
}

.hero-visual::after {
  position: absolute;
  top: 35px;
  right: 35px;
  width: 68px;
  height: 68px;
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-pill);
  content: "";
  pointer-events: none;
}

.hero-visual svg {
  width: 100%;
  height: 100%;
  min-height: 470px;
}

.stop-sky {
  stop-color: var(--color-sky);
}

.stop-apricot {
  stop-color: var(--color-apricot);
}

.stop-yellow {
  stop-color: var(--color-yellow);
}

.stop-page {
  stop-color: var(--color-page);
}

.hero-mountain {
  fill: url("#cloud-yellow");
  opacity: .66;
}

.cloud {
  opacity: .68;
}

.cloud-sky {
  fill: url("#cloud-sky");
}

.cloud-apricot {
  fill: url("#cloud-apricot");
}

.cloud-yellow {
  fill: url("#cloud-yellow");
}

.route {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 4 13;
}

.route-accent {
  stroke: var(--color-accent);
}

.route-sky {
  stroke: var(--color-sky-deep);
}

.route-apricot {
  stroke: var(--color-apricot-deep);
}

.station-ring {
  fill: var(--color-page);
  stroke: var(--color-accent);
  stroke-width: 2;
}

.route-label {
  fill: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
}

.flag-white,
.flag-white-fill,
.flag-white-petals {
  fill: var(--color-page);
}

.flag-red,
.flag-red-fill {
  fill: var(--color-flag-red);
}

.flag-blue,
.flag-blue-fill {
  fill: var(--color-flag-blue);
}

.flag-red-stroke {
  fill: none;
  stroke: var(--color-flag-red);
}

.flag-ink-stroke {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.bird-body,
.bird-tail {
  fill: var(--color-accent);
  stroke: var(--color-accent-dark);
  stroke-width: 2;
}

.bird-belly {
  fill: var(--color-page);
  stroke: var(--color-accent-dark);
  stroke-width: 1.5;
}

.bird-wing {
  fill: var(--color-accent-dark);
  opacity: .78;
}

.bird-eye {
  fill: var(--color-ink);
}

.bird-beak {
  fill: var(--color-yellow);
  stroke: var(--color-ink);
  stroke-width: 1.4;
}

.bird-bag {
  fill: var(--color-cream);
  stroke: var(--color-ink);
  stroke-width: 2;
}

.bag-strap,
.bag-seam,
.bag-lock-line,
.bird-leg {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 2;
  stroke-linecap: round;
}

.bag-lock {
  fill: var(--color-accent);
  stroke: var(--color-ink);
  stroke-width: 1.5;
}

.postal-mark {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
}

.postal-mark-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.hero-observation {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: 1rem 2rem;
  align-items: start;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}

.hero-platforms,
.hero-flags {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.observation-label {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .67rem;
  letter-spacing: .09em;
  white-space: nowrap;
}

.hero-platforms .platform-inline,
.hero-flags .flag-inline {
  gap: .4rem .9rem;
}

.hero-platforms .platform-inline li,
.hero-flags .flag-inline li {
  color: var(--color-ink);
  font-size: .76rem;
}

.hero-platforms .platform-inline svg {
  color: var(--color-muted);
}

.hero-flags .flag-inline svg {
  width: 26px;
  height: auto;
}

.mini-flag-border {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1;
}

.flag-stripes {
  stroke-width: 2;
}

.fact-band {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-panel);
}

.fact-band-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 15px;
  padding-bottom: 15px;
}

.fact-band-inner span {
  padding-inline: 1rem;
  border-right: 1px solid var(--color-line);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .76rem;
  text-align: center;
}

.fact-band-inner span:first-child {
  padding-left: 0;
}

.fact-band-inner span:last-child {
  padding-right: 0;
  border-right: 0;
}

.fact-band-inner strong {
  color: var(--color-ink);
  font-weight: 750;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(320px, .65fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: end;
  margin-bottom: clamp(32px, 5vw, 60px);
}

.section-heading h2 {
  max-width: 12em;
  margin-bottom: 0;
}

.section-intro {
  max-width: 39rem;
  color: var(--color-muted);
}

.section-intro p:last-child {
  margin-bottom: 0;
}

.feature-section {
  background: var(--color-page);
}

.feature-atlas {
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
  grid-template-rows: repeat(6, minmax(64px, auto));
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.feature-entry {
  display: contents;
}

.entry-button {
  display: grid;
  grid-column: 1;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  min-height: 64px;
  padding: .8rem 1rem .8rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-page);
  color: var(--color-muted);
  cursor: pointer;
  text-align: left;
}

.feature-entry:last-child .entry-button {
  border-bottom: 0;
}

.entry-button:hover {
  color: var(--color-ink);
}

.entry-button[aria-selected="true"] {
  color: var(--color-accent-dark);
}

.entry-button[aria-selected="true"]::before {
  width: 5px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  content: "";
}

.entry-button[aria-selected="false"]::before {
  width: 5px;
  height: 26px;
  content: "";
}

.entry-code {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
}

.entry-name {
  color: var(--color-ink);
  font-weight: 650;
}

.entry-panel {
  grid-row: 1 / 7;
  grid-column: 2;
  display: grid;
  min-height: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 230px);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  padding: clamp(28px, 5vw, 64px);
  border-left: 1px solid var(--color-line);
  background: var(--color-panel);
}

.entry-panel[hidden] {
  display: none;
}

.entry-copy {
  max-width: 47rem;
}

.entry-copy h3 {
  margin-top: 1rem;
}

.entry-copy p {
  color: var(--color-muted);
}

.entry-sketch {
  width: 100%;
  max-width: 220px;
  color: var(--color-accent-dark);
}

.route-preview-section {
  background: var(--color-panel);
}

.route-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-page);
}

.route-notes article {
  padding: clamp(20px, 3vw, 30px);
  border-right: 1px solid var(--color-line);
}

.route-notes article:last-child {
  border-right: 0;
}

.route-notes h3 {
  margin-top: .55rem;
  font-family: var(--font-body);
  font-size: 1.04rem;
}

.route-notes p {
  margin-bottom: 0;
  color: var(--color-muted);
  font-size: .9rem;
}

.section-link {
  display: inline-flex;
  margin-top: 1.5rem;
  color: var(--color-accent-dark);
  font-weight: 700;
}

.section-link:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.client-section {
  background: var(--color-page);
}

.client-callout {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.client-callout p {
  margin-bottom: 0;
}

.pricing-preview-section {
  border-top: 1px solid var(--color-line);
  background: var(--color-panel);
}

.plan-description {
  min-height: 7.2em;
  color: var(--color-muted);
  font-size: .9rem;
}

.traffic-pack-note {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: clamp(24px, 5vw, 70px);
  margin-top: 1.25rem;
  padding: clamp(24px, 4vw, 40px);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-page);
}

.traffic-pack-note h3 {
  margin-top: .5rem;
  margin-bottom: 0;
}

.traffic-pack-note p {
  color: var(--color-muted);
}

.traffic-pack-note p:last-child {
  margin-bottom: 0;
}

.method-section {
  background: var(--color-page);
}

.method-layout {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.2fr) minmax(240px, .65fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: start;
}

.method-title {
  position: sticky;
  top: calc(var(--toc-top) + 18px);
}

.method-title h2 {
  font-size: clamp(32px, 3.3vw, 46px);
}

.method-copy {
  color: var(--color-muted);
}

.method-copy p:last-child {
  margin-bottom: 0;
}

.method-summary {
  padding: 1.35rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-panel);
}

.method-summary dl {
  margin-bottom: 1.25rem;
}

.method-summary dl div {
  padding-block: .8rem;
  border-bottom: 1px solid var(--color-line);
}

.method-summary dt {
  color: var(--color-ink);
  font-weight: 700;
}

.method-summary dd {
  margin: .25rem 0 0;
  color: var(--color-muted);
  font-size: .86rem;
}

.method-summary .btn-secondary {
  width: 100%;
}

.blog-preview-section {
  border-top: 1px solid var(--color-line);
  background: var(--color-panel);
}

.blog-preview-section .article-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.blog-preview-section .article-card {
  min-height: 310px;
}

@media (max-width: 1180px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  }

  .hero-observation {
    grid-template-columns: 1fr;
  }

  .method-layout {
    grid-template-columns: minmax(210px, .55fr) minmax(0, 1fr);
  }

  .method-summary {
    grid-column: 2;
  }

  .blog-preview-section .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .hero-layout {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding-top: 42px;
  }

  .hero-copy {
    padding-bottom: 10px;
  }

  .hero-copy h1 {
    max-width: 100%;
  }

  .hero-visual {
    min-height: 420px;
    border-top: 1px solid var(--color-line);
    border-left: 0;
  }

  .hero-visual svg {
    min-height: 420px;
  }

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

  .section-heading {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .feature-atlas {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .entry-panel {
    grid-template-columns: 1fr;
  }

  .entry-sketch {
    max-width: 170px;
  }

  .route-notes {
    grid-template-columns: 1fr;
  }

  .route-notes article {
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
  }

  .route-notes article:last-child {
    border-bottom: 0;
  }

  .traffic-pack-note {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .home-hero {
    overflow: clip;
  }

  .hero-layout {
    padding-top: 30px;
  }

  .hero-copy h1 {
    margin-top: .85rem;
  }

  .hero-lead {
    font-size: .96rem;
  }

  .hero-visual {
    min-height: 350px;
  }

  .hero-visual svg {
    min-height: 350px;
  }

  .hero-visual::after {
    display: none;
  }

  .hero-observation {
    gap: .75rem;
  }

  .hero-platforms,
  .hero-flags {
    grid-template-columns: 1fr;
    gap: .35rem;
  }

  .observation-label {
    display: block;
  }

  .fact-band-inner {
    grid-template-columns: 1fr 1fr;
  }

  .fact-band-inner span {
    padding: .65rem;
    border-bottom: 1px solid var(--color-line);
  }

  .fact-band-inner span:nth-child(even) {
    border-right: 0;
  }

  .fact-band-inner span:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .feature-atlas {
    display: block;
    border-bottom: 0;
  }

  .feature-entry {
    display: block;
    border-bottom: 1px solid var(--color-line);
  }

  .entry-button {
    width: 100%;
    padding-right: 0;
    border-bottom: 0;
  }

  .entry-panel {
    display: grid;
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 1rem 0 1.5rem 2.2rem;
    border-left: 0;
    background: var(--color-page);
  }

  .entry-panel[hidden] {
    display: none;
  }

  .entry-sketch {
    max-width: 140px;
  }

  .method-layout {
    grid-template-columns: 1fr;
  }

  .method-title {
    position: static;
  }

  .method-summary {
    grid-column: auto;
  }

  .plan-description {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .hero-layout {
    padding-bottom: 18px;
  }

  .hero-actions > a {
    width: 100%;
  }

  .hero-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem .7rem;
  }

  .hero-trust li {
    align-items: flex-start;
    font-size: .76rem;
  }

  .hero-visual {
    min-height: 300px;
  }

  .hero-visual svg {
    min-height: 300px;
    transform: scale(1.08);
    transform-origin: center;
  }

  .hero-platforms .platform-inline,
  .hero-flags .flag-inline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
  }

  .hero-platforms .platform-inline li,
  .hero-flags .flag-inline li {
    font-size: .7rem;
  }

  .fact-band-inner span {
    font-size: .68rem;
  }

  .entry-button {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .entry-panel {
    padding-left: 1rem;
  }

  .entry-sketch {
    display: none;
  }

  .blog-preview-section .article-grid {
    grid-template-columns: 1fr;
  }

  .blog-preview-section .article-card {
    min-height: 0;
  }
}

@media (max-width: 380px) {
  .hero-trust {
    grid-template-columns: 1fr;
  }

  .hero-platforms .platform-inline,
  .hero-flags .flag-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fact-band-inner {
    grid-template-columns: 1fr;
  }

  .fact-band-inner span,
  .fact-band-inner span:nth-child(even),
  .fact-band-inner span:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
  }

  .fact-band-inner span:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual svg {
    transform: none;
  }
}