/* SailCoCo website: shared styles (site-1.css). Version the file name (site-2.css ...) whenever this changes after the site is live: assets are cached for a day.
   Values are the design package's own (README section 5, COMPONENTS sections 1, 2 and 6); the header and footer are written once in tools/site_chrome.py. */

:root {
  --abyss: oklch(0.15 0.035 220);
  --abyss-raised: oklch(0.17 0.035 220);
  --abyss-hover: oklch(0.21 0.035 220);
  --abyss-deep: oklch(0.12 0.03 220);
  --rule-dark: oklch(0.28 0.03 220);
  --rule-dark-2: oklch(0.24 0.03 220);
  --ink-dark: oklch(0.97 0.005 220);
  --ink-dark-nav: oklch(0.90 0.01 220);
  --muted-dark: oklch(0.86 0.015 220);
  --sky: oklch(0.78 0.13 200);
  --sky-hover: oklch(0.86 0.10 200);
  --gold: oklch(0.80 0.13 85);
  --gold-hover: oklch(0.86 0.11 85);
  --paper-legal: #FBFAF7;
  --navy: #0B2340;
  --slate: #2A3A4F;
  --slate-body: #24344A;
  --slate-small: #4A5A6C;
  --line-light: #E2E6EB;
  --link-light: #0B4F8A;
  --brass: #A27A2C;
  --sans: Archivo, 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--abyss); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--sky); text-decoration: none; }
