/* GOLD INTELLIGENCE — UNIFIED DESIGN TOKENS  (AEX-2.3)
 *
 * One token-driven stylesheet. Replaces the six stacked override layers of
 * _DARK_CSS. Values are NOT invented here: every token is transcribed from
 * MEDIA_HOLDING_VISUAL_PHYSICS.md §1 (colour), §4 (type), §5 (materials),
 * §6 (grid & space), §7 (buttons). This file is the only place a colour may
 * be named; surfaces reference tokens, never literals.
 *
 * Register rule (§1): one page = one accent register. Product/holding pages
 * are gold; Founder/engineering pages are blue. Silver and the cold light are
 * shared by everything — that is how surfaces differ while staying one system.
 */

:root {
  /* The page commits to its dark scheme — a WebView's algorithmic darkening
   * must not re-filter an already-dark surface (perceptual closure belt). */
  color-scheme: dark;

  /* ── Colour · one universe, three registers ───────────────────────────── */
  --bg: #0A0D12;            /* foundation navy-black; the only page background */
  --depth-a: #0A102A;       /* depth-plane radial glow, never a fill */
  --depth-b: #10182E;
  --panel: #121722;         /* raised surface: cards, assistant panel */
  --line: #222B39;          /* 1px hairlines, borders, connectors */
  --line-gold: rgba(212, 175, 55, .55);   /* the recommended path's edge —
                                             the identity's gold as a boundary,
                                             never as a louder card */
  --text: #E8ECF2;          /* primary text — pure white is forbidden */
  --muted: #8B97A8;         /* secondary text */
  --faint: #5F6B7C;         /* labels, metadata, "Powered by" */
  --silver: #C9CFD6;        /* engraved display capitals, structural voice */

  --gold: #D4AF37;          /* holding & product register — scarce, never large fills */
  --gold-hi: #E6C65B;
  --gold-lo: #BF9930;
  --gold-deep: #A8842A;
  --gold-light: #F0D98A;

  /* FUNCTIONAL VALUE ACCENT — the register a PRICE is read in (Founder GO,
     2026-08-20). A dealer price is neither identity nor structure: it is the
     live, gold-linked number the visitor came for, and in the structural
     silver it read as metadata. It is therefore a semantic ROLE with a home
     in the token file, not a colour picked at one call site — and it invents
     no new colour: it is the palette's own lit gold, used flat.
     Flat is the hierarchy. The spot price is the band's single anchor and
     stays GOLD MATERIAL (the full gradient, `.gi-sem`); the six dealer
     quotes are one repeated signal, so they take the same gold as one even
     tone. Material reads as one lit object; a flat tone reads as
     information — which is exactly the difference in their roles, and why
     six rows cannot become six light sources. */
  --value-gold: var(--gold-hi);

  --blue: #2E6BFF;          /* founder & engineering register */
  --blue-hi: #57A8FF;

  --approve: #3FB07F;       /* operational state only */

  /* Cold light — always cold, even over gold (§2) */
  /* One continuous field (round five, 2026-08-16): these are the PEAKS of
     the sampled Gaussian in physics.css. The separate shoulder register is
     retired — a second colour inside the field is a readable boundary,
     which is the defect — not left as a dead token (round-three rule). */
  --light-core: rgba(234, 244, 255, .353);
  --light-band: rgba(212, 228, 250, .22);

  /* ── Type (§4) ────────────────────────────────────────────────────────── */
  --font: -apple-system, "Segoe UI Variable", "Segoe UI", system-ui, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --display-tracking: .34em;
  --display-tracking-mobile: .18em;
  --measure: 38rem;         /* prose measure ceiling */
  --measure-greeting: 35rem;

  /* ── Space & grid (§6) ────────────────────────────────────────────────── */
  --content: 1140px;
  --gutter: clamp(22px, 5vw, 64px);
  --section: clamp(84px, 14vh, 150px);
  /* SEMANTIC SPACING · identity → pause → product meaning (perceptual
   * closure, 2026-08-18). The brand block owns its calm presence space;
   * the eyebrow of the first content belongs to ITS content, not to the
   * brand it previously stuck to (measured 9px vs 46px — inverted
   * proximity). Width-relative on narrow viewports per the §11 law.
   *
   * THE BOUNDARY IS MEASURED IN TYPE, NOT IN PIXELS (Founder finding,
   * 2026-08-19). Stated in px alone, the pause survived only until the
   * reading floor moved: `html` runs at 16/17/18px by viewport (above), so
   * the very same 76px stood for 4.75em of reading at the small floor and
   * 4.22em at the large one — the boundary quietly narrowed as the type
   * grew, which is exactly what the second review saw. The clamp now
   * carries the calibrated numbers as REM (44px and 76px at the 16px
   * reference floor), so the pause keeps its relation to the letters it
   * separates, while `vh`/`vw` keep it honest against the viewport.
   * `--gap-eyebrow` stays absolute on purpose: it is optical kerning
   * inside one content block, not a semantic boundary. */
  /* THE CEILING MUST BE REACHABLE ON A REAL SCREEN (Founder finding,
   * 2026-08-19, second return). The pause's preferred term was 7vh alone:
   * on real laptops (innerHeight 673–805) that resolves to 47–56px — the
   * calibrated 76px ceiling only engaged in artificially tall test frames,
   * so verification kept measuring a page no user ever sees. Against the
   * ~300px hero lockup the brand had 13–16% of its own height as air: the
   * presence space existed in the token and not on the screen.
   *
   * The durable form: a TYPE-RELATIVE base the pause can never fall under
   * (3rem — it grows with the reading floor instead of being eaten by it)
   * plus the viewport breath (7vh, the term the law always had), bounded by
   * a type ceiling. Measured result on the founder frame (1440×900):
   * 107px ≈ 36% of the lockup; laptop 768: 98px ≈ 33%; large monitors cap
   * at 7.5rem. The brand reads as standing in its own air at every real
   * height, and a future typography change moves the pause WITH the text. */
  /* Founder review 2026-08-28: one more square of the drawing grid between
     the closing line of the lockup and the role that follows it. The
     addend is `--cell` itself, so the pause is stated in the material's
     own unit and stays true if the grid is ever redrawn. */
  --gap-brand: calc(clamp(6rem, 7vh + 3rem, 7.5rem) + var(--cell));
  --gap-eyebrow: 16px;
  /* THE CLOSING'S TWO DISTANCES (Founder review, 2026-08-20). The closing is
     a hierarchy of four levels, and a hierarchy needs exactly two distances:
     one that BINDS the lines of a single meaning, one that OPENS the next
     level. Absolute on purpose, like `--gap-eyebrow`: this is optical
     spacing between small metadata lines of a fixed register, not a
     semantic boundary of the page — it must read identically on a phone and
     on a monitor instead of breathing with the viewport, so the four levels
     are recognised as the same composition everywhere. */
  /* THE CLOSING'S TWO DISTANCES ARE MEASURED BETWEEN INK, NOT BETWEEN BOXES
     (FOUNDER GO — FOOTER ALL PAGES, 2026-08-21). `--foot-line` is the one
     distance between the four text lines; the Founder set it by pointing at
     the gap that already stood between the operating-entity line and the
     dealer line, measured on the render at 20px. `--foot-edge` opens the
     closing above the first line and closes it under the fourth, and it is
     the distance that already stood between the dealer line and §9,
     measured at 39px — unchanged by this GO, only mirrored above. */
  --foot-line: 20px;
  --foot-edge: 39px;
  --foot-tight: 10px;
  --foot-step: 30px;
  --cell: 56px;             /* material does not scale, incl. mobile */
  /* PRODUCT IMAGERY — the square the board's photographs stand on, and the
     air between a photograph and the words it belongs to. Type-relative on
     purpose: imagery keeps its relation to the reading floor (16/17/18px by
     viewport) instead of drifting away from the type it sits beside. */
  --prod-stage: 3.6rem;
  --prod-gap: clamp(16px, 1.4vw, 22px);
  /* HOW LOUDLY THE PHOTOGRAPHED METAL MAY ANSWER THE SCENE'S LIGHT. Named,
     because an amplitude left as a bare number in a rule is exactly how a
     quiet material response turns into a glow one edit later. Calibrated on
     the real 1440×900 frame by freezing the field on the board and measuring
     both extremes: at 1.0 the passing band turned half of every object into
     a cold silver plate (mean +8…+13 luma, and a blue-white streak that
     stopped reading as gold at all); at .26 the metal brightens and stays
     GOLD (mean +5.3 luma at the peak, no hue break). Presence, not
     brightness — and audibly below the product's own identity. */
  --prod-answer: .26;

  /* ── Material (§5) ───────────────────────────────────────────────────── */
  --radius: 3px;            /* near-sharp monolith */
  --rim: inset 0 1px 0 rgba(216, 230, 248, .14);
  --cast: 0 14px 38px -26px rgba(0, 0, 0, .5);
  --panel-top: linear-gradient(180deg, rgba(216, 230, 248, .04), transparent 62%);
  --gold-material: linear-gradient(180deg, var(--gold-light), var(--gold-hi) 34%,
                   var(--gold) 62%, var(--gold-lo) 84%, var(--gold-deep));

  /* ── Motion (§3) — durations only; the physics file owns the keyframes ── */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --reveal: 1.7s;
  --reveal-slow: 2.1s;
  --reveal-fast: 1.3s;
  --ui: 180ms;
}

