/* ==========================================================================
   /urunler/adres-cozumleri/  +  /en/products/address-solutions/
   ONE STYLESHEET FOR THE PAIR — authored here, copied to the English slug at
   apply time with --css-from, so the two languages cannot drift.

   ── VARIANCE PASS, 2026-08-17 ────────────────────────────────────────────────
   variance-plan.json assigns this pair:

       opening   E-DARK      the masthead itself is the indigo band
       dark      OPEN        and it is the only dark band on the page
       sections  4           masthead · ledger · report · method + close

   ARCHETYPES.md, on why this pass exists: 76 of 76 pages opened with a headline
   left and a mist plate right, and closed on an indigo slab. Screenshotted side
   by side, /urunler/adres-cozumleri/ and /urunler/geoview/ were the same page
   pixel for pixel down to the position of the eyebrow pill. This page is now
   the inverse — a navy first screen and a light body — and its dominant content
   shape is a TWO-COLUMN RESOLUTION TABLE plus a comparison ledger, not a card
   grid, which is the shape the pass exists to break up.

   THE SILHOUETTE, so the next person can check it at a glance:

       DARK MASTHEAD (h1 + two-stage pipeline rail + counts)
       └ paper: four-row LEDGER — capability | who buys it, in two groups
         └ mist: ONE report panel — 2-col resolution TABLE + wide FACTS strip
           └ paper: three-step ladder + chip row + MIST CLOSING RAIL

   Nothing below is a literal colour, radius or font stack: every value is a
   token from ng-foundation.css, including the dark-band fills, because
   `.is-dark` redefines --ng-surface / --ng-surface-sunken / --ng-hairline as
   paper at 6 / 10 / 16 percent (ng-foundation.css §3). No `!important`.

   WHAT THIS SHEET DELIBERATELY DOES NOT CONTAIN. .ng-lead__note,
   .ng-out-band__note, .ng-vals__note, .ng-how__note, .ng-how__links,
   .ng-steps__pills and .ng-env were promoted into ng-shared.css §14;
   .ng-dtable and .ng-facts are §15. Only genuine divergences and this page's
   own components are written here.

   TWO BLOCKS ARE COPIES, ON PURPOSE, and both are flagged where they start:
   §1 .ng-dlead is fmcg's E-DARK masthead and §5 .ng-close__rail is akaryakıt's
   non-dark close. PATTERNS.md's rule is "copy it; do not promote until three
   pages want one". This is the second page to want each. THE THIRD SHOULD
   PROMOTE BOTH — point-report is also E-DARK/OPEN in variance-plan.json, and
   three divergent copies of a masthead is how .ng-env ended up with nine
   different bodies.
   ========================================================================== */


/* ==========================================================================
   1. THE DARK MASTHEAD — the E-DARK opening
   ==========================================================================
   `class="ng-section is-dark"`, NOT `ng-section--dark`. `--dark` supplies the
   CENTRED CLOSING composition (text-align:center plus a centred flex
   container); this is a left-aligned masthead, so it takes `is-dark` alone,
   which is what flips the palette tokens and sets the 88px dark pad in
   ng-foundation.css §3 and §7. akaryakıt hit that trap first and it is recorded
   in PATTERNS.md.

   NOR IS IT .ng-masthead. That primitive sets background:var(--ng-ground) and
   its own 28/52 padding, and its two-column grid exists to hold an aside this
   page does not have. The two class names it DOES borrow —
   .ng-masthead__title and .ng-masthead__proof — are the type scale and the
   counts strip, identical to every other leaf on purpose: a visitor must still
   know this is the same site.

   Body copied from pages/fmcg.css §1 (the first E-DARK page), including its
   reasoning. See the promotion note at the top of this file.
   ========================================================================== */

/* (0,3,0) doubled, to beat `.ng-v2 .ng-section.is-dark{padding-block:88px}` in
   ng-foundation.css §7 — same specificity, and this sheet loads last. 88px of
   navy above the breadcrumb reads as a gap between the header and the page;
   36px reads as the top of the band. The bottom keeps almost the full dark
   pad, because the tonal break into the light body below is the largest
   transition on the page and has to be paid for. */
.ng-v2 .ng-dlead.ng-dlead{
  padding-block:36px 72px;
}
.ng-v2 .ng-dlead__copy{ min-width:0; }

