/* ==========================================================================
   /sektorler/bankacilik/ + /en/sectors/banking/  — ONE SHEET FOR THE PAIR
   (applied to the English page with --css-from=bankacilik, so the two layouts
   cannot drift.)

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

       opening   C-FIGURE   the artefact sits ABOVE the h1, full container
       dark      CLOSE      the indigo band is the last section and the only one
       sections  5          masthead · comparison · shortlist · ladder · CTA

   All three are honoured. Read pages/ARCHETYPES.md for why the assignment is
   not negotiable; the short version is that 76 of 76 pages opened with the same
   masthead-plus-plate and the owner could not tell one page from another.

   WHAT MOVED, AND WHAT DID NOT. Every fact on the verified tranche-2 page is
   still on this one: the client's lede, the four analysis titles with their
   four paragraphs and four destinations, the five-candidate shortlist with its
   scores and rival-branch counts, the ATM estimate with its five layers, the
   three method steps, the source list, both CTAs. What changed is the order and
   the SHAPES:

     - the two side-by-side sample panels became ONE full-width report above the
       h1 (C-FIGURE) plus a shortlist section of its own;
     - the 2x2 card grid became a two-column ruled comparison (§3);
     - the stacked score-bar ranking became a row of scored tiles (§4);
     - the three-across step row became a ladder running down (§5).

   THE SHAPES WERE CHOSEN AGAINST THE SIBLINGS, NOT IN A VACUUM.
   /sektorler/akaryakit/ went first in this pass and now opens B-STACK and
   carries a .ng-dtable ranked table of İstanbul districts with score bars in a
   sunken band. A second sector page with that same table would re-create the
   "which page am I on" defect one level below the page silhouette, so this page
   uses neither .ng-dtable nor a bar ranking. Banking's material is genuinely
   different anyway: two object types (branch, ATM) and a question with a WHERE
   half and a HOW MANY half, which is a two-verdict report, not a league table.

   ROLLBACK NOTE CARRIED FORWARD FROM THE FIRST CONVERSION: page_title_status
   was `default` on both pages before conversion and is `off` now. The generated
   rollback for the first apply did not capture that key; the backfill script is
   /root/ng-rollback/page-title-status-restore.php.

   Tokens only, no !important, no literal colours. Heading classes are written
   with the doubled-class idiom so they beat the theme's
   `h?:not(:first-child){margin-top:50px}` at (0,2,2) — see PATTERNS.md §11.
   ========================================================================== */


/* ==========================================================================
   1. THE C-FIGURE MASTHEAD
   ==========================================================================
   .ng-masthead--fig is a MODIFIER on the shared masthead, the same way
   ng-shared.css §15a's .ng-masthead--stack is: same section padding, same
   crumbs, same eyebrow pill, same proof strip, same hit areas. What changes is
   that there is no .ng-masthead__inner grid at all — the container holds a
   linear stack, because C-FIGURE's first screen is a figure with words under
   it, not two columns of anything.

   THERE IS NO ASIDE AND NOTHING BELOW REINTRODUCES ONE. ARCHETYPES.md makes
   that point about B-STACK and it holds here for the same reason: a "summary
   card" further down is the plate with a different name.

   THE HEADLINE IS SMALLER HERE THAN ON A SPLIT MASTHEAD, not larger. B-STACK
   raises its h1 to clamp(2.35rem, 6.2vw, 4.25rem) because the headline IS the
   first screen. On C-FIGURE the figure is the first screen and the h1 is
   explicitly "subordinate… at normal size", so it comes down one step from
   ng-shared §4's 3.5rem ceiling to 2.9rem. The floor stays at 1.95rem = 31.2px,
   which keeps it over the 24px line that makes .ng-hl (accent-display) legal.

   The 18ch ceiling §4 puts on the split headline exists so the line cannot run
   under the aside. There is no aside, and this headline is the hub's whole
   two-part question, so the ceiling goes to 26ch: two comfortable lines at
   desktop rather than four short ones. */