/* ── Reset, kept to what the surfaces actually need ─────────────────────── */

/* SELECTION IS PART OF THE SCENE (Founder finding, 2026-08-19; reproduced
 * pixel-for-pixel). The product never styled ::selection, so a slipped
 * click-drag painted the browser default over the navy scene: one selected
 * SPACE showed as a small pale shelf standing between two words, and letters
 * of a text-clipped carrier turned into a muddy box — the fill is
 * transparent, so the default highlight swallowed the glyphs. Both read as
 * defects of the surface. The selection is now designed material: a quiet
 * steel veil, and the selected letters keep a REAL fill (the clipped
 * background does not travel with a selection, so an explicit selected fill
 * is the only thing that keeps the words readable). */
::selection {
  background: rgba(174, 197, 224, .24);
  color: #EAF0F8;
  -webkit-text-fill-color: #EAF0F8;
}
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* DESKTOP READING FLOOR v2 (Founder perceptual finding, 2026-08-18): the
 * supporting copy sits on rem-based clamps, so the root em IS the floor's
 * single lever. Wide viewports raise it for readers with weaker sight —
 * every class scales in proportion, so the hierarchy (dm-218 CL-3) is
 * preserved by construction. Mobile keeps its measured rhythm untouched. */
@media (min-width: 1280px) { html { font-size: 17px; } }
@media (min-width: 1680px) { html { font-size: 18px; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.78 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (max-width: 720px) { body { font-size: 16px; } }

/* RESPONSIVE SPATIAL LAW (mobile physics round, 2026-08-18). Generous
 * spacing is a PERCEPTUAL quantity, not a geometric one: on a desktop the
 * 14vh section rhythm reads as calm horizontal architecture; stacked into a
 * narrow portrait column the same law becomes dead space that severs the
 * semantic flow (measured: four ~310px voids, 43% of the page empty).
 * On narrow viewports the rhythm derives from the reading flow — width-
 * relative, not height-relative. Same hierarchy, viewport-appropriate
 * numbers: generous ≠ empty, compact ≠ cramped.
 * Candidate canon law: responsive design does not preserve geometry —
 * it preserves meaning, hierarchy and physical laws. */
@media (max-width: 720px) {
  :root {
    --section: clamp(44px, 12vw, 56px);
    /* same law, width-relative breath: 9vw + a 2rem type base — 67px on a
       390px phone ≈ 29% of the 234px lockup (was 36px ≈ 15%) */
    --gap-brand: clamp(4rem, 9vw + 2rem, 5.5rem);
  }
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

::selection { background: rgba(212, 175, 55, .22); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section) 0; }
.section + .section { border-top: 1px solid var(--line); }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15em; color: var(--muted); }
.prose strong { color: var(--text); font-weight: 600; }

/* ── Voice (§4) ─────────────────────────────────────────────────────────── */
.label {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 18px;
}

.h-section {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--silver);
  text-wrap: balance;
  margin: 0 0 26px;
}

