/*
 * HUAX homepage (new design): hero and globe, live ingest, vessel record and the three applications.
 * Tokens, base type, buttons, navigation and footer come from assets/site/site.css, loaded first.
 */
:root {
  --pad-b: 26px;
  --watched-h: 124px;
}

/* ---------------------------------------------------------- hero, stacked
   Narrow screens (and wide ones until home.js has measured the page):
   headline, globe, watched locations, then the focused location. */

.stage { display: flex; flex-direction: column; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 18px var(--gutter) 40px; }
.hero-intro { order: 1; }
.globe-box { order: 2; position: relative; height: min(100vw, 640px); margin: 10px calc(-1 * var(--gutter)) 0; }
.watched { order: 3; margin-top: 6px; }
.loc-panel { order: 4; display: none; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.hero.is-focused .loc-panel { display: block; }
.hug, .axis-stub { display: none; }

.globe-box canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; }
.globe-box canvas.is-dragging { cursor: grabbing; }
.globe-box canvas.is-hit { cursor: pointer; }

.hero h1 { max-width: 8.5em; font-size: clamp(38px, 3.5vw, 54px); font-weight: 700; line-height: 0.98; letter-spacing: -0.035em; }
.lede { max-width: 23em; margin-top: 14px; color: var(--ink-2); font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.5; }
.hero-links { margin-top: 18px; }
.hero-links .text-link { font-size: 15px; }

