/* Cubio — the storefront stylesheet.
   =========================================================================
   Three layers:

     LAYER 1  tokens, type, primitives, chrome — the part mirrored into
              up.cubio.no (server/app/api/web.py) and aip.cubio.no
              (aip-server/app/inspector.py, dedup_page.py), which are
              Python-served and hold their own copy inline.
     LAYER 2  storefront components (tiles, product page, docs, blog, manual).
     LAYER 3  campaign pages (the homepage) — full-bleed imagery, a 12-column
              grid, a typographic index. Prefixed c- throughout.

   Design: strict grid, wide margins, light grotesque, monochrome paper and
   ink, hairline rules instead of cards, small rectangular buttons. One accent,
   a HUD green, used as a marker and never as a fill or a surface.

   The token names of the previous system (--accent, --surface, --border,
   --radius, --shadow …) are kept as aliases onto the new ones. That is why the
   swap of this file needed no page edits, and why anything still naming them
   keeps working.

   Every page must load Inter; the sheet asks for it and the fallback is a
   system UI stack that is not a light grotesque.
   ========================================================================= */

/* ============================== LAYER 1 ================================== */

/* CUBIO TOKENS BEGIN — generated, do not edit here */
:root {
  --paper:      #EFEFED;
  --paper-2:    #E5E5E2;   /* recessed: image beds, table heads, code, panels */
  --ink:        #101010;
  --ink-2:      #6E6E6A;   /* body copy */
  --ink-3:      #9A9A95;   /* labels, captions, metadata */
  --line:       #D2D2CD;
  --line-2:     #101010;   /* a rule meant to be read as a division */
  --hud:        #1FA463;   /* on paper: dark enough to pass on body text */
  --hud-bright: #2FE08A;   /* on ink: the marker green from the hero */
  --sink:       rgba(0, 0, 0, .04);   /* a hover that is felt, not seen */

  /* The action pair. A filled control takes INK, never the accent: the HUD
     green on paper is #1FA463, and paper-coloured text on it measures about
     2.8:1 -- fine behind a 6px marker, nowhere near enough for a label. Ink on
     paper is 16.5:1 and inverts by itself below. Every site's primary button
     reads these two rather than naming a colour, so the decision lives once. */
  --action-bg:  var(--ink);
  --action-ink: var(--paper);

  --radius: 0px;
  --shadow: none;
  --shadow-lg: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #0E0E0D;
    --paper-2: #17171A;
    --ink:     #F2F2EF;
    --ink-2:   #A9A9A3;
    --ink-3:   #787873;
    --line:    #2A2A28;
    --line-2:  #F2F2EF;
    --hud:     var(--hud-bright);
    --sink:    rgba(255, 255, 255, .04);
  }
}
/* CUBIO TOKENS END */

:root {
  /* Kept as aliases so any page or script still naming the old tokens keeps
     working. They are the reason a swap of this file cannot white-out a page. */
  --ink-soft:      var(--ink-2);
  --muted:         var(--ink-3);
  --surface:       transparent;
  --surface-2:     var(--paper-2);
  --surface-glass: transparent;
  --border:        var(--line);
  --accent:        var(--hud);
  --accent-2:      var(--hud);
  --accent-ink:    var(--paper);
  --sun:           var(--ink-2);
  --glow:          transparent;
  --radius: 0px;
  --shadow: none;
  --shadow-lg: none;

  --gutter: 24px;
  /* The page gutter. Wider than it looks like it needs to be, because the
     cards in this system have no padding of their own: the previous sheet
     inset its text a further 26px inside a panel, so a 20px gutter put copy
     46px from the edge. Here the gutter IS the inset, and it has to carry
     both. 32px is the floor on a phone. */
  --margin: clamp(32px, 7vw, 140px);
  --measure: 62ch;
}

/* The dark scheme is in the shared block above. Only the storefront's own
   alias needs restating, because it is not a shared token. */
@media (prefers-color-scheme: dark) {
  :root { --accent-ink: var(--paper); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* Prose links keep an underline — in a monochrome page colour cannot carry a
   link on its own, so the rule is what says it is one. */
p a, li a, .legal a, .doc-app a, .blog-article a, dd a {
  border-bottom: 1px solid var(--line); padding-bottom: 1px;
}
p a:hover, li a:hover, .legal a:hover, .doc-app a:hover, .blog-article a:hover {
  border-bottom-color: var(--ink);
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--margin); }
.narrow { max-width: 760px; }

/* Type -------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 300; letter-spacing: -0.03em; line-height: 1.06; margin: 0; }
h3, h4 { font-weight: 400; letter-spacing: -0.015em; }

.kicker, .hero .eyebrow, .label {
  display: block;
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 14px;
  padding: 0; border: 0; background: none; backdrop-filter: none;
}
.kicker::before, .hero .eyebrow::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  background: var(--hud); margin-right: 9px; vertical-align: 1px;
}

.section { padding: clamp(56px, 9vh, 120px) 0 0; }
.section-head { margin: 0 0 44px; }
.section-head h1, .section-head h2 { font-size: clamp(26px, 3.6vw, 46px); margin: 0 0 14px; }
.section-head p { color: var(--ink-2); margin: 0; max-width: 52ch; }

.note { font-size: 14px; color: var(--ink-3); }
.note strong { color: var(--ink); font-weight: 400; }
.status { color: var(--ink-3); font-size: 14px; }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0;
  padding: 13px 22px;
  font: inherit; font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; box-shadow: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--action-bg); color: var(--action-ink); filter: none; }
.btn:active { transform: none; }
.btn:focus-visible { outline: 2px solid var(--hud); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.btn.ghost { border-color: var(--line); color: var(--ink-2); }
.btn.ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* Chrome ------------------------------------------------------------------ */
header.site {
  display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap;
  padding: 26px 0; margin-bottom: 8px;
}
.logo {
  display: inline-flex; align-items: center;
  font-size: 15px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink);
}
/* No mark beside the wordmark: the letterforms are the identity here, and a
   rounded gradient tile beside them is the previous system talking. */
