/* Editorial polish only. Keep the tested hero, 3D geometry, glass renderer,
   notification animation independent of this layer. */
.ferry-landing {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --section-space: 80px;
  --interaction-time: 160ms;
  --interaction-ease: cubic-bezier(.2, .7, .2, 1);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-stretch: 132%;
}

/* The cinematic title retains its own measured line-height and tracking. */
.ferry-landing h2 { letter-spacing: -.035em; line-height: 1.08; }
.ferry-landing h3 { letter-spacing: -.025em; line-height: 1.16; }
.ferry-landing .section-space:not(.departure-section) { padding-block: var(--section-space); }
/* This section opens with a full-width map, without an empty colour band. */
.ferry-landing .crossing-section.section-space { padding-block-start: 0; }
/* These chapters share one surface and one compact gap, not two section
   paddings. Keep the map and all other chapter boundaries unchanged. */
.ferry-landing .crossing-section.section-space { padding-block-end: 0; }
.ferry-landing .crossing-section + .outside-section.section-space {
  background: #0d1e2d;
  padding-block-start: 80px;
}
/* Keep the queue explanation with its title, beside the phone on desktop
   and before it on mobile. No separate trailing row or duplicated padding. */
.ferry-landing .queue-cinema { margin-bottom: 0; }
.ferry-landing .queue-caption .queue-features {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-bottom: 0;
}
.ferry-landing .departure-section .paired-phones {
  width: 86%;
  justify-self: center;
}
.ferry-landing .chapter-heading { margin-bottom: var(--space-6); }
.ferry-landing .themes-section .chapter-heading { margin-bottom: var(--space-4); }
.ferry-landing .departure-section .chapter-heading { margin-bottom: 0; }
.ferry-landing .editorial-grid { gap: var(--space-4); }
.ferry-landing .editorial-copy p,
.ferry-landing .editorial-grid p,
.ferry-landing .notifications-body p { line-height: 1.6; }
.ferry-landing .text-feature + .text-feature { margin-top: var(--space-4); }
/* Separate features, not their heading and explanation. The divider inherits
   each chapter's palette; no extra cards, surfaces or animation are needed. */
.ferry-landing .editorial-copy > .text-feature,
.ferry-landing .editorial-grid > article {
  border-top: 1px solid #ffffff26;
  border-top-color: color-mix(in srgb, currentColor 18%, transparent);
  padding-top: var(--space-3);
}
.ferry-landing .queue-features > article:first-child {
  border-top: 0;
  padding-top: 0;
}
.ferry-landing .feedback-field { gap: var(--space-1); }
.ferry-landing .feedback-form { gap: var(--space-3); }
.ferry-landing .feedback-copy > p:not(.eyebrow) { margin-top: var(--space-3); }

/* Quiet supporting copy still needs to be readable on a phone. */
.ferry-landing .footnote,
.ferry-landing .widget-example-note,
.ferry-landing .carplay-figure figcaption,
.ferry-landing .gallery-controls p,
.ferry-landing .footer { font-size: 12px; line-height: 1.6; }
.ferry-landing .faq { padding-block: var(--section-space); }
.ferry-landing .faq h2 { margin-bottom: var(--space-4); }
.ferry-landing .faq details { padding-block: var(--space-2); }
.ferry-landing .faq summary { min-height: 44px; align-items: center; }
.ferry-landing .faq summary:after { flex: 0 0 24px; text-align: center; }
.ferry-landing .faq details p { margin-block: var(--space-2) var(--space-1); line-height: 1.6; }

