/* sailping.com -- one stylesheet for every page: look A's family. */

@font-face { font-family: 'Geist'; font-weight: 400; font-display: swap; src: url('/fonts/geist-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 500; font-display: swap; src: url('/fonts/geist-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 600; font-display: swap; src: url('/fonts/geist-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-display: swap; src: url('/fonts/geist-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 500; font-display: swap; src: url('/fonts/geist-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 600; font-display: swap; src: url('/fonts/sora-latin-600-normal.woff2') format('woff2'); }

:root {
  --deep: #0b1e3a; --navy-2: #0d1d35; --navy-3: #0a1626;
  --blue: #1668e3; --blue-strong: #1257c2; --blue-text: #1459c7; --signal: #4fb8ff;
  --ground: #eef2f7; --fog: #f6f8fb; --surface: #ffffff;
  --line: #e1e7ef; --line-2: #edf1f6;
  --ink: #0b1e3a; --ink-2: #44587a; --ink-3: #5c6d86;
  --on-dark: #c3d0e2; --on-dark-2: #93a6c2;
  --red: #b91c1c; --red-dot: #dc2626; --red-bg: #fdeded;
  --amber: #b45309; --amber-dot: #e08a0b; --amber-bg: #fdf2df; --amber-on-dark: #fcc965;
  --green: #15803d; --green-bg: #e9f7ec;
  --move: #1668e3; --move-text: #1459c7; --move-bg: #e7effc;
  --band: radial-gradient(900px 300px at 86% -40%, rgba(22,104,227,.18), transparent 70%),
          radial-gradient(560px 240px at 2% -20%, rgba(79,184,255,.14), transparent 70%),
          linear-gradient(180deg, #e4edf9 0%, #eef3fa 100%);
  --sea: radial-gradient(1100px 420px at 84% -10%, rgba(47,127,240,.50), transparent 70%),
         radial-gradient(700px 340px at 4% -20%, rgba(79,184,255,.20), transparent 70%),
         linear-gradient(180deg, #0d1d35 0%, #0b1a30 60%, #0a1626 100%);
  --card-shadow: 0 1px 1px rgba(11,30,58,.04), 0 2px 6px -2px rgba(11,30,58,.07), 0 16px 34px -22px rgba(11,30,58,.28);
  --lift-shadow: 0 1px 2px rgba(11,30,58,.05), 0 24px 44px -22px rgba(11,30,58,.38);
  --shot-shadow: 0 40px 80px -40px rgba(4,12,26,.65), 0 0 0 1px rgba(11,30,58,.06);
  --tile-dark: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --display: 'Sora', 'Geist', system-ui, sans-serif;
  --ui: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --wrap: 1200px; --gutter: 32px;
  --page: #ffffff; --page-alt: var(--ground);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { font: 400 17px/1.6 var(--ui); color: var(--ink); background: var(--page);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; }
::selection { background: rgba(79,184,255,.35); color: inherit; }
img, picture { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { list-style: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.ic { display: inline-block; flex: none; vertical-align: middle; }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 999px;
  background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---- The logo: the mark (three containers, ours pulled out) and the name ----
   One size, --logo-h (the mark's square), 32px: the mark is drawn on a
   32-unit grid, sharp at 32 and 64 pixels. The name is set from it as the
   drawn lockup sets it: Sora 600 at .62 of the square, its capitals centred
   on the mark, .29 of the square after it. The mark's ink starts 1/16 inside
   its square, so it is pulled back to line up with the text below it.
   Light colours by default; the dark pair on the deep-sea bar and the footer. */
.logo { --logo-h: 32px; --logo-ink: #0b1e3a; --logo-ours: #1668e3;
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--logo-ink); }
.logo .mark { flex: none; display: block; width: var(--logo-h); height: var(--logo-h); margin-left: calc(var(--logo-h) / -16); fill: var(--logo-ink); }
.logo .mark .ours { fill: var(--logo-ours); }
.logo .word { position: relative; top: .04em; margin-left: calc(var(--logo-h) * .29);
  font: 600 calc(var(--logo-h) * .62)/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }

/* ---- Buttons and chips: round, one shape everywhere ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px;
  padding: 0 26px; border-radius: 999px; font: 600 16px/1 var(--ui); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, box-shadow 200ms ease; }
.btn:active { transform: scale(.97); }
.btn .ic { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.btn-fill { background: var(--blue); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 24px -12px rgba(22,104,227,.9); }
.btn-fill:hover { background: var(--blue-strong); }
.btn-fill:hover .ic { transform: translateX(3px); }
.btn-line { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px rgba(11,30,58,.12), 0 1px 2px rgba(11,30,58,.05); }
.btn-line:hover { box-shadow: 0 0 0 1px rgba(11,30,58,.24), 0 1px 2px rgba(11,30,58,.05); }
.on-sea .btn-line { background: rgba(255,255,255,.06); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.on-sea .btn-line:hover { background: rgba(255,255,255,.11); box-shadow: 0 0 0 1px rgba(255,255,255,.4); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.link-arrow .ic { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }

.chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 999px;
  font: 600 13.5px/1 var(--ui); white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.late, .chip.warn { background: var(--amber-bg); color: var(--amber); }
.chip.port { background: var(--move-bg); color: var(--move-text); }
.chip.gone { background: var(--red-bg); color: var(--red); }
.tag-example { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  font: 600 11.5px/1 var(--ui); letter-spacing: .02em; color: var(--ink-3); background: var(--line-2); }
.on-sea .tag-example { color: var(--on-dark-2); background: rgba(255,255,255,.08); }

/* ---- Sections ---- */
.sec { padding: 120px 0; position: relative; }
.sec.alt { background: var(--page-alt); }
.sec.band { background: var(--band); }
.on-sea { background: var(--sea); color: #fff; }
.h2 { font-size: clamp(32px, 3.8vw, 52px); letter-spacing: -.035em; }
.lead { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 40em; }
.on-sea .lead, .on-sea .muted { color: var(--on-dark); }
.head { max-width: 760px; margin-bottom: 56px; }
.head .lead { margin-top: 20px; }
.h3 { font-size: 22px; letter-spacing: -.02em; line-height: 1.22; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; color: var(--ink-3); }

/* ---- The header: the deep-sea bar, on every page ---- */
.top { position: sticky; top: 0; z-index: 50; background: rgba(12,27,49,.97);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06); color: #fff; }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.top .logo { --logo-ink: #e7eef8; --logo-ours: var(--signal); }
.nav { display: flex; gap: 6px; margin-left: 8px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); text-decoration: none;
  font: 500 15px/1 var(--ui); padding: 0 12px; border-radius: 999px; transition: color 150ms ease, background-color 150ms ease; }
.nav a:hover, .nav a[aria-current] { color: #fff; background: rgba(255,255,255,.07); }
/* For forwarders: three links that open with no script -- under a pointer (a
   tap on a touch screen counts), or with the keyboard on the button or in the
   panel. A click alone does not hold it open over the page. */
.drop { position: relative; display: flex; }
.drop-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px;
  background: none; color: var(--on-dark); font: 500 15px/1 var(--ui); cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.drop-btn .chev { width: 14px; height: 14px; opacity: .8; transition: transform 200ms var(--ease-out); }
.drop-panel { position: absolute; left: -6px; top: calc(100% + 8px); z-index: 60; min-width: 230px; display: grid; padding: 8px; border-radius: 18px;
  background: #fff; box-shadow: 0 24px 50px -18px rgba(4,12,26,.55), 0 0 0 1px rgba(11,30,58,.06);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 160ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms; }
.drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav .drop-panel a { color: var(--ink); background: none; min-height: 46px; padding: 0 14px; border-radius: 12px; font-size: 15.5px; }
.nav .drop-panel a:hover, .nav .drop-panel a:focus-visible { color: var(--ink); background: var(--fog); }
/* Each its own rule: a browser without :has() drops a whole rule that names
   it, and the pointer's way would go with it. */
.drop:hover .drop-btn { color: #fff; background: rgba(255,255,255,.07); }
.drop:has(:focus-visible) .drop-btn { color: #fff; background: rgba(255,255,255,.07); }
.drop:hover .drop-panel { opacity: 1; visibility: visible; transform: none;
  transition: opacity 160ms ease, transform 200ms var(--ease-out), visibility 0s; }
.drop:has(:focus-visible) .drop-panel { opacity: 1; visibility: visible; transform: none;
  transition: opacity 160ms ease, transform 200ms var(--ease-out), visibility 0s; }
.drop:hover .chev { transform: rotate(180deg); }
.drop:has(:focus-visible) .chev { transform: rotate(180deg); }
.top-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.signin { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: none; font: 500 15px/1 var(--ui); padding: 0 10px; }
.signin:hover { color: var(--signal); }
.menu { display: none; }

/* ---- 1. The opening ---- */
.hero { padding: 80px 0 0; overflow: hidden; }
.hero h1 { font-size: clamp(46px, 6.6vw, 96px); line-height: .98; letter-spacing: -.045em; max-width: 15ch; }
.hero .lead { margin-top: 26px; max-width: 34em; }
.hero .cta { margin-top: 36px; }
.hero-for { margin-top: 22px; font-size: 15px; color: var(--on-dark-2); display: flex; align-items: center; gap: 8px; }
.hero-for .ic { width: 16px; height: 16px; color: var(--signal); }

/* The voyage: the app's journey line, alive. Without motion it is the end. */
.voyage { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; border-radius: 24px;
  background: var(--tile-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.08),
  0 30px 60px -36px rgba(0,0,0,.8); }
.v-main { padding: 26px 34px 34px; }
.v-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v-num { font: 500 15px/1 var(--mono); color: #fff; letter-spacing: .02em; padding: 7px 11px; border-radius: 9px; background: rgba(255,255,255,.08); }
.v-meta { font-size: 14px; color: var(--on-dark-2); }
.v-head .tag-example { margin-left: auto; }
.v-line { position: relative; height: 112px; margin: 26px 10px 0; }
.v-rail { position: absolute; left: 0; right: 0; top: 21px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); }
.v-done { position: absolute; inset: 0; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, rgba(79,184,255,.55), var(--signal)); }
.v-stop { position: absolute; top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--on-dark-2); width: 180px; }
.v-stop::before { content: ""; width: 21px; height: 21px; border-radius: 50%; margin-bottom: 14px;
  background: var(--signal); box-shadow: 0 0 0 5px rgba(79,184,255,.18); }
.v-stop b { font: 600 17px/1.2 var(--display); color: #fff; letter-spacing: -.01em; }
.v-stop.s1 { left: 0; transform: translateX(-10px); }
.v-stop.s2 { left: 60%; transform: translateX(-10px); }
.v-stop.s3 { right: 0; align-items: flex-end; text-align: right; transform: translateX(10px); }
.v-boat { position: absolute; top: 5px; left: 100%; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--blue); z-index: 2;
  box-shadow: 0 0 0 6px rgba(79,184,255,.22), 0 8px 18px -6px rgba(0,0,0,.6); }
.v-boat .ic { width: 18px; height: 18px; }
.v-clock { border-left: 1px solid rgba(255,255,255,.09); padding: 26px 30px 30px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.fc-label { font-size: 14px; color: var(--on-dark-2); }
.fc-row { display: flex; align-items: baseline; gap: 10px; }
.fc-num { display: inline-block; height: 1em; overflow: hidden; font: 600 76px/1 var(--display); letter-spacing: -.04em; color: var(--amber-on-dark); }
.fc-num span { display: block; height: 1em; transform: translateY(-2em); }
.fc-unit { font: 600 18px/1 var(--display); color: #fff; }
.fc-sub { font-size: 14px; color: var(--on-dark); }
.fc-mail { margin-top: 12px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px;
  border-radius: 999px; font: 600 13px/1 var(--ui); color: var(--amber-on-dark); background: rgba(251,194,60,.13); }
.fc-mail .ic { width: 15px; height: 15px; }

/* The real dashboard, rising out of the sea */
.hero-shot { position: relative; margin-top: 72px; }
.shot { position: relative; border-radius: 22px 22px 0 0; overflow: hidden; background: #fff; box-shadow: var(--shot-shadow); }
.shot img { width: 100%; }
.shot-laptop::after, .shot-phone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--page) 92%); }
.shot-phone { display: none; }
.shot .shot-tag { position: absolute; z-index: 3; top: 2.1%; left: 50%; transform: translateX(-50%); height: 26px; padding: 0 12px; font-size: 12.5px;
  color: var(--ink-2); background: rgba(255,255,255,.94); box-shadow: 0 0 0 1px var(--line), 0 4px 12px -6px rgba(11,30,58,.35); }
.straddle { background: linear-gradient(180deg, transparent 0 62%, var(--page) 62% 100%); }
.pin { position: absolute; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--deep); color: #fff; font: 600 13px/1 var(--display); box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 6px 14px -4px rgba(11,30,58,.6);
  transform: translate(-50%, -50%); z-index: 3; }
/* Where each numbered mark sits on the dashboard picture: in the gap between
   the side menu and the page, never over a word. */
.shot .p1 { left: 16.2%; top: 11.4%; } .shot .p2 { left: 16.2%; top: 38.6%; }
.shot .p3 { left: 16.2%; top: 61.2%; } .shot .p4 { left: 16.2%; top: 24.6%; }
.lead.under { margin-top: 20px; }

/* ---- 2. Your morning, on one screen ---- */
.morning { padding-top: 64px; }
.morning .h2 { max-width: 19em; }
.points4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.points4 li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }
.points4 .pin { position: static; transform: none; box-shadow: none; }
.points4 b { display: block; font: 600 17px/1.3 var(--display); letter-spacing: -.01em; margin-bottom: 6px; }
.points4 p { font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }

/* ---- 3. The three moments, on one line ---- */
.moments .head { max-width: 900px; }
.m-rail { position: relative; height: 56px; margin: 0 0 30px; }
.m-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(22,104,227,.18) 0%, var(--blue) 16.6%, var(--blue) 50%, var(--blue) 66%, var(--red-dot) 83.3%, rgba(220,38,38,.25) 100%); }
.m-stop { position: absolute; top: 0; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); box-shadow: 0 0 0 1px rgba(11,30,58,.08), var(--card-shadow); }
.m-stop .ic { width: 24px; height: 24px; }
.m-stop.late { left: 16.66%; color: var(--amber-dot); }
.m-stop.port { left: 50%; color: var(--move); }
.m-stop.gone { left: 83.33%; color: var(--red-dot); }
.m-stop::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid currentColor; opacity: .22; }
.m-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.m-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.m-col .h3 { margin: 18px 0 12px; }
.m-col p { color: var(--ink-2); font-size: 16.5px; max-width: 24em; margin-bottom: 26px; }
.m-col .frag { margin-top: auto; min-height: 98px; align-content: start; }
.frag { width: 100%; max-width: 340px; text-align: left; border-radius: 18px; background: var(--surface);
  box-shadow: var(--card-shadow); padding: 16px 18px; display: grid; grid-template-columns: 10px 1fr auto; gap: 4px 12px; align-items: center;
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease; }
.frag i { width: 9px; height: 9px; border-radius: 50%; grid-row: span 2; align-self: start; margin-top: 6px; }
.frag .mono { font-size: 13.5px; color: var(--blue-text); }
.frag em { font-style: normal; font-size: 14.5px; line-height: 1.35; grid-column: 2 / 4; }
.frag .tag-example { justify-self: end; }
.frag.late i, .frag.port i { background: var(--amber-dot); }
.frag.late em, .frag.port em { color: var(--amber); }
.frag.gone i { background: var(--red-dot); } .frag.gone em { color: var(--red); }
.slip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font: 600 11.5px/1 var(--ui);
  color: var(--amber); background: var(--amber-bg); margin-left: 6px; vertical-align: 1px; }
.m-note { margin-top: 44px; text-align: center; font-size: 15px; color: var(--ink-3); }

/* ---- 4. One container, one page; 5. adding: split layouts ---- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.flip > :first-child { order: 2; }
.split .lead { margin-top: 20px; }
.split .h2, .faq-row .h2 { font-size: clamp(30px, 3.3vw, 46px); }
.ticks { margin-top: 32px; display: grid; gap: 18px; }
.ticks li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; font-size: 16.5px; color: var(--ink-2); line-height: 1.5; }
.ticks b { color: var(--ink); font-weight: 600; }
.well { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--move-bg); color: var(--blue); }
.well .ic { width: 18px; height: 18px; }
.on-sea .ticks li { color: var(--on-dark); }
.on-sea .ticks b { color: #fff; }
.on-sea .well { background: rgba(79,184,255,.13); color: var(--signal); }
.frame { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: var(--shot-shadow); }
.by-bl { margin-top: 26px; padding: 16px 20px; border-radius: 16px; background: var(--move-bg); color: var(--move-text); font-size: 16px; font-weight: 500; }

/* One container's page, drawn: the route, the facts, the events in each port's time. */
.boxcard { border-radius: 24px; background: var(--surface); box-shadow: var(--lift-shadow); padding: 26px 28px 20px; }
.bc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.bc-num { font-size: 15px; color: var(--ink); padding: 7px 11px; border-radius: 9px; background: var(--fog); box-shadow: inset 0 0 0 1px var(--line); }
.bc-type { font-size: 14px; color: var(--ink-3); }
.bc-head .tag-example { margin-left: auto; }
.bc-status { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.bc-pct { font-size: 14px; color: var(--ink-2); }
.bc-pct b { font: 600 18px/1 var(--display); color: var(--ink); }
.bc-route { position: relative; margin-top: 20px; }
.bc-route svg { display: block; width: 100%; height: auto; overflow: visible; }
.bc-route line { stroke: var(--blue); stroke-width: 3; stroke-linecap: round; }
.bc-route circle { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.bc-stops { position: relative; height: 46px; margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.bc-stops li { position: absolute; top: 0; display: flex; flex-direction: column; gap: 2px; width: 36%; line-height: 1.3; }
.bc-stops b { font: 600 15px/1.2 var(--display); color: var(--ink); letter-spacing: -.01em; }
.bc-stops li:nth-child(1) { left: 0; }
.bc-stops li:nth-child(2) { left: 62.86%; transform: translateX(-50%); align-items: center; text-align: center; }
.bc-stops li:nth-child(3) { right: 0; align-items: flex-end; text-align: right; }
.bc-facts { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bc-facts > div { border-radius: 14px; background: var(--fog); padding: 12px 14px; }
.bc-facts dt { font-size: 12.5px; color: var(--ink-3); }
.bc-facts dd { margin-top: 4px; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.bc-facts dd.is-warn { color: var(--amber); }
.bc-facts .slip { margin: 6px 0 0; }
.bc-events { margin-top: 16px; display: grid; }
.bc-events li { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--ink); }
.ev-when { color: var(--ink-2); white-space: nowrap; }
.ev-when i { font-style: normal; font-size: 12px; color: var(--ink-3); margin-left: 4px; padding: 2px 6px; border-radius: 6px; background: var(--fog); }

/* The paste box: the number check, drawn from the app's own rule */
.paste { border-radius: 22px; background: var(--surface); box-shadow: var(--lift-shadow); padding: 26px; }
.paste-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.paste-top b { font: 600 17px/1.2 var(--display); letter-spacing: -.01em; }
.paste-list { margin-top: 18px; border-radius: 16px; background: var(--fog); box-shadow: inset 0 0 0 1px var(--line); padding: 6px 0; }
.paste-list li { display: grid; grid-template-columns: 22px 150px 1fr; gap: 12px; align-items: center; padding: 11px 16px; font-size: 14px; }
.paste-list li + li { border-top: 1px solid var(--line-2); }
.paste-list .mono { font-size: 15px; color: var(--ink); }
.paste-list .ok-t { color: var(--green); font-weight: 500; } .paste-list .bad-t { color: var(--red); font-weight: 500; line-height: 1.35; }
.paste-list .ic { width: 18px; height: 18px; }
.paste-list li.paste-h { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; }
.paste-list li.paste-h + li { border-top: 0; padding-top: 4px; }
.match { margin-top: 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); padding: 16px; display: grid; gap: 10px; }
.match-head { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.match-head .ic { width: 18px; height: 18px; color: var(--green); }
.match-head b { color: var(--ink); font-weight: 600; }
.match-row { display: grid; grid-template-columns: 1fr 22px 1fr; gap: 10px; align-items: center; font-size: 13.5px; }
.match-row span { height: 32px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--fog); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; overflow: hidden; }
.match-row span:last-child { background: var(--move-bg); box-shadow: none; color: var(--move-text); font-weight: 600; }
.match-row .ic { width: 16px; height: 16px; color: var(--ink-3); }
.paste-foot { margin-top: 16px; font-size: 13.5px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.paste-foot .ic { width: 16px; height: 16px; color: var(--green); }

/* ---- 7. For forwarders ---- */
.fwd-shots { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 8px; padding-bottom: 150px; }
.fwd-a { width: 74%; }
.fwd-b { position: absolute; right: 0; bottom: 0; width: 52%; }
.fwd-shots .frame { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.75); }
.cap { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--on-dark); line-height: 1.45; }
.cap .pin { position: static; transform: none; flex: none; background: var(--signal); color: var(--deep); box-shadow: none; width: 24px; height: 24px; font-size: 12px; }
.fwd-a .cap { max-width: 64%; }
.fwd-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 56px; margin-top: 72px; }
.sales { margin-top: 64px; border-radius: 24px; background: #fff; color: var(--ink); padding: 34px 40px; display: flex; align-items: center; gap: 32px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.sales .h3 { font-size: 24px; max-width: 26em; }
.sales-words p { margin-top: 8px; color: var(--ink-2); font-size: 16.5px; }
.sales .btn { margin-left: auto; flex: none; }
.sales-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; flex: none; background: var(--move-bg); color: var(--blue); }
.sales-ic .ic { width: 26px; height: 26px; }

/* ---- 8. Pricing ---- */
.price { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 56px; align-items: stretch; }
.price-main { display: flex; flex-direction: column; justify-content: center; }
.price-big { font: 600 clamp(52px, 5.8vw, 84px)/1 var(--display); letter-spacing: -.05em; }
.price-big span { color: var(--blue); display: block; }
.price-main .lead { margin-top: 24px; }
.price-main .cta { margin-top: 32px; }
.price-sales { border-radius: 26px; padding: 40px; display: flex; flex-direction: column; gap: 14px; justify-content: center;
  transition: transform 260ms var(--ease-out); }
.price-sales .h3 { font-size: 26px; }
.price-sales p { color: var(--on-dark); }
.price-sales .cta { margin-top: 10px; }
.price-sales .sales-ic { background: rgba(79,184,255,.13); color: var(--signal); margin-bottom: 8px; }
.price-ask { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); font-size: 15px; }
.price-ask:hover { color: #fff; }

/* ---- 9. Questions ---- */
.faq-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.faq-row .muted { margin-top: 18px; }
.faq-all { margin-top: 14px; }
.faq-all a { min-height: 44px; color: var(--blue-text); text-decoration: none; }
.faq-all a:hover .ic { transform: translateX(3px); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 24px 4px;
  font: 600 19px/1.3 var(--display); letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231668e3' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center no-repeat;
  box-shadow: 0 0 0 1px rgba(11,30,58,.1); transition: transform 220ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 64px 26px 4px; color: var(--ink-2); max-width: 46em; }

/* ---- 10. The close ---- */
.close { text-align: center; padding: 120px 0 128px; }
.close .h2 { font-size: clamp(40px, 5.4vw, 72px); }
.close .lead { margin: 20px auto 0; }
.close .cta { justify-content: center; margin-top: 36px; }
.mini-line { position: relative; width: min(520px, 100%); height: 44px; margin: 0 auto 44px; }
.mini-line::before { content: ""; position: absolute; left: 10px; right: 10px; top: 21px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(79,184,255,.4), var(--signal)); }
.mini-line i { position: absolute; top: 14px; width: 17px; height: 17px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(79,184,255,.18); }
.mini-line i:first-child { left: 2px; } .mini-line i:nth-child(2) { right: 2px; }
.mini-line .v-boat { top: 4px; left: auto; right: -16px; margin: 0; }
.mini-line span { position: absolute; top: 48px; font-size: 13px; color: var(--on-dark-2); }
.mini-line span.a { left: 0; } .mini-line span.b { right: 0; }

/* ---- The footer ---- */
.foot { background: #081629; color: var(--on-dark); padding: 72px 0 40px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 40px; }
.foot .logo { --logo-ink: #e7eef8; --logo-ours: var(--signal); }
.foot .tagline { margin-top: 14px; color: var(--on-dark-2); max-width: 24em; line-height: 1.5; }
.foot-h { font: 600 14px/1 var(--ui); letter-spacing: 0; color: #fff; margin-bottom: 10px; }
.foot ul { display: grid; }
.foot ul a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); text-decoration: none; }
.foot a:hover { color: #fff; }
.foot-place { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark-2); }
.foot-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); color: var(--on-dark-2); font-size: 14px; }

/* ---- The other pages: a short sea band under the bar ---- */
.page-head { padding: 88px 0 96px; }
.page-head h1 { font-size: clamp(42px, 5.2vw, 72px); letter-spacing: -.04em; line-height: 1.02; }
.page-head .lead { margin-top: 20px; }
.page-body { padding: 0 0 120px; background: var(--page-alt); display: flow-root; }
.lift-up { margin-top: -56px; }
.page-head .lead a { color: #fff; }
.page-head .cta { margin-top: 30px; }
.kicker { font: 600 15px/1.2 var(--ui); color: var(--signal); margin-bottom: 14px; }

/* The questions */
.card.faq-card { padding: 16px 40px 20px; max-width: 980px; }
.faq-card .faq details:first-child { border-top: 0; }
.blog-cta .cta { margin-left: auto; flex: none; }
.blog-cta .cta .btn { margin-left: 0; }

/* Your name on SailPing: the two ways, each with its strip of pictures */
.ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.card.way { padding: 44px 44px 40px; scroll-margin-top: 24px; }
.way-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px;
  font: 600 13.5px/1 var(--ui); background: var(--move-bg); color: var(--move-text); }
.way .h2 { margin-top: 16px; font-size: clamp(30px, 3.3vw, 44px); max-width: 22em; }
.way .lead { margin-top: 16px; }
.way .ticks { margin-top: 26px; }
.gallery { margin-top: 36px; }
.g-strip { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: thin; padding: 4px 4px 14px; border-radius: 18px; }
.g-strip:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.g-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-margin-top: 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 20px; align-items: center; }
.window { grid-column: 1 / -1; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(11,30,58,.1), 0 30px 60px -34px rgba(4,12,26,.55); }
.window-bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; background: #e8edf4; border-bottom: 1px solid var(--line); }
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #c6d0dd; flex: none; }
.window-url { margin: 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 28px; max-width: 72%; padding: 0 16px;
  border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 13.5px/1 var(--ui); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.window-url .ic { width: 12px; height: 12px; color: var(--green); flex: none; }
.mail-from { margin-left: 12px; display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.mail-from b { font-weight: 600; color: var(--ink); }
.mail-from span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.window img { width: 100%; }
.g-slide figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 16px; color: var(--ink-2); line-height: 1.45; }
.g-count { font: 600 13px/1.4 var(--ui); color: var(--ink-3); white-space: nowrap; }
.g-arrows { display: flex; gap: 10px; }
.g-arrows a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--surface);
  box-shadow: 0 0 0 1px rgba(11,30,58,.14); transition: box-shadow 160ms ease, transform 140ms var(--ease-out); }
.g-arrows a:hover { box-shadow: 0 0 0 1px rgba(11,30,58,.3); }
.g-arrows a:active { transform: scale(.94); }
.g-arrows .ic { width: 20px; height: 20px; }
.card.way-compare, .card.way-both { padding: 36px 40px; }
.way-compare .h3, .way-both .h3 { font-size: 24px; }
.table-scroll { overflow-x: auto; }
.compare { margin-top: 18px; width: 100%; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line-2); line-height: 1.45; }
.compare thead th { border-top: 0; font: 600 15px/1.2 var(--ui); color: var(--ink-3); }
.compare tbody th { font-weight: 600; color: var(--ink); width: 22%; }
.compare td { color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.way-sales { margin-top: 0; }
.way-back { margin-top: 4px; }

/* Contact sales */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
.card { border-radius: 24px; background: var(--surface); box-shadow: var(--lift-shadow); padding: 40px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.form-note { grid-column: 1 / -1; padding: 14px 18px; border-radius: 14px; background: var(--red-bg); color: var(--red); font-weight: 500; }
.field { display: grid; gap: 8px; align-content: start; }
.field.wide { grid-column: 1 / -1; }
.field label { font: 600 14.5px/1.3 var(--ui); color: var(--ink); }
.field label i { font-style: normal; font-weight: 400; color: var(--ink-3); }
.field-err { font-size: 14px; color: var(--red); font-weight: 500; }
.input { width: 100%; height: 50px; border: 0; border-radius: 14px; padding: 0 16px; font: 400 16px/1.2 var(--ui); color: var(--ink);
  background: var(--fog); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 160ms ease, background-color 160ms ease; }
.input:hover { box-shadow: inset 0 0 0 1px #c9d4e3; }
.input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px rgba(22,104,227,.14); }
.input::placeholder { color: #5f7089; }
.has-err .input { box-shadow: inset 0 0 0 2px var(--red-dot); }
select.input { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--fog) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2344587a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center no-repeat; }
select.input:focus { background-color: #fff; }
textarea.input { height: 140px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-end { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; margin-top: 6px; flex-wrap: wrap; }
.next { display: grid; gap: 22px; }
.next-card { border-radius: 24px; background: var(--surface); box-shadow: var(--card-shadow); padding: 32px; }
.next-card .h3 { font-size: 20px; margin-bottom: 20px; }
.steps { display: grid; gap: 18px; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.steps .pin { position: static; transform: none; box-shadow: none; width: 30px; height: 30px; background: var(--move-bg); color: var(--blue-strong); }
.mailto { display: flex; align-items: center; gap: 16px; border-radius: 24px; padding: 26px 30px; }
.mailto .well { width: 48px; height: 48px; flex: none; background: rgba(79,184,255,.2); color: var(--signal); }
.mailto .well .ic { width: 22px; height: 22px; }
.mailto > div > span { display: block; font-size: 14px; color: var(--on-dark); }
.mailto a { display: inline-flex; align-items: center; min-height: 44px; font: 600 18px/1.3 var(--display); color: #fff; text-decoration: none; letter-spacing: -.01em; }
.sent { text-align: center; max-width: 680px; margin: 0 auto; padding: 56px 40px; }
.sent .well { width: 72px; height: 72px; margin: 0 auto 26px; background: var(--green-bg); color: var(--green); }
.sent .well .ic { width: 34px; height: 34px; }
.sent .h2 { font-size: clamp(30px, 3.4vw, 42px); }
.sent p { margin-top: 16px; color: var(--ink-2); font-size: 18px; }
.sent .cta { justify-content: center; margin-top: 32px; }

/* The blog */
.post-list { display: grid; gap: 22px; max-width: 980px; }
.post-card { position: relative; display: grid; grid-template-columns: 210px 1fr; gap: 32px; border-radius: 24px; background: var(--surface); box-shadow: var(--card-shadow);
  padding: 36px 40px; transition: transform 240ms var(--ease-out), box-shadow 240ms ease; }
.post-card .post-meta { padding-top: 8px; }
.post-card h2 { font-size: 28px; letter-spacing: -.025em; line-height: 1.18; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.post-card p { margin-top: 12px; color: var(--ink-2); font-size: 16.5px; max-width: 40em; }
.post-card .link-arrow { margin-top: 18px; color: var(--blue-text); }
.post-list .post-card:first-child h2 { font-size: 34px; }
.post-meta { font-size: 14px; color: var(--ink-3); }
.post-empty { color: var(--ink-2); }
.blog-cta { margin-top: 56px; max-width: 980px; border-radius: 24px; padding: 34px 40px; display: flex; align-items: center; gap: 28px; }
.blog-cta .blog-cta-h { font: 600 24px/1.2 var(--display); letter-spacing: -.02em; color: #fff; }
.blog-cta p + p { color: var(--on-dark); margin-top: 4px; }
.blog-cta .btn { margin-left: auto; }

.post { max-width: 760px; margin: 0 auto; padding: 72px var(--gutter) 120px; }
.back { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1 var(--ui); text-decoration: none; color: var(--blue-text);
  min-height: 44px; padding: 0 16px 0 14px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(11,30,58,.12); background: #fff; }
.post h1 { font-size: clamp(34px, 4.4vw, 54px); letter-spacing: -.04em; line-height: 1.06; margin: 30px 0 18px; }
.post .lede { font-size: 21px; line-height: 1.55; color: var(--ink-2); margin: 24px 0 8px; }
.post h2 { font-size: 28px; letter-spacing: -.025em; margin: 52px 0 10px; }
.post h3 { font-size: 21px; margin: 34px 0 8px; }
.post p, .post li { color: #26364d; font-size: 18px; line-height: 1.7; }
.post > p { margin-top: 14px; }
.post ul, .post ol { margin: 16px 0 0 24px; display: grid; gap: 10px; }
.post ul { list-style: disc; } .post ol { list-style: decimal; }
.post b { color: var(--ink); }
.post .mono { font-size: .9em; background: var(--fog); box-shadow: inset 0 0 0 1px var(--line); border-radius: 7px; padding: 2px 7px; }
.post .table-scroll { overflow-x: auto; margin-top: 22px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.post table { border-collapse: collapse; width: 100%; font-size: 15px; }
.post th, .post td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line-2); }
.post th { background: var(--fog); font-weight: 600; }
.post .note { position: relative; margin-top: 44px; border-radius: 22px; padding: 28px 30px 28px 86px; background: var(--move-bg); }
.post .note::before { content: ""; position: absolute; left: 30px; top: 26px; width: 40px; height: 40px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231668e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center no-repeat; }
.post .note p { margin: 0; font-size: 17px; }
.post .note p + p { margin-top: 12px; }
.post .note .cta { margin-top: 20px; }
.post-meta time { white-space: nowrap; }
/* About: the facts in two columns, then the two ways in. */
.facts { margin-top: 18px; display: grid; grid-template-columns: max-content 1fr; gap: 0 28px;
  border-radius: 20px; padding: 8px 26px; background: var(--fog); box-shadow: inset 0 0 0 1px var(--line); }
.facts dt, .facts dd { padding: 13px 0; border-top: 1px solid var(--line-2); font-size: 17px; }
.facts dt:first-of-type, .facts dt:first-of-type + dd { border-top: 0; }
.facts dt { color: var(--ink-3); }
.facts dd { color: var(--ink); font-weight: 500; }
.post > .cta { margin-top: 44px; }
/* Terms and Privacy: long text, its sections a step below a post's. */
.legal h2 { font-size: 21px; letter-spacing: -.02em; margin: 36px 0 8px; }
.legal .post-meta { margin-top: 6px; }

/* Not found */
.lost { min-height: 720px; display: grid; place-items: center; text-align: center; padding: 80px 0 120px; }
.lost .lead { margin: 20px auto 0; max-width: 32em; }
.lost .cta { justify-content: center; margin-top: 36px; }
.lost h1 { font-size: clamp(40px, 5.6vw, 76px); letter-spacing: -.045em; line-height: 1.02; }
.lost-line { position: relative; width: min(520px, 100%); height: 120px; margin: 0 auto 40px; }
.lost-line::before { content: ""; position: absolute; left: 10px; right: 10px; top: 30px; height: 3px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(79,184,255,.7) 0 14px, transparent 14px 24px); }
.lost-line i { position: absolute; top: 23px; width: 17px; height: 17px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(79,184,255,.18); }
.lost-line i:first-child { left: 2px; } .lost-line i:nth-of-type(2) { right: 2px; }
.lost-line .v-boat { left: 58%; top: 70px; transform: rotate(-14deg); color: var(--red-dot); box-shadow: 0 0 0 6px rgba(242,100,100,.18), 0 8px 18px -6px rgba(0,0,0,.6); }
.lost-line .q { position: absolute; left: 58%; top: 42px; width: 2px; height: 24px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px); }

/* ---- Motion: each move ends where the page already is; none for reduced motion ---- */
@media (hover: hover) and (pointer: fine) {
  .frag:hover, .post-card:hover { transform: translateY(-4px); box-shadow: var(--lift-shadow); }
  .price-sales:hover { transform: translateY(-4px); }
  .post-card:hover .link-arrow .ic { transform: translateX(3px); }
}
@keyframes v-sail { 0% { left: 0; } 36% { left: 60%; } 64% { left: 60%; } 100% { left: 100%; } }
@keyframes v-fill { 0% { transform: scaleX(0); } 36% { transform: scaleX(.6); } 64% { transform: scaleX(.6); } 100% { transform: scaleX(1); } }
@keyframes v-reach { from { background: transparent; box-shadow: inset 0 0 0 2px rgba(79,184,255,.5), 0 0 0 5px rgba(79,184,255,0); } }
@keyframes v-sail-ph { 0% { left: 0; } 36% { left: 50%; } 64% { left: 50%; } 100% { left: 100%; } }
@keyframes v-fill-ph { 0% { transform: scaleX(0); } 36% { transform: scaleX(.5); } 64% { transform: scaleX(.5); } 100% { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes tick { 0%, 31% { transform: translateY(0); } 48%, 69% { transform: translateY(-1em); } 86%, 100% { transform: translateY(-2em); } }
@keyframes warm { from { color: #fff; } }
@keyframes settle { from { opacity: 0; transform: translateY(.35em); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(32px); } }
@keyframes drift { from { opacity: 0; transform: translateY(18px) rotate(-14deg); } }
@media (prefers-reduced-motion: no-preference) {
  .voyage .v-boat { animation: v-sail 1500ms var(--ease-in-out) 400ms backwards; }
  .voyage .v-done { animation: v-fill 1500ms var(--ease-in-out) 400ms backwards; }
  .voyage .v-stop.s2::before { animation: v-reach 180ms var(--ease-out) 950ms backwards; }
  .voyage .v-stop.s3::before { animation: v-reach 180ms var(--ease-out) 1900ms backwards; }
  .v-clock > * { animation: rise 300ms var(--ease-out) 2050ms backwards; }
  .fc-num span { animation: tick 1650ms var(--ease-out) 2400ms backwards; }
  .fc-num { animation: warm 200ms ease 3830ms backwards; }
  .v-clock .fc-mail { animation: rise 240ms var(--ease-out) 3950ms backwards; }
  .lost-line .v-boat { animation: drift 520ms var(--ease-out) 300ms backwards; }
  @supports (animation-timeline: view()) {
    .rise-in { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .settle { animation: settle linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
  }
  .faq details[open] p { animation: rise 220ms var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  html, .g-strip { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- A tablet: one column, the menu ---- */
@media (max-width: 1080px) {
  .nav, .signin { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
    border-radius: 999px; box-shadow: 0 0 0 1px rgba(255,255,255,.2); font: 600 15px/1 var(--ui); color: #fff; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary .ic { width: 18px; height: 18px; }
  .menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(320px, calc(100vw - 32px)); border-radius: 22px; background: #fff;
    box-shadow: 0 30px 60px -20px rgba(4,12,26,.6); padding: 10px; display: grid; }
  .menu-panel a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 14px; color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 500; }
  .menu-panel a:hover, .menu-panel a[aria-current] { background: var(--fog); }
  .menu-group { padding: 12px 14px 4px; font: 600 13px/1.2 var(--ui); color: var(--ink-3); }
  .menu-panel a.menu-sub { padding-left: 28px; }
  .points4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split.flip, .price, .faq-row, .contact { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .split.flip > :first-child { order: 0; }
}

/* ---- A phone ---- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .sec { padding: 80px 0; }
  .top .wrap { height: 64px; gap: 10px; }
  .top .btn-sm { padding: 0 14px; font-size: 14.5px; }
  .hero { padding-top: 56px; }
  .hero h1 { font-size: clamp(32px, 9.4vw, 44px); max-width: none; }
  .hero .cta .btn { flex: 1 1 auto; }
  .voyage { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .v-main { padding: 20px 20px 22px; }
  .v-line { margin: 22px 6px 0; height: 104px; }
  .v-stop { width: 104px; font-size: 12.5px; }
  .v-stop b { font-size: 15px; }
  .v-stop.s2 { left: 50%; transform: translateX(-52px); align-items: center; text-align: center; }
  .v-clock { border-left: 0; border-top: 1px solid rgba(255,255,255,.09); padding: 20px; display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: center; }
  .v-clock .fc-label { grid-column: 1 / -1; }
  .fc-num { font-size: 60px; }
  .v-clock .fc-mail { grid-column: 1 / -1; margin-top: 8px; }
  .voyage .v-boat { animation-name: v-sail-ph; }
  .voyage .v-done { animation-name: v-fill-ph; }
  .hero-shot { margin-top: 48px; }
  .shot-laptop { display: none; }
  .shot-phone { display: block; width: 300px; margin: 0 auto; border-radius: 34px 34px 0 0; box-shadow: 0 0 0 8px #13243d, 0 0 0 9px rgba(255,255,255,.12), var(--shot-shadow); }
  .straddle { background: linear-gradient(180deg, transparent 0 70%, var(--page) 70% 100%); }
  .morning { padding-top: 48px; }
  .points4 { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 36px; }
  .h2 { font-size: 34px; }
  .head { margin-bottom: 40px; }
  .m-rail { display: none; }
  .m-cols { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .m-col { align-items: flex-start; text-align: left; }
  .m-note { text-align: left; }
  .frag { max-width: none; }
  .fwd-shots { padding-bottom: 0; gap: 28px; }
  .fwd-a, .fwd-b { width: 100%; position: static; }
  .fwd-a .cap { max-width: none; }
  .fwd-points { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .sales { flex-direction: column; align-items: flex-start; padding: 28px 24px; gap: 18px; }
  .sales .btn { margin-left: 0; }
  .paste-list li { grid-template-columns: 22px 1fr; }
  .paste-list li > span:last-child:not(:empty) { grid-column: 2; }
  .paste-list li > span:empty:last-child { display: none; }
  .boxcard { padding: 20px 18px 14px; border-radius: 22px; }
  .bc-head .tag-example { margin-left: 0; }
  .bc-stops { height: 64px; font-size: 12px; }
  .bc-stops li { width: 33%; }
  .bc-stops b { font-size: 13.5px; }
  .bc-facts { grid-template-columns: minmax(0, 1fr); }
  .bc-events li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .price-big { font-size: 54px; }
  .card.way, .card.way-compare, .card.way-both { padding: 28px 20px; }
  .card.faq-card { padding: 6px 20px 10px; }
  .g-strip { gap: 16px; }
  .window-bar { height: 36px; padding: 0 10px; gap: 5px; }
  .window-bar i { width: 8px; height: 8px; }
  .window-url { max-width: 80%; height: 24px; padding: 0 10px; font-size: 12px; }
  .mail-from { margin-left: 8px; font-size: 12px; }
  .mail-from span { display: none; }
  .g-slide { grid-template-columns: minmax(0, 1fr); }
  .g-arrows { justify-content: flex-end; }
  /* The two side by side, stacked: a row is its name, then each way under
     its own name -- no sideways scroll a reader cannot see. */
  .compare { font-size: 15px; }
  .compare thead { display: none; }
  .compare tr { display: block; padding: 14px 0 10px; border-top: 1px solid var(--line-2); }
  .compare tbody th, .compare td { display: block; width: auto; padding: 4px 0; border-top: 0; }
  .compare td::before { content: attr(data-label); display: block; font: 600 13px/1.3 var(--ui); color: var(--ink-3); margin-top: 6px; }
  .blog-cta .cta { margin-left: 0; }
  .price-sales { padding: 30px 26px; }
  .faq summary { font-size: 17px; padding: 20px 2px; }
  .faq details p { padding: 0 8px 22px 2px; }
  .close { padding: 88px 0 96px; }
  .close .h2 { font-size: 42px; }
  .close .cta .btn { flex: 1 1 auto; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .page-head { padding: 56px 0 84px; }
  .page-head h1 { font-size: 44px; }
  .card { padding: 26px 20px; border-radius: 22px; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .form-end .btn { flex: 1 1 auto; }
  .post-card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 24px; }
  .post-list .post-card:first-child h2, .post-card h2 { font-size: 24px; }
  .post-card .post-meta { padding-top: 0; }
  .blog-cta { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
  .blog-cta .btn { margin-left: 0; }
  .post { padding: 44px 20px 80px; }
  .post h1 { font-size: 36px; }
  .post p, .post li { font-size: 17px; }
  .post .note { padding: 76px 22px 24px; }
  .facts { grid-template-columns: minmax(0, 1fr); padding: 6px 20px; }
  .facts dd { padding-top: 0; border-top: 0; }
  .legal h2 { font-size: 19px; }
  .post .note::before { left: 22px; top: 22px; }
  .lost { min-height: 600px; }
  .lost h1 { font-size: 42px; }
  .lost .cta .btn { flex: 1 1 auto; }
}
@media (max-width: 400px) {
  .top .btn-sm { padding: 0 12px; }
  .menu summary { padding: 0 12px; }
  .menu summary .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}