a:hover { color: var(--sky-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* the page: header, the page's own region, footer. overflow-x: clip (not hidden) so the sticky header still sticks to the window. */
.page { width: 100%; overflow-x: hidden; overflow-x: clip; background: var(--abyss); color: var(--ink-dark); }
.page.fill { min-height: 100vh; display: flex; flex-direction: column; }
.theme-paper { background: var(--paper-legal); }
.theme-paper .page { background: var(--paper-legal); color: var(--navy); }

/* ---------------------------------------------------------------- header (COMPONENTS 1) */
.sh { position: sticky; top: 0; z-index: 60; container-type: inline-size; background: oklch(0.15 0.035 220 / 0.96); border-bottom: 1px solid var(--rule-dark); font-family: var(--sans); color: var(--ink-dark); }
.sh-bar { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; gap: 20px; }
.sh-logo, .sh-logo:hover { display: flex; align-items: center; gap: 10px; color: var(--ink-dark); flex: none; }
.sh-mark { position: relative; display: block; width: 24px; height: 28px; }
.sh-mark svg { display: block; }
.sh-word { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.sh-tm { font-size: 10px; font-weight: 600; vertical-align: 9px; margin-left: 1px; letter-spacing: 0; }

.sh-nav { display: none; align-items: center; gap: 2px; flex: 1; }
.sh-link { font-size: 15px; font-weight: 500; color: var(--ink-dark-nav); padding: 10px 14px; border-radius: 6px; min-height: 44px; display: flex; align-items: center; white-space: nowrap; }
.sh-link:hover { background: var(--abyss-hover); color: var(--ink-dark); }
.sh-free { font-weight: 600; color: var(--ink-dark); }
.sh-link[aria-current="page"] { color: var(--ink-dark); box-shadow: inset 0 -2px 0 var(--gold); }
.sh-more { display: block; }
.sh-sum { list-style: none; cursor: pointer; gap: 6px; }
.sh-sum::-webkit-details-marker { display: none; }
.sh-sum:hover { color: var(--ink-dark-nav); }

.sh-right { display: none; flex: none; align-items: center; gap: 6px; }
/* the free-card label until sign-ups are decided (owner decision 11 Oct 2026): the size and place of the button it replaces, muted like the "In development" tag, and not a link: no hover, no pointer */
.sh-soon { font-size: 15px; font-weight: 500; color: oklch(0.80 0.02 220); border: 1px solid oklch(0.40 0.03 220); padding: 0 18px; border-radius: 6px; min-height: 44px; display: flex; align-items: center; white-space: nowrap; cursor: default; }

/* the mega menu (wide layout): a details element, so it also opens by click with no script; site-1.js adds hover, Esc and outside click */
.sh-mega { position: absolute; left: 0; right: 0; top: 68px; background: var(--abyss-raised); border-bottom: 1px solid var(--rule-dark); box-shadow: 0 24px 48px oklch(0.08 0.03 220 / 0.6); }
.sh-mega-in { max-width: 1240px; margin: 0 auto; padding: 28px 24px 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.sh-col { display: flex; flex-direction: column; gap: 4px; }
.sh-ct { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.78 0.02 220); padding: 0 10px 8px; }
.sh-item { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 6px; color: var(--ink-dark); }
a.sh-item:hover { background: var(--abyss-hover); color: var(--ink-dark); }
.sh-il { font-size: 15px; font-weight: 600; }
.sh-is { font-size: 13.5px; color: oklch(0.80 0.02 220); line-height: 1.4; }
.sh-ild { display: flex; align-items: center; gap: 8px; color: oklch(0.84 0.015 220); }
.sh-isd { color: oklch(0.78 0.02 220); }
.sh-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid oklch(0.40 0.03 220); border-radius: 3px; padding: 2px 6px; }
.sh-ild .sh-tag { font-weight: 500; color: oklch(0.82 0.02 220); }

/* the phone sheet (narrow layout) */
.sh-menu { margin-left: auto; display: block; }
.sh-menu-btn { list-style: none; cursor: pointer; border: 1px solid oklch(0.32 0.03 220); border-radius: 6px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink-dark); }
.sh-menu-btn::-webkit-details-marker { display: none; }
.sh-sheet { position: absolute; left: 0; right: 0; top: 68px; max-height: calc(100vh - 68px); overflow-y: auto; border-top: 1px solid var(--rule-dark); background: var(--abyss-raised); padding: 12px 24px 24px; display: flex; flex-direction: column; gap: 2px; }
.sh-row { min-height: 48px; display: flex; align-items: center; font-size: 17px; font-weight: 500; color: var(--ink-dark); border-bottom: 1px solid var(--rule-dark-2); }
a.sh-row:hover { color: var(--ink-dark); }
.sh-rowd { justify-content: space-between; gap: 12px; font-weight: 400; color: oklch(0.84 0.015 220); }
.sh-sheet-soon { margin-top: 16px; min-height: 48px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; color: oklch(0.80 0.02 220); border: 1px solid oklch(0.40 0.03 220); border-radius: 6px; cursor: default; }

/* the header switches layout on its own width (README 5.5): the full nav from 1180 px, the menu button below */
@container (min-width: 1180px) {
  .sh-nav, .sh-right { display: flex; }
  .sh-menu { display: none; }
}

/* ---------------------------------------------------------------- footer (COMPONENTS 2) */
/* the SITE footer is the page's last child; a card on a page has a <footer> of its own, which these rules must not touch */
.page > footer { background: var(--abyss-deep); border-top: 1px solid var(--rule-dark); color: var(--muted-dark); font-family: var(--sans); }
.sf-in { max-width: 1240px; margin: 0 auto; padding: 48px 24px 40px; display: flex; flex-direction: column; gap: 28px; }
.sf-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; }
.sf-brand { display: flex; align-items: center; gap: 10px; }
.sf-brand svg { display: block; }
.sf-name { display: flex; flex-direction: column; gap: 2px; }
.sf-n1 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-dark); }
.sf-n2 { font-size: 13px; color: oklch(0.82 0.02 220); }
.sf-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 14.5px; }
.sf-nav a { min-height: 44px; display: flex; align-items: center; }
.sf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px 40px; border-top: 1px solid var(--rule-dark-2); padding-top: 24px; font-size: 14px; line-height: 1.55; }
.sf-col { display: flex; flex-direction: column; gap: 6px; }
.sf-dim { color: oklch(0.80 0.02 220); }
.page > footer a { color: var(--sky); }
.page > footer a:hover { color: var(--sky-hover); }

