/* Home page styles. Built from assets/home-mock/home.src.html by build_live.py. */
  :root {
    --hull: #0D1B2A; --channel: #13263A; --steel: #2E6DA4; --steel-ink: #1F5A8C;
    --ground: #F9FBFC; --card: #FFFFFF; --shoal: #EAF2F9; --ink: #16232F; --ink-soft: #4E6273; --line: #D8E2EA;
    --brass: #9A6B1F; --brass-line: #C9A256;
    --poor: #B42318; --poor-bg: #FDF1F0; --fair: #B45309; --fair-bg: #FFF7E8; --good: #15803D;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --shadow: 0 1px 2px rgba(13,27,42,.06), 0 12px 32px -12px rgba(13,27,42,.22);
  }
  /* One deliberate look: the app is light-only, so the home page is too, whatever the
     visitor's system appearance. */
  :root { color-scheme: light; }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 88px; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  /* height:auto is what keeps an <img> with width/height attributes in proportion: without
     it the height attribute wins while max-width squeezes the width, and the picture stretches. */
  img { max-width: 100%; height: auto; display: block; }
  a { color: var(--steel-ink); }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--brass-line); outline-offset: 3px; border-radius: 6px; }
  .wrap { width: min(1160px, 100% - 48px); margin-inline: auto; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
  p { margin: 0; }
  .eyebrow { font: 600 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }

  /* ---------- buttons ---------- */
  .btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 48px; padding: 0 22px; border-radius: 10px; font: 600 16px/1 var(--sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .12s, background .12s, border-color .12s; }
  .btn:hover { transform: translateY(-1px); }
  .btn-go { background: var(--steel); color: #fff; }
  .btn-go:hover { background: #3B7DB8; }
  .btn-line { border-color: rgba(255,255,255,.38); color: #fff; }
  .btn-line:hover { border-color: #fff; }
  .btn-quiet { border-color: var(--line); color: var(--ink); background: var(--card); }
  @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

  /* ---------- hero (always the hull navy, both themes) ---------- */
  .hero { position: relative; background: linear-gradient(168deg, #17324F 0%, #1D4269 58%, #27609A 100%); color: #F0F5FA; overflow: hidden; }
  #chart { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  /* The menu stays pinned while the page scrolls, so a section link never strands the reader. */
  .topbar { position: sticky; top: 0; z-index: 60; background: rgba(23,50,79,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.09); }
  .nav { display: flex; align-items: center; gap: 28px; padding: 11px 0; }
  .brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; font: 700 13px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
  /* The logo is the transparent artwork, not a white badge. Its wordmark is dark navy, so a
     soft light glow keeps it readable where it sits on navy. Sized by height; width follows. */
  .brand img { height: 40px; width: auto; filter: drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 7px rgba(255,255,255,.45)); transition: height .28s ease, margin .28s ease; }
  /* At the top of the page the menu-bar logo is twice the size and hangs over the bar into
     the hero; the first scroll tucks it back into the bar (the script toggles .at-top).
     The negative margin keeps the bar its normal height while the logo overflows it. */
  .topbar.at-top .brand img { height: 80px; margin-bottom: -40px; }
  @media (prefers-reduced-motion: reduce) { .brand img { transition: none; } }
  .brand span span { display: block; font-weight: 500; letter-spacing: .16em; color: #A9C0D6; white-space: nowrap; }
  /* Everything to the right of the brand travels together, so a phone can show the lot in
     one dropdown without the markup being written twice (a second copy would give the
     scroll-spy two elements per section and underline the wrong one). */
  .nav-menu { display: flex; align-items: center; gap: 28px; margin-left: auto; }
  .nav-toggle { display: none; }
  .nav-links { display: flex; gap: 24px; }
  .nav-links a { color: #C6D6E6; text-decoration: none; font-size: 15px; padding: 6px 0; border-bottom: 2px solid transparent; }
  .nav-links a[aria-current] { color: #fff; border-bottom-color: #D8AE5E; }
  .nav-links a:hover { color: #fff; }
  .nav .btn { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
  .cta-short { display: none; }
  .nav .signin { color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; }
  .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; padding: 56px 0 96px; }
  .hero .eyebrow { color: #D8AE5E; }
  .hero h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.06; margin: 18px 0 22px; color: #fff; }
  .hero .lede { font-size: 19px; line-height: 1.6; color: #D6E3F0; max-width: 34em; }
  .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
  .samples { margin-top: 22px; font-size: 14.5px; color: #B7CBDE; }
  .samples a { color: #DCE9F5; text-underline-offset: 3px; }
  /* Laptop behind, iPad in front of it, phone at the near corner — one glance says the app
     runs on all three. Sized in % of the stage so the group scales as one picture. */
  /* The tagline sits over the three devices: same brass eyebrow, half again as large
     (12px -> 18px), centred on the group it belongs to. */
  /* Absolute, in the dead space the bottom-anchored devices leave at the top of the stage:
     the tagline must not push the laptop/iPad/phone down. */
  .stage-tag { position: absolute; top: 0; left: 0; right: 0; z-index: 4; font-size: 18px; text-align: center; text-wrap: balance; }
  .stage { position: relative; aspect-ratio: 5 / 3.3; }
  .dev { position: absolute; }
  .dev img { display: block; width: 100%; }
  .laptop { z-index: 1; left: 0; bottom: 8%; width: 79%; }
  .laptop .lid { display: block; padding: 1.4% 1.4% 0; border-radius: 10px 10px 0 0; background: #0A121B; box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 30px 60px -28px rgba(0,0,0,.75); }
  .laptop .lid img { border-radius: 5px 5px 0 0; }
  .laptop .base { display: block; width: 112%; margin-left: -6%; height: 1.9%; min-height: 9px; border-radius: 0 0 7px 7px;
    background: linear-gradient(#C3CEDA, #8A9AAA 60%, #5C6A79); box-shadow: 0 14px 26px -12px rgba(0,0,0,.65); }
  .laptop .base::after { content: ""; display: block; width: 14%; height: 34%; margin: 0 auto; border-radius: 0 0 5px 5px; background: rgba(0,0,0,.22); }
  .tablet { z-index: 2; right: 0; bottom: 10%; width: 47%; border-radius: 16px; padding: 1.6%; background: #05090E;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.8); }
  .tablet img { border-radius: 9px; }
  .phone { z-index: 3; left: 56%; bottom: 0; width: 17%; border-radius: 15%/7.2%; padding: 2.6% 2.2%; background: #05090E;
    box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -22px rgba(0,0,0,.85); }
  .phone img { border-radius: 9%/4.2%; }

  /* ---------- proof strip ---------- */
  .proof { background: var(--card); border-bottom: 1px solid var(--line); }
  .proof ul { list-style: none; margin: 0 auto; padding: 26px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .proof b { display: block; font: 600 30px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -.02em; }
  .proof span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }

  /* ---------- section heads ---------- */
  section { padding: 96px 0; }
  .head { max-width: 760px; margin-bottom: 56px; }
  .head h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; margin: 14px 0 16px; }
  .head p { font-size: 18.5px; color: var(--ink-soft); max-width: 36em; }

  /* ---------- the survey day: a course line with waypoints ---------- */
  .course { position: relative; display: grid; gap: 88px; }
  .course::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 0; border-left: 2px dashed var(--brass-line); opacity: .7; }
  .leg { position: relative; display: grid; grid-template-columns: 44px minmax(0, .82fr) minmax(0, 1.18fr); gap: 0 36px; align-items: center; }
  .leg:nth-child(even) .shot { order: 2; }
  .mark { align-self: start; width: 44px; height: 44px; border-radius: 50%; background: var(--ground); border: 2px solid var(--brass-line); color: var(--brass); display: grid; place-items: center; font: 600 14px/1 var(--mono); }
  .leg .when { font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
  .leg h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.18; margin: 12px 0 14px; }
  .leg p { color: var(--ink-soft); max-width: 31em; }
  .leg p + p { margin-top: 12px; }
  .ticks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .ticks li { font-size: 13.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
  .shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--card); }

  /* ---------- the report ---------- */
  .report { background: var(--shoal); border-block: 1px solid var(--line); }
  .report-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; }
  .paper { border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
  .inside { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
  .inside li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
  .inside i { font: 600 12px/1.7 var(--mono); font-style: normal; color: var(--brass); }
  .inside b { display: block; font-weight: 650; }
  .inside span { color: var(--ink-soft); font-size: 15.5px; }
  .prio { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
  .prio span { font: 700 12px/1 var(--mono); letter-spacing: .06em; padding: 7px 10px; border-radius: 6px; }
  .p-a { background: var(--poor-bg); color: var(--poor); } .p-b { background: var(--fair-bg); color: var(--fair); }
  .p-c { background: var(--card); color: var(--ink-soft); border: 1px solid var(--line); } .p-r { background: var(--card); color: var(--steel-ink); border: 1px solid var(--line); }
  .see { margin-top: 26px; font-size: 15.5px; color: var(--ink-soft); }

  /* ---------- what's aboard: an inventory, like the one a survey carries ---------- */
  .aboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
  .hold { padding: 28px 26px 30px; border-left: 1px solid var(--line); }
  .hold:first-child { border-left: 0; }
  .hold h3 { font-size: 22px; }
  .hold .n { font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); display: block; margin-bottom: 10px; }
  .hold ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
  .hold li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
  .hold li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 5px; border-left: 2px solid var(--good); border-bottom: 2px solid var(--good); transform: rotate(-45deg); }
  .hold li b { color: var(--ink); font-weight: 600; }

  /* ---------- where boats are ---------- */
  .deep { background: linear-gradient(180deg, #1B3D61, #17324F); color: #E3ECF5; }
  .deep .eyebrow { color: #D8AE5E; }
  .deep h2 { color: #fff; }
  .deep .head p { color: #C3D4E5; }
  .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .three h3 { font-size: 22px; color: #fff; margin-bottom: 10px; }
  .three p { color: #C3D4E5; font-size: 16px; }
  .three div { border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; }

  /* ---------- pricing ---------- */
  .pricing { text-align: left; }
  .pricing-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 48px; box-shadow: var(--shadow); }
  .pricing-card h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; margin: 14px 0 14px; }
  .pricing-card p { color: var(--ink-soft); max-width: 34em; }
  /* The figure is set in the same tabular mono as the proof band, so the one number a
     visitor came to find reads like the rest of the page's numbers rather than an advert. */
  .price { display: flex; align-items: baseline; gap: 16px; margin: 0 0 18px; }
  .price b { font: 600 clamp(44px, 5.4vw, 58px)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.05em; color: var(--ink); }
  .price i { font: 600 12px/1.5 var(--mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
  .terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .terms li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; font-size: 15.5px; color: var(--ink-soft); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .terms li:last-child { border-bottom: 0; padding-bottom: 0; }
  .terms b { font: 600 12px/1.8 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }

  /* ---------- questions ---------- */
  .faq { max-width: 820px; }
  details { border-bottom: 1px solid var(--line); }
  details:first-of-type { border-top: 1px solid var(--line); }
  summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative; font: 600 19px/1.35 var(--serif); }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 26px/1 var(--mono); color: var(--brass); }
  details[open] summary::after { content: "\2013"; }
  details p { padding: 0 36px 22px 0; color: var(--ink-soft); max-width: 40em; }

  /* ---------- footer ---------- */
  footer { background: #14293F; color: #B7CBDE; padding: 56px 0 40px; font-size: 14.5px; }
  .foot { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start; justify-content: space-between; }
  .foot .brand { margin-bottom: 14px; }
  .creed { font: 600 11.5px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #8FA9C2; }
  .foot nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
  .foot nav a { color: #C6D6E6; text-decoration: none; }
  .foot nav a:hover { color: #fff; text-decoration: underline; }
  .fine { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: #8FA9C2; }

  .fine .credit { color: #B7CBDE; letter-spacing: .05em; white-space: nowrap; }
  .fine .credit a { color: #4DB2FF; font-weight: 700; text-decoration: none; }
  .fine .credit a:hover { text-decoration: underline; }

  /* ---------- small screens ---------- */
  @media (max-width: 980px) {
    /* One row, always: the links used to wrap onto a second scrolling row, where Pricing
       and Questions sat off the right edge and Sign in was dropped altogether below 600px.
       Now everything goes behind one button. */
    html { scroll-padding-top: 92px; }
    .nav { position: relative; transition: padding-left .28s ease; }
    .topbar.at-top .nav { padding-left: 132px; }
    .topbar.at-top .brand img { position: absolute; left: 0; top: 10px; margin-bottom: 0; }
    .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px;
      margin-left: auto; width: 46px; height: 42px; padding: 0 11px; flex: none;
      background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 9px;
      cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px;
      transition: transform .22s ease, opacity .18s ease; }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 7px);
      flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px 0 14px;
      background: #17324F; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
      box-shadow: 0 22px 46px -18px rgba(0,0,0,.65);
      max-height: calc(100vh - 110px); overflow-y: auto; }
    .nav.menu-open .nav-menu { display: flex; }
    /* At the top of the page the logo is double size and hangs out of the bar, which puts
       it over the open dropdown. Opening the menu tucks it back in, so the panel sits
       under a normal-height bar instead of behind the artwork. */
    .topbar.at-top .nav.menu-open { padding-left: 0; }
    .topbar.at-top .nav.menu-open .brand img { position: static; height: 40px; margin-bottom: 0; }
    .nav-links { flex-direction: column; gap: 0; }
    .nav-links a { font-size: 16px; padding: 13px 18px; border-bottom: 0;
      border-left: 3px solid transparent; }
    .nav-links a[aria-current] { border-bottom-color: transparent; border-left-color: #D8AE5E;
      background: rgba(255,255,255,.06); }
    .nav-menu .signin { padding: 14px 18px 12px; margin-top: 6px;
      border-top: 1px solid rgba(255,255,255,.14); }
    .nav-menu .btn { margin: 10px 18px 2px; justify-content: center; }
    /* The dropdown has room for the full label even where the bar did not. */
    .nav-menu .cta-long { display: inline; }
    .nav-menu .cta-short { display: none; }
    .hero-grid { grid-template-columns: 1fr; gap: 44px; padding: 36px 0 72px; }
    .stage { aspect-ratio: 5 / 3.5; }
    /* One column means a shorter stage, so its top gap shrinks while the tagline grows to
       two lines — it would clip the laptop on a 320px phone. Lift it into the 44px grid
       gap above instead. The devices stay exactly where they are. */
    .stage-tag { top: -16px; }
    .proof ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    section { padding: 72px 0; }
    .course { gap: 64px; }
    .course::before { display: none; }
    .leg { grid-template-columns: 1fr; gap: 20px; }
    .leg:nth-child(even) .shot { order: 0; }
    .report-grid, .pricing-card { grid-template-columns: 1fr; gap: 36px; }
    .pricing-card { padding: 32px 24px; }
    .aboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hold:nth-child(3) { border-left: 0; }
    .hold:nth-child(n+3) { border-top: 1px solid var(--line); }
    .three { grid-template-columns: 1fr; gap: 28px; }
  }
  @media (max-width: 600px) {
    body { font-size: 16px; }
    .wrap { width: min(1160px, 100% - 36px); }
    html { scroll-padding-top: 86px; }
    .nav { gap: 12px; padding: 8px 0 6px; }
    .brand img { height: 34px; }
    .topbar.at-top .nav { padding-left: 110px; }
    .topbar.at-top .brand img { height: 68px; top: 9px; }
    /* the large logo carries the name itself, and a phone has no room for both */
    .topbar.at-top .brand > span { display: none; }
    .topbar.at-top .nav.menu-open .brand img { height: 34px; }
    .topbar.at-top .nav.menu-open .brand > span { display: block; }
    .brand { font-size: 11.5px; gap: 9px; }
    .nav .btn { min-height: 40px; font-size: 14.5px; }
    .aboard { grid-template-columns: 1fr; }
    .hold { border-left: 0; border-top: 1px solid var(--line); }
    .hold:first-child { border-top: 0; }
    .terms li { grid-template-columns: 1fr; gap: 2px; }
  }