/* ==========================================================================
   SERVICES SUB-PAGES — SECTION 4: "SAP SOLUTIONS CONNECTED TO THIS SERVICE"
   ==========================================================================
   Nine variants, in two sets:

     11 · 12 · 13 · 14      HOME-DERIVED — the priority set, built from
                            .svc-cards--rows, .svc-cards and .glance-media.
     4 · 5 · 6 · 9 · 10     FORKED from the approved Solutions §6 shortlist
                            (sol-06-services.css), renamed .s6v* -> .sv4v* and
                            retuned from eight fixed services to six or seven.

   Preview-only. Namespaced .sv4vN- — NOT .svc-.

   ------------------------------------------------------------------------
   WHY THE DERIVED SET IS BARELY A DESIGN AT ALL
   ------------------------------------------------------------------------
   This section IS a list of links to the eight live /solutions/ pages. Six or
   seven of them, one line each, and every one goes somewhere real.

   The home page has a device for exactly that and uses nothing else for it:
   .svc-cards--rows. No border, no radius, one var(--c-line) bottom rule, a
   48x48 arrow box, and a hover that changes only that rule's colour. Nothing
   slides, nothing dims, nothing lifts.

   So the derived §4 is mostly markup. Design 11 declares eleven lines of CSS
   and is the most literal derivation in the whole project; 12 halves its
   height by pairing the rows; 13 is the home page's Featured Transformation
   Areas block, which is itself a grid of links to solution pages; 14 puts the
   list beside .glance-media for the media-led page.

   THE MOTIF EARNS ITS KEEP HERE. §7 of the brief calls the outlined arrow box
   "the one recurring 'this is clickable' signal" — §4 is the one section whose
   entire job is to send the reader somewhere else, so every derived variant
   carries it, at 60x60 on cards and 48x48 in rows.

   BUDGET — measured. Live §4: 2,337px @390 / 1,212px @1440 on consulting,
   2,651 / 1,212 on AMS. The live .iq-card grid spends a lot on hover-reveal
   chrome for what is, in the end, six links. Every variant below beats it at
   390; 11, 12 and 14 beat it at both widths.

   ------------------------------------------------------------------------
   THE BASE — index.html, matched number for number
   ------------------------------------------------------------------------
     RADIUS   4px; media 8px; bento none.   BORDERS  #c4c4c4 / var(--c-line).
     SHADOWS  0 14px 30px rgba(20,20,40,.08) cards, 0 30px 60px rgba(0,0,0,.35)
              media. Never --fam-shadow, never --fam-line.
     HOVER    .22s — border-colour, translateY(-2px), arrow translateX(4px).
     GRADIENT large numerals and thin accent rules only.
     DARK     .why-glance-stat — var(--c-dark), 4px, solid 3px accent rule.

   THE RE-THEME IS ONE LINE: --c-accent: var(--fam-700) on the wrapper
   re-points every shipped class inside it to the blue family.

   COLOUR — tokens only. No --fam-100 (absent from the blue set). The only
   literals are index.html's own: #c4c4c4, its two neutral shadows, #323232.

   RESPONSIVE — mobile-first at 390px stepping up with min-width.
   Steps: 390 base · 561 · 761 · 941 · 1100 · 1340 (media nudge)
   ========================================================================== */


/* ==========================================================================
   PREVIEW CHROME — not part of any design, do not lift
   ========================================================================== */
.sv4-top  { height: var(--header-h); }
.sv4-flag { background: #14141c; color: #fff; font-size: 13px; }
.sv4-flag .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-block: 11px; }
.sv4-flag b { font-weight: 700; }
.sv4-flag span { color: rgba(255,255,255,.62); }