.logo::before { content: none; }
.logo .dot { color: var(--hud); }

.site-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.nav-link {
  padding: 8px 14px; font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.nav-link:hover { color: var(--ink); }

/* The language picker. One <select>, in two very different navs: the header on
   paper, and the campaign bar over a photograph. It takes `color: inherit` and
   loses every piece of form chrome, so it reads as one more word of the nav in
   both places and neither needs a second rule for the type. The caret is drawn
   in a fixed mid grey rather than in currentColor -- a background image cannot
   inherit the colour -- and that one grey is legible on paper and on the dark
   wash alike.

   The options are given an explicit colour and background because they are NOT
   painted by these rules: the open list is the platform's, and on a nav that
   sets white type it would otherwise inherit white onto white. */
.nav-lang {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: transparent; border: 0; border-radius: 0;
  color: inherit; font: inherit;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 20px 8px 8px; margin: 0; cursor: pointer; line-height: 1.2;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center;
}
.nav-lang:focus-visible { outline: 2px solid var(--hud); outline-offset: 2px; }
.nav-lang option { color: #101010; background: #fff; text-transform: none; letter-spacing: normal; }
.site-nav .nav-lang { color: var(--ink-2); }
.site-nav .nav-lang:hover { color: var(--ink); }

.site-social { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-nav + .site-social { margin-left: 10px; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 0; color: var(--ink-3);
  transition: color .2s ease;
}
.social-link:hover, .social-link:focus-visible { color: var(--ink); background: transparent; }

footer.site {
  color: var(--ink-3); font-size: 13px; padding: 56px 0 48px;
  border-top: 1px solid var(--line); margin-top: clamp(64px, 10vh, 120px);
}
footer.site a { color: var(--ink-3); }
footer.site a:hover { color: var(--ink); }
footer.site .foot-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 18px; }
footer.site .foot-nav a {
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); border: 0;
}
footer.site .foot-id, footer.site .foot-mor, footer.site .foot-copy { margin: 0 0 8px; }
footer.site .foot-mor { max-width: 74ch; }
footer.site .foot-copy { margin-top: 14px; }
footer.site .foot-social { margin: 0 0 16px -8px; }

/* Hero -------------------------------------------------------------------- */
.hero { position: relative; padding: clamp(30px, 6vh, 70px) 0 20px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: end; }
.hero h1 {
  font-size: clamp(38px, 6.6vw, 92px); line-height: 0.99;
  letter-spacing: -0.035em; margin: 0 0 24px; font-weight: 300;
}
/* The old sheet painted this span with a three-stop gradient. Monochrome has
   one way to set a phrase apart, and it is tone. */
.hero h1 .grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink-2); }
.hero .lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); margin: 0 0 30px; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.hero-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 44px 0 0; }
.hero-strip img {
  width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover;
  border: 0; border-radius: 0; box-shadow: none; background: var(--paper-2);
}

/* Generic surfaces -------------------------------------------------------- */
/* A card is no longer a floating panel. It is a block bounded by hairlines,
   which is what carries structure in a system with no shadows. */
.card {
  background: transparent; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none; padding: 26px 0 0;
}

.steps { counter-reset: step; list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 22px; }
.steps li { display: block; }
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; width: auto; height: auto; margin: 0 0 10px;
  background: none; border-radius: 0;
  color: var(--hud); font-size: 11px; font-weight: 500; letter-spacing: .16em;
}

.quote-box {
  margin: 22px 0; padding: 0 0 0 22px;
  border: 0; border-left: 1px solid var(--hud); border-radius: 0;
  background: transparent; color: var(--ink-2);
}
.quote-box p { margin: 0 0 8px; }
.quote-box p:last-child { margin-bottom: 0; }
.quote-box strong { color: var(--ink); font-weight: 400; }

ul.features { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 0; }
ul.features li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 0; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 15px;
}
ul.features li:last-child { border-bottom: 1px solid var(--line); }
ul.features li::before { content: "—"; color: var(--hud); font-weight: 400; flex: 0 0 auto; }

