/* Layout: left-aligned editorial column (max 1160px), text measure ~62ch, product panels sit beside text on desktop and stack on phones */
:root {
  --paper:   #FFFFFF;
  --mist:    #EEF3F6;
  --ink:     #13233A;
  --slate:   #3E4C5F;
  --harbour: #0F5C8C;
  --signal:  #E4A43B;
  --signal-hover: #D8982F;
  --signal-edge: #A87314;
  --deep:    #0B3B5C;
  --border:  #B9C5D0;
  --link:    #0C527E;
  --rule:    #D5DEE6;
  --font-display: "Newsreader", Georgia, serif;
  --font-body:    "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-code:    "IBM Plex Mono", ui-monospace, monospace;

  --amber-ink: #7A4E00;
  --amber-bg:  #FBF1DC;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 112px);
  --wave-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 4 Q4 0.5 8 4 T16 4' fill='none' stroke='%230F5C8C' stroke-width='1.5'/%3E%3C/svg%3E");
  --wave-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20'%3E%3Cpath d='M6 0 Q1.5 5 6 10 T6 20' fill='none' stroke='%230F5C8C' stroke-width='1.75'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 0.5em;
}
h1 { font-size: 48px; font-weight: 600; }
h2 { font-size: 36px; }
h3 { font-size: 22px; font-weight: 600; line-height: 1.2; }

p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--harbour); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--harbour); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: calc(1160px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section) 0; background: var(--paper); }
.section.mist { background: var(--mist); }
.section:not(.mist) + .section:not(.mist) { padding-top: 0; }

.lede { font-size: 22px; line-height: 1.5; color: var(--slate); max-width: 52ch; }
.muted { color: var(--slate); }
.small { font-size: 15px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.btn-apply { background: var(--signal); color: var(--ink); }
.btn-apply:hover { background: var(--signal-hover); color: var(--ink); }
.btn-plain {
  background: var(--ink);
  color: var(--paper);
}
.btn-plain:hover { background: #22385A; }
.text-link { font-weight: 600; font-size: 18px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }

/* Header */
.site-header { background: var(--paper); position: relative; z-index: 10; }
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 80px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1;
}
.nav-desktop { display: flex; gap: 28px; margin-left: auto; }
.nav-desktop a, .nav-mobile a {
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
}
.nav-desktop a:hover, .nav-mobile a:hover { color: var(--harbour); text-decoration: underline; }
.nav-desktop a[aria-current="page"], .nav-mobile a[aria-current="page"] {
  color: var(--harbour);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.site-header .btn-apply { min-height: 44px; padding: 8px 20px; }

.menu { display: none; margin-left: auto; }
.menu summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 20px; height: 20px; }
.menu[open] summary .i-open { display: none; }
.menu:not([open]) summary .i-close { display: none; }
.nav-mobile {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--mist);
  padding: 8px var(--gutter) 24px;
  display: flex;
  flex-direction: column;
}
.nav-mobile a { padding: 12px 0; font-size: 18px; }

@media (max-width: 1020px) {
  .nav-desktop { display: none; }
  .menu { display: block; }
  .site-header .wrap { gap: 12px; }
}

/* Footer */
.site-footer { background: var(--paper); padding: 64px 0 48px; color: var(--ink); }
.section:not(.mist) + .site-footer, main:has(> .section:last-child:not(.mist)) + .site-footer { background: var(--mist); }
.site-footer .wordmark { font-size: 24px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-start; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 0; padding: 0; max-width: 640px; }
.footer-links a { color: var(--ink); font-size: 16px; }
.footer-legal { margin-top: 40px; color: var(--slate); font-size: 15px; }
.footer-legal p { margin: 0 0 4px; }

/* Page title for inner pages */
.page-head { padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 4vw, 56px); }
.page-head h1 { font-size: clamp(2.4rem, 4vw + 1rem, 3.5rem); letter-spacing: -0.01em; }

/* Generic two-column with a mock */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.split.flip > :first-child { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split.flip > :first-child { order: 0; }
}

.prose h2 { margin-top: 0; }
.prose h3 { margin-top: 40px; }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; max-width: 62ch; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--slate); }

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.hero h1 {
  font-size: clamp(2.6rem, 5vw + 1rem, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 24px;
}
.hero .lede { font-size: 20px; color: var(--slate); }
@media (max-width: 1140px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 720px; }
}

.stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  column-gap: 4%;
  align-items: start;
}
.stage .mock { position: relative; z-index: 2; }
.stage-email { grid-column: 1; grid-row: 1; }
.stage-booking { grid-column: 2; grid-row: 1; margin-top: 88px; }
.stage .route-draw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.route-path {
  fill: none;
  stroke: var(--harbour);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.route-dot { fill: var(--harbour); }
.stage.will-draw .route-path { stroke-dashoffset: 1; }
.stage.is-drawing .route-path { animation: route-draw 1.2s cubic-bezier(.45,.05,.3,1) forwards; }
@keyframes route-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .stage.will-draw .route-path, .stage.is-drawing .route-path { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 1140px) and (min-width: 721px) {
  .stage { max-width: 860px; }
}
@media (max-width: 720px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  .stage-booking { grid-column: 1; grid-row: 2; margin-top: 96px; }
}

/* ---------- Product mocks ---------- */
.mock {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 14px 36px -16px rgba(19, 35, 58, 0.28);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  overflow: hidden;
}
.mock p { max-width: none; }
.mock-pad { padding: 20px 22px; }
.mock .ref { font-family: var(--font-code); font-weight: 500; font-size: 15px; letter-spacing: 0.01em; }
.mock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  color: var(--slate);
}
.mock-bar .dots { display: flex; gap: 6px; }
.mock-bar .dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); }

/* email */
.email-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--rule); }
.email-from { font-weight: 700; font-size: 16px; }
.email-subject { font-size: 16px; margin-top: 2px; }
.email-meta { color: var(--slate); margin-top: 2px; }
.email-body { padding: 16px 22px 22px; }
.email-body dl { margin: 0; }
.email-body .row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 4px 0; }
.email-body dt { color: var(--slate); }
.email-body dd { margin: 0; font-weight: 600; }

/* booking */
.bk-head { padding: 20px 22px 16px; border-bottom: 1px solid var(--rule); }
.bk-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; margin: 0; }
.route {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--font-code);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}
.route .wave {
  flex: 1 1 auto;
  max-width: 140px;
  height: 8px;
  background: var(--wave-h) repeat-x left center / 16px 8px;
}
.seg {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 22px;
  border-bottom: 1px solid var(--rule);
}
.seg svg { width: 22px; height: 22px; color: var(--harbour); margin-top: 1px; }
.seg-name { font-weight: 600; }
.seg-when { color: var(--slate); }
.costing { padding: 14px 22px 4px; }
.costing table { width: 100%; border-collapse: collapse; }
.costing td { padding: 5px 0; vertical-align: top; }
.costing td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.costing tr.total td { border-top: 1px solid var(--rule); padding-top: 9px; font-weight: 700; font-size: 16px; }
.costing .gst { color: var(--slate); font-weight: 400; }
.bk-history { padding: 8px 22px 14px; color: var(--slate); display: flex; align-items: center; gap: 8px; }
.bk-history svg { width: 16px; height: 16px; flex: none; }
.app-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 22px 20px; }
.app-btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}
.app-btn.primary { background: var(--harbour); border-color: var(--harbour); color: var(--paper); }

