/* Landing page — "Instrument": the front panel of the same instrument the
   viewer is. Hairline rules instead of cards, condensed display type,
   monospace for every figure. All colours come from tokens.css. */

* { box-sizing: border-box; }

/* The `hidden` attribute is nothing but a UA `display: none`, so any author
   rule carrying its own `display` silently defeats it — `img` just below,
   and every `.thing { display: flex }` in this file. The elements toggled
   with `el.hidden = true` are exactly those. Say it once, here. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 34px); }
.spacer { margin-left: auto; }

/* ---- top bar ---- */
.lnav { border-bottom: 1px solid var(--line); background: var(--panel); }
.lnav-in {
  max-width: 1180px; margin: 0 auto;
  padding: 13px clamp(16px, 3vw, 34px);
  display: flex; align-items: center; gap: clamp(10px, 2vw, 22px);
}
.brand {
  font-family: var(--mono); font-size: 17px; letter-spacing: -.03em;
  text-decoration: none; margin-right: auto; white-space: nowrap;
}
.brand b { color: var(--accent); font-weight: 500; }
/* Compact mode gets the short wordmark: the same rule /models' `.topbar`
   already follows (app.css, `.brand-long`/`.brand-short`), at this
   header's own threshold rather than that one's -- 700px, the width where
   `.lnav-links` collapses into the hamburger just below. One rule, "burger
   mode means the short brand", two page-appropriate numbers. */
.brand-short { display: none; }
@media (max-width: 700px) {
  .brand-long { display: none; }
  .brand-short { display: inline; }
}
.lnav-links { display: flex; gap: 16px; }
.lnav-links a { font-size: 13.5px; text-decoration: none; color: var(--muted); }
.lnav-links a:hover { color: var(--ink); }
/* The page you are already on, named in its own nav rather than only
   inferable from the URL (skewt-look, nav unification). Shared by every
   page that copies this header -- index.html, /meteograms/, /skewt/. */
.lnav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .lnav-links { display: none; } }

/* ---- mobile hamburger nav (skewt-look) ------------------------------------
   Below .lnav-links' own collapse breakpoint, above, the four tools and
   Pretplata vanished entirely with nothing standing in for them -- this is
   what does. `.lnav-burger-wrap` is the positioned ancestor `.lnav-drop`
   overlays against (absolute, so it lays over the page rather than pushing
   it down), the same idiom `.lnav-actions` already uses for `.lnav-menu`
   just below. Hidden above 700px: `.lnav-links` already carries the nav
   there, and showing both would say the same thing twice.

   It is the LAST child of `.lnav-actions` on every page (nav unification),
   so the burger is the rightmost control here exactly as it already is in
   /models' `.runinfo` -- and, as there, `right: 0` then has the whole bar
   to its left to open into. The anchor is `.lnav-burger-wrap` itself, not
   a positional sibling, so moving it inside `.lnav-actions` changed where
   it sits without changing what it hangs off. */