/* THE HEADLINE HAS NO ASIDE TO AVOID, so §4's 18ch clamp is wrong here — that
   ceiling exists to stop a split headline running under the plate. (0,4,0) via
   the doubled class inside .ng-dlead, so it beats ng-shared's own doubled
   (0,3,0) rule without touching the shared file. 24ch, not `none`: the Turkish
   headline is 44 characters and at 62px with no ceiling it set as one 1100px
   line, which reads as a strapline rather than a headline. */
.ng-v2 .ng-dlead .ng-masthead__title.ng-masthead__title{
  margin:16px 0 0;
  max-width:24ch;
  font-size:clamp(2.3rem, 5.4vw, 3.85rem);
  letter-spacing:-0.03em;
}
/* 62ch rather than §4's 52ch. The client's own lede is two long sentences and
   the copy column here is the whole container, not 58% of it. */
.ng-v2 .ng-dlead__lede{
  margin-top:20px;
  max-width:62ch;
  color:var(--ng-muted);              /* #C6C9EA on navy — 9.22:1 */
}
.ng-v2 .ng-dlead__proof{
  margin-top:38px;
}
/* The counting note sits under the strip on the dark band; the muted token is
   already inverted, so nothing here declares a colour. */
.ng-v2 .ng-dlead .ng-lead__note{
  margin-top:14px;
  max-width:78ch;
}


/* --- 1b. .ng-xform — the need, and the two stages it splits into -----------
   THIS IS THE OLD .ng-aside, TURNED THROUGH NINETY DEGREES. Every other leaf
   puts the hub's need line in a mist plate to the RIGHT of the h1; that plate
   is the single most repeated shape on the site and it is what forces the
   headline into a 58% column. Here the same four pieces of copy — the label,
   the quoted need line, the "iki parçalı" sentence and the two halves — run
   across the foot of the band, and the headline gets the full container.

   IT IS NOT fmcg's .ng-qrail, which is three hairline-divided cells of prose.
   This product is a PIPELINE: an address becomes a point, a point becomes a
   region, and the shared word "NOKTA / POINT" is what chains the two stages
   together. So the two halves are PLATES with a lockup at the top of each,
   not columns of text — the reader should be able to take the shape of the
   product without reading a sentence.

   THE PLATES ARE var(--ng-surface-sunken), which inside .is-dark resolves to
   paper at 10% over the navy (ng-foundation.css §3). That is a token, not a
   literal, and the pair is measured in that file: muted #C6C9EA on the 10%
   sunken composite #31356E is 6.94:1, ink #FAFBFF is higher still. */
.ng-v2 .ng-xform{
  margin-top:40px;
  padding-top:30px;
  border-top:1px solid var(--ng-hairline);   /* rgba(250,251,255,.16) on dark */
}
.ng-v2 .ng-xform__label{
  margin:0 0 12px;
  color:var(--ng-accent);             /* #FF9BC9 on navy — 7.68:1 */
}
/* THE DOUBLED CLASS HERE IS NOT DECORATIVE. ng-shared's .ng-aside__quote writes
   margin:0 at (0,2,0), which beats `body .content-wrapper blockquote` at
   (0,1,2) — but the theme also ships

       body .content-wrapper blockquote:not(:first-child){ margin-top:2.5rem }
       body .content-wrapper blockquote:not(:last-child) { margin-bottom:2.5rem }

   and `:not()` counts its argument, so those are (0,2,2) and they win. This
   quote is neither the first nor the last child of its block, so at (0,2,0) it
   renders with 40px of unasked-for air above AND below. fmcg measured exactly
   that and it is the same trap as the h2 margin-top:50px rule. (0,3,0) settles
   it. The ::before/::after reset is there because Neuros hangs a decorative
   glyph off blockquotes in some contexts and a stray " in front of the hub's
   own words would read as scare quotes. */
