/* Page rhythm — one place to tune vertical spacing across every MAGMA page.
   The design system's rhythm scale is generous for a 1440 sketch; on a 1920 screen
   its top step lands at 144px and doubles wherever a wash opener's bottom padding
   meets the following wrapper's top padding. Tighter steps, and the doubling removed. */
:root{
  --rhythm-section:clamp(48px,6vw,88px);
  --rhythm-block:clamp(32px,3.6vw,52px);
  --rhythm-row:clamp(20px,2.2vw,32px);
  --rhythm-tight:clamp(12px,1.3vw,18px);
  /* A rule belongs to the section it opens: the eyebrow follows it closely, while the
     content above it needs real air, otherwise the line looks like it is propping the
     previous section up. Asymmetric on purpose — before : after ≈ 2 : 1. */
  --rhythm-rule-after:clamp(24px,2.8vw,40px);
  --rhythm-rule-before:clamp(80px,9vw,128px);
}
/* A content wrapper that follows a wash opener does not re-open the section step:
   the opener already closed on it. */
div[style*="padding: var(--rhythm-section)"]{padding-top:0 !important}

/* …and it must not hold the rhythm as a GAP either. With full-bleed washes, a gap
   bounded by two 0.3 edges shows as a pale stripe. So the wrapper's gap goes to zero
   and each washed section carries the rhythm itself — touching edges then match
   (0 meets 0, 0.3 meets 0.3) and every seam is invisible. */
div[style*="gap: var(--rhythm-section)"]{row-gap:0 !important}
/* The rhythm lives in each hairlined section's own padding, asymmetrically, whether
   the section sits in a content wrapper or is a direct child of the page: most
   templates set only `padding: var(--rhythm-section) 0 0` inline, which leaves a
   section's last element touching the next section's rule. */
div[style*="gap: var(--rhythm-section)"] > section,
section[style*="rgba(219, 217, 212, 0.3) 0%"]:not([data-r="hero-shell"]),
section[style*="rgba(222, 204, 175, 0) 0%"]:not([data-r="hero-shell"]){
  padding-top:var(--rhythm-rule-after) !important;
  padding-bottom:var(--rhythm-rule-before) !important;
}
/* A band set to the tight step halves the air it leaves under itself: 128px of
   bottom padding becomes 64, so the gap between two bands falls from 168 to 104
   at 1440 and from 151 to 93 at 1280. The top step is untouched — it is already
   the short half of the pair, and taking it too would close the rule up against
   the section above.

   This must stay AFTER the wash rule above: both selectors weigh 0,2,1, so it is
   source order that decides which one wins. */
section[data-section="band"][data-step="tight"]{
  padding-bottom:clamp(40px,4.5vw,64px) !important;
}

/* The opener keeps its shorter step under the masthead. The home hero is not an
   opener — it owns its own full-screen geometry — so it is excluded here and below. */
div.sc-host > div > section:first-of-type:not([data-r="hero-shell"]){
  padding-top:clamp(40px,4.4vw,64px) !important;
  /* The opener closes tighter than a content section: the script line already hangs
     13px of ink below its box, and there is nothing between the title and the first
     rule, so the full 70–110px step reads as a hole under the name. */
  padding-bottom:clamp(28px,3vw,44px) !important;
}
/* The opener is a LOCKUP, not a spread. Left to the full 1280 band the eyebrow sits at
   one edge and the lead at the other with 500px of nothing between them, and the two
   display lines — 319px and 224px of actual ink — float in it. Held to the system's
   736 reading measure, eyebrow, title and lead stack into one column: 57.5% of the
   band, so the air to the right reads as margin rather than as a gap. */
/* Cap the TEXT of the lockup, not the opener itself: on Bank as a Service the opener
   also holds the hero reproduction, which must keep the full band. */
div.sc-host > div > section:first-of-type:not([data-r="hero-shell"]) h1,
div.sc-host > div > section:first-of-type:not([data-r="hero-shell"]) > div > p,
div.sc-host > div > section:first-of-type:not([data-r="hero-shell"]) [data-r="split"]{max-width:736px !important}
/* At 736 the sans line of an opener lockup wraps, and the script line's ascenders climb
   into its descenders. The system's -2px tuck assumes a single sans line. */
div.sc-host > div > section:first-of-type:not([data-r="hero-shell"]) h1 > span + span{margin-top:10px !important}
/* the ink plate keeps its own padding and needs breathing room around it */
section[data-surface="dark"]{margin-block:var(--rhythm-section) !important;padding-block:clamp(40px,5vw,72px) !important}

