/* ==========================================================================
   SOLUTIONS SUB-PAGES — SECTION 6: CONNECTED VISCAP SERVICES
   Shortlist: designs 4, 5, 6, 9, 10 — built on the HOME PAGE base
   ==========================================================================
   Preview-only. Winning blocks move into styles.css; this file and its
   preview page are then deleted. Everything is namespaced .s6- / .s6vN- so
   nothing here can reach a live page and parallel sessions cannot collide.

   Ten were built and five were chosen; 1, 2, 3, 7 and 8 have been removed
   from this file and its preview so what is left is exactly what gets
   lifted. The generator that emits all ten is kept outside the repo, so the
   dropped five are one command away if any of them is wanted back.

   The five cover one axis each — sticky (4), image-led (5), editorial
   grouping (6), scroll-driven (9), compact (10) — so a page can pick the
   §6 that suits the section above it rather than always repeating one.

   THE BASE — index.html, not solutions.html
   ------------------------------------------------------------------------
   Read out of styles.css and matched number for number. Every rule below
   that echoes a home-page value names it in a comment.

     RADIUS      var(--radius) = 4px. 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 var(--ease) and modest — border-colour, a 2px lift,
                 and the arrow nudging 4px. No wipes, blooms, sheen sweeps
                 or sibling dimming anywhere in this file.
     MOTIF       the 60x60 outlined arrow box (.card-arrow), 48x48 in row
                 lists. §6 is the one section whose whole job is to send the
                 reader somewhere else, so the motif earns its keep here: it
                 carries designs 4 and 5. The other three take the home
                 page's two smaller link signals instead — .link-arrow's
                 inline chevron (6, 10) and the bento .feat-link (9).
                 Only the 48x48 size is instantiated by these five; the 60x60
                 base is kept because that is the .card-arrow definition and
                 --sm is its row-list modifier, exactly as styles.css has it.
     GRADIENT    held back — large numerals (.g-num) and thin accent rules
                 only. Used in exactly two places below: the phase numerals
                 in design 6 and the section rule in design 10.
     DARK STAT   var(--c-dark) fill, 4px radius, solid 3px accent bottom
                 border (.why-glance-stat). Design 9.

   The one substitution: where the home page uses var(--c-accent), the
   Solutions family uses var(--fam-700). Geometry, weights, shadows and
   timings are unchanged.

   THE CONTENT — SAP BTP §6, the heaviest of the four reference docs
   ------------------------------------------------------------------------
   §6 is a fixed shape everywhere: 8 service lines, one line of description
   each. The BTP doc carries the longest of those lines (149 characters on
   SAP Integration Services), so every design is stress-tested at the widest
   the section will ever get. All eight link to the real, already-built
   pages in site/services/ — there is a 1:1 mapping.

   HEADINGS    the section title is an h2 and each service name an h3, so
               the outline is real — the home page skips straight to h4
               inside .svc-card. Design 6 is the exception and the reason
               the rule matters: its phase names take the h3 and the
               services below them take h4, which is what the nesting
               actually is. Type is set per design (16.5-19px / 700 / 1.4),
               all of it under the .svc-card h4 spec it derives from.

   RESPONSIVE — genuinely mobile-first. Base CSS is authored for 390px and
   steps up with min-width only, inverting styles.css's desktop-first
   queries. Safe: no shared selectors.
   Steps: 390 base · 561 · 761 · 941 · 1100 (4-up grids) · 1340 (media nudge)
   ========================================================================== */


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

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

.s6-note { background: var(--fam-tint); }
.s6-note .container { padding-block: 36px; }
.s6-note h3 { font-size: 17px; margin: 0 0 9px; color: var(--c-ink); }
.s6-note p { font-size: 15px; line-height: 1.7; color: var(--c-body); margin: 0; max-width: 76ch; }
.s6-note p + p { margin-top: 12px; }
.s6-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. Capped below §2's
   52px because §6 is a connector section sitting deep in the page — it should
   not compete with the section that opens it. The looser base line-height is
   for the 3-line wrap at 390px; .98 only reads well once the heading is short
   enough to hold one or two lines. */
