/* Shared stylesheet for the model pages (/magnitola/<make>-<model>/).
 *
 * The home page keeps its CSS inline on purpose: it is published as an artifact under a
 * strict CSP and has to render with zero external requests. Model pages are the opposite
 * case — there are 253 of them, generated in bulk, so an inline copy would repeat the
 * same bytes 253 times. They link this file once and take it from cache afterwards.
 *
 * Design language is carried over from the home page (monochrome, zero radius, light
 * display type, mono reserved for numbers, dark grounding footer). What is NOT carried
 * over: hero, car picker, quote console, device sheet and the brand grid — those exist
 * only on the home page, and rules for markup that never appears here would be dead
 * weight in a file every page downloads.
 */

:root {
  --canvas: #ffffff;
  --frost: #f4f4f3;
  --ink: #262626;
  --ink-2: #6e6e6b;
  --ink-3: #9a9a97;
  --line: #e2e2df;
  --console: #1c1c1b;
  --console-ink: #edece8;
  --console-line: #33322f;
  --accent: #b8391a;
  --accent-ink: #ffffff;
  /* Backdrop a device photo sits on. Catalogue shots come cut out on white, so on the
     light theme the plate is white too and the picture simply floats. On dark a white
     slab is a lamp in the middle of the page: the plate drops to a warm light grey and
     the picture is dimmed a notch, which takes the glare off without recolouring the
     product. */
  --plate: #ffffff;
  --plate-dim: none;
  /* Built-in CSS easings are too weak to read as intentional. These are the standard
     stronger variants: out for anything entering or responding to a press. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #131312;
    --frost: #1c1c1b;
    --ink: #ecebe7;
    --ink-2: #a3a29d;
    --ink-3: #76756f;
    --line: #2e2e2b;
    --console: #0c0c0b;
    --console-ink: #ecebe7;
    --console-line: #2a2a27;
    --accent: #e2653f;
    --accent-ink: #131312;
    --plate: #dcdad4;
    --plate-dim: brightness(.9) saturate(.94);
  }
}
:root[data-theme="light"] {
  --canvas: #ffffff; --frost: #f4f4f3; --ink: #262626; --ink-2: #6e6e6b;
  --ink-3: #9a9a97; --line: #e2e2df; --console: #1c1c1b; --console-ink: #edece8;
  --console-line: #33322f; --accent: #b8391a; --accent-ink: #ffffff;
  --plate: #ffffff; --plate-dim: none;
}
:root[data-theme="dark"] {
  --canvas: #131312; --frost: #1c1c1b; --ink: #ecebe7; --ink-2: #a3a29d;
  --ink-3: #76756f; --line: #2e2e2b; --console: #0c0c0b; --console-ink: #ecebe7;
  --console-line: #2a2a27; --accent: #e2653f; --accent-ink: #131312;
  --plate: #dcdad4; --plate-dim: brightness(.9) saturate(.94);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
/* The generator marks every secondary line with .dim — caveats under a card, the price
   date, the form status. On the home page this colour only existed inside the footer. */
.dim { color: var(--ink-3); }

a { color: var(--ink); }

/* ── header ────────────────────────────────────────────────────────── */
/* No hero here, so the logo sits on the canvas and cannot be white like on the home
   page — its colour follows the theme. */
.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 16px; padding-bottom: 16px;
}
.brand {
  font-size: 17px; font-weight: 700; letter-spacing: .01em;
  color: var(--ink); text-decoration: none;
}
.brand span { color: var(--ink-3); font-weight: 400; }
.head-tel { font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ── page frame ────────────────────────────────────────────────────── */
main { padding-bottom: 24px; }
main > section { padding: 44px 0 0; }

h1 {
  margin: 18px 0 8px; font-weight: 300; letter-spacing: -.025em;
  font-size: clamp(27px, 4vw, 42px); line-height: 1.14; text-wrap: balance;
  max-width: 22ch;
}
h2 {
  margin: 0 0 18px; font-weight: 300; letter-spacing: -.02em;
  font-size: clamp(21px, 2.6vw, 28px); line-height: 1.2;
}

.crumbs {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px;
  margin: 20px 0 0; padding: 0; font-size: 12.5px; color: var(--ink-3);
}
.crumbs li + li::before { content: "/ "; color: var(--line); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* ── generations ───────────────────────────────────────────────────── */
/* Tabs are built by car.js, not by the generator: without JS every generation stays
   visible, which is a longer page but never an empty one. */
/* max-content, not full width: the 1px gaps are the container's background showing
   through, and stretched to the whole row the leftover turns into a grey band that
   reads as an unfinished element. */
.gen-tabs {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  width: max-content; max-width: 100%;
  margin: 26px 0 0;
}
.gen-tab {
  background: var(--canvas); color: var(--ink-2); border: 0;
  padding: 11px 18px; font: inherit; font-size: 14px; cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .gen-tab:hover { background: var(--frost); color: var(--ink); }
}
.gen-tab[aria-selected="true"] {
  color: var(--ink); font-weight: 600;
  box-shadow: inset 0 2px 0 var(--accent);
}
.gen-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.gen { padding: 26px 0 0; }
.gen[hidden] { display: none; }
.gen h2 { margin: 0 0 14px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }

.tiers {
  display: grid; gap: 1px; background: var(--line);
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  border: 1px solid var(--line);
}
.tier {
  background: var(--canvas); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
/* The recommended card is marked with a rule, not with a filled background: a grey slab
   reads as "disabled", an accent edge reads as "this one". */
.tier.is-default { box-shadow: inset 0 2px 0 var(--accent); }
.tier h3 {
  margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3);
}
.tier.is-default h3 { color: var(--accent); }
/* Device photo. Every file is 360 px wide but 96 to 554 px tall, so the card fixes a
   4:3 frame and lets the picture letterbox inside it — sizing cards to the tallest photo
   would give a row nobody can compare. width/height on the tag carry the same ratio, so
   the space is reserved before the file lands and the price never jumps under the
   cursor. 12% of cards have no photo and get no frame at all: an empty grey rectangle
   reads as a failed download, and the prices stay aligned regardless because the name
   below takes up the slack. */
/* max-width is the source width, not a design choice: a model with one card gets a
   full-row column, and without the cap the frame stretched to 1130 px and upscaled a
   360 px file into a soft banner that dwarfed the price it was there to explain. */
.tier .photo {
  display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 4 / 3;
  object-fit: contain; background: var(--plate); filter: var(--plate-dim);
  margin: 2px 0;
}

/* The title takes the slack so the three prices sit on one line across the row.
   Device names run from 30 to 110 characters, and without this the sums stepped
   down the row like a staircase — the eye compared heights instead of prices. */
.tier .device { margin: 0; font-size: 15px; line-height: 1.4; flex: 1; }
.tier .total { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.tier .total b {
  display: block; font-size: 25px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
/* What the sum is made of. This is the whole promise of the site — the device price and
   the labour, side by side, before anyone picks up the phone. */
.breakdown {
  margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px;
  font-size: 13.5px;
}
.breakdown dt { color: var(--ink-2); }
.breakdown dd {
  margin: 0; text-align: right; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.tier .dim { font-size: 12.5px; margin: 4px 0 0; }

/* Price older than three days. The generator drops the figures from a stale generation;
   a fresh one carries this line hidden, and car.js marks the section stale if the page
   outlives its prices because no refresh has run since. */
.on-request { display: none; margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.on-request a { color: var(--accent); font-weight: 600; text-decoration: none; }
.gen.is-stale .on-request { display: block; }
.gen.is-stale .total,
.gen.is-stale .breakdown,
.gen.is-stale .amp-extra { display: none; }

/* ── price date and phone ──────────────────────────────────────────── */
.price-date {
  margin: 22px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.price-date a { color: var(--accent); font-weight: 600; text-decoration: none; }
.price-date a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── facts and address ─────────────────────────────────────────────── */
#facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
            max-width: 68ch; }
#facts li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 15px; }
#facts li::before { content: "-"; position: absolute; left: 0; color: var(--accent); }
#guide p { margin: 0 0 12px; max-width: 68ch; color: var(--ink-2); font-size: 15px; }
#where p { margin: 0 0 6px; color: var(--ink-2); font-size: 15px; }

/* ── lead form ─────────────────────────────────────────────────────── */
#lead { background: var(--frost); margin-top: 44px; padding: 34px 24px;
        margin-left: -24px; margin-right: -24px; }
@media (min-width: 1229px) { #lead { margin-left: 0; margin-right: 0; padding: 34px; } }
#lead-form { display: grid; gap: 12px; max-width: 420px; }
#lead-form input {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 0;
  background: var(--canvas); color: var(--ink); font: inherit; font-size: 15px;
}
#lead-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
/* Honeypot: hidden from people, filled by scripts. Not display:none — some bots skip
   those; this is off-screen but still fillable. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#lead-form button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 13px 26px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-size: 15px; font-weight: 600;
  transition: filter 160ms var(--ease-out), transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  #lead-form button:hover { filter: brightness(1.08); }
}
#lead-form button:active { transform: scale(0.97); }
#lead-form button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
#lead-form button:disabled { cursor: default; filter: none; opacity: .75; }
#lead-form p { margin: 0; font-size: 12.5px; line-height: 1.5; }
/* Status line only exists once there is something to say. */
#lead-msg:empty { display: none; }
#lead-form a { color: var(--ink-2); }

/* ── other models of the same make ─────────────────────────────────── */
.siblings { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line);
            border: 1px solid var(--line); }
.siblings a {
  background: var(--canvas); padding: 10px 15px; font-size: 14.5px;
  color: var(--ink); text-decoration: none; flex: 1 1 auto; min-width: 150px;
}
.siblings a:hover { background: var(--frost); }
.siblings:empty { display: none; }

/* ── footer ────────────────────────────────────────────────────────── */
footer { background: var(--console); color: var(--console-ink); padding: 44px 0 26px;
         margin-top: 56px; }
.foot-grid { display: grid; gap: 26px; grid-template-columns: 1.6fr 1fr 1fr; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase;
                letter-spacing: .13em; color: var(--ink-3); font-weight: 600; }
.foot-grid a { color: var(--console-ink); text-decoration: none; font-size: 14px;
               display: block; margin-bottom: 8px; opacity: .82; }
.foot-grid a:hover { opacity: 1; }
.foot-grid p { margin: 0 0 8px; font-size: 14px; opacity: .82; line-height: 1.5; }
.foot-grid p.dim { color: var(--ink-3); opacity: 1; font-size: 13px; }
.foot-grid .brand { color: var(--console-ink); }
.foot-grid .brand span { color: var(--ink-3); }
.foot-bottom { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--console-line);
               display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
               font-size: 12.5px; color: var(--ink-3); }
.foot-bottom a { color: var(--ink-3); }