/* itinerary */
.itin-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--rule);
}
.coast-mark { display: flex; align-items: center; gap: 8px; font-family: Georgia, "Newsreader", serif; font-style: italic; font-size: 19px; color: #1D4E5F; font-weight: 600; }
.coast-mark svg { width: 26px; height: 18px; }
.itin-client { color: var(--slate); }
.itin-title { padding: 18px 22px 0; }
.tabs { display: flex; gap: 22px; padding: 14px 22px 0; border-bottom: 1px solid var(--rule); }
.tabs span { padding-bottom: 10px; color: var(--slate); font-weight: 600; }
.tabs span.on { color: var(--ink); box-shadow: inset 0 -2px 0 #1D4E5F; }
.days { list-style: none; margin: 0; padding: 6px 22px 18px; }
.days li { padding: 12px 0; border-bottom: 1px solid var(--mist); }
.days li:last-child { border-bottom: 0; }
.day-date { font-weight: 700; }
.day-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; margin-top: 3px; }
.day-item time { font-family: var(--font-code); font-weight: 500; color: var(--slate); }

/* earnings list */
.earn-head, .earn-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 22px;
}
.earn-head { color: var(--slate); font-weight: 600; border-bottom: 1px solid var(--rule); padding-top: 14px; padding-bottom: 10px; }
.earn-row { border-bottom: 1px solid var(--mist); }
.earn-row:last-child { border-bottom: 0; }
.earn-row svg { width: 22px; height: 22px; color: var(--harbour); }
.earn-row .who { font-weight: 600; }
.earn-row .sub { color: var(--slate); }
.earn-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.earn-head span:last-child { text-align: right; }
.earn-row.flag { background: var(--amber-bg); }
.earn-row.flag .earn-amt { color: var(--amber-ink); }
.flag-note { grid-column: 2 / -1; font-weight: 600; color: var(--amber-ink); font-size: 15px; margin-top: -6px; }
@media (max-width: 560px) {
  .earn-head { display: none; }
  .earn-row { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; row-gap: 2px; }
  .flag-note { margin-top: 4px; }
  .earn-row .when { grid-column: 2; grid-row: 2; color: var(--slate); }
  .earn-row .earn-amt { grid-column: 3; grid-row: 1 / span 2; }
  .flag-note { grid-column: 2 / -1; grid-row: 3; }
}

/* ---------- Home sections ---------- */
.compare { margin-top: 8px; }
.compare h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-bottom: 24px; }
.bar-row { margin-bottom: 28px; }
.bar-label { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.bar-label strong { font-weight: 600; }
.bar-label .fig { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.1; }
.bar { height: 22px; border-radius: 3px; background: rgba(62, 76, 95, 0.42); }
.bar.ours { background: var(--harbour); }
.bar.signal { background: var(--signal); }
.bar-note { color: var(--slate); margin-top: 8px; font-size: 16px; }

.suits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(40px, 6vw, 88px); margin-top: 40px; }
@media (max-width: 760px) { .suits { grid-template-columns: minmax(0, 1fr); } }
.suits-not { margin-top: 40px; font-size: 20px; }
.link-list { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 24px; }

.statements { list-style: none; margin: 32px 0 0; padding: 0; max-width: 820px; }
.statements li {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw + 12px, 28px);
  line-height: 1.3;
  padding: 0 0 22px;
  margin: 0 0 22px;
}
.statements li:last-child { margin-bottom: 0; padding-bottom: 0; }

.person { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.portrait {
  width: 220px;
  aspect-ratio: 4 / 5;
  background: var(--mist);
  color: var(--slate);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  border-radius: 2px;
}
.mist .portrait { background: #DCE6EC; }
.portrait { overflow: hidden; border-radius: 16px; }
.portrait picture, .portrait img { display: block; width: 100%; height: 100%; }
.portrait img { object-fit: cover; object-position: 50% 30%; }
@media (max-width: 640px) {
  .person { grid-template-columns: minmax(0, 1fr); }
  .portrait { width: 160px; }
}

.closing h2 { font-size: clamp(32px, 3vw + 14px, 48px); }

/* ---------- Pricing ---------- */
.price-lines { list-style: none; margin: 0; padding: 0; }
.price-lines li { margin-bottom: clamp(32px, 4vw, 48px); }
.price-lines .big {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw + 12px, 48px);
  font-weight: 500;
  line-height: 1.15;
  display: block;
  margin-bottom: 8px;
}
.price-lines p { color: var(--slate); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(32px, 4vw, 64px); }
@media (max-width: 900px) { .cols-3 { grid-template-columns: minmax(0, 1fr); } }

.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); margin-top: 32px; align-items: start; }
@media (max-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr); } }
.calc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.calc-fields .field.wide { grid-column: 1 / -1; }
@media (max-width: 480px) { .calc-fields { grid-template-columns: minmax(0, 1fr); } }
.calc-group { grid-column: 1 / -1; margin: 12px 0 0; font-weight: 600; }
.calc-out .result-line { font-family: var(--font-display); font-size: clamp(24px, 2vw + 12px, 28px); line-height: 1.3; margin-top: 8px; max-width: 30ch; }

/* ---------- Forms ---------- */
.field label, .field legend { display: block; font-weight: 600; font-size: 17px; margin-bottom: 6px; color: var(--ink); }
.field .hint { color: var(--slate); font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="number"], .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font: inherit;
  font-size: 18px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2313233A' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--harbour); outline-offset: 1px; border-color: var(--harbour); }
