/* ---------------------------------------------------------------------------
   Self-hosted fonts, same reasoning as the SHIPM8 site: loading these from
   fonts.googleapis.com would send every visitor's IP to a third party and
   would have to be disclosed. Everything below is served from our own domain.

   Jost: Fontsource build of the Google font, latin subset, four weights.
   Material Icons: the full font, not subset - the icon names come from
   i18n/en.json, so a subset would silently lose an icon the day somebody adds
   a feature. Subset it only behind a build step that derives the glyph list
   from the content.
   --------------------------------------------------------------------------- */
@font-face{font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/jost-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/jost-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/jost-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/jost-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'Material Icons'; font-style:normal; font-weight:400; font-display:block;
  src:url('/assets/fonts/material-icons.woff2') format('woff2');}

.material-icons{font-family:'Material Icons'; font-weight:normal; font-style:normal;
  font-size:24px; line-height:1; letter-spacing:normal; text-transform:none;
  display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-feature-settings:'liga';}

/* ══════════════════════════════════════════════════════════════════════════
   BTS Coasting — site.css
   The CO-MADE brand system (see ../docs/co-made-brand-guidelines.md), with the
   sections this site needs: hero, feature lists, the plan matrix, the form.
   Balance: navy 60 · neutral 30 · amber 10. Amber is a highlight, never a wash.

   Deliberately a sibling of ../css/site.css rather than a shared file. The two
   sites are deployed separately and neither should be able to break the other's
   layout; the tokens are what is shared, and those come from the brand.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --navy:#0C365A; --deep:#072136; --amber:#F59300; --burnt:#D68305;
  --ink:#0B1622; --slate:#5B6B7A; --mist:#EEF2F5; --paper:#FFFFFF;
  --mist-soft:#F5F8FA; --line:#e7edf1; --body:#33424f;
  --on-navy:#cfdae4; --on-navy-eyebrow:#8fa6ba; --on-hero-eyebrow:#9fc0dc;
  --footer-text:#93a6b6;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:88px;}
body{font-family:'Jost',Arial,Helvetica,sans-serif; color:var(--ink);
  background:var(--paper); line-height:1.65; -webkit-font-smoothing:antialiased;}

.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
.narrow{max-width:820px;}
section{padding:96px 0;}
.section-sm{padding:72px 0;}
.mist-sec{background:var(--mist-soft);}
.mist-solid{background:var(--mist);}

h1,h2,h3{font-weight:700; color:var(--navy); letter-spacing:-.02em; line-height:1.1;}
h2{font-size:38px; margin-bottom:20px;}
h3{font-size:22px; font-weight:600; letter-spacing:-.01em;}
p{font-size:18px; color:var(--body);}
.lead{max-width:62ch;}
/* Stacked body paragraphs need air between them; the global reset removes it. */
.stack p + p{margin-top:18px;}
a{color:inherit; text-decoration:none; transition:color .2s ease;}
a:hover{color:var(--amber);}

.eyebrow{font-size:13px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--slate); display:block;}

/* Focus ring — the brand system doesn't define one, so define it here. */
:focus-visible{outline:2px solid var(--navy); outline-offset:3px; border-radius:4px;}
.navy-sec :focus-visible,.hero :focus-visible,.page-hero :focus-visible,
footer :focus-visible{outline-color:var(--amber);}