.lede {
  max-width: var(--measure-greeting);
  font-size: clamp(1.02rem, 2.1vw, 1.22rem);
  line-height: 1.85;
  color: var(--muted);
  margin: 0;
}

.num { font-variant-numeric: tabular-nums; }

/* ── Raised surface (§5) ────────────────────────────────────────────────── */
.panel {
  position: relative;
  background: var(--panel);
  background-image: var(--panel-top);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--rim), var(--cast);
  padding: clamp(20px, 3vw, 30px);
}

.hair { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ── The semantic material scale (refinement GO, 2026-08-18) ─────────────
 * Every boundary must have a reason; material certainty grows only with
 * semantic consequence: environment → information → functional surface →
 * decision surface → transactional boundary.
 *   information  — part of the scene: one hairline and air, no fill;
 *   decision     — a defined object the scene continues through: a hairline
 *                  frame, no fill, no shadow;
 *   tier         — one variant inside a decision area: a hairline top edge;
 *                  the recommended path carries the identity's own gold in
 *                  that edge — clearer, never louder;
 *   transaction  — the filled `.panel` above (login, consent, payment
 *                  results) stays exactly as it is.
 */
.mat-info {
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
}

.mat-decision {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 30px);
}

.mat-tier {
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
  /* ONE DECISION PLANE (perceptual closure, 2026-08-18): the three tiers are
   * equal variants of one system — same function, same geometric axis. The
   * grid already stretches the columns to one height; the column is a flex
   * stack and the CTA pins to the shared baseline. A law, not per-card
   * margins: any copy length lands the buttons on one line, any viewport. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mat-tier > .btn { margin-top: auto; }

.mat-tier.mat-rec { border-top-color: var(--line-gold); }

/* ── Buttons (§7) ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--silver);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--rim);
  transition: filter var(--ui) ease-out, border-color var(--ui) ease-out,
              transform 120ms ease-out;
}

.btn:hover { filter: brightness(1.1); border-color: #2E394A; }
.btn:active { transform: scale(.97); }

/* THE GOLD CONTROL IS THE MARK'S OWN METAL (perceptual closure, 2026-08-18).
 * Founder: the primary action read as a bright generic web button — a
 * foreign object in the scene. The control now carries the QUIETER struck
 * gold of the mark itself (physics.css --profile-gold, the register the
 * seal was calmed to), no cast glow, the same struck top rim: restrained
 * authority — a plate of the identity's metal, not an advertisement. */
.btn-gold {
  background: var(--profile-gold, var(--gold-material));
  border-color: rgba(212, 175, 55, .45);
  color: #14100A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn-gold:hover { filter: brightness(1.07); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
  filter: none;
}

/* ── "Powered by Media Holding" (§9) — one per surface, never gold ─────── */
.powered {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--faint);
}

.powered b { color: var(--muted); font-weight: 500; }

/* The © line — quiet PROVENANCE material (CL-3, dm-20260818-218): the
   product's own metal at rest — never CTA gold, never the §9 signature. */
.gi-provenance {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--faint);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gi-provenance {
    background: var(--profile-gold, var(--gold-material));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* PROVENANCE BLOCK (Founder choice C, 2026-08-19; recomposed 2026-08-20).
   Who stands behind the product, shown before it is said. The block is now
   only a placement: the identity inside it is the ONE `.gi-group` component
   below, so this rule owns air and nothing else. */
.gi-prov {
  display: block;
  margin-top: clamp(18px, 2.4vh, 26px);
}

/* THE PROVENANCE SECTION STANDS ON THE PAGE AXIS (Founder decision,
   2026-08-20 — «разместить по середине», desktop and every device). The
   section centres as ONE composition: the contextual heading, the group
   lockup (an inline-flex object, centred by the section's text axis) and
   the membership sentence, whose reading measure is kept and centred
   rather than released. Nothing else about the block changes: the pause
   ratios of FR-152/154 are vertical and survive centring untouched. */
.gi-prov-sec { text-align: center; }
.gi-prov-sec .gi-prov-human {
  margin-left: auto;
  margin-right: auto;
}

/* ── THE GROUP PRESENTATION — ONE COMPONENT (Founder visual review,
   2026-08-20) ──────────────────────────────────────────────────────────────
   The product's own identity has always been one composition with a single
   size lever and every internal proportion in `em` of it (`.gi-lockup`,
   `--mark`). The group's identity had no component at all: it was assembled
   per surface from an image and separate spans, which is why the review saw
   "a small mark on the left and separately typeset lines on the right", and
   why any new surface would have had to invent the arrangement again.

   Same architecture, deliberately NOT the same geometry: one element, one
   lever (`--gmark`), internals in `em`, the Founder mark above its own name
   on one axis — the way the asset itself is drawn — with the subordinate
   descriptor beneath. No rule-and-dot, no signature line, no perpetual
   glint, and a smaller scale: the product keeps visual primacy on its own
   surfaces (R8 co-presence law). The mark carries no light of its own — it
   is a physical object standing in the scene. */
.gi-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .085em;
  font-size: var(--gmark, clamp(124px, 13vw, 156px));
  line-height: 1;
  text-align: center;
}