.sv4-label { border-top: 2px solid var(--c-ink); background: #fff; padding-block: 32px 8px; }
.sv4-label .container { display: flex; flex-direction: column; gap: 8px; }
.sv4-label h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
.sv4-label h2 b { color: var(--fam-700); font-weight: 800; }
.sv4-label p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--c-muted); max-width: 82ch; }
.sv4-label p b { color: var(--c-body); font-weight: 700; }
.sv4-label code { font-size: 13px; color: var(--fam-700); }
.sv4-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 2px; }
.sv4-tags span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-body); background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 4px 8px;
}
.sv4-tags span.new  { color: #0b4a1f; background: #eaf7ee; border-color: #c3e6cd; }
.sv4-tags span.warn { color: #8a4a00; background: #fdf5ea; border-color: #f0dcc0; }

.sv4-note { background: var(--fam-tint); }
.sv4-note .container { padding-block: 38px; }
.sv4-note h3 { font-size: 17px; margin: 0 0 10px; color: var(--c-ink); }
.sv4-note p { font-size: 15px; line-height: 1.7; color: var(--c-body); margin: 0; max-width: 78ch; }
.sv4-note p + p { margin-top: 12px; }
.sv4-note b { color: var(--c-ink); }
.sv4-note code { color: var(--fam-700); font-size: 13.5px; }


/* ==========================================================================
   SHARED DEVICES — the home page's type and motif, family-substituted
   ========================================================================== */

/* .services-title: 700, .98, -.025em. Capped below §2's 52px — §4 is a
   connector section deep in the page and should not compete with the sections
   that open it. The looser base line-height is for the 3-line wrap at 390px. */
.sv4-h2 {
  font-size: clamp(29px, 4.4vw, 46px); font-weight: 700; line-height: 1.06;
  letter-spacing: -.025em; color: var(--c-ink); margin: 0; text-wrap: balance;
}
.sv4-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fam-700); margin: 0 0 14px;
}
/* .svc-card p: 16px / 300 / 1.6 / #323232 */
.sv4-lede { font-size: 16px; font-weight: 300; line-height: 1.6; color: #323232; margin: 18px 0 0; max-width: 68ch; }
.sv4-lede b { font-weight: 600; color: var(--c-ink); }
.sv4-head { max-width: 62ch; }

/* THE MOTIF — .card-arrow, 60x60, neutral #c4c4c4 border, 4px radius. */
.sv4-arrow {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border: 1px solid #c4c4c4;
  border-radius: var(--radius); color: var(--fam-700);
  transition: border-color .22s var(--ease);
}
.sv4-arrow svg { width: 26px; height: 24px; transition: transform .22s var(--ease); }
/* .svc-cards--rows shrinks the box to 48x48 and the glyph to 22x20 */
.sv4-arrow--sm { width: 48px; height: 48px; }
.sv4-arrow--sm svg { width: 22px; height: 20px; }

/* .link-arrow: 20px / 700 / accent, svg 18x16 nudging 4px. Padded out to a
   44px target and pulled back by the same amount, so the hit area grows and
   the layout does not move a pixel. */
.sv4-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding-block: 10px; margin: 8px 0 -10px;
  color: var(--fam-700); font-weight: 700; font-size: 20px; line-height: 1.2;
}
.sv4-link svg { width: 18px; height: 16px; transition: transform .2s var(--ease); }
.sv4-link:hover svg { transform: translateX(4px); }

/* .g-num: gradient-clipped numerals — one of only two places the home page
   lets the gradient appear at all */