.ng-v2 .ng-xform__quote.ng-xform__quote{
  margin:0; padding:2px 0 2px 16px;
  border-left:3px solid var(--ng-accent);
  font-family:var(--ng-font-display); font-weight:600;
  font-size:20px; line-height:1.4;
  color:var(--ng-ink);                /* #FAFBFF on navy — 14.46:1 */
  max-width:60ch;
}
.ng-v2 .ng-xform__quote::before,
.ng-v2 .ng-xform__quote::after{ content:none; }
.ng-v2 .ng-xform__body{
  margin:16px 0 0;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);
}
.ng-v2 .ng-xform__steps{
  list-style:none; margin:22px 0 0; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:14px;
}
@media (min-width:760px){
  .ng-v2 .ng-xform__steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
}
.ng-v2 .ng-xform__step{
  min-width:0;
  padding:20px 22px;
  background:var(--ng-surface-sunken); /* paper at 10% inside .is-dark */
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
}
/* NOT A TRACKED LABEL — a display lockup. An 11px tracked version was built
   first and pulled: at label size the two stages read as chrome above a
   paragraph, when they are the most important thing in the block. At 19px in
   the display face the pipeline is the thing you see and the sentence is the
   footnote, which is the right order. Authored pre-uppercased with
   text-transform:none, because uppercase maps i→I and would give "ADRES" a
   dotless I on any string that had one. */
.ng-v2 .ng-xform__k{
  margin:0;
  display:flex; align-items:center; flex-wrap:wrap; gap:2px 10px;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:19px; line-height:1.25; letter-spacing:.01em;
  color:var(--ng-ink);
}
/* The arrow is the only accent in the plate and it is what makes the two
   stages read as one chain: stage one ends on NOKTA and stage two begins on
   it. #FF9BC9 on the 10% sunken composite is 5.42:1 — over the 4.5 bar even
   though at 19px it would only need 3.0. */
.ng-v2 .ng-xform__ar{
  color:var(--ng-accent);
  font-weight:600;
}
.ng-v2 .ng-xform__k2{ color:var(--ng-accent); }
.ng-v2 .ng-xform__d{
  margin:12px 0 0;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);              /* 6.94:1 on the 10% sunken composite */
}


/* ==========================================================================
   2. SECTION 20 — THE LEDGER
   ==========================================================================
   TWO OLD SECTIONS, ONE ROW EACH. The page ran a 2x2 grid of capability cards
   and, 900px further down, a numbered list of user profiles whose only content
   beyond its own sentence was a tracked label naming which capability it
   belonged to. That label was a cross-reference standing in for adjacency.
   Put the two side by side and it is not needed: WHAT IT DOES on the left, WHO
   BUYS IT on the right, four rows, two groups.

   NOT CARDS. Eight raised white boxes on one light band is the stack this pass
   was called to break, and a card states nothing about how it relates to the
   card beside it. A ruled row does: the hairline runs the full container, the
   two halves of the row share it, and the eye reads across rather than down.

   NOT .ng-dtable EITHER, although it is a comparison. Both halves carry a
   name plus a two-line sentence; a <table> with four prose cells per row sets
   its columns from the longest paragraph and reads as a spreadsheet of essays.
   The table on this page is section 30's, where the cells are genuinely short.
   ========================================================================== */

.ng-v2 .ng-led__group + .ng-led__group{ margin-top:42px; }

/* Doubled class (0,3,0) — `body .content-wrapper h3:not(:first-child)` at
   (0,2,2) sets margin-top:50px, and the second group heading is not a first
   child. Same defence as every heading in ng-shared §11. */
.ng-v2 .ng-led__gname.ng-led__gname{
  margin:0 0 4px;
  font-size:21px; line-height:1.3;
  color:var(--ng-ink);
}
.ng-v2 .ng-led__list{
  list-style:none; margin:0; padding:0;
}
.ng-v2 .ng-led__row{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:16px; row-gap:14px;
  align-items:start;
  padding:22px 0;
  border-bottom:1px solid var(--ng-hairline);
}
/* The 2px top rule marks the head of a group the way .ng-steps marks a step —
   it is the same idiom, one weight up, and it is what stops two groups of two
   reading as one run of four. */
.ng-v2 .ng-led__list > .ng-led__row:first-child{
  border-top:2px solid var(--ng-hairline);
}
@media (min-width:900px){
  .ng-v2 .ng-led__row{
    grid-template-columns:auto minmax(0,1.08fr) minmax(0,0.92fr);
    column-gap:36px;
  }
}
/* 11px at .1em (ratio .10) is a tracked label BY MEASUREMENT, which is what
   ng-page-check actually tests. tabular-nums so 01–04 stack in a straight
   column. padding-top is optical against a 20px name, not metric. */
.ng-v2 .ng-led__n{
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
  color:var(--ng-accent);             /* 5.45:1 on the ground */
  font-variant-numeric:tabular-nums;
  padding-top:16px;                   /* clears the 44px icon chip's top edge */
}
.ng-v2 .ng-led__what{ min-width:0; }
/* Doubled class again: the h4 is NOT the first child of its cell — the icon
   chip is — so `h4:not(:first-child){margin-top:50px}` matches it exactly. */