/* The Founder asset, whole. Never taken apart, never re-typeset: the ring,
   the monogram and the MEDIA HOLDING wordmark inside it are one supplied
   object, and the lockup is only ever placed at a size where that wordmark
   reads (GROUP_MARK_MIN_PX). */
/* THE ASSET ANSWERS THE ONE FIELD WITHOUT BEING REDRAWN (Founder GO,
   2026-08-20). A raster cannot be clipped to its glyphs the way letters are,
   and the asset may not be repainted — so the SAME passing field is carried
   by a layer masked with the asset's own alpha. Nothing new is drawn: the
   light simply reaches the material that is already there, and the material
   answers by its role.

   HIERARCHY IS PRESERVED BY THE AMPLITUDE. The secondary identity may never
   take perceptual priority from the product's own lockup, so this response
   is deliberately a fraction of the product mark's: the field arrives at
   `--glint-text` strength (the quiet reading register), not at the metal
   register the product identity answers in. */
.gi-group-markbox {
  position: relative;
  display: block;
  width: 1em;
  flex: none;
  line-height: 0;
}

.gi-group-mark {
  display: block;
  width: 100%;
  height: auto;
}

.gi-group-markbox::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: url('/static/img/media-holding-logo.png');
          mask-image: url('/static/img/media-holding-logo.png');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-image: var(--glint-text);
  background-repeat: repeat-x;
  background-size: 130vw 100%;
  background-position: calc(50% - 69.8vw - var(--dxc, 0px)) 0;
  animation: envfield 72s linear infinite;
}

/* The permanent subordinate descriptor, UNDER the complete logo. Sized as a
   proportion of the mark, so the pair can never drift apart, and held below
   the in-asset wordmark's weight so the hierarchy cannot invert. */
/* THE CONNECTING GEOMETRY IS THE FAMILY'S: rule — centre point — rule
   (Founder correction, 2026-08-20; supersedes the earlier "short hairline"
   reading). The grammar is the one the product lockup proves; the drawing is
   this identity's own — every length here is a proportion of --gmark, so the
   figure is derived from the group's own scale rather than copied from
   another lockup's pixels. */
/* ONE RHYTHM, NOT THREE DIFFERENT ONES (Founder finding, 2026-08-20 —
   "FOUNDER GO — GOLD INTELLIGENCE", finding 3: the mark and the descriptor
   sit right, the rule and the attribution stand far apart).

   Root cause, measured on the rendered page at 1440×900 and reproduced at
   1024, 834 and 390: the composition's three bonds came out 13 / 25 / 22 px.
   `.gi-group` states ONE bond for the whole object (`gap: .085em`), and the
   rule then added .075em above itself and .06em below — so two of the three
   bonds carried the gap PLUS a margin and the third carried the gap alone.
   Nothing intended the doubling; a flex `gap` and a child margin simply add.

   What the corrected figure is measured against is the family's own grammar,
   not a taste: the product lockup — the same rule-dot-rule composition, one
   family (see `group_lockup`) — holds its three bonds at 49 / 52 / 53 of the
   reference's 659, i.e. 1 : 1.06 : 1.08. An even rhythm is what makes four
   parts read as ONE object. The group lockup now derives that law at its own
   scale rather than copying those pixels: the single `.gi-group` gap governs
   all three bonds, so they stand 1 : 1 : 1 at every viewport, and the bond
   the Founder confirmed as correct (mark → descriptor) is the one that sets
   the unit for the other two. */
.gi-group-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .045em;
  width: .62em;
  /* the object's air belongs to the object, and it is stated once, above */
  margin: 0;
}
.gi-group-rule i {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line));
}
.gi-group-rule i:last-child {
  background: linear-gradient(90deg, var(--line), transparent);
}
/* the centre point — the axis made visible, never a decorative dot */
.gi-group-rule b {
  flex: none;
  width: .022em;
  height: .022em;
  min-width: 2px;
  min-height: 2px;
  border-radius: 50%;
  background: var(--gold-lo);
}

/* The quiet attribution layer of the FULL presentation — the group's own
   bottom line, in the faintest register so it closes the lockup instead of
   competing inside it. */
.gi-group-sig {
  font-size: .052em;
  font-weight: 500;
  letter-spacing: .30em;
  text-indent: .30em;
  text-transform: uppercase;
  color: var(--faint);
}

/* The descriptor and the attribution answer the same field as every other
   quiet text of the scene — through the register they already belong to, at
   the same phase, with the same reduced-motion completeness. */
.gi-group-desc,
.gi-group-sig {
  background-image: var(--glint-text), linear-gradient(currentColor, currentColor);
  background-repeat: repeat-x, no-repeat;
  background-size: 130vw 100%, 100% 100%;
  background-position: calc(50% - 69.8vw - var(--dxc, 0px)) 0, 50% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: envfield 72s linear infinite;
}

.gi-group-desc {
  font-size: .073em;
  font-weight: 600;
  letter-spacing: .22em;
  text-indent: .22em;          /* optical: tracking adds space after the last
                                  glyph, which would push the line off axis */
  text-transform: uppercase;
  color: var(--faint);
}

/* THE HEADING IS NOT THE IDENTITY (Founder GO, 2026-08-20). «ЧАСТЬ ГРУППЫ»
   and its EN/ET forms are a contextual/provenance heading that explains the
   block below it: its own semantic rank, its own air, and never a line of
   the lockup. The pause under it is the boundary the reader must feel. */
