/* Product-led rhythm, informed by Apple's iPhone Duo page. Ferry keeps its
   own colours, real app screens and normal-flow hero. No new rendering work. */
.ferry-landing .device {
  background: var(--phone-finish, var(--surface-top));
  box-shadow: 0 28px 55px -18px #0007, inset 0 0 0 .75px #ffffff25;
}
/* Match the 2D fallback to the screenshot too, including theme-picker changes. */
.ferry-landing .device { --phone-finish: #102f45; }
.ferry-landing .device:has(img[src*="night."]) { --phone-finish: #0e1b2c; }
.ferry-landing .device:has(img[src*="cloudy."]) { --phone-finish: #303d49; }
.ferry-landing .device:has(img[src*="monochrome."]) { --phone-finish: #deddd7; }
.ferry-landing .device:has(img[src*="orange."]) { --phone-finish: #52290f; }
/* Do not tint the screenshots or Dynamic Island. */
.ferry-landing .model-phone { background: transparent; box-shadow: none; }
.ferry-landing #main > section:not(.hero) h2 {
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.07;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.ferry-landing :is(.editorial-copy, .editorial-grid) h3 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.ferry-landing :is(.editorial-copy, .editorial-grid) p,
.ferry-landing .crossing-map-copy .editorial-grid p {
  font-size: 19px;
  line-height: 1.5;
  margin-top: 12px;
  max-width: 36ch;
  text-wrap: pretty;
}
.ferry-landing .notifications-body,
.ferry-landing .feedback-copy > p:not(.eyebrow) {
  font-size: 21px;
  line-height: 1.5;
  max-width: 35ch;
}
.ferry-landing .notifications-body p { line-height: inherit; text-wrap: pretty; }
.ferry-landing .lead { max-width: 42ch; font-size: 22px; line-height: 1.5; }
.ferry-landing .highlight-description { max-width: 30ch; }

/* Product and copy share an optical centre, with a quiet space between them.
   The larger classic phone leads; the timetable stays tucked behind it. */
.ferry-landing .departure-section > .shell { column-gap: 80px; row-gap: 40px; }
.ferry-landing .departure-section .paired-phones {
  width: 90%;
  max-width: 520px;
  aspect-ratio: .72;
}
.ferry-landing .departure-section .paired-phones .phone-back {
  left: 7%; top: 4% !important;
  --pose-roll: -6deg; transform: rotate(-6deg);
}
.ferry-landing .departure-section .paired-phones .phone-front {
  left: 38%; top: 14% !important;
  --pose-roll: 3deg; transform: rotate(3deg);
}
.ferry-landing .departure-section .editorial-copy { max-width: 400px; }
.ferry-landing .queue-cinema { column-gap: 96px; }
.ferry-landing .queue-caption { max-width: 440px; }
.ferry-landing .report-product { width: min(320px, 100%); transform: rotate(-4deg); }
.ferry-landing .notifications-intro { column-gap: 96px; }
.ferry-landing .theme-product { margin-block: 64px 48px; }

/* Always visible, with the same fine-print size as the AIS attribution. */
.ferry-landing .notification-settings {
  margin-top: 40px; color: var(--muted); font-size: 12px; line-height: 1.6;
}
@media (max-width: 1000px) and (min-width: 701px) {
  .ferry-landing .departure-section > .shell { column-gap: 40px; }
  .ferry-landing .queue-cinema,
  .ferry-landing .notifications-intro { column-gap: 48px; }
}
@media (max-width: 700px) {
  /* One shared mobile gutter. Background artwork remains edge-to-edge. */
  .ferry-landing { --mobile-gutter: clamp(24px, 8vw, 32px); }
  .ferry-landing .shell {
    width: calc(100% - var(--mobile-gutter) - var(--mobile-gutter));
  }
  .ferry-landing .queue-cinema,
  .ferry-landing .download-section,
  .ferry-landing .footer.shell {
    padding-inline: var(--mobile-gutter);
  }
  .ferry-landing .footer.shell { width: 100%; }
  .ferry-landing .hero.hero-unfold .hero-masthead {
    padding-inline: var(--mobile-gutter);
  }
  .ferry-landing .highlight-track {
    padding-inline: var(--mobile-gutter);
    scroll-padding-inline: var(--mobile-gutter);
  }
  .ferry-landing .highlight-card {
    flex-basis: calc(100vw - var(--mobile-gutter) - var(--mobile-gutter));
  }
  /* Remove desktop reading-column caps inside the shared mobile shell. */
  .ferry-landing :is(.editorial-copy, .editorial-grid) p,
  .ferry-landing .crossing-map-copy .editorial-grid p,
  .ferry-landing .notifications-body,
  .ferry-landing .feedback-copy > p:not(.eyebrow),
  .ferry-landing .lead,
  .ferry-landing .queue-caption {
    max-width: none;
  }
  .ferry-landing .queue-caption { width: 100%; }
  .ferry-landing #main > section:not(.hero) h2 {
    font-size: clamp(34px, 9.5vw, 48px);
    text-align: left;
  }
  .ferry-landing :is(.editorial-copy, .editorial-grid) h3 { font-size: 21px; }
  .ferry-landing :is(.editorial-copy, .editorial-grid) p,
  .ferry-landing .crossing-map-copy .editorial-grid p { font-size: 17px; }
  .ferry-landing .notifications-body,
  .ferry-landing .feedback-copy > p:not(.eyebrow),
  .ferry-landing .lead { font-size: 19px; }
  .ferry-landing .departure-section > .shell { gap: 40px; }
  .ferry-landing .departure-section .paired-phones { max-width: 360px; }
  .ferry-landing .departure-section .editorial-copy { max-width: none; }
  .ferry-landing .queue-cinema { gap: 48px; }
  .ferry-landing .report-product { width: min(260px, 80%); }
  .ferry-landing .theme-product { margin-block: 40px 32px; }
  .ferry-landing .notification-settings { margin-top: 32px; }
  /* Override the generic mobile section-title alignment. */
  .ferry-landing #main > #hamta h2 { text-align: center; }
  .ferry-landing #main > #utseende h2 { text-align: center; }
}

/* Reading rhythm for Expanded headings and normal-width body copy.
   Related heading/copy pairs stay closer than separate feature groups. */
.ferry-landing {
  --heading-copy-gap: 24px;
  --title-intro-gap: 32px;
  --title-features-gap: 56px;
}
.ferry-landing :is(.editorial-copy, .editorial-grid) p,
.ferry-landing .crossing-map-copy .editorial-grid p {
  margin-top: var(--heading-copy-gap);
  line-height: 1.6;
}
.ferry-landing .notifications-body,
.ferry-landing .chapter-heading .lead,
.ferry-landing .feedback-copy > p:not(.eyebrow) {
  margin-top: var(--title-intro-gap);
}
.ferry-landing .notifications-body p + p { margin-top: 24px; }
.ferry-landing .crossing-map-copy .editorial-grid {
  margin-top: var(--title-features-gap);
}
.ferry-landing .queue-cinema .queue-caption h2 { margin-bottom: 0; }
.ferry-landing .queue-caption .queue-features {
  margin-top: var(--title-features-gap);
}
.ferry-landing .editorial-copy .text-feature + .text-feature,
.ferry-landing .editorial-copy > .text-feature { margin-top: 40px; }
@media (max-width: 700px) {
  .ferry-landing {
    --heading-copy-gap: 20px;
    --title-intro-gap: 28px;
    --title-features-gap: 40px;
  }
  .ferry-landing .editorial-grid,
  .ferry-landing .queue-caption .queue-features { row-gap: 40px; }
}

/* Actual system captures: preserve app glass without a second CSS material. */
.ferry-landing .widget-preview.native-surface {
  display: block;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 25px;
}
.ferry-landing .widget-preview.native-surface::before { display: none; }
.ferry-landing .native-surface img { display: block; width: 100%; height: auto; }
.ferry-landing .activity-preview.native-surface { border-radius: 22px; }
/* Crop the system host's outer highlight and wallpaper pixels at the corners. */
.ferry-landing .widget-small.native-surface { clip-path: inset(1px round 34px); }
.ferry-landing .widget-medium.native-surface { clip-path: inset(1px round 34px); }