.spinner {
  display: inline-block; width: 12px; height: 12px; margin-right: 8px;
  border: 1px solid var(--line); border-top-color: var(--hud); border-radius: 50%;
  animation: spin .9s linear infinite; vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================== LAYER 2 ================================== */
/* Storefront components. Everything below is shop-only. */

/* Shelves and tiles ------------------------------------------------------- */
.shelf { margin: 0 0 clamp(48px, 7vh, 88px); }
.shelf[hidden] { display: none; }
.shelf-head { margin: 0 0 24px; }
.shelf-head h3 { font-size: clamp(20px, 2.6vw, 28px); margin: 0 0 10px; font-weight: 300; letter-spacing: -0.03em; }
.shelf-head p { color: var(--ink-2); max-width: 52ch; margin: 0; }

.tiles {
  display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin: 0; align-items: stretch;
}
.tile {
  display: flex; flex-direction: column;
  background: var(--paper); border: 0; border-top: 1px solid var(--line-2);
  border-radius: 0; box-shadow: none; overflow: hidden; color: inherit;
  padding: 0 0 26px;
  transition: opacity .3s ease;
}
.tile:hover { transform: none; box-shadow: none; border-color: var(--line-2); }
.tile:hover .tile-more { color: var(--ink); }
.tile:focus-visible { outline: 2px solid var(--hud); outline-offset: 2px; }
.tile-img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--paper-2); margin: 0 0 20px;
}
.tile-body { padding: 0; display: flex; flex-direction: column; flex: 1; }
.tile-head { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; }
.tile-icon { width: 30px; height: 30px; border-radius: 0; flex: 0 0 auto; }
.tile-name { font-size: 21px; letter-spacing: -0.025em; margin: 0; font-weight: 400; }
.tile-summary { font-size: 14.5px; color: var(--ink-2); margin: 0 0 16px; line-height: 1.55; }
.tile-price { font-weight: 300; font-size: 24px; margin: 0 0 16px; letter-spacing: -0.02em; }
.tile-price.free { color: var(--ink); }
.tile-price.store { color: var(--ink-3); font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.tile-features { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 9px; font-size: 13.5px; color: var(--ink-3); }
.tile-features li { display: flex; gap: 10px; align-items: flex-start; }
.tile-features li::before { content: "—"; color: var(--hud); font-weight: 400; }
.tile-more {
  margin-top: auto; color: var(--ink-3);
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  transition: color .2s ease;
}

/* Product detail ---------------------------------------------------------- */
.back { display: inline-block; margin: 6px 0 26px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.back:hover { color: var(--ink); }
.detail { display: flex; flex-direction: column; }
.detail-head { display: flex; align-items: center; gap: 18px; margin: 0 0 18px; flex-wrap: wrap; }
.detail-name { font-size: clamp(34px, 5.6vw, 66px); letter-spacing: -0.04em; margin: 0 0 16px; font-weight: 300; }
.detail-head .detail-name { margin: 0; }
.detail-icon { width: 54px; height: 54px; border-radius: 0; flex: 0 0 auto; box-shadow: none; }
.detail .btn { align-self: flex-start; margin-bottom: 26px; }
.detail-summary { font-size: clamp(18px, 2vw, 22px); color: var(--ink); font-weight: 300; margin: 0 0 20px; max-width: 46ch; line-height: 1.35; letter-spacing: -0.015em; }
.detail-desc { font-size: 16px; color: var(--ink-2); white-space: pre-line; margin: 0 0 8px; max-width: var(--measure); line-height: 1.7; }
/* The gallery was a sideways scroller: flex, overflow-x, scroll-snap. It is a
   captioned grid now (.c-screen-row, shared with the homepage), because most
   of an app's screens sat behind a gesture nobody made. The hero runs full
   width above it -- a wide marketing frame letterboxes in a watch-sized cell. */
.detail-hero { width: 100%; height: auto; margin: 26px 0 8px; background: var(--paper-2); }

/* A product's screens over its stage, one at a time: GlideGlass's over the sky, where the screen sits in the
   hero it was drawn for (left 350, top 40, 565 wide on a 1280 x 720 frame). The sky drifts and banks slowly,
   the HUD glows and crossfades smoothly from screen to screen, and under the mouse the near HUD and the far
   sky move apart a little. */
.c-stage { --mx: 0; --my: 0; position: relative; aspect-ratio: 16 / 9; margin: 26px 0 8px; overflow: hidden;
  background: #1d2b3a; outline: none; touch-action: pan-y; user-select: none; isolation: isolate; }
.c-stage:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
.c-stage-world { position: absolute; inset: -6%;
  translate: calc(var(--mx) * -14px) calc(var(--my) * -8px); transition: translate .6s ease-out;
  animation: c-glide 32s ease-in-out infinite alternate; will-change: transform; }
.c-stage-sky { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes c-glide {
  0%   { transform: scale(1.03) rotate(-1.1deg) translate(-1.4%, .6%); }
  50%  { transform: scale(1.07) rotate(.4deg) translate(.6%, -.4%); }
  100% { transform: scale(1.04) rotate(1.3deg) translate(1.8%, .8%); }
}
.c-stage-tint { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 85% at 50% 42%, transparent 55%, rgba(4, 14, 28, .5) 100%),
    linear-gradient(rgba(6, 20, 40, .42), rgba(6, 20, 40, .18) 55%, rgba(0, 0, 0, .38)); }
.c-stage-hud { position: absolute; inset: 0; pointer-events: none;
  translate: calc(var(--mx) * 8px) calc(var(--my) * 5px);
  transform-origin: 49.41% 25.2%; transition: translate .6s ease-out, transform 1.6s cubic-bezier(.65, 0, .35, 1);
  filter: drop-shadow(0 0 4px rgba(70, 255, 120, .55)); }

/* The glasses' intro. At rest the G2 (62% wide, centred) floats over the sky with the HUD shrunk into its
   right lens, three quarters of its width and a little above the middle of its opening (72.9% x 39.6% of the image). Going on, the glasses grow sixfold about
   that lens and move it to where the HUD sits, so you pass through it, and fade as the frame leaves the view. */
.c-stage-glasses { position: absolute; left: 19%; top: 50%; width: 62%; margin-top: -9.785%; pointer-events: none;
  transform-origin: 72.9% 39.6%; transform: translate(-23.85%, -60.9%) scale(6); opacity: 0;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .45));
  transition: transform 1.6s cubic-bezier(.65, 0, .35, 1), opacity .5s ease 1.05s; }
.c-stage.is-intro .c-stage-glasses { transform: none; opacity: 1; transition: opacity .6s ease; }
.c-stage.is-intro .c-stage-hud { transform: translate(14.79%, 21.2%) scale(.324); }
.c-stage.is-resetting .c-stage-glasses, .c-stage.is-resetting .c-stage-hud { transition: none; }
.c-stage-line, .c-stage-name { transition: opacity .6s ease; }
.c-stage-line { transition-duration: .35s; }
.c-stage-line.is-swapping { opacity: 0; }
.c-stage.is-intro .c-stage-line, .c-stage.is-intro .c-stage-name { opacity: 0; }
.c-stage-again { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, border-color .2s; }
.c-stage-again:hover, .c-stage-again:focus-visible { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .7); outline: none; }
.c-stage-slide { position: absolute; left: 27.34%; top: 5.56%; width: 44.14%; margin: 0;
  opacity: 0; transition: opacity 1.1s ease-in-out; }
