/* ==========================================================================
   AFTWISE™ — website stylesheet
   v23 · 2026-08-14

   Written to be read and edited by hand. Sections in order:
     1. Tokens
     2. Base & typography
     3. Layout primitives
     4. Header & navigation
     5. Buttons & links
     6. Heroes
     7. Section shells
     8. Components
     9. Plans
    10. Forms
    11. Footer
    12. Lightbox & motion
    13. Responsive
   ========================================================================== */


/* 1. TOKENS =============================================================== */

:root {
  /* Marine navies — the brand's structural color */
  --navy-950: #04151F;
  --navy-900: #08243A;
  --navy-800: #0E3A54;
  --navy-700: #14506E;

  /* Sea — the working accent */
  --sea-800: #0B5B60;
  --sea-700: #0F6F73;
  --sea-600: #14868A;
  --sea-300: #8FD3D0;
  --sea-200: #C4E9E6;

  /* Brass — used sparingly: rules, small caps, one button per screen */
  --brass-700: #8A6522;
  --brass-600: #B98C3C;
  --brass-400: #E0BE7C;
  --brass-200: #F2E0BC;

  /* Paper & ink — warm, not clinical white.
     --paper is the lightest ground on the site and is deliberately NOT #fff;
     a pure-white page reads cold and clinical against the navy and brass. */
  --paper:  #FBF7EF;
  --card:   #FFFCF6;
  --sand:   #F4EEE0;
  --sand-2: #EDE4D2;
  --mist:   #E9F0EF;
  --mist-2: #D9E6E5;

  --ink:   #0B2231;
  --text:  #33505F;
  /* Darkened twice: #64808E failed 4.5:1 on every ground, and #55707E still
     failed inside the tinted cards. #4C6673 clears 4.5:1 on paper, card,
     sand, mist and all ten card tints, with margin. */
  --muted: #4C6673;
  --line:  #DCD3C4;
  --line-cool: #CBD9DD;

  /* Plan colors — these match AftwiseAccessTier.accentColor in the app.
     Owner = blue, Cruiser = purple, Captain = orange. Do not re-map. */
  --owner:   #1677DA;
  --cruiser: #7153D9;
  --captain: #C55D13;

  /* Workflow phase colors */
  --phase-plan:     #1B6FC4;
  --phase-prepare:  #0F7F7A;
  --phase-operate:  #285C77;
  --phase-document: #6A4CC4;
  --phase-protect:  #B25A15;

  --shadow-lg: 0 30px 70px -24px rgba(4, 30, 46, .38);
  --shadow-md: 0 18px 44px -20px rgba(4, 30, 46, .30);
  --shadow-sm: 0 6px 18px -8px rgba(4, 30, 46, .22);

  --max: 1340px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Type. The audience is entirely Apple — ui-serif resolves to New York on
     Safari, which is why display type here reads as editorial rather than as
     another Inter site. Georgia carries the fallback. */
  --font-display: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}


/* 2. BASE & TYPOGRAPHY ==================================================== */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing. Images carry width/height attributes so the
   browser can reserve space before they load; without height:auto, capping the
   width leaves the literal attribute height in place and the picture stretches
   vertically. Rules below that set an explicit height still override this. */
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.018em;
}

h1 { font-size: clamp(30px, 3.6vw, 44px); }
h2 { font-size: clamp(23px, 2.4vw, 30px); line-height: 1.16; }
h3 { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.22; letter-spacing: -.01em; }
h4 { font-size: 17px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Overline — replaces the "01 / 02 / 03" numbering the old build used */
.overline {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sea-700);
}
.overline.on-dark { color: var(--sea-300); }
.overline.brass { color: var(--brass-700); }
.overline.on-dark.brass { color: var(--brass-400); }

.lead {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--text);
}
.on-dark .lead, .lead.on-dark { color: #D6E6EA; }

.fine { font-size: 15px; line-height: 1.55; color: var(--muted); }

/* A paragraph sitting directly inside a full-width container runs to a ~150
   character measure at 1340px, which is unreadable however big the type is.
   Anything nested in a card, grid cell or split column is unaffected. */
.container > p, .container > .fine { max-width: 88ch; }
.container > .text-center { margin-inline: auto; }
.tiny { font-size: 13px; line-height: 1.5; color: var(--muted); }

.skip-link {
  position: fixed; left: 16px; top: -120px; z-index: 200;
  padding: 12px 18px; border-radius: 8px;
  background: var(--paper); color: var(--ink); font-weight: 700;
  box-shadow: var(--shadow-md);
}
.skip-link:focus { top: 14px; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--sea-600);
  outline-offset: 3px;
  border-radius: 4px;
}


/* 3. LAYOUT PRIMITIVES ==================================================== */

