/* ============================================================================
   Website styles
   Soft, rounded and light: a cool off-white page with white panels, generous
   radii, pill buttons and tabs, navy ink with a fresh sky blue, one dark band,
   and the brass of the app's compass in the logo. Motion is short and quiet,
   and switched off for visitors who prefer reduced motion. Fonts are
   self-hosted, so the site loads nothing from third parties.
   ========================================================================== */

@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-400.3b646991d3.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-500.0717336fb3.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-600.8960851d69.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --page:        #f4f7fb;
  --surface:     #ffffff;
  --fill:        #edf2f8;
  --ink:         #0d1b2e;
  --ink-2:       #38455a;
  --muted:       #586478;
  --line:        #e2e8f0;
  --line-strong: #cbd4e1;
  --field-line:  #8792a5;   /* form fields: 3:1 against white */
  --navy:        #10284a;
  --navy-hover:  #183a68;
  --sky:         #2f7cf6;
  --sky-soft:    #e3eeff;
  --mint-soft:   #e2f6f1;
  --brass:       #c08a35;
  --focus:       #2f7cf6;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(13,27,46,.05), 0 2px 10px -4px rgba(13,27,46,.08);
  --shadow:    0 1px 2px rgba(13,27,46,.05), 0 14px 34px -14px rgba(13,27,46,.20);
  --shadow-lg: 0 2px 6px rgba(13,27,46,.06), 0 34px 70px -28px rgba(13,27,46,.34);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --header-h: 60px;
  --header-top: 12px;
}