/* STRUCTURAL PASS ≠ PERCEPTUAL PASS (Founder finding, 2026-08-20, second
   return). The heading was already out of the lockup in the DOM and in the
   CSS, and it still READ as the composition's first line — because the eye
   groups by distance, not by markup. Measured on the real 1440×900 frame:
   heading → lockup 39px, largest gap INSIDE the lockup 27px, lockup → the
   sentence that explains it 47px. The heading was CLOSER to the identity than
   the identity's own explanation: by proximity it belonged to the lockup, and
   no amount of correct structure could outvote that.

   The pause is therefore a semantic boundary, not padding, and it is stated
   the way `--gap-brand` states its own: a type-relative floor it can never
   fall under plus the viewport's breath, so it keeps its RATIO to the letters
   and to the composition it separates instead of quietly narrowing when the
   reading floor grows. ~81px optical against a 27px internal maximum — three
   times the block's own strongest internal bond, and clearly wider than the
   47px that ties the block to its sentence. */
.gi-prov-head {
  margin: 0 0 clamp(3rem, 6vh + 1.25rem, 5.5rem);
}

/* RESPONSIVE KEEPS THE RATIO, NOT THE PIXELS (§11). Measured on a true
   390px viewport, the first mobile value reproduced the very defect it was
   meant to fix: heading → lockup 39px against an in-lockup maximum of 21px
   and a lockup → sentence distance of 40px — the heading was again as far
   from the identity as the identity's own explanation. The pause is now
   width-relative and lands at ~65px: 3.1× the block's strongest internal
   bond, 1.6× the bond to its sentence — the same two ratios the desktop
   frame holds. It stays well inside the section rhythm (2 × 47px of section
   padding), so a boundary INSIDE a block never grows louder than the
   boundary BETWEEN blocks. */