/* ── Card hover, fixed centrally ───────────────────────────────────────────
   Two reasons the per-page hover rules never fired:
   1. They matched the inline style by hex (`[style*="#F5F3F0"]`), but React
      serialises inline styles to `rgb(245, 243, 240)` — the selector never hit.
   2. The arrival rule `section.mg-in [data-r="cards"] > *{transform:none}` is more
      specific than `[data-r="cards"] > *:hover`, so the 2px lift lost to it.
   Both are handled here, once, for every page. */
section.mg-in [data-r="cards"] > *:hover,
section.mg-in [data-card]:hover,
section.mg-in [data-r="cookie-types"] > *:hover,
section.mg-in [data-r="tiles"] > *:hover{
  transform:translateY(-2px);
  transition:transform 220ms cubic-bezier(0.22,0.61,0.36,1),background 220ms cubic-bezier(0.22,0.61,0.36,1),border-color 220ms cubic-bezier(0.22,0.61,0.36,1);
}
/* the bone plate deepens; ink and white cards keep their ground */
section.mg-in [data-r="cards"] > *[style*="rgb(245, 243, 240)"]:hover,
section.mg-in [data-card][style*="rgb(245, 243, 240)"]:hover,
section.mg-in [data-r="cookie-types"] > *[style*="rgb(245, 243, 240)"]:hover{background:#EAE6DF}
/* a hairline card commits its border to ink */
section.mg-in [data-r="cards"] > *[style*="rgb(204, 201, 197)"]:hover{border-color:#100C0B}
section.mg-in [data-r="cards"] > *:hover .magma-symbol,
section.mg-in [data-card]:hover .magma-symbol{color:var(--magma-flame-3)}
@media (prefers-reduced-motion:reduce){
  section.mg-in [data-r="cards"] > *:hover,
  section.mg-in [data-card]:hover,
  section.mg-in [data-r="cookie-types"] > *:hover,
  section.mg-in [data-r="tiles"] > *:hover{transform:none}
}

/* The tilted prints are the hero's only imagery above the map band, so they stay as
   long as they have room: the design system hides them at 900, and there they hand
   over to the print inside the headline (hero-art), which the system shows in the
   stacked layout. Nothing is left without a picture at any width. */
@media (max-width:900px){
  [data-r="hero-shell"] [data-r="hero-art"]{display:block !important}
}

/* ── Arrival for the groups the design system does not know about ──────────
   The system animates h2, [data-r="split"|"cards"|"feed"|"rows"|"faq"] and a few
   named blocks. These pages add four more group hooks; they arrive by exactly the
   same rule so nothing looks like a second animation language. Same gate as the
   system: prefers-reduced-motion and .mg-ready on <html>. */
@media (prefers-reduced-motion:no-preference){
  .mg-ready section [data-r="stories"] > *,
  .mg-ready section [data-r="related"] > *,
  .mg-ready section [data-r="cookie-types"] > *,
  .mg-ready section [data-r="tiles"] > *,
  .mg-ready section [data-grid9] > li{
    opacity:0;transform:translate3d(0,26px,0);
    transition:opacity var(--dur-rise) var(--ease-cine),transform var(--dur-drift) var(--ease-cine);
    will-change:opacity,transform;
  }
  section.mg-in [data-r="stories"] > *,
  section.mg-in [data-r="related"] > *,
  section.mg-in [data-r="cookie-types"] > *,
  section.mg-in [data-r="tiles"] > *,
  section.mg-in [data-grid9] > li{opacity:1;transform:none}

  /* reading-order stagger, 70ms apart, capped so the ninth control does not
     arrive half a second after the reader has already read it */
  [data-r="stories"] > *:nth-child(2),[data-r="related"] > *:nth-child(2),
  [data-r="cookie-types"] > *:nth-child(2),[data-r="tiles"] > *:nth-child(2),
  [data-grid9] > li:nth-child(2){transition-delay:70ms}
  [data-r="stories"] > *:nth-child(3),[data-r="related"] > *:nth-child(3),
  [data-r="cookie-types"] > *:nth-child(3),[data-r="tiles"] > *:nth-child(3),
  [data-grid9] > li:nth-child(3){transition-delay:140ms}
  [data-r="stories"] > *:nth-child(4),[data-r="cookie-types"] > *:nth-child(4),
  [data-r="tiles"] > *:nth-child(4),[data-grid9] > li:nth-child(4){transition-delay:210ms}
  [data-r="tiles"] > *:nth-child(5),[data-grid9] > li:nth-child(5){transition-delay:250ms}
  [data-r="tiles"] > *:nth-child(6),[data-grid9] > li:nth-child(6){transition-delay:290ms}
  [data-grid9] > li:nth-child(7){transition-delay:330ms}
  [data-grid9] > li:nth-child(8){transition-delay:360ms}
  [data-grid9] > li:nth-child(9){transition-delay:390ms}
}

/* ── One ground, separation by air ────────────────────────────────────────────
   Two things were tried and dropped. The alternating sand wash painted a grey
   column with white ears on wide screens and a pale stripe at every full-bleed
   seam. The edge-to-edge hairline that replaced it drew a line at every boundary —
   on a seven-section page that is seven lines competing with the hairlines that do
   carry meaning (list rows, table rules, the document list), so they stopped
   reading as structure and became noise.

   What separates sections now is air and the label. Each boundary is: a long step
   of empty ground, then the eyebrow in caps, then the content — the label IS the
   edge, which is how an editorial page has always done it. Rules are left to the
   places where they mean "these are rows of one thing". Contrast comes from what
   is meant to carry it: the bone card tints, the ink plates, the photography. */
html,body{background:#F4F4F2;overflow-x:clip}
section[style*="rgba(219, 217, 212, 0.3) 0%"]:not([data-r="hero-shell"]),
section[style*="rgba(222, 204, 175, 0) 0%"]:not([data-r="hero-shell"]),
section[style*="linear-gradient(180deg,rgba(219,217,212,0.3)"]:not([data-r="hero-shell"]),
section[style*="linear-gradient(180deg,rgba(222,204,175,0)"]:not([data-r="hero-shell"]){
  background:none !important;
  border-top:0 !important;
  margin-inline:calc(50% - 50vw) !important;
  padding-inline:calc(50vw - 50%) !important;
}
/* The share bar is the one exception: its rule is not a section divider but the
   frame of a control strip, and the brief's own page has it. */
section#share{border-top:1px solid #CCC9C5 !important;border-bottom:1px solid #CCC9C5 !important}
/* Ink is a PLATE, everywhere, whatever tag carries the marker.
   Root cause of the inconsistency: the ink CTA was authored per page — a full-bleed
   div on Business Solutions and Bank as a Service, a 12px section plate elsewhere —
   and the rule below used to match only `section[data-surface="dark"]`, so the
   full-bleed ones were never normalised. One treatment now: 12px radius, on the
   1280 band, air above and below. Dialogs and the notice bars keep their own
   geometry — they are not page sections. */
/* The umbrella panel is the exception, and it has to be: it is not a plate sitting
   on the band but the band itself — full-bleed ink, its width the viewport's, its
   corners square. Normalising it to 1280 pulled it onto the band and cut its ears
   off with a 12px radius. */
[data-surface="dark"]:not(aside):not([role="dialog"]):not([role="dialog"] *):not([data-r="umbrella"]){
  box-sizing:border-box;
  max-width:1280px;
  border-radius:12px !important;
  padding-inline:clamp(24px,3vw,48px) !important;
}
/* A plate that hangs directly off a full-bleed section has no gutter to sit in —
   the section pads itself to 0 because it IS the viewport. Give it the band gutter
   so it lands on exactly the same edges as a plate inside the content wrapper. */
section > [data-surface="dark"]:not(aside):not([role="dialog"]):not([data-r="umbrella"]){
  margin-left:clamp(16px,3.2vw,28px) !important;
  margin-right:clamp(16px,3.2vw,28px) !important;
  width:auto !important;
}
section[data-surface="dark"]{
  border-top:0 !important;
  margin-block:var(--rhythm-section) !important;
  padding-block:clamp(40px,5vw,72px) !important;
}
/* The home hero keeps its own warmth behind the archival photograph. */
section[data-r="hero-shell"]{border-top:0 !important;margin-inline:0 !important;padding-inline:0 !important;padding-block:0 !important}

/* Legal and editorial regions carry the client's own HTML (paragraphs, lists,
   nested lists) with no classes to hook, so the reading measure and list rhythm
   are set here rather than inline on every imported node. */
[data-editor-region] p,[data-editor-region] ul,[data-editor-region] ol{max-width:736px}
[data-editor-region] ul,[data-editor-region] ol{padding-left:22px;margin:0}
[data-editor-region] li{margin:0 0 8px}
[data-editor-region] li:last-child{margin-bottom:0}
[data-editor-region] li ul{margin:8px 0 0}
[data-editor-region] a{color:#100C0B;text-decoration:underline;text-decoration-color:var(--magma-grey-300);text-underline-offset:3px}
[data-editor-region] a:hover{color:var(--magma-flame-3);text-decoration-color:var(--magma-flame-3)}
[data-card="tint"] [data-editor-region] p,[data-editor-region] [data-card="tint"] p{max-width:none}

/* Compliance register: the 3-up ink grid drops its column rules when it folds */
@media (max-width:1024px){[data-grid9] > li{border-right:0 !important}}
@media (max-width:680px){[data-grid9] > li{border-bottom:0 !important}[data-grid9] > li:last-child{border-bottom:1px solid rgba(239,238,236,0.16) !important}}


/* ═══ Cinematic layer ══════════════════════════════════════════════════════
   Four moves, all gated by prefers-reduced-motion and by .mg-ready (put on <html>
   by the design system's runtime), so the site renders statically if JS never runs.

   1. Photographs open. A picture does not fade in — it settles: 1.03 scale and a
      raised horizon resolve to rest. Reproductions are the only imagery on this
      site, so this is where the money is.
   2. Labels announce. An eyebrow slides 8px and draws a 2px flame rule under
      itself. Section boundaries are voice, not lines, so the label carries them.
   3. Ink panels breathe. A 26s drift on the panel's own gradient.
   4. Pages are continuous. The document fades up on load and down on an internal
      click, so moving between pages reads as one site rather than 16 documents. */

@media (prefers-reduced-motion:no-preference){

  /* 1 — photographs */
  /* The umbrella's photograph is excluded from the arrival: its transform is the
     parallax, held and updated by the motion runtime, and `transform:none` on
     arrival wiped it out — the panel simply stopped drifting. */
  .mg-ready section figure [role="img"],
  .mg-ready section [data-screen-frame],
  .mg-ready section :not([data-r="umbrella"]) > [data-photo]{
    opacity:0;transform:scale(1.03) translate3d(0,14px,0);
    clip-path:inset(6% 0 0 0 round 12px);
    transition:opacity 900ms var(--ease-cine),transform 1200ms var(--ease-cine),clip-path 1200ms var(--ease-cine);
    will-change:opacity,transform,clip-path;
  }
  section.mg-in figure [role="img"],
  section.mg-in [data-screen-frame],
  section.mg-in :not([data-r="umbrella"]) > [data-photo]{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 12px)}

  /* 2 — labels */
  .mg-ready section [data-label-anim]{
    opacity:0;transform:translate3d(-8px,0,0);
    transition:opacity 520ms var(--ease-cine),transform 700ms var(--ease-cine);
  }
  section.mg-in [data-label-anim]{opacity:1;transform:none}
  .mg-ready section [data-label-anim]::after{
    content:"";display:block;height:2px;margin-top:8px;width:28px;
    background:var(--magma-flame-3);transform:scaleX(0);transform-origin:0 50%;
    transition:transform 620ms var(--ease-cine) 180ms;
  }
  section.mg-in [data-label-anim]::after{transform:scaleX(1)}

  /* 3 — ink panels breathe
     Named mg-panel-drift, not mg-breathe. The design system already defines
     mg-breathe — tokens/motion.css:116, a slow 1.00→1.05 scale — and this file
     loads after it, so redefining the name replaced that gentle scale with a
     background travelling the full width of itself. The umbrella's photograph
     was the visible casualty: it moved instead of breathing. Two different
     animations, two different names. */
  [data-surface="dark"][data-breathe]{
    background-size:180% 180% !important;
    animation:mg-panel-drift 26s ease-in-out infinite alternate;
  }
  @keyframes mg-panel-drift{from{background-position:0% 40%}to{background-position:100% 60%}}

  /* 4 — page continuity */
  /* The page-in animation fills forwards, and a filling animation outranks a normal
     declaration — so the fade-out has to shout to be heard. */
  html.mg-nav-out body{opacity:0 !important;transition:opacity 200ms var(--ease-standard)}
  body{animation:mg-page-in 420ms var(--ease-cine) both}
  @keyframes mg-page-in{from{opacity:0}to{opacity:1}}
}