.sv4-num {
  font-size: clamp(34px, 4.4vw, 54px); font-weight: 700; line-height: 1;
  letter-spacing: -.02em; background: var(--fam-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}

/* sub-topic rail under a solution name. Short phrases only — these are two
   and three word capability names, which never leave a separator dangling at
   the end of a wrapped line the way a 39-character product name would. */
.sv4-subs { display: flex; flex-wrap: wrap; align-items: baseline; margin: 7px 0 0; }
.sv4-subs span { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--c-muted); }
.sv4-subs span:not(:last-child)::after { content: "\00b7"; margin: 0 8px; color: #b7b7c2; }


/* ==========================================================================
   ############  HOME-DERIVED SET — 11, 12, 13, 14  ############
   ========================================================================== */


/* ==========================================================================
   DESIGN 11 — ROW LIST                         derived from .svc-cards--rows
   ==========================================================================
   The literal derivation, and the one §5A of the brief names for this section.
   .svc-cards--rows and .svc-card carry the entire layout; the 48x48 arrow, the
   single var(--c-line) bottom rule, the border-colour-only hover and the <=560
   padding step are all inherited from styles.css:463-477 untouched.

   THE DELTA IS ELEVEN LINES: the home row is title-only and centres the arrow
   against one line of text. These rows carry a summary and a sub-topic rail,
   so the text column becomes a block and the arrow stays vertically centred
   against the whole row rather than against the title.

   Reuses: .svc-cards--rows .svc-card .card-arrow
   ========================================================================== */
.sv4v11 { --c-accent: var(--fam-700); }
.sv4v11 .svc-cards--rows { margin-top: 30px; }
.sv4v11 .svc-cards--rows .svc-card { align-items: center; gap: 18px; }
.sv4v11-t { min-width: 0; flex: 1; }
.sv4v11 .svc-cards--rows .svc-card h4 { font-size: 17px; font-weight: 700; line-height: 1.4; margin: 0; }
.sv4v11-t p { font-size: 14.5px; font-weight: 300; line-height: 1.55; color: #323232; margin: 5px 0 0; }
@media (min-width: 761px) {
  .sv4v11 .svc-cards--rows .svc-card { padding: 20px 4px; }
  .sv4v11 .svc-cards--rows .svc-card h4 { font-size: 20px; }
}
/* THE TEXT BLOCK SPLITS AT WIDTH. The home row is title-only, so
   justify-content:space-between puts the arrow right after a short title and
   the row reads tight. Give that row a summary and the title still ends at
   ~340px while the arrow stays pinned right — roughly 500px of dead white in
   between. Two tracks fill it: the title holds its column and the summary
   takes the rest, which is the same split §3 design 13 uses on the same
   shipped class. Below 941 the block stacks, where a single column is right. */
@media (min-width: 941px) {
  .sv4v11-t {
    display: grid; grid-template-columns: minmax(0,340px) minmax(0,1fr);
    gap: 0 44px; align-items: baseline;
  }
  .sv4v11-t p { margin-top: 0; }
}


/* ==========================================================================
   DESIGN 12 — PAIRED ROW LIST                  derived from .svc-cards--rows
   ==========================================================================
   The compact one, and the shortest §4 in the set: the same row treatment with
   the summary dropped and the rows paired from 761 up, so six links is three
   rows rather than six. §4's job is to be a connector, not a destination —
   this version says the same six things and hands the height back to §3 and §5.

   ONE THING THE PAIRING BREAKS AND THIS FIXES: styles.css draws the opening
   rule with .svc-card:first-child, which in a two-column grid is item 1 only —
   item 2 would start the list with no rule above it. :nth-child(-n+2) restores
   it, and the same trick goes to -n+3 at three columns.

   Reuses: .svc-cards--rows .svc-card .card-arrow
   ========================================================================== */
.sv4v12 { --c-accent: var(--fam-700); }
.sv4v12 .svc-cards--rows { margin-top: 30px; }
.sv4v12 .svc-cards--rows .svc-card h4 { font-size: 17px; font-weight: 700; line-height: 1.4; margin: 0; }
@media (min-width: 761px) {
  .sv4v12 .svc-cards--rows {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 44px;
  }
  .sv4v12 .svc-cards--rows .svc-card { padding: 20px 2px; }
  .sv4v12 .svc-cards--rows .svc-card:nth-child(-n+2) { border-top: 1px solid var(--c-line); }
  .sv4v12 .svc-cards--rows .svc-card h4 { font-size: 19px; }
}
@media (min-width: 1100px) {
  .sv4v12 .svc-cards--rows { grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 40px; }
  .sv4v12 .svc-cards--rows .svc-card:nth-child(-n+3) { border-top: 1px solid var(--c-line); }
  .sv4v12 .svc-cards--rows .svc-card:nth-child(3) ~ .svc-card { border-top: none; }
}


/* ==========================================================================
   DESIGN 13 — LINK CARD GRID                          derived from .svc-cards
   ==========================================================================
   index.html's Featured Transformation Areas block, which is already a grid of
   .svc-card links pointing at solution pages — the same job §4 has. So this is
   not an adaptation of a home device, it is the home device doing the thing it
   was written for, with six or seven solutions substituted for six themes.

   Everything is inherited: 2-up at 4px radius on #c4c4c4, 31px padding, the
   60x60 .card-arrow, the .22s border-colour + 2px lift + 4px arrow hover, and
   the drop to one column at <=940.

   THE DELTA is index.html's own corner treatment. #transformation-areas pins
   the arrow to the card's bottom-right and pads the card to clear it
   (styles.css:421-436). That rule is keyed to page-specific section ids, so it
   does not reach a Services page — restated here against this wrapper, radius
   maths and all.

   Reuses: .svc-cards .svc-card .card-arrow
   ========================================================================== */
.sv4v13 { --c-accent: var(--fam-700); }
.sv4v13 .svc-cards { margin-top: 30px; }
/* index.html:421-436, restated — the arrow is pinned to the corner and the
   paragraph stops stretching, so it never gets pushed down the card. The
   inner curve is (--radius - 1px) because the arrow sits against the padding
   box, 1px inside the card's border: a no-op at 4px, but it reads the moment
   the radius opens up. */
.sv4v13 .svc-card { padding: 22px 20px 62px; }
.sv4v13 .svc-card p { flex: none; }
.sv4v13 .card-arrow {
  position: absolute; right: 0; bottom: 0; margin-top: 0;
  border-radius: var(--radius) 0 calc(var(--radius) - 1px) 0;
}
.sv4v13 .svc-card .sv4-subs { margin-top: 10px; }
/* PADDING IS STEPPED, for the same measured reason as §3 design 11.
   .svc-card is a flat 31px at every width because the home card holds a title
   and two lines; this one adds a sub-topic rail, and at 390px the 1-up stack
   ran 2,120px — enough to push a whole page over the live budget on its own.
   22/20 at phone width, the full 31px back at 1081 where the column can carry
   it. The 68px bottom that clears the pinned corner arrow only needs to clear
   a 60px box, so 62 is the honest floor. */
@media (min-width: 761px) {
  .sv4v13 .svc-card { padding: 26px 26px 66px; }
}
@media (min-width: 1081px) {
  .sv4v13 .svc-card { padding: 31px 31px 68px; }
}


/* ==========================================================================
   DESIGN 14 — MEDIA COLUMN + ROW LIST         derived from .glance-media + rows
   ==========================================================================
   The home page's .glance split with the row list in the copy column: a full
   -height media panel beside the six or seven links. This is the media-led §4,
   for page D.

   Media keeps the home treatment exactly — 8px radius, the neutral
   0 30px 60px rgba(0,0,0,.35) shadow — inherited from .glance-media rather
   than restated. Two deltas only: the fallback colour behind the photo (the
   home page's is #1b1146, a violet), and min-height, because a panel stretched
   to a list's height must not also carry a 380px floor.

   THE NUDGE IS HELD BACK TO 1340px. index.html applies left:40px at >=941, but
   between 941 and 1339 the container still has only 32px of gutter and a 40px
   shift pushes the panel past the viewport edge. The look is identical
   wherever it can actually be shown.

   Reuses: .glance-media .svc-cards--rows .svc-card .card-arrow
   ========================================================================== */
.sv4v14 { --c-accent: var(--fam-700); }
.sv4v14-split { display: grid; gap: 28px; margin-top: 30px; }
.sv4v14 .glance-media { min-height: 220px; background-color: var(--fam-900); }
.sv4v14 .svc-cards--rows .svc-card { align-items: center; gap: 16px; }
.sv4v14 .svc-cards--rows .svc-card h4 { font-size: 17px; font-weight: 700; line-height: 1.4; margin: 0; }
.sv4v14-t { min-width: 0; }
.sv4v14-t p { font-size: 14px; font-weight: 300; line-height: 1.55; color: #323232; margin: 5px 0 0; }
@media (min-width: 761px) {
  .sv4v14 .glance-media { min-height: 280px; }
  .sv4v14 .svc-cards--rows .svc-card h4 { font-size: 19px; }
}
@media (min-width: 941px) {
  /* .glance-grid geometry, stretched rather than centred — the point of this
     one is the tall column */
  .sv4v14-split { grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: stretch; }
  .sv4v14 .glance-media { min-height: 0; }
}
@media (min-width: 1340px) {
  .sv4v14 .glance-media { position: relative; right: 40px; bottom: 15px; }
}


/* ==========================================================================
   ############  FORKED SET — 4, 5, 6, 9, 10  ############
   Forked from sol-06-services.css. Class names keep the SOURCE variant number:
   .s6v9- becomes .sv4v9-.

   RETUNE APPLIED — the source was built for EXACTLY EIGHT fixed services;
   Services §4 carries six or seven. Eight divides by four, six and seven do
   not, so every 4-up grid in the set had to move or it ships an orphan row.
     4   sticky brief   unchanged — 2-up at 761 takes 6 as 3 rows, 7 as 4.
     5   media column   unchanged — a list does not care how long it is.
     6   phase spine    regrouped. The source split 8 services into 3 phases of
                        1/4/3. Six or seven solutions have no such sequence, so
                        the groups become the two the docs actually imply —
                        core business systems, then platform and insight.
     9   snap rail      4-up -> 3-up at 1100. Six becomes two clean rows.
     10  hairline matrix 4-up -> 3-up at 1100, same reason, and the flush-edge
                        nth-child padding rewritten from 4n to 3n to match.
   ========================================================================== */


/* ==========================================================================
   DESIGN 4 — STICKY BRIEF + BLOCK PAIRS                       (fork of §6·4)
   The brief holds still while the solutions scroll past it — the .svc-panel
   split from the home page's tabbed explorer (360px aside + 1fr panel), with
   the aside pinned. The solutions are borderless: one var(--c-line) rule
   across the TOP of each block, the home row treatment turned on its head so a
   two-column arrangement still reads as a list rather than as boxes.
   ========================================================================== */
.sv4v4 { display: grid; gap: 30px; }
.sv4v4-blocks { display: grid; grid-template-columns: 1fr; gap: 0; }
.sv4v4-block {
  display: grid; grid-template-columns: minmax(0,1fr) 48px;
  gap: 0 14px; align-items: center;
  padding: 16px 0 18px; border-top: 1px solid var(--c-line);
  transition: border-top-color .22s var(--ease);
}
.sv4v4-block h3 { grid-column: 1; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0; transition: color .22s var(--ease); }
.sv4v4-block p  { grid-column: 1; font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 6px 0 0; }
.sv4v4-block .sv4-arrow { grid-column: 2; grid-row: 1 / span 2; }
@media (hover: hover) {
  .sv4v4-block:hover { border-top-color: var(--fam-700); }
  .sv4v4-block:hover h3 { color: var(--fam-700); }
  .sv4v4-block:hover .sv4-arrow { border-color: var(--fam-700); }
  .sv4v4-block:hover .sv4-arrow svg { transform: translateX(4px); }
}
.sv4v4-block:focus-within { border-top-color: var(--fam-700); }
@media (min-width: 761px) {
  .sv4v4-blocks { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 40px; }
}
@media (min-width: 941px) {
  /* .services-grid: 360px 1fr / 56px, top-aligned */
  .sv4v4 { grid-template-columns: minmax(0,360px) minmax(0,1fr); gap: 56px; align-items: start; }
  .sv4v4-aside { position: sticky; top: calc(var(--header-h) + 34px); }
  .sv4v4-blocks { column-gap: 48px; }
}


/* ==========================================================================
   DESIGN 5 — MEDIA COLUMN + SERVICE LIST                      (fork of §6·5)
   The .glance geometry rotated: instead of copy beside a media panel, the
   media becomes a full-height column beside the whole list. Media keeps the
   home treatment exactly — 8px radius, neutral shadow, and the nudge out of
   its own column held back to 1340 where there is room for it.
   ========================================================================== */
.sv4v5 { display: grid; gap: 28px; }
.sv4v5-split { display: grid; gap: 28px; }
.sv4v5-head { margin-bottom: 24px; }
.sv4v5-media {
  border-radius: 14px; overflow: hidden; min-height: 220px;
  background: var(--img) center/cover no-repeat, var(--fam-900);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.sv4v5-list { display: flex; flex-direction: column; }
.sv4v5-item {
  display: grid; grid-template-columns: minmax(0,1fr) 48px;
  gap: 0 14px; align-items: center;
  padding: 15px 2px; border-bottom: 1px solid var(--c-line);
  transition: border-bottom-color .22s var(--ease);
}
.sv4v5-item:first-child { border-top: 1px solid var(--c-line); }
.sv4v5-item h3 { grid-column: 1; grid-row: 1; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0; }
.sv4v5-item p  { grid-column: 1; grid-row: 2; font-size: 14.5px; font-weight: 300; line-height: 1.55; color: #323232; margin: 5px 0 0; }
.sv4v5-item .sv4-arrow { grid-column: 2; grid-row: 1 / span 2; }
@media (hover: hover) {
  .sv4v5-item:hover { border-bottom-color: var(--fam-700); }
  .sv4v5-item:hover .sv4-arrow { border-color: var(--fam-700); }
  .sv4v5-item:hover .sv4-arrow svg { transform: translateX(4px); }
}
.sv4v5-item:focus-within { border-bottom-color: var(--fam-700); }
@media (min-width: 761px) {
  .sv4v5-media { min-height: 280px; }
  .sv4v5-item { padding: 17px 4px; }
  .sv4v5-item h3 { font-size: 19px; }
}
@media (min-width: 941px) {
  /* .glance-grid: .85fr / 1.15fr, 60px. Media stretched to the list height
     rather than centred — the point of this one is the tall column. */
  .sv4v5-split { grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: stretch; }
  .sv4v5-media { min-height: 0; }
  .sv4v5-head { margin-bottom: 28px; }
}
@media (min-width: 1340px) {
  .sv4v5-media { position: relative; right: 40px; bottom: 15px; }
}


/* ==========================================================================
   DESIGN 6 — GROUPED SPINE                                    (fork of §6·6)
   The only design that adds an idea to the content rather than a shape: the
   solutions grouped into the clusters they actually belong to, so a reader
   landing cold is told which of them relate to each other. Structure is the
   home .services-grid again (label column + content column), each group
   separated by a single var(--c-line) rule and anchored by the gradient-clipped
   numeral (.g-num). No arrow boxes — the point is that this reads as an
   editorial index, and six boxes would flatten the groups back into a list.

   RETUNE: the source grouped eight services into three phases of 1/4/3, which
   only works because §6's eight are a delivery sequence. Six or seven SAP
   solutions are not a sequence, so the grouping becomes the one the reference
   docs themselves imply — the business systems first, then the platform and
   insight layer that connects and reports on them.
   ========================================================================== */
.sv4v6 { background: var(--c-surface-2); }   /* .why-glance sits on --c-surface-2 */
.sv4v6-phase { display: grid; gap: 16px; padding-block: 26px; border-top: 1px solid var(--c-line); }
.sv4v6-phase:first-of-type { margin-top: 30px; }
.sv4v6-phase:last-of-type { border-bottom: 1px solid var(--c-line); }
.sv4v6-cap { display: flex; align-items: baseline; gap: 14px; }
.sv4v6-cap h3 { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
.sv4v6-cap p { font-size: 14.5px; font-weight: 300; line-height: 1.5; color: var(--c-muted); margin: 4px 0 0; }
.sv4v6-rows { display: grid; gap: 0; }
.sv4v6-row { padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.sv4v6-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sv4v6-row h4 { margin: 0; font-size: 0; }        /* wrapper only — the link is the heading */
/* the same padded-and-pulled-back trick as .sv4-link: a single-line name at
   17px/1.4 is 23.8px, so 11px each side clears 44 and the equal negative
   margin keeps the row exactly where it was */
.sv4v6-name {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding-block: 11px; margin-block: -11px;
  font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--c-ink);
  transition: color .22s var(--ease);
}
.sv4v6-name svg { width: 15px; height: 13px; flex-shrink: 0; transition: transform .2s var(--ease); }
.sv4v6-row p { font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 5px 0 0; max-width: 64ch; }
@media (hover: hover) {
  .sv4v6-name:hover { color: var(--fam-700); }
  .sv4v6-name:hover svg { transform: translateX(4px); }
}
.sv4v6-name:focus-visible { color: var(--fam-700); outline: 2px solid var(--fam-700); outline-offset: 3px; }
@media (min-width: 761px) {
  .sv4v6-phase { grid-template-columns: minmax(0,240px) minmax(0,1fr); gap: 34px; padding-block: 30px; }
  .sv4v6-cap { display: block; }
  .sv4v6-row { padding: 14px 0; }
}
@media (min-width: 941px) {
  .sv4v6-phase { grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 56px; padding-block: 34px; }
  .sv4v6-name { font-size: 19px; }
}


/* ==========================================================================
   DESIGN 9 — SNAP RAIL OF DARK CARDS (dark)                   (fork of §6·9)
   The one scroll-driven layout in the set. Below 1100 the solutions are a snap
   rail — a scroll gesture rather than six screens of stacked rows, which is
   what §4 costs on a phone in every other design here. At 1100 the rail
   resolves into a plain grid and the gesture retires.
   The card is .why-glance-stat: var(--c-dark) fill, 4px radius, a solid 3px
   var(--fam-700) bottom border. The rail scrolls inside its own box — the page
   itself never scrolls sideways at any width.
   Keyboard: every card is a link, so tabbing scrolls the rail natively.

   RETUNE: 4-up -> 3-up at 1100. Six solutions across four columns is a row of
   four and an orphan pair; across three it is two clean rows, and seven is
   3/3/1 with the odd one reading as a deliberate tail rather than a gap.
   ========================================================================== */
.sv4v9 { background: var(--c-surface-2); }
.sv4v9-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 320px);
  gap: 12px; margin-top: 26px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 2px;
  padding-bottom: 14px;
  scrollbar-width: thin; scrollbar-color: #c4c4c4 transparent;
}
.sv4v9-rail::-webkit-scrollbar { height: 6px; }
.sv4v9-rail::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 3px; }
.sv4v9-rail::-webkit-scrollbar-track { background: transparent; }
.sv4v9-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--c-dark); border-radius: var(--radius);
  border-bottom: 3px solid var(--fam-700);
  padding: 22px 20px 20px; min-height: 220px;
  transition: border-bottom-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.sv4v9-n { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--fam-300); font-variant-numeric: tabular-nums; }
.sv4v9-card h3 { margin: 12px 0 0; font-size: 18px; font-weight: 700; line-height: 1.35; color: #fff; }
.sv4v9-card p { margin: 10px 0 0; font-size: 14.5px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,.72); flex: 1; }
.sv4v9-go { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fam-200); }
.sv4v9-go svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
@media (hover: hover) {
  .sv4v9-card:hover { border-bottom-color: var(--fam-300); box-shadow: 0 14px 30px rgba(20,20,40,.08); transform: translateY(-2px); }
  .sv4v9-card:hover .sv4v9-go svg { transform: translateX(4px); }
}
.sv4v9-card:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 3px; }
.sv4v9-hint { margin-top: 12px; font-size: 13.5px; font-weight: 400; color: var(--c-muted); display: flex; align-items: center; gap: 8px; }
.sv4v9-hint svg { width: 16px; height: 14px; }
@media (min-width: 561px) {
  .sv4v9-rail { grid-auto-columns: min(56%, 330px); gap: 16px; }
}
@media (min-width: 941px) {
  .sv4v9-rail { grid-auto-columns: min(38%, 340px); }
}
@media (min-width: 1100px) {
  .sv4v9-rail {
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0,1fr));
    grid-auto-columns: auto; gap: 18px; overflow-x: visible;
    scroll-snap-type: none; padding-bottom: 0; margin-top: 34px;
  }
  .sv4v9-card { padding: 26px 24px 22px; min-height: 236px; }
  .sv4v9-hint { display: none; }
}