/* Increase hit areas without increasing horizontal menu width or adding glass. */
:is(.ferry-landing, .privacy-page) .nav-links a,
:is(.ferry-landing, .privacy-page) .nav-current,
:is(.ferry-landing, .privacy-page) .nav-feedback,
.ferry-landing .footer a { min-height: 44px; align-content: center; }
.ferry-landing .button,
.privacy-page .nav .button,
.ferry-landing .theme-picker button,
.ferry-landing .view-picker button,
.ferry-landing .gallery-controls button { min-height: 44px; }
.ferry-landing .gallery-controls button { min-width: 44px; }
/* Desktop section indicator: retain the active theme color, soften other links. */
@media (min-width: 701px) {
  :is(.ferry-landing, .privacy-page) .nav-links a {
    text-decoration: none;
    transition: opacity var(--interaction-time) var(--interaction-ease);
  }
  :is(.ferry-landing, .privacy-page) .nav.has-section-nav .nav-links a { opacity: .7; }
  :is(.ferry-landing, .privacy-page) .nav.has-section-nav .nav-links a[aria-current="location"],
  :is(.ferry-landing, .privacy-page) .nav.has-section-nav .nav-links a:hover,
  :is(.ferry-landing, .privacy-page) .nav.has-section-nav .nav-links a:focus-visible {
    opacity: 1;
  }
}
/* Match the 6px vertical inset; widen the CTA into the old right gutter. */
:is(.ferry-landing, .privacy-page) .nav { --nav-end-space: 20px; padding-right: 6px; }
:is(.ferry-landing, .privacy-page) .nav > .button.small {
  flex-shrink: 0;
  padding-inline: calc(18px + (var(--nav-end-space) - 6px) / 2);
}
@media (max-width: 600px) {
  :is(.ferry-landing, .privacy-page) .nav { --nav-end-space: 15px; }
}
.ferry-landing .footer { align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.ferry-landing .footer > div { gap: var(--space-4); }

.ferry-landing :is(a, button, summary, input, textarea):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
/* Keyboard focus must not land inside content awaiting a scroll reveal. */
.ferry-landing .reveal:focus-within { opacity: 1; transform: none; }
.ferry-landing .text-link { text-underline-offset: .2em; text-decoration-thickness: 1px; }
.ferry-landing .button,
.privacy-page .nav .button,
.ferry-landing .theme-picker button,
.ferry-landing .view-picker button {
  transition: background-color var(--interaction-time) var(--interaction-ease),
              color var(--interaction-time) var(--interaction-ease);
}
@media (hover: hover) and (pointer: fine) {
  .ferry-landing .text-link:hover { text-decoration: underline; }
  .ferry-landing .theme-picker button:hover,
  .ferry-landing .view-picker button:hover { background-color: #ffffff12; }
}
/* Section titles stay subordinate to the 42px / 13vw hero title. */
@media (max-width: 700px) {
  .ferry-landing #main h2 {
    font-size: clamp(34px, 9.5vw, 48px);
    line-height: 1.06;
    text-align: left;
    text-wrap: balance;
    width: 100%;
    max-width: none;
    margin-inline: auto;
  }
  .ferry-landing #main h3 { text-align: left; }
  .ferry-landing .queue-caption { max-width: none; }

  /* Group related objects before spacing whole chapters: 16px for a title
     and its introduction, 32px between content groups, 64px at a boundary.
     Keep longer reading copy left-aligned and the established 20px gutters. */
  .ferry-landing { --section-space: 64px; }
  .ferry-landing .chapter-heading { margin-bottom: var(--space-4); }
  .ferry-landing .departure-section .chapter-heading { margin-bottom: 0; }
  .ferry-landing .lead { margin-top: var(--space-2); line-height: 1.5; }
  .ferry-landing #hojdpunkter .section-top > p {
    margin-top: var(--space-2);
    text-align: left;
    line-height: 1.5;
  }
  .ferry-landing .gallery-controls { gap: var(--space-2); margin-top: var(--space-3); }
  .ferry-landing .gallery-controls > div:last-child { flex-shrink: 0; }
  .ferry-landing .departure-section.section-space { padding-block: var(--space-8); }
  .ferry-landing .departure-section > .shell { gap: var(--space-4); }
  .ferry-landing .editorial-copy .text-feature { margin-top: var(--space-4); }
  .ferry-landing .editorial-grid > article:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .ferry-landing .editorial-copy p,
  .ferry-landing .editorial-grid p { margin-top: var(--space-2); }
  .ferry-landing .queue-cinema {
    gap: var(--space-4);
    padding: var(--space-6) var(--space-3);
    margin-bottom: 0;
  }
  .ferry-landing .notifications-intro { gap: var(--space-4); }
  .ferry-landing .notifications-body { margin-top: var(--space-3); }
  .ferry-landing .notifications-body p + p { margin-top: var(--space-2); }
  .ferry-landing .notification-permissions { margin-top: var(--space-4); padding-top: var(--space-3); }
  .ferry-landing .crossing-map { margin-bottom: var(--space-4); }
  .ferry-landing .footnote { margin-top: var(--space-4); }
  .ferry-landing .widget-showcase { gap: var(--space-4); padding-block: 0 var(--space-3); }
  .ferry-landing .widget-stage { height: auto; padding-block: var(--space-1) var(--space-2); }
  .ferry-landing .widget-example-note { margin-bottom: var(--space-4); }
  .ferry-landing .carplay-heading { gap: var(--space-2); padding-top: var(--space-8); }
  .ferry-landing .carplay-copy { text-align: left; }
  .ferry-landing .carplay-figure figcaption { padding-block: var(--space-2) var(--space-4); }
  .ferry-landing .theme-product { margin-block: var(--space-4); }
  .ferry-landing .view-picker { margin-top: var(--space-2); }
  .ferry-landing .feedback-section { padding-block: var(--space-8); }
  .ferry-landing .feedback-layout { gap: var(--space-4); }
  .ferry-landing .feedback-copy > p:not(.eyebrow) { margin-top: var(--space-2); text-align: left; }
  .ferry-landing .chapter-heading .lead { text-align: left; }
  .ferry-landing .download-section { padding-bottom: var(--space-8); }
  .ferry-landing .download-section img,
  .ferry-landing #hamta h2 { margin-bottom: var(--space-3); }
}
@media (min-width: 701px) {
  .ferry-landing { --section-space: 112px; }
  .ferry-landing .crossing-section + .outside-section.section-space { padding-block-start: 96px; }
  .ferry-landing .chapter-heading { margin-bottom: var(--space-8); }
  .ferry-landing .themes-section .chapter-heading { margin-bottom: var(--space-4); }
  .ferry-landing .departure-section .chapter-heading { margin-bottom: 0; }
  .ferry-landing .editorial-grid { gap: var(--space-6); }
  /* Side-by-side columns are already separated by their gutters. */
  .ferry-landing .editorial-grid:not(.queue-features) > article {
    border-top: 0;
    padding-top: 0;
  }
  .ferry-landing .faq h2 { margin-bottom: var(--space-6); }
}
@media (min-width: 1100px) {
  .ferry-landing { --section-space: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .ferry-landing { --interaction-time: 0ms; }
}
@media (forced-colors: active) {
  .ferry-landing .button,
.privacy-page .nav .button,
  .ferry-landing .theme-picker button,
  .ferry-landing .view-picker button { border: 1px solid ButtonText; }
  .ferry-landing [aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* Reading copy uses normal SF Pro width; headings and the navigation retain Expanded. */
.ferry-landing p,
.ferry-landing .fine,
.ferry-landing figcaption span,
.ferry-landing .footer,
.ferry-landing main .button { font-stretch: normal; }
/* These cards depict the app itself, whose typography stays Expanded. */
.ferry-landing .notification-sample p { font-stretch: 132%; }

/* Slightly smaller navigation copy, retaining the Expanded face. */
:is(.ferry-landing, .privacy-page) .nav-links { font-size: 12px; }
:is(.ferry-landing, .privacy-page) .nav.has-section-nav .nav-current,
:is(.ferry-landing, .privacy-page) .nav-feedback,
:is(.ferry-landing, .privacy-page) .nav > .button.small { font-size: 11px; }