.ng-v2 .ng-masthead--fig .ng-bfig__kick{
  margin:16px 0 12px;
}
.ng-v2 .ng-masthead--fig .ng-bfig__panel{
  margin:0;
}
/* The illustrative caption belongs to the figure, so it sits tight under it and
   before the rule that separates figure from page. 96ch because it names four
   data sources and a 54ch measure broke it into six short lines. */
.ng-v2 .ng-masthead--fig .ng-bfig__note{
  margin:14px 0 0;
  max-width:96ch;
}
/* The hairline is the whole composition in one declaration: everything above it
   is the artefact, everything below it is the page. Without it the h1 read as a
   caption belonging to the panel. */
.ng-v2 .ng-masthead--fig .ng-bfig__copy{
  margin-top:32px;
  padding-top:28px;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-masthead--fig .ng-masthead__title.ng-masthead__title{
  font-size:clamp(1.95rem, 4.2vw, 2.9rem);
  line-height:1.1;
  letter-spacing:-0.026em;
  max-width:26ch;
}
.ng-v2 .ng-masthead--fig .ng-masthead__lede{
  max-width:62ch;
}
/* The attribution line. It carries what the old masthead aside carried — that
   the headline is the hub's own sentence and not marketing copy — so it is a
   sentence at the reading floor with the quote rule the aside used, not a
   tracked micro-label. 15px, and 16px at mobile like every other sentence. */
.ng-v2 .ng-masthead--fig .ng-bfig__ask{
  margin:20px 0 0;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--ng-accent);
  max-width:68ch;
  font-size:15px;
  line-height:1.6;
  color:var(--ng-muted);
}


/* ==========================================================================
   2. THE REPORT INSIDE THE FIGURE  (.ng-vrd)
   ==========================================================================
   .ng-out from ng-shared §13b is the container and the honest chrome — the tag,
   the subject line and the ÖRNEK / SAMPLE flag. What goes inside is
   page-specific by that primitive's own definition, and this is it: two
   verdicts side by side, each with the layers that produced it underneath.

   TWO COLUMNS BECAUSE THE QUESTION HAS TWO HALVES, and they are the same two
   halves that organise section 20. Left: where — a location score for one
   candidate point. Right: how many — the monthly transaction estimate for an
   ATM at that same point. A single stack of eight key/value rows would have
   answered both and shown neither.

   THE DIVIDER IS A BORDER ON THE SECOND COLUMN, not a gap fill, so the stacked
   layout at phone width turns the same rule from vertical to horizontal with no
   second declaration.

   --ng-accent-display IS LEGAL ON __v and only because of the clamp floor: the
   smallest this renders is 1.75rem = 28px, over the 24px line PATTERNS.md rule
   5 draws. 4.18:1 on --ng-surface clears the 3.0 large-text bar and would fail
   the 4.5 body bar — so the unit beside it is --ng-muted at 14px, not the
   display magenta. */