.container { width: min(var(--max), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.container-narrow { width: min(760px, 100% - (var(--gutter) * 2)); margin-inline: auto; }

.section { padding: clamp(30px, 3.2vw, 46px) 0; position: relative; }
.section--tight { padding: clamp(24px, 2.4vw, 34px) 0; }

/* The four section grounds. Alternate them so no two neighbors match. */
.section--paper { background: var(--paper); }
.section--sand  { background: var(--sand); }
.section--mist  { background: var(--mist); }
.section--navy  { background: var(--navy-900); color: #CFE1E7; }

:is(.section--navy, .photo-band, .hero) h1, :is(.section--navy, .photo-band, .hero) h2, :is(.section--navy, .photo-band, .hero) h3 { color: #fff; }
:is(.section--navy, .photo-band, .hero) .fine, :is(.section--navy, .photo-band, .hero) .tiny { color: #B9CFD8; }

/* A restrained water texture, never a literal chart pasted behind copy */
.section--navy::before {
  content: ""; position: absolute; inset: 0;
  background: url("photos/water-texture.webp") center / cover no-repeat;
  opacity: .07; filter: brightness(.5);
  pointer-events: none;
}
.section--navy > .container { position: relative; }

.section-head { max-width: 760px; margin-bottom: clamp(18px, 1.8vw, 26px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 + p { margin-top: 18px; }

/* Headings carry no bottom margin by default (cards set their own), so a
   bare heading followed by prose sat flush against it. Margins collapse,
   so this does not double up inside cards. */
:is(h2, h3, h4) + :is(p, ul, ol) { margin-top: 14px; }

.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--brass-600), transparent 62%);
}
.section--navy .rule { background: linear-gradient(90deg, var(--brass-400), transparent 62%); }

/* Asymmetric split. Deliberately not 50/50 — even columns are what makes a
   page read as generated. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(26px, 3vw, 40px) clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--wide-left { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
/* Copy narrow, artwork wide — for sections where the screenshot is the point */
.split--wide-right { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.split--flip > *:first-child { order: 2; }

/* A short intro that would otherwise run as one tall narrow column. Splits it
   across the full measure so it sits shallower on the page. */
/* Used once, on cruising.html. It was two equal columns, but the paragraphs
   are deliberately unequal — a long setup and a short punchline — so the right
   column ended a long way above the left and left a hole. It also broke the
   reading order: the punchline sits beside the setup rather than after it.
   One column at a readable measure fixes both and cannot come apart again when
   the copy is edited. */
.intro-columns {
  display: grid;
  gap: 8px;
  align-items: start;
  max-width: 74ch;
}
.intro-columns > :last-child {
  margin-top: 22px; padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: clamp(19px, 1.8vw, 23px);
  font-family: var(--font-display);
  line-height: 1.42;
  color: var(--ink);
  max-width: 62ch;
}


/* 4. HEADER & NAVIGATION ================================================== */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(4, 21, 31, .93);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.nav-wrap {
  min-height: 74px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand img { width: 132px; height: auto; }
.brand span {
  color: var(--brass-400);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  border-left: 1px solid rgba(255, 255, 255, .22);
  padding-left: 14px;
  white-space: nowrap;
}

.nav-links {
  display: flex; align-items: center; gap: 2px;
  font-size: 15px; font-weight: 550;
  color: #CFE0E6;
}
.nav-links a { padding: 9px 12px; border-radius: 8px; transition: background .16s ease, color .16s ease; }
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.nav-links a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--brass-400); border-radius: 8px 8px 0 0; }

.nav-cta {
  margin-left: 10px;
  padding: 10px 17px !important;
  border-radius: 8px;
  background: var(--brass-400);
  color: var(--navy-950) !important;
  font-weight: 700;
}
.nav-links a.nav-cta:hover, .nav-cta:hover { background: color-mix(in srgb, var(--brass-400) 70%, var(--brass-600)); }
  /* The selector outranks `.nav-links a:hover` above, which until 21 Oct 2026 won on hover and swapped the gold for a
     faint white wash over the dark header: the button looked dimmed (Brett). Hover now deepens the gold instead. */

.menu-toggle {
  display: none;
  width: 46px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px;
  background: transparent; cursor: pointer;
}
.menu-toggle span { display: block; width: 20px; height: 1.5px; margin: 4px auto; background: #fff; }


/* 5. BUTTONS & LINKS ====================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 24px;
  border: 1px solid transparent; border-radius: 9px;
  font-size: 16px; font-weight: 650;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--brass { background: var(--brass-400); color: var(--navy-950); }
.btn--brass:hover { background: color-mix(in srgb, var(--brass-400) 70%, var(--brass-600)); }  /* same: richer, not paler */

.btn--navy { background: var(--navy-900); color: #fff; }
.btn--navy:hover { background: var(--navy-800); }

.btn--ghost { border-color: rgba(255, 255, 255, .42); color: #fff; background: rgba(4, 21, 31, .28); }
.btn--ghost:hover { border-color: #fff; background: rgba(4, 21, 31, .48); }

.btn--outline { border-color: var(--line-cool); color: var(--ink); background: var(--card); }
.btn--outline:hover { border-color: var(--sea-600); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px;               /* was 24px tall — below a comfortable touch target */
  color: var(--sea-700); font-weight: 650;
  border-bottom: 1px solid transparent;
  transition: border-color .16s ease, gap .16s ease;
}
.arrow-link::after { content: "→"; transition: transform .16s ease; }
.arrow-link:hover { border-color: currentColor; }
.arrow-link:hover::after { transform: translateX(3px); }
.on-dark .arrow-link, .arrow-link.on-dark { color: var(--brass-400); }


/* 6. HEROES =============================================================== */

.hero {
  position: relative;
  display: grid; align-items: end;
  min-height: 640px;
  color: #fff;
  background-color: var(--navy-950);
  background-position: center 45%;
  background-size: cover;
  background-repeat: no-repeat;
  isolation: isolate;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(94deg, rgba(3, 17, 26, .96) 0%, rgba(4, 26, 40, .88) 34%, rgba(4, 26, 40, .42) 68%, rgba(4, 26, 40, .10) 100%),
    linear-gradient(0deg, rgba(3, 17, 26, .70), transparent 46%);
}
/* Home hero anchors its copy to the bottom under a vertical scrim, so the
   people in the photograph stay visible above it. A side scrim covered the
   left-hand figure entirely, which threw away half the picture. */
.hero--home {
  min-height: min(68vh, 560px);
  background-image: url("photos/home-hero.webp");
  background-position: center 36%;
}
.hero--home::after {
  background:
    linear-gradient(0deg, rgba(3, 17, 26, .97) 0%, rgba(3, 18, 28, .92) 30%, rgba(3, 18, 28, .58) 55%, rgba(3, 18, 28, .12) 82%, rgba(3, 18, 28, .30) 100%);
}
.hero__inner { padding: clamp(72px, 8vw, 104px) 0 clamp(42px, 4.6vw, 62px); }
.hero--home .hero__inner { padding-top: clamp(170px, 22vw, 270px); }
.hero__copy { max-width: 660px; }
.hero--home .hero__copy { max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: 22px; text-wrap: balance; }
.hero .lead { color: #DCEAEE; max-width: 580px; }

/* Interior page hero — shorter, photo optional */
.hero--page { min-height: 0; }
.hero--page .hero__inner { padding: clamp(44px, 4.5vw, 60px) 0 clamp(34px, 3.5vw, 44px); }
.hero--page h1 { font-size: clamp(26px, 2.8vw, 34px); margin-bottom: 12px; }
.hero--page .lead { font-size: clamp(16px, 1.4vw, 18px); max-width: 640px; }
.hero--flat { background-image: none; background: linear-gradient(128deg, var(--navy-950), var(--navy-700)); }
.hero--flat::after { background: none; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin-top: 32px; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .20);
  font-size: 14.5px; font-weight: 550; color: #C3D9DF;
}
.hero-facts span { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts svg { width: 17px; height: 17px; flex: none; color: var(--sea-300); }


/* 7. SECTION SHELLS ======================================================= */

/* Quiet credibility strip. Facts, not badges. */
.trust-strip {
  background: var(--navy-950);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 17px 0;
}
.trust-strip ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px clamp(18px, 3vw, 40px);
  margin: 0; padding: 0; list-style: none;
  font-size: 14px; font-weight: 600; letter-spacing: .05em;
  color: #A9C4CD; text-align: center;
}
.trust-strip li { display: inline-flex; align-items: center; gap: 9px; }
.trust-strip li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--brass-600); flex: none;
}

/* Full-bleed editorial photo band */
.photo-band {
  position: relative;
  min-height: clamp(380px, 46vw, 560px);
  display: grid; align-items: center;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  color: #fff;
}
/* The scrim has to carry body copy, not just a headline — the Operate band on
   the product page runs a five-item list across it. Held dark enough that the
   list stays readable over the bright water on the right of the frame. */
.photo-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(3, 18, 28, .94) 0%, rgba(3, 18, 28, .86) 38%, rgba(3, 18, 28, .58) 66%, rgba(3, 18, 28, .16) 92%);
}
.photo-band > .container { position: relative; z-index: 1; padding: clamp(32px, 3.4vw, 46px) 0; }
/* A band that carries a line or two rather than a list can be shorter (13 Sep 2026). */
.photo-band--short { min-height: clamp(300px, 34vw, 440px); }
.photo-band__copy { max-width: 560px; }
.photo-band h2 { color: #fff; }
.photo-band p { color: #D8E7EB; }


/* 8. COMPONENTS =========================================================== */

/* -- Audience cards: three real people, not two abstract size brackets ---- */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 26px); }

.audience {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.audience:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.audience img { width: 100%; height: 224px; object-fit: cover; }
.audience__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.audience__who {
  font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sea-700); margin-bottom: 10px;
}
.audience h3 { margin-bottom: 12px; }
.audience p { font-size: 17px; }
.audience .arrow-link { margin-top: auto; padding-top: 18px; }

/* -- Workflow band: Plan → Prepare → Operate → Document → Protect --------
   Color-differentiated, connected by a rule, never numbered. */
.workflow { background: linear-gradient(180deg, var(--navy-950), var(--navy-800)); padding: clamp(26px, 3vw, 40px) 0; }
.workflow__head { text-align: center; margin-bottom: 26px; }
.workflow__head h2 { color: #fff; font-size: clamp(26px, 2.8vw, 36px); }
.workflow__head p { color: #B7CFD8; max-width: 620px; margin-inline: auto; margin-top: 12px; }

.workflow__track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.workflow__track::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28) 12%, rgba(255, 255, 255, .28) 88%, transparent);
}

.phase {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 8px; color: #fff;
}
.phase__dot {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .26);
  background: var(--navy-900);
  margin-bottom: 16px;
  transition: transform .18s ease;
}
.phase:hover .phase__dot { transform: translateY(-3px); }
.phase__dot svg { width: 24px; height: 24px; }
.phase b { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.phase small { display: block; margin-top: 7px; font-size: 14.5px; line-height: 1.42; color: #B4CCD6; }

.phase--plan     .phase__dot { background: color-mix(in srgb, var(--phase-plan) 62%, var(--navy-950)); border-color: color-mix(in srgb, var(--phase-plan) 70%, transparent); color: #DCEEFF; }
.phase--prepare  .phase__dot { background: color-mix(in srgb, var(--phase-prepare) 62%, var(--navy-950)); border-color: color-mix(in srgb, var(--phase-prepare) 70%, transparent); color: #D6F7F3; }
.phase--operate  .phase__dot { background: color-mix(in srgb, var(--phase-operate) 72%, var(--navy-950)); border-color: color-mix(in srgb, var(--phase-operate) 80%, transparent); color: #E4F2F8; }
.phase--document .phase__dot { background: color-mix(in srgb, var(--phase-document) 62%, var(--navy-950)); border-color: color-mix(in srgb, var(--phase-document) 70%, transparent); color: #EAE1FF; }
.phase--protect  .phase__dot { background: color-mix(in srgb, var(--phase-protect) 62%, var(--navy-950)); border-color: color-mix(in srgb, var(--phase-protect) 70%, transparent); color: #FFE6CB; }

/* -- Device frames -------------------------------------------------------- */
.device {
  display: block; position: relative; width: 100%;
  padding: 14px 14px 34px;
  border: 0; border-radius: 22px;
  background: linear-gradient(150deg, #26313A, #0A0E12);
  box-shadow: var(--shadow-lg);
  cursor: zoom-in;
  transition: transform .2s ease;
}
.device:hover { transform: translateY(-4px); }
.device__screen {
  display: block; overflow: hidden;
  border-radius: 12px; background: #EEF3F5;
  aspect-ratio: var(--ratio, 16 / 10);
}
/* Product screenshots are never cropped. `cover` cut the edges off captures
   whose ratio did not match the frame, hiding exactly the record detail the
   surrounding copy points at. */
.device__screen img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.device__screen img.fill { object-fit: cover; object-position: top center; }

/* Each frame takes the shape of the capture it holds, so nothing is cropped
   AND nothing floats in letterbox bars. One 16/10 frame for everything left
   the 1.91-ratio locks mockup and the 0.80 portrait trip mockup shrunken
   inside gray margins.
   WHEN YOU REPLACE A SCREENSHOT: update its ratio here to the new pixel
   dimensions and it fills the frame again. */
.device--dashboard { --ratio: 2048 / 2530; }  /* home-screen-underway.webp, R108 (iPad portrait, device shot) */
.device--alerts    { --ratio: 2064 / 2403; }  /* alerts-done-asymmetry.webp, R108 (iPad, breadcrumb cropped) */
.device--equipment { --ratio: 2064 / 2355; }  /* equipment-generator-m844dw3g.webp, build 10298, 28 Oct 2026: logo-free demo photo, Hours & Service block (replaced the 25 Aug frame) */
.device--insurance { --ratio: 2032 / 2124; }  /* insurance-total-loss-page-one.webp, R108 (iPad, viewer chrome cropped) */
.device--locks     { --ratio: 1387 / 2138; }  /* locks-directory-champlain.webp, round 179 (iPad portrait, content pane, sidebar and breadcrumb cropped) */
.device--checklist { --ratio: 1206 / 2370; }  /* checklist-run-predeparture-voice-r300.webp, reshot 28 Oct 2026 from the current app code (footer Version 1.0.0 (10299), file named build10300); iPhone 17 Pro simulator, iOS 26.5; status bar, sheet grabber and home strip cropped; 105 px taller than the r290 frame */
.device--sendlocation { --ratio: 1320 / 2269; }  /* send-my-location-sheet.webp, round 376 (iPhone 17 Pro Max simulator, status bar cropped) */  /* checklist-run-departure-from-dock.webp, R108 (iPhone 17 Pro, sheet grabber and status bar cropped) */
.device--trip      { --ratio: 2064 / 2542; }  /* trip-workspace-underway.webp, round 212 (iPad, rows 152-2694: nav bar and scroll indicator out) */
.device--fuel      { --ratio: 1600 / 913; }   /* fuel-tanks-mixed.webp, R107 */
.device--burn      { --ratio: 2064 / 2467; }  /* burn-curve-recorded-settings.webp, R108 (iPad, chrome cropped) */
.device--rings     { --ratio: 2064 / 2680; }  /* range-rings-chip-legend.webp, R108 (iPad portrait, status bar trimmed) */
.device--trailer   { --ratio: 2064 / 2467; }  /* trailer-pre-tow-inspection.webp, R108 (iPad, chrome cropped) */
.device--schematic { --ratio: 1940 / 1250; }  /* schematic-gb54-oneline-r290.webp, build 10290, 21 Oct 2026 (iPad editor canvas; drawn symbols on every block; no fuse ratings; replaced the round-200 frame) */
.device--vmap      { --ratio: 2064 / 2402; }  /* vessel-map-flybridge-hardtop.webp, R108 (iPad portrait, sidebar collapsed) */
.device--cost      { --ratio: 1394 / 2360; }  /* cost-analysis-total-sources.webp, R108 (iPad portrait, content pane, breadcrumb cropped) */
.device--weather   { --ratio: 2048 / 2566; }  /* marine-weather-tides-noaa.webp, R108 (iPad portrait, card header and clipped disclaimer trimmed) */
.device--seatime   { --ratio: 2064 / 2467; }  /* sea-service-not-claimed.webp, R108 (iPad, chrome cropped) */
.device--boarding-report { --ratio: 2064 / 1671; }  /* boarding-inspection-report-packet.webp, app round 191 (iPad portrait; breadcrumb rule cropped; the report sheet with the packet button over the dimmed list) */
.device--boarding-list   { --ratio: 2064 / 2196; }  /* boarding-inspection-list-r194.webp, app round 195 (iPad portrait; breadcrumb rule cropped; ends after the first card, above the fading scroll indicator) */
.device--thisleg { --ratio: 1367 / 985; }  /* this-leg-card.webp, formerly a framed screenshot without a lightbox; card + lightbox since 8 Sep 2026 */
.device--lockinfo { --ratio: 1492 / 1558; }  /* lock-information-c1.webp, formerly a framed screenshot without a lightbox; card + lightbox since 8 Sep 2026 */
.device--tasks { --ratio: 2064 / 2299; }  /* exception-followup-task.webp, formerly a framed screenshot without a lightbox; card + lightbox since 8 Sep 2026 */
.device--failrun { --ratio: 2048 / 2633; }  /* checklist-run-engine-room-failed-r301.webp, reshot 28 Oct 2026 (night) from build 10301 after the review-list rows were fixed to show each step's own words (row 7 Bilge level and condition, row 8 Bilge pumps); iPad Air 13-inch simulator, iOS 26.5; status bar cropped; same 2048 x 2633 crop as the r300 frame */
.device--voyage { --ratio: 2064 / 2562; }  /* voyage-summary-generator.webp, formerly a framed screenshot without a lightbox; card + lightbox since 8 Sep 2026 */
.device--writeplan { --ratio: 2064 / 1177; }  /* write-a-plan-templates.webp, app round 194 (iPad portrait; breadcrumb rule cropped; ends after the Write a Plan card) */
.device--wasteplan { --ratio: 1822 / 2523; }  /* waste-management-plan-demo-page-one.webp, app round 193 template (page one, cropped around the letterhead and footer with an even white margin; the viewer's page and background are both white) */
.device__camera {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #4A555D;
}
.device__caption {
  position: absolute; left: 0; right: 0; bottom: 11px;
  text-align: center; font-size: 12px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: #A8B9C2;
}
/* Frames are capped by HEIGHT, not width (8 Sep 2026, Brett: "the screenshots are
   so large and you have to keep scrolling"). Each frame carries its capture's
   --ratio, so width = 500px tall × ratio, never wider than 560px. A portrait
   capture that ran 800–1,300px tall now runs about 500; the lightbox is the
   full-size view. */
.device--tablet { max-width: min(520px, calc(420px * var(--ratio, 1.33))); margin-inline: auto; border-radius: 22px; }
/* These carry a DEFAULT, not an override. Written as a bare `4 / 3` they beat
   the --ratio rule above on specificity and every per-asset ratio was silently
   ignored, letterboxing all six tablet frames. */
.device--tablet .device__screen { aspect-ratio: var(--ratio, 4 / 3); }
.device--phone { max-width: 220px; margin-inline: auto; border-radius: 32px; padding: 10px 10px 30px; }
.device--phone .device__screen { aspect-ratio: var(--ratio, 9 / 19.5); border-radius: 26px; }

/* A frame standing on its own rather than in a split column. `--tall` narrows a
   portrait capture: at the full 760px a 0.66-ratio screenshot runs over 1100px
   down the page and shoves everything after it out of view. */
.device--center { margin-inline: auto; }
.device--tall   { max-width: min(340px, calc(420px * var(--ratio, 1))); margin-inline: auto; }

/* -- Module index: the app's real surface area, stated plainly ------------ */
.module-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.module-group h3 { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 2px solid var(--brass-600); }
.section--navy .module-group h3 { border-color: var(--brass-400); }
.module-group ul { margin: 0; padding: 0; list-style: none; }
.module-group li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  font-size: 16.5px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.module-group li:last-child { border-bottom: 0; }
.module-group li b { font-weight: 600; color: #fff; }
.module-group li span { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tier-tag--owner   { color: #7DB9F5; }
.tier-tag--cruiser { color: #BBA8F5; }
.tier-tag--captain { color: #F0AE72; }

/* A "+ CAPTAIN" mark on a row whose STARTING tier is Owner or Cruiser.
   The index tags each workspace with the plan it opens on, which showed three
   gold rows against twenty-seven — and read as "Captain is thin" when Captain
   in fact deepens a third of the list. These put the gold where the work is. */
.module-group li .tier-tags { display: flex; gap: 12px; align-items: baseline; }
.tier-plus { color: #F0AE72; opacity: .95; }
.tier-plus::before { content: "+ "; }

/* -- Card grids ---------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
/* Six cards on auto-fit spread to five-plus-one on a wide screen, which
   orphans the last one. Pinned to three so it reads as two rows that echo
   the three columns of the module index above it. */
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid--3 { grid-template-columns: 1fr; } }

.card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 12px; }
.card p { font-size: 17px; }
.card p:last-child { margin-bottom: 0; }
.section--mist .card { border-color: var(--line-cool); }
.section--navy .card {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: none;
}

/* A Captain card. The module index tags each row with the plan it STARTS on,
   which structurally flatters the cheapest plan: eighteen blue rows and three
   gold ones read as "Captain is thin" when the truth is that Captain contains
   all thirty. These carry the brass edge the CAPTAIN tag uses, so the block
   reads as the same colour of thing rather than as an afterthought. */
/* The Aftwise Captain panel on the module index.
   Counting workspaces sells against Captain — eighteen Owner rows to three of
   its own — so the tier gets its own ground instead of a longer list. A brass
   top edge and a warm wash tie it to the CAPTAIN tag; the cards inside keep the
   same brass edge so the block reads as one thing. */
.captain-panel {
  margin-top: clamp(38px, 4.6vw, 66px);
  padding: clamp(26px, 3.2vw, 46px);
  border: 1px solid rgba(224, 190, 124, .34);
  border-top: 3px solid var(--brass-400);
  border-radius: 18px;
  background: rgba(224, 190, 124, .06);
}
.captain-panel .card { background: rgba(255, 255, 255, .05); }

.card--captain { border-left-width: 3px; border-left-style: solid; }
/* `.section--navy .card` sets border-color on all four sides and outranks a
   single class, so the brass edge has to be stated at the same specificity. */
.section--navy .card--captain { border-left-color: var(--brass-400); }
.card--captain h3 { color: var(--brass-400); }



/* Tinted cards. A row of four identical white boxes is the single most
   "generated"-looking thing a page can do, and on a warm ground it also reads
   as a bank of glare. Each card takes its own --tint. */
.card--tint {
  border-color: color-mix(in srgb, var(--tint) 28%, transparent);
  background:
    linear-gradient(170deg,
      color-mix(in srgb, var(--tint) 14%, var(--card)),
      color-mix(in srgb, var(--tint) 6%, var(--card)));
}
.card--tint .card__icon {
  background: #fff;
  border-color: color-mix(in srgb, var(--tint) 55%, #fff);
  color: color-mix(in srgb, var(--tint) 85%, #000);
}
.card--tint h3 { color: color-mix(in srgb, var(--tint) 62%, var(--ink)); }

.tint-plan     { --tint: var(--phase-plan); }
.tint-prepare  { --tint: var(--phase-prepare); }
.tint-operate  { --tint: var(--phase-operate); }
.tint-document { --tint: var(--phase-document); }
.tint-protect  { --tint: var(--phase-protect); }
.tint-owner    { --tint: var(--owner); }
.tint-cruiser  { --tint: var(--cruiser); }
.tint-captain  { --tint: var(--captain); }
.tint-sea      { --tint: var(--sea-700); }
.tint-brass    { --tint: var(--brass-600); }

/* Icon medallions (13 Sep 2026): the same device as the figure's nodes — a white
   disc with a ring in the card's tint and a soft shadow — replaces the flat
   square chip everywhere a card carries an icon. */
.card__icon {
  width: 52px; height: 52px; margin-bottom: 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff; color: var(--sea-700);
  border: 2px solid #7FBAC0;
  box-shadow: 0 6px 16px rgba(8, 36, 58, .12);
}
.card__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.section--navy .card__icon { background: rgba(255, 255, 255, .06); border-color: rgba(143, 211, 208, .55); color: var(--sea-300); box-shadow: none; }
.strip-list .card__icon { width: 44px; height: 44px; margin-bottom: 12px; }

/* -- Numbered-free step flow (QR) ---------------------------------------- */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 16px; }
/* The steps carry a sea accent that deepens across the three, so the row reads
   as a sequence rather than three equal boxes, and so the cards separate from
   the ground. Used on index (mist), get-started and equipment (both paper) —
   all light, which is why a tint this light is safe on every one of them.
   :nth-of-type counts <article> only, so the <span> arrows between them do not
   shift the numbering. */
.flow__step {
  --step: var(--sea-600);
  padding: 28px 24px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--step) 28%, var(--line-cool));
  border-top: 3px solid var(--step);
  border-radius: 15px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--step) 10%, var(--card)) 0%,
    var(--card) 62%);
  box-shadow: var(--shadow-sm);
}
.flow__step:nth-of-type(2) { --step: var(--sea-700); }
.flow__step:nth-of-type(3) { --step: var(--sea-800); }
.flow__step h3 { color: color-mix(in srgb, var(--step) 78%, #000); }
.flow__step .card__icon { margin-inline: auto; }
.flow__step h2, .flow__step h3 { font-size: 21px; margin-bottom: 9px; }
.flow__step p { font-size: 16px; margin: 0; }
.flow__arrow { align-self: center; color: var(--sea-600); font-size: 26px; font-weight: 300; }

/* -- Stat row ------------------------------------------------------------ */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 40px); }
/* Three plans, not four stats. Declared AFTER .stat-row: the base rule sits
   later in the file and would otherwise win at equal specificity. */
.stat-row--3 { grid-template-columns: repeat(3, 1fr); }
.stat { border-left: 2px solid var(--brass-600); padding-left: 20px; }
.section--navy .stat { border-color: var(--brass-400); }
.stat b {
  display: block;
  font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 600; line-height: 1; color: var(--ink); letter-spacing: -.02em;
}
.section--navy .stat b { color: #fff; }
.stat span { display: block; margin-top: 10px; font-size: 15.5px; line-height: 1.4; }

/* Plan colours on the stat row, so a price means the same thing here as on the
   cards in plans.html — Owner blue, Cruiser purple, Captain orange, matching
   AftwiseAccessTier.accentColor in the app. The fourth stat is "Free", which is
   not a tier, so it keeps the brass rule.

   Declared AFTER `.stat` for the same reason `.stat-row--3` is: these override a
   shorthand at equal specificity and the base rule would otherwise win.
   `.section--navy .stat` stays more specific than these, so the navy stat row on
   get-started.html keeps its brass-and-white treatment, where these hues would
   not clear contrast against the dark ground. */
.stat--owner   { --tier: var(--owner); }
.stat--cruiser { --tier: var(--cruiser); }
.stat--captain { --tier: var(--captain); }
.stat--owner, .stat--cruiser, .stat--captain {
  border-left-color: color-mix(in srgb, var(--tier) 65%, transparent);
}
.stat--owner b, .stat--cruiser b, .stat--captain b {
  color: color-mix(in srgb, var(--tier) 88%, #000);
}

/* -- Pull quote / founder note ------------------------------------------- */
.note {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(24px, 3vw, 44px) clamp(28px, 4vw, 60px); align-items: start;
}
.note { align-items: stretch; }
.note__portrait { border-radius: 15px; overflow: hidden; box-shadow: var(--shadow-md); }
.note__portrait img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.note__body p {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.5;
  color: var(--ink);
}
.section--navy .note__body p { color: #E5F0F3; }
.note__sign {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-body); font-size: 14.5px; color: var(--muted);
}
.section--navy .note__sign { border-color: rgba(255, 255, 255, .18); color: #9FB9C4; }
.note__sign b { display: block; font-size: 16px; color: var(--ink); font-weight: 650; }
.section--navy .note__sign b { color: #fff; }

/* -- Before / after pair --------------------------------------------------
   Same frame, same light, one changed variable. The captions carry the honest
   claim: the paper does not vanish, it stops being the only copy. */
.compare-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.compare-pair figure { margin: 0; }
.compare-pair img { width: 100%; border-radius: 14px; box-shadow: var(--shadow-md); }
.compare-pair figcaption {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 13px; font-size: 15.5px; line-height: 1.45; color: var(--text);
}
/* The caption text must be ONE flex child. Left bare, an inline <em> inside it
   becomes its own flex item and the sentence breaks apart around it. */
.compare-pair figcaption > span { flex: 1; }
.compare-pair figcaption b {
  flex: none;
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sea-700);
}

/* -- Boat-type list ----------------------------------------------------------
   A "find yourself in this list" device. Owners scan for their own boat and
   stop reading the moment they see it. Set as plain words with a dot between
   them, not pills: a reader took the pills for buttons (13 Sep 2026). */
.type-list {
  display: flex; flex-wrap: wrap; gap: 4px 0;
  margin: 0; padding: 0; list-style: none;
  font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--ink);
}
.type-list li { padding: 0; border: 0; background: none; border-radius: 0; }
.type-list li:not(:last-child)::after { content: "\00b7"; margin: 0 11px; color: var(--brass-600); font-weight: 700; }
:is(.section--navy, .photo-band, .hero) .type-list { color: #E4EFF2; }
.type-list li.is-more { color: var(--muted); font-style: italic; }

/* -- Detail list (specs, honest constraints) ------------------------------ */
.detail-list { margin: 0; padding: 0; list-style: none; }
.detail-list li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
}
.detail-list li:last-child { border-bottom: 0; }
.detail-list li::before {
  content: ""; position: absolute; left: 4px; top: 21px;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--sea-600);
}
:is(.section--navy, .photo-band, .hero) .detail-list li { border-color: rgba(255, 255, 255, .16); color: #DCE9ED; }
:is(.section--navy, .photo-band, .hero) .detail-list li::before { background: var(--sea-300); }
.detail-list b { color: var(--ink); font-weight: 650; }
:is(.section--navy, .photo-band, .hero) .detail-list b { color: #fff; }

/* -- Callout ------------------------------------------------------------- */
.callout {
  padding: 26px 30px;
  border-left: 3px solid var(--brass-600);
  border-radius: 0 12px 12px 0;
  background: var(--sand-2);
  font-size: 17px;
}
:is(.section--navy, .photo-band, .hero) .callout { background: rgba(224, 190, 124, .14); border-color: var(--brass-400); color: #E3EFF2; }
.callout b { color: var(--ink); }
:is(.section--navy, .photo-band, .hero) .callout b { color: #fff; }

/* -- In detail: mechanism-level copy folded under the pitch (8 Sep 2026) --
   The pitch stays open; how it works and its edge cases sit one tap away, on
   the page, so every sentence still meets the claims gate and the ledger. */
.indepth { margin-top: 10px; }
li > .indepth { margin-top: 6px; }
.indepth summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sea-600);
}
.indepth summary::-webkit-details-marker { display: none; }
.indepth summary::before { content: "+"; font-size: 17px; font-weight: 300; line-height: 1; transition: transform .2s ease; }
.indepth[open] summary::before { transform: rotate(45deg); }
.indepth summary:hover { color: var(--ink); }
.indepth > div { margin-top: 8px; }
.indepth > div > p { margin: 0 0 10px; }
.indepth > div > p:last-child { margin-bottom: 2px; }
.section--navy .indepth summary, .on-dark .indepth summary { color: var(--brass-400); }
.section--navy .indepth summary:hover, .on-dark .indepth summary:hover { color: #fff; }

/* -- Standalone captures never float alone (8 Sep 2026) -------------------
   Brett, on the home page's alerts and weather frames: "big screen shots just
   sitting in there and not aligned very well with no text around them." A pair
   now sits side by side with its caption under each; a single frame sits beside
   its caption. Both collapse to one column on narrow screens. */
.capture-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 3vw, 44px); align-items: start; }
/* Two frames that tell one story side by side (product.html, the step that fails and the task it raises; 21 Oct 2026). Each card fills its cell; below 860px they stack. */
.shot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); align-items: start; }
.shot-pair .shot { max-width: none; }
@media (max-width: 860px) { .shot-pair { grid-template-columns: minmax(0, 1fr); } .shot-pair .shot { max-width: 680px; } }
.capture { margin: 0; display: flex; flex-direction: column; align-items: center; }
.capture .device { margin-inline: auto; }
.capture figcaption { margin-top: 14px; max-width: 460px; }
.capture-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.capture-aside .device { margin-inline: 0; }
.capture-aside > div > :first-child { margin-top: 0; }
@media (max-width: 860px) {
  .capture-aside { grid-template-columns: 1fr; }
  .capture-aside .device { margin-inline: auto; }
}

/* -- Feature tiles (8 Sep 2026, third pass) ---------------------------------
   Modeled on how Notion and Craft place product UI: the text and the screen
   share one tinted tile; the screen is shown large, zoomed on the part the
   caption talks about (--peek, --zoom), and bleeds out of the tile's right
   and bottom edges so it emerges from the panel instead of sitting in a box.
   The whole capture is behind the tap. Brett, twice: the screenshots felt
   "stuck on" and "an afterthought"; this is the answer to that. */
.shot { position: relative; margin: 0; width: 100%; max-width: 680px; margin-inline: auto; display: flex; flex-direction: column;
        border-radius: 22px; overflow: hidden; border: 0; box-shadow: none;
        background: linear-gradient(160deg, var(--tile-a, #E4EFF0), var(--tile-b, #D2E3E5)); }
.shot--sea  { --tile-a: #E3F0F1; --tile-b: #CFE2E4; }
.shot--sky  { --tile-a: #E5EEF6; --tile-b: #D3E1EE; }
.shot--sand { --tile-a: #F4ECDD; --tile-b: #EADDC6; }
.shot--mist { --tile-a: #EDF1F1; --tile-b: #DCE4E5; }
.shot--plum { --tile-a: #EFE9F3; --tile-b: #E0D7E8; }
.shot figcaption { order: -1; padding: 22px 26px 6px; }
.shot__kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sea-700, #1F6B75); margin-bottom: 6px; }
.shot__title { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--ink); letter-spacing: -.01em; }
.shot figcaption p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft, #4A555D); max-width: 56ch; }
.shot .device, .capture.shot .device { position: static; display: block; width: calc(100% - 26px); max-width: none; margin: 18px -14px -22px 26px; padding: 0;
        border-radius: 14px 0 0 0; background: none; box-shadow: none; overflow: hidden; }
.shot .device:hover { transform: none; }
.shot .device__screen { aspect-ratio: var(--win, 4 / 3); border-radius: 14px 0 0 0; background: #fff;
        box-shadow: 0 22px 50px rgba(6, 30, 40, .28), 0 2px 6px rgba(6, 30, 40, .12); overflow: hidden; }
.shot .device__screen img { object-fit: cover; object-position: var(--peek, left top); transform: scale(var(--zoom, 1)); transform-origin: var(--peek, left top); transition: transform .4s ease; }
.shot .device:hover .device__screen img { transform: scale(calc(var(--zoom, 1) * 1.03)); }
.shot--portrait .device__screen { aspect-ratio: 3 / 4; }
.shot--portrait { max-width: 400px; }
.shot--portrait .device { width: calc(100% - 26px); }
.shot .device__camera { display: none; }
.shot .device__caption { position: absolute; left: auto; right: 16px; bottom: 16px; z-index: 2; padding: 6px 11px; border-radius: 999px;
        background: rgba(8, 20, 28, .74); color: #fff; font-size: 10.5px; letter-spacing: .09em; border: 0; }
.split > .shot { justify-self: center; }
.capture.shot { display: flex; }
.capture.shot figcaption { max-width: none; }
/* Which part of each screen the tile shows, and how large. Set on the tile's
   own ratio class rather than inline: the CSP forbids style attributes. */
.device--dashboard { --zoom: 1.35; --peek: left top; }
.device--alerts { --zoom: 1.35; --peek: left top; }
.device--weather { --zoom: 1.3; --peek: left top; }
.device--trip { --zoom: 1.3; --peek: left top; }
.device--checklist { --zoom: 1.0; --peek: center top; }
.device--sendlocation { --zoom: 1.0; --peek: center top; }
.device--tasks { --zoom: 1.3; --peek: left 100%; }   /* the window opens on the sort control and the raised task, not the header card */
.device--failrun { --zoom: 1.0; --peek: center top; }   /* the window opens on the header card, the current step and the failed row; the lightbox shows the whole run */
.device--voyage { --zoom: 1.3; --peek: left top; }
.device--equipment { --zoom: 1.3; --peek: left top; }
.device--fuel { --zoom: 1.15; --peek: left top; }
.device--burn { --zoom: 1.3; --peek: left top; }
.device--rings { --zoom: 1.0; --peek: center 45%; }
.device--trailer { --zoom: 1.3; --peek: left top; }
.device--vmap { --zoom: 1.2; --peek: left 30%; }
.device--schematic { --zoom: 1.0; --peek: center center; }
.device--locks { --zoom: 1.3; --peek: left 30%; }
.device--thisleg { --zoom: 1.0; --peek: center top; }
.device--lockinfo { --zoom: 1.15; --peek: left top; }
.device--insurance { --zoom: 1.3; --peek: left top; --win: 3 / 2; }  /* 3:2 window ends after "Policy expires", before the two count cards; the lightbox shows the whole page */
.device--boarding-report { --zoom: 1.25; --peek: center 40%; }
.device--boarding-list { --zoom: 1.3; --peek: left bottom; }
.device--writeplan { --zoom: 1.15; --peek: left top; }
.device--wasteplan { --zoom: 1.35; --peek: left top; }
.device--cost { --zoom: 1.3; --peek: left top; }
.device--seatime { --zoom: 1.3; --peek: left 58%; }

.device--service-before { --ratio: 2064 / 2493; --zoom: 1; --peek: left top; }   /* opens on the hour meter and the service dates the caption names */  /* generator-service-before.webp, 9 Sep 2026 (iPad; toolbar cropped) */
.device--service-after  { --ratio: 2064 / 2513; --zoom: 1.3; --peek: left 100%; }  /* generator-service-after.webp, 9 Sep 2026: the new Maintenance History row */
.device--next-due { --ratio: 2064 / 2452; --zoom: 1.25; --peek: center 78%; }  /* generator-next-due-calculated.webp, 9 Sep 2026: the logging sheet's calculation, history row behind */
/* Wide captures show whole: their window is their own ratio. */
.device--fuel { --win: 1600 / 913; }
.device--writeplan { --win: 2064 / 1177; }
.device--schematic { --win: 1940 / 1250; }
@media (max-width: 860px) { .shot { max-width: 100%; } .shot--portrait { max-width: 360px; } }

/* -- Navigation menus, hero microcopy, demo steps, compact pricing, download
   block (9 Sep 2026, evaluation brief) ------------------------------------- */
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; padding: 9px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px;
  color: inherit; transition: background .16s ease, color .16s ease; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .75; transition: transform .16s ease; }
.nav-menu[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.nav-menu summary:hover, .nav-menu[open] summary { color: #fff; background: rgba(255, 255, 255, .09); }
.nav-menu.is-active summary { color: #fff; box-shadow: inset 0 -2px 0 var(--brass-400); border-radius: 8px 8px 0 0; }
.nav-menu__list { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 236px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px; background: var(--navy-900); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; box-shadow: 0 18px 44px rgba(3, 17, 26, .45); }
.nav-menu__list a { display: block; padding: 10px 12px; border-radius: 8px; white-space: nowrap; }
.nav-menu__list a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: none; }
.hero__meta { margin-top: 18px; font-size: 14.5px; letter-spacing: .01em; color: #B9CBD2; }
.hero__meta b { color: #fff; font-weight: 600; }
.step-no { display: inline-block; min-width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--sea-700, #1F6B75); color: #fff;
  font-size: 12.5px; font-weight: 700; line-height: 24px; text-align: center; vertical-align: middle; }
.capture-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan--compact h3 { font-size: 20px; margin: 14px 0 6px; }
.plan--compact .plan__list { margin-bottom: 22px; }
.plan--compact .plan__list li { font-size: 15.5px; }
.strip-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.strip-list > div { border-top: 2px solid var(--brass-600); padding-top: 14px; }
.strip-list b { display: block; font-family: var(--font-display); font-size: 18px; margin-bottom: 6px; color: var(--ink); }
.strip-list p { margin: 0; font-size: 15.5px; }
.strip-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.download-block { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 32px; padding: 26px 28px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.download-block .fine { flex-basis: 100%; margin: 0; }
.store-badge img { display: block; height: 60px; width: auto; }
.download-qr { width: 132px; height: 132px; border-radius: 10px; border: 1px solid var(--line); }
.download-block--pending { background: linear-gradient(160deg, #F4ECDD, #EADDC6); border: 0; }
.download-block__note { margin: 0; font-size: 17px; line-height: 1.55; max-width: 62ch; }
.compat-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.compat-list li { padding-left: 22px; position: relative; font-size: 16px; }
.compat-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 2px; background: var(--sea-600); }
/* -- The home-page workflow as three stages on a ribbon (Brett, 13 Sep 2026,
   after the numbered sequence read as a template): the same drawing language
   as the product page's figure — a sea-to-brass ribbon with a slow pulse, an
   icon medallion per stage, arrow tips between them — with each screen in its
   tinted window beneath its medallion and the words centred under it. ------ */
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); position: relative; }
.stages::before { content: ""; position: absolute; left: 12%; right: 12%; top: 27px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #8CC7CC, #14506E 50%, #C9A24A); }
.stages::after { content: ""; position: absolute; left: 12%; right: 12%; top: 27px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 3px, transparent 3px 30px); animation: stages-pulse 7s linear infinite; }
@keyframes stages-pulse { to { background-position: 300px 0; } }
@media (prefers-reduced-motion: reduce) { .stages::after { display: none; } }
.stage { position: relative; text-align: center; display: flex; flex-direction: column; }   /* the windows sit level even when one caption runs longer */
.stage__head { position: relative; z-index: 1; height: 58px; display: flex; justify-content: center; }
.stage__node { width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 2px solid #7FBAC0; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(8, 36, 58, .14); }
.stage__node svg { width: 26px; height: 26px; fill: none; stroke: var(--sea-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stage--sky .stage__node { border-color: #9DB6D0; } .stage--sky .stage__node svg { stroke: #14506E; }
.stage--sand .stage__node { border-color: #D9B76A; } .stage--sand .stage__node svg { stroke: #8A6A1C; }
.stage:not(:first-child)::before { content: ""; position: absolute; z-index: 1; top: 21px; left: calc(-1 * clamp(18px, 2.4vw, 40px) / 2 - 7px); border: 7px solid transparent; border-left: 11px solid #14506E; }
.stage--sand::before { border-left-color: #C9A24A; }
.stage__kicker { display: block; margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sea-700); }
.stage--sand .stage__kicker { color: #8A6A1C; }
.stage h3 { margin: 6px 0 8px; font-size: 22px; }
.stage p { margin: 0 auto 16px; max-width: 36ch; font-size: 15px; line-height: 1.5; }
.stage__shot { margin: auto 0 0; }
.stage__shot .device { --win: 16 / 9; }
.stage__shot.device--next-due .device, .stage__shot .device--next-due { --peek: center 84%; }
.stages--plain .stage h3 { margin-top: 18px; }
.stages--plain .stage p { margin-bottom: 0; }
@media (max-width: 860px) { .stages { grid-template-columns: 1fr; gap: 34px; } .stages::before, .stages::after, .stage:not(:first-child)::before { display: none; } }

/* -- Information-flow figure on the product page (inline SVG; styled here
   because the CSP forbids inline style attributes). Third drawing, 13 Sep
   2026, after Brett asked for illustration quality rather than a chart: icon
   medallions on two arcs, gradient ribbons converging on a shadowed record
   card carrying the badge, a slow pulse along each ribbon. Gradients, the
   shadow filter and the arrow tip are referenced from the SVG itself, since
   a url() in this stylesheet reads as a missing file to the asset check. --- */
.flowchart-wrap { margin: 0; overflow-x: auto; }
.flowchart { display: block; min-width: 820px; width: 100%; height: auto; font-family: var(--font-body); }
.flowchart__hdr { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; fill: var(--sea-700); }
.flowchart__hdr--out { fill: #8A6A1C; }
.flowchart__ribbon { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .85; }
.flowchart__pulse { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 2 26; opacity: .9; animation: flowchart-pulse 7s linear infinite; }
@keyframes flowchart-pulse { to { stroke-dashoffset: -112; } }
@media (prefers-reduced-motion: reduce) { .flowchart__pulse { display: none; } }
.flowchart__node--in circle { fill: #F2F8F8; stroke: #7FBAC0; stroke-width: 2; }
.flowchart__node--out circle { fill: #FBF5E8; stroke: #D9B76A; stroke-width: 2; }
.flowchart__icon { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flowchart__node--in .flowchart__icon { stroke: var(--sea-700); }
.flowchart__node--out .flowchart__icon { stroke: #8A6A1C; }
.flowchart__label { font-size: 15px; font-weight: 550; fill: var(--ink); }
.flowchart__tip { fill: #C9A24A; }
.flowchart__core-rim { fill: none; stroke: rgba(255, 255, 255, .14); }
.flowchart__core text { font-size: 14.5px; fill: #C9DAE1; }
.flowchart__core .flowchart__core-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; fill: #fff; }
.flowchart-wrap figcaption { margin-top: 10px; }

/* -- Pricing strip on the home page. The cards and the comparison table live
   on plans.html; this keeps the answer on the page in a quarter of the height.
   The plan__name / plan__price / "or $X/year" markup is what check 14 reads. -- */
.price-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.price-strip__item { border-top: 3px solid var(--plan); padding-top: 14px; }
.price-strip__item .plan__name { display: block; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--plan); }
.price-strip__for { margin: 6px 0 10px; font-family: var(--font-display); font-size: 19px; line-height: 1.3; color: var(--ink); }
.price-strip__item .plan__price { margin: 0; line-height: 1; }
.price-strip__item .plan__price b { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--ink); }
.price-strip__item .plan__price span { font-size: 15px; color: var(--muted); margin-left: 3px; }
.price-strip__item .plan__annual { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
@media (max-width: 720px) { .price-strip { grid-template-columns: 1fr; } }

/* -- Customer quotes. Rendered by build.py from _source/testimonials.txt and
   from nowhere else; check 16 refuses a <blockquote> that did not come from
   there. Empty file, no band. ---------------------------------------------- */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 2vw, 24px); }
.proof__kicker { display: block; margin: 0 0 14px; }
.quote { margin: 0; position: relative; max-width: 760px; padding: 26px 28px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.quote::before { content: "\201C"; position: absolute; top: 8px; left: 18px; font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--brass-600); opacity: .55; }
.quote p { margin: 0; padding-left: 28px; font-family: var(--font-display); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ink); }
.quote footer { margin: 14px 0 0 28px; font-size: 14.5px; color: var(--muted); }
.quote footer b { display: block; font-size: 15.5px; color: var(--ink); font-weight: 650; }
.sync-note { font-size: 16px; line-height: 1.55; max-width: 70ch; margin-bottom: 0; }
.sync-note b { color: var(--ink); }
@media (max-width: 1100px) { .capture-row--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .strip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .nav-menu, .nav-menu summary { display: block; width: 100%; }
  .nav-menu summary { padding: 13px 10px; }
  .nav-menu__list { position: static; min-width: 0; background: none; border: 0; box-shadow: none; padding: 0 0 6px 14px; }
  .strip-list { grid-template-columns: 1fr; }
}

/* -- FAQ ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 20px 40px 20px 0;
  position: relative; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 17px;
  font-family: var(--font-body); font-size: 26px; font-weight: 300; color: var(--sea-600);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 40px 22px 0; font-size: 17px; }

/* -- Resource rows -------------------------------------------------------- */
.resource {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.resource:last-child { border-bottom: 0; }
.resource h3 { font-size: 21px; margin-bottom: 7px; }
.resource p { font-size: 16.5px; margin: 0; }
.resource__tag {
  flex: none; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-cool);
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sea-700); white-space: nowrap;
}


/* 9. PLANS ================================================================ */

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }

/* Plan cards mirror the in-app "Plans & Capabilities" screen: each tier owns a
   tinted card, a colored price and a colored button. Owner = blue,
   Cruiser = purple, Captain = orange, matching AftwiseAccessTier.accentColor.
   Each card sets --plan and everything else reads from it. */
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 32px 30px;
  border: 1.5px solid color-mix(in srgb, var(--plan) 34%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(170deg,
      color-mix(in srgb, var(--plan) 13%, var(--card)),
      color-mix(in srgb, var(--plan) 5%, var(--card)));
  box-shadow: var(--shadow-sm);
}
.plan--owner   { --plan: var(--owner); }
.plan--cruiser { --plan: var(--cruiser); }
.plan--captain { --plan: var(--captain); }

.plan__name {
  display: inline-flex; align-self: flex-start;
  padding: 6px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--plan) 16%, transparent);
  color: color-mix(in srgb, var(--plan) 82%, #000);
  font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}

/* min-heights keep the price, vessel-limit pill and feature list on the same
   line across all three cards even when a heading or blurb wraps differently. */
.plan h2 { font-size: 29px; margin: 16px 0 8px; min-height: 2.16em; }
.plan__for { font-size: 16.5px; color: var(--muted); min-height: 3.1em; }

.plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: 20px; }
.plan__price b {
  font-family: var(--font-display); font-size: 44px; font-weight: 600;
  color: color-mix(in srgb, var(--plan) 88%, #000);
  letter-spacing: -.02em;
}
.plan__price span { font-size: 15px; color: var(--muted); }
.plan__annual {
  margin-top: 6px; font-size: 15px; font-weight: 700;
  color: color-mix(in srgb, var(--plan) 80%, #000);
}
.plan__trial { margin-top: 4px; font-size: 14.5px; color: var(--muted); }

.plan__boats {
  display: flex; align-items: center; gap: 9px;
  margin: 22px 0 20px; padding: 12px 15px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--plan) 15%, var(--card));
  border: 1px solid color-mix(in srgb, var(--plan) 26%, transparent);
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  min-height: 3.1em;   /* keeps the three feature lists starting on one line */
}
.plan__boats::before {
  content: "⚓"; flex: none;
  color: color-mix(in srgb, var(--plan) 78%, #000);
  font-size: 15px;
}
.plan__list { margin: 0 0 26px; padding: 0; list-style: none; flex: 1; }
.plan__list li {
  position: relative; padding: 9px 0 9px 27px; font-size: 16.5px;
  border-bottom: 1px solid color-mix(in srgb, var(--plan) 16%, transparent);
}
.plan__list li:last-child { border-bottom: 0; }
.plan__list li::before {
  content: "✓"; position: absolute; left: 2px; top: 9px;
  font-weight: 700; color: color-mix(in srgb, var(--plan) 78%, #000);
}
.plan__list li.is-inherit::before { content: "＋"; color: var(--muted); }

/* The card keeps the app's exact tier color — name, price, rule, accent — because
   a customer comparing this table with Compare Plans in the app should see the
   same three colors. The CTA is the one place that cannot: white on #1677DA
   measures 4.48:1 and on #C55D13 4.24:1, both under the 4.5 AA needs at 16px.
   Darkening the button alone fixes the text without re-mapping the tier colors.
   Measured after this change: Owner 5.5, Cruiser 6.5, Captain 5.3. */
.plan .btn {
  width: 100%;
  --plan-cta: color-mix(in srgb, var(--plan) 88%, #000);
  background: var(--plan-cta);
  border-color: var(--plan-cta);
  color: #fff;
}
.plan .btn:hover {
  background: color-mix(in srgb, var(--plan) 74%, #000);
  border-color: color-mix(in srgb, var(--plan) 74%, #000);
}

/* Comparison table — a real table reads as a serious commercial product */
.table-wrap { overflow-x: auto; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; }
.compare { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { padding: 15px 18px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.compare thead th { background: rgba(255, 255, 255, .07); color: #fff; font-weight: 650; white-space: nowrap; }
.compare tbody th { font-weight: 550; color: #DCE9ED; }
.compare td { color: #B7CFD8; text-align: center; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare .yes { color: var(--sea-300); font-weight: 700; }
.compare .no { color: #8FA8B3; }   /* was #67818C — 3.85:1 on navy */
.compare caption { caption-side: bottom; padding: 14px 18px; font-size: 14px; color: #9FB9C4; text-align: left; }
/* The same table on a light section (the manuals-by-plan grid on support.html, 13 Sep 2026):
   ink on paper instead of white on navy, and a narrower minimum since it has four columns. */
.section--paper .table-wrap, .section--sand .table-wrap, .section--mist .table-wrap { border-color: var(--line); background: #fff; }
.section--paper .compare, .section--sand .compare, .section--mist .compare { min-width: 620px; }
.section--paper .compare th, .section--paper .compare td, .section--sand .compare th, .section--sand .compare td, .section--mist .compare th, .section--mist .compare td { border-bottom-color: var(--line); }
.section--paper .compare thead th, .section--sand .compare thead th, .section--mist .compare thead th { background: color-mix(in srgb, var(--sea-600) 8%, #fff); color: var(--ink); }
.section--paper .compare tbody th, .section--sand .compare tbody th, .section--mist .compare tbody th { color: var(--ink); }
.section--paper .compare td, .section--sand .compare td, .section--mist .compare td { color: var(--muted); }
.section--paper .compare .yes, .section--sand .compare .yes, .section--mist .compare .yes { color: var(--sea-700); }


/* -- Legal prose ---------------------------------------------------------- */
.legal { max-width: 760px; }
.legal h2 { font-size: clamp(23px, 2.2vw, 28px); margin: 44px 0 12px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { font-size: 17.5px; }
.legal ul { padding-left: 22px; }
.legal li { margin: 8px 0; }
.legal a { color: var(--sea-700); text-decoration: underline; }
.legal__updated {
  display: block; margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--mist-2);
  font-size: 12px; color: color-mix(in srgb, var(--ink) 55%, transparent); letter-spacing: .01em;
}

/* -- Confirmation --------------------------------------------------------- */
.confirmation { display: grid; place-items: center; min-height: 62vh; padding: clamp(56px, 8vw, 100px) var(--gutter); background: var(--sand); }
.confirmation__card {
  max-width: 620px; padding: clamp(34px, 5vw, 56px); text-align: center;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--card); box-shadow: var(--shadow-md);
}
.confirmation__card h1 { font-size: clamp(34px, 4vw, 46px); margin-bottom: 16px; }
.confirmation__card .btn-row { justify-content: center; }


/* 10. FORMS =============================================================== */

.form-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 70px); align-items: start; }

.form-card {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-md);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid label { display: grid; gap: 7px; font-size: 15.5px; font-weight: 650; color: var(--ink); }
.form-grid .full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; padding: 12px 13px;
  border: 1px solid var(--line-cool); border-radius: 8px;
  background: var(--card); color: var(--ink);
  font-weight: 400;
}
.form-grid textarea { min-height: 130px; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: 3px solid rgba(20, 134, 138, .20); border-color: var(--sea-600);
}
.form-grid .hint { font-size: 14px; font-weight: 400; color: var(--muted); }
.form-consent { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 15px; font-weight: 400; }
.form-consent input { width: auto; margin-top: 4px; }


/* 11. FOOTER ============================================================== */

.footer { background: var(--navy-950); color: #A9C4CD; padding: clamp(42px, 4.4vw, 58px) 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.9fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 52px); }
/* Footer group headings are <h2> so the document's heading order never skips
   a level. They must not inherit the display serif or the h2 size. */
.footer__heading {
  color: #fff; margin: 0 0 15px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
}
.footer a { display: block; padding: 6px 0; font-size: 16px; color: #A9C4CD; transition: color .16s ease; }
.footer a:hover { color: #fff; }
.footer__brand img { width: 168px; margin-bottom: 18px; }
.footer__brand p { max-width: 420px; font-size: 16px; }
.footer__veteran { color: #C6DBE3; }
.footer__legal { margin-top: 22px; font-size: 12px; line-height: 1.55; color: #7D97A2; max-width: 460px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  margin-top: clamp(36px, 4vw, 52px); padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  font-size: 13.5px; color: #93ABB5;
}


/* 11b. UTILITIES ==========================================================
   The deployed Content-Security-Policy is `style-src 'self'`, which blocks
   inline style attributes. Everything that would otherwise be a one-off
   `style="..."` lives here instead. Do not reintroduce inline styles. */

.mt-s  { margin-top: 18px; }
.mt-m  { margin-top: 26px; }
.mt-l  { margin-top: 40px; }
.mt-xl { margin-top: 48px; }

.mw-md { max-width: 820px; }
.mw-lg { max-width: 880px; }

.text-center { text-align: center; }
.btn-row--center { justify-content: center; }
.btn--block { width: 100%; }

/* Photograph presented as itself rather than inside a device bezel */
.framed { border-radius: 15px; box-shadow: var(--shadow-lg); }
/* Standalone photos and framed screenshots cap at 760px wide (8 Sep 2026,
   Brett: "the pictures could probably be smaller" — kept for warmth, sized so
   they do not set the page's length). Photos inside split columns are already
   column-width and untouched. */
figure.mw-lg > img.framed, figure.mw-md > img.framed { max-width: 720px; max-height: 440px; width: auto; display: block; margin-inline: auto; }

/* Background images for full-bleed bands. Adding a new band means adding a
   class here — deliberately, so every hero image is accounted for. */
.bg--home-hero      { background-image: url("photos/home-hero.webp"); }
.bg--cruising-hero  { background-image: url("photos/trawler-marsh-underway.webp"); }
.bg--helm           { background-image: url("photos/helm-underway.webp"); }
.bg--at-anchor      { background-image: url("photos/at-anchor-dusk.webp"); }
.bg--arrived        { background-image: url("photos/arrived-at-anchor.webp"); }
.bg--first-weekend  { background-image: url("photos/first-weekend-leaving-dock.webp"); }
.bg--raft-up        { background-image: url("photos/raft-up-afternoon.webp"); background-position: center 82%; min-height: clamp(420px, 40vw, 800px); }
.bg--raft-up::after { background: linear-gradient(96deg, rgba(3, 18, 28, .88) 0%, rgba(3, 18, 28, .70) 34%, rgba(3, 18, 28, .28) 62%, rgba(3, 18, 28, .04) 92%); }
.bg--captain-crew   { background-image: url("photos/captain-at-table.webp"); }
.bg--quiet-current  { background-image: url("photos/quiet-current-slip.webp"); }
.bg--engine-room    { background-image: url("photos/engine-room-generator.webp"); }

/* Interior hero heights */
.hero--sm { min-height: 380px; }
.hero--xs { min-height: 320px; }


/* 12. LIGHTBOX & MOTION =================================================== */

.lightbox {
  max-width: min(94vw, 1400px); width: fit-content;
  padding: 46px 20px 22px;
  border: 0; border-radius: 16px;
  background: var(--navy-950); color: #fff;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
}
.lightbox::backdrop { background: rgba(2, 10, 16, .88); }
.lightbox img { max-height: 76vh; width: auto; margin-inline: auto; border-radius: 8px; }
.lightbox p { margin: 16px 0 0; text-align: center; font-size: 14px; color: #A9C4CD; }
.lightbox__close {
  position: absolute; top: 8px; right: 12px;
  border: 0; background: transparent; color: #fff;
  font-size: 32px; line-height: 1; cursor: pointer;
}

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal.is-instant { transition: none; }  /* on screen when the page arrived: no fade (21 Oct 2026) */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .device, .audience, .phase__dot { transition: none !important; }
}


/* 13. RESPONSIVE ========================================================== */

/* Large displays: use more of the glass rather than leaving 500px of empty
   margin each side on a 27-inch screen. Prose blocks keep their own measure. */
@media (min-width: 1700px) {
  :root { --max: 1500px; --gutter: 72px; }
  body { font-size: 18px; }
}
@media (min-width: 2200px) {
  :root { --max: 1640px; }
}

/* Between the mobile breakpoint and ~1440px the eight nav items plus the CTA
   no longer fit beside the full lockup, and the bar silently wrapped to two
   lines — iPad Pro landscape at 1194px sat right in that band. The tagline is
   the decorative part of the lockup, so it gives up its ~180px first and the
   navigation stays on one line.

   Threshold moved 1300px -> 1440px on 27 Aug 2026 when Records & Reports became
   the eighth item. Two costs land together at this breakpoint — the tagline
   reappears AND the nav returns to full size — so one extra item overflowed a
   90px band from 1301px to 1390px, which contains 1366px, one of the commonest
   laptop widths. Measured from SF Pro advance widths, not estimated. IF A NINTH
   ITEM IS EVER ADDED, RE-DO THAT ARITHMETIC: the count in this comment is part
   of the claim, and the failure is silent — the bar wraps, nothing errors. */
@media (max-width: 1440px) {
  .brand span { display: none; }
  .nav-links { font-size: 14.5px; gap: 0; }
  .nav-links a { padding: 9px 10px; }
  .nav-cta { margin-left: 8px; padding: 10px 15px !important; }
}

@media (max-width: 1080px) {
  .menu-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    padding: 14px var(--gutter) 24px;
    background: rgba(4, 21, 31, .99);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    max-height: calc(100vh - 60px); overflow-y: auto;   /* a short landscape phone scrolls the menu instead of losing its tail */
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 13px 10px; }
  .nav-cta { margin: 8px 0 0; padding: 11px 15px !important; text-align: center; }   /* 45px tall: a finger-sized row like the others */
  .brand span { display: none; }

  .audience-grid, .module-groups, .stat-row { grid-template-columns: repeat(2, 1fr); }
  /* three items do not split two-and-one; hold three until they stack */
  .stat-row--3 { grid-template-columns: repeat(3, 1fr); }
  .split, .note, .form-layout { grid-template-columns: 1fr; }
  .split--flip > *:first-child { order: 0; }
  .note__portrait img { min-height: 240px; max-height: 340px; }
  .plan-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* A plain .card-grid holding exactly four cards resolves to 3 + 1 between
   roughly 900px and 1400px, orphaning the last card — most visible at iPad
   landscape. Two-by-two reads better there. Grids of three are untouched. */
@media (min-width: 861px) and (max-width: 1400px) {
  .card-grid:not(.card-grid--2):has(> article:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .intro-columns { grid-template-columns: 1fr; gap: 0; }
  .intro-columns > :last-child { margin-top: 18px; padding-top: 20px; }
  .workflow__track { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  .workflow__track::before { display: none; }
  .flow { grid-template-columns: 1fr; }
  .flow__arrow { transform: rotate(90deg); text-align: center; }
  .device--tablet { max-width: min(100%, calc(400px * var(--ratio, 1.33))); }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .hero, .hero--page { min-height: 540px; background-position: 64% center; }
  .hero::after {
    background: linear-gradient(0deg, rgba(3, 17, 26, .95) 12%, rgba(3, 18, 28, .74) 62%, rgba(3, 18, 28, .60));
  }
  .hero-facts { flex-direction: column; gap: 11px; }
  .audience-grid, .module-groups, .stat-row, .stat-row--3, .card-grid, .card-grid--2, .card-grid--3 { grid-template-columns: 1fr; }
  .compare-pair { grid-template-columns: 1fr; gap: 26px; }
  .workflow__track { grid-template-columns: 1fr; gap: 22px; }
  .phase { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; padding: 0; }
  .phase__dot { margin-bottom: 0; flex: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .resource { grid-template-columns: 1fr; gap: 12px; }
  .resource__tag { justify-self: start; }
  .form-grid { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .note__portrait img { min-height: 220px; }
}