/* fishtix.app: one stylesheet for the five pages (docs/brand.md). Navy and ticket paper, Barlow, the
   number is the hero type, real screens are the pictures. Fonts are self-hosted (SIL OFL, fonts/OFL.txt). */
@font-face { font-family: Barlow; font-weight: 500; font-display: swap; src: url(/fonts/Barlow_500Medium.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 600; font-display: swap; src: url(/fonts/Barlow_600SemiBold.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 700; font-display: swap; src: url(/fonts/Barlow_700Bold.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 800; font-display: swap; src: url(/fonts/Barlow_800ExtraBold.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url(/fonts/BarlowSemiCondensed_700Bold.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 800; font-display: swap; src: url(/fonts/BarlowSemiCondensed_800ExtraBold.woff2) format("woff2"); }

:root {
  --navy: #0B1F33; --deep: #061220; --paper: #FCFCFA; --paper-2: #F2F3F1;
  --ink: #0B1F33; --ink-2: #44546A; --rule: #D9DEE3; --rule-paper: #CFCBC0;
  --on-navy: #C9DCF0; --on-navy-2: #8CA3BD;
  --blue: #0A5CAD; --green: #167A43; --salmon: #F0574B; --amber: #C77700; --red: #BF2A2A;
  --display: "Barlow Semi Condensed", Barlow, "Helvetica Neue", Arial, sans-serif;
  --body: Barlow, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-weight: 500; font-size: 17px; line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--salmon); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -48px; background: #fff; color: var(--ink); padding: 8px 12px; border-radius: 8px; font-weight: 800; z-index: 10; }
.skip:focus { top: 12px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1600px) { .wrap { max-width: 1200px; } }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(42px, 6.4vw, 84px); font-weight: 800; }
h2 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 800; }
h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; }
p { margin: 0; }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 54ch; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 17px; padding: 14px 22px; border-radius: 12px; border: 2px solid transparent; line-height: 1.1; cursor: pointer; font-family: var(--body); min-height: 50px; }
.btn.solid { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn.solid:hover { background: #0C6AC6; border-color: #0C6AC6; }
.btn.paper { background: #fff; color: var(--navy); border-color: #fff; }
.btn.line { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn.line:hover { border-color: #fff; }
.btn.line-ink { background: transparent; color: var(--navy); border-color: #8A99A8; }
.btn.line-ink:hover { border-color: var(--navy); }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
/* The App Store button: the one link that opens the store directly. */
.btn.store { background: #000; color: #fff; border-color: #000; padding: 8px 18px 8px 14px; gap: 10px; }
.btn.store span { display: flex; flex-direction: column; line-height: 1.05; text-align: left; font-size: 19px; font-weight: 700; }
.btn.store small { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; opacity: 0.9; }
.btn.store:hover { background: #1A1A1A; border-color: #1A1A1A; }

/* Header and footer, the same on every page */
.site-head { background: var(--navy); color: #fff; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.site-head nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-head nav a { color: var(--on-navy); text-decoration: none; font-weight: 600; }
.site-head nav a:hover, .site-head nav a[aria-current="page"] { color: #fff; }
.site-head nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.site-head .actions { display: flex; gap: 10px; }
.site-head .btn { padding: 10px 16px; min-height: 44px; font-size: 16px; }
.site-foot { background: var(--deep); color: var(--on-navy-2); padding: 36px 0 48px; font-size: 15px; }
.site-foot .wrap { display: flex; flex-direction: column; gap: 18px; }
.site-foot .line { font-family: var(--display); font-size: 22px; font-weight: 700; color: #fff; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-foot a { color: var(--on-navy); text-decoration: none; font-weight: 600; }
.site-foot a:hover { color: #fff; }
.site-foot p { margin-top: 6px; max-width: 70ch; }

/* Heroes */
.hero { background: var(--navy); color: #fff; overflow: hidden; }
.hero .wrap { padding-top: 48px; padding-bottom: 72px; }
.hero h1 { color: #fff; }
.hero .lede { color: var(--on-navy); margin-top: 22px; }
.hero .fine { margin-top: 22px; color: var(--on-navy-2); font-size: 15px; max-width: 60ch; }
.hero .fine a { color: #fff; }
.hero.split .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero.split .wrap > * { min-width: 0; }
/* The audience pages' heroes say one thing in fewer words, so the type is a size down from the home page's. */
.hero.quiet h1 { font-size: clamp(36px, 4.8vw, 64px); }
/* The home headline is two short lines ("Weighed. Signed." / "Filed. At sea."): sized so the first fits its column. */
.hero.split:not(.quiet) h1 { font-size: clamp(40px, 5.6vw, 74px); }
/* Device frames, drawn: a monitor for the office, an iPad for the tender, a phone for the captain and QC. */
.frame-mac { position: relative; background: #0C0F14; border-radius: 14px; padding: 10px 10px 12px; box-shadow: 0 30px 70px rgba(0,0,0,0.45), 0 0 0 2px #2A3340 inset; }
.frame-mac .shot, .frame-mac .phone-shot { border-radius: 6px; box-shadow: none; border: 0; }
.frame-mac::after { content: ""; display: block; margin: 12px auto 0; width: 22%; height: 10px; background: linear-gradient(180deg, #1C222B, #0C0F14); border-radius: 0 0 8px 8px; }
.frame-ipad { background: #0C0F14; border-radius: 22px; padding: 12px; box-shadow: 0 30px 70px rgba(0,0,0,0.45), 0 0 0 2px #2A3340 inset; }
.frame-ipad .shot { border-radius: 10px; box-shadow: none; border: 0; }
/* An iPhone 17 Pro in proportion: a thin bezel, screen corners that follow the frame, and the Dynamic
   Island the simulator's screenshots leave out. The bezel is in pixels because percentage padding is
   measured against the column, not the phone; radii and the island are percentages of the phone. */
.frame-phone { position: relative; background: #0C0F14; border-radius: 15% / 7%; padding: 7px; box-shadow: 0 30px 70px rgba(0,0,0,0.4), 0 0 0 1.5px #3A4452 inset; max-width: 300px; margin: 0 auto; }
.frame-phone .phone-shot, .hero .frame-phone .phone-shot { display: block; width: 100%; height: auto; border-radius: 13% / 6%; box-shadow: none; border: 0; max-width: none; margin: 0; }
.frame-phone::before { content: ""; position: absolute; z-index: 1; top: 2.4%; left: 50%; transform: translateX(-50%); width: 29.5%; aspect-ratio: 125 / 37; border-radius: 999px; background: #05070A; }
.frame-paper { max-width: 520px; }
.frame-paper .shot { border-radius: 4px; box-shadow: 0 24px 60px rgba(11,31,51,0.28); border: 1px solid var(--rule); }
.hero .shot { border-radius: 12px; box-shadow: 0 30px 70px rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.12); }
.hero .hero-shot { min-width: 0; }
/* The home hero: the office's Today page with the tender's Deck over its corner. What the tender weighs, the office sees. */
.hero .stack { position: relative; padding: 0 6% 16% 0; }
.hero .stack .desk { width: 100%; }
.hero .stack .frame-ipad.over { position: absolute; right: 0; bottom: 0; width: 56%; padding: 8px; border-radius: 16px; }
.hero .stack .frame-ipad.over .shot { border-radius: 8px; }
@media (max-width: 900px) { .hero .stack { padding: 0 0 18% 0; } .hero .stack .over { right: 0; } }
/* Two devices, one ticket: the signed ticket on the iPad, with the captain's phone, turned sideways to sign, over its top corner. */
.duo { position: relative; padding-top: 8%; }
.duo .frame-phone.over { position: absolute; right: -3%; top: 0; width: 60%; max-width: none; margin: 0; padding: 5px; border-radius: 7% / 15%; }
.duo .frame-phone.over .phone-shot { border-radius: 6% / 13%; }
.duo .frame-phone.over::before { top: 50%; left: 6px; transform: translateY(-50%); width: auto; height: 29.5%; aspect-ratio: 37 / 125; }
@media (max-width: 900px) { .duo .frame-phone.over { right: 0; } }
.hero .phone-shot { max-width: 300px; margin: 0 auto; border-radius: 28px; box-shadow: 0 30px 70px rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.12); }

/* Sections */
section { padding: 88px 0; }
@media (max-width: 700px) { section { padding: 64px 0; } }
.navy { background: var(--navy); color: #fff; }
.navy h2, .navy h3 { color: #fff; }
.navy .lede { color: var(--on-navy); }
.paper2 { background: var(--paper-2); }
.intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 56px; align-items: start; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: center; }
.two.top { align-items: start; }
.two > *, .intro > * { min-width: 0; }
.two .lede, .intro .lede { margin-top: 18px; }
.flip > :first-child { order: 2; }
@media (max-width: 860px) { .intro, .two { grid-template-columns: minmax(0, 1fr); } .flip > :first-child { order: 0; } }
.points { margin-top: 22px; display: grid; gap: 14px; max-width: 50ch; }
.points p { padding-left: 16px; border-left: 3px solid var(--rule); }
.navy .points p { border-left-color: rgba(201,220,240,0.35); }
.points p b { display: block; font-weight: 700; }
.points p span { color: var(--ink-2); }
.navy .points p span { color: var(--on-navy); }
.fig { text-align: center; color: var(--ink-2); font-size: 14px; font-weight: 600; margin-top: 14px; }
.navy .fig, .hero .fig { color: var(--on-navy-2); }
.shot { border-radius: 14px; box-shadow: 0 24px 60px rgba(11,31,51,0.22); border: 1px solid var(--rule); }
.phones { display: flex; gap: 18px; align-items: flex-start; justify-content: center; }
.phones picture { width: 44%; }
.phones img { border-radius: 24px; box-shadow: 0 24px 60px rgba(11,31,51,0.22); border: 1px solid var(--rule); }
.phones picture:last-child { margin-top: 36px; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin-top: 32px; }
.cols3 > * { min-width: 0; }
.cols3 h3 { font-size: 22px; margin-bottom: 8px; }
.cols3 p { color: var(--ink-2); }
.navy .cols3 p { color: var(--on-navy); }
@media (max-width: 860px) { .cols3 { grid-template-columns: minmax(0, 1fr); } }
.facts { margin-top: 26px; display: grid; gap: 18px; max-width: 48ch; }
.facts div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: baseline; }
.facts .n { font-family: var(--display); font-size: 44px; font-weight: 800; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.facts .n small { font-size: 18px; color: var(--ink-2); font-weight: 700; }
.facts p b { display: block; }
.facts p span { color: var(--ink-2); }
.kv { margin-top: 26px; display: grid; gap: 0; max-width: 66ch; }
.kv div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.kv div:first-child { border-top: 0; }
.kv b { font-weight: 700; }
.kv span { color: var(--ink-2); }
@media (max-width: 560px) { .kv div { grid-template-columns: 1fr; gap: 2px; } }
.notlist { margin: 30px 0 0; padding: 0; list-style: none; max-width: 50ch; display: grid; gap: 10px; }
.notlist li { padding-left: 16px; border-left: 3px solid var(--rule); color: var(--ink-2); }
.notlist li b { color: var(--ink); }

/* Doors on the home page */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.doors a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 22px 22px 20px; min-height: 160px; }
.doors a:hover { border-color: var(--navy); }
.doors a b { font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--navy); }
.doors a p { color: var(--ink-2); flex: 1; }
.doors a span { font-weight: 700; color: var(--blue); }
@media (max-width: 860px) { .doors { grid-template-columns: minmax(0, 1fr); } }

/* Video */
.video { margin-top: 40px; }
.video video { width: 100%; height: auto; display: block; border-radius: 16px; background: var(--deep); box-shadow: 0 30px 70px rgba(11,31,51,0.3); }
.video .cap { color: var(--ink-2); font-size: 15px; font-weight: 600; margin-top: 12px; }

/* The tide line: the thirty seconds alongside */
.tide { position: relative; padding-left: 28px; display: grid; gap: 26px; }
.tide::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--on-navy-2), rgba(140,163,189,0.15)); }
.tide div { position: relative; }
.tide div::before { content: ""; position: absolute; left: -28px; top: 7px; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); border: 2px solid var(--on-navy-2); }
.tide div.now::before { background: var(--salmon); border-color: var(--salmon); }
.tide time { display: block; font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--on-navy-2); font-variant-numeric: tabular-nums; }
.tide b { display: block; font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.1; margin-top: 2px; }
.tide p { color: var(--on-navy); margin-top: 4px; max-width: 46ch; }

/* The landing report as sent */
pre.xml { margin: 0; background: var(--deep); color: #DCE7F3; border-radius: 14px; padding: 20px 22px; font: 13px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-x: auto; box-shadow: 0 30px 60px rgba(11,31,51,0.25); }
pre.xml .t { color: #8CC4FF; } pre.xml .v { color: #FFD28A; } pre.xml .c { color: #7E93A8; }
.receipt { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; font-size: 15px; color: var(--ink-2); font-weight: 600; }
.receipt b { font-family: var(--display); font-size: 20px; color: var(--green); }

/* The pilot form */
form.enquiry { background: #fff; border: 1px solid var(--rule); border-radius: 18px; padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; box-shadow: 0 16px 40px rgba(11,31,51,0.08); }
form.enquiry .full { grid-column: 1 / -1; }
form.enquiry label { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
form.enquiry input, form.enquiry select, form.enquiry textarea { width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: #fff; border: 2px solid #8A99A8; border-radius: 12px; padding: 12px 14px; min-height: 48px; }
form.enquiry input:focus, form.enquiry select:focus, form.enquiry textarea:focus { outline: none; border-color: var(--blue); }
form.enquiry textarea { min-height: 110px; resize: vertical; }
/* The select draws its own chevron, inset like the text, instead of the browser's flush to the edge. */
form.enquiry select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%230B1F33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 9px; cursor: pointer; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; font-weight: 700; min-height: 1.5em; color: var(--ink-2); }
.form-status.ok { color: var(--green); } .form-status.err { color: var(--red); }
.alt { color: var(--ink-2); font-size: 15px; }
@media (max-width: 600px) { form.enquiry { grid-template-columns: minmax(0, 1fr); } }

/* Small screens: the logo, Get the app and a menu button share the header row; the menu opens the
   page links (and Cannery office) as a full-width list under it. Without JavaScript the button stays
   hidden and the links are in the footer. */
.menu-btn, .site-head nav .nav-extra { display: none; }
.menu-btn { align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 2px solid rgba(201,220,240,0.45); background: transparent; color: #fff; cursor: pointer; padding: 0; }
.menu-btn:hover { border-color: #fff; }
.menu-btn .i-close, .site-head.open .menu-btn .i-open { display: none; }
.site-head.open .menu-btn .i-close { display: block; }
@media (max-width: 900px) {
  .site-head nav { display: none; }
  .site-head .actions { align-items: center; }
  .site-head .actions .btn.line { display: none; }
  .site-head.js .menu-btn { display: inline-flex; }
  .site-head.open nav { display: flex; order: 3; flex-basis: 100%; flex-direction: column; gap: 0; padding-top: 4px; }
  .site-head.open nav a { display: block; padding: 14px 0; border-top: 1px solid rgba(201,220,240,0.18); font-size: 20px; color: #fff; }
  .site-head.open nav a[aria-current="page"] { color: #fff; }
  .hero.split .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .site-head .wrap { gap: 10px; flex-wrap: wrap; }
  .site-head img { height: 26px !important; }
  .site-head .btn { padding: 10px 12px; font-size: 15px; }
  .site-head .actions { gap: 8px; }
  .hero .wrap { padding-top: 36px; padding-bottom: 48px; }
  .phones { gap: 12px; }
}

/* Home: the problem in five lines, then the delivery in five steps (replaced the video, Dan 2026-10-23). */
.pains { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 1000px) { .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pains li:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pains { grid-template-columns: minmax(0, 1fr); } }
.pains li { border-top: 4px solid var(--amber); padding-top: 16px; display: grid; gap: 6px; }
.pains b { font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--ink); }
.pains span { color: var(--ink-2); }
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 88px; }
.steps .n { display: block; font-family: var(--display); font-size: 64px; font-weight: 800; line-height: 1; color: var(--blue); margin-bottom: 10px; }
.steps h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; }
.steps p { margin-top: 14px; color: var(--ink-2); font-size: 19px; max-width: 46ch; }
.steps .frame-mac, .steps .frame-ipad { max-width: 600px; margin: 0 auto; }
/* A portrait phone over the iPad's lower corner. */
.duo.portrait { padding: 0 6% 10% 0; }
.duo.portrait .frame-phone.over { position: absolute; right: 0; bottom: 0; top: auto; width: 30%; max-width: none; margin: 0; padding: 5px; border-radius: 15% / 7%; }
.duo.portrait .frame-phone.over .phone-shot { border-radius: 13% / 6%; }
.duo.portrait .frame-phone.over::before { top: 2.4%; left: 50%; transform: translateX(-50%); width: 29.5%; height: auto; aspect-ratio: 125 / 37; }
@media (max-width: 860px) { .steps { gap: 64px; } }

/* Home: who it's for. Three plain columns under a blue rule, each a link to its page (replaced the "Pick your door" cards). */
.roles { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.roles a { display: grid; gap: 10px; border-top: 4px solid var(--blue); padding-top: 18px; text-decoration: none; color: inherit; }
.roles b { font-family: var(--display); font-size: clamp(30px, 3.2vw, 42px); font-weight: 800; line-height: 1; color: var(--ink); }
.roles span { color: var(--ink-2); font-size: 19px; }
.roles em { font-style: normal; font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.roles a:hover b { color: var(--blue); }
@media (max-width: 860px) { .roles { grid-template-columns: minmax(0, 1fr); gap: 32px; } }