/* ---- base ---------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--header-top) + 20px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 600; }
h1, h2 { letter-spacing: -0.03em; }
h3 { font-size: 17px; line-height: 1.4; letter-spacing: -0.01em; }
p { margin: 0; }
b, strong { font-weight: 600; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sky); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only {
  position: absolute !important; 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: 16px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; color: #fff; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 28px); }

/* ---- buttons ------------------------------------------------------------*/
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 500 16px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  color: #fff; background: var(--navy); border: 1px solid var(--navy); border-radius: 999px;
  padding: 14px 24px;
  transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--ease), box-shadow .25s;
}
.btn:hover { color: #fff; background: var(--navy-hover); border-color: var(--navy-hover); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(16,40,74,.55); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn .icon { flex: none; transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateY(2px); }
.btn-secondary { color: var(--navy); background: var(--surface); border-color: var(--line-strong); }
.btn-secondary:hover { color: var(--navy); background: var(--surface); border-color: var(--navy); box-shadow: 0 10px 22px -14px rgba(16,40,74,.45); }
.btn-small { padding: 10px 18px; font-size: 15px; }

/* ---- header: a floating bar -------------------------------------------*/
.site-header { position: sticky; top: var(--header-top); z-index: 50; margin-top: var(--header-top); }
.header-bar {
  position: relative; height: var(--header-h); display: flex; align-items: center; gap: 20px;
  padding: 0 8px 0 16px; border-radius: 999px;
  background: rgba(255,255,255,.82); border: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(170%) blur(14px); backdrop-filter: saturate(170%) blur(14px);
  box-shadow: var(--shadow-sm); transition: box-shadow .3s, background-color .3s;
}
/* Watched by site.js to tell when the page has scrolled. */
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 5px; pointer-events: none; }
.site-header.is-scrolled .header-bar { background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.mark { width: 30px; height: 30px; flex: none; }
.mark .needle { transform-origin: 16px 16px; }
/* The compass needle swings and settles when the logo is hovered. */
.brand:hover .needle { animation: settle 1.4s var(--ease); }
@keyframes settle {
  0% { transform: rotate(0); } 18% { transform: rotate(28deg); } 38% { transform: rotate(-16deg); }
  58% { transform: rotate(8deg); } 78% { transform: rotate(-3deg); } 100% { transform: rotate(0); }
}
.brand-name { font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.site-nav a:not(.btn) {
  color: var(--ink-2); text-decoration: none; font-size: 15px; padding: 9px 14px; border-radius: 999px;
  transition: color .2s, background-color .2s;
}
.site-nav a:not(.btn):hover { color: var(--ink); background: var(--fill); }
.site-nav .btn { margin-left: 8px; }
.nav-toggle {
  display: none; margin-left: auto; width: 44px; height: 44px; padding: 0; cursor: pointer;
  color: var(--ink); background: var(--fill); border: 0; border-radius: 999px;
}
.nav-toggle svg { margin: auto; }
@media (max-width: 980px) {
  .nav-toggle { display: grid; place-items: center; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    /* On a short screen (a phone in landscape) the menu scrolls inside itself. */
    max-height: calc(100vh - var(--header-h) - var(--header-top) - 20px);
    max-height: calc(100dvh - var(--header-h) - var(--header-top) - 20px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .site-nav.open { display: flex; animation: drop .25s var(--ease); }
  .site-nav a:not(.btn) { padding: 13px 16px; font-size: 16px; border-radius: var(--r-sm); }
  .site-nav .btn { margin: 8px 0 0; padding: 14px; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* ---- sections -----------------------------------------------------------*/
.section { padding: clamp(44px, 6vw, 80px) 0; }
.section-head { max-width: 780px; margin-bottom: clamp(30px, 4vw, 44px); }
.section-head h2, .column-head h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.1; margin-bottom: 16px; }
.section-head p, .column-head p { color: var(--ink-2); font-size: 18px; }
.column-head p + p { margin-top: 14px; }

/* Heading in a narrow left column, content on the right. */
.columns { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
/* Beside long content (the specifications) the heading stays in view. */
@media (min-width: 861px) { .columns.pin-head > .column-head { position: sticky; top: calc(var(--header-h) + var(--header-top) + 36px); } }
@media (max-width: 860px) { .columns { grid-template-columns: minmax(0, 1fr); } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow-sm); }

/* ---- hero ---------------------------------------------------------------*/
.hero { padding: 20px 0 clamp(24px, 4vw, 48px); }
.hero-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 5vw, 64px); border-radius: var(--r-xl); border: 1px solid var(--line); overflow: hidden;
  background:
    radial-gradient(70% 90% at 100% 0%, var(--sky-soft) 0%, rgba(227,238,255,0) 70%),
    radial-gradient(60% 80% at 0% 100%, var(--mint-soft) 0%, rgba(226,246,241,0) 70%),
    var(--surface);
}
/* Sized so the heading breaks into two lines beside the screenshot. */
.hero h1 { font-size: clamp(34px, 4.2vw, 48px); line-height: 1.06; letter-spacing: -0.04em; margin-bottom: 20px; }
.lead { font-size: clamp(17.5px, 1.5vw, 19.5px); color: var(--ink-2); line-height: 1.6; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.meta { margin-top: 16px; font-size: 14.5px; color: var(--muted); }

.frame { padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 6px); box-shadow: var(--shadow-lg); }
.frame img { width: 100%; border-radius: var(--r); }
.hero-shot { margin: 0; }
.hero-shot figcaption { margin-top: 14px; padding-left: 8px; font-size: 14px; color: var(--muted); }
@media (max-width: 1040px) { .hero-panel { grid-template-columns: minmax(0, 1fr); } .hero-text { max-width: 720px; } }
@media (max-width: 520px) { .actions .btn { width: 100%; } .frame { padding: 5px; border-radius: 16px; } .frame img { border-radius: 12px; } }
/* Very narrow screens (a folded phone): long button labels may wrap. */
@media (max-width: 340px) { .btn { white-space: normal; text-align: center; } .live dl { grid-template-columns: minmax(0, 1fr); } }

/* Live almanac values, updated every second by site.js. */
.live { margin-top: 30px; padding: 16px 20px; background: rgba(255,255,255,.75); border: 1px solid var(--line); border-radius: var(--r); }
/* Until site.js fills it in, the readout keeps its space but is invisible, so
   nothing shifts when it appears. Without JavaScript it is not shown at all. */
.live.is-pending { visibility: hidden; }
@media (scripting: none) { .live { display: none; } }
.live dl { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 4px 20px; margin: 0; }
.live dt { font-size: 13px; color: var(--muted); }
.live dd { margin: 0; font-size: 17px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.live p { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.live p::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: #1fae7a; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(31,174,122,.18); animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }
@media (max-width: 560px) { .live dl { grid-template-columns: repeat(2, auto); justify-content: start; gap: 8px 32px; } }

/* Entrance on load, CSS only, so nothing is ever hidden without JavaScript.
   The heading and the screenshot are the largest paints, so they are not
   faded in (an element at opacity 0 does not count as painted, which would
   delay Largest Contentful Paint); the smaller items rise in after them. */
.hero-text > :not(h1) { animation: rise .8s var(--ease) both; }
.hero-text > :nth-child(2) { animation-delay: .04s; }
.hero-text > :nth-child(3) { animation-delay: .1s; }
.hero-text > :nth-child(4) { animation-delay: .16s; }
.hero-text > :nth-child(5) { animation-delay: .22s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* ---- scroll reveal (site.js marks what is still below the fold) ----------*/
/* !important so the fade also runs on cards that have their own transitions
   (hover lift); site.js removes these classes once the fade has finished. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease) var(--delay, 0s), transform .7s var(--ease) var(--delay, 0s) !important; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- features: pill tabs ------------------------------------------------*/
.tabs {
  position: relative; display: flex; width: fit-content; max-width: 100%; gap: 2px; padding: 5px; margin-bottom: 26px;
  background: var(--fill); border: 1px solid var(--line); border-radius: 999px;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"] {
  position: relative; z-index: 1; flex: none; font: 500 15px/1 var(--sans); color: var(--ink-2); cursor: pointer;
  background: none; border: 0; border-radius: 999px; padding: 11px 18px; transition: color .2s, background-color .2s;
}
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); }
.tabs [role="tab"]:focus-visible { outline-offset: -2px; border-radius: 999px; }
/* With JavaScript, one white pill slides between the tabs instead. */
.tabs .indicator {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; pointer-events: none;
  background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), width .4s var(--ease);
}
.tabs .indicator.no-slide { transition: none; }
.tabs.has-indicator [role="tab"][aria-selected="true"] { background: none; box-shadow: none; }
.panel[hidden] { display: none; }
.panel:not([hidden]) { animation: panel-in .45s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.panel:focus-visible { outline-offset: 6px; }
.panel-text { max-width: 780px; margin-bottom: 24px; }
/* The tab already names the view; the heading stays for screen readers. */
.panel-text h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.panel-text p { color: var(--ink-2); font-size: 18px; }
.panel .frame img { aspect-ratio: 1280 / 820; object-fit: cover; object-position: top; }

/* ---- use at sea: the dark band ------------------------------------------*/
.band {
  padding: clamp(32px, 5vw, 64px); border-radius: var(--r-xl); color: #e8eef7;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(47,124,246,.22) 0%, rgba(47,124,246,0) 70%),
    linear-gradient(160deg, #11294b 0%, #0a1a31 100%);
}
.band h2, .band h3 { color: #fff; }
.band p { color: #aebbd0; }
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.points > div {
  padding: 22px 22px 24px; border-radius: var(--r); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  transition: background-color .3s, border-color .3s, transform .35s var(--ease);
}
.points > div:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); transform: translateY(-2px); }
.points h3 { margin-bottom: 8px; font-size: 18px; }
.points p { font-size: 16px; }
@media (max-width: 640px) { .points { grid-template-columns: 1fr; } }

/* ---- screenshots --------------------------------------------------------*/
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gallery figure {
  margin: 0; padding: 8px 8px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.gallery figure:hover, .gallery figure:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.shot { display: block; border-radius: var(--r); overflow: hidden; background: #080c16; }
.shot img { width: 100%; aspect-ratio: 1280 / 1000; object-fit: cover; object-position: top; transition: transform .7s var(--ease); }
.shot:hover img, .shot:focus-visible img { transform: scale(1.04); }
.gallery figcaption { margin-top: 14px; padding: 0 10px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.gallery figcaption b { display: block; color: var(--ink); margin-bottom: 2px; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }

/* The screenshots are 2560 x 2640, nearly square. The viewer takes the width at
   which the whole image and its caption (about --lb-cap high) fit on the
   screen, so nothing in it scrolls. */
.lightbox {
  --lb-cap: 74px;
  width: min(1240px, calc(100vw - 32px), calc((100vh - 32px - var(--lb-cap)) * 2560 / 2640));
  width: min(1240px, calc(100vw - 32px), calc((100dvh - 32px - var(--lb-cap)) * 2560 / 2640));
  max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); color: var(--ink);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}
.lightbox[open] { animation: lb-in .35s var(--ease); }
.lightbox[open]::backdrop { animation: fade .3s ease; }
.lightbox::backdrop { background: rgba(9,16,28,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes lb-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes fade { from { opacity: 0; } }
.lightbox figure { margin: 0; display: flex; flex-direction: column; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.lightbox img { display: block; flex: 0 1 auto; min-height: 0; width: 100%; height: auto; object-fit: contain; background: #080c16; transition: opacity .2s; }
.lightbox img.is-loading { opacity: 0; }
.lightbox figcaption { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 12px 12px 22px; font-size: 15px; color: var(--ink-2); }
.lightbox .lb-text { flex: 1; }
.lightbox .lb-text b { color: var(--ink); margin-right: 6px; }
.lb-btn {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer;
  color: var(--ink); background: var(--fill); border: 0; border-radius: 999px; transition: background-color .2s, color .2s;
}
.lb-btn:hover { background: var(--navy); color: #fff; }
.lb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .lightbox { --lb-cap: 150px; } .lightbox figcaption { flex-wrap: wrap; padding: 12px; } .lightbox .lb-text { flex-basis: 100%; order: -1; } }
/* Phones held sideways: the caption goes beside the image, which then takes the full height. */
@media (orientation: landscape) and (max-height: 560px) {
  .lightbox {
    --lb-side: 240px;
    width: min(1240px, calc(100vw - 32px), calc((100vh - 32px) * 2560 / 2640 + var(--lb-side)));
    width: min(1240px, calc(100vw - 32px), calc((100dvh - 32px) * 2560 / 2640 + var(--lb-side)));
  }
  .lightbox figure { flex-direction: row; }
  .lightbox img { flex: none; width: calc(100% - var(--lb-side)); }
  .lightbox figcaption { flex: 1; min-width: 0; flex-wrap: wrap; align-content: space-between; padding: 16px; }
  .lightbox .lb-text { flex-basis: 100%; }
}

/* ---- film ---------------------------------------------------------------*/
.film { margin: 0; }
.film-play, .film video {
  display: block; position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-lg); background: #050b17; box-shadow: var(--shadow-lg);
}
.film-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.film-play:hover img { transform: scale(1.015); }
.film-play:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }
.film-button {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; white-space: nowrap;
  border-radius: 999px; background: rgba(255,255,255,.95); color: var(--navy); font-size: 17px; font-weight: 600;
  box-shadow: 0 14px 40px rgba(5,11,23,.4); transition: transform .3s var(--ease);
}
.film-play:hover .film-button { transform: translate(-50%, -50%) scale(1.05); }
.film-disc { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: var(--sky); color: #fff; }
.film-disc svg { fill: currentColor; margin-left: 2px; }
.film-length { font-weight: 500; color: var(--muted); }
.film figcaption { margin-top: 14px; padding: 0 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 520px) { .film-play, .film video { border-radius: 16px; } .film-button { font-size: 15px; padding-right: 16px; gap: 10px; } .film-disc { width: 36px; height: 36px; } }

/* ---- specifications -----------------------------------------------------*/
.specs { width: 100%; border-collapse: collapse; font-size: 16px; }
.specs + .specs { margin-top: 32px; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs caption { text-align: left; padding: 0 0 12px; border-bottom: 1px solid var(--line-strong); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); }
.specs th, .specs td { text-align: left; vertical-align: top; padding: 12px 0; border-bottom: 1px solid var(--line); }
.specs tbody th[scope="row"] { width: 32%; padding-right: 24px; font-weight: 500; color: var(--ink); }
.specs td { color: var(--ink-2); }
.note { margin-top: 24px; padding: 16px 20px; border-radius: var(--r-sm); background: #fbf5ea; border: 1px solid #f0e3c9; color: #5b4a2c; font-size: 16px; }
.note b { color: #3e3018; }
@media (max-width: 560px) {
  .specs tbody th[scope="row"], .specs td { display: block; width: auto; padding: 0; border: 0; }
  .specs tbody th[scope="row"] { padding-top: 12px; }
  .specs td { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
}

/* ---- pricing ------------------------------------------------------------*/
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan {
  display: flex; flex-direction: column; padding: 30px 28px 28px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: border-color .3s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.plan:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan h3 { font-size: 20px; }
.price { margin-top: 12px; color: var(--muted); font-size: 15px; }
.price .amount { display: block; font-size: 44px; font-weight: 600; letter-spacing: -0.04em; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.plan dl { margin: 20px 0 26px; padding: 6px 18px; flex: 1; background: var(--page); border-radius: var(--r); }
.plan dt { font-size: 13.5px; font-weight: 500; color: var(--muted); padding-top: 12px; }
.plan dt:not(:first-child) { border-top: 1px solid var(--line); }
.plan dd { margin: 2px 0 12px; color: var(--ink-2); font-size: 15.5px; }
.plan .btn { align-self: stretch; }
.fineprint { list-style: none; margin: 30px 0 0; padding: 0 4px; display: grid; gap: 6px; font-size: 15px; color: var(--muted); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* ---- download -----------------------------------------------------------*/
.cta {
  padding: clamp(32px, 5vw, 64px); border-radius: var(--r-xl); border: 1px solid var(--line);
  background:
    radial-gradient(60% 90% at 100% 100%, var(--mint-soft) 0%, rgba(226,246,241,0) 70%),
    radial-gradient(60% 90% at 0% 0%, var(--sky-soft) 0%, rgba(227,238,255,0) 70%),
    var(--surface);
}
.download > p:first-child { color: var(--ink-2); max-width: 620px; font-size: 18px; }
.download .actions { margin-top: 24px; }

/* ---- FAQ ----------------------------------------------------------------*/
.faq { display: grid; gap: 10px; }
.faq details {
  padding: 0 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .25s, box-shadow .3s;
}
.faq details:hover { border-color: var(--line-strong); }
.faq details[open] { box-shadow: var(--shadow); border-color: var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 19px 48px 19px 0; font-weight: 500; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: ""; position: absolute; right: -6px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  background: var(--fill) no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310284a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform .35s var(--ease), background-color .25s;
}
.faq details[open] summary::before { transform: rotate(45deg); background-color: var(--sky-soft); }
.faq summary:focus-visible { outline-offset: 4px; }
.faq details p { padding: 0 48px 22px 0; color: var(--ink-2); }
.faq details[open] p { animation: faq-in .35s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---- contact form (Netlify Forms) ---------------------------------------*/
.contact-form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 34px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.contact-form .field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.contact-form .field { display: grid; gap: 7px; }
.contact-form .field[hidden] { display: none; }
.contact-form .field[data-topics]:not([hidden]) { animation: panel-in .3s var(--ease); }
.contact-form label { font-size: 15px; font-weight: 500; color: var(--ink); }
.contact-form .opt { font-weight: 400; color: var(--muted); }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; font: 16px/1.4 var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--r-sm); padding: 13px 14px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover { border-color: var(--ink-2); }
.contact-form textarea { resize: vertical; min-height: 52px; }
.contact-form select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background: var(--surface) no-repeat right 14px center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338455a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; background-color: var(--surface); border-color: var(--sky); box-shadow: 0 0 0 4px rgba(47,124,246,.16);
}
.form-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.form-note { flex: 1; min-width: 220px; font-size: 14px; color: var(--muted); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 520px) { .contact-form .field-row { grid-template-columns: 1fr; } .form-actions .btn { width: 100%; } }

/* ---- footer -------------------------------------------------------------*/
.site-footer { padding: 8px 0 40px; font-size: 15px; color: var(--muted); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.footer-about { max-width: 520px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: flex-end; }
.footer-nav a { color: var(--ink-2); text-decoration: none; transition: color .2s; }
.footer-nav a:hover { color: var(--sky); }
.footer-small { grid-column: 1 / -1; font-size: 14px; }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } .footer-nav { justify-content: flex-start; } }

/* ---- 404 and thank-you pages --------------------------------------------*/
.plain-page { padding: clamp(64px, 12vw, 140px) 0; }
.plain-page h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -0.04em; margin-bottom: 18px; }
.plain-page p { color: var(--ink-2); margin-bottom: 30px; max-width: 600px; }
.plain-page .status { display: inline-block; font-size: 14px; font-weight: 500; color: var(--navy); background: var(--sky-soft); padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }
.plain-page .container > * { animation: rise .7s var(--ease) both; }
.plain-page .container > :nth-child(2) { animation-delay: .06s; }
.plain-page .container > :nth-child(3) { animation-delay: .12s; }
.plain-page .container > :nth-child(4) { animation-delay: .18s; }

/* ---- print ----------------------------------------------------------------*/
@media print {
  .site-header, .skip, .nav-toggle, .lightbox, .live, .hp, #film { display: none !important; }
  body { background: #fff; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-panel, .band, .cta, .card, .plan, .gallery figure, .faq details, .contact-form { box-shadow: none !important; break-inside: avoid; }
  .band { background: #fff !important; color: var(--ink); border: 1px solid var(--line); }
  .band h2, .band h3 { color: var(--ink); }
  .band p { color: var(--ink-2); }
}

/* ---- reduced motion ------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .reveal { opacity: 1; transform: none; }
}