.lnav-burger-wrap { display: none; position: relative; }
@media (max-width: 700px) { .lnav-burger-wrap { display: block; } }
.lnav-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; font-size: 17px; line-height: 1;
  color: var(--ink); border: 1px solid var(--line); border-radius: 2px;
}
.lnav-burger:hover { border-color: var(--accent); }
.lnav-drop {
  /* 1100: above everything a Leaflet map stacks. The first pass used
     1000, reasoning from the map *panes* (inline z-index up to 700) --
     and forgot the map *controls*: .leaflet-top/.leaflet-bottom carry
     z-index 1000 exactly, and at equal z the later element in the DOM
     paints on top, which is the map, so the zoom buttons sat over the
     open menu (Ivan found it). Kept below /skewt/'s fullscreen plot
     lightbox at 2000, which must cover the whole page including this. */
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1100;
  display: flex; flex-direction: column;
  min-width: 200px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 8px 24px var(--shadow-2);
}
.lnav-drop a {
  padding: 9px 12px; font-size: 14px; text-decoration: none;
  color: var(--ink); border-radius: 2px;
}
.lnav-drop a:hover { background: var(--panel-hover); }
/* The page you are already on, same rule `.lnav-links a[aria-current]` uses. */
.lnav-drop a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.lnav-actions { display: flex; align-items: center; gap: 10px; position: relative; }
.icon-btn {
  font-size: 15px; color: var(--muted); line-height: 1;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 2px;
}
.icon-btn:hover { color: var(--ink); }
.signin-btn {
  font-size: 13px; font-weight: 500; text-decoration: none;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 2px;
  white-space: nowrap;
}
.lnav-menu {
  /* 1100, for exactly the reason `.lnav-drop` above carries it: a Leaflet
     map stacks its panes up to 700 and its own controls at 1000, and at
     equal z the later element in the DOM wins -- which is the map. At the
     20 this rule shipped with, the settings menu was fine on the landing
     page (no map) and painted *under* the map on /meteograms/ and /skewt/
     from "Tamna" down, taking the whole Jezik section with it. Those two
     pages only grew a gear with nav unification, which is why the number
     was right until it wasn't. Kept below /skewt/'s fullscreen plot
     lightbox at 2000, same ceiling `.lnav-drop` respects. */
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1100;
  min-width: 180px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 8px 24px var(--shadow-2);
}
.lnav-menu .sec {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px;
}
.lnav-menu button {
  display: flex; width: 100%; gap: 8px; align-items: center;
  padding: 7px 10px; font-size: 13.5px; border-radius: 2px; text-align: left;
}
.lnav-menu button:hover { background: var(--panel-hover); }
.lnav-menu button[aria-checked="true"] { color: var(--active-ink); background: var(--panel-active); }

/* ---- shared type ---- */
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}
h1 {
  font-family: var(--cond); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.03;
  margin: 0 0 18px; text-wrap: balance;
}
h2 {
  font-family: var(--cond); font-weight: 600; letter-spacing: -.015em;
  font-size: clamp(25px, 3.2vw, 37px); line-height: 1.09;
  margin: 0 0 16px; text-wrap: balance;
}
.lead { font-size: 17px; line-height: 1.62; color: var(--muted); margin: 0 0 26px; max-width: 46ch; }
.body { font-size: 16px; line-height: 1.72; color: var(--muted); margin: 0 0 16px; }
.body b { color: var(--ink); font-weight: 500; }

.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  font-size: 14.5px; font-weight: 500; text-decoration: none;
  padding: 11px 20px; border-radius: 2px; display: inline-block;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
}
.btn.ghost { background: none; color: var(--ink); border-color: var(--line); }

/* ---- hero ---- */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 54px); align-items: center;
  padding-top: clamp(38px, 6vw, 74px); padding-bottom: clamp(34px, 5vw, 58px);
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.bezel { border: 1px solid var(--line); background: var(--panel); margin: 0; }
.bezel-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: .02em;
  min-height: 33px;
}
.bezel-bar-btm { border-bottom: none; border-top: 1px solid var(--line); }
/* The API serves the original frame, which carries a baked-in header,
   legend and border. Crop to the map field: the frame is 1180x885 and the
   field is (52,95)-(1127,867), so 1075x772. */
.mapcrop { position: relative; overflow: hidden; aspect-ratio: 1075 / 772; background: var(--map-bg); }
.mapcrop img {
  position: absolute;
  width: 109.767%; height: 114.637%;
  left: -4.837%; top: -12.306%;
  max-width: none;
}
[data-theme="dark"] .mapcrop img { filter: brightness(.88) saturate(.97); }
@media (hover: hover) { [data-theme="dark"] .mapcrop:hover img { filter: none; } }

.lfoot { border-top: 1px solid var(--line); }
.fbase {
  border-top: 1px solid var(--line); padding: 14px 0 26px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  display: flex; gap: 14px; flex-wrap: wrap;
}

/* ---- spec strip ---- */
.specs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.spec { padding: 20px 16px; border-left: 1px solid var(--line); }
.spec:first-child { border-left: none; }
.spec .n {
  font-family: var(--mono); font-weight: 500; font-size: 26px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.spec .l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); margin-top: 6px; line-height: 1.4;
}
@media (max-width: 760px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
  .spec { border-top: 1px solid var(--line); }
  .spec:nth-child(odd) { border-left: none; }
  .spec:nth-child(-n+2) { border-top: none; }
}