@media (max-width: 720px) {
  .gi-prov-head { margin: 0 0 clamp(3.5rem, 15vw + .5rem, 4.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .gi-group-markbox::after,
  .gi-group-desc,
  .gi-group-sig {
    animation: none !important;
    background-position: calc(50% + 16vw - var(--dxc, 0px)) 0, 50% 50% !important;
  }
}

/* The seal standing on a lit surface. It carries its own stacking context —
   the same declaration the lockup makes, and for the same measured reason:
   without one, the fixed-attachment glint layers of the facets are not
   painted at all. Size arrives as `--seal` from the context that places it. */
.gi-markcut {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: block;
  width: var(--seal, 34px);
  flex: none;
}

.gi-prov-seal { --seal: clamp(42px, 5vw, 52px); }

/* The membership sentence: what belonging MEANS for the reader — the one
   thing the identity above cannot say by itself. Held at the reading measure
   and set off by the block's own pause, so the section reads as
   label → identity → meaning rather than as a stack of lines. */
.gi-prov-human {
  margin: clamp(26px, 3.6vh, 38px) 0 0;
  max-width: var(--measure);
  color: var(--muted);
  font-size: clamp(.9rem, .86rem + .25vw, 1rem);
}

/* THE ECOSYSTEM PASSAGE (Founder finding, 2026-08-20): the step from this
   product out to the group it belongs to. It is not a section link, so it
   does not sit in the section row; it names where it leads on two lines —
   the group, then the ecosystem it is — in the same subordinate relation the
   full presentation uses. Text only: the mark appears once per surface. */
.gi-passage {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 20px;
  color: var(--muted);
}
/* the © line opens the closing column — a block line, not an inline crumb */
footer.section > .gi-provenance { display: block; }

/* ONE VOICE IN THE CLOSING (FOUNDER GO — FOOTER ALL PAGES, 2026-08-21).
   Every line of the footer except the © reads in ONE colour — the colour the
   rights row already held — and every link in it is underlined. This
   supersedes, deliberately, the two earlier registers of 2026-08-20: the ways
   onward in quiet gold (FR-156/158) and the slightly-gold group name
   (FR-159). The reason the earlier readings gave — «a person must see it is
   pressable» — is now carried by the underline, which says the same thing
   without a second colour in a six-line closing. */
.gi-foot-way {
  color: var(--muted);
  text-decoration: underline;
}
.gi-foot-way:hover { color: var(--text); }

/* THE GROUP LINE UNDER THE © (Founder GO, 2026-08-21): the WHOLE line — the
   group's name and its descriptor — is one underlined link to the ecosystem,
   in the closing's own colour. On a phone it drops to a smaller, tighter
   register so it keeps to ONE line and takes no extra visual rank. */
.gi-foot-group {
  margin: 0;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  max-width: var(--measure);
}
.gi-fg-line { color: var(--muted); text-decoration: underline; }
a.gi-fg-line:hover { color: var(--text); }

@media (max-width: 720px) {
  /* The mobile register stops at .64rem/700 with the tracking tightened, so
     the line stays ONE line at 390px (measured 2026-08-20; the size floor is
     kept, the chroma reasoning that produced it no longer applies now that
     the line is not gold). */
  .gi-foot-group { font-size: .64rem; font-weight: 700;
                   letter-spacing: .08em; white-space: nowrap; }
}

/* The revision date closes the document (Founder visual correction,
   2026-08-20). It is a property of the TEXT — it belongs where the text ends,
   at the reading column's left edge, in the quietest register the page owns,
   after a pause large enough that it is not read as another paragraph. */
.prose .gi-legal-updated {
  /* scoped to the prose so the declaration is the one that actually paints:
     `.prose p` (0,1,1) outranks a bare class, and a colour that loses is a
     lie in the token file. */
  margin: clamp(30px, 5vh, 54px) 0 0;
  color: var(--faint);
  text-transform: none;
  letter-spacing: .02em;
}

/* ── THE LEGAL PAGE OPENS ON THE MARK'S AXIS (Founder visual review,
   2026-08-20) ──────────────────────────────────────────────────────────

   Same class of drift the payment screens carried, same cause: the mark is a
   column that centres itself, and the block under it was set to the page's
   left edge, so the opening read as a text panel placed beside the identity
   instead of the page's own beginning. Measured before: the mark on the
   section axis, the title and the nav at `text-align: start`.

   What moves is the OPENING only — title and the sibling paths. The document
   below keeps its reading measure and its left edge: a legal text is read,
   not looked at, and centring a paragraph would damage the one thing these
   pages exist to do.

   The title keeps its ratified scale — the `--gap-brand` boundary and the
   display clamp are unchanged. It gains one property: a balanced wrap, so a
   centred title splits into even lines instead of a long line and an orphan.
   A measure was tried and removed by measurement: at this tracking it forced
   a third line, and three lines of display capitals is heavier than the two
   the copy actually needs. */
.gi-legalhead {
  text-align: center;
  margin-top: var(--gap-brand);
}
.gi-legalhead h1 {
  margin: 0;
  /* COMPACT, AND ONE STEP ABOVE THE TRANSACTIONAL LINE (Founder decision A on
     LEGAL-TITLE-SCALE, 2026-08-21). The title read as the heaviest type on the
     quietest page in the product: measured 32.3px at 1440 against the payment
     outcome's 22.1px on the surfaces the Founder accepted as the reference
     direction. It steps down to 24.8px at 1440 — a title still, 1.12x the
     transactional line rather than 1.46x — and lands at 18.4px on a phone,
     where the two registers converge because a small screen compresses both.
     Not mechanically equal to billing by CSS: a page title and a status line
     are different jobs; the agreement asked for is visual scale, and that is
     what the numbers hold. All three legal pages share this rule, which is
     the decision itself — one class, one typography, no per-page modifier. */
  font-size: clamp(1.15rem, 1rem + .62vw, 1.46rem);
  line-height: 1.2;
  text-wrap: balance;
}
.gi-legalhead .row {
  justify-content: center;
  gap: 20px;
  margin-top: 22px;
}

/* ── THE PAYMENT RESULT — ONE CENTRED COLUMN (Founder visual review,
   2026-08-20) ──────────────────────────────────────────────────────────

   The screen after Stripe says one thing about one event: what happened,
   what it means, what to do next. The mark stands centred above it, and the
   message belongs under the mark — set left, the block read as a separate
   large text panel placed beside the identity, and the display scale
   (measured 42.5px against 20.7px of the copy it introduces, 2.05x) made a
   receipt shout where a transaction has to reassure.

   Three properties, stated once here so no call site can re-dress them and
   the two states of one journey cannot drift apart:

     axis     the whole column sits on the mark's axis;
     scale    the outcome line is ONE STEP above the copy (~1.15x), not a
              display heading — it is a statement, not a headline;
     colour   the structural silver of `.engraved`, which is brighter than
              the supporting copy's `--muted` and therefore keeps the
              hierarchy without an accent. Gold is reserved by law for what
              a message is ABOUT; a payment outcome is not a subject to
              celebrate, and gold on success also broke the pair with cancel.

   The rhythm is the closing's own two-level idea, one register larger: the
   outcome and its explanation bind, the action takes a clear pause. */
.gi-payres {
  text-align: center;
  margin-top: var(--gap-brand);
}
.gi-payres #gi-title {
  /* COMPACT, NOT SMALL (Founder visual review, 2026-08-20, second pass on the
     payment outcome). The centred composition was accepted; the outcome line
     was still carrying more of the screen than a transaction needs. It steps
     down once more — measured 23.8px → 22.1px at 1440, 19.1px → 18.0px on a
     phone — and the hierarchy it must keep is unchanged: uppercase, the
     display tracking and the structural silver keep it a heading above the
     sentence-case copy, so the step above that copy stays legible (1.07× at
     the desktop reading floor, 1.10× on a phone) without a display effect. */
  font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem);
  line-height: 1.35;
  margin: 0;
}
.gi-payres .lede {
  margin: 18px auto 0;
}
.gi-payres > p + p,
.gi-payres #gi-state {
  margin-top: 14px;
}
.gi-payres .row {
  justify-content: center;
  margin-top: clamp(26px, 4vh, 36px);
}

/* THE CLOSING READS AS FOUR LEVELS, AND THE AIR SAYS SO (Founder review,
   2026-08-20, second return on the closing's internal rhythm):

     A  © Gold Intelligence                       ┐ identity
        Media Holding · Intelligence Ecosystem    ┘
     B  rights · cookie · contact · ways onward     navigation
     C  operating entity                          ┐ service information
        dealer comparison                         ┘
     D  Powered by Media Holding                    §9

   The previous values were two-level already (12 inside a group, 22 between
   groups) and the Founder still read the column as one undifferentiated
   stack — measured, the reason is the RATIO: 12→22 is 1.8×, and at these
   type sizes the leading inside each line box eats most of that difference,
   so the boundary between levels never became louder than the binding
   inside one. The rhythm therefore keeps its two levels and states them
   clearly: 10px binds the lines of one meaning, 30px opens the next level
   (3.0×). Both are named, so a level boundary can never again be typed as
   an ad-hoc number at one call site, and the wrapped rights row keeps the
   BINDING value — a link that wrapped to a second line is still the same
   level, not a new one. */