/* the free-card label in a page body (owner decision 11 Oct 2026): a muted label, not a button; the size and place come from the element's own inline style, the colours from here. .soon is for the dark grounds, .soon-ink for the light ones. */
.soon, .soon-ink { display: inline-flex; align-items: center; justify-content: center; font-weight: 500; cursor: default; }
.soon { color: oklch(0.80 0.02 220); border: 1px solid oklch(0.40 0.03 220); }
.soon-ink { color: #4A5A6C; border: 1px solid #C3CEDB; background: #EEF2F6; }

/* ---------------------------------------------------------------- shared buttons (the home page's gold call to action: the design's hover) */
.btn-gold:hover { background: var(--gold-hover) !important; color: var(--abyss) !important; }
.btn-gold-ink:hover { background: var(--gold-hover) !important; color: #0B2340 !important; }
.btn-tile:hover { filter: brightness(1.06); }
.link-ink-hover:hover { color: #0B2340 !important; text-decoration: underline !important; }
/* the For developers page: the design's page measures its own width and shows the plans table from 960 px and one card per plan below; both are in the page, one is shown */
.dv-narrow { display: none; }
@media (max-width: 959.98px) { .dv-wide { display: none; } .dv-narrow { display: block; } }
/* the Pricing page's hint above the compare table, shown below 1080 px as the design's page does */
.pr-swipe { display: none; }
@media (max-width: 1079.98px) { .pr-swipe { display: block; } }

/* ---------------------------------------------------------------- the 404 page */
.nf { flex: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding: clamp(56px, 10vw, 120px) 24px; display: flex; flex-direction: column; gap: 20px; }
.nf-code { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: oklch(0.82 0.02 220); }
.nf h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; }
.nf-lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--muted-dark); max-width: 620px; }
.nf-links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; max-width: 420px; border-top: 1px solid var(--rule-dark); }
.nf-links li { border-bottom: 1px solid var(--rule-dark); }
.nf-links a { min-height: 48px; display: flex; align-items: center; font-size: 16.5px; }
.nf-ask { margin: 8px 0 0; font-size: 16px; color: var(--muted-dark); }

/* ---------------------------------------------------------------- legal documents (Terms, Privacy Policy) and the developer page's interim table: the document's own markup, styled from outside.
   The Terms and the Privacy Policy are hashed byte for byte; nothing here may need a change to their markup (legal-doc.js in the design package gives these type values). */
.wrap.legal { max-width: 1160px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) 24px 72px; }
.wrap.legal > * { max-width: 70ch; }
.wrap.legal p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.7; color: var(--slate-body); }
.wrap.legal strong { color: var(--navy); font-weight: 700; }
.wrap.legal ul { margin: 0 0 16px; padding-left: 22px; font-size: 16.5px; line-height: 1.7; color: var(--slate-body); }
.wrap.legal li { margin: 4px 0; }
.wrap.legal a { color: var(--link-light); text-decoration: underline; }
.wrap.legal a:hover { color: var(--navy); }
.wrap.legal a:focus-visible { outline-color: var(--brass); }
/* the document's first four lines are centred in the source (its title, the company, the address, the date): shown as a left-aligned heading block */
.wrap.legal > p[style] { text-align: left !important; margin: 0 0 2px; font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--slate); }
.wrap.legal > p[style]:first-child { font-family: var(--sans); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; letter-spacing: 0.01em; margin: 0 0 12px; color: var(--navy); }
.wrap.legal > p[style]:first-child strong { font-weight: 700; }
.wrap.legal > p[style]:nth-child(4) { margin-bottom: 28px; }
.wrap.legal h1 { margin: 0 0 6px; font-size: clamp(32px, 4vw, 46px); font-weight: 700; letter-spacing: -0.02em; color: var(--navy); }
.wrap.legal .meta { color: var(--slate-small); }
.wrap.legal table { border-collapse: collapse; width: 100%; margin: 6px 0 18px; font-size: 15px; line-height: 1.5; }
.wrap.legal th { text-align: left; vertical-align: top; padding: 8px 14px 8px 0; border-bottom: 1.5px solid var(--navy); color: var(--navy); font-size: 14px; }
.wrap.legal td { text-align: left; vertical-align: top; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line-light); color: var(--slate-body); }
.wrap.legal .plans-wrap { overflow-x: auto; max-width: none; }
.wrap.legal .avail { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--slate-small); border-radius: 3px; padding: 2px 6px; color: var(--slate); }
@media (max-width: 640px) {
  .wrap.legal .plans-wrap { overflow: visible; }
  .wrap.legal table.plans, .wrap.legal table.plans tbody, .wrap.legal table.plans tr, .wrap.legal table.plans td { display: block; width: 100%; }
  .wrap.legal table.plans thead { display: none; }
  .wrap.legal table.plans tr { padding: 0.7rem 0; border-bottom: 1px solid var(--line-light); }
  .wrap.legal table.plans td { border: 0; padding: 0.15rem 0; }
  .wrap.legal table.plans td[data-th]:before { content: attr(data-th) ": "; font-weight: 700; color: var(--navy); }
}