.c-stage-slide.is-on { opacity: 1; }
.c-stage-slide img { display: block; width: 100%; height: auto; }
.c-stage-line { position: absolute; left: 4.5%; bottom: 15%; max-width: 60%; margin: 0; white-space: pre-line;
  font-size: clamp(20px, 3.1vw, 38px); font-weight: 300; line-height: 1.12; letter-spacing: -.01em;
  color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.c-stage-name { position: absolute; left: 4.5%; bottom: 7%; margin: 0;
  font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: #7dff9e; text-shadow: 0 0 6px rgba(70, 255, 120, .6); }
.c-stage-dots { position: absolute; right: 10px; bottom: 6px; display: flex; }
.c-stage-dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.c-stage-dots button::before { content: ""; display: block; width: 7px; height: 7px; margin: auto; border-radius: 50%;
  background: rgba(255, 255, 255, .4); transition: background .3s, transform .3s; }
.c-stage-dots button[aria-current="true"]::before { background: #7dff9e; transform: scale(1.25);
  box-shadow: 0 0 6px rgba(70, 255, 120, .7); }
.c-stage-arrow { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-top: -24px; padding: 0; border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, border-color .2s; }
.c-stage-arrow svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.c-stage-arrow:hover, .c-stage-arrow:focus-visible { background: rgba(255, 255, 255, .26);
  border-color: rgba(255, 255, 255, .7); outline: none; }
.c-stage-prev { left: 14px; }
.c-stage-next { right: 14px; }
@media (max-width: 560px) {
  /* On a phone the hero's placement leaves the screen too small to read: most of the width instead, and no
     headline under it. */
  .c-stage-slide { left: 6%; top: 6%; width: 88%; }
  .c-stage-line { display: none; }
  .c-stage-again { display: none; }   /* it would sit on the HUD's top bar; the intro still runs once */
  .c-stage-hud { transform-origin: 50% 45.1%; }
  .c-stage.is-intro .c-stage-hud { transform: translate(14.25%, 1.3%) scale(.162); }
  .c-stage-glasses { transform: translate(-22.9%, -3.7%) scale(6); }
  .c-stage-arrow { width: 34px; height: 34px; margin-top: -17px; }
  .c-stage-arrow svg { width: 17px; height: 17px; }
  .c-stage-prev { left: 4px; }
  .c-stage-next { right: 4px; }
  .c-stage-name { left: 12px; bottom: 9px; font-size: 10px; }
  .c-stage-dots { right: 4px; bottom: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .c-stage-world { animation: none; }
  .c-stage-slide, .c-stage-dots button::before { transition: none; }
}
.detail-note { margin-top: 32px; }
.compat-intro { margin: 0 0 18px; max-width: var(--measure); }
.compat-line { color: var(--ink-2); margin: 10px 0 0; }
.compat-line strong { color: var(--ink); font-weight: 400; }
.compat-line.compat-low { opacity: .65; }
.compat-flag { color: var(--ink-3); font-style: normal; }

.price-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.price { font-size: clamp(32px, 4vw, 46px); font-weight: 300; letter-spacing: -0.035em; }
.price.free { color: var(--ink); }
.price-note { color: var(--ink-3); font-size: 13px; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.btn-row > .btn { flex: 1 1 15rem; margin: 0; }
.buy-reveal { margin-bottom: 6px; }
.buy-reveal[hidden] { display: none; }
.channels { margin: 6px 0 16px; max-width: 52ch; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 20px; font-size: 14px; color: var(--ink-2); max-width: 54ch; cursor: pointer; }
.consent input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--hud); }
.tax-note { margin: 10px 0 18px; }
.dl-note { margin: 16px 0 0; max-width: var(--measure); }
.dl-note code { background: var(--paper-2); padding: .05em .35em; border-radius: 0; }

/* Tabs -------------------------------------------------------------------- */
.tabs { margin: 40px 0 0; }
.tablist { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; appearance: none; background: transparent; cursor: pointer;
  border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px;
  padding: 14px 20px 14px 0; border-radius: 0;
  font: inherit; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.tab + .tab { padding-left: 20px; }
.tab:hover { color: var(--ink); background: transparent; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tab:focus-visible { outline: 2px solid var(--hud); outline-offset: -3px; }
.tabpanel { padding-top: 34px; }
.tabpanel[hidden] { display: none; }
.tabpanel > .doc-app, .tabpanel > .compat-intro, .tabpanel > .detail-desc, .tabpanel > ul.features { margin-top: 0; }

.tool + .tool { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
/* Ground School, the one promoted link above the tab strip. Ruled off at the
   top so it reads as an aside to the summary and not as the product's own
   action -- the Buy button is above it and must stay the loud one. */
.gs { margin: 30px 0 4px; padding-top: 26px; border-top: 1px solid var(--line); }
.detail .tool .btn { margin-bottom: 12px; }
.tool-note { font-size: 14px; color: var(--ink-3); margin: 0; max-width: var(--measure); line-height: 1.65; }
.tool-grid { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: stretch; }
.tool-card { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line-2); padding: 24px 24px 24px 0; }
.tool-card h2 { margin: 0; font-size: 22px; letter-spacing: -0.025em; font-weight: 400; }
.tool-card p { margin: 0; color: var(--ink-2); max-width: 56ch; }
.tool-lead { color: var(--ink) !important; font-size: 16px; }
.tool-for { font-size: 14px; }
.tool-card .btn { margin-top: 6px; align-self: flex-start; }
.tool-card p:has(> .btn) { margin-top: auto; }

/* Success page ------------------------------------------------------------ */
.code-box {
  font: 400 30px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .14em; background: var(--paper-2);
  border: 0; border-left: 2px solid var(--hud); border-radius: 0;
  padding: 24px 26px; text-align: left; margin: 22px 0; user-select: all; color: var(--ink);
}

/* News and blog ----------------------------------------------------------- */
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 820px; }
.news-list li { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 24px 0; }
.news-list li:last-child { border-bottom: 1px solid var(--line); }
.news-list time { display: block; font-size: 11px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.news-list a, .news-list span { color: var(--ink); font-weight: 400; font-size: 21px; letter-spacing: -0.025em; line-height: 1.25; border: 0; }
.news-list a:hover { color: var(--ink-2); }
/* An item pointing at more than one place. The rule above sets every link in a
   news item to headline size, so these are pulled back down deliberately --
   left alone they read as a second headline under the first. */
.news-links { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 20px; }
.news-list .news-links a { font-size: 14px; letter-spacing: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.news-list .news-links a:hover { color: var(--ink); }
.news-empty { color: var(--ink-3); }

.blog-page .section-head h1, .blog-article h1 { font-size: clamp(32px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -0.04em; margin: 0 0 16px; font-weight: 300; }
.blog-list { display: grid; gap: 0; max-width: 820px; }
.blog-card { display: block; color: inherit; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 26px 0; transition: opacity .2s ease; }
.blog-card:last-child { border-bottom: 1px solid var(--line); }
.blog-card:hover { transform: none; box-shadow: none; }
.blog-card:hover h2 { color: var(--ink-2); }
.blog-card h2 { margin: 0 0 10px; font-size: 25px; letter-spacing: -0.03em; line-height: 1.2; font-weight: 400; transition: color .2s ease; }
.blog-card p { margin: 0; color: var(--ink-2); }
.blog-meta { color: var(--ink-3); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 22px; }
.blog-article { max-width: 760px; }
.blog-article .lead { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.4; color: var(--ink); font-weight: 300; letter-spacing: -0.02em; margin: 0 0 30px; }
.blog-article h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.03em; margin: 44px 0 12px; font-weight: 300; }
.blog-article p, .blog-article li { color: var(--ink-2); line-height: 1.75; }
.blog-article p { margin: 0 0 16px; }
.blog-article ul, .blog-article ol { padding-left: 20px; display: grid; gap: 8px; margin: 0 0 18px; }
.blog-card code, .blog-article code { background: var(--paper-2); border: 0; border-radius: 0; padding: .05em .35em; color: var(--ink); }
.blog-article .article-cta { margin-top: 36px; }

.code-block { margin: 18px 0; padding: 16px 18px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--paper-2); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.code-block code { display: block; background: none; border: 0; padding: 0; font-size: 13.5px; line-height: 1.55; white-space: pre; }

.table-scroll { margin: 22px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 460px; border-collapse: collapse; text-align: left; }
.compare-table th, .compare-table td { padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); line-height: 1.6; }
.compare-table th { color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; border-bottom-color: var(--line-2); }
.compare-table td + td { color: var(--ink-3); }
.compare-table tr:last-child td { border-bottom: 0; }

/* Legal ------------------------------------------------------------------- */
.legal { max-width: 72ch; margin: 8px 0; }
.legal h1 { font-size: clamp(30px, 5vw, 52px); letter-spacing: -0.04em; margin: 8px 0 10px; font-weight: 300; }
.legal .updated { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 34px; }
.legal h2 { font-size: 20px; letter-spacing: -0.02em; margin: 40px 0 10px; font-weight: 400; }
.legal p, .legal li { color: var(--ink-2); line-height: 1.75; }
.legal p { margin: 0 0 14px; max-width: 72ch; }
.legal ul { padding-left: 20px; margin: 0 0 14px; display: grid; gap: 7px; }
.legal strong { color: var(--ink); font-weight: 400; }

/* Cockpit story ----------------------------------------------------------- */
.fly-grid { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: center; }
.fly-copy { display: grid; gap: 28px; }
.fly-point h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.02em; font-weight: 400; }
.fly-point p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.fly-hero { margin: 0; border: 0; border-radius: 0; overflow: hidden; box-shadow: none; max-height: 620px; }
.fly-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.gallery { margin-top: 2px; display: grid; gap: 2px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: center 58%; border: 0; border-radius: 0; box-shadow: none; }

/* Documentation ----------------------------------------------------------- */
.doc-app { margin: 0 0 26px; padding: 26px 0 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; box-shadow: none; scroll-margin-top: 20px; }
.doc-app .tagline { color: var(--ink-3); margin: 0 0 20px; line-height: 1.55; }
.doc-app h3 { font-size: 16px; margin: 26px 0 8px; color: var(--ink); font-weight: 400; }
.doc-app h4 { font-size: 14px; margin: 18px 0 6px; color: var(--ink); font-weight: 500; }
.doc-app p, .doc-app li { color: var(--ink-2); line-height: 1.7; }
.doc-app p { margin: 0 0 12px; }
.doc-app ol, .doc-app ul { padding-left: 20px; margin: 0 0 12px; display: grid; gap: 7px; }
.doc-app strong { color: var(--ink); font-weight: 400; }
.doc-app code { background: var(--paper-2); padding: .08em .35em; border-radius: 0; font-size: .92em; }
.doc-note { font-size: 13px; color: var(--ink-3); border-left: 1px solid var(--hud); padding: 2px 0 2px 16px; margin: 18px 0 0; }
.download-note p + p { margin-top: 12px; }
kbd.key {
  display: inline-block; font-family: inherit; font-weight: 500; font-size: 12px; line-height: 1.4;
  padding: 1px 7px; margin: 0 1px; border: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink); white-space: nowrap;
}

/* Generated manual -------------------------------------------------------- */
.doc-app .man-version { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; }
.doc-app details.man { border-top: 1px solid var(--line); padding: 2px 0 6px; }
.doc-app details.man:last-of-type { border-bottom: 1px solid var(--line); }
.doc-app details.man > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px; font-weight: 400; font-size: 16px; color: var(--ink); padding: 14px 0; }
.doc-app details.man > summary::-webkit-details-marker { display: none; }
.doc-app details.man > summary::before {
  content: "+"; flex: none; width: 20px; height: 20px; border-radius: 0; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 400; color: var(--hud); background: transparent;
}
.doc-app details.man[open] > summary::before { content: "\2212"; }
.doc-app details.man > :not(summary) { max-width: 72ch; }
.doc-app .man-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; margin: 14px 0 22px; max-width: none !important; }
.doc-app figure.man-fig { margin: 0; text-align: center; }
.doc-app .man-fig img.watch, .doc-app .man-callouts img.watch { width: 130px; height: 130px; border-radius: 50%; border: 1px solid var(--line); background: #000; display: inline-block; }
.doc-app .man-fig img.phone { width: 140px; border-radius: 0; border: 1px solid var(--line); display: inline-block; }
.doc-app .man-fig .missing { display: inline-flex; align-items: center; justify-content: center; width: 130px; height: 130px; border-radius: 50%; border: 1px dashed var(--line); color: var(--ink-3); font-size: 11px; }
.doc-app .man-fig figcaption { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 9px; }
.doc-app .man-elements { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; margin: 10px 0 16px; max-width: none !important; }
.doc-app .man-callouts { position: relative; width: 220px; height: 220px; margin: 4px auto; }
.doc-app .man-callouts img.watch { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; display: block; }
.doc-app .man-callouts svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.doc-app .man-callouts svg line { stroke: var(--hud); stroke-width: 0.7; }
.doc-app .man-callouts svg .dot { fill: var(--hud); }
.doc-app .man-callouts svg .ring { fill: var(--hud); stroke: var(--paper); stroke-width: 0.9; }
.doc-app .man-callouts svg text { fill: var(--paper); font-size: 5.2px; font-weight: 500; text-anchor: middle; font-family: inherit; }
.doc-app .man-elements ol { margin: 0; padding-left: 22px; display: grid; gap: 7px; }
.doc-app .man-elements li::marker { color: var(--hud); }
.doc-app table.man-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0 18px; max-width: none !important; }
.doc-app .man-table th, .doc-app .man-table td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); line-height: 1.55; }
.doc-app .man-table th { color: var(--ink); font-weight: 500; }
.doc-app .man-table thead th { background: transparent; border-bottom-color: var(--line-2); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.doc-app .man-table caption { text-align: left; font-weight: 500; color: var(--ink); padding: 0 0 9px; background: none; border-bottom: 1px solid var(--line-2); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.doc-app .man-menu th { width: 30%; }
.doc-app .man-small { font-size: 13px; color: var(--ink-3); }
.doc-app pre.man-code { background: var(--paper-2); border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink); overflow-x: auto; margin: 8px 0 16px; max-width: none !important; }
.doc-app pre.man-code code { background: none; padding: 0; }

/* Narrow ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .fly-grid { grid-template-columns: 1fr; }
  .fly-hero { max-height: none; }
  .gallery { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 760px) {
  .site-nav { order: 1; }
  .site-nav + .site-social { margin-left: auto; }
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .doc-app .man-elements { grid-template-columns: 1fr; }
  .doc-app .man-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================== LAYER 3 ================================== */
/* Campaign pages. The homepage and any future landing page: full-bleed
   imagery, a 12-column grid, a typographic index instead of tiles. Everything
   here is prefixed c- because the storefront already owns .hero, .card, .steps
   and .row, and a campaign page loads the same sheet as a product page.       */

.c-shell { max-width: 1680px; margin: 0 auto; padding: 0 var(--margin); }
.c-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
/* padding-block, NOT the shorthand: .c-shell sets the side gutter and a
   `padding: Xpx 0` here resets it to zero, which ran every campaign section --
   the statement, the feature, the range index, the ownership steps -- flush to
   both screen edges. The hero escaped it only because it carries .c-shell
   without .c-section. */
.c-section { padding-block: clamp(72px, 11vh, 150px); }
.c-rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.c-display { font-weight: 300; font-size: clamp(38px, 6.6vw, 96px); line-height: 0.98; letter-spacing: -0.035em; margin: 0; }
.c-display em { font-style: normal; color: var(--ink-2); }
.c-head { font-weight: 300; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.03em; margin: 0; }
.c-body { color: var(--ink-2); max-width: 46ch; margin: 0; }

/* Nav over imagery: white on the hero and the closing frame, ink on paper.
   A mix-blend-mode bar did this in one line but forces a full-page composite
   on every scroll; index-v3.html swaps the class from one scroll listener. */
.c-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20; padding: 22px var(--margin);
  display: flex; justify-content: space-between; align-items: center;
  color: #fff;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, background-color .3s ease,
              border-color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.c-nav .mark { font-size: 14px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.c-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.c-nav a { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; border: 0; }
/* The bar always has something behind it. Over a photograph that is a dark
   wash -- enough to hold white type against a bright sky, not so much that it
   becomes a panel sitting on the picture. Over paper it is paper and a
   hairline, so a word in the nav never sits on a word of the page behind it.
   The first version left it transparent over the hero, which meant the one
   place a reader looks first was the one place with no background at all. */
.c-nav { background: rgba(16, 16, 16, .42); }
.c-nav.on-paper { background: var(--paper); border-bottom-color: var(--line); }
/* Out of the way going down the page, back the moment the reader goes up.
   Translated rather than hidden, so it slides instead of blinking. */
.c-nav.gone { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .c-nav { transition: color .3s ease, background-color .3s ease, border-color .3s ease; }
}
.c-nav.on-paper, .c-nav.on-paper .mark { color: var(--ink); }
.c-nav.on-paper a { color: var(--ink-2); }
.c-nav.on-paper a:hover { color: var(--ink); }
/* The picker is a <select> inside the list, so none of the `.c-nav a` rules
   above reach it. It inherits the bar's own colour in both states instead. */
.c-nav .nav-lang { color: inherit; }
.c-nav.on-paper .nav-lang { color: var(--ink-2); }
.c-nav.on-paper .nav-lang:hover { color: var(--ink); }

.btn.light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn.light:hover { background: #fff; color: #101010; }

.c-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.c-hero-img { position: absolute; inset: 0; }
.c-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.c-hero-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.06) 58%, rgba(0,0,0,.62) 100%);
}
/* The one futuristic gesture: a horizon line that sweeps up once and rests. */
.c-scan {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,224,138,.85), transparent);
  opacity: 0; animation: c-sweep 5.5s ease-out .7s forwards;
}
@keyframes c-sweep {
  0%   { transform: translateY(38vh); opacity: 0; }
  22%  { opacity: .9; }
  100% { transform: translateY(-6vh); opacity: 0; }
}
/* padding-bottom only: .c-shell sets the side margin and a shorthand here
   would reset it and run the headline into the screen edge. */