/* FOUR LINES AT ONE DISTANCE (FOUNDER GO — FOOTER ALL PAGES, 2026-08-21).
   The Founder pointed at a distance that already existed — the one between
   the operating-entity line and the dealer line — and set it as THE distance
   between all four text lines of the closing:

     ©  Gold Intelligence                        ┐ --foot-edge
     1  Media Holding · Intelligence Ecosystem   ┘
     2  rights · cookie · contact · ways onward    --foot-line
     3  operating entity                           --foot-line
     4  dealer comparison                          --foot-line
     D  Powered by Media Holding                   --foot-edge (unchanged)

   THE TWO TOKENS ARE INK DISTANCES, NOT MARGINS. The four lines are set in
   three different registers, so equal margins do NOT read as equal gaps: the
   leading inside each line box differs, and it is the gap between the INK
   that a person sees. Each boundary therefore subtracts its own leading, and
   every subtracted number is a measurement of the rendered page, not a taste
   — see the block comment above each one. Each subtraction is stated in REM
   and not in px, because the closing's type is rem-based and the reading
   floor moves with the viewport (16/17/18px): a px compensation held only at
   the width it was measured on, and the gaps drifted by up to 3px on the
   narrower ladder. In rem the leading and its compensation move together, so
   the four gaps stay equal at every reading floor. */
footer.section > * + * { margin-top: var(--foot-line); }
/* © → line 1: 8px of cap-only line box above, 8px of cap-only box below */
footer.section > .gi-foot-group { margin-top: calc(var(--foot-edge) - .76rem); }
/* line 1 → line 2: an underlined cap line above, a mixed-case row below */
footer.section > .gi-foot-rights { margin-top: calc(var(--foot-line) - .76rem); }
/* line 2 → line 3: an underlined mixed-case row above, a label line below */
footer.section > .gi-foot-notes { margin-top: calc(var(--foot-line) - .47rem); }
/* line 4 → §9: a label line above, a cap-only signature below */
footer.section > .gi-foot-sig { margin-top: calc(var(--foot-edge) - .53rem); }
/* a link that wrapped to a second row is still the same line of the
   closing, so the wrapped row stands at the same distance (its own
   leading is larger than a margin's, hence the larger subtraction) */
/* SPECIFICITY, NOT ORDER (measured 2026-08-21): the row also carries the
   generic `.row`, whose `gap: 14px` is declared LATER in this file, so the
   closing's own single-class rule never applied — the row has been running
   on the generic gap all along. The closing states it with enough
   specificity to win, and keeps the 14px the row actually renders
   horizontally: this GO moves vertical distance, not horizontal rhythm. */
footer.section nav.gi-foot-rights { gap: calc(var(--foot-line) - .56rem) 14px; }

/* THE CLOSING'S TYPOGRAPHY IS THE CLOSING'S OWN (Founder review,
   2026-08-20 — /privacy is the reference look). On the B2B shell a legacy
   `nav a` rule re-dressed the canonical rights row: uppercase, .18em
   tracking, a 16px left margin on EVERY link — the row left the © axis and
   changed voice per page. The closing states its own register with enough
   specificity that no shell can re-style it. Every link in it is underlined
   (Founder GO, 2026-08-21) — that, and not a second colour, is what tells a
   person the line is pressable. */
footer.section nav a {
  margin: 0;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--muted);
  text-decoration: underline;
}
footer.section nav a:hover { color: var(--text); }
footer.section nav a.gi-foot-way { color: var(--muted); font-weight: 500; }
footer.section nav a.gi-foot-way:hover { color: var(--text); }
footer.section a.gi-fg-line,
footer.section nav a { text-underline-offset: .28em; text-decoration-thickness: 1px; }
.gi-foot-notes .gi-foot-note { margin: 0; }
/* line 3 → line 4: two label lines of the same register — the boundary the
   Founder pointed at, and the one the other three are matched to */
.gi-foot-notes .gi-foot-note + .gi-foot-note { margin-top: calc(var(--foot-line) - .59rem); }