.skip-link{position:absolute; left:-9999px; top:0; z-index:100; background:var(--navy);
  color:#fff; padding:12px 20px; border-radius:0 0 8px 0; font-weight:600;}
.skip-link:focus{left:0; color:#fff;}

/* amber accent bars */
.amber-bar{width:54px; height:6px; background:var(--amber); border-radius:999px; margin-bottom:26px;}
.amber-bar.sm{width:40px;}
.amber-bar.xs{width:34px; height:5px; margin-bottom:20px;}

/* ── brand lockup ────────────────────────────────────────────────────────────
   The BTS Coasting logo is the old site's own artwork, used as-is and keeping
   its own blue — it is not redrawn and not pulled into the CO-MADE palette.
   The CO-MADE system shows up around it: navy grounds, amber highlights, Jost.

   Two files, one artwork: the full lockup, and the globe cropped out of it for
   rows too narrow for the wordmark. On dark grounds .brandmark-rev knocks the
   mark out white — the logo is one flat blue over transparency, so this keeps
   every line and every knocked-out counter exactly where it is. Same treatment
   the CO-MADE lockup gets in the footer.
   ------------------------------------------------------------------------- */
.logo{display:inline-flex; align-items:center; flex-shrink:0;}
/* Height is set here and width left to follow it, so the lockup keeps its
   767:92 ratio whatever it is scaled to. */
.brandmark{display:block; width:auto; max-width:100%;}
.nav .lockup-full{height:26px;}
.nav .lockup-mark{height:30px; display:none;}
.brandmark-rev{filter:brightness(0) invert(1);}

/* ── notice banner ───────────────────────────────────────────────────────────
   Deliberately navy, not amber. The brand keeps amber to roughly a tenth of the
   palette as a highlight, and a full-bleed amber strip across every page is a
   wash — it would also read as a warning about our own site rather than a
   notice about invoicing. Navy ground, amber icon and amber link: prominent
   without shouting.

   Not sticky. It sits above the nav and scrolls away; the nav keeps the top of
   the viewport. Someone who arrives from an invoice sees it immediately, and
   someone reading the site is not followed down the page by it.
   ------------------------------------------------------------------------- */
.notice{background:var(--deep); color:#fff; font-size:15px; line-height:1.55;}
.notice .wrap{display:flex; align-items:flex-start; gap:14px;
  padding-top:14px; padding-bottom:14px;}
.notice .ic{color:var(--amber); flex-shrink:0;}
.notice .ic .material-icons{font-size:22px; display:block;}
.notice p{color:#fff; font-size:15px; margin:0;}
.notice strong{font-weight:600; color:#fff;}
/* The phone number is the point of the banner, so it stays white and bold
   rather than becoming a third link colour competing with "What changed". */
.notice a.tel{color:#fff; font-weight:600; white-space:nowrap;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.45);}
.notice a.tel:hover{text-decoration-color:#fff; color:#fff;}
.notice a.more{color:var(--amber); font-weight:600; white-space:nowrap;}
.notice a.more:hover{color:#fff;}
.notice a.more .arw{display:inline-block; transition:transform .2s ease;}
.notice a.more:hover .arw{transform:translateX(3px);}
.notice .close{margin-left:auto; background:none; border:0; cursor:pointer;
  color:var(--on-navy-eyebrow); padding:0 0 0 6px; flex-shrink:0;
  font-family:inherit; line-height:1;}
.notice .close:hover{color:#fff;}
.notice .close .material-icons{font-size:20px; display:block;}
.notice :focus-visible{outline-color:var(--amber);}

@media(max-width:620px){
  .notice .wrap{gap:10px; padding-top:12px; padding-bottom:12px;}
  .notice p{font-size:14px;}
  /* The icon earns its space on one line of text, not on five. */
  .notice .ic{display:none;}
}

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; gap:26px; min-height:76px;
  flex-wrap:wrap; padding-top:10px; padding-bottom:10px;}
/* On desktop the panel is transparent to layout: its children are the flex
   items. Below the breakpoint it becomes the real navy dropdown panel. */
.nav-panel{display:contents;}
.nav .links{display:flex; gap:24px; margin-left:auto; font-size:15px;
  font-weight:500; color:var(--navy); flex-wrap:wrap;}
.nav .links a{opacity:.82;}
.nav .links a:hover,.nav .links a.on{opacity:1; color:var(--amber);}
.nav .login{font-size:15px; font-weight:500; color:var(--navy);}
.nav-toggle{display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  padding:8px; color:var(--navy);}
.nav-toggle span{display:block; width:22px; height:2px; background:currentColor;
  border-radius:2px; margin:4px 0;}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px;
  padding:13px 24px; border-radius:999px; cursor:pointer; transition:.2s ease;
  border:1.6px solid transparent; font-family:inherit;}
.btn-amber{background:var(--amber); color:var(--deep);}
.btn-amber:hover{background:var(--burnt); color:var(--deep);}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--deep); color:#fff;}
.btn-navy-o{border-color:var(--navy); color:var(--navy);}
.btn-navy-o:hover{background:var(--navy); color:#fff;}
.btn-white-o{border-color:rgba(255,255,255,.5); color:#fff;}
.btn-white-o:hover{background:rgba(255,255,255,.1); color:#fff;}
.btn .arw{display:inline-block; transition:transform .2s ease;}
.btn:hover .arw{transform:translateX(3px);}

.arrow-link{display:inline-flex; align-items:center; gap:7px; font-weight:600;
  color:var(--navy); font-size:15px;}
.arrow-link .arw{display:inline-block; transition:transform .2s ease;}
.arrow-link:hover{color:var(--amber);}
.arrow-link:hover .arw{transform:translateX(4px);}

/* ── hero ────────────────────────────────────────────────────────────────────
   The hero art is the product: a screenshot of the AIS map with the cargo and
   vessel clusters on it. The navy gradient runs left-to-right so the copy sits
   on the dense end and the map stays legible on the right.
   ------------------------------------------------------------------------- */
.hero{position:relative; overflow:hidden; color:#fff;
  background-image:linear-gradient(95deg, rgba(6,29,49,.95), rgba(7,33,54,.80) 46%, rgba(7,33,54,.50)),
    url("/assets/hero-ais-map.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:48px;
  padding-top:104px; padding-bottom:112px;}
.hero .eyebrow{color:var(--on-hero-eyebrow);}
.hero h1{font-size:clamp(40px,5.2vw,72px); color:#fff; margin:18px 0 10px; line-height:1.06;}
.hero .tagline{font-size:clamp(20px,2.2vw,27px); font-weight:500; color:var(--amber);
  letter-spacing:-.01em; line-height:1.2;}
.hero p{font-size:20px; color:#dbe7f0; max-width:42ch; margin-top:22px;}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}

/* Hero video panel. A poster frame with a play control; the iframe is only
   inserted on click, so no third-party player is loaded — and no third-party
   cookie set — for a visitor who never presses play. */
.videopanel{position:relative; border-radius:22px; overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(3,16,28,.8); background:var(--deep);
  border:1px solid rgba(255,255,255,.14);}
.videopanel img{width:100%; height:auto; display:block;}
.videopanel iframe{width:100%; aspect-ratio:16/9; display:block; border:0;}
.videopanel .play{position:absolute; inset:0; width:100%; height:100%; border:0;
  background:rgba(7,33,54,.28); cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:background .2s ease; font-family:inherit;}
.videopanel .play:hover{background:rgba(7,33,54,.1);}
.videopanel .play .disc{width:74px; height:74px; border-radius:50%;
  background:var(--amber); color:var(--deep); display:flex; align-items:center;
  justify-content:center; transition:transform .2s ease;
  box-shadow:0 14px 30px -10px rgba(3,16,28,.7);}
.videopanel .play:hover .disc{transform:scale(1.06);}
.videopanel .play .material-icons{font-size:40px; margin-left:4px;}
.videopanel .cap{position:absolute; left:0; right:0; bottom:0; padding:16px 20px;
  font-size:14px; color:#dbe7f0; background:linear-gradient(transparent,rgba(3,16,28,.85));
  pointer-events:none;}

/* ── page hero (inner pages) ─────────────────────────────────────────────── */
.page-hero{background:var(--navy); color:#fff; position:relative; overflow:hidden;
  padding:60px 0 70px;}
.page-hero h1{color:#fff; font-size:52px; max-width:22ch; line-height:1.08;}
.page-hero p{color:var(--on-navy); font-size:20px; max-width:58ch; margin-top:18px;}
.page-hero .eyebrow{color:var(--on-navy-eyebrow); margin-bottom:16px;}
.breadcrumb{font-size:14px; color:var(--on-hero-eyebrow); margin-bottom:20px;}
.breadcrumb a{opacity:.85;}
.breadcrumb a:hover{opacity:1; color:#fff;}
.breadcrumb .sep{margin:0 8px; opacity:.5;}

/* decorative blob — must sit behind content, not tint cards drawn over it */
.blob{position:absolute; right:-120px; top:-90px; width:420px; height:420px;
  border-radius:46% 54% 50% 50%/54% 46% 54% 46%; background:rgba(245,147,0,.14);
  pointer-events:none; z-index:0;}
/* content sits above the blob, so cards are never tinted by it */
.navy-sec > .wrap,.page-hero > .wrap{position:relative; z-index:1;}

/* ── navy section ────────────────────────────────────────────────────────── */
.navy-sec{background:var(--navy); color:#fff; position:relative; overflow:hidden;}
.navy-sec h2{color:#fff;}
.navy-sec h3{color:#fff;}
.navy-sec p{color:var(--on-navy);}
.navy-sec .eyebrow{color:var(--on-navy-eyebrow);}
.navy-sec .grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.pull{font-size:32px; font-weight:600; color:#fff; letter-spacing:-.01em; line-height:1.28;}
.pull b{color:var(--amber); font-weight:600;}

/* translucent chips on navy */
.chips{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;}
.chip{font-size:15px; font-weight:500; color:var(--navy); background:var(--mist);
  padding:11px 20px; border-radius:999px;}
.navy-sec .chip{color:#fff; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);}

/* ── feature cards with tick lists ───────────────────────────────────────────
   The four Application Features blocks from the old homepage. Each is a title
   plus a short list of what it does, so the card carries a list rather than a
   paragraph — the source copy is bullets, and flattening it into prose would
   invent sentences that were never written.
   ------------------------------------------------------------------------- */
.featgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:24px; margin-top:44px;}
/* Four cards in an auto-fit grid land 3 + 1, which strands the fourth at a
   third of the width. With tick lists this long two columns read better than
   four anyway, so the home page's set is pinned to a 2×2. */
@media(min-width:861px){ .featgrid.two{grid-template-columns:1fr 1fr;} }
.featcard{background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:32px 30px; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.featcard:hover{transform:translateY(-4px); box-shadow:0 26px 54px -34px rgba(12,54,90,.4);
  border-color:#d8e2e9;}
.featcard .ic{width:50px; height:50px; border-radius:14px; background:var(--mist);
  display:flex; align-items:center; justify-content:center; color:var(--navy);
  margin-bottom:20px; flex-shrink:0;}
.featcard .ic .material-icons{font-size:26px;}
.featcard h3{font-size:20px; margin-bottom:14px;}
.featcard ul{list-style:none;}
.featcard li{position:relative; padding-left:26px; margin:10px 0; font-size:16px;
  color:var(--body); line-height:1.5;}
.featcard li:before{content:'✓'; position:absolute; left:0; top:0; color:var(--amber);
  font-weight:700; font-size:16px;}

/* Same card on navy, for the products page's capability wall. */
.navy-sec .featcard{background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.13);}
.navy-sec .featcard:hover{border-color:rgba(255,255,255,.28);
  box-shadow:0 26px 54px -34px rgba(3,16,28,.8);}
.navy-sec .featcard .ic{background:rgba(245,147,0,.16); color:var(--amber);}
.navy-sec .featcard p,.navy-sec .featcard li{color:var(--on-navy);}

.featcard p{font-size:16px; color:var(--body);}
.featcard .foot{margin-top:auto; padding-top:18px;}
/* Footnote marker inside a feature name, e.g. "Inbox integration **". */
.fn{color:var(--burnt); font-weight:600;}
.navy-sec .fn{color:var(--amber);}

/* ── plan matrix ─────────────────────────────────────────────────────────────
   A real <table>, unlike the div grid on the old site: the content is a feature
   × plan matrix and screen readers should be able to say which plan a tick
   belongs to. Scrolls inside its own container on narrow screens rather than
   pushing the page sideways.
   ------------------------------------------------------------------------- */
.matrix-scroll{margin-top:44px; overflow-x:auto; border:1px solid var(--line);
  border-radius:22px; background:#fff;}
table.matrix{border-collapse:collapse; width:100%; min-width:620px;}
table.matrix caption{text-align:left; padding:24px 28px 0; font-size:16px;
  color:var(--slate);}
table.matrix th,table.matrix td{padding:16px 20px; text-align:center;
  border-bottom:1px solid var(--line); font-size:16px;}
table.matrix thead th{background:var(--mist-soft); color:var(--navy);
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid var(--line); vertical-align:bottom;}
table.matrix thead th:first-child{text-align:left;}
table.matrix tbody th{text-align:left; font-weight:500; color:var(--navy);
  font-size:16px; white-space:nowrap;}
table.matrix tbody tr:last-child th,table.matrix tbody tr:last-child td{border-bottom:0;}
table.matrix tbody tr:hover td,table.matrix tbody tr:hover th{background:var(--mist-soft);}
table.matrix td{color:var(--body);}
/* Tick and cross. Each glyph carries its own accessible name via role="img" +
   aria-label, so "✓" is never read as punctuation or skipped. Deliberately not
   a visually-hidden sibling span: absolutely positioned with no positioned
   ancestor inside the table, it escapes the scroll container and widens the
   whole document — 198px of sideways scroll on a 375px screen. */
.yes{color:var(--amber); font-size:20px; font-weight:700; line-height:1;}
.no{color:#b8c4cd; font-size:20px; font-weight:700; line-height:1;}

.plan-actions{display:grid; gap:16px; margin-top:24px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));}
.plan-actions .plan{background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:22px 24px; display:flex; flex-direction:column; gap:12px; align-items:flex-start;}
.plan-actions .plan .label{font-size:17px; font-weight:600; color:var(--navy);}
.plan-actions .plan p{font-size:15px; color:var(--slate);}
.plan-actions .plan .btn{margin-top:auto;}

.footnotes{margin-top:28px; display:grid; gap:8px;}
.footnotes p{font-size:15px; color:var(--slate); max-width:74ch;}

/* ── contact / more information ──────────────────────────────────────────── */
.demo-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:56px; align-items:start;}
.deskcols{display:grid; gap:32px; margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));}
.desk h4{font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-navy-eyebrow); margin-bottom:12px;}
.lines a.line{display:flex; align-items:center; gap:14px; font-size:18px; color:#fff;
  font-weight:500; margin:14px 0;}
.lines a.line:hover{color:#fff;}
.lines a.line:hover .ic{background:rgba(245,147,0,.28);}
.lines .ic{width:42px; height:42px; border-radius:50%; background:rgba(245,147,0,.16);
  display:flex; align-items:center; justify-content:center; color:var(--amber);
  flex-shrink:0; transition:background .2s ease;}
.lines .ic .material-icons{font-size:21px;}

/* The sign-up page is one navy block: title and phone numbers on the left, the
   form beside them. It is both the page hero and the page's only section, so it
   carries the h1 rather than reusing .page-hero, which would stack a second
   navy band on top of this one. */
.signup-hero{padding:40px 0 96px;}
.signup-hero h1{color:#fff; font-size:clamp(34px,4.4vw,50px); line-height:1.08;
  margin-bottom:16px;}
.signup-hero .eyebrow{color:var(--on-navy-eyebrow); margin-bottom:14px;}
.signup-hero .lead{color:var(--on-navy); font-size:19px; max-width:46ch;}
.signup-hero .deskcols{margin-top:34px;}

.form{background:#fff; border-radius:22px; padding:32px 34px;}
.form h3{margin-bottom:6px; color:var(--navy);}
.form .sub{font-size:15px; color:var(--slate); margin-bottom:8px;}
.form label{display:block; font-size:14px; font-weight:500; color:var(--navy); margin:16px 0 6px;}
.form input,.form textarea,.form select{width:100%; border:1.5px solid var(--line);
  border-radius:12px; padding:12px 14px; font-family:inherit; font-size:16px;
  color:var(--ink); background:#fff;}
.form input:focus,.form textarea:focus,.form select:focus{outline:none; border-color:var(--amber);}
/* Confirmation shown in place of the form once the lead endpoint accepts it. */
.form-note{margin:0; padding:22px 0; font-size:17px; line-height:1.5; color:var(--body);}

/* Honeypot. Off-screen rather than display:none, which some bots skip. Never
   shown to a person, never focusable, and empty when a human submits. */
.form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.form .check{display:flex; align-items:flex-start; gap:10px; margin-top:18px;
  font-size:15px; color:var(--body);}
.form .check input{width:auto; margin-top:5px; flex-shrink:0;}
.form .req{color:var(--burnt);}
.form .actions{margin-top:22px;}
.form .privacy-note{margin-top:16px; font-size:14px; color:var(--slate);}

/* ── plain prose pages (404, legal) ──────────────────────────────────────── */
.prose{max-width:820px; margin:0 auto;}
.prose p{font-size:18px; color:var(--body); margin-bottom:22px; max-width:62ch;}
.prose h2{font-size:26px; line-height:1.2; margin:44px 0 16px;}
/* The privacy statement's "### " subsections. Tighter above than an h2 so a
   run of them reads as one list of cases rather than several sections. */
.prose h3{font-size:20px; margin:32px 0 12px;}
.prose h2 + h3{margin-top:24px;}
.prose .updated{font-size:15px; color:var(--slate); margin-bottom:32px;}
.prose code{font-size:.92em; background:var(--mist); padding:2px 6px; border-radius:5px;}
/* Markdown tables — the invoicing page's company details. Two columns, no
   header row, so the first cell of each row acts as the label. Scrolls inside
   itself on narrow screens rather than widening the page; an IBAN does not
   wrap. */
.prose .table-scroll{overflow-x:auto; margin:0 0 26px;}
.prose table{border-collapse:collapse; width:100%; font-size:17px;}
.prose th{padding:12px 16px; text-align:left; color:var(--navy);
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid var(--line);}
.prose td{padding:12px 16px; border-bottom:1px solid var(--line);
  color:var(--body); vertical-align:top;}
.prose tr td:first-child{color:var(--navy); font-weight:500; white-space:nowrap;
  width:1%; padding-left:0;}
.prose tr:last-child td{border-bottom:0;}
.prose ul{list-style:none; margin:0 0 22px;}
.prose li{padding-left:32px; position:relative; margin:14px 0; font-size:17px;
  color:var(--body); max-width:62ch;}
.prose ul>li:before{content:'·'; position:absolute; left:0; top:0; color:var(--amber);
  font-weight:700; font-size:22px; line-height:1;}
.prose a{color:var(--navy); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(245,147,0,.5);}
.prose a:hover{color:var(--amber);}
.prose strong{font-weight:600; color:var(--navy);}

/* ── footer ──────────────────────────────────────────────────────────────── */
footer{background:var(--deep); color:var(--footer-text); padding:56px 0 40px; font-size:15px;}
footer .top{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:40px 56px; align-items:start;}
footer .brandcol .brandmark{height:28px; margin-bottom:16px;}
footer .brandcol p{color:var(--footer-text); font-size:15px; max-width:34ch;}
footer .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:40px; grid-column:2 / -1;}
/* auto-fit fits three of the four columns at this width and wraps the fourth
   under the first, which leaves the top row ragged. There are always four, so
   ask for four and let them share what is left beside the brand column. */
@media(min-width:861px){
  footer .top{grid-template-columns:minmax(0,1fr) minmax(0,2.5fr);}
  footer .cols{grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px;}
}
footer h4{color:#fff; font-size:13px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:14px;}
footer a{display:block; margin:8px 0; color:var(--footer-text);}
footer a:hover{color:var(--amber);}
/* The CO-MADE lockup ships in navy; the footer needs the knocked-out-white
   colourway, which the brand guidelines allow on dark grounds. */
footer .attrib img{height:34px; width:auto; display:block; margin-bottom:12px;
  filter:brightness(0) invert(1);}
footer .attrib a{display:inline-block;}
footer .attrib a:hover img{opacity:.8;}
footer .attrib .sub{display:block; font-size:14px; margin-top:4px;}
footer .made{margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center;}
footer .made .legal-links{display:flex; gap:20px; flex-wrap:wrap;}
footer .made a{display:inline; margin:0;}
footer .addr{font-style:normal; color:var(--footer-text); font-size:15px;}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media(max-width:860px){
  section{padding:72px 0;}
  .hero .wrap{grid-template-columns:1fr; padding-top:72px; padding-bottom:80px;}
  .navy-sec .grid{grid-template-columns:1fr; gap:40px;}
  h2{font-size:30px;}
  .page-hero h1{font-size:38px;}
  .pull{font-size:26px;}
  footer .cols{grid-column:auto;}
}

@media(max-width:1010px){
  /* Hamburger opens a navy panel, matching the SHIPM8 site's mobile nav. */
  .nav-toggle{display:block; order:2; margin-left:auto;}
  .nav .btn{order:3; margin-left:0;}
  .nav-panel{display:none; order:4; width:100%;}
  .nav.open .nav-panel{display:block; background:var(--navy);
    width:calc(100% + 44px); flex-shrink:0; margin:12px -22px -10px; padding:26px 22px 32px;}
  .nav.open .links{flex-direction:column; gap:2px; margin-left:0;}
  .nav.open .links a{padding:10px 0; font-size:18px; color:#fff; opacity:1;}
  .nav.open .links a.on{color:var(--amber);}
  .nav.open .login{display:block; padding:10px 0; font-size:18px; color:#fff;
    margin-top:8px; border-top:1px solid rgba(255,255,255,.12);}
  .wrap{padding:0 22px;}
  .prose p,.prose li{max-width:none;}
}

@media(max-width:620px){
  /* Lockup + hamburger + "Request an account" will not share a 375px row, and
     letting the button wrap onto its own line costs a whole band of height
     above the hero. The brand guidelines allow the symbol alone once the brand
     is established in context, and the page title and hero both say the name,
     so the wordmark steps aside here rather than the call to action. */
  /* A 420px blob on a 375px screen stops reading as an accent and starts
     reading as a second background behind the heading. */
  .blob{width:250px; height:250px; right:-85px; top:-70px;}
  .nav .wrap{gap:12px;}
  .nav .lockup-full{display:none;}
  .nav .lockup-mark{display:block;}
  .nav .btn{padding:11px 18px; font-size:14px;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*:before,*:after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}