/* ---- sections ---- */
.sect { padding-top: clamp(38px, 5.5vw, 68px); padding-bottom: clamp(38px, 5.5vw, 68px); }
.sechead { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; }
.sechead .eyebrow { margin: 0; flex: none; }
.sechead .hr { flex: 1; height: 1px; background: var(--line); }
.rule { height: 1px; background: var(--line); }

.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(22px, 4vw, 56px); }
@media (max-width: 800px) { .why { grid-template-columns: 1fr; } }
.sig {
  font-family: var(--mono); font-size: 12.5px; color: var(--muted); line-height: 1.6;
  border-left: 2px solid var(--accent); padding-left: 12px; margin: 22px 0 18px;
}
.arrowlink {
  font-family: var(--mono); font-size: 13px; color: var(--accent);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ---- product thumbs ---- */
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 700px) { .thumbs { grid-template-columns: repeat(2, 1fr); } }
.thumb { border: 1px solid var(--line); background: var(--panel); margin: 0; }
.thumb figcaption {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  padding: 8px 10px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 6px;
}
.thumb figcaption b { color: var(--badge-ink); font-weight: 500; }

/* ---- pricing ---- */
.price {
  border: 1px solid var(--line); background: var(--panel);
  padding: clamp(22px, 3vw, 34px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 46px); align-items: center;
}
@media (max-width: 760px) { .price { grid-template-columns: 1fr; } }
.price .amount {
  font-family: var(--mono); font-weight: 500; letter-spacing: -.03em;
  font-size: clamp(22px, 3.2vw, 28px); line-height: 1; font-variant-numeric: tabular-nums;
}
.price .per { font-family: var(--mono); font-size: 14px; color: var(--muted); margin: 8px 0 0; }

/* The annual as a plain line is what someone without JavaScript sees; the
   toggle replaces it when JS runs. */