.s6-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;
}
.s6-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 */
.s6-lede { font-size: 16px; font-weight: 300; line-height: 1.6; color: #323232; margin: 18px 0 0; max-width: 68ch; }
.s6-lede b { font-weight: 600; color: var(--c-ink); }

/* THE MOTIF — .card-arrow, 60x60, neutral #c4c4c4 border, 4px radius. */
.s6-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);
}
.s6-arrow svg { width: 26px; height: 24px; transition: transform .22s var(--ease); }
/* .svc-cards--rows shrinks the box to 48x48 and the glyph to 22x20 */
.s6-arrow--sm { width: 48px; height: 48px; }
.s6-arrow--sm svg { width: 22px; height: 20px; }

/* .link-arrow: 20px / 700 / accent, svg 18x16 nudging 4px.
   The home page's own link box is 24px tall. Padded out to a 44px touch
   target and pulled back by the same amount, so the hit area grows and the
   layout does not move a pixel. */
.s6-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;
}
.s6-link svg { width: 18px; height: 16px; transition: transform .2s var(--ease); }
.s6-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 */
.s6-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;
}

/* Shared section head block used by most designs */
.s6-head { max-width: 62ch; }


/* ==========================================================================
   DESIGN 4 — STICKY BRIEF + BLOCK PAIRS
   The brief holds still while the services scroll past it — the .svc-panel
   split from the home page's tabbed explorer (360px aside + 1fr panel),
   with the aside pinned.
   The services themselves are borderless: a single 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.
   ========================================================================== */
.s6v4 { display: grid; gap: 30px; }
.s6v4-blocks { display: grid; grid-template-columns: 1fr; gap: 0; }
.s6v4-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);
}
.s6v4-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); }
.s6v4-block p  { grid-column: 1; font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 6px 0 0; }
.s6v4-block .s6-arrow { grid-column: 2; grid-row: 1 / span 2; }
@media (hover: hover) {
  .s6v4-block:hover { border-top-color: var(--fam-700); }
  .s6v4-block:hover h3 { color: var(--fam-700); }
  .s6v4-block:hover .s6-arrow { border-color: var(--fam-700); }
  .s6v4-block:hover .s6-arrow svg { transform: translateX(4px); }
}
.s6v4-block:focus-visible { border-top-color: var(--fam-700); outline: 2px solid var(--fam-700); outline-offset: 2px; }
@media (min-width: 761px) {
  .s6v4-blocks { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 40px; }
}
@media (min-width: 941px) {
  /* .services-grid: 360px 1fr / 56px, top-aligned */
  .s6v4 { grid-template-columns: minmax(0,360px) minmax(0,1fr); gap: 56px; align-items: start; }
  /* [id] { scroll-margin-top: 130px } sets the page's idea of "below the
     header" — the sticky offset matches it so a jump-link and a sticky stop
     land on the same line */
  .s6v4-aside { position: sticky; top: 118px; }
  .s6v4-blocks { column-gap: 48px; }
}


/* ==========================================================================
   DESIGN 5 — MEDIA COLUMN + SERVICE LIST
   The home page's .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
   0 30px 60px rgba(0,0,0,.35) shadow, and the nudge out of its own column.
   THE NUDGE: home applies left/bottom at >=941px. At 941-1339 the container
   still only has 32px of gutter, so a 40px shift pushes the panel past the
   viewport and the page scrolls sideways. Held back to 1340px, where there
   is room for it — the look is identical wherever it can actually be shown.
   ========================================================================== */
.s6v5 { display: grid; gap: 28px; }
/* stacked below 941 — the split needs its own gap there, or the media panel
   butts straight into the eyebrow */
.s6v5-split { display: grid; gap: 28px; }
.s6v5-head { margin-bottom: 24px; }
.s6v5-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);
}
.s6v5-list { display: flex; flex-direction: column; }
.s6v5-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);
}
.s6v5-item:first-child { border-top: 1px solid var(--c-line); }
.s6v5-item h3 { grid-column: 1; grid-row: 1; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0; }
.s6v5-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; }
.s6v5-item .s6-arrow { grid-column: 2; grid-row: 1 / span 2; }
@media (hover: hover) {
  .s6v5-item:hover { border-bottom-color: var(--fam-700); }
  .s6v5-item:hover .s6-arrow { border-color: var(--fam-700); }
  .s6v5-item:hover .s6-arrow svg { transform: translateX(4px); }
}
.s6v5-item:focus-visible { border-bottom-color: var(--fam-700); outline: 2px solid var(--fam-700); outline-offset: 2px; }
@media (min-width: 761px) {
  .s6v5-media { min-height: 280px; }
  .s6v5-item { padding: 17px 4px; }
  .s6v5-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. */
  .s6v5-split { grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: stretch; }
  .s6v5-media { min-height: 0; }
  .s6v5-head { margin-bottom: 28px; }
}
@media (min-width: 1340px) {
  .s6v5-media { position: relative; right: 40px; bottom: 15px; }
}