.gi-passage-name {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-lo);
}
.gi-passage-desc {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
.gi-passage:hover .gi-passage-name { color: var(--gold-hi); }

/* ── THE BOARD ROW — [ PRODUCT ] [ POSITION / DEALER ] [ PRICE ] ──────────
   (Founder GO, 2026-08-20.)

   One composition per row, not a table with a picture stuck in front of it.
   The photograph is added to the LEFT of the reading column rather than taken
   out of its width, so the position, the dealer and the price keep exactly
   the measure they were read at before — the board gains an object, it does
   not lose its type.

   Six different physical forms, one visual rank: a disc and a tall bar are
   normalised by what they actually put on the screen (luminous mass) and by
   where their own optical centre is, both measured per file in
   `app/design/product_geometry.py`. Nothing here is a per-asset pixel. */
.gi-board {
  max-width: calc(var(--measure) + var(--prod-stage) + var(--prod-gap));
}

.gi-brow {
  display: grid;
  grid-template-columns: var(--prod-stage) minmax(0, 1fr) auto;
  gap: var(--prod-gap);
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.gi-brow-name {
  display: block;
  font-weight: 600;
  font-size: clamp(.95rem, .9rem + .25vw, 1.05rem);
}

.gi-brow-dealer {
  display: block;
  margin-top: 4px;
  color: var(--faint);
  font-size: clamp(.76rem, .72rem + .2vw, .85rem);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gi-quote { font-size: 1.02rem; font-weight: 600; }

/* TWO GOLD PRICES, TWO ROLES, ONE VISIBLE ORDER. The spot is the band's
   single anchor — the market's own truth, stated once; the six dealer quotes
   are what that truth costs in the shops, stated six times. Measured, the
   intended "material vs flat tone" distinction did NOT survive at this size:
   the anchor and a quote rendered at luma 125.7 vs 124.4, i.e. the same rank,
   which would have left six repeated numbers competing with the one they
   derive from. The rank is therefore carried by SIZE, which costs the scene
   no extra light — the alternative, making the anchor brighter, would have
   done exactly what this surface must not do. */
.gi-board-head { justify-content: space-between; align-items: baseline; }

.gi-spot {
  margin: 0;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.42rem);
  letter-spacing: .06em;
}

/* The stage. THE PHOTOGRAPH JOINS THE SCENE, IT IS NOT PASTED ONTO IT: all
   six assets were shot on the same constant `rgb(14,14,14)` backdrop (verified
   identical on every edge of every file), and `lighten` keeps only what is
   brighter than the page beneath. The studio's black therefore dissolves into
   the product's own night — the page's depth plane and grid keep showing
   through around the metal — while the object itself, far brighter than any
   part of the substrate, is untouched. No cut-out, no alpha matte, no halo,
   no re-encode: the frame simply stops existing. */
/* MEASURED, NOT ASSUMED (this is the second construction; the first was
   wrong and the render said so). `mix-blend-mode` on the stage cannot reach
   the substrate: the page's depth plane is painted in its own layer and the
   content sits inside its own stacking context, so the photograph's studio
   black composited as an OPAQUE NEUTRAL GREY rectangle — measured (14,14,14)
   against a navy page reading (12,15,20). Neutral grey inside a navy scene is
   a hue break, and that is what read as "a picture stuck onto the page".

   The blend therefore happens INSIDE the stage, against a floor of the scene's
   own colour: `lighten` keeps whatever is brighter than `--bg`, so the studio
   backdrop lands on the page's own floor and only the metal survives. The
   stage is isolated so the composite can never depend on what an ancestor
   does, and clipped so a scaled asset cannot spill raw backdrop outside it —
   measured safe: after normalisation every one of the six objects, reflection
   included, lies inside x 0.14…0.86 and y 0.08…0.99 of its stage, so the clip
   removes empty backdrop and never a part of an object. */
.gi-prod {
  position: relative;
  display: block;
  width: var(--prod-stage);
  height: var(--prod-stage);
  overflow: hidden;
  isolation: isolate;
  /* THE SHELF. Six objects of six shapes read as one rank only if they STAND
     on one line; placed by their centres they float at six heights, which is
     what the board did before (Founder finding, 2026-08-20, finding 4). This
     is the stage's own property — where a thing standing here stands — and
     `--py` is the object's own contact seam, measured per file. The number is
     bound to `product_geometry.STAND_LINE` by the test suite so the two
     halves of one placement cannot drift apart. */
  --stand: 84.5%;
}

/* Scale and offset come from the row (measured constants), never from here:
   `--pk` is the contain fit that brings every object's own box to ONE size,
   `--px` is the object's own horizontal centre and `--py` its standing line,
   both as a share of the stage. The asset keeps
   its proportions exactly — one uniform scale, no crop, no object-fit
   distortion — and is allowed to stand outside the stage, because the stage
   has no visible edge to break. */
.gi-prod-img {
  position: absolute;
  width: calc(var(--pk, 1) * 100%);
  height: auto;
  /* THE SITE-WIDE `max-width: 100%` ON EVERY IMAGE MUST NOT REACH THIS ONE (root
     cause, measured 2026-08-20). The stage deliberately places an asset WIDER
     than itself — the object inside the file is a fraction of its frame, so
     bringing the object to one size means the frame often exceeds the stage.
     The global cap silently clamped every scale above 1.0 back to 1.0, and
     because only some assets scale up, the clamp is what produced the whole
     defect the Founder saw: the 1/4 oz Kangaroo (scale 1.23) rendered at 80%
     of its intended size while the bars, all scaling DOWN, rendered exactly
     right. The cap is released here and nowhere else. */
  max-width: none;
  max-height: none;
  left: calc(50% - var(--px, 50%));
  /* the object's standing line, not its middle — see `--stand` above */
  top: calc(var(--stand, 50%) - var(--py, 50%));
  /* the studio backdrop becomes transparency, so the page's own depth, grid
     and light stay visible around the object — see `product_matte_defs()` */
  filter: url(#gi-prod-matte);
}

/* Narrow viewports keep the SEMANTICS, not the geometry (§11): the object
   stays an object rather than an icon, the position keeps the line above its
   dealer, and the price keeps its own column — the row never becomes a
   two-line stack in which a price could float away from what it prices. */
@media (max-width: 720px) {
  :root {
    --prod-stage: 3rem;
    --prod-gap: 14px;
  }
  .gi-brow { padding: 12px 0; }
}

@media (max-width: 380px) {
  :root { --prod-stage: 2.7rem; --prod-gap: 11px; }
}

/* ── Utility ────────────────────────────────────────────────────────────── */
.stack > * + * { margin-top: var(--gap, 18px); }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.grid-2 { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* MEANINGS READ AS ROWS, NOT AS RAGGED COLUMNS (Founder finding, 2026-08-19).
 * Four parallel capabilities laid across four columns inherit the ONE thing
 * the material architecture forbids: card geometry. With nothing drawn, the
 * differing text lengths draw it anyway — four blocks starting on one line and
 * ending on four, which is what the review read as "four mismatched cards
 * without the cards". A row list separates by hairline and space (dm-208's
 * law), reads at one rhythm however long a line runs, keeps the name-then-
 * meaning hierarchy, and is already what the surface becomes on a phone — so
 * narrow and wide stop being two different compositions.
 * The name column is the reading measure's own left edge; on a phone the row
 * simply stacks. */
.gi-rows { display: grid; max-width: var(--content); }
/* The MATERIAL is `.mat-info` — the hairline-separated informational block the
 * system already owns; `.gi-row` adds only the two-column reading layout, so
 * no second material is invented for the same job. */
.gi-row {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) 2fr;
  gap: 10px 34px;
  padding: 20px 0 22px;
  align-items: start;
}
.gi-row:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 719px) {
  .gi-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0 18px; }
}
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}