/* ==========================================================================
   DESIGN 10 — HAIRLINE MATRIX                                (fork of §6·10)
   The compact fork. No boxes and no radius: a 1px var(--c-line) grid
   background showing through 1px gaps is what separates the cells, so what
   the reader sees is ruled paper rather than six cards. The section rule under
   the head is this file's other use of the gradient — a 2px accent rule, the
   second thing the home page allows it on.

   RETUNE: 4-up -> 3-up at 1100, and the flush-edge padding rewritten from
   4n/4n+1 to 3n/3n+1 to match. Without that rewrite the first column's text
   would start 20px inside every other block on the page.
   ========================================================================== */
.sv4v10-head { display: grid; gap: 14px; padding-bottom: 22px; }
.sv4v10-rule { height: 2px; background: var(--fam-grad); }
/* no top border and no top margin: the 2px accent rule above IS the matrix's
   top edge. A second hairline 22px under it read as an unfinished join. */
.sv4v10-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--c-line); border-bottom: 1px solid var(--c-line);
}
.sv4v10-cell {
  background: #fff; padding: 16px 2px 18px;
  transition: background-color .22s var(--ease);
}
.sv4v10-cell h3 {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0;
  transition: color .22s var(--ease);
}
.sv4v10-cell h3 svg { width: 14px; height: 12px; flex-shrink: 0; transition: transform .2s var(--ease); }
.sv4v10-cell p { font-size: 14.5px; font-weight: 300; line-height: 1.55; color: #323232; margin: 7px 0 0; }
.sv4v10-cell a { display: block; min-height: 44px; }   /* touch target */
@media (hover: hover) {
  .sv4v10-cell:hover h3 { color: var(--fam-700); }
  .sv4v10-cell:hover h3 svg { transform: translateX(4px); }
}
.sv4v10-cell a:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }
@media (min-width: 561px) {
  .sv4v10-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sv4v10-cell { padding: 18px 20px 20px; }
  /* the outer cells sit flush with the container edge, the inner ones are
     inset — otherwise the first column's text starts 20px in from every other
     block on the page */
  .sv4v10-cell:nth-child(2n+1) { padding-left: 0; }
  .sv4v10-cell:nth-child(2n)   { padding-right: 0; }
}
@media (min-width: 761px) {
  .sv4v10-head { grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 30px; padding-bottom: 24px; }
  .sv4v10-head .sv4-link { margin: 0 0 -10px; }   /* keeps the baseline and the 44px box */
}
@media (min-width: 1100px) {
  .sv4v10-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sv4v10-cell { padding: 20px; }
  .sv4v10-cell:nth-child(2n+1), .sv4v10-cell:nth-child(2n) { padding-inline: 20px; }
  .sv4v10-cell:nth-child(3n+1) { padding-left: 0; }
  .sv4v10-cell:nth-child(3n)   { padding-right: 0; }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sv4-arrow, .sv4-arrow svg, .sv4-link svg,
  .sv4v4-block, .sv4v4-block h3, .sv4v5-item,
  .sv4v6-name, .sv4v6-name svg, .sv4v9-card, .sv4v9-go svg,
  .sv4v10-cell, .sv4v10-cell h3, .sv4v10-cell h3 svg { transition: none; }
  .sv4v9-card:hover { transform: none; }
  .sv4-arrow svg, .sv4-link svg, .sv4v6-name svg,
  .sv4v9-go svg, .sv4v10-cell h3 svg { transform: none !important; }
  .sv4v9-rail { scroll-snap-type: none; scroll-behavior: auto; }
}