.price .alt { font-family: var(--mono); font-size: 13.5px; color: var(--ink); margin: 14px 0 0; }
.seg {
  display: inline-flex; border: 1px solid var(--line); border-radius: 2px;
  overflow: hidden; margin-bottom: 16px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.seg button {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 7px 14px; border: 0; background: none; color: var(--muted); cursor: pointer;
}
.seg button.on { background: var(--accent); color: var(--on-accent); }
/* Inset because .seg clips its overflow — an outer ring would be cut off. That
   puts the ring on top of the selected button's accent fill, where an accent
   ring is invisible, so the selected one draws its ring in the other colour. */
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.seg button.on:focus-visible { outline-color: var(--on-accent); }
.price ul { list-style: none; margin: 0; padding: 0; }
.price li {
  font-size: 14.5px; color: var(--muted); line-height: 1.5;
  padding: 8px 0 8px 20px; position: relative; border-top: 1px solid var(--line);
}
.price li:first-child { border-top: none; }
.price li::before {
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.price li.free::before { background: var(--muted); }

/* ---- footer ---- */
.fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; padding: 34px 0 30px; }
@media (max-width: 760px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
.fgrid h3 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 12px; font-weight: 400;
}
.fgrid a { display: block; font-size: 14px; text-decoration: none; margin-bottom: 8px; }
.fgrid a:hover { color: var(--accent); }
.fgrid .sub { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ---- article and legal pages ---- */
.doc { max-width: 68ch; padding-top: clamp(34px, 5vw, 60px); padding-bottom: clamp(40px, 6vw, 76px); }
.doc h1 { font-size: clamp(28px, 4vw, 42px); }
.doc h2 { font-size: clamp(20px, 2.6vw, 26px); margin-top: 36px; }
.doc p { font-size: 16.5px; line-height: 1.72; color: var(--muted); margin: 0 0 18px; }
.doc p.byline { font-family: var(--mono); font-size: 12.5px; margin-bottom: 30px; }
.doc .todo {
  border: 1px dashed var(--line); background: var(--panel-active);
  padding: 14px 16px; font-family: var(--mono); font-size: 12.5px;
  color: var(--muted); line-height: 1.6; margin: 0 0 20px;
}

/* ---- premium thumb lock ----
   The lock sits behind the image by default (no JS needed): a loaded photo
   is opaque and covers it, a failed one (empty alt) paints nothing and
   lets it show through. JS only adds .is-locked to explicitly hide the
   broken <img> box as a belt-and-suspenders touch — never required. */


.thumbs-more { margin: 16px 0 0; }

/* ============================================================
   Hero rotation + colour pass.
   Every colour below is derived from tokens.css via var() or
   color-mix(); nothing here declares a palette of its own.
   ============================================================ */

/* ---- crossfading hero ---- */
.hero-stage img { transition: opacity .7s ease; }
.hero-stage img.is-under { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-stage img { transition: none; }
}

.hero-product { text-transform: uppercase; letter-spacing: .06em; }

.hero-dots { display: flex; gap: 6px; align-items: center; }
.hero-dot {
  width: 7px; height: 7px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.hero-dot:hover { border-color: var(--accent); }
.hero-dot.is-on {
  background: var(--accent); border-color: var(--accent); transform: scale(1.25);
}

/* ---- a wash of Adriatic under the hero, so the fold isn't flat paper ---- */
.hero {
  background:
    radial-gradient(120% 90% at 78% 0%,
      color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 5%, transparent), transparent 72%);
}
.bezel { box-shadow: 0 1px 3px var(--shadow-2); }
.bezel-bar:first-child {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* ---- the figures are the product; let them carry the accent ---- */
.spec .n { color: var(--accent); }
.spec { transition: background-color .2s; }
.spec:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Section rules start in accent and fade to the hairline, so a heading
   reads as a heading before you've read it. */
.sechead .hr {
  background: linear-gradient(90deg, var(--accent) 0 52px, var(--line) 52px);
}

/* ---- product thumbs: whole card is a link into the viewer ---- */
.thumb { position: relative; transition: border-color .18s, box-shadow .18s; }
.thumb-img { width: 100%; height: auto; display: block; }
.thumb-link { text-decoration: none; }
.thumb-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
@media (hover: hover) {
  .thumb:hover { border-color: var(--accent); box-shadow: 0 2px 8px var(--shadow-2); }
  .thumb:hover figcaption { color: var(--accent); }
}
.thumb:focus-within { border-color: var(--accent); }

/* Premium reads as a badge, matching the viewer's own PREMIUM chip. It marks
   what a subscription unlocks; it does not hide the preview, because a strip
   that shows padlocks instead of maps sells nothing. */
.thumb figcaption b {
  background: var(--badge-bg);
  border: 1px solid var(--badge-line);
  color: var(--badge-ink);
  border-radius: 2px;
  padding: 0 6px;
  letter-spacing: .06em;
  flex: none;
}

/* ---- pricing panel: the one place on the page allowed to shout ---- */
.price {
  border-left: 3px solid var(--accent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    var(--panel);
}
.price .amount { color: var(--accent); }

/* ---- legal + contact pages ---- */
.doc h3 {
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  margin: 26px 0 8px; color: var(--ink);
}
.doc ul { color: var(--muted); line-height: 1.72; font-size: 16.5px; margin: 0 0 18px; padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc code {
  font-family: var(--mono); font-size: .9em;
  background: var(--panel-active); padding: 1px 5px; border-radius: 2px;
}
.legal-name { color: var(--ink); }
.lang-note {
  border-left: 2px solid var(--accent); padding: 2px 0 2px 14px;
  font-size: 14.5px; margin: 0 0 28px;
}
.legal-dl {
  display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr);
  gap: 6px 18px; margin: 0 0 22px; font-size: 15px;
}
@media (max-width: 560px) { .legal-dl { grid-template-columns: 1fr; gap: 2px 0; } }
.legal-dl dt {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); padding-top: 3px;
}
.legal-dl dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) { .legal-dl dd { margin-bottom: 10px; } }
.legal-nav { display: flex; flex-wrap: wrap; gap: 18px; padding: 30px 0 6px; }
.legal-nav a { font-size: 14px; text-decoration: none; color: var(--muted); }
.legal-nav a:hover { color: var(--accent); }

/* Signed-in state, mirroring the viewer's own PREMIUM chip. */
.premium-chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  background: var(--badge-bg); border: 1px solid var(--badge-line);
  color: var(--badge-ink); border-radius: 2px; padding: 3px 6px;
  white-space: nowrap;
}