.affix { position: relative; }
.affix .pre, .affix .post { position: absolute; top: 50%; transform: translateY(-50%); color: var(--slate); pointer-events: none; font-size: 18px; }
.affix .pre { left: 12px; }
.affix .post { right: 12px; }
.affix input.has-pre { padding-left: 28px; }
.affix input.has-post { padding-right: 32px; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field label.radio { display: flex; font-weight: 400; margin: 0; align-items: center; gap: 12px; min-height: 44px; font-size: 18px; }
.field .radio input { width: 20px; height: 20px; accent-color: var(--harbour); margin: 0; }
.form { display: grid; gap: 24px; max-width: 560px; }
.form-msg { font-weight: 600; color: var(--ink); background: var(--mist); padding: 12px 16px; border-radius: 6px; max-width: 560px; }
.form-msg[hidden] { display: none; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- How it works ---------- */
.flow { list-style: none; margin: 16px 0 0; padding: 0; max-width: 780px; position: relative; }
.flow li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; position: relative; padding-bottom: 48px; }
.flow li:last-child { padding-bottom: 0; }
.flow li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 64px;
  bottom: 10px;
  width: 12px;
  background: var(--wave-v) repeat-y center top / 12px 20px;
}
.flow .num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  color: var(--harbour);
  text-align: center;
  padding-top: 2px;
}
.flow h2 { font-size: 28px; margin-bottom: 8px; }

/* ---------- Topics, table ---------- */
.topics { columns: 2; column-gap: 56px; padding-left: 1.2em; max-width: 900px; margin: 0; }
.topics li { break-inside: avoid; margin-bottom: 8px; }
.topics li::marker { color: var(--slate); }
@media (max-width: 680px) { .topics { columns: 1; } }

.facts-table { width: 100%; max-width: 960px; border-collapse: collapse; margin-top: 16px; font-size: 17px; }
.facts-table th, .facts-table td { text-align: left; vertical-align: top; padding: 14px 20px 14px 0; border-bottom: 1px solid var(--rule); }
.facts-table th { font-weight: 600; color: var(--slate); font-size: 16px; }
.facts-table td:first-child { font-weight: 600; }
@media (max-width: 700px) {
  .facts-table thead { display: none; }
  .facts-table, .facts-table tbody, .facts-table tr, .facts-table td { display: block; width: 100%; }
  .facts-table tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .facts-table td { border: 0; padding: 2px 0; }
  .facts-table td[data-label]::before { content: attr(data-label) ": "; color: var(--slate); font-weight: 400; }
}

/* ---------- FAQ ---------- */
.faq-group { max-width: 820px; margin-bottom: 56px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group h2 { font-size: 28px; margin-bottom: 8px; }
.faq-group details { border-bottom: 1px solid var(--rule); }
.faq-group summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 12px 0;
  font-weight: 600;
  font-size: 19px;
}
.faq-group summary::-webkit-details-marker { display: none; }
.faq-group summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--harbour);
  border-bottom: 2px solid var(--harbour);
  transform: rotate(45deg) translate(-3px, -3px);
}
.faq-group details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-group details p { padding: 0 0 20px; margin: 0; }

/* ---------- Software page ---------- */

.facts { list-style: none; padding: 0; margin: 24px 0 0; }
.facts li { margin-bottom: 14px; max-width: 52ch; }
.facts strong { font-family: var(--font-display); font-weight: 600; font-size: 22px; display: block; line-height: 1.2; }

@media (max-width: 480px) {
  h2 { font-size: 30px; }
  .lede { font-size: 20px; }
  .mock-pad, .email-head, .email-body, .bk-head, .seg, .costing, .bk-history, .app-actions, .itin-top, .itin-title, .tabs, .days, .earn-row { padding-left: 16px; padding-right: 16px; }
}

.split.wide-right { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
@media (max-width: 900px) { .split.wide-right { grid-template-columns: minmax(0, 1fr); } }
.prose ul.facts { padding-left: 0; }

.photo { max-width: 1100px; }
.photo picture, .photo img { display: block; width: 100%; }
.photo img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
.photo-section { padding: 0 0 clamp(32px, 4vw, 48px); }
.section:not(.mist) + .photo-section { padding-top: 0; }