.ng-v2 .ng-led__name.ng-led__name{
  margin:14px 0 0;
  font-size:20px; line-height:1.3;
  color:var(--ng-ink);
}
.ng-v2 .ng-led__body{
  margin:8px 0 0;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);
  max-width:52ch;
}

/* THE SECOND HALF OF THE ROW. It is separated by a rule rather than by a fill,
   because a tinted cell inside a light band would be a third surface role and
   there are two. Below 900 the rule moves to the left edge, where it reads as
   a hanging indent under the capability it belongs to instead of as the top of
   an unrelated block. */
.ng-v2 .ng-led__who{
  min-width:0;
  padding-left:18px;
  border-left:2px solid var(--ng-hairline);
  grid-column:2;
}
@media (min-width:900px){
  .ng-v2 .ng-led__who{
    grid-column:3;
    padding-left:28px;
    padding-top:6px;
  }
}
.ng-v2 .ng-led__wlabel{ margin:0; }
.ng-v2 .ng-led__wname{
  margin:10px 0 0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:17px; line-height:1.35;
  color:var(--ng-ink);
}
.ng-v2 .ng-led__wbody{
  margin:8px 0 0;
  font-size:15px; line-height:1.6;
  color:var(--ng-muted);
}


/* ==========================================================================
   3. SECTION 30 — ONE REPORT, TWO REGISTERS
   ==========================================================================
   The old page used .ng-out-band__pair: two half-width .ng-out panels side by
   side, which is what almost every leaf on this site shows. They were never
   two artefacts. You hand over one address list and get back one document
   whose first part resolves the lines and whose second part summarises the
   region those lines define — so it is one panel, full container width, with
   two labelled registers inside it.

   The anchor target: the masthead's ghost button lands here and the theme's
   sticky header would otherwise cover the panel chrome. ng-shared §14 sets
   104px; below 1364 the header is shorter.
   ========================================================================== */

@media (max-width:1364px){
  .ng-v2 .ng-out-band{ scroll-margin-top:84px; }
}

/* ng-shared §13b pins the LAST .ng-out__foot with margin-top:auto so two
   panels of unequal length close on one baseline. There is only one panel
   here and it is not height-constrained, so that rule has nothing to do except
   push the closing sentence away from the strip above it. Same selector, same
   (0,3,0), and this sheet loads after ng-shared — so restating it is the whole
   fix. */
.ng-v2 .ng-rep .ng-out__body > .ng-out__foot:last-child{ margin-top:18px; }

/* The second register's label. .ng-out__label is authored for the top of a
   panel body, so it carries no top margin; here it opens a register in the
   middle of one. */
.ng-v2 .ng-rep__k{
  margin-top:30px;
}

/* --- 3a. .ng-res — the resolution table -----------------------------------
   TWO COLUMNS, NOT FOUR. Line in, point out. A four-column version (line /
   point / precision / status) was built first and pulled at 390: the panel's
   inner width there is ~314px, so the raw address column came out at ~90px and
   set a 39-character Turkish address as nine lines. PATTERNS.md is explicit
   that a table which only fits by scrolling has hidden a column from every
   phone, and .ng-dtable__wrap is a safety valve, not the layout. Precision and
   status are properties OF the match, not columns of their own, so they live
   inside the result cell where they wrap under the point on a phone and sit
   beside it above 620.

   THE INPUT LINE IS THE ROW HEADER, semantically — the row's subject is the
   string you typed — and it is rendered as a field VALUE, not as prose: a mist
   plate on the white panel with the text at the reading floor. A buyer of
   address software is looking for their own messy data in it, and the second
   row is the first row typed without capitals, punctuation or the word
   "mahalle". If the input is set as prose the whole demonstration collapses
   into a paragraph.

   NO MONOSPACE. --ng-font-mono was removed from the system entirely and a
   Turkish address is proportional text, not code. The plate does the "this is
   raw input" work a mono face would otherwise have to.
   ------------------------------------------------------------------------- */

/* (0,3,0) beats ng-shared's `.ng-v2 .ng-dtable tbody th` at (0,2,1): three
   classes against two classes plus an element. */