/* Watched locations: a quiet line of names. Their marks double as the key for the globe's markers. */
.watched-label { color: var(--ink-3); font-size: 12px; line-height: 22px; }
.loc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 16px; }
.loc {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0;
  border: 0; background: none;
  color: var(--ink-2); font-size: 14.5px; font-weight: 500; line-height: 1.2; text-align: left;
  cursor: pointer; transition: color 0.15s;
}
.loc:hover, .loc.is-hover { color: var(--ink); }
.loc span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 0.15s; }
.loc:hover span, .loc.is-hover span { text-decoration-color: var(--line-strong); }
.loc[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
.loc[aria-pressed="true"] span { text-decoration-color: var(--teal); }
.watched-note { margin-top: 4px; color: var(--ink-3); font-size: 12px; line-height: 18px; }

.glyph { display: inline-block; flex: none; }
.glyph.ring { width: 9px; height: 9px; border: 1.5px solid var(--gold-deep); border-radius: 50%; }
.glyph.square { width: 7px; height: 7px; margin: 1px; background: var(--teal-deep); }
.loc[aria-pressed="true"] .glyph.ring { background: var(--gold); }

/* Key inside the focused location: only the signals this view shows. Inline, so it can follow the curve. */
.key { color: var(--ink-2); font-size: 12.5px; line-height: 22px; }
.key li { display: inline-block; margin-right: 16px; white-space: nowrap; }
.key svg { display: inline-block; width: 15px; height: 15px; margin-right: 7px; border-radius: 3px; background: var(--navy); vertical-align: -3px; }

/* Focused location */
.lp-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.lp-back { padding: 6px 0; border: 0; background: none; color: var(--teal-ink); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.lp-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.lp-step { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.lp-step > span { min-width: 3.4em; text-align: center; }
.lp-step button { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer; transition: border-color 0.15s; }
.lp-step button:hover { border-color: var(--ink); }
.lp-kind { color: var(--ink-2); font-size: 13.5px; }
.lp-kind .glyph { margin-right: 9px; vertical-align: -1px; }
.loc-panel h2 { margin-top: 8px; font-size: clamp(30px, 2.7vw, 40px); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; }
.loc-panel h2:focus { outline: none; }
.lp-text { margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.lp-h { margin-top: 18px; font-size: 14px; font-weight: 700; }
.lp-watch li { position: relative; margin-top: 5px; padding-left: 18px; font-size: 15px; line-height: 1.45; }
.lp-watch li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 2px; background: var(--teal-deep); }
.lp-link { margin-top: 14px; font-size: 14.5px; }
.lp-link a { color: var(--teal-ink); font-weight: 600; text-underline-offset: 4px; }
.lp-key { margin-top: 16px; }

.no-js .globe-box, .no-js .watched, .no-js [data-show] { display: none; }

/* ------------------------------------------------------------ hero, composed
   Wide screens: the page is built around the globe. It sits near the centre with open space above
   and its lower edge just past the fold. The copy (top left) and the watched locations (bottom left)
   stay in the first viewport and follow its curve. home.js sets the geometry (--vis-h, --stage-h,
   --cl, --gx, --gy, --gR) and the circle shapes (--shape-*). */

.hero-composed .hero .stage { position: relative; display: block; max-width: none; margin: 0; padding: 0; height: var(--stage-h, calc(100svh - var(--nav-h) + 80px)); }
.hero-composed .hero .globe-box { position: absolute; inset: 0; height: auto; margin: 0; }
.hero-composed .hero .orbit { position: absolute; margin: 0; padding: 0; border: 0; }
.hero-composed .hero .orbit, .hero-composed .hero .orbit * { pointer-events: none; }
.hero-composed .hero .orbit a, .hero-composed .hero .orbit button { pointer-events: auto; }
.hero-composed .hero .hug { display: block; width: 100%; height: 100%; }
.hero-composed .hero .axis-stub { display: block; position: absolute; left: var(--gx, 58vw); top: calc(var(--gy, 50%) + var(--gR, 40%)); bottom: 0; width: 1px; background: var(--line-strong); }

.hero-composed .hero .hero-intro,
.hero-composed .hero .loc-panel { left: var(--cl, var(--cl0)); top: 0; width: calc(var(--gx, 58vw) - var(--cl, var(--cl0))); }
.hero-composed .hero .hero-intro { height: calc(var(--vis-h, 100svh) - var(--pad-b) - var(--watched-h) - 20px); }
.hero-composed .hero .hero-intro .hug,
.hero-composed .hero .loc-panel .hug { float: right; shape-outside: var(--shape-text, none); }
.hero-composed .hero .hero-intro h1 { padding-top: clamp(40px, 8vh, 88px); }

.hero-composed .hero .watched { left: var(--cl, var(--cl0)); top: calc(var(--vis-h, 100svh) - var(--pad-b) - var(--watched-h)); width: calc(var(--gx, 58vw) - var(--cl, var(--cl0))); height: var(--watched-h); }
.hero-composed .hero .watched .hug { float: right; shape-outside: var(--shape-watched, none); }
.hero-composed .hero .loc-list { display: block; }
.hero-composed .hero .loc { min-height: 28px; margin-right: 16px; font-size: 13.5px; white-space: nowrap; }
.hero-composed .hero .watched { transition: opacity 0.3s 0.1s, visibility 0s; }
.hero-composed .hero.is-focused .watched { visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0s 0.2s; }

.hero-composed .hero .loc-panel { height: calc(var(--vis-h, 100svh) - var(--pad-b)); display: block; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s; }
.hero-composed .hero .loc-panel .lp-top { display: block; padding-top: clamp(28px, 5vh, 56px); }
.hero-composed .hero .lp-step { margin-left: 18px; }
.hero-composed .hero.is-focused .loc-panel { visibility: visible; opacity: 1; transform: none; transition: opacity 0.35s 0.15s, transform 0.35s 0.15s, visibility 0s; }
.hero-composed .hero .hero-intro { transition: opacity 0.35s 0.1s, visibility 0s; }
.hero-composed .hero.is-focused .hero-intro { visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0s 0.2s; }

/* -------------------------------- observation → vessel record → three applications
   One section: live ingest, the vessel record (a scroll story on wide screens) and the three
   applications. On wide screens the globe's axis runs through all of it, behind the product views. */

.layer { position: relative; border-top: 1px solid var(--line); background: var(--paper-2); --bg: var(--paper-2); }
.hero-composed .layer::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--globe-x, 58vw); width: 1px; background: var(--line-strong); }
.layer-in { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.layer-top { position: relative; }

/* Live ingest: a quiet telemetry line */
.ingest { display: grid; gap: 4px 24px; padding: 18px 0 20px; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }
/* Separators sit in the gap before each figure; overflow clips the one that would start a wrapped line. */
.ingest-data { display: flex; flex-wrap: wrap; gap: 4px 20px; overflow: hidden; }
.ingest-label { color: var(--ink-2); font-weight: 600; }
.ingest .metric { position: relative; }
.ingest .metric + .metric::before { content: "·"; position: absolute; left: -12px; color: var(--ink-3); }
.ingest .m-value { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.node { display: none; }
.ingest .m-value, .ingest .m-note { transition: opacity 0.25s; }
.js .ingest:not(.is-ready) .m-value, .js .ingest:not(.is-ready) .m-note { opacity: 0; }

.layer-head { display: grid; gap: 16px; padding: clamp(40px, 6vw, 72px) 0 clamp(16px, 3vw, 40px); }
.layer-head h2 { max-width: 15em; font-size: clamp(28px, 3vw, 42px); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.layer-head p { max-width: 34em; color: var(--ink-2); }

.hero-composed .layer-top { --axis: calc(var(--globe-x, 58vw) - var(--cl-doc, var(--cl0))); }
.hero-composed .ingest { grid-template-columns: minmax(0, calc(var(--axis) - 40px)) 80px minmax(0, 1fr); column-gap: 0; align-items: center; }
.hero-composed .node { display: block; position: relative; justify-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 4px var(--paper-2); }
.hero-composed .layer-head { grid-template-columns: minmax(0, calc(var(--axis) - 40px)) 80px minmax(0, 1fr); column-gap: 0; align-items: start; }
.hero-composed .layer-head p { grid-column: 3; }

/* Product views share one frame: a working window with a navy title bar */
.ui { position: relative; z-index: 1; width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 30px 60px -36px rgba(14, 42, 71, 0.5); font-size: 13.5px; line-height: 1.4; }
.ui-bar { display: flex; align-items: baseline; gap: 14px; padding: 10px 16px; background: var(--navy); color: #EAF2F7; font-size: 12.5px; }
.ui-bar h4 { font-size: 13px; font-weight: 700; color: #FFFFFF; }
.ui-bar span { color: #9FB6C7; }
.ui-bar .ui-bar-note { margin-left: auto; }
.ui-body { padding: 16px 18px 18px; }
.ui-sub { margin-top: 14px; color: var(--ink-3); font-size: 12px; }
.ui-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.ui-title-main { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.ui-meta { margin-top: 3px; color: var(--ink-3); font-size: 12.5px; }
.ui-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--paper); color: var(--ink-3); font-size: 12px; }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px; border-radius: 5px; font-size: 12px; font-weight: 600; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 2px; }
.badge-gold { background: var(--gold-soft); color: var(--gold-ink); }
.badge-gold::before { background: var(--gold); }
.badge-teal { background: var(--teal-soft); color: var(--teal-ink); }
.badge-teal::before { background: var(--teal); }

/* Record states: observed, missing, interpretation, analyst reasoning */
.st { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.st::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--navy); }
.st.m { color: var(--gold-ink); }
.st.m::before { background: var(--gold); }
.st.i { color: var(--teal-ink); }
.st.i::before { background: var(--teal); }
.st.r { color: var(--teal-ink); }
.st.r::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--teal-deep); }
.states { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; }

/* --------------------------------------------------------------- vessel record */

.record-stage { display: grid; gap: 32px; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(64px, 8vw, 104px); }
.record-copy { max-width: 44em; }
.record-copy h3 { max-width: 12em; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.record-copy > p { max-width: 30em; margin-top: 14px; color: var(--ink-2); font-size: 16px; }
.steps, .csteps { counter-reset: step; margin-top: 26px; }
.steps li, .csteps li { display: grid; grid-template-columns: 30px 1fr; padding: 11px 0; border-top: 1px solid var(--line-strong); counter-increment: step; transition: opacity 0.35s; }
.steps li::before, .csteps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; padding-top: 3px; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.steps li b, .csteps li b { font-size: 16px; }
.steps li span, .csteps li span { color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }

.rec-body { display: grid; grid-template-columns: 176px minmax(0, 1fr); }
.rec-side { padding: 4px 14px 16px; border-right: 1px solid var(--line); background: var(--paper); }
.rec-facts div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.rec-facts dt { color: var(--ink-3); }
.rec-facts dd { margin: 0; text-align: right; }
.rec-ctx li { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; padding: 6px 8px; border-left: 3px solid var(--navy); background: var(--white); font-size: 12.5px; transition: opacity 0.4s; }
.rec-ctx li span { color: var(--ink-3); text-align: right; }
.rec-main { min-width: 0; padding: 12px 16px 12px; }
.rec-timeline { display: block; width: 100%; height: auto; }
.rec-timeline text { font-family: var(--font); }
.rec-timeline .rowlab { fill: var(--ink-2); font-size: 12.5px; }
.rec-timeline .axis { stroke: var(--line-strong); stroke-width: 1; }
.rec-timeline .axlab { fill: var(--ink-3); font-family: var(--mono); font-size: 10.5px; text-anchor: middle; }
.rec-timeline .tick { stroke: var(--navy); stroke-width: 1.2; }
.rec-timeline .stopbar { fill: rgba(14, 42, 71, 0.14); }
.rec-timeline .stoptxt { fill: var(--ink); font-size: 11.5px; }
.rec-timeline .portbar { fill: var(--navy); }
.rec-timeline .porttxt { fill: #FFFFFF; font-size: 11px; font-weight: 600; }
.rec-timeline .gapband { fill: rgba(242, 169, 59, 0.14); stroke: var(--gold); stroke-opacity: 0.6; }
.rec-timeline .gaptxt { fill: var(--gold-ink); font-size: 12px; font-weight: 600; }
.rec-timeline .gaptxt-sub { font-weight: 500; }
.rec-timeline .dline { fill: none; stroke: var(--navy); stroke-width: 1.6; }
.rec-timeline .dline.dot { stroke: var(--ink-3); stroke-dasharray: 2 4; }
.rec-timeline .dline.up { stroke: var(--teal-deep); }
.rec-timeline .dmark { fill: var(--white); stroke: var(--navy); stroke-width: 1.3; }
.rec-timeline .dmark.up { stroke: var(--teal-deep); }
.rec-timeline .smalltxt { fill: var(--ink-2); font-size: 11px; }
.rec-timeline .uptxt { fill: var(--teal-ink); font-size: 11.5px; font-weight: 600; }
.rec-timeline .ext { fill: var(--white); stroke: var(--navy); stroke-width: 1.4; }
.rec-timeline .reason { fill: none; stroke: var(--teal-deep); stroke-width: 1.3; stroke-dasharray: 5 3; }
.rec-timeline .reasontxt { fill: var(--teal-ink); font-size: 11.5px; font-weight: 600; }
.rec-timeline .halo { paint-order: stroke; stroke: var(--white); stroke-width: 4px; stroke-linejoin: round; }
.rec-log { width: 100%; margin-top: 4px; border-collapse: collapse; font-size: 12.5px; line-height: 1.3; }
.rec-log th { padding: 5px 8px; border-bottom: 1px solid var(--line-strong); color: var(--ink-3); font-size: 11.5px; font-weight: 500; text-align: left; }
.rec-log td { padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rec-log td:first-child { color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.rec-log tr { transition: opacity 0.4s, background-color 0.4s; }
.rec-log tr.miss { background: var(--gold-soft); }
.rec-log tr.why { background: var(--teal-soft); }
.rec-log tr.note { background: var(--paper); }

/* Layers of the record appear with the steps of the scroll story; without it the whole record shows. */
.record-ui .s1, .record-ui .s2, .record-ui .s3 { transition: opacity 0.5s; }
.is-story .record-ui:not(.is-1) .s1, .is-story .record-ui:not(.is-2) .s2, .is-story .record-ui:not(.is-3) .s3 { opacity: 0; }
.is-story .record-ui:not(.is-2) .rec-ctx .s2 { opacity: 0.35; }
.is-story .record-ui:not(.is-1) tr[data-s="1"], .is-story .record-ui:not(.is-2) tr[data-s="2"], .is-story .record-ui:not(.is-3) tr[data-s="3"] { opacity: 0.22; }

/* ---------------------------------------------------------------- applications */

.app { position: relative; background: var(--bg); }
.app-desk { --bg: var(--paper); }
.app-yacht { --bg: var(--paper-2); }
.app-in { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(64px, 8vw, 120px) var(--gutter); }
.app-grid { display: grid; gap: 36px; align-items: center; }
.station { margin-bottom: 18px; color: var(--ink-3); font-size: 12.5px; }
.app-copy h3 { font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.app-for { margin-top: 10px; color: var(--ink-2); font-size: 18px; font-weight: 500; }
.app-copy > p:not([class]) { max-width: 30em; margin-top: 18px; color: var(--ink-2); }
.app-fields { max-width: 30em; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line-strong); font-size: 14px; }
.app-fields span { display: block; margin-bottom: 4px; color: var(--ink-3); font-size: 12px; }
.app-link { margin-top: 20px; }

/* Intelligence Desk */
.tabs { display: flex; gap: 22px; margin-top: 14px; overflow-x: auto; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.tabs span { padding: 8px 0; color: var(--ink-3); white-space: nowrap; }
.tabs .on { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--teal); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; }
.seq { position: relative; margin-top: 8px; }
.seq::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 22px; width: 2px; background: var(--navy); opacity: 0.85; }
.seq li { position: relative; }
.seq button { position: relative; display: block; width: 100%; padding: 8px 6px 8px 32px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; transition: background-color 0.15s; }
.seq button:hover, .seq button.hl { background: var(--paper); }
.seq button::before { content: ""; position: absolute; left: 1px; top: 11px; width: 16px; height: 16px; border: 2px solid var(--navy); border-radius: 2px; background: var(--navy); }
.seq button.hollow::before { background: var(--white); }
.seq button.gapn::before { border-color: var(--gold); background: var(--gold); }
.seq button.route::before { border-color: var(--teal); background: var(--teal); }
.seq b { display: block; font-size: 14px; }
.seq button.gapn b { color: var(--gold-ink); }
.seq button span { display: block; color: var(--ink-3); font-size: 12.5px; }
.evs { display: grid; gap: 6px; margin-top: 8px; }
.ev { display: flex; justify-content: space-between; gap: 14px; padding: 9px 12px; border-left: 3px solid var(--navy); border-radius: 0 6px 6px 0; background: var(--paper); transition: box-shadow 0.2s, transform 0.2s; }
.ev b { display: block; font-size: 13.5px; }
.ev div span { color: var(--ink-2); font-size: 12.5px; }
.ev > span { flex: none; max-width: 9em; color: var(--ink-3); font-size: 12px; text-align: right; }
.ev.miss { border-left-color: var(--gold); background: var(--gold-soft); }
.ev.why { border-left-color: var(--teal); background: var(--teal-soft); }
.ev.hl { box-shadow: 0 0 0 2px var(--teal); transform: translateX(3px); }
.review { margin-top: 16px; padding: 10px 14px; border-left: 3px solid var(--teal-deep); background: var(--teal-soft); font-size: 13px; }
.review b { display: block; margin-bottom: 2px; color: var(--teal-ink); font-size: 12px; }

/* Yacht Intelligence */
.yacht-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.photo { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: 8px; background: var(--paper-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-note { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: 4px; background: rgba(250, 250, 247, 0.86); color: var(--ink-2); font-size: 11.5px; }
.prio { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 12px; padding: 11px 14px; border-radius: 8px; background: var(--teal-soft); }
.prio b { display: block; font-size: 15px; }
.prio span { color: var(--ink-2); font-size: 12px; }
.score { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.score small { color: var(--ink-3); font-size: 14px; font-weight: 500; }
.meter { height: 5px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: var(--line); }
.meter i { display: block; width: 41%; height: 100%; background: var(--teal); }
.yacht-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; }
.drivers { display: grid; gap: 5px; margin-top: 8px; }
.drv { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; font-weight: 600; }
details.drv { display: block; }
.drv summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
.drv summary::-webkit-details-marker { display: none; }
.drv summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform 0.2s; }
.drv[open] summary::after { transform: rotate(-135deg); }
details.drv p { margin-top: 6px; padding-left: 44px; color: var(--ink-2); font-size: 12.5px; font-weight: 400; }
.pts { min-width: 34px; padding: 2px 6px; border-radius: 4px; background: var(--teal-soft); color: var(--teal-ink); font-size: 12px; font-weight: 700; text-align: center; }
.vis { position: relative; height: 10px; margin-top: 8px; border-radius: 2px; background: var(--paper-2); }
.vis i { position: absolute; top: 0; bottom: 0; background: var(--navy); }
.vis i.gap { background: var(--gold); }
.vis-key { display: flex; gap: 14px; margin-top: 6px; color: var(--ink-3); font-size: 11.5px; }
.vis-key span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 1px; background: var(--navy); }
.vis-key .gap::before { background: var(--gold); }
.safe { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.safe li { padding: 3px 8px; border-radius: 4px; background: var(--gold-soft); color: var(--gold-ink); font-size: 12px; font-weight: 500; }
.quality { margin-top: 6px; }
.quality li { padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; }
.quality b { margin-right: 6px; color: var(--ink); }

/* Cargo Intelligence: navy band and scroll story */
.app-cargo { --bg: var(--navy); color: #EAF2F7; }
.app-cargo .station { color: #9FB6C7; }
.app-cargo .app-for, .app-cargo .app-fields span { color: #9FB6C7; }
.app-cargo .app-fields { border-top-color: rgba(234, 242, 247, 0.18); color: #EAF2F7; }
.app-cargo .text-link { color: #EAF2F7; }
.app-cargo .text-link:hover { color: var(--teal); }
.app-cargo .csteps li { border-top-color: rgba(234, 242, 247, 0.16); }
.app-cargo .csteps li::before, .app-cargo .csteps li span { color: #9FB6C7; }
.cvis { position: relative; z-index: 1; display: grid; gap: 44px; }
.pane { display: flex; flex-direction: column; gap: 16px; }
.read { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 20px; }
.read h4 { color: #FFFFFF; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.read p { max-width: 42em; margin-top: 4px; color: #9FB6C7; font-size: 14.5px; }
.read .delta { margin: 0; color: #FFFFFF; font-size: clamp(44px, 5vw, 76px); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.read .delta small { margin-left: 4px; color: #9FB6C7; font-size: 0.38em; font-weight: 500; letter-spacing: 0; }
.hull { display: block; width: 100%; height: auto; overflow: visible; }
.hull .steel { fill: #12314D; stroke: #5C8AAB; stroke-width: 1.6; }
.hull .super { fill: #0F2A44; stroke: #5C8AAB; stroke-width: 1.4; }
.hull .wbase { fill: #1E4E6E; opacity: 0.75; }
.hull .wdelta { fill: var(--teal); opacity: 0.7; }
.hull text { fill: #EAF2F7; font-family: var(--font); font-size: 13px; }
.hull .dim, .hull .dim text { fill: #9FB6C7; font-size: 12px; }
.hull .wl { stroke: #4CCFDD; stroke-width: 2; }
.hull .ghost { stroke: #9FB6C7; stroke-width: 1.2; stroke-dasharray: 4 5; }
.hull .base { stroke: #9FB6C7; stroke-width: 1.2; stroke-dasharray: 3 5; }
.hull #bracketLine { stroke: #4CCFDD; stroke-width: 2; }
.hull #bracketTxt { fill: #FFFFFF; font-size: 15px; font-weight: 700; }
.cnote { max-width: 46em; color: #9FB6C7; font-size: 13px; }
.minimap { position: relative; aspect-ratio: 11 / 5; overflow: hidden; border: 1px solid rgba(234, 242, 247, 0.12); border-radius: 10px; background: #0B2238; }
.minimap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mlegend { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 18px; color: #9FB6C7; font-size: 13px; }
.mlegend li { display: flex; align-items: center; gap: 9px; }
.mlegend svg { flex: none; width: 14px; height: 14px; }
.chain { position: relative; margin-top: 4px; }
.chain li { position: relative; padding: 12px 0 12px 30px; border-left: 1px solid rgba(234, 242, 247, 0.22); color: #9FB6C7; font-size: 14px; }
.chain li::before { content: ""; position: absolute; left: -4px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: #9FB6C7; }
.chain li span { display: block; color: #FFFFFF; font-size: 16px; font-weight: 700; }
.chain li.mid::before { background: var(--teal); box-shadow: 0 0 0 4px rgba(31, 184, 196, 0.2); }
.chain li.mid span { color: #4CCFDD; }

/* Wide screens: two columns per application, mirrored for the yacht view */
@media (min-width: 1180px) {
  .record-stage { grid-template-columns: minmax(0, 0.7fr) minmax(0, 2.3fr); column-gap: clamp(32px, 4vw, 64px); align-items: center; }
}
@media (min-width: 960px) {
  .app-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); column-gap: clamp(40px, 5vw, 88px); }
  .app-grid-flip { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
  .app-grid-flip > .app-copy { order: 2; }
}

/* With the composed hero the globe's axis runs on through every application, behind the product
   views, and each application has its station on it. */
.hero-composed .app::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--globe-x, 58vw); width: 1px; background: var(--line-strong); }
.hero-composed .app-cargo::before { background: rgba(234, 242, 247, 0.16); }
.hero-composed .station { position: relative; margin: 0 0 30px calc(var(--globe-x, 58vw) - var(--cl-doc, var(--cl0))); padding-left: 16px; }
.hero-composed .station::before { content: ""; position: absolute; left: -3px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 4px var(--bg); }
.hero-composed .app-cargo .station::before { background: #9FB6C7; }
.hero-composed .app-cargo .cvis { background: var(--navy); }

/* Scroll stories (set by home.js on wide screens, when the stage fits the viewport and motion is welcome):
   the stage holds while the record builds up, and while the cargo view moves from vessel to market. */
.record.is-story .record-track { height: 300vh; }
.record.is-story .record-stage { position: sticky; top: var(--nav-h); min-height: calc(100vh - var(--nav-h)); align-content: center; padding-top: 12px; padding-bottom: 12px; }
.is-story .steps li:not(.is-on), .is-story .csteps li:not(.is-on) { opacity: 0.42; }
.cargo-track.is-story { height: 320vh; }
.cargo-track.is-story .cargo-stage { position: sticky; top: var(--nav-h); display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - var(--nav-h)); padding-top: 12px; padding-bottom: 12px; }
.cargo-track.is-story .station { margin-bottom: 20px; }
.cargo-track.is-story .pane { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
.cargo-track.is-story .pane.is-on { opacity: 1; pointer-events: auto; transition-delay: 0.1s; }

/* The applications fade in once as they come into view (set by home.js, never with reduced motion). */
.reveals .app .app-grid > * { transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.reveals .app .app-grid > :nth-child(2) { transition-delay: 0.08s; }
.reveals .app:not(.is-in) .app-grid > * { opacity: 0; transform: translateY(18px); }

/* --------------------------------------------------------------- briefing
   The sign-up that closes the page. On wide screens the globe's axis ends at its station. */

.briefing { --bg: var(--paper); position: relative; border-top: 1px solid var(--line); background: var(--bg); }
.hero-composed .briefing::before { content: ""; position: absolute; top: 0; left: var(--globe-x, 58vw); width: 1px; height: calc(clamp(64px, 8vw, 120px) + 8px); background: var(--line-strong); }
.briefing-in { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(64px, 8vw, 120px) var(--gutter); }
.briefing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px clamp(40px, 6vw, 96px); align-items: start; }
.briefing h2 { font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.briefing .lead { max-width: 30em; margin-top: 16px; color: var(--ink-2); font-size: 18px; }
.briefing .fine { margin-top: 16px; color: var(--ink-3); font-size: 14px; }
.briefing .alt { max-width: 30em; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line-strong); color: var(--ink-2); font-size: 15px; }
.briefing .alt a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 4px; }
.kit-form { position: relative; z-index: 1; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 30px 60px -36px rgba(14, 42, 71, 0.5); }
.kit-form .btn { margin-top: 18px; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 959px) {
  .rec-body { grid-template-columns: minmax(0, 1fr); }
  .rec-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .split, .yacht-top, .yacht-cols { grid-template-columns: minmax(0, 1fr); }
  .rec-log th:nth-child(3), .rec-log td:nth-child(3) { display: none; }
  /* The timeline keeps a readable size and scrolls sideways; the log below carries the same events. */
  .rec-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
  .rec-timeline { min-width: 600px; }
  .ui-bar .ui-bar-note { display: none; }
  .briefing-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .loc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ingest-data { gap: 2px 16px; }
  .ingest .metric { flex-basis: 100%; }
  .rec-log th, .rec-log td { padding-left: 6px; padding-right: 6px; }
  .rec-log td:first-child { white-space: normal; }
  /* Hull labels in drawing units: larger on phones; the headline above already carries the change. */
  .hull text { font-size: 24px; }
  .hull .dim, .hull .dim text { font-size: 22px; }
  .hull #bracketTxt { display: none; }
}