/* ---------------------------------------------------------------- the Legal information page (cards on paper) */
.li-band { border-bottom: 1px solid var(--line-light); background: #fff; }
.li-band-in { max-width: 1160px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) 24px 32px; display: flex; flex-direction: column; gap: 10px; }
.li-band h1 { margin: 0; font-size: clamp(32px, 4vw, 46px); font-weight: 700; letter-spacing: -0.02em; }
.li-band p { margin: 0; font-size: 16px; color: var(--slate); }
.li-band strong { color: var(--navy); }
.li-grid { max-width: 1160px; margin: 0 auto; padding: 32px 24px 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 20px; font-size: 16px; line-height: 1.65; color: var(--slate-body); }
.li-card { background: #fff; border: 1px solid var(--line-light); border-radius: 10px; padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.li-card.tight { gap: 10px; }
.li-card.wide { grid-column: 1 / -1; }
.li-card h2 { margin: 0; font-size: 20px; color: var(--navy); }
.li-card p { margin: 0; }
.li-card strong { color: var(--navy); }
.li-card a { color: var(--link-light); }
.li-card a:hover { color: var(--navy); }
.li-card ul { margin: 0; padding-left: 20px; }
.li-card ul.gap { display: flex; flex-direction: column; gap: 4px; }
.li-card ul ul { margin: 4px 0 0; }
.li-card p.addr { border-left: 2px solid var(--line-light); padding-left: 14px; }
.li-card table, .li-card thead, .li-card tbody { display: block; }
.li-card tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 4px 24px; padding: 10px 0; border-bottom: 1px solid #EDF0F3; }
.li-card thead tr { border-bottom: 1.5px solid var(--navy); font-size: 14px; font-weight: 700; color: var(--navy); }
.li-card tbody tr:last-child { border-bottom: 0; }
.li-card th, .li-card td { display: block; text-align: left; padding: 0; font-weight: inherit; }

/* Coverage page, topic table on a narrow screen: each topic becomes a small card (name, then live now, being checked and total on their own lines) so nothing scrolls sideways. The wide layout is the table as it is. The cells carry inline styles, hence !important. */
@media (max-width: 600px) {
  .cov-topics { min-width: 0 !important; }
  .cov-topics thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cov-topics, .cov-topics tbody, .cov-topics tr { display: block; }
  .cov-topics tr { padding: 12px 14px; border-top: 1px solid oklch(0.28 0.03 220); }
  .cov-topics td { display: flex !important; justify-content: space-between; gap: 12px; border-top: 0 !important; padding: 2px 0 !important; text-align: left !important; }
  .cov-topics td:first-child { font-weight: 600; padding-bottom: 6px !important; }
  .cov-topics td:nth-child(2)::before { content: "Live now"; color: oklch(0.80 0.02 220); }
  .cov-topics td:nth-child(3)::before { content: "Being checked"; color: oklch(0.80 0.02 220); }
  .cov-topics td:nth-child(4)::before { content: "Total"; color: oklch(0.80 0.02 220); }
}

/* the country grid of the coverage page (tools/public_counts.py writes the tiles; countries-2.js adds the card) */
.ctiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.ctile { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; background: oklch(0.19 0.035 220); border: 1px solid oklch(0.30 0.03 220); border-radius: 6px; color: oklch(0.86 0.015 220); font: inherit; cursor: pointer; }
.ctile img { width: 32px; height: 24px; display: block; border-radius: 2px; }
.ctile span { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em; line-height: 1; }
.ctile:hover, .ctile[aria-expanded="true"] { border-color: oklch(0.80 0.13 85); }
.ctile:focus-visible { outline: 2px solid oklch(0.80 0.13 85); outline-offset: 2px; }
.ccard { position: fixed; z-index: 50; max-width: min(260px, calc(100vw - 16px)); padding: 12px 14px; background: oklch(0.22 0.03 220); border: 1px solid oklch(0.45 0.03 220); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); font-size: 14px; line-height: 1.5; color: oklch(0.95 0.01 220); }
.ccard[hidden] { display: none; }
.ccard-name { display: block; font-size: 15px; margin-bottom: 4px; }
.ccard-note { margin-top: 4px; color: oklch(0.80 0.02 220); }
@media (max-width: 640px) { .ctiles { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; } }