.ng-v2 .ng-dtable .ng-res__in{
  font-family:var(--ng-font-body);
  font-weight:400;
  padding-right:14px;
  vertical-align:top;
}
.ng-v2 .ng-res__raw{
  display:inline-block;
  padding:9px 12px;
  border-radius:var(--ng-radius-sm);
  background:var(--ng-surface-sunken);
  font-family:var(--ng-font-body); font-weight:400;
  font-size:14px; line-height:1.45;
  color:var(--ng-muted);              /* 5.42:1 on mist */
  overflow-wrap:anywhere;             /* a 39-char address must never overflow */
}
.ng-v2 .ng-dtable .ng-res__in + td{ vertical-align:top; }
.ng-v2 .ng-res__pt{
  display:block;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:16px; line-height:1.35;
  color:var(--ng-ink);
}
.ng-v2 .ng-res__lv{
  display:block;
  margin-top:3px;
  font-size:14px; line-height:1.45;
  color:var(--ng-muted);
}
/* 11px at .1em (ratio .10) — a tracked label by measurement, and the same chip
   idiom as .ng-out__tag and .ng-out__flag, which is the chrome it sits among.
   THREE STATES, NOT TWO: good/bad would make deduplication look like a
   failure, and collapsing two spellings onto one point is the product working.
   is-ok is accent-on-wash, the default is neutral, is-flag is ink-on-mist —
   informational, not alarming. No red: nothing here is an error, and the
   palette deliberately has no third semantic colour. */
.ng-v2 .ng-res__st{
  display:inline-block;
  margin-top:9px;
  padding:4px 9px;
  border-radius:var(--ng-radius-pill);
  background:var(--ng-surface-sunken);
  color:var(--ng-muted);              /* 5.42:1 on mist */
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;
  white-space:nowrap;
}
.ng-v2 .ng-res__st.is-ok{
  background:var(--ng-accent-wash);
  color:var(--ng-accent);             /* 4.87:1 on the wash */
}
.ng-v2 .ng-res__st.is-flag{
  color:var(--ng-ink);                /* 13.04:1 on mist */
}
/* 46/54 rather than an even split. The entered line is a fixed string of at
   most 39 characters; the result cell holds a name, a precision line and a
   chip, and is the one that benefits from the extra room. Set on the ROW's
   children so adding a row type needs no new rule. */
.ng-v2 .ng-res tr > :first-child{ width:42%; }
@media (min-width:620px){
  .ng-v2 .ng-res tr > :first-child{ width:46%; }
}

/* --- 3b. the coverage strip ----------------------------------------------
   ng-shared §15c's .ng-facts is 3 columns from 640 up unless a --4 / --5
   modifier is set, and this register has SIX pairs — so above 960, where the
   cells switch from a top border to a left one, cell 4 opens the second row
   with a vertical rule dangling at the container's left edge. §15c's own
   comment says the dividers are borders on cells precisely so a wrapped strip
   does not strand a rule; that holds for a strip that wraps by one or two
   cells, not for one that wraps into a full second row. Reset the left border
   on every row start and give the second row a top rule instead, which is what
   the cells already use below 960. */
@media (min-width:960px){
  .ng-v2 .ng-rep__facts .ng-facts__cell:nth-child(3n+1){
    padding-left:0;
    border-left:0;
  }
  .ng-v2 .ng-rep__facts .ng-facts__cell:nth-child(n+4){
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid var(--ng-hairline);
  }
}


/* ==========================================================================
   4. SECTION 40 — CLOSING RAIL
   ==========================================================================
   The dark band is assigned to the OPENING of this page, so the closing
   decision cannot be the indigo slab every page on this site ends on. It is a
   SUNKEN rail instead: mist + hairline holding two white chrome pills, which
   is the second of the site's two surface roles doing exactly its job.

   It sits inside the ladder's section rather than in one of its own, because
   the page has four sections and this is the fourth. The reader who has just
   read the three steps is the reader deciding whether to start them.

   Body copied from pages/akaryakit.css §4, which built it for dark=MIDDLE.
   See the promotion note at the top of this file.
   ========================================================================== */
.ng-v2 .ng-close__rail{
  margin-top:46px;
  padding:26px 22px;
  background:var(--ng-surface-sunken);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__rail{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:44px;
    align-items:center;
    padding:34px 36px;
  }
}
.ng-v2 .ng-close__eyebrow{ margin:0; }
/* Doubled class for the theme's 50px margin-top. This h2 is NOT the first
   child of its block — the eyebrow is — so `h2:not(:first-child)` does match
   it, unlike the section heads. */