/* padding-top clears the fixed bar. The copy is bottom-aligned, so at a large
   browser zoom -- or any short viewport -- it grows upward and the eyebrow ends
   up behind the wordmark. Reported at zoom, where it is most visible, but it is
   a short-viewport bug rather than a zoom one. */
.c-hero-copy { position: relative; z-index: 2; width: 100%;
  padding-top: 84px; padding-bottom: clamp(40px, 7vh, 86px); }
.c-hero-copy .c-display { color: #fff; grid-column: 1 / span 8; }
.c-hero-copy .c-body { color: rgba(255,255,255,.82); grid-column: 1 / span 4; margin-top: 26px; }
/* Columns 6-12, not 8-12: two actions fitted on one line in five columns and
   a third does not, so adding Ground School left `See the range` hanging
   alone underneath. Column 5 stays empty as the gutter from .c-body, which
   ends at 4. */
.c-hero-copy .c-acts { grid-column: 6 / span 7; align-self: end; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 26px; }
.c-hero-copy .label { color: rgba(255,255,255,.7); grid-column: 1 / span 12; margin-bottom: 26px; }
.c-hero-copy .label::before { background: var(--hud-bright); }

/* A grid of watch screens with a caption under each. Two homes: the GlidePanel
   block on the campaign page, where the numbered list opposite runs taller than
   a 2:1 image and left the column with space under it, and every product page,
   where it replaced a sideways-scrolling gallery. The images carry their own transparency, so no plate or border is
   drawn behind them -- in this system a box around a picture is one more line
   competing with the hairlines that carry the structure. */
.c-screen-row {
  list-style: none; margin: clamp(28px, 4vh, 52px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter);
}
.c-screen-row img { width: 100%; height: auto; }
.c-screen-row .label { margin: 16px 0 0; font-size: 10px; letter-spacing: .14em; }
.c-screen-row .label::before { content: none; }

.c-statement .c-display { grid-column: 1 / span 9; }
.c-statement .c-aside { grid-column: 10 / span 3; align-self: end; }

.c-feature { align-items: start; }
.c-feature .c-col-copy { grid-column: 1 / span 4; position: sticky; top: 120px; }
.c-feature .c-col-media { grid-column: 6 / span 7; }
/* height:auto is doing real work. The <img> carries width="1440" height="720"
   -- there so the browser reserves the right box before the file arrives -- and
   with only `width: 100%` set the height attribute stays in play as a used
   height of 720px. The GlidePanel screen then rendered 691x720 instead of
   691x345: a 2:1 image squashed to nearly square. */
.c-feature .c-col-media img { width: 100%; height: auto; background: var(--paper-2); }
.c-specs { list-style: none; margin: 34px 0 0; padding: 0; }
.c-specs li { padding: 15px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; display: flex; gap: 14px; }
.c-specs li:last-child { border-bottom: 1px solid var(--line); }
.c-specs .n { color: var(--hud); font-size: 11px; letter-spacing: .14em; padding-top: 3px; flex: 0 0 auto; }
.c-media-note { grid-column: 6 / span 5; margin-top: 18px; font-size: 13px; color: var(--ink-3); }
/* The same block mirrored, media left and copy right: GlidePanel under
   GlideGlass on the campaign page, so the two read as a pair. */
.c-feature.is-flip .c-col-copy { grid-column: 9 / span 4; grid-row: 1; }
.c-feature.is-flip .c-col-media { grid-column: 1 / span 7; grid-row: 1; }
.c-feature.is-flip .c-media-note { grid-column: 1 / span 5; }
/* The glasses are a cut-out photograph; no plate, so they sit on the paper. */
.c-feature .c-col-media img.c-glasses { display: block; width: 78%; margin: clamp(28px, 4vh, 52px) auto 0; background: none; }
/* HUD renders are green on transparent, drawn for a see-through lens. On
   paper they wash out, so they get the dark of the sky they are meant for. */
.c-screen-row.is-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-screen-row.is-hud img { background: #071521; padding: 6%; box-sizing: border-box; }

.c-index-head { margin-bottom: 52px; }
.c-index-head .label { grid-column: 1 / span 3; }
.c-index-head .c-head { grid-column: 4 / span 7; }
.c-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter);
  padding: 26px 0; border-top: 1px solid var(--line); align-items: baseline;
}
.c-row:last-of-type { border-bottom: 1px solid var(--line); }
.c-row .n { grid-column: 1 / span 1; font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }
.c-row .nm { grid-column: 2 / span 3; font-size: 21px; font-weight: 400; letter-spacing: -0.02em; }
.c-row .ds { grid-column: 5 / span 6; color: var(--ink-2); font-size: 15px; }
.c-row .go { grid-column: 12 / span 1; text-align: right; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.c-row:hover .n { color: var(--hud); }
.c-row:hover .go { color: var(--ink); }
.c-row.group { border-top: 1px solid var(--line-2); padding-top: 22px; }
.c-row.group .n { color: var(--ink); }

.c-closing { padding: 0; }
.c-closing figure { margin: 0; position: relative; }
.c-closing img { width: 100%; height: clamp(420px, 72vh, 760px); object-fit: cover; object-position: center 46%; }
.c-closing figcaption { position: absolute; left: var(--margin); right: var(--margin); bottom: clamp(30px, 6vh, 64px); color: #fff; }
.c-closing figcaption .c-display { font-size: clamp(30px, 4.6vw, 64px); max-width: 16ch; }
.c-closing figcaption p { color: rgba(255,255,255,.8); max-width: 44ch; margin: 20px 0 26px; }

/* Just a gutter for what sits at the foot of a campaign page: the safety note
   and then footer.site, which common.js builds and which brings its own rule,
   spacing and the Merchant of Record disclosure. Nothing here draws a border --
   an earlier version did, on .c-foot itself, and because .c-shell's padding box
   is the full window width that hairline ran edge to edge while every other
   page's footer rule stopped at the gutter. */
.c-foot { padding-block: 0; }
.c-foot .c-safety { color: var(--ink-2); font-size: 13.5px; max-width: 62ch; margin: 0; }

/* Controlled motion. .c-rise hides itself only once the inline script has put
   .motion on <html>: content that is invisible by default is content that a
   script failure, or a tab that never paints, leaves invisible for good. */
.motion .c-rise { opacity: 0; transform: translateY(16px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.motion .c-rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .motion .c-rise { opacity: 1; transform: none; transition: none; }
  .c-scan { display: none; }
}

@media (max-width: 1000px) {
  .c-hero-copy .c-display, .c-hero-copy .c-body, .c-hero-copy .c-acts { grid-column: 1 / span 12; }
  /* The actions are right-aligned only while they sit in their own columns
     opposite the body copy. Once they span the full width they are under the
     headline, and must start where it starts. */
  .c-hero-copy .c-acts { justify-content: flex-start; }
  .c-screen-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .c-statement .c-display, .c-statement .c-aside { grid-column: 1 / span 12; }
  .c-statement .c-aside { margin-top: 28px; }
  .c-feature .c-col-copy, .c-feature .c-col-media, .c-media-note,
  .c-feature.is-flip .c-col-copy, .c-feature.is-flip .c-col-media, .c-feature.is-flip .c-media-note { grid-column: 1 / span 12; grid-row: auto; position: static; }
  .c-feature .c-col-media { margin-top: 40px; }
  .c-index-head .label, .c-index-head .c-head { grid-column: 1 / span 12; }
  .c-row { padding: 20px 0; row-gap: 6px; }
  .c-row .n, .c-row .nm, .c-row .go { grid-column: 1 / span 12; }
  .c-row .ds { grid-column: 1 / span 10; }
  .c-row .go { text-align: left; margin-top: 6px; }
  .c-foot .c-safety, .c-foot .c-meta { grid-column: 1 / span 12; }
  .c-nav ul { gap: 16px; }
  /* The picker takes more room than the single "Deutsch" link it replaced, and
     this bar was already at its limit on a phone. Tighten it here rather than
     everywhere: the caret still needs its gutter, but the leading pad and some
     of the tracking can go without the control reading differently from the
     words beside it. */
  .c-nav .nav-lang { padding-left: 0; padding-right: 16px; letter-spacing: .08em; }
}
@media (max-width: 640px) {
  /* Nothing is hidden on a phone any more. There used to be a rule here that
     dropped one link, and the link it dropped -- Ownership, an in-page anchor
     -- has been taken out of the nav altogether. A rule that matches nothing
     is a trap for whoever adds the next item and wonders why it vanished. */
}

/* The app on the phone, small screenshots in a row above the tabs (--n of them); a click opens one large. */
.c-phone-row { --n: 4; list-style: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px;
  max-width: calc(var(--n) * 140px); margin: 28px 0 0; padding: 0; }
.c-phone-row button { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--paper-2); cursor: zoom-in; transition: transform .2s, box-shadow .2s; }
.c-phone-row button:hover, .c-phone-row button:focus-visible { transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12); outline: none; }
.c-phone-row img { display: block; width: 100%; height: auto; }
.c-shot-box { max-width: min(92vw, 520px); max-height: 94vh; padding: 0; border: 0; border-radius: 14px;
  background: transparent; overflow: visible; }
.c-shot-box::backdrop { background: rgba(10, 14, 20, .82); }
.c-shot-box img { display: block; max-width: 100%; max-height: 86vh; width: auto; height: auto; margin: 0 auto;
  border-radius: 14px; }
.c-shot-cap { margin: 10px 0 0; text-align: center; color: rgba(255, 255, 255, .85); font-size: 13px; }
.c-shot-box button { position: absolute; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.c-shot-box button:hover, .c-shot-box button:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }
.c-shot-box svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.c-shot-prev { left: -60px; top: 50%; margin-top: -22px; }
.c-shot-next { right: -60px; top: 50%; margin-top: -22px; }
.c-shot-close { right: -60px; top: 0; }
@media (max-width: 640px) {
  .c-phone-row { gap: 8px; }
  .c-shot-prev { left: 6px; } .c-shot-next { right: 6px; } .c-shot-close { right: 6px; top: 6px; }
}