/* fungelo.app landing page (Forest weather, 2026-10-31: docs/superpowers/specs/2026-10-31-forest-weather-design.md).
   Served by app/worker/index.js; the app itself is on spots.fungelo.app. The landing loads none of the app's CSS: :root
   below carries the app's light tokens (app/src/styles/tokens.css) and, as --night-*, its dark ones for the hero and the
   paid plan; colors.test.ts keeps them equal. Fonts are self-hosted: nothing loads from outside fungelo.app. */

/* Figtree for titles, text and figures (every number tabular), the files and unicode-ranges of the pinned Fontsource
   package (app/node_modules/@fontsource/figtree; landing.test.ts). 400 running text, 500 labels, 600 titles and buttons,
   300 for the sample score's numeral alone. latin-ext carries č š ž ć đ, the Czech and Slovak ř ů ě ť ď ň ĺ ľ ŕ and the
   French œ in every weight, so no glyph falls back to a system face. */
@font-face { font-family: 'Figtree'; font-weight: 300; font-display: swap; src: url(fonts/figtree-latin-300-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-weight: 300; font-display: swap; src: url(fonts/figtree-latin-ext-300-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url(fonts/figtree-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url(fonts/figtree-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-weight: 500; font-display: swap; src: url(fonts/figtree-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-weight: 500; font-display: swap; src: url(fonts/figtree-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-weight: 600; font-display: swap; src: url(fonts/figtree-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-weight: 600; font-display: swap; src: url(fonts/figtree-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* The page stays light whatever the phone's theme (the hero is the one dark ground): form controls and scrollbars too. */
  color-scheme: light;
  /* Ground and ink (the app's light tokens) */
  --canvas: #EDF2EC;
  --surface: #E0E9DF;
  --raised: #FFFFFF;
  --line: #CFDCCD;
  --text: #102119;
  --text-2: #2B4235;          /* the app's strong secondary: 9.6:1 on canvas */
  --muted: #4C6355;           /* the app's secondary: 5.7:1 on canvas */
  --border: rgba(16,33,25,.14);
  --hover: rgba(16,33,25,.04);
  --pressed: rgba(16,33,25,.08);
  --ring-swatch: #667768;     /* 3:1 ring around every heat swatch; the line of a secondary button */
  /* Fern: links, ticks and icons (5.6:1 on canvas). Spruce ink: the primary button's fill, light text on it (15.4:1);
     never a dark-green pill on a pale ground (owner decision 9). */
  --accent: #2E6B3E;
  --action: #15201A;
  --action-hover: #1F2D25;
  --action-pressed: #0E1611;
  --on-action: #F1F7F0;
  /* Shapes: every control a pill, containers soft large corners, no outlines (depth from fill and a soft shadow) */
  --outline-width: 0px;
  --radius-tag: 999px;
  --radius-button: 999px;
  --radius-card: 22px;
  --radius-tile-lg: 26px;
  --radius-sheet: 36px;
  /* The dark ground: the hero and the paid plan, in the app's dark tokens (dark is the hero look, owner decision 10) */
  --night: #0C1410;
  --night-sky: #24452F;       /* the sheet's sky top in the dark theme, fading into --night */
  --night-tile: #162A20;
  --night-line: #23382C;
  --night-text: #EEF4EE;      /* 16.8:1 on --night */
  --night-text-2: #C8D8CC;
  --night-muted: #9CB2A3;     /* 8.3:1 on --night, 4.7:1 on the sky top */
  --night-accent: #9BD08A;    /* fern: 10.5:1 on --night */
  --night-action: #E7F2E3;
  --night-action-hover: #FFFFFF;
  --night-action-pressed: #CFE3C9;
  --night-on-action: #0C1410; /* 16.2:1 */
  --night-contour: rgba(155,208,138,.1);
  --night-contour-line: rgba(170,225,170,.17); /* the dark map's index contour (colors.ts); the other lines at half */
  --night-shadow: 0 18px 50px rgba(0,6,2,.6);
  /* The contour motif: the real contours of a piece of west Pohorje (contours.svg: every 40 m, an index line every
     200 m, from the map's own elevation tiles by scripts/landing-contours.mjs). The SVG is only a mask, painted in
     these fern tones as the map paints its contour layer; drawn at its own size, never stretched. Never over data. */
  --contour: rgba(46,107,62,.13);
  --contour-faint: rgba(46,107,62,.09);
  --heading: 'Figtree', system-ui, sans-serif;   /* titles: 600, tracked -0.02em */
  --body: 'Figtree', system-ui, sans-serif;      /* 400 running text, 500 labels and names, 600 buttons */
  --gutter: clamp(20px, 5vw, 72px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 400 16px/1.55 var(--body); font-variant-numeric: tabular-nums; text-wrap: pretty; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid #0B66D6; outline-offset: 2px; }
/* `hidden` must win over the buttons' display (links into the app stay hidden until launch). */
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--24 { width: 24px; height: 24px; }

/* — nav: a solid bar in the page's canvas (no glass) — */
.nav { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 28px; padding: 14px var(--gutter); background: var(--canvas); }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--text); text-decoration: none; }
.brand { flex: none; }
.brand img { display: block; height: 36px; width: auto; flex: none; }  /* the horizontal lockup, small drawing (design/brand) */
.nav__links { display: flex; gap: 24px; font-size: 15px; font-weight: 500; }
.nav__links a { color: var(--text-2); text-decoration: none; }
.nav__links a:hover { color: var(--text); }
@media (max-width: 760px) { .nav__links { display: none; } .nav { gap: 12px; } }
/* On narrow phones the lockup keeps its own proportions; the language menu and the map button wrap below it (a two-row bar, so it scrolls away rather than sticking) instead of squeezing it. */
@media (max-width: 520px) { .nav { position: static; flex-wrap: wrap; row-gap: 8px; } .nav .btn--sm { flex: 1 1 100%; justify-content: center; } }
/* The language menu stays at every width (the section links above hide on phones). It is a popover: the browser
   gives it Escape, a click outside and focus return without any script (the pages allow none). Where popovers are
   not supported, the list shows as plain links under the button row. */
.lang-menu { position: relative; }
.lang-menu__button { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 16px; border: 0; border-radius: var(--radius-button); background: transparent; box-shadow: inset 0 0 0 1.5px var(--border); color: var(--text-2); font: 500 14px/1 var(--body); cursor: pointer; }
.lang-menu__button:hover, .lang-menu__button:has(+ :popover-open) { color: var(--text); background: var(--hover); }
.lang-menu__button .icon { width: 16px; height: 16px; transition: transform .15s; }
.lang-menu__button:has(+ :popover-open) .icon { transform: rotate(180deg); }
.lang-menu__list { position: fixed; inset: 62px var(--gutter) auto auto; min-width: 176px; margin: 0; padding: 6px; list-style: none; border: 0; border-radius: var(--radius-card); background: var(--raised); box-shadow: 0 12px 32px rgba(16,40,24,.16); }
.lang-menu__list a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-button); color: var(--text); font-size: 15px; font-weight: 500; text-decoration: none; }
.lang-menu__list a:hover { background: var(--pressed); }
@supports not selector(:popover-open) { .lang-menu__list { position: static; display: flex; gap: 4px; padding: 0; box-shadow: none; background: none; } .lang-menu__button { display: none; } }
@media (prefers-reduced-motion: reduce) { .lang-menu__button .icon { transition: none; } }

/* — buttons: pills with no outline. Primary: the spruce-ink fill, light text 600 (the app's button). — */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: var(--radius-button); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn--primary { background: var(--action); color: var(--on-action); }
.btn--primary:hover { background: var(--action-hover); color: var(--on-action); }
.btn--primary:active { background: var(--action-pressed); }
/* The secondary button keeps a 1.5 px line, so it still reads as a button (as .btn-secondary in the app). */
.btn--outline { box-shadow: inset 0 0 0 1.5px var(--ring-swatch); color: var(--text); }
.btn--outline:hover { background: var(--hover); color: var(--text); }
.btn--outline:active { background: var(--pressed); }
.btn--soon { box-shadow: inset 0 0 0 1.5px var(--border); color: var(--muted); cursor: default; }
.btn--soon small { font-weight: 500; font-size: 13px; }
/* Our own neutral store button (#177): the shape of Google's badge beside it, no store's mark or colours. */
.store-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 6px 20px 6px 16px; border-radius: 8px; background: var(--text); color: var(--canvas); cursor: default; white-space: nowrap; }
.store-badge .icon { width: 26px; height: 26px; }
.store-badge__text { display: grid; font-size: 18px; font-weight: 600; line-height: 1.15; }
.store-badge__text small { font-size: 12px; font-weight: 500; opacity: .8; }
a.store-badge { cursor: pointer; text-decoration: none; }
a.store-badge:hover { background: var(--action-hover); color: var(--canvas); }
.play-badge { display: inline-flex; margin: 14px 1px; line-height: 0; }  /* Google's badge: unaltered, 54px tall, clear space of a quarter of its height */
.play-badge img { display: block; height: 54px; width: auto; }
.store-badge--soon { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--ring-swatch); }
/* The button on the dark ground: the app's dark-theme primary, a pale fill with spruce-black text. */
.btn--light { justify-content: center; background: var(--night-action); color: var(--night-on-action); }
.btn--light:hover { background: var(--night-action-hover); color: var(--night-on-action); }
.btn--light:active { background: var(--night-action-pressed); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* — layout — */
main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
section { padding-bottom: 112px; }
.kicker { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
h2 { font-family: var(--heading); font-weight: 600; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }

/* — hero: one dark spruce panel with the sky top of the app's sheet. The campaign line as the headline, the question
   beneath it as the h1, contour lines behind the phone, and a sample score card from the app over its screen. — */
.hero { container: hero / inline-size; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: center; margin: 8px 0 112px; padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px) clamp(48px, 6vw, 80px); border-radius: var(--radius-sheet); background: linear-gradient(180deg, var(--night-sky) 0, var(--night) 420px); color: var(--night-text); }
/* The map's contours where the hero has no words, in the dark map's fern. In one column: around the phone and in the
   gap above it (the bottom 700 px are always the phone's: its 663 px, the padding and the 56 px gap). In two columns
   (from 896 px inside the panel, where the grid splits): the phone's column. The two mask layers intersect. */
.hero::before { --fade: linear-gradient(to top, #000 600px, transparent 690px); content: ''; position: absolute; inset: 0; z-index: -1; background: var(--night-contour-line); -webkit-mask: url(contours.svg) no-repeat right -140px bottom -160px / 1196px 915px, var(--fade); -webkit-mask-composite: source-in; mask: url(contours.svg) no-repeat right -140px bottom -160px / 1196px 915px, var(--fade); mask-composite: intersect; }
@container hero (min-width: 896px) { .hero::before { --fade: linear-gradient(to right, transparent 49%, #000 62%); } }
/* Without container queries the fade can't follow the columns, so the hero goes without its lines. */
@supports not (container-type: inline-size) { .hero::before { display: none; } }
/* On phones the panel runs almost to the screen's edges, so the phone keeps its full width inside it. */
@media (max-width: 520px) { .hero { margin-inline: calc(8px - var(--gutter)); border-radius: 28px; padding-inline: 20px; } }
.hero__copy { display: flex; flex-direction: column; gap: 28px; max-width: 560px; }
.hero__title { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.hero__line { font-family: var(--heading); font-weight: 600; font-size: clamp(56px, 7.6vw, 100px); line-height: .95; letter-spacing: -.04em; color: var(--night-text); }
.hero h1 { font-family: var(--heading); font-weight: 500; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.2; letter-spacing: -.015em; color: var(--night-muted); }
.lead { font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 50ch; }
.hero .lead { color: var(--night-text-2); }
.phone { position: relative; justify-self: center; width: 306px; }
.phone__frame { width: 306px; height: 663px; border-radius: 42px; overflow: hidden; box-shadow: 0 0 0 9px var(--night-line), var(--night-shadow); background: var(--night); }
.phone__frame picture { display: contents; }  /* AVIF with hero.jpg as the fallback (scripts/hero-images.py) */
.phone__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* The sample score, as the app's one score card shows it (dark theme): the numeral in Figtree 300 on the left; the band
   (a dot in its activity colour and the band name), "Confidence: {level}" with its three steps and the trend on the
   right; the 0-100 bar beneath, stepped at the bands' limits (0, 25, 45, 60, 75, 90), with a marker at the score. */
.score-card { position: absolute; left: max(-96px, calc(173px - 50vw)); bottom: 64px; width: 284px; padding: 16px 18px 20px; border-radius: var(--radius-tile-lg); background: var(--night-tile); color: var(--night-text); box-shadow: inset 0 1px 0 rgba(214,240,214,.08), var(--night-shadow); display: flex; flex-direction: column; gap: 4px; }
/* Between the phone layout and two columns the panel has no negative margins: keep the card 8 px inside it. */
@media (min-width: 521px) { .score-card { left: max(-96px, calc(161px - 45vw)); } }
.score-card__tag { align-self: flex-start; padding: 3px 9px; border-radius: var(--radius-tag); background: rgba(238,244,238,.08); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--night-muted); }
.score-card__name { margin-top: 6px; font-family: var(--heading); font-weight: 600; font-size: 24px; line-height: 1.05; letter-spacing: -.02em; }
.score-card__context { font-size: 13px; color: var(--night-muted); font-weight: 500; }
.score-card__score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 8px; }
.score-card__score b { font-family: var(--heading); font-size: 64px; font-weight: 300; letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums; }
.score-card__side { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* The band as a short status label (upper case, as the app's card); the dot carries the band's activity colour. */
.score-card__band { display: flex; align-items: center; gap: 6px; color: var(--night-text-2); font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; }
.score-card__band::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #BC5A29; }
.score-card__conf { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; font-size: 12px; line-height: 1.45; font-weight: 500; color: var(--night-muted); }
.score-card__conf strong { font-weight: 600; color: var(--night-text); }
/* The three confidence steps: filled in fern up to the level; an empty step is a fern-grey ring (3:1 on the tile). */
.steps { display: inline-flex; gap: 3px; }
.steps i { width: 13px; height: 4px; border-radius: var(--radius-tag); box-shadow: inset 0 0 0 1px var(--night-muted); }
.steps i:nth-child(-n + 2) { background: var(--night-accent); box-shadow: none; }  /* Medium: two of three */
.score-card__trend { font-size: 12px; font-weight: 500; color: var(--night-text-2); }
.score-card__bar { position: relative; height: 5px; margin-top: 14px; border-radius: var(--radius-tag); background: linear-gradient(90deg, #E8E3C9 0 calc(25% - 1px), transparent 0 calc(25% + 1px), #D4D5A7 0 calc(45% - 1px), transparent 0 calc(45% + 1px), #DBB563 0 calc(60% - 1px), transparent 0 calc(60% + 1px), #D68635 0 calc(75% - 1px), transparent 0 calc(75% + 1px), #BC5A29 0 calc(90% - 1px), transparent 0 calc(90% + 1px), #913727 0); }
.score-card__bar::after { content: ''; position: absolute; top: 50%; left: 76%; width: 12px; height: 12px; border-radius: 50%; background: var(--night-text); box-shadow: 0 0 0 2px var(--night-tile); transform: translate(-50%, -50%); }

/* — the sections below the hero (owner's choices 2026-10-31: direction B, three phones). They follow the hero's lead:
   real app screens in its phone frame, the score card's scale and confidence drawn at size, headings at the hero's
   scale. The reliability and closing sections sit on .panel--sheet, the light theme's sheet with its sky top and the
   contour motif; the hero and the paid plan stay the only dark grounds. — */
.section-head { display: flex; flex-direction: column; gap: 20px; max-width: 780px; }
.section-head h2 { max-width: 18ch; }
.section-head p { font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 52ch; }

.panel { position: relative; isolation: isolate; overflow: hidden; margin-bottom: 112px; padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px); border-radius: var(--radius-sheet); }
/* The light theme's sheet: its sky top (#D3E5CF) fading into the sheet's fill (#F4F8F3) over 300 px, contours in fern. */
.panel--sheet { background: linear-gradient(180deg, #D3E5CF 0, #F4F8F3 300px); }
/* The map's contours in the top right corner, behind the heading's end, fading out before the paragraph beneath it
   (a fixed size, since the panels are of very different heights); a smaller corner where the text takes the width. */
.panel--sheet::before { --fade: radial-gradient(720px 420px at 100% 0, #000 25%, transparent); content: ''; position: absolute; inset: 0; z-index: -1; background: var(--contour); -webkit-mask: url(contours.svg) no-repeat right -100px top -40px / 1196px 915px, var(--fade); -webkit-mask-composite: source-in; mask: url(contours.svg) no-repeat right -100px top -40px / 1196px 915px, var(--fade); mask-composite: intersect; }
@media (max-width: 1180px) { .panel--sheet::before { --fade: radial-gradient(420px 230px at 100% 0, #000 25%, transparent); } }
@media (max-width: 520px) { .panel { margin-inline: calc(8px - var(--gutter)); border-radius: 28px; padding-inline: 20px; } }

/* A label for anything that shows sample data, as the hero's score card has. */
.tag { align-self: flex-start; padding: 3px 9px; border-radius: var(--radius-tag); background: var(--raised); box-shadow: inset 0 0 0 1px var(--border); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* — before you head out: three phones in the hero's frame, each a real screen of the app in the dark theme (screens/,
   one set per language: scripts/landing-screens.mjs, then hero-images.py --screens), the step beneath. On phones and
   tablets the row scrolls sideways, one phone and its step at a time, the next one peeking in. — */
.how { display: flex; flex-direction: column; gap: 48px; }
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin: 0; padding: 0; list-style: none; }
.phones li { position: relative; display: flex; flex-direction: column; gap: 28px; padding-top: 38px; }
.phones .tag { position: absolute; top: 0; left: 0; }
.phone-sm { width: 100%; max-width: 290px; aspect-ratio: 375 / 812; border-radius: 36px; overflow: hidden; background: var(--night); box-shadow: 0 0 0 7px var(--night-line), 0 24px 56px rgba(16,40,24,.24); }
.phone-sm picture { display: contents; }
.phone-sm img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.step { display: flex; flex-direction: column; gap: 10px; }
.step h3 { display: flex; align-items: baseline; gap: 12px; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.step__n { flex: none; color: var(--accent); font-size: 15px; font-weight: 600; }
.step p { font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 44ch; }
@media (max-width: 860px) {
  .phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(0px - var(--gutter)); padding: 0 var(--gutter) 48px; scrollbar-width: thin; scrollbar-color: var(--ring-swatch) transparent; }
  .phones:focus-visible { outline-offset: -2px; }
  .phones li { scroll-snap-align: start; }
  .phone-sm { width: calc(100% - 14px); max-width: 250px; margin-left: 7px; }
}
/* A finger swipes the row; a mouse keeps a thin scrollbar, its only way across. */
@media (max-width: 860px) and (pointer: coarse) {
  .phones { scrollbar-width: none; }
  .phones::-webkit-scrollbar { display: none; }
}

/* The restricted hatch, as the map draws a protected area (violet, never a heat colour). */
.hatch { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px; background: repeating-linear-gradient(135deg, #554DA0 0 2px, rgba(85,77,160,.18) 2px 6px); box-shadow: inset 0 0 0 1.5px #554DA0; }

/* — how reliable: the score's scale and its confidence, drawn large from the hero's card, then what stands behind them — */
.forecast { display: flex; flex-direction: column; gap: 56px; }
.reading { display: flex; flex-direction: column; gap: 56px; }
.reading h3, .facts h3 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; }
.reading p, .facts p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
/* The scale takes the panel's full width (its narrowest band still holds "Außergewöhnlich"); it stands upright when
   the panel is narrower than that needs. */
.scale { display: flex; flex-direction: column; gap: 18px; container-type: inline-size; }
/* The confidence levels beside their heading and text; stacked on phones. */
.trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "title levels" "text levels"; gap: 12px 56px; align-items: start; }
.trust h3 { grid-area: title; }
.trust .levels { grid-area: levels; margin: 0; }
.trust p { grid-area: text; }
@media (max-width: 860px) { .trust { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "title" "levels" "text"; gap: 18px; } }
/* The 0-100 bar of the score card, at size: each band as wide as its range (25, 20, 15, 15, 15, 10), a 3 px gap at each
   limit, the band's name and range beneath (the last one's at the bar's end). Upright, each band is at least as tall as
   its range (3.6 px a point) and grows with larger text. */
.meter { display: grid; grid-template-columns: 25fr 20fr 15fr 15fr 15fr 10fr; column-gap: 3px; margin: 6px 0 2px; padding: 0; list-style: none; }
.meter li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.meter i { height: 14px; margin-bottom: 10px; background: var(--c); box-shadow: inset 0 0 0 1px var(--ring-swatch); }
.meter li:first-child i { border-radius: var(--radius-tag) 0 0 var(--radius-tag); }
.meter li:last-child i { border-radius: 0 var(--radius-tag) var(--radius-tag) 0; }
.meter b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.meter span { font-size: 13px; font-weight: 500; color: var(--muted); }
.meter li:last-child { align-items: flex-end; text-align: end; }
.meter li:last-child i { align-self: stretch; }
.meter li:nth-child(1) { --c: #E8E3C9; } .meter li:nth-child(2) { --c: #D4D5A7; } .meter li:nth-child(3) { --c: #DBB563; }
.meter li:nth-child(4) { --c: #D68635; } .meter li:nth-child(5) { --c: #BC5A29; } .meter li:nth-child(6) { --c: #913727; }
@container (max-width: 740px) {
  .meter { max-width: 440px; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-rows: minmax(90px, auto) minmax(72px, auto) minmax(54px, auto) minmax(54px, auto) minmax(54px, auto) minmax(36px, auto); column-gap: 16px; row-gap: 3px; }
  .meter li { display: contents; }
  .meter i { grid-column: 1; grid-row: var(--r); height: auto; margin: 0; }
  .meter li:first-child i { border-radius: var(--radius-tag) var(--radius-tag) 0 0; }
  .meter li:last-child i { border-radius: 0 0 var(--radius-tag) var(--radius-tag); }
  .meter b, .meter span { grid-column: 2; grid-row: var(--r); align-self: center; }
  .meter span { grid-column: 3; text-align: end; }
  .meter li:last-child b { text-align: start; }
  .meter li:nth-child(1) { --r: 1; } .meter li:nth-child(2) { --r: 2; } .meter li:nth-child(3) { --r: 3; }
  .meter li:nth-child(4) { --r: 4; } .meter li:nth-child(5) { --r: 5; } .meter li:nth-child(6) { --r: 6; }
}
/* The three confidence levels with the card's steps: one, two or three filled in the accent. */
.levels { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 2px; padding: 0; list-style: none; }
.levels li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 0 18px; border-radius: var(--radius-card); background: var(--raised); font-size: 16px; font-weight: 600; }
.levels li:first-child { border-radius: var(--radius-card) var(--radius-card) 6px 6px; }
.levels li:last-child { border-radius: 6px 6px var(--radius-card) var(--radius-card); }
.levels li:not(:first-child):not(:last-child) { border-radius: 6px; }
.levels .steps { gap: 4px; }
.levels .steps i { width: 22px; height: 6px; background: none; box-shadow: inset 0 0 0 1px var(--muted); }
.levels li:nth-child(1) .steps i:nth-child(-n + 1), .levels li:nth-child(2) .steps i:nth-child(-n + 2), .levels li:nth-child(3) .steps i { background: var(--accent); box-shadow: none; }
/* What stands behind the score: each fact under the piece of the app that shows it. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px 40px; margin: 0; padding: 32px 0 0; list-style: none; border-top: 1px solid var(--border); }
.facts li { display: flex; flex-direction: column; gap: 10px; }
.facts h3 { margin-top: 8px; }
.marker { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 32px; padding: 0 14px 0 12px; border-radius: var(--radius-tag); background: var(--raised); font-size: 13px; font-weight: 600; color: var(--text-2); }
.marker .icon { width: 16px; height: 16px; color: var(--accent); }
.marker .hatch { width: 16px; height: 16px; margin: 0; border-radius: 50%; }

/* — pass — */
.pass { display: flex; flex-direction: column; gap: 48px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; max-width: 960px; }
.plan { display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: var(--radius-tile-lg); background: var(--raised); box-shadow: 0 1px 0 rgba(16,40,24,.04), 0 14px 36px rgba(16,40,24,.09); }
.plan li .icon { color: var(--accent); }
.plan--paid { background: linear-gradient(180deg, var(--night-sky) 0, var(--night) 300px); color: var(--night-text); box-shadow: var(--night-shadow); }
.plan--paid .kicker { color: var(--night-accent); }
.plan--paid li .icon { color: var(--night-accent); }
.plan__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan__price b { font-family: var(--heading); font-weight: 600; font-size: 56px; line-height: 1; letter-spacing: -.03em; }
/* A narrow no-break space (U+202F) between number and sign where the language puts the sign after it. */
.plan__price b span { font-variant-numeric: tabular-nums; }
.plan__price > span { font-size: 15px; color: var(--muted); }
.plan__note { font-size: 15px; line-height: 1.5; color: var(--muted); }
.plan--paid .plan__price > span, .plan--paid .plan__note { color: var(--night-muted); }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.45; }
.plan li { display: flex; gap: 10px; }
.plan li .icon { margin-top: 1px; }
.plan--paid .btn { margin-top: auto; }

/* — get: the page closes as it opens — */
.get { display: flex; flex-direction: column; gap: 24px; margin-bottom: 72px; }
.get h2 { font-size: clamp(40px, 6vw, 84px); line-height: 1; letter-spacing: -.04em; max-width: 14ch; }
.get p { font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 48ch; }
.get .get__web { font-size: 15px; }
.get__web a { font-weight: 500; }

/* — footer — */
footer { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter) 48px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; font-size: 14px; color: var(--muted); }
footer .made { display: flex; align-items: center; gap: 8px; margin-right: auto; }
footer .made img { height: 16px; width: auto; }  /* the tiny mark */
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }
footer .trademark { flex-basis: 100%; font-size: 13px; }

/* — legal pages (landing/zasebnost.html, landing/en/privacy.html, landing/pogoji.html, landing/en/terms.html,
   landing/izbris-racuna.html, landing/en/delete-account.html: built from docs/privacy-notice.md,
   docs/terms-of-service.md and docs/account-deletion.md by app/scripts/privacy-pages.mjs) and the search pages at /gobe
   (app/scripts/seo/render.mjs). Plain reading text in the page's own type and colours. — */
.legal { max-width: 74ch; padding: 48px 0 96px; display: flex; flex-direction: column; gap: 14px; }
.legal h1 { font-family: var(--heading); font-weight: 600; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -.025em; margin-bottom: 4px; }
.legal h2 { margin-top: 28px; font-size: clamp(26px, 3vw, 32px); line-height: 1.08; letter-spacing: -.025em; }
.legal h3 { margin-top: 10px; font-size: 18px; line-height: 1.35; font-weight: 600; }
.legal p, .legal li { color: var(--text-2); line-height: 1.6; }
.legal strong { color: var(--text); font-weight: 600; }
.legal ul, .legal ol { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: 6px; }
.legal ol { padding-left: 1.5em; }
.legal ol li::marker { font-weight: 600; color: var(--text); }
.legal code { font-size: .95em; overflow-wrap: anywhere; }
.legal__table { overflow-x: auto; }
.legal table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.legal th, .legal td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.legal th { font-weight: 600; }
.legal td { color: var(--text-2); }