/* ==========================================================================
   SOLUTIONS SUB-PAGES — SECTION 5: VISCAP'S CONSULTING & IMPLEMENTATION ROLE
   Shortlist: designs 2, 4, 5, 9, 14 — built on the HOME PAGE base
   ==========================================================================
   Fifteen were designed; these five were selected. The original numbering is
   kept so earlier review notes still point at the right thing — the gaps are
   deliberate, not missing work. The ten that were cut are recoverable from
   git history if one is wanted back.

   Preview-only. Winning blocks move into styles.css; this file and its
   preview page are then deleted. Every class is namespaced .s5vN- so nothing
   can reach a live page and parallel sessions cannot collide.

   THE ROTATION — what each of the five is FOR
   ------------------------------------------------------------------------
     2   sticky rail       light · wide · nothing hidden. The reference
                           treatment; use where §5 is the page's main event.
     4   deep band         DARK · full-bleed. The rhythm break — one of these
                           per neighbourhood of pages, never two adjacent.
     5   spine timeline    light · wide · states the sequence as a shape.
     9   snap stepper      light · COMPACT, fixed height. Use where §4 already
                           ran long and §5 must not add another screen.
    14   zig-zag           light · wide · alternating. The most editorial;
                           use where §5 is the hero.

   Pacing note: 2, 5 and 14 are the three TALL variants (3.1k–3.5k px at
   390). Three of the five being tall is fine across eleven pages, but do not
   put a tall §5 on a page whose §4 carried thirteen sub-modules — that is
   what 9 is for.

   THE BASE — index.html, not solutions.html
   ------------------------------------------------------------------------
   Read out of styles.css and matched number for number. These are not
   guidelines:

     RADIUS      var(--radius) = 4px (.svc-card). Media only gets 8px
                 (.glance-media). Bento tiles get none at all (.feat-tile).
     BORDERS     neutral #c4c4c4 on cards, var(--c-line) on rules.
                 NEVER --fam-line.
     SHADOWS     neutral. 0 14px 30px rgba(20,20,40,.08) on cards,
                 0 30px 60px rgba(0,0,0,.35) on media. NEVER --fam-shadow.
     HOVER       .22s and modest — border-color, translateY(-2px), and the
                 arrow nudging translateX(4px). No wipes, no blooms, no
                 sibling dimming, no sheen.
     MOTIF       the 60x60 outlined arrow box (.card-arrow), 48x48 in row
                 lists. The one recurring "this is clickable" signal.
     GRADIENT    held back. Large numerals (.g-num) and thin accent rules
                 only — never a hover wipe. The bullet marker here is the
                 sitewide 10x2 gradient rule (.article-body ul li::before),
                 which is a thin accent rule, not a dot of colour.
     ROW LISTS   .svc-cards--rows: no border, no radius, one var(--c-line)
                 bottom rule. Hover changes ONLY that rule's colour.
     DARK STAT   .why-glance-stat — var(--c-dark) fill, 4px radius, a SOLID
                 3px accent bottom border. Not a gradient spine.

   The one substitution: where the home page uses var(--c-accent), the
   Solutions family uses var(--fam-700). That is the whole re-theme —
   geometry, weights, shadows and timings are unchanged.

   ONE DOCUMENTED DEVIATION
   ------------------------------------------------------------------------
   On the deep violet band (v4) --fam-grad (700 -> 400) resolves to roughly
   2.4:1 against --fam-800 and is unreadable. The home page never has this
   problem because .g-num sits on a near-black. Rather than invent a second
   gradient, numerals on dark are SOLID var(--fam-300) (4.8:1) and the
   gradient appears there only as a thin rule. Nothing else changes.

   CONTENT — the worst case, deliberately
   ------------------------------------------------------------------------
   §4 of the handoff quotes §5's worst case as 7 blocks x 6 bullets. The BTP
   reference doc is actually harder: 7 blocks and 48 bullets (7/7/7/6/6/7/8).
   All five carry that identical BTP §5 content, so every layout here is
   proven at the top of the range. S/4HANA's 6 blocks / 34 bullets is the
   easy end.

   RESPONSIVE — mobile-first at 390px stepping up with min-width, inverting
   styles.css's desktop-first queries. Safe: no shared selectors.
   Steps: 390 base · 561 · 761 · 941 · 1181
   ========================================================================== */