.ng-v2 .ng-close__title.ng-close__title{
  margin:14px 0 0;
  font-size:clamp(1.6rem, 3.2vw, 2.1rem);
  line-height:1.15;
  letter-spacing:-0.02em;
  max-width:22ch;
  text-wrap:balance;
}
.ng-v2 .ng-close__lede{
  margin:14px 0 0;
  font-size:17px; line-height:1.6;
  color:var(--ng-muted);              /* 5.42:1 on mist */
  max-width:54ch;
}
.ng-v2 .ng-close__side{
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
@media (min-width:900px){
  .ng-v2 .ng-close__side{ align-items:flex-end; text-align:right; }
}
.ng-v2 .ng-close__actions{ margin-top:0; }
/* 14px for the same reason .ng-cta__meta is: a phone number and an address are
   read and copied, and .04em tracking does not earn the label exception. */
.ng-v2 .ng-close__meta{
  margin:16px 0 0;
  font-family:var(--ng-font-label); font-weight:500;
  font-size:14px; line-height:1.6; letter-spacing:.04em;
  color:var(--ng-muted);
}

.ng-v2 .ng-how__note{
  margin-top:34px;
  max-width:80ch;
}


/* ==========================================================================
   5. RESPONSIVE
   ng-mobile.css §7 carries every 44px hit area (crumbs, buttons, pills, tel)
   at ≤767, at 768–1023 and at exactly 1024. The only interactive elements on
   this page are those primitives — the ledger rows, the resolution table and
   the coverage strip are all static DOM, with no per-row anchor at all, which
   is also why the "four identical Daha Fazla Bilgi links" defect cannot recur
   here. So this block is type and rhythm only.
   ========================================================================== */

@media (max-width:899px){
  /* The ledger loses its third column and the profile drops under the
     capability it belongs to, still on its rule. The capability body loses its
     52ch ceiling because the column is now the whole container. */
  .ng-v2 .ng-led__body{ max-width:none; }
}

@media (max-width:767px){
  .ng-v2 .ng-dlead.ng-dlead{ padding-block:28px 56px; }
  .ng-v2 .ng-xform{ margin-top:32px; padding-top:26px; }
  .ng-v2 .ng-xform__quote.ng-xform__quote{ font-size:18px; }
  .ng-v2 .ng-xform__body,
  .ng-v2 .ng-xform__d{ font-size:16px; }   /* mobile reading floor */
  .ng-v2 .ng-xform__step{ padding:18px 16px; }
  .ng-v2 .ng-xform__k{ font-size:18px; }

  .ng-v2 .ng-led__gname.ng-led__gname{ font-size:19px; }
  .ng-v2 .ng-led__name.ng-led__name{ font-size:18px; }
  .ng-v2 .ng-led__wname{ font-size:16px; }
  .ng-v2 .ng-led__body,
  .ng-v2 .ng-led__wbody{ font-size:16px; }
  .ng-v2 .ng-led__row{ padding:20px 0; }
  .ng-v2 .ng-led__n{ padding-top:14px; }
  .ng-v2 .ng-led__who{ padding-left:14px; }

  /* Sentences, not labels: they take the mobile reading floor like every other
     .ng-note on the site (ng-shared §12 already sets .ng-note to 15px here).
     Only the measure is restated. */
  .ng-v2 .ng-vals__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-lead__note,
  .ng-v2 .ng-out-band__note{ max-width:none; }

  /* Reading floor at mobile. The entered line and the resolved point are the
     data, not chrome, so both come up a step. The status chip stays at 11px:
     tracked at .1em, glanced at, and inside app-replica chrome, which the
     contract allows down to 11px. */
  .ng-v2 .ng-res__raw{ font-size:15px; padding:10px 12px; }
  .ng-v2 .ng-res__pt{ font-size:16px; }
  .ng-v2 .ng-res__lv{ font-size:15px; }

  .ng-v2 .ng-close__lede{ font-size:16px; }
}


/* ==========================================================================
   6. REDUCED MOTION
   ng-shared.css §10 already flattens .ng-card and .ng-arrow under a reduce
   preference — including cancelling ng-components.css's !important marker
   transform, which would otherwise drag every card up and left by half its own
   size — and ng-components.css §8 does the same for .ng-anim. Nothing on this
   page adds motion beyond those two: the pipeline plates, the ledger rows, the
   resolution table and the coverage strip are static DOM with no transitions,
   precisely so a reduce preference has nothing left to switch off here. Left as
   a note rather than an empty block so the next person does not go looking for
   a missing rule.
   ========================================================================== */


/* ==========================================================================
   7. SECTION 30 — THE TWO SAMPLE ARTEFACTS UNDER THE REPORT
   ==========================================================================
   Added by the image rollout. The layout itself is ng-shared.css §17
   (.ng-figband / --split / --flip); only the copy column's own type and the
   rhythm between rows are page properties and live here.

   BOTH ROWS CARRY --flip, so both figures sit on the LEFT at >=960 and line up
   down one edge. That is the point of the arrangement: optimizasyon alternates
   its four rows into a zig-zag, and this page's whole job in the variance plan
   is not to read like another page. Two figures on one edge against two columns
   of copy on the other is a different silhouette from a zig-zag, and it costs
   nothing below 960 because --flip is a >=960 rule — the shared primitive still
   stacks copy first, in both rows, on a phone.

   NO WIDTH CAP IS NEEDED. The assets are 780x540 and a --split figure column is
   56% of the 1120px container = 627px, comfortably under 780, so the raster is
   never upscaled. A full-width band here would have needed max-width:780px;
   this does not, and adding one would only narrow the column for nothing.

   NOTHING BELOW SETS A COLOUR LITERAL, A WIDTH IN ONE LANGUAGE'S FAVOUR OR A
   text-transform. The two labels are authored pre-uppercased because Turkish
   i -> İ is a different letter and CSS uppercasing gets it wrong; the same
   markup in English is simply already uppercase.
   ========================================================================== */

/* THE GAP ABOVE EACH ROW. Wider than a paragraph gap because each row is a
   heading plus a paragraph plus a 540px-tall artefact; at anything tighter the
   second row's copy starts reading as a caption for the first row's picture.
   The first row also has to clear .ng-out-band__note, which is centred, so the
   same margin doubles as the break between the report unit and the pictures. */
.ng-v2 .ng-repfig{ margin-top:48px; }
@media (min-width:960px){
  .ng-v2 .ng-repfig{ margin-top:60px; }
}

/* THE SUBJECT LINE SITS ABOVE THE HEADING — what the artefact is about, so the
   question below it reads as a question asked of that subject. 12px at .08em is
   the tracked-label threshold exactly, which is the measurement the sweep makes.
   --ng-accent on the sunken band is the same pairing section 30 already uses. */
.ng-v2 .ng-repfig__meta{
  margin:0 0 12px;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:12px; line-height:1.5; letter-spacing:.08em;
  text-transform:none;                /* authored pre-uppercased: i -> İ */
  color:var(--ng-accent);
}

/* THE HEADING IS THE QUESTION THE ARTEFACT ANSWERS, NOT ITS TITLE. Each raster
   bakes its own title in at 28px; an h3 restating it 20px away is a stutter.
   The title is still on the page as text, once, in the figcaption. Smaller than
   the h2 above it by design — these are two items inside the report section,
   not two new sections. Doubled class = the §11 theme-margin defence. */
.ng-v2 .ng-repfig__q.ng-repfig__q{
  margin:0;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:clamp(1.3rem, 2.4vw, 1.6rem);
  line-height:1.24;
  letter-spacing:-0.02em;
  color:var(--ng-ink);
  text-wrap:balance;
}

/* THE PARAGRAPH IS LOAD-BEARING, not decoration. A 780px asset renders at 342px
   at a 390 viewport, so the 9px band labels inside the second picture come out
   near 4px and nobody reads them. Every fact the pictures make in small type —
   that matching happens on entry, that duplicate spellings collapse, that the
   bands are 10, 20 and 30 minutes of driving — is stated here in words instead.
   17px rather than the .ng-lede 18px: two lede-sized paragraphs under a lede
   read as three ledes. */
.ng-v2 .ng-repfig__body{
  margin:14px 0 0;
  font-size:17px; line-height:1.6;
  color:var(--ng-muted);
  max-width:48ch;
}

@media (max-width:767px){
  .ng-v2 .ng-repfig{ margin-top:36px; }
  /* mobile reading floor, and the measure is the column now */
  .ng-v2 .ng-repfig__body{ font-size:16px; max-width:none; }
}