.ng-v2 .ng-vrd{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
/* Flex column so the layer lists can be pinned to the BOTTOM of each column.
   Both columns hold three rows of identical height, so bottom-aligned is also
   top-aligned — and that is the point: the right-hand unit ("transactions /
   month", "işlem / ay") wraps onto its own line at 768 and 1024 where the
   Turkish one does not, which pushed the right list ~25px below the left one.
   Found in a 768 screenshot of the English page; ng-page-check reported both
   pages clean before and after, because a 25px misalignment inside a panel is
   not overflow, not dead air and not a type violation. Reserving two lines with
   a min-height was the alternative and was rejected: it puts a hole under
   "87 / 100" at 1440, where nothing wraps. */
.ng-v2 .ng-vrd__col{
  min-width:0;
  display:flex; flex-direction:column;
}
@media (max-width:759px){
  .ng-v2 .ng-vrd__col + .ng-vrd__col{
    padding-top:24px;
    border-top:1px solid var(--ng-hairline);
  }
}
@media (min-width:760px){
  .ng-v2 .ng-vrd{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
  }
  .ng-v2 .ng-vrd__col:first-child{ padding-right:34px; }
  .ng-v2 .ng-vrd__col + .ng-vrd__col{
    padding-left:34px;
    border-left:1px solid var(--ng-hairline);
  }
}
.ng-v2 .ng-vrd__fig{
  margin:0;
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:4px 10px;
}
.ng-v2 .ng-vrd__v{
  font-family:var(--ng-font-display); font-weight:700;
  font-size:clamp(1.75rem, 3.4vw, 2.4rem);
  line-height:1.06;
  letter-spacing:-0.02em;
  color:var(--ng-accent-display);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;              /* the range is one value, not two */
}
.ng-v2 .ng-vrd__u{
  font-family:var(--ng-font-label); font-weight:500;
  font-size:14px; line-height:1.4;
  color:var(--ng-muted);
}
.ng-v2 .ng-vrd__sub{
  margin:10px 0 0;
  font-size:14px; line-height:1.5;
  color:var(--ng-muted);
}
/* (0,3,0) so it beats ng-shared §14's `.ng-env{margin:0}` at (0,2,0).
   auto is the alignment (see __col above); the padding is the minimum gap when
   there is no slack to absorb, which is every stacked layout below 760. */
.ng-v2 .ng-vrd__col .ng-env{
  margin-top:auto;
  padding-top:20px;
}
/* A full-container panel can afford the room a half-container panel could not.
   ng-shared sets 18px/16px, which is right for two panels sharing a row. */
@media (min-width:760px){
  .ng-v2 .ng-bfig__panel .ng-out__body{ padding:24px 26px 26px; }
  .ng-v2 .ng-bfig__panel .ng-out__bar{ padding:13px 26px; }
}

/* THE PANEL BAR WRAPS AT EVERY WIDTH ON THIS PAGE, not only below 767 where
   ng-shared.css §13b already wraps it. Carried over from the first conversion
   of this page, where it was found in a 1440 screenshot:

   ng-shared gives .ng-out__meta `white-space:nowrap; text-overflow:ellipsis`
   above 767, on the assumption that a tag + subject + flag row fits. The
   English tag is the long one — "BRANCH AND ATM SITE REPORT" is 26 characters
   against the Turkish 21 — and the subject line truncated to
   "Sample candidate point · Kadık…", i.e. the panel silently stopped saying
   what it was a sample OF. ng-page-check reported the page clean with it
   present, because an ellipsis is not overflow.

   Shortening the English tag would fix this render and break on the next copy
   edit, and it would make the two languages' chrome differ. Wrapping is
   length-independent. order:3 keeps tag and flag paired on line one, as
   ng-shared does at mobile; __tag grows so the flag still sits hard right. */
.ng-v2 .ng-bfig__panel .ng-out__bar{ flex-wrap:wrap; gap:6px 10px; }
.ng-v2 .ng-bfig__panel .ng-out__tag{ flex:1 1 auto; }
.ng-v2 .ng-bfig__panel .ng-out__meta{
  order:3; flex:1 0 100%;
  white-space:normal; overflow:visible; text-overflow:clip;
}


/* ==========================================================================
   3. THE TWO-COLUMN COMPARISON  (.ng-duo)  — section 20
   ==========================================================================
   THIS IS THE SHAPE THE VARIANCE PASS ASKED FOR. ARCHETYPES.md: "A ranked table
   is not a card grid is not a two-column comparison is not a Q&A… Right now
   nearly every page is a stack of lists." The four analysis titles were a 2x2
   grid of raised cards under two sub-heads, which STATED the branch/ATM split
   twice and SHOWED it never.

   Two ruled columns show it. Each column owns one half of the hub's question,
   opens with the definition that used to be a bullet in the masthead aside, and
   then lists its two analyses as ruled rows.

   WHY NOT KEEP .ng-card. A card is a container for a thing you might click; a
   grid of four says the four are peers. They are not peers — they are two pairs
   answering two different questions, and one of them is a product while three
   are solutions. Losing the raised surface also loses the whole-card-is-the-
   anchor trick, so each row carries an explicit link with its own name and its
   own 44px hit area (§6). That is not a regression to the "14 identical Daha
   Fazla Bilgi links" defect: four links, four different accessible names, four
   different destinations.

   THE ICONS SURVIVE. 20px inline SVG on the meta line rather than in a 44px
   accent-wash chip, because a chip is a card tell and this is not a card. */
.ng-v2 .ng-duo{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:36px;
  margin-top:36px;
}
.ng-v2 .ng-duo__col{ min-width:0; }
@media (max-width:899px){
  .ng-v2 .ng-duo__col + .ng-duo__col{
    padding-top:34px;
    border-top:1px solid var(--ng-hairline);
  }
}
@media (min-width:900px){
  .ng-v2 .ng-duo{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
  }
  .ng-v2 .ng-duo__col:first-child{ padding-right:44px; }
  .ng-v2 .ng-duo__col + .ng-duo__col{
    padding-left:44px;
    border-left:1px solid var(--ng-hairline);
  }
}
.ng-v2 .ng-duo__kick{ margin:0 0 12px; }
/* (0,3,0) doubled — the theme's h3:not(:first-child) margin-top:50px is
   (0,2,2) and would put 50px of air here. PATTERNS.md §11. */
.ng-v2 .ng-duo__head.ng-duo__head{
  margin:0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:26px; line-height:1.22;
  letter-spacing:-0.018em;
  color:var(--ng-ink);
}
.ng-v2 .ng-duo__def{
  margin:12px 0 0;
  max-width:46ch;
  font-size:16px; line-height:1.6;
  color:var(--ng-muted);
}
@media (min-width:900px){
  /* A comparison whose two halves start on different baselines is a worse
     comparison. The Turkish definitions are both two lines; the English ATM one
     is three, so the right column's first rule sat 26px below the left one at
     1440 and the section stopped reading as two parallel columns. Found in a
     1440 screenshot of the English page — ng-page-check reported both languages
     clean, because a misaligned rule is not overflow.

     A FLOOR, NOT A HEIGHT: 4.8em is three lines at this size, and em rather
     than px so it tracks the font-size rather than a snapshot of it. A longer
     translation grows past it instead of being clipped, which is why min-height
     is right here and a fixed height would not be. */
  .ng-v2 .ng-duo__def{ min-height:4.8em; }
}
.ng-v2 .ng-duo__list{
  list-style:none;
  margin:26px 0 0; padding:0;
}
.ng-v2 .ng-duo__item{
  min-width:0;
  padding:22px 0;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-duo__item:last-child{ padding-bottom:0; }
/* 11px at .1em is ratio .10 and clears ng-page-check's 0.08 tracked-label
   threshold by measurement, not by allowlist. */
.ng-v2 .ng-duo__meta{
  margin:0;
  display:flex; align-items:center; gap:9px;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:11px; line-height:1.3; letter-spacing:.1em;
  text-transform:none;               /* strings are authored pre-uppercased */
  color:var(--ng-muted);
}
.ng-v2 .ng-duo__ico{
  flex:none;
  display:inline-flex;
  color:var(--ng-accent);
}
.ng-v2 .ng-duo__ico svg{ display:block; }
.ng-v2 .ng-duo__name.ng-duo__name{
  margin:11px 0 0;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:20px; line-height:1.28;
  letter-spacing:-0.012em;
  color:var(--ng-ink);
}
.ng-v2 .ng-duo__body{
  margin:9px 0 0;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);
}
.ng-v2 .ng-duo__to{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:13px;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:14px; line-height:1.4;
  color:var(--ng-accent);            /* 5.64:1 on white */
  text-decoration:none;
  border-bottom:1px solid transparent;
}
@media (any-hover:hover){
  /* any-hover only: on a touch screen :hover sticks after the tap. */
  .ng-v2 .ng-duo__to:hover{ border-bottom-color:var(--ng-accent); }
  .ng-v2 .ng-duo__to:hover .ng-arrow{ transform:translate3d(4px,0,0); }
}


/* ==========================================================================
   4. THE FIVE-CANDIDATE SHORTLIST  (.ng-board)  — section 30
   ==========================================================================
   The same five rows the verified page carried, laid ACROSS the container
   instead of down it. The reason is in the header of this file: a stacked
   ranking with proportional bars is now akaryakıt's signature in this group,
   and two sector pages sharing it is the defect this pass exists to remove.

   White tiles on a mist band is the SUNKEN role used correctly — sunken holds
   white chrome, raised holds text. These are chrome: a rank, a name, a score
   and a count, glanced at rather than read.

   is-top is a state, not a fourth colour: the accent border and the display
   magenta score mark the row the report above is about. --ng-accent-display on
   a 32px number is over the 24px line; --ng-accent on the 11px rank label is
   under it, which is exactly the split PATTERNS.md rule 5 asks for.

   THE SECOND NUMBER IS NOT A RANKING TIE-BREAK and the caption says so: the
   highest score does not have the fewest rivals, which is the point of showing
   both. 12px at .09em is ratio .09, over the checker's 0.08. */
.ng-v2 .ng-board{
  list-style:none;
  margin:34px 0 0; padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
@media (min-width:620px){
  .ng-v2 .ng-board{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1000px){
  .ng-v2 .ng-board{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
}
.ng-v2 .ng-board__cell{
  min-width:0;
  padding:16px 16px 15px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius-sm);
}
.ng-v2 .ng-board__cell.is-top{ border-color:var(--ng-accent); }
.ng-v2 .ng-board__n{
  display:block;
  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-muted);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-board__cell.is-top .ng-board__n{ color:var(--ng-accent); }
.ng-v2 .ng-board__name{
  display:block;
  margin-top:7px;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:17px; line-height:1.25;
  color:var(--ng-ink);
}
.ng-v2 .ng-board__score{
  display:block;
  margin-top:10px;
  font-family:var(--ng-font-display); font-weight:700;
  font-size:32px; line-height:1.02;
  letter-spacing:-0.022em;
  color:var(--ng-ink);
  font-variant-numeric:tabular-nums;
}
.ng-v2 .ng-board__cell.is-top .ng-board__score{ color:var(--ng-accent-display); }
.ng-v2 .ng-board__delta{
  display:block;
  margin-top:10px; padding-top:9px;
  border-top:1px solid var(--ng-hairline);
  font-family:var(--ng-font-label); font-weight:500;
  font-size:12px; line-height:1.35; letter-spacing:.09em;
  text-transform:none;
  color:var(--ng-muted);
}


/* ==========================================================================
   5. THE LADDER RUNS DOWN  (.ng-steps--down)  — section 40
   ==========================================================================
   ng-shared §13c lays .ng-steps out as three columns above 860px. That is right
   for a page whose other sections are prose; it is wrong here, because this
   page already has a full-width report, two ruled columns and a five-across
   shortlist above it and a fourth row of thirds would have made the whole page
   one metre. Same primitive, same type, same 2px rule, different rhythm.

   The doubled class is not decoration: `.ng-v2 .ng-steps--down` is (0,2,0), the
   same as ng-shared's `.ng-v2 .ng-steps` inside its own min-width:860 query, so
   it would win on document order alone. Doubling it to (0,3,0) means it still
   wins if this file is ever loaded first. Specificity outranks source order;
   source order is not something to rely on. */
.ng-v2 .ng-steps--down.ng-steps--down{
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin-top:34px;
}
.ng-v2 .ng-steps--down .ng-steps__item{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  padding-top:22px;
}
.ng-v2 .ng-steps--down .ng-steps__item + .ng-steps__item{
  margin-top:26px;
}
.ng-v2 .ng-steps--down .ng-steps__main{ min-width:0; }
.ng-v2 .ng-steps--down .ng-steps__body{ max-width:78ch; }
@media (min-width:760px){
  /* The number moves into a left gutter, which is what makes this read as a
     ladder rather than as three stacked blocks. 96px holds "01" at 15px with
     room for the tracking, and lines the copy column up with nothing else on
     the page — deliberately: the ladder is the one indented block. */
  .ng-v2 .ng-steps--down .ng-steps__item{
    grid-template-columns:96px minmax(0,1fr);
    column-gap:24px;
  }
  .ng-v2 .ng-steps--down .ng-steps__num{
    padding-top:4px;
    font-size:15px;                  /* over the floor anyway; .1em keeps it a label */
  }
  .ng-v2 .ng-steps--down .ng-steps__name.ng-steps__name{ margin:0; }
}


/* ==========================================================================
   6. RESPONSIVE, HIT AREAS AND READING FLOORS
   ==========================================================================
   ng-shared carries the 44px hit areas for crumbs, buttons and pills at 767, at
   768-1023 and at exactly 1024, and ng-mobile.css §7 is the union for every
   styled page. .ng-duo__to is this page's own interactive element and is not in
   either set, so it gets its own rule — up to AND INCLUDING 1024, which is the
   boundary ng-page-check enforces and the off-by-one that had to be fixed three
   times in this project. Grep the boundary, do not fix the file in front of you.
   ========================================================================== */

@media (max-width:1024px){
  .ng-v2 .ng-duo__to{ min-height:44px; }
}

@media (max-width:959px){
  /* Left-aligned once the note is no longer a caption centred under a
     two-column figure. ng-shared §14 centres .ng-out-band__note. */
  .ng-v2 .ng-out-band__note{ text-align:left; }
}

@media (max-width:767px){
  /* Sentences take the 16px mobile reading floor. Labels and chrome do not. */
  .ng-v2 .ng-masthead--fig .ng-bfig__ask{ font-size:16px; }
  .ng-v2 .ng-duo__body{ font-size:16px; }
  .ng-v2 .ng-vrd__sub{ font-size:15px; }
  .ng-v2 .ng-vrd__u{ font-size:15px; }
  .ng-v2 .ng-duo__head.ng-duo__head{ font-size:22px; }
  .ng-v2 .ng-duo__name.ng-duo__name{ font-size:19px; }
  .ng-v2 .ng-board__score{ font-size:28px; }
  .ng-v2 .ng-board__name{ font-size:16px; }   /* reading floor: a place name */
  .ng-v2 .ng-masthead--fig .ng-bfig__copy{ margin-top:30px; padding-top:26px; }
  /* Three notes on this page are arguments, not captions: they carry why
     Geocoding sits in the ATM column, how the score is built and what the
     second number on a tile is. They take the full measure at phone width. */
  .ng-v2 .ng-vals__note,
  .ng-v2 .ng-how__note,
  .ng-v2 .ng-bfig__note,
  .ng-v2 .ng-out-band__note{ max-width:none; }
}

/* The reasoning-and-attribution note under the comparison. It carries the
   argument for why Geocoding sits in the ATM column and the evidence that hub
   and leaf say the same thing, so it is a full sentence at the reading floor
   rather than a tracked micro-label. 92ch, not ng-shared's 88ch — this one is
   three sentences and 88ch stranded the last two words on a line. */
.ng-v2 .ng-vals__note{
  margin-top:30px;
  max-width:92ch;
}
/* The sticky header is ~104px at desktop and ~84px below 1364, so an in-page
   anchor lands under it without this. The masthead's ghost CTA targets
   #aday-siralamasi / #candidate-ranking, which is this band. */
@media (max-width:1364px){
  .ng-v2 .ng-out-band{ scroll-margin-top:84px; }
}


/* ==========================================================================
   7. 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 — and ng-components.css §8 does the same for .ng-anim. Nothing on
   this page adds motion beyond those two: the report, the comparison and the
   shortlist are static DOM with no transitions, precisely so that a reduce
   preference has nothing to switch off here. Left as a note rather than an
   empty block so the next person does not go looking for the missing rule.
   ========================================================================== */


/* ==========================================================================
   8. THE STEP-03 OUTPUT, PICTURED  (.ng-how__figrow)  — section 40
   ==========================================================================
   This page places exactly ONE of the client's content images, and it places it
   at the bottom of the ladder rather than at the top of the page. That is not a
   compromise, it is what a C-FIGURE layout is: the masthead already opens on a
   full-width sample report (§1, §2), and that artefact is doing the artefact's
   job. A second picture up there would compete with it — and it would also put
   this page into the same silhouette as the two sector pages that open on
   pictures, which is the one thing the last two runs exist to prevent.

   THE FIGURE IS ON THE LEFT. ng-shared §17a's --flip swaps the two columns at
   >=960 ONLY; below that the primitive stacks copy first and this file adds
   nothing there. The left-hand figure is the only thing separating this row
   from every other band built on the same primitive, so it is not decoration
   and must not be "tidied" back to the default.

   NO WIDTH CAP HERE, DELIBERATELY. The assets are 780x540 and go soft when a
   frame renders wider than that. At 1440 the container is 1120 and the figure
   column is 56fr of (1120 - 48) = 600px; at 960 it is smaller again. So
   .ng-figband__img never upscales in a --split row and the max-width:780px cap
   a full-width band needs would be a dead rule on this page. If anyone ever
   promotes this row to full width, add the cap in the same edit.
   ========================================================================== */
.ng-v2 .ng-how__figrow{ margin-top:44px; }

/* THE KICKER IS MUTED, NOT MAGENTA. The section head above it already spends
   the accent on "NASIL BAŞLIYORUZ" and each of the three rungs spends it again
   on its number; a fifth magenta label inside one band turns the accent into
   body colour. 13px at .08em is .ng-eyebrow's own spec, which is what this
   project measures tracked labels against — 12px is the floor and this clears
   it. Pre-uppercased in the markup for the same reason everything else on the
   site is: text-transform would turn i into I, not into İ. */
.ng-v2 .ng-how__figmeta{
  margin:0;
  font-family:var(--ng-font-label); font-weight:600;
  font-size:13px; line-height:1.25; letter-spacing:.08em;
  padding-right:.08em;          /* absorb the trailing letter-space */
  text-transform:none;
  color:var(--ng-muted);
}

/* Sized off .ng-steps__name (19px) rather than off the section title: this row
   ANSWERS the ladder, it does not head a new section, and at h2 size it would
   read as a sixth section on a five-section page. Doubled class for the same
   reason §5 doubles .ng-steps--down — the theme sets its own margin on a bare
   h3 and specificity is what settles it, not source order. */
.ng-v2 .ng-how__figq.ng-how__figq{
  margin:10px 0 0;
  font-size:21px; line-height:1.32;
  color:var(--ng-ink);
}

/* Same size and colour as .ng-steps__body: this paragraph is the fourth thing
   the ladder says, and it is also where the image's legend is written out in
   words, because at 390 the legend inside the raster renders near 5px. */
.ng-v2 .ng-how__figbody{
  margin:12px 0 0;
  font-size:15px; line-height:1.62;
  color:var(--ng-muted);
}

/* The lateral note below is a change of subject — competition tracking and the
   insurance arm — not a second caption for the figure. .ng-note's own 20px let
   it sit close enough to the figcaption to read as one stack. */
.ng-v2 .ng-how__figrow + .ng-how__note{ margin-top:38px; }

@media (max-width:767px){
  /* The 16px phone reading floor, the same call §6 makes for every other
     sentence on this page. The heading comes down with it so the question does
     not out-shout the rung names it answers. */
  .ng-v2 .ng-how__figbody{ font-size:16px; }
  .ng-v2 .ng-how__figq.ng-how__figq{ font-size:19px; }
}