/* ==========================================================================
   DESIGN 6 — PHASE SPINE
   The only design that adds an idea to the content rather than a shape:
   the eight service lines grouped into the three phases they actually
   belong to — plan (1), build (4), run (3). A solution page that lands a
   reader cold benefits from being told which of the eight comes first.
   Structure is the home .services-grid again (label column + content
   column). Each phase is separated from the next by a single var(--c-line)
   rule — there is no vertical rule between the two columns — and anchored
   by the gradient-clipped phase numeral (.g-num), the one place besides
   design 10 that this file lets the gradient appear.
   No arrow boxes here: the whole point is that this reads as an editorial
   index, and eight boxes would flatten the three phases back into a list.
   ========================================================================== */
.s6v6 { background: var(--c-surface-2); }   /* .why-glance sits on --c-surface-2 */
.s6v6-phase { display: grid; gap: 16px; padding-block: 26px; border-top: 1px solid var(--c-line); }
.s6v6-phase:first-of-type { margin-top: 30px; }
.s6v6-phase:last-of-type { border-bottom: 1px solid var(--c-line); }
.s6v6-cap { display: flex; align-items: baseline; gap: 14px; }
.s6v6-cap h3 { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
.s6v6-cap p { font-size: 14.5px; font-weight: 300; line-height: 1.5; color: var(--c-muted); margin: 4px 0 0; }
.s6v6-rows { display: grid; gap: 0; }
.s6v6-row { padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.s6v6-row:last-child { border-bottom: 0; padding-bottom: 0; }
.s6v6-row h4 { margin: 0; font-size: 0; }        /* wrapper only — the link is the heading */
/* same padded-and-pulled-back trick as .s6-link: a single-line name at
   17px/1.4 is 23.8px, so 11px each side clears 44 with room to spare and the
   equal negative margin keeps the row exactly where it was */
.s6v6-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);
}
.s6v6-name svg { width: 15px; height: 13px; flex-shrink: 0; transition: transform .2s var(--ease); }
.s6v6-row p { font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 5px 0 0; max-width: 64ch; }
@media (hover: hover) {
  .s6v6-name:hover { color: var(--fam-700); }
  .s6v6-name:hover svg { transform: translateX(4px); }
}
.s6v6-name:focus-visible { color: var(--fam-700); outline: 2px solid var(--fam-700); outline-offset: 3px; }
@media (min-width: 761px) {
  .s6v6-phase { grid-template-columns: minmax(0,240px) minmax(0,1fr); gap: 34px; padding-block: 30px; }
  .s6v6-cap { display: block; }
  .s6v6-row { padding: 14px 0; }
}
@media (min-width: 941px) {
  .s6v6-phase { grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 56px; padding-block: 34px; }
  .s6v6-name { font-size: 19px; }
}


/* ==========================================================================
   DESIGN 9 — SNAP RAIL OF DARK CARDS
   The one scroll-driven layout in the set. Below 1100 the eight services
   are a snap rail — a scroll gesture rather than eight screens of stacked
   rows, which is what §6 costs on a phone in every other design here.
   At 1100 the rail resolves into a plain 4-up 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, white heading, rgba(255,255,255,.72) body.
   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 and
   the container needs no tabindex of its own.
   ========================================================================== */