/* ==========================================================================
   PREVIEW CHROME — not part of any design
   ========================================================================== */
.s5-flag { position: sticky; top: 0; z-index: 60; background: #14141c; color: #fff; font-size: 13px; }
.s5-flag .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-block: 10px; }
.s5-flag b { font-weight: 700; }
.s5-flag span { color: rgba(255,255,255,.62); }

.s5-label { border-top: 2px solid var(--c-ink); background: #fff; padding-block: 30px 6px; }
.s5-label .container { display: flex; flex-direction: column; gap: 7px; }
.s5-label h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
.s5-label h2 b { color: var(--fam-700); font-weight: 800; }
.s5-label p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--c-muted); max-width: 78ch; }
.s5-label code { font-size: 13px; color: var(--fam-700); }

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


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

/* .services-title: 700 (not 900), line-height .98, -.025em. Stepped down from
   the home page's 64px cap because §5 sits mid-page under an H1 hero — the
   same step-down the approved §2 designs take. */
.s5-h2 {
  font-size: clamp(30px, 4.8vw, 52px); font-weight: 700; line-height: 1.0;
  letter-spacing: -.025em; color: var(--c-ink); margin: 0; text-wrap: balance;
}
.s5-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 */
.s5-lede { font-size: 16px; font-weight: 300; line-height: 1.6; color: #323232; margin: 0; }
.s5-lede + .s5-lede { margin-top: 16px; }
.s5-lede b { font-weight: 600; color: var(--c-ink); }
/* (.s5-role went with designs 6 and 15 — design 4 sets its own closing
   statement inside .s5v4-close.) */

/* NOTE ON THE MOTIF — the 60x60 arrow box (.card-arrow) is NOT in this
   shortlist. It was carried by designs 1 and 3, which were not selected.
   That is defensible rather than an omission: the arrow box is the home
   page's "this goes somewhere" signal, and nothing in §5 is a link — the
   stages describe work, they do not navigate. If §5's stages should link
   out to the matching service pages, the box comes back on design 2's rail
   rows and design 9's cards at 48x48, and that is a five-line change.

   .s5-arrow / .s5-arrow--sm / .s5-link / .s5-rail / .s5-bul--cols were all
   removed with the variants that used them. */

/* .g-num: gradient-clipped numerals — one of only two places the home page
   lets the gradient appear. Light surfaces only; see the deviation note. */
.s5-num {
  display: block; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: var(--fam-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Bullet list. The sitewide marker is a 10x2 gradient rule
   (.article-body ul li::before) — a thin accent rule, which is exactly what
   the home page permits the gradient to be. */
.s5-bul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.s5-bul li {
  position: relative; padding-left: 20px;
  font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232;
  break-inside: avoid;
}
.s5-bul li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 10px; height: 2px; background: var(--fam-grad);
}
/* on the deep band */
.s5-bul--dark li { color: rgba(255,255,255,.78); }
.s5-bul--dark li::before { background: var(--fam-300); }

/* Small stage counter, e.g. 03 / 07. nowrap + no shrink: inside a flex row
   beside a long stage title it was breaking after the slash at 390px. */
.s5-count {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #b7b7c2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; flex-shrink: 0;
}


/* ==========================================================================
   DESIGN 2 — STICKY STAGE RAIL + OPEN PANELS
   Everything is visible; the rail is orientation, not disclosure. Base is a
   plain numbered table of contents in the row-list treatment (46px rows, so
   the tap targets clear 44px); at ≥941 that rail becomes a sticky column
   beside the panels.
   Worst case: the panels just get longer — the rail does not care.
   ========================================================================== */
.s5v2-head { margin-bottom: 26px; }

.s5v2-rail { margin: 0 0 34px; padding: 0; list-style: none; }
.s5v2-rail li { border-bottom: 1px solid var(--c-line); transition: border-bottom-color .22s var(--ease); }
.s5v2-rail li:first-child { border-top: 1px solid var(--c-line); }
.s5v2-rail a {
  display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: center;
  padding: 13px 2px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--c-ink);
  transition: color .22s var(--ease);
}
.s5v2-rail i { font-style: normal; font-size: 13px; font-weight: 700; color: #b7b7c2; font-variant-numeric: tabular-nums; transition: color .22s var(--ease); }
@media (hover: hover) {
  .s5v2-rail li:hover { border-bottom-color: var(--fam-700); }
  .s5v2-rail li:hover a, .s5v2-rail li:hover i { color: var(--fam-700); }
}
.s5v2-rail a:focus-visible { outline: 2px solid var(--fam-700); outline-offset: -2px; }

.s5v2-panel { padding-block: 24px; border-top: 1px solid var(--c-line); }
.s5v2-panel:first-child { border-top: none; padding-top: 0; }
.s5v2-panel:last-child { padding-bottom: 0; }
.s5v2-ph { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.s5v2-panel h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--c-ink); margin: 0; }
.s5v2-panel .s5-lede { margin-bottom: 16px; font-size: 15px; }

@media (min-width: 561px) {
  .s5v2-panel .s5-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 941px) {
  .s5v2 { display: grid; grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 64px; align-items: start; }
  .s5v2-aside { position: sticky; top: 110px; }
  /* the H2 shares this column with the rail, so it takes the narrow-column
     step-down rather than the full 52px */
  .s5v2-head .s5-h2 { font-size: clamp(30px, 3vw, 38px); }
  .s5v2-rail { margin-bottom: 0; margin-top: 26px; }
  .s5v2-head { margin-bottom: 0; }
  .s5v2-panel { padding-block: 30px; }
  .s5v2-panel .s5-bul { grid-template-columns: repeat(3, minmax(0,1fr)); }
}


/* ==========================================================================
   DESIGN 4 — DEEP BAND, NUMBERED STAGES
   The full-bleed inverse. --fam-grad-deep fill, hairline rules at
   rgba(255,255,255,.22) exactly as the approved §2 design 2 uses on dark, and
   the .why-glance-stat marker — a SOLID 3px accent rule — closing the band.
   Numerals are solid --fam-300, not gradient: see the deviation note at the
   top of this file.
   Worst case: rows are auto-height, so an 8-bullet stage just runs one line
   deeper than its neighbours.
   ========================================================================== */
.s5v4 { background: var(--fam-grad-deep); color: #fff; padding-block: 40px 44px; }
.s5v4-head { margin-bottom: 30px; }
.s5v4 .s5-eyebrow { color: var(--fam-200); }
.s5v4-head h2 { color: #fff; max-width: 20ch; }
.s5v4-head .s5-lede { color: rgba(255,255,255,.76); margin-top: 16px; max-width: 62ch; }
.s5v4-head .s5-lede b { color: #fff; }
/* thin accent rule — the second of the two places the gradient is allowed */
.s5v4-hr { height: 2px; width: 88px; background: var(--fam-grad); margin-top: 22px; }

.s5v4-row {
  padding-block: 20px; border-top: 1px solid rgba(255,255,255,.22);
  transition: border-top-color .22s var(--ease);
}
.s5v4-row:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.s5v4-rh { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.s5v4-n { font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--fam-300); font-variant-numeric: tabular-nums; }
.s5v4-row h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; margin: 0; }
.s5v4-row .s5-bul li { color: rgba(255,255,255,.78); }
@media (hover: hover) {
  .s5v4-row:hover { border-top-color: var(--fam-100); }
}

/* .why-glance-stat: --c-dark fill, 4px radius, solid 3px accent bottom rule */
.s5v4-close {
  margin-top: 30px; background: var(--c-dark); border-radius: var(--radius);
  padding: 22px 20px 20px; border-bottom: 3px solid var(--fam-300);
}
.s5v4-close p { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.78); }
.s5v4-close b { color: #fff; font-weight: 700; }

@media (min-width: 561px) {
  .s5v4-row .s5-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 761px) {
  .s5v4 { padding-block: 48px 52px; }
  .s5v4-row { display: grid; grid-template-columns: minmax(0,268px) minmax(0,1fr); gap: 6px 40px; padding-block: 24px; }
  .s5v4-rh { margin-bottom: 0; }
  .s5v4-row h3 { font-size: 19px; }
  .s5v4-close { padding: 26px 24px 22px; }
}
@media (min-width: 941px) {
  .s5v4 { padding-block: 56px 60px; }
  .s5v4-row .s5-bul { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .s5v4-row { grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 6px 56px; }
}


/* ==========================================================================
   DESIGN 5 — SPINE TIMELINE
   The only variant that states the sequence as a shape. A continuous 2px
   gradient rule runs the full height with a node per stage — a thin accent
   rule, which is the gradient's second permitted home. Numerals are the
   large gradient-clipped kind (.g-num) and sit on white, where --fam-grad
   reads at 10.2:1 to 5.3:1.
   Worst case: the spine is height-agnostic; an 8-bullet stage lengthens its
   own segment and nothing else moves.
   ========================================================================== */
/* the measure cap belongs on the H2, not the wrapper: ch resolves against the
   element's OWN font-size, so 30ch on a 16px wrapper is 270px and broke the
   52px heading into six lines */
.s5v5-head { margin-bottom: 34px; }
.s5v5-head .s5-h2 { max-width: 20ch; }
.s5v5-track { position: relative; padding-left: 30px; }
.s5v5-track::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px; background: var(--fam-grad);
}
.s5v5-stage { position: relative; padding-bottom: 30px; }
.s5v5-stage:last-child { padding-bottom: 0; }
/* the node — a 12px dot with a white ring so the spine reads as continuous
   behind it rather than butting into it */
.s5v5-stage::before {
  content: ""; position: absolute; left: -30px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fam-700); box-shadow: 0 0 0 4px #fff;
}
/* .s5v5-side keeps the numeral+title row and the summary together as ONE grid
   child, so the ≥941 two-column split places them both in the left column.
   The summary is a sibling of .s5v5-sh rather than nested inside it — nested,
   it inherited the numeral's 42px indent and hung further right than the
   bullets underneath it. */
.s5v5-sh { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.s5v5-n { font-size: 30px; }
.s5v5-stage h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0; }
.s5v5-sum { font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--c-muted); margin: 0 0 16px; }

@media (min-width: 561px) {
  .s5v5-stage .s5-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 761px) {
  .s5v5-track { padding-left: 42px; }
  .s5v5-track::before { left: 9px; }
  .s5v5-stage { padding-bottom: 38px; }
  .s5v5-stage::before { left: -42px; top: 10px; width: 20px; height: 20px; border: 4px solid #fff; box-shadow: none; }
  .s5v5-n { font-size: 40px; }
  .s5v5-stage h3 { font-size: 21px; }
}
@media (min-width: 941px) {
  .s5v5-head { margin-bottom: 44px; }
  .s5v5-stage { display: grid; grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 0 52px; }
  .s5v5-sum { margin-bottom: 0; }
  .s5v5-stage .s5-bul { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1181px) {
  .s5v5-stage .s5-bul { grid-template-columns: repeat(3, minmax(0,1fr)); }
}


/* ==========================================================================
   DESIGN 9 — SCROLL-SNAP STEPPER
   One stage per card on a horizontal snap track. The only variant where §5
   occupies a fixed height no matter how many stages arrive — eight or
   thirteen, the section is one card tall. Cards are .svc-card geometry and
   stretch to the tallest, so the 8-bullet stage sets the height once.
   The track lives INSIDE .container, so the page itself can never scroll
   sideways; the scrollbar is styled thin and family-coloured and doubles as
   the progress indicator, which is why there is no JS here.
   Worst case: excellent — more stages cost scroll distance, not page height.
   ========================================================================== */
.s5v9-head { margin-bottom: 24px; }
.s5v9-hint { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--c-muted); }
.s5v9-hint svg { width: 18px; height: 12px; color: var(--fam-700); }

.s5v9-track {
  display: flex; gap: 14px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* room for the cards' hover shadow inside the scroll box */
  padding: 6px 2px 18px;
  scrollbar-width: thin; scrollbar-color: var(--fam-700) var(--c-line);
}
.s5v9-track:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 4px; }
.s5v9-track::-webkit-scrollbar { height: 4px; }
.s5v9-track::-webkit-scrollbar-track { background: var(--c-line); border-radius: 2px; }
.s5v9-track::-webkit-scrollbar-thumb { background: var(--fam-700); border-radius: 2px; }

.s5v9-card {
  flex: 0 0 84%; scroll-snap-align: start;
  display: flex; flex-direction: column;
  border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 22px 20px; background: #fff; color: var(--c-ink);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.s5v9-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.s5v9-card h3 { font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 14px; }
.s5v9-card .s5-bul { flex: 1; }
@media (hover: hover) {
  .s5v9-card:hover { border-color: var(--fam-700); box-shadow: 0 14px 30px rgba(20,20,40,.08); transform: translateY(-2px); }
}

@media (min-width: 561px) { .s5v9-card { flex-basis: 54%; } }
@media (min-width: 761px) { .s5v9-card { flex-basis: 40%; padding: 26px 24px; } }
@media (min-width: 941px) {
  .s5v9 { display: grid; grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 56px; align-items: center; }
  .s5v9-head { margin-bottom: 0; }
  .s5v9-head .s5-h2 { font-size: clamp(30px, 3vw, 38px); }
  .s5v9-card { flex-basis: 46%; }
}
@media (min-width: 1181px) { .s5v9-card { flex-basis: 32.4%; } }


/* ==========================================================================
   DESIGN 14 — ZIG-ZAG EDITORIAL
   The home page's .glance split — copy one side, content the other — repeated
   per stage and alternated. Type-only, so the alternation is carried by a
   large gradient numeral (.g-num) rather than by photography, which §5 does
   not have enough relevant images for.
   Rules only below 941 where the layout is a single column and needs them;
   at width the alternation itself is the separator.
   Worst case: the loosest of the fifteen. Seven stages of alternating splits
   is a lot of vertical travel — this one is for pages where §5 is the hero,
   not for the ones where §4 already ran long.
   ========================================================================== */
.s5v14-head { margin-bottom: 32px; }
.s5v14-head .s5-h2 { max-width: 20ch; }

.s5v14-stage { padding-block: 26px; border-top: 1px solid var(--c-line); }
.s5v14-stage:last-child { border-bottom: 1px solid var(--c-line); }
.s5v14-n { font-size: clamp(40px, 6vw, 64px); margin-bottom: 10px; }
.s5v14-stage h3 { font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--c-ink); margin: 0 0 10px; }
.s5v14-side .s5-lede { font-size: 15px; max-width: 42ch; }
.s5v14-stage .s5-bul { margin-top: 18px; }

@media (min-width: 561px) {
  .s5v14-stage .s5-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 941px) {
  .s5v14-stage {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 0 64px; align-items: center;
    padding-block: 40px; border-top: none;
  }
  .s5v14-stage:last-child { border-bottom: none; }
  /* the alternation IS the separator at width */
  .s5v14-stage:nth-child(even) .s5v14-side { order: 2; }
  .s5v14-stage .s5-bul { margin-top: 0; }
  .s5v14-n { font-size: 64px; }
}


/* ==========================================================================
   REDUCED MOTION
   The motion budget here is already tiny — border colours, a 2px lift, a 4px
   arrow nudge and the accordion's plus/minus. This removes the transforms and
   leaves the colour changes, which then arrive instantly.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .s5v2-rail li, .s5v2-rail a, .s5v2-rail i,
  .s5v4-row, .s5v9-card { transition: none; }
  .s5v9-card:hover { transform: none; }
  .s5v9-track { scroll-behavior: auto; }
}