.s6v9 { background: var(--c-surface-2); }
.s6v9-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;
  /* the rail's own scrollbar, kept quiet */
  scrollbar-width: thin; scrollbar-color: #c4c4c4 transparent;
}
.s6v9-rail::-webkit-scrollbar { height: 6px; }
.s6v9-rail::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 3px; }
.s6v9-rail::-webkit-scrollbar-track { background: transparent; }
.s6v9-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);
}
.s6v9-n { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--fam-300); font-variant-numeric: tabular-nums; }
.s6v9-card h3 { margin: 12px 0 0; font-size: 18px; font-weight: 700; line-height: 1.35; color: #fff; }
.s6v9-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; }
.s6v9-go { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fam-200); }
.s6v9-go svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
@media (hover: hover) {
  .s6v9-card:hover { border-bottom-color: var(--fam-300); box-shadow: 0 14px 30px rgba(20,20,40,.08); transform: translateY(-2px); }
  .s6v9-card:hover .s6v9-go svg { transform: translateX(4px); }
}
.s6v9-card:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 3px; }
.s6v9-hint { margin-top: 12px; font-size: 13.5px; font-weight: 400; color: var(--c-muted); display: flex; align-items: center; gap: 8px; }
.s6v9-hint svg { width: 16px; height: 14px; }
@media (min-width: 561px) {
  .s6v9-rail { grid-auto-columns: min(56%, 330px); gap: 16px; }
}
@media (min-width: 941px) {
  .s6v9-rail { grid-auto-columns: min(38%, 340px); }
}
@media (min-width: 1100px) {
  .s6v9-rail {
    grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0,1fr));
    grid-auto-columns: auto; gap: 18px; overflow-x: visible;
    scroll-snap-type: none; padding-bottom: 0; margin-top: 34px;
  }
  .s6v9-card { padding: 26px 24px 22px; min-height: 236px; }
  .s6v9-hint { display: none; }
}


/* ==========================================================================
   DESIGN 10 — HAIRLINE SERVICE MATRIX
   The compact one. §6's job on a real page is to be a connector, not a
   destination — this version says the same eight things in 365px at 1440
   against design 1's 613px and design 5's 893px, so §5 and §7 keep their
   weight. (Measured; at 390 every design is a single column and no layout
   here is meaningfully shorter than another.)
   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 eight cards. The section rule under the head is
   the second and last place this file uses the gradient — a 2px accent
   rule, which is the other thing the home page allows it on.
   ========================================================================== */
.s6v10-head { display: grid; gap: 14px; padding-bottom: 22px; }
.s6v10-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. */
.s6v10-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--c-line); border-bottom: 1px solid var(--c-line);
}
.s6v10-cell {
  background: #fff; padding: 16px 2px 18px;
  transition: background-color .22s var(--ease);
}
.s6v10-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);
}
.s6v10-cell h3 svg { width: 14px; height: 12px; flex-shrink: 0; transition: transform .2s var(--ease); }
.s6v10-cell p { font-size: 14.5px; font-weight: 300; line-height: 1.55; color: #323232; margin: 7px 0 0; }
.s6v10-cell a { display: block; min-height: 44px; }   /* touch target */
@media (hover: hover) {
  .s6v10-cell:hover h3 { color: var(--fam-700); }
  .s6v10-cell:hover h3 svg { transform: translateX(4px); }
}
.s6v10-cell a:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }
@media (min-width: 561px) {
  .s6v10-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .s6v10-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 */
  .s6v10-cell:nth-child(2n+1) { padding-left: 0; }
  .s6v10-cell:nth-child(2n)   { padding-right: 0; }
}
@media (min-width: 761px) {
  .s6v10-head { grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 30px; padding-bottom: 24px; }
  .s6v10-head .s6-link { margin: 0 0 -10px; }   /* keeps the baseline, keeps the 44px box */
}
@media (min-width: 1100px) {
  .s6v10-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .s6v10-cell { padding: 20px; }
  .s6v10-cell:nth-child(2n+1), .s6v10-cell:nth-child(2n) { padding-inline: 20px; }
  .s6v10-cell:nth-child(4n+1) { padding-left: 0; }
  .s6v10-cell:nth-child(4n)   { padding-right: 0; }
}


/* ==========================================================================
   REDUCED MOTION
   The home page's motion budget is already small — border colours and a 4px
   glyph nudge. This drops the two transforms and the snap behaviour and
   leaves the colour changes, which arrive instantly.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .s6-arrow, .s6-arrow svg, .s6-link svg,
  .s6v4-block, .s6v4-block h3, .s6v5-item,
  .s6v6-name, .s6v6-name svg, .s6v9-card, .s6v9-go svg,
  .s6v10-cell, .s6v10-cell h3, .s6v10-cell h3 svg { transition: none; }
  .s6v9-card:hover { transform: none; }
  .s6-arrow svg, .s6-link svg, .s6v6-name svg,
  .s6v9-go svg, .s6v10-cell h3 svg { transform: none !important; }
  .s6v9-rail { scroll-snap-type: none; scroll-behavior: auto; }
}