/* ==========================================================================
   Fonts — self-hosted. These were three third-party round trips (two
   preconnects and a render-blocking stylesheet on fonts.googleapis.com) before
   the browser could paint a single character. Latin and latin-ext only; the
   One static face covering latin and latin-ext in a single file. Not inside a
   cascade layer: @font-face carries no selector.

   Suisse Intl is a SINGLE STATIC WEIGHT (400) with no italic, unlike the
   variable Roboto it replaced. It carries no unicode-range because the one
   file covers latin and latin-ext together, French included. Every
   font-weight in the sheet therefore renders at 400 — see the note in
   02-primitives.css above .btn.
   ========================================================================== */

@font-face {
  font-family: 'Suisse Intl';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/SuisseIntl-Regular.woff2) format('woff2');
}

@layer tokens, primitives, components, chrome, pages, utilities;

@layer tokens {
/* ==========================================================================
   Tokens — the whole vocabulary the rest of the stylesheet is allowed to use.
   Colour, type, rhythm and motion, plus the dark remap. Nothing here selects
   a component; nothing below this file invents a value that isn't here.
   ========================================================================== */

:root {
  /* colour */
  /* The ramp is warm, not neutral: every step carries the same faint green-grey
     cast as the ink, so a light page reads as paper rather than as screen
     white. Nothing here is a fresh hue — it is one cast applied down a ladder. */
  --bg:            #f7f7f4;
  --bg-card:       #f0f0ec;
  /* Square's pricing cards are WHITE on their tinted ground, so the frame is
     made by the card being lighter than the page rather than by a stroke.
     Ours needs a token because #f7f7f4 is already the page. */
  --surface-raised: #ffffff;
  --bg-card-hover: #e9e9e4;
  --bg-invert:     #0b0d0f;
  --bg-invert-hover: #24272a;
  --text:          #0b0d0f;
  /* AA on both the page and the card ground: #797979 was 4.24 and 3.89, and the
     warm #737771 lands in the same trap at 4.25 and 3.99. This clears both. */
  --text-muted:    #6a6d68;
  --text-faint:    #6a6d68;
  --text-invert:   #f0f0ec;
  --line:          #dcddd8;
  --line-strong:   #c9cac4;

  /* The one chromatic value on the site, and it is a signal rather than a
     colour scheme.

     IT IS NOT ON THE PRIMARY BUTTON, with ONE named exception, and that is a
     decision rather than an oversight.
     .btn-primary is --bg-invert: white on the dark pages, near-black on the
     light ones, 17:1 either way against 6.45:1 for white on this blue. An
     earlier version of this comment listed "primary CTA" as its first job,
     which was never true of the shipped stylesheet.
     Checked against the reference set, measured off their rendered pages:
     Vercel, Linear and Shopify all fill the primary CTA monochrome, and Ramp
     puts its accent on the SECONDARY action while the primary stays near
     black. Only Stripe and Railway colour the primary, and both are self-serve
     signups where that one button is the whole funnel. Box is institution-led
     and converts through Talk to us, so the button is not carrying that load.
     The rarity is the point: this value appears in about fifteen places
     site-wide, and on every button it would stop being a signal.

     TWO NAMED EXCEPTIONS. Both are listed here because the rule above is only
     worth having if the list of things that break it is short and written down.

     1. /pricing's plan card CTA, in 05-pages.css as .pcard-cta.btn-primary
        (2026-09-15). The paragraph above names the condition itself — a
        self-serve signup where one button is the whole funnel — and that page
        now meets it: three plans, a $20 and a $60, and a button that opens the
        console. The enterprise band's button on the same screen stays ink,
        which is the split Ramp runs.

     2. The nav's Try Box button, in 04-design-system.css as .nav-try
        (John, 2026-09-15: "the try box button should be blue not black"). It
        is the one control on every page of the site, and it is the door: the
        argument above — that Box converts through Talk to us, so the button is
        not carrying that load — held while the bar's job was wayfinding. With
        three self-serve plans now priced on /pricing it is carrying it.
        Anthropic's bar, which this split button is measured off, colours the
        same segment for the same reason.

     Do not make .btn-primary blue globally without retiring this whole
     argument; if a third surface qualifies, add it here with its reason.

     Where it actually goes otherwise: links and accented text (as --accent-ink),
     active nav, the live edge in a diagram, selected and focus-adjacent states.

     BLUE, not lime (John, 2026-09-11): "our colour is blue not green, see the
     blue that's used in the logo mark". It is the exact fill of the slot in
     the O of the wordmark, so the accent and the mark are now one decision
     instead of two that disagreed.

     It carries text on the light ground, which lime never could, so the rule
     that lime "must never carry text" is retired. MEASURED 6.01:1 on the page
     and 5.65:1 on the card: AA at every text size, not AAA. An earlier note
     here claimed 7.3:1, which was wrong. Where small text needs AAA, use
     --accent-ink. On ink the brand value is 3.07:1 and fails, which is the
     opposite of lime's problem, hence the dark remap below rather than one
     value used everywhere. */
  --accent:      #2648ef;

  /* ---- the fill blue -----------------------------------------------------
     A BLUE FILL AND BLUE TEXT ARE NOT THE SAME COLOUR, and trying to make one
     value do both is what produced the purple (John, 2026-09-15: "is that the
     right blue, fix the blue, it looks like purple", then "give me a sharper
     blue that works with this chinese black").

     The two jobs pull in opposite directions. Blue TEXT on a dark ground has to
     be LIGHT to clear 4.5:1, which is why --accent is remapped up to a pale
     periwinkle on the dark theme. A blue FILL carrying a white label has to be
     DEEP for the same reason, running the other way. --accent was doing both,
     so every blue fill on a dark ground came out at the light text value, and a
     pale blue at hue 227 is a lilac. Nothing was wrong with the value; it was
     being asked the wrong question.

     So this is a fill, it carries white, and it DOES NOT REMAP with the theme —
     a button is the same button on both grounds. MEASURED: white on it 4.83:1
     (AA at the label's size), and as a fill 3.81:1 against Chinese black,
     3.53:1 against the closing band and 4.48:1 against the light page, so its
     edge clears 1.4.11 on every ground the site has.

     HUE 216, against the wordmark's 230. That difference is deliberate and is
     the one open question in it: 230 IS the violet end, and "sharper" is a
     request to leave it. So the UI blue and src/brand/box-logo.svg now differ
     by 14 degrees. Either the mark moves to match, or this stays the interface
     blue while the mark keeps the brand one — that is a brand call, not a
     stylesheet one, and until it is made the mark is untouched. */
  --accent-fill:       #0066ff;
  --accent-fill-text:  #ffffff;
  --accent-fill-hover: #005ae0;   /* 12% black. white on it 5.93:1 */
  --accent-fill-press: #0052cc;   /* 20% black. white on it 6.82:1 */
  /* what sits ON the accent as a fill: white, because near-black on this blue
     is 3:1 and was only legal when the accent was lime */
  --accent-text: #ffffff;

  /* ------------------------------------------------ the cobalt scale, 2026-09-14
     One accent value was doing five jobs, so hover states were being invented
     per component. Every number below is MEASURED against the ground it is used
     on, not eyeballed:

       #2648ef on #f7f7f4 ....... 6.01:1   passes AA for text
       #2648ef on #0a0a0a ....... 3.07:1   FAILS, which is why dark remaps
       white   on #2648ef ....... 6.45:1   passes, so fills carry white
       near-black on #2648ef .... 3.02:1   fails, so fills never carry ink

     -hover darkens rather than lightens: on the light ground a lighter blue
     loses contrast against the page, and 7.76:1 under white is the safer end
     to travel towards. -subtle is a GROUND only and must never carry accent
     text on top of itself. */
  --accent-hover:  #213fd2;   /* 12% black. white on it 7.76:1 */
  --accent-press:  #1f3bc4;   /* 18% black. white on it 8.46:1 */
  /* AAA blue for SMALL TEXT and links on any light ground. The brand value is
     AA there and no darker, so a link set in it at 14px is legal but not
     comfortable. 21% black, and measured on all four light grounds it can land
     on: page 8.24, card 7.74, white 8.84, --accent-subtle 7.10. Same hue, so
     it reads as the brand rather than as a second colour.
     Use --accent for FILLS, the mark and large display; --accent-ink for text. */
  --accent-ink:    #1e39bd;
  /* 10% accent in the page ground. A GROUND ONLY. Text on it must be
     --accent-ink (7.10:1, AAA); the brand value on it is 5.18:1, AA only. */
  --accent-subtle: #e2e6f4;
  /* A boundary that reads as accent. Was #c3cbe9, which measured 1.50:1
     against the page and so FAILED the 3:1 that WCAG 1.4.11 asks of a
     non-text UI component. Now 3.77:1 on the page and 4.05:1 on white. */
  --accent-line:   #5a74f0;
  /* The focus ring is NEUTRAL, not the accent, and that is deliberate: the ink
     ring measures 17.72:1 against the page where the accent measures 6.01, and
     a focus indicator is the one thing on the page that should be impossible
     to miss. The accent ring also lands at 3.02:1 on the black primary button,
     which clears 1.4.11 by 0.02. --focus-halo is the opposite tone, painted
     between the element and the ring so the pair survives ANY ground: on a
     dark card inside a light page the ink ring alone would vanish. */
  --focus:         #0b0d0f;
  --focus-halo:    #ffffff;

  /* Section grounds. This site had exactly one, so the only way to mark a new
     section was 200px of padding. There are now two, and the sunk one is not a
     new colour: it is the card ground the palette already carries (#f0f0ec
     light, #16191b dark), so the page never introduces a value the palette
     has not already committed to. */
  --ground:       var(--bg);
  --ground-sunk:  #f0f0ec;

  /* Radius. Three values and two rules, and nothing else is allowed:
       1. a control is --r-control, a block is --r-block, a circle is a circle;
       2. anything nested inside a padded parent computes its radius as
          max(0, outer - padding), so concentric corners stay parallel.
     Media that sits flush to a panel edge takes the panel's own radius by
     clipping against it, never by restating a number. */
  /* how far the mega-menu panel overhangs the navbar content on each side */
  --mm-overhang: 16px;

  /* Controls match blocks. They were 2px while blocks moved to 4px, which left
     a button sitting on a card with a visibly tighter corner than the card —
     two radii in one component reads as an oversight, not a system. Both moved
     4px -> 6px on 2026-09-11, together, so they stay equal. */
  --r-control: 5px;
  /* Blocks were square, then 4px. At 6px the corner is visible as a decision
     rather than just as an absence of sharpness — still far short of a "rounded card", but
     enough that a photograph or a filled panel reads as a placed object. One
     number: every panel, card, image and figure takes it, so they cannot drift
     apart. --r-control tracks this value; they are separate tokens so a future
     change can move one without the other, not because they differ today. */
  --r-block:   6px;
  --r-round:   50%;
  /* the capsule: rail arrows, suggestion chips, anything that reads as a
     control rather than a block. One token so they cannot drift apart. */
  --r-pill:    999px;

  /* Action controls have three sizes, one stroke, and one horizontal rhythm.
     Page themes may change colour, but not rebuild the control geometry. */
  --control-h-compact: 32px;
  --control-h:         40px;
  --control-h-large:   48px;
  --control-pad-compact: 12px;
  --control-pad:         18px;
  --control-pad-large:   24px;
  --control-stroke:      0.5px;


  /* dark surface (blog) */
  /* Dark is a NEUTRAL ramp, not the warm one inverted. The light ground carries
     a green-grey cast because paper does; a dark screen carrying the same cast
     reads as a tint sitting on the black rather than as black. These are the
     steps LayerZero's dark surface uses, and they are pure grey at every one. */
  --d-bg:          #0a0a0a;
  --d-bg-card:     #171717;
  /* Chinese black, the footer's ground on every page (John, 2026-09-15). It is
     a step off --d-bg rather than equal to it on purpose: on the dark pages —
     which is most of them, dark being the default — an identical value would
     make the footer no block at all, and the whole point is that the document
     lands on one. It sits between --d-bg and --d-bg-card so the footer reads as
     the floor under the page rather than as a card on it. */
  --chinese-black: #141414;
  /* ---- the closing band -------------------------------------------------
     The band above the footer, and the three values it needs. It was one step
     off Chinese black and is now WHITE (John, 2026-09-15: "only the footer bg
     should be chinese black, the section above it should be a shade lighter",
     then "the section bg should be way lighter" with a white reference beside
     it). Two near-blacks touching was a seam, not a relationship; white against
     Chinese black is the relationship — the page's last statement on paper, the
     sitemap underneath it on ink.

     THESE DO NOT REMAP WITH THE THEME, and that is the same decision the
     footer's ground makes in the other direction. The band is one object that
     happens to appear on 130 pages, half of them dark, and an object that
     changes colour depending on which page you reached it from is not one
     object. So the ink is declared here rather than inherited: --closer-ink is
     the light theme's --text and --closer-ink-dim its --text-muted, restated
     because on a dark page the inherited pair would be white on white.
     MEASURED on white: ink 19.47:1, dim 5.25:1, and the blue button's edge
     4.83:1 — the same figure as white-on-blue, which is a coincidence of this
     pairing and not a reason to skip checking either. */
  --ground-closer:   #ffffff;
  --closer-ink:      #0b0d0f;
  --closer-ink-dim:  #6a6d68;
  --d-text:        #f0f0f0;
  --d-text-muted:  #a3a3a3;
  --d-line:        #262626;

  /* type */
  /* Suisse Intl is the sole product typeface. Display, label, and code roles
     alias this token so generated pages cannot introduce a competing face. */
  --font:         "Suisse Intl", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-display: var(--font);
  --font-mono:    var(--font);

  /* layout */
  --layout-gutter:   20px;
  --gutter:          var(--layout-gutter);
  --grid-gap:        16px;
  --grid-gap-wide:   32px;
  --content-reading: 880px;
  --content-standard: 1280px;
  --content-wide:    1408px;
  --maxw:            calc(var(--content-wide) + (2 * var(--gutter)));
  --nav-h:  64px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* the soft one: long tail, no overshoot — used for every entrance */
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  /* the nav's two curves, measured off the reference: a symmetric one for the
     shell, a standard one for the content that rides inside it */
  --ease-shell: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-content: cubic-bezier(0.4, 0, 0.2, 1);
  /* stripe.com's smooth curve, measured off their header: an ease-out-quart with
     a long tail, used at 300ms. It is what makes their nav feel unhurried. */
  --ease-stripe:  cubic-bezier(0.25, 1, 0.5, 1);
  /* the curve stripe puts on the two halves of its chevron, at 0.25s */
  --ease-chev:    cubic-bezier(0.6, 0, 0.2, 0.5);
  /* ink for the generative line art, remapped by .theme-dark */
  --art-rgb: 11, 13, 15;
  --art-gain: 1;
  --enter: 560ms;
  /* spacing. One scale, in the steps the layouts actually use, so a gap is a
     token rather than a number typed into a style attribute. */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-28: 112px;
  --s-32: 128px;
  --s-40: 160px;

  --action-gap: var(--s-3);

  --section-compact: 64px;
  --section-standard: 80px;
  --section-roomy: 96px;
  --section-display: 96px;

  /* measure. Three line lengths rather than a fresh max-width per block. */
  --measure-tight: 52ch;
  --measure:       56ch;
  --measure-wide:  60ch;
}

@media (max-width: 600px) {
  :root { --layout-gutter: 24px; }
}

@media (min-width: 768px) {
  :root {
    --layout-gutter: 32px;
    --grid-gap: 20px;
    --grid-gap-wide: 40px;
    --section-compact: 72px;
    --section-standard: 96px;
    --section-roomy: 112px;
    --section-display: 128px;
  }
}

@media (min-width: 1200px) {
  :root {
    --layout-gutter: 40px;
    --grid-gap: 24px;
    --grid-gap-wide: 48px;
  }
}

@media (min-width: 1600px) {
  :root { --layout-gutter: 64px; }
}

*, *::before, *::after { box-sizing: border-box; }

/* Dark is the default, so native UI (scrollbars, form controls, the flash of
   background before CSS applies) should start dark too. .theme-dark is on
   <body> from the markup; this covers the document itself. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; }
html:has(body:not(.theme-dark)) { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Dark surface. Rather than shadowing every component with a .theme-dark rule,
   remap the base tokens once so anything built on them follows for free. */
.theme-dark {
  --bg:            var(--d-bg);
  --bg-card:       var(--d-bg-card);
  --surface-raised: var(--d-bg-card);
  --bg-card-hover: #1f1f1f;
  --bg-invert:     var(--d-text);
  /* the inverted button is WHITE here, so its hover has to darken, not lighten */
  --bg-invert-hover: #d4d4d4;
  --text:          var(--d-text);
  --text-muted:    var(--d-text-muted);
  --text-faint:    #7d7d7d;
  --text-invert:   var(--d-bg);
  /* The mark's blue is 3.07:1 on this ground, so a link in it would fail. This
     is the brand blue LIFTED until it passes, rather than a second brand
     colour. The mark itself keeps the true value: it is artwork, not text.

     RE-HUED from 227 to 216 (John, 2026-09-15: "it looks like purple"). He was
     right and the arithmetic says why: lifting a hue-230 blue to 60% lightness
     does not give you a pale blue, it gives you a lilac, because violet is
     where 230 goes when you take the saturation out of it. Moving the whole
     ramp to 216 — --accent-fill's hue — reads as blue at every step and gains
     contrast doing it. MEASURED 7.13:1 on the page (was 6.38) and 6.46:1 on
     the card (was 5.77).

     The ramp moves TOGETHER. A hover that stayed at 227 would drift violet on
     touch, which is the bug this comment used to warn about in the other
     direction. */
  --accent:        #5a9bff;
  --accent-text:   #0b0d0f;
  --accent-hover:  #7fb0ff;   /* 9.01:1 on the page */
  --accent-press:  #a3c6ff;   /* 11.39:1 */
  /* AAA on this ground, the mirror of --accent-ink: on ink you LIGHTEN to gain
     contrast where on paper you darken. Page 10.26, card 9.29, and 7.71 on
     --accent-subtle below. */
  --accent-ink:    #93bcff;
  /* 22% of the lifted blue, re-hued with it. GROUND ONLY, same rule as the
     light theme: text on it is --accent-ink (7.71:1). */
  --accent-subtle: #1b2740;
  /* was #2f3654, which measured 1.67:1 against the page and failed 1.4.11.
     Re-hued to 218 with the rest of the ramp; now 3.47:1. */
  --accent-line:   #3f66a9;
  /* neutral again, and inverted with the theme: 19.80:1 against this ground.
     The halo flips too, so the pair still works on a light island in a dark
     page (a white button, say, where the light ring alone would vanish). */
  --focus:         var(--d-text);
  --focus-halo:    #0a0a0a;
  --line:          var(--d-line);
  --line-strong:   #404040;
  --art-rgb:       240, 240, 240;
  --art-gain:      1.5;

  --ground-sunk:   #171717;
}
body.theme-dark { background: var(--bg); color: var(--text); }

/* assets drawn for a light ground need flipping, not recolouring */
.theme-dark .logoband img { filter: grayscale(1) invert(1); }
.theme-dark .band-media video,
.theme-dark .media-split-art video { filter: invert(1) hue-rotate(180deg); }

/* The hero video is the exception, because it is the one that plays full-frame
   behind live text: a filter there is not a one-off cost on an asset, it is
   per-frame work over the whole viewport, and it measured at 79fps against
   111fps without. So that clip ships already inverted and the DARK theme —
   the default, and the common case — pays nothing. Light theme inverts it
   back, which is the rarer path and the right place for the cost. */
body:not(.theme-dark) .hero-video { filter: invert(1) hue-rotate(180deg); }

img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
}

@layer primitives {
/* ==========================================================================
   Primitives — the shared vocabulary: the container, the type scale, the
   button, the section rhythm. Every page uses these; none of them belongs to
   a page. A rule that only one page needs is a component, not a primitive.
   ========================================================================== */

/* --------------------------------------------------------------- layout -- */

/* Suisse Intl ships as one static 400 weight, so every font-weight below --
   300, 450, 500 -- renders identically. They are kept because they are the
   correct intent and cost nothing, and because a weighted Suisse would make
   them real again. Where weight was the ONLY emphasis signal the rule now
   leans on colour or size instead. */

.shell { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }
/* ------------------------------------------------------------ typography -- */

main h1,
main h2,
main h3 {
  text-wrap: balance;
}

/* Suisse Intl ships here as ONE static 400 — see 00-fonts.css. So font-weight
   is not available as a dial: 500 would not load a heavier cut, it would ask
   the browser to synthesise one, and faux bold on 52px display type smears the
   joins and thickens the diagonals unevenly.

   Half a pixel of text-stroke gets the extra weight from the real outline
   instead. It is centred on the glyph edge, so 0.5px reads as roughly a
   quarter-pixel out — a hair heavier, with the letterforms intact and the
   metrics unchanged. paint-order keeps the stroke behind the fill so the
   counters do not close up. Display sizes only; at body size this would just
   look muddy. */
.h-display,
h1.h-display {
  font-size: clamp(36px, 5.2vw, 52px);
  line-height: 1.07;
  letter-spacing: -0.048em;
  font-weight: 400;
  -webkit-text-stroke: 0.5px currentColor;
  paint-order: stroke fill;
  margin: 0;
}

/* .h-hero — the display size for an AUTHORED page's hero h1.
   It existed in the markup of 15 pages before it existed here, so every one of
   them rendered its h1 at the UA default: 32px, weight 700, letter-spacing
   normal, line-height BELOW the font size, and smaller than its own h2s. Found
   by measuring the rendered page, not by reading the source, which is defect
   class 2 all over again.
   Sized against the peer set measured at 1440 (Palantir 80, Shopify 96,
   Vercel 64, Ramp 64, Linear 64, Railway 54, Stripe 48) and against the
   homepage's own container-sized hero, which tops out at 66. Sits one step
   above .h-display, which is a section-display size, not a hero one.
   Weight, tracking and the stroke trick are h-display's: this is the same
   voice a size louder, never a second one. */
.h-hero,
h1.h-hero {
  font-size: clamp(36px, 5.6vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.048em;
  font-weight: 400;
  -webkit-text-stroke: 0.5px currentColor;
  paint-order: stroke fill;
  margin: 0;
}

.h-xl { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.1;  letter-spacing: -0.048em; font-weight: 400; margin: 0; }
.h-lg { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2;  letter-spacing: -0.05em;  font-weight: 400; margin: 0; }
.h-md { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -0.035em; font-weight: 400; margin: 0; }
.h-sm { font-size: 20px; line-height: 28px; letter-spacing: -0.025em; font-weight: 400; margin: 0; }

.lede  { font-size: 16px; line-height: 24px; margin: 0; }
.muted { color: var(--text-muted); }

/* two-tone headline: black lead, grey tail */
.tail { color: var(--text-muted); }

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.mono-index { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--text-faint); }
/* --------------------------------------------------------------- button -- */

.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-h);
  padding: 0 var(--control-pad);
  border: var(--control-stroke) solid transparent;
  font-size: 14px;
  line-height: 20px;
  font-weight: 450;
  border-radius: var(--r-control);
  text-decoration: none;
  transition: background-color 0.3s var(--ease-stripe), border-color 0.3s var(--ease-stripe), color 0.3s var(--ease-stripe), opacity 0.3s var(--ease-stripe);
  white-space: nowrap;
}
.btn-sm {
  min-height: var(--control-h-compact);
  padding-inline: var(--control-pad-compact);
}
.btn-lg {
  min-height: var(--control-h-large);
  padding-inline: var(--control-pad-large);
  font-size: 15px;
}
.btn-primary   { background: var(--bg-invert); color: var(--text-invert); }
.btn-primary:hover   { background: var(--bg-invert-hover); }
.btn-secondary {
  border-color: color-mix(in srgb, currentColor 42%, transparent);
  background: var(--bg-card);
  color: var(--text);
}
.btn-secondary:hover { background: var(--bg-card-hover); }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.arrow { width: 10px; height: 10px; flex: none; }
/* --------------------------------------------------------------- misc -- */

/* Linear's vertical rhythm, measured rather than guessed: their large blocks
   run 96px top and bottom and their tighter ones 64px. Ours topped out at
   200px, more than twice as loose, which is what made the pages feel like they
   were drifting apart rather than holding together. */
.section-pad { padding-top: var(--section-roomy); }
.section-pad-sm { padding-top: var(--section-compact); }
.section-compact { padding-block: var(--section-compact); }
.section-standard { padding-block: var(--section-standard); }
.section-roomy { padding-block: var(--section-roomy); }
.section-display { padding-block: var(--section-display); }

/* -------------------------------------------------------------- rhythm -- */

.stack-2 > * + * { margin-top: var(--s-2); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-6 > * + * { margin-top: var(--s-6); }

.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; }
/* the two shapes the row actually takes beyond the default */
.flex-between.gap-4 { gap: var(--s-4); }
.flex-between.start { justify-content: flex-start; gap: var(--s-3); }

/* a caption: body copy one step down, already muted */
.note { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.centred { text-align: center; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The focus indicator, and it is TWO-TONE on purpose.
   A single ring is only ever as visible as the ground it happens to land on,
   and `outline-offset` puts this one OUTSIDE the element, so the ground is
   whatever sits behind: the page, a white card, or a near-black one. A
   near-black ring on a dark card inside a light page is invisible, and that
   case is real here (a filled button on the closing band, whose ground is dark
   on every page including the light ones).
   So: --focus-halo is painted in the offset gap and the ring sits outside it.
   One of the two always clears 3:1, whatever is behind. MEASURED: the ink ring
   is 17.72:1 on the page, the halo 19.47:1 on the black button.
   The halo is a box-shadow rather than a second outline because an element
   gets only one outline. Nothing focusable in this stylesheet declares a
   box-shadow of its own, so there is nothing to clobber; if that changes, the
   component must restate its shadow after the halo. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}
/* No dark variant is needed: --focus and --focus-halo are both remapped in
   .theme-dark, so the pair flips together. A box-shadow follows the element's
   own border-radius, so a pill gets a pill-shaped halo for free. */


/* ------------------------------------------------------------- surfaces -- */

/* One alternate ground, not four. This site marks a boundary with a hairline
   and whitespace, so a ground change is a quiet reinforcement of that rather
   than a coloured band pasted over it: the step is small enough to be almost
   subliminal on the dark surface and legible on the light one, and the rule at
   its top edge is what actually does the separating. */
.on-sunk {
  background: var(--ground-sunk);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-top: 64px;
  padding-bottom: 64px;
}
@media (min-width: 768px) { .on-sunk { padding-top: 96px; padding-bottom: 96px; } }

.surface-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  background: var(--bg-card);
}

/* --------------------------------------------------------------- media -- */

/* Every image on the site goes in one of these, so aspect ratio is reserved
   before load and nothing shifts. Square and Shopify run 29 and 43 pieces of
   media; we had six, all canvas. */
.media { position: relative; overflow: hidden; background: var(--bg-card); }
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-1-1   { aspect-ratio: 1; }
.media-4-3   { aspect-ratio: 4 / 3; }
.media-16-9  { aspect-ratio: 16 / 9; }
.media-3-4   { aspect-ratio: 3 / 4; }

.media-wide { margin-block: 0; }
.media-wide > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-block);
}

/* a cut-out figure standing on a coloured panel, the Square shape */
.media-cutout { background: none; border-radius: 0; }
.media-cutout > img { object-fit: contain; object-position: bottom; }

/* ---------------------------------------------------------- interaction -- */

/* The hover vocabulary. Linear runs a seven-property transition on its cards;
   ours was opacity and two background swaps. Transform and opacity only, so
   these stay on the compositor. */
/* This site is flat: nothing floats and nothing casts a shadow. A block
   answers the cursor by lifting its own contrast, the way .post-row and
   .mm-link already do, not by leaving the page. */
.lift { transition: opacity 220ms var(--ease-content); }
.lift:hover { opacity: 0.72; }

/* an image that answers the cursor without the container moving */
.zoom > img, .zoom > video { transition: transform 600ms var(--ease-soft); }
.zoom:hover > img, .zoom:hover > video { transform: scale(1.04); }

/* the arrow that leans out of a link on hover */
.go { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); transition: color 220ms var(--ease-content); }
.go:hover { color: var(--text); }
.go .arrow { transition: transform 220ms var(--ease-soft); }
.go:hover .arrow { transform: translate(3px, -3px); }

@media (prefers-reduced-motion: reduce) {
  .lift, .zoom > img, .zoom > video, .go .arrow { transition: none; }
  .zoom:hover > img, .zoom:hover > video { transform: none; }
}

/* ---------------------------------------------------------------- pill -- */



/* ─────────────────────────────────────────────────── landing sections ── */

/* Linear's landing rhythm, measured from linear.app at a 1512px viewport:
   128px of section padding, a header split into two roughly even columns with
   a ~132px gutter (the claim left, the explanation right), then a long drop
   before the product itself appears at full width. One idea per section.

   Only the proportions are new. The type scale, the grounds and the hairlines
   are the ones the rest of the site already uses, so these sections read as
   Box rather than as a second design system bolted on. */
.section-tall { padding-top: 88px; }
@media (min-width: 768px)  { .section-tall { padding-top: 112px; } }
@media (min-width: 1024px) { .section-tall { padding-top: 128px; } }

/* Stripe's section header, measured from stripe.com at 1512px: 32px at weight
   300, -0.02em, on a ~670px measure, with the explanation folded into the same
   sentence as muted inline text rather than parked in a second column. That is
   the .tail convention this site already uses, so it costs no new vocabulary.

   One header pattern, not two: Linear splits the claim and the explanation into
   columns, which reads as a different system when it sits next to this. */
.claim {
  font-size: clamp(24px, 2.5vw, 33px);
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 300;
  max-width: 21ch;
  margin: 0;
}
@media (min-width: 900px) { .claim { max-width: 670px; } }
.claim .tail { color: var(--text-muted); }
.claim-actions { display: flex; flex-wrap: wrap; margin-top: var(--s-6); }

/* the product sits well below the claim, which is what gives the section air */
.vis-drop { margin-top: 64px; }
@media (min-width: 1024px) { .vis-drop { margin-top: 132px; } }
}

@layer components {
/* ==========================================================================
   Components — blocks the page bodies compose with. Each one is a shape that
   more than one section reaches for; the page-template blocks (article, legal
   doc, careers) live in 05-pages.css instead.
   ========================================================================== */

/* ---------------------------------------------------------- home: hero -- */

.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(72px, 13vh, 128px);
  overflow: hidden;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* left-aligned, as the reference sets its inner-page heroes: an 11-word
   headline with a 20-word sub does not survive centring */
.hero-copy { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); padding: 0 var(--gutter); }
/* the grid inside carries the measure, as it does on the inner pages */
.hero-copy .h-display { text-wrap: balance; }
.hero-copy .lede { margin-top: 20px; }
.hero-actions { display: flex; justify-content: center; margin-top: 28px; }
.hero-canvas { object-fit: cover; }
/* the atlas hero is a full-bleed clip with the copy centred in it */
.hero.hero-centred { padding-top: 0; justify-content: center; }

/* ---- media hero ---------------------------------------------------------
   The hero the overlay nav sits on. It owns the whole viewport, the media runs
   edge to edge behind the header, and the copy is pushed to the bottom of the
   frame so the headline lands clear of the nav rather than fighting it. */
.hero-media {
  min-height: 100svh;
  justify-content: flex-end;
  padding-top: var(--nav-h);
  padding-bottom: clamp(48px, 8vh, 96px);
}
/* Two of these are stacked when the hero cycles films. Both play; only the one
   marked .is-on is visible, and the handover is that class moving. The fade is
   on opacity ALONE — a filter or a transform here would put the picture on its
   own composited layer, and on this site that has meant the image not painting
   at all. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease-content, ease);
}
.hero-video.is-on { opacity: 1; }
/* With no script the single element in the markup never gets the class, so it
   would sit invisible. This is the one case where :only-of-type is exactly the
   condition: one video means nothing is cycling. */
.hero-video:only-of-type { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { transition: none; }
}
/* Two scrims, not one. The bottom one buys the copy its contrast; the top one
   is only deep enough to hold the nav, so the picture keeps its middle. Both
   are the page's own ground, so the hero dissolves into the section below it
   and the pair works in either theme without a second set of values. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, var(--bg), transparent 22%),
    linear-gradient(to top, var(--bg), transparent 55%);
  opacity: 0.85;
}
.hero-media .hero-copy { z-index: 2; }
/* The headline is two lines, always: the tail is its own line rather than a
   wrap that happens to land there. That only holds if the headline gets a
   column wide enough to take the first line whole, so the media hero splits
   later than the others and runs full width until it can. */
.hero-media .split-hero-grid { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .hero-media .split-hero-grid { grid-template-columns: 1fr 420px; }
}
/* Sized off the column it is in, not the viewport: the headline's first line
   has to fit its column whole, and that column is capped by --maxw long before
   the viewport is. The cap is the display size the rest of the site uses, less
   two; the ratio is what keeps the first line inside a narrower column. */
.hero-media .split-hero-grid > :first-child { container-type: inline-size; }
.hero-media .split-hero-grid h1 {
  max-width: none;
  /* Sized against the column, so the headline grows with the space it has. The
     ratio went up when the headline got shorter: "The commerce infrastructure"
     sets on one line with room to spare, and a display line that does not fill
     its measure reads as timid rather than restrained. */
  font-size: clamp(36px, 7cqi, 66px);
  /* Written for a variable Roboto, where 450 was a half-step that held the
     line against the media behind it without reading as a bold headline.
     Suisse Intl ships one static 400, so this currently renders at 400. Kept
     as the intent: it costs nothing and comes back the day the family gains
     weights. */
  font-weight: 450;
}
.hero-media .h-display .tail { display: block; }
.hero-media .hero-actions { justify-content: flex-start; }
/* Same 32px control height the header uses. The default 36px button is sized
   for a form or a card, where it is the only thing in its row; sitting under a
   three-line sub it is the heaviest object in the corner of the frame, which
   is not what it should be. */
.hero-media .hero-actions .btn {
  min-height: var(--control-h-compact);
  height: var(--control-h-compact);
  padding-inline: var(--control-pad-compact);
}

/* Headline and sub start on the same line. They do not align on their BOXES —
   a 44px headline carries ~11px of leading and cap gap above its capital, a
   16px sub carries ~7px, so two boxes flush at the top put the two texts 4px
   apart and a reader sees the gap, not the grid. Trimming the top edge down to
   the cap height makes the box edge the thing the eye is actually measuring,
   and then plain start alignment is correct. */
.hero-media .split-hero-grid .lede { margin-top: 0; }
.hero-media .split-hero-grid h1,
.hero-media .split-hero-grid .lede {
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
}
/* Firefox has no text-box trimming yet: pay the difference as a nudge instead,
   which is right at the display size the headline is capped at. */
@supports not (text-box-trim: trim-start) {
  .hero-media .split-hero-grid > :last-child { padding-top: 4px; }
}

/* ---------------------------------------------------------- atlas band -- */

.band { padding-top: var(--section-roomy); }
.band-head { max-width: 900px; }
.band-meta { display: flex; gap: 32px; align-items: flex-start; justify-content: space-between; padding: 20px 0 24px; border-top: 1px solid var(--line); margin-top: 28px; flex-wrap: wrap; }
.band-meta p { max-width: 680px; margin: 0; }
.band-media { width: 100%; aspect-ratio: 16 / 9; background: var(--bg-card); overflow: hidden; }
.band-media video { width: 100%; height: 100%; object-fit: cover; }
/* the one paragraph in the meta row that runs shorter than the 680px default */
.band-meta .band-note { max-width: 640px; }

/* --------------------------------------------------------- split intro -- */

.split-hero { position: relative; padding-top: 96px; overflow: hidden; }
.split-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); align-items: start; }
@media (min-width: 1024px) { .split-hero-grid { grid-template-columns: 1fr 480px; gap: var(--grid-gap-wide); } }
.split-hero-grid h1 { max-width: 660px; }
.split-hero-art { position: relative; width: 100%; height: clamp(320px, 42vw, 520px); margin-top: -40px; }
.split-hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the hero lede sits a touch below the headline's baseline box */
.split-hero-grid > .lede { padding-top: 14px; }

/* The pricing hero carries no art and no split: it opens at the same 96px as
   every other page top, states the licence model, and hands over to the
   columns. Linear's shape, for the same reason theirs has it. */
.pricing-hero { padding-top: 96px; }
/* atlas stacks its intro instead of splitting it */
.split-hero-grid.stacked { grid-template-columns: 1fr; }
.split-hero-grid.stacked > * { max-width: 520px; }

/* ------------------------------------------------------------ stat row -- */

.stats { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 32px; }
@media (min-width: 768px) { .stats.cols-2 { grid-template-columns: repeat(2, 1fr); } .stats.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.stat {
  background: var(--bg-card);
  padding: 24px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stat-value { font-size: clamp(38px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.045em; }
.stat p { margin: 0; }

/* -- stat strip. The reference's .stat is a 360px card; under the hero we
      want the same type at a fraction of the height, on hairlines not fills. */
.stats.strip { margin-top: 0; border-top: 1px solid var(--line); }
.stats.strip .stat {
  min-height: 0;
  background: transparent;
  padding: 28px 24px 32px;
  gap: 40px;
  border-left: 1px solid var(--line);
}
.stats.strip .stat:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 767px) {
  .stats.strip .stat { border-left: 0; padding: 24px 0; border-bottom: 1px solid var(--line); }
}
.stats.strip .stat-value { font-size: clamp(30px, 3.2vw, 42px); }

/* ----------------------------------------------------------- two panes -- */

.panes { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 24px; }
@media (min-width: 900px) { .panes { grid-template-columns: 1fr 1fr; } }
.pane { padding: 24px 0; }
@media (min-width: 900px) {
  .pane { padding: 24px; border-left: 1px solid var(--line); }
  .pane:first-child { border-left: 0; padding-left: 0; }
}
.pane p { max-width: 560px; }
.pane canvas { width: 200px; height: 130px; margin-top: 72px; }

/* --------------------------------------------------------- numbered 4x -- */

.grid-4 { display: grid; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 640px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.grid-4 .cell { padding: 24px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); min-height: 200px; display: flex; flex-direction: column; justify-content: flex-start; }
.grid-4 .cell h3 { margin: 0 0 4px; }
.grid-4 .cell p { margin: 0; }

/* logo band (zero) */
.logoband { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
@media (min-width: 768px) { .logoband { grid-template-columns: repeat(4, 1fr); } }
.logoband div { border-left: 1px solid var(--line); display: grid; place-items: center; padding: 56px 24px; }
.logoband img { height: 36px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.62; }
/* accordion (interop console list) */
.acc-item { border-top: 1px solid var(--line); }
.acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; text-align: left; }
.acc-btn .h-sm { transition: opacity 0.2s var(--ease); }
.acc-panel { overflow: hidden; height: 0; transition: height 0.36s var(--ease); }
.acc-panel-inner { padding: 0 0 24px; max-width: 780px; }
.acc-panel-inner p { margin: 0; }
/* the reference accordion carries no +/- affordance, just the index */
.acc-btn { min-height: 76px; }
.acc-item.open .acc-panel-inner { padding-bottom: 170px; }

/* --------------------------------------------------------------- blog -- */

.blog-hero { padding-top: 96px; }
.featured {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg-card);
  margin-top: 24px;
  min-height: 440px;
}
@media (min-width: 900px) { .featured { grid-template-columns: 1fr 1fr; } }
.featured-art { position: relative; overflow: hidden; background: var(--bg-card); min-height: 260px; }
.featured-art canvas, .featured-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-copy { padding: 32px 24px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }

.cards-3 { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); margin-top: 1px; }
@media (min-width: 900px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--bg);
  padding: 24px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color 0.24s var(--ease);
}
.card:hover { background: var(--bg-card); }
.card-art { position: relative; flex: 1; min-height: 220px; margin-top: 12px; }
.card-art canvas, .card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.post-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: opacity 0.2s var(--ease);
}
@media (min-width: 900px) { .post-row { grid-template-columns: 1fr 1fr 40px; gap: 32px; } }
@media (max-width: 899px) {
  .post-row {
    position: relative;
    gap: 10px;
    padding: 24px 34px 24px 0;
  }
  .post-row .arrow-cell {
    position: absolute;
    top: 31px;
    right: 0;
  }
}
.post-row:hover { opacity: 0.72; }
.post-row .arrow-cell svg { width: 14px; height: 14px; }
.post-row .arrow-cell { display: flex; justify-content: flex-end; align-items: flex-start; color: var(--text-muted); }
.featured-copy p, .card p { margin: 0; }
.post-row p { margin: 0; }
.post-row div > p { margin-bottom: var(--s-2); }


/* ------------------------------------------------------- three columns -- */
/* three columns divided by hairlines, index at the top, copy pinned to the
   bottom so ragged paragraph lengths still line up on their last line */
.cols-3 { display: grid; grid-template-columns: 1fr; margin-top: 32px; }
@media (min-width: 900px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
.cols-3 > * {
  display: flex;
  flex-direction: column;
  /* Top-aligned now that the [01] index is gone. Pinning the copy to the floor
     only read as deliberate while an index held the ceiling; on its own it left
     252px of hole above 96px of text and three ragged first lines. */
  justify-content: flex-start;
  gap: 24px;
  min-height: 200px;
  padding: 0 24px 24px;
  border-left: 1px solid var(--line);
}
.cols-3 > *:first-child { padding-left: 0; border-left: 0; }
.cols-3 p { margin: 0; max-width: 44ch; }
.cols-3 .lead { color: var(--text); }
/* two stacked rows of cols-3 read as a sequence, not three statements, so the
   372px cell the reference uses for a single row is too much air here */
.cols-3.tight > * { min-height: 150px; gap: 24px; }
.cols-3.tight + .cols-3.tight { margin-top: 0; }
.prose .lead, p .lead { color: var(--text); }

/* Value Transfer: grey cards, figure in the middle, title on the floor */
.vt-grid { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 40px; }
@media (min-width: 900px) { .vt-grid { grid-template-columns: repeat(3, 1fr); } }
.vt-card {
  position: relative;
  background: var(--bg-card);
  min-height: 420px;
  padding: 24px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 16px;
}
.vt-card canvas { width: 100%; height: 100%; min-height: 240px; }
.vt-card h3 { margin: 0; max-width: 30ch; }

/* the sticky Console aside: heading at the top, lede on the floor */
.console-split { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 1024px) { .console-split { grid-template-columns: 440px 1fr; } }
.console-aside { position: relative; padding-bottom: 32px; }
@media (min-width: 1024px) {
  .console-aside-inner {
    position: sticky;
    top: calc(var(--nav-h) + 40px);
    height: calc(100vh - var(--nav-h) - 80px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 48px;
  }
}
.console-aside-inner p { margin: 0; max-width: 42ch; }
.console-rows { border-left: 0; }
@media (min-width: 1024px) { .console-rows { border-left: 1px solid var(--line); padding-left: 24px; } }

/* "LayerZero for chains": media on the left, copy stretched down the right */
.media-split { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1024px) { .media-split { grid-template-columns: 1fr 480px; gap: 32px; } }
.media-split-art { background: var(--bg-card); overflow: hidden; min-height: 420px; }
@media (min-width: 1024px) { .media-split-art { min-height: 1080px; } }
.media-split-art video, .media-split-art canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-split-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 96px; border-top: 1px solid var(--line); padding-top: 20px; }
.media-split-copy p { margin: 0; }

/* -- drawn product surfaces. These are CSS, not screenshots: a frame, a chrome
      bar and enough structure to read as software without claiming to be a
      capture of it. Every label in them comes from the docs.                  */
.surfaces { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
@media (min-width: 1000px) { .surfaces { grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; } }
.surface {
  background: var(--bg-card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 300px;
}
@media (min-width: 1000px) {
  .surface-console { grid-row: span 2; }
}
.surface-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.surface-dots { display: flex; gap: 5px; }
.surface-dots i { width: 7px; height: 7px; border-radius: var(--r-round); background: var(--line); display: block; }
.surface-body { flex: 1; display: flex; min-height: 0; }
.surface-cap {
  padding: 16px 18px 20px;
  border-top: 1px solid var(--line);
}
.surface-cap h3 { font-size: 15px; font-weight: 450; margin: 0 0 6px; }
.surface-cap p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); max-width: 46ch; }

/* console interior */
.sf-side { width: 148px; border-right: 1px solid var(--line); padding: 14px 0; flex: none; }
.sf-side span {
  display: block; padding: 7px 16px; font-size: 12.5px; color: var(--text-muted);
}
.sf-side span.on { color: var(--text); box-shadow: inset 2px 0 0 var(--text); }
.sf-main { flex: 1; padding: 16px 18px; min-width: 0; }
.sf-row {
  display: grid; grid-template-columns: 1.6fr 1fr 0.9fr;
  gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-muted); align-items: center;
}
.sf-row.head { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; border-bottom-color: var(--text-muted); }
.sf-row b { font-weight: 450; color: var(--text); }
.sf-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  border: 1px solid var(--line); padding: 2px 6px; justify-self: start;
}

/* storefront interior */
.sf-shop { padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start; width: 100%; }
.sf-tile { aspect-ratio: 1; border: 1px solid var(--line); position: relative; }
.sf-tile::after {
  content: ''; position: absolute; inset: 22% 22% 34%;
  border: 1px solid var(--line);
}
.sf-tile i {
  position: absolute; left: 8px; right: 8px; bottom: 7px; height: 5px;
  background: var(--line); display: block;
}
.sf-tile i::after { content: ''; position: absolute; left: 0; top: 9px; width: 45%; height: 5px; background: var(--line); }

/* terminal interior */
.sf-till { padding: 22px 18px; display: flex; flex-direction: column; gap: 14px; width: 100%; justify-content: center; }
.sf-till .amt { font-size: 34px; letter-spacing: -0.04em; line-height: 1; }
.sf-till .ref { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; }
.sf-till .tap {
  border: 1px solid var(--text); padding: 10px; text-align: center;
  font-size: 13px; margin-top: 4px;
}
.sf-till p { margin: 0; }

/* -- compose. Real tiers, real package names, real cumulative entitlement.   */
.compose { margin-top: 44px; }
.compose-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.compose-tabs button {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 12px 20px 14px; color: var(--text-muted); font-size: 14px; font-family: inherit;
  border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: color 0.2s var(--ease-content), border-color 0.2s var(--ease-content);
}
.compose-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.compose-tabs button:first-child { padding-left: 0; }
.compose-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding: 20px 0 4px; flex-wrap: wrap;
}
.compose-meta .mono { margin: 0; }
.compose-count { font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.04em; }
.compose-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 20px;
}
.pkg {
  background: var(--bg); padding: 13px 14px 15px;
  transition: opacity 0.3s var(--ease-content), background 0.3s var(--ease-content);
}
.pkg[data-off] { opacity: 0.26; }
.pkg b { display: block; font-weight: 450; font-size: 13px; }
.pkg span { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
.pkg em {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.09em;
  color: var(--text-muted); font-style: normal; display: block; margin-bottom: 6px;
}
.compose-count { margin: 0; }

/* -- cli block. The launch path is the real command sequence, not a metaphor. */
.cli { border: 1px solid var(--line); background: var(--bg-card); margin-top: 40px; }
.cli-step {
  display: grid; grid-template-columns: 92px 1fr; gap: 20px;
  padding: 18px 20px; border-bottom: 1px solid var(--line); align-items: start;
}
.cli-step:last-child { border-bottom: 0; }
@media (max-width: 700px) { .cli-step { grid-template-columns: 1fr; gap: 8px; } }
.cli-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; color: var(--text-muted); padding-top: 2px; }
.cli-cmd { font-family: var(--font-mono); font-size: 13px; color: var(--text); word-break: break-word; }
.cli-cmd::before { content: '$ '; color: var(--text-muted); }
.cli-note { font-size: 13px; color: var(--text-muted); margin: 6px 0 0; line-height: 1.55; }
.cli-cmd { margin: 0; }

/* -- certification strip. Quiet, above the footer, where diligence looks.     */
.certs {
  display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: center;
  padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.certs p { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-muted); }
.certs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.certs li { font-size: 13.5px; color: var(--text); }

/* -- A. VoidZero home: a terminal card floating on a generative panel, cropped
      by the panel edge. Ours uses the LineField canvas instead of a gradient. */
.cli-stage { position: relative; margin-top: 44px; background: var(--bg-card); border: 1px solid var(--line); overflow: hidden; }
.cli-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the card runs past the panel's right edge and is cropped by it, which is
   what makes it read as a window onto something larger */
.cli-stage .cli { position: relative; margin: 40px -72px 40px 40px; background: var(--bg); border: 1px solid var(--line); }
@media (max-width: 700px) { .cli-stage .cli { margin: 20px; } }

/* -- B. Vercel /enterprise: icon-less kicker label over a body-size paragraph,
      three up, no cards and no borders. The restraint is the whole point.     */
.featgrid { display: grid; grid-template-columns: 1fr; gap: 48px 40px; margin-top: 56px; }
@media (min-width: 760px)  { .featgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .featgrid { grid-template-columns: repeat(3, 1fr); } }
.featgrid h3 { font-size: 14px; font-weight: 400; color: var(--text-muted); margin: 0 0 12px; }
.featgrid p  { margin: 0; font-size: 17px; line-height: 1.5; max-width: 34ch; }

/* -- E. VoidZero /about: a bordered person cell with a mono credential line and
      its own footer strip. The credential is what makes it not a stock team grid. */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 48px; }
.person { background: var(--bg); display: flex; flex-direction: column; }
.person-main { padding: 20px 20px 24px; flex: 1; }
.person h3 { font-size: 16px; font-weight: 450; margin: 0; }
.person p  { margin: 3px 0 0; color: var(--text-muted); font-size: 14px; }
.person em { display: block; margin-top: 16px; font-style: normal; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--text-faint); }
.person-foot { border-top: 1px solid var(--line); padding: 10px 20px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em; color: var(--text-muted); }

/* -- H. VoidZero home: a claim beside the curve that proves it. The chart is an
      inline SVG so it carries no dependency and inherits currentColor.        */
.curve { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); margin-top: 48px; }
@media (min-width: 900px) { .curve { grid-template-columns: 1fr 1.4fr; } }
.curve-fig { padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.curve-fig .stat-value { font-size: clamp(34px, 4vw, 54px); letter-spacing: -0.045em; line-height: 1; margin: 0; }
.curve-plot { border-left: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 899px) { .curve-plot { border-left: 0; border-top: 1px solid var(--line); } }
.curve-plot svg { width: 100%; height: auto; display: block; }
.curve-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em; color: var(--text-muted); }

/* ================================================================== life ==
   Motion and state. Everything here degrades to a static page under
   prefers-reduced-motion, which the JS checks before it animates.           */

/* -- the terminal writes itself. Lines arrive; the caret sits on the live one. */
/* the step labels stay faintly visible so the block keeps its shape while the
   commands fill in, rather than reading as five empty rows */
.cli-step[data-typing] .cli-cmd, .cli-step[data-typing] .cli-note { opacity: 0; }
.cli-step[data-typing] .cli-when { opacity: 0.28; }
.cli-step.is-typed .cli-when { opacity: 1; transition: opacity 0.3s var(--ease-content); }
.cli-step.is-typed .cli-cmd  { opacity: 1; }
.cli-step.is-typed .cli-note { opacity: 1; transition: opacity 0.4s var(--ease-content) 0.15s; }
.cli-cmd .caret {
  display: inline-block; width: 7px; height: 1em; background: var(--text);
  vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

/* -- the curve draws itself rather than appearing already drawn.            */
.curve-plot path[stroke] { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.curve-plot.is-drawn path[stroke] { transition: stroke-dashoffset 1.6s var(--ease-soft); stroke-dashoffset: 0; }
.curve-plot path[fill]:not([stroke]) { opacity: 0; transition: opacity 0.9s var(--ease-content) 0.5s; }
.curve-plot.is-drawn path[fill]:not([stroke]) { opacity: 0.07; }

/* -- hover: surfaces and tier columns lift out of the page.                 */
.surface { transition: border-color 0.3s var(--ease-content), background 0.3s var(--ease-content); }
.surface:hover { border-color: var(--line-strong); background: var(--bg-card-hover); }
.pkg { cursor: default; }
.compose-grid:hover .pkg:not([data-off]):hover { background: var(--bg-card); }
.person { transition: background 0.3s var(--ease-content); }
.person:hover { background: var(--bg-card); }
.featgrid > div { transition: transform 0.4s var(--ease-soft); }
.featgrid > div:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .cli-cmd .caret { animation: none; }
  .curve-plot path[stroke] { stroke-dashoffset: 0; }
  .curve-plot path[fill]:not([stroke]) { opacity: 0.07; }
}

/* ------------------------------------------------------ pricing columns ---
   Linear's pricing columns are hairline-divided with no card fill, which is
   already how .cols-3 works here. Plans get the same treatment.             */
/* FRAMED, like Square's. Measured off squareup.com/us/en/pricing: a white card
   on the tinted page ground, 10px radius, NO stroke, rgba(0,0,0,0.1) 5px 5px
   50px, 30px of padding, 20px between cards. Two deliberate departures: the
   radius is Box's --r-block rather than their 10px, because a control and a
   block have one radius each across this site and a pricing page is not the
   place to introduce a third; and the card carries a hairline as well as the
   shadow, because these same cards appear inside the enterprise sheet where
   the ground is not tinted and a shadow alone would leave them edgeless.

   The hairline columns this replaced were Linear's shape. Square frames each
   tier, and a frame is what makes a tier read as a thing you choose rather
   than a column in a table. */
.plancols { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
@media (min-width: 900px) { .plancols { grid-template-columns: repeat(3, 1fr); } }
.plancol {
  padding: 28px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 50px 0;
  display: flex; flex-direction: column;
}
.theme-dark .plancol { box-shadow: none; }
.plancol h3 { font-size: 26px; font-weight: 400; letter-spacing: -0.02em; margin: 0; }
/* The descriptor: what you DO with the tier, above the line saying who you
   are. One sentence, set at the body size but in the ink colour, so it reads
   as part of the name rather than as another qualifier. */
.plancol .plan-desc { margin: 8px 0 0; font-size: 14px; line-height: 21px; color: var(--text); }
.plancol .price { font-size: 22px; letter-spacing: -0.02em; margin: 12px 0 0; }
.plancol .price small { font-size: 14px; letter-spacing: 0; color: var(--text-muted); margin-left: 7px; }
.plancol hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; width: 100%; }
.plancol .qual { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.plancol ul { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.plancol li { font-size: 14px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
/* The CTA sits under the price, not on the card floor: Square's order, and it
   stops five bullets standing between deciding and acting. The feature list
   below it is what takes the leftover height now, so nothing needs pinning. */
.plancol .btn { align-self: stretch; justify-content: center; }
.plancol ul { margin-bottom: 0; }

/* one glyph set for the whole page, drawn in CSS so it inherits colour */
.yes, .no { width: 13px; height: 13px; flex: none; position: relative; margin-top: 3px; }
.yes::after {
  content: ''; position: absolute; left: 3px; top: 0; width: 5px; height: 9px;
  border: solid currentColor; border-width: 0 1.4px 1.4px 0; transform: rotate(42deg);
}
.no::before, .no::after {
  content: ''; position: absolute; left: 1px; top: 6px; width: 11px; height: 1px;
  background: var(--text-faint);
}
.no::after { display: none; }

/* --------------------------------------------------- comparison table ----
   Linear's table: a sticky header, vertical hairlines running the full height,
   no row rules. Vercel's contribution is the filter bar above it.           */
/* overflow-x:auto computes overflow-y:auto, which makes this a scroll container
   and captures the sticky header inside it. The scroller only exists where the
   table actually cannot fit. */
.ctab-scroll { overflow-x: visible; }
.ctab { position: relative; }
@media (max-width: 900px) {
  .ctab-scroll { overflow-x: auto; }
  .ctab { min-width: 760px; }
}
.ctab-head {
  position: sticky; top: var(--nav-h); z-index: 5;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.ctab-r { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); }
/* namespace.so carries the plan name, its price and its CTA in the sticky
   header, so the columns stay priced while you scan forty rows. */
.ctab-head .ctab-r > * { padding: 16px 14px 18px; }
.ctab-head .ctab-r > :first-child { padding-left: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); align-self: end; }
/* The tier name and nothing else, which is what Square's comparison header
   carries. It used to repeat the package count and a Talk to us button that
   the tier card 300px above already had — three counts and three buttons of
   pure restatement across one screen. */
.ctab-plan { text-align: center; }
.ctab-plan p { margin: 0; }
.ctab-plan .n { font-size: 16px; font-weight: 500; }

/* An explanation now hangs off an info icon rather than a row disclosure. The
   chevron only appeared on 6 of 17 rows, so clicking any other row did nothing
   and the whole table read as broken. An icon is only present where there is
   something to read, and hovering costs no layout shift. */
.info { position: relative; display: inline-flex; z-index: 1; }
.info:hover, .info:focus-within { z-index: 20; }
.info-btn {
  appearance: none; background: none; padding: 0; cursor: help;
  width: 14px; height: 14px; border: 1px solid #858984; border-radius: var(--r-round);
  color: var(--text-muted); font-family: var(--font-mono); font-size: 9px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s var(--ease-content), border-color 0.2s var(--ease-content);
}
.info-btn:hover, .info-btn:focus-visible { color: var(--text); border-color: var(--text); }
.tip {
  position: absolute; top: calc(100% + 10px); left: -10px; width: 320px;
  /* inverted against the page, the way .btn-primary is, so it reads as a layer
     floating above the table rather than another panel in it */
  background: var(--bg-invert); border: 1px solid var(--bg-invert);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.45);
  padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--text-invert);
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity 0.18s var(--ease-content), transform 0.18s var(--ease-content);
  pointer-events: none; text-align: left; font-weight: 400;
}
.ctab .info:hover > .tip,
.ctab .info:focus-within > .tip { opacity: 1; visibility: visible; transform: none; }
/* the last group would push its tooltip past the table, so those flip upwards */
.ctab-group-last .tip { top: auto; bottom: calc(100% + 10px); }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }
/* The column hairlines have to run the whole table, including through the gaps
   between groups, so they are painted once on the body rather than per cell.
   Grid is 1.6fr + 3x1fr = 4.6fr, so the boundaries land at 1.6, 2.6 and 3.6. */
.ctab-body {
  background-image:
    linear-gradient(var(--line), var(--line)),
    linear-gradient(var(--line), var(--line)),
    linear-gradient(var(--line), var(--line));
  background-size: 1px 100%, 1px 100%, 1px 100%;
  background-position: 34.783% 0, 56.522% 0, 78.261% 0;
  background-repeat: no-repeat;
}
.ctab-head .ctab-r > :nth-child(n+2) { border-left: 1px solid var(--line); }
.ctab-body .ctab-r > * { padding: 13px 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ctab-body .ctab-r > :first-child { padding-left: 0; color: var(--text); gap: 9px; }
.ctab-body .ctab-r > :nth-child(n+2) { justify-content: center; color: var(--text-muted); }
.ctab-r[hidden] { display: none; }
.ctab-grp {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 34px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.ctab-grp[hidden] { display: none; }

/* ---- .ctab-rows: the row-ruled variant ---------------------------------
   The table above is Linear's: vertical hairlines running the full height and
   no row rules. /pricing's is the opposite — a hairline under every row, no
   vertical rules, and each group named by a tinted band across the full width.
   Both are one component because they are one thing with one markup contract;
   forking the markup is how a site ends up with two comparison tables that
   disagree about what a group label is.

   /enterprise still runs the unmodified table. That is a drift worth closing
   in one direction or the other, and it is not this page's call to make. */
.ctab-rows .ctab-r { grid-template-columns: 2fr repeat(3, 1fr); }
/* the column rules are painted on the body as three background gradients
   positioned for the 4.6fr grid, so they have to be turned off here rather
   than merely re-positioned */
.ctab-rows .ctab-body { background-image: none; }
.ctab-rows .ctab-head .ctab-r > :nth-child(n+2) { border-left: 0; }
.ctab-rows .ctab-head .ctab-r > * { padding: 14px 14px 16px; }
/* "Features" is a column heading here, not a group label: same size and weight
   as the plan names beside it, rather than the mono eyebrow the other table
   sets it in */
.ctab-rows .ctab-head .ctab-r > .ctab-lead {
  font-family: var(--font); font-size: 16px; letter-spacing: 0;
  text-transform: none; color: var(--text);
}
/* name and price on one line, left aligned under the header, because a value
   column that starts at its own left edge is easier to run an eye down than
   three centred ones */
.ctab-rows .ctab-plan { text-align: left; }
/* the name carries the same weight device as the cards above — the sheet loads
   one static 400, so font-weight here would render at 400 and the plan names
   would sit at exactly the weight of the values under them */
.ctab-rows .ctab-plan .n { -webkit-text-stroke: 0.4px currentColor; paint-order: stroke fill; }
.ctab-rows .ctab-plan .q { margin-left: 8px; font-size: 14px; color: var(--text-muted); }
/* the period rides inside a <small> so the billing toggle can rewrite the
   figure beside it without touching it; it is not a smaller thing */
.ctab-rows .ctab-plan .q small { font-size: inherit; }
.ctab-rows .ctab-body .ctab-r { border-bottom: 1px solid var(--line); }
.ctab-rows .ctab-body .ctab-r > * { padding: 15px 14px; }
.ctab-rows .ctab-body .ctab-r > :nth-child(n+2) { justify-content: flex-start; color: var(--text); }
.ctab-rows .ctab-grp {
  background: var(--bg-card);
  padding: 9px 14px; margin: 0;
  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------------- FAQ ----
   One native component across product, solution, pricing and support pages.
   Details keeps the interaction keyboard accessible before JavaScript loads. */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
  gap: 50px clamp(60px, 9vw, 140px);
  align-items: start;
}
.faq-layout > h2 { margin-top: 0; }
.faq { align-self: start; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 24px;
  align-items: center;
  min-height: 74px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 400;
  line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "+";
  font-size: 19px;
  line-height: 1;
  transition: transform 240ms var(--ease-soft);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p {
  max-width: 60ch;
  margin: 0;
  padding: 0 52px 28px 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
}
@media (max-width: 820px) {
  .faq-layout { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* ------------------------------------------------------- callout & layers -- */

/* A quiet aside that still separates from the body around it. One hairline on
   the leading edge rather than a filled card: the pages that use it already
   carry a lot of boxes, and another one would read as a fifth grid. */
.callout {
  border-left: 1px solid var(--line-strong);
  padding: 4px 0 4px var(--s-5);
  max-width: var(--measure-wide);
}
.callout p { margin: 0; font-size: 15px; line-height: 24px; color: var(--text-muted); }

/* An ordered sequence where each step names the thing that moves. The index and
   the code token are fixed columns so the prose starts on one line down the
   whole list, which is what makes it scan as a sequence rather than as cards. */
.layers { border-top: 1px solid var(--line); }
.layer {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}
.layer > span:first-child { color: var(--text-faint); }
.layer h3 { margin: 0 0 6px; }
.layer p { margin: 0; max-width: var(--measure); }
.layer em { font-style: normal; font-family: var(--font-mono); font-size: 0.92em; }
.layer code {
  font-family: var(--font-mono); font-size: 12px; line-height: 16px;
  color: var(--text-faint); white-space: nowrap;
}
@media (min-width: 860px) {
  .layer { grid-template-columns: 88px 1fr 200px; gap: var(--s-6); align-items: baseline; }
  .layer code { text-align: right; }
}

/* --------------------------------------------------------- data tables -- */

/* Ports, intents and the responsibility matrix are the same object: a header row
   of mono labels over rows that collapse to stacked pairs on a phone. They
   differ only in column count, so the row mechanics live here once and each
   sets its own template. */
.ports, .intents, .matrix { border-top: 1px solid var(--line); }
.port-row, .intent-row, .matrix-row {
  display: grid;
  gap: 4px var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 22px;
}
.matrix-row b { font-weight: 500; color: var(--text); }
.matrix-row > span:first-child { color: var(--text); }
.matrix-row > span:not(:first-child) { color: var(--text-muted); }
.port-row code, .intent-row code {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text);
}
.intent-row b { font-weight: 500; }
.port-head, .intent-head, .matrix-head {
  font-family: var(--font-mono); font-size: 11px; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
/* the header labels only make sense beside the columns they name; stacked, the
   rows are self-describing and the header is just noise */
@media (max-width: 859px) { .port-head, .intent-head, .matrix-head { display: none; } }
@media (min-width: 860px) {
  .port-row { grid-template-columns: 260px 1fr 1fr; }
  .intent-row { grid-template-columns: 168px 132px 1fr 1fr 1.2fr; align-items: baseline; }
  .matrix-row { grid-template-columns: 280px 1fr 1fr; align-items: baseline; }
}

/* ------------------------------------------------------------- modules -- */

/* The SDK module list: a name and one line of purpose. Denser than .featgrid
   because there are eight of them and none needs a paragraph. */
.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.module { background: var(--bg); padding: var(--s-5); }
.module b {
  display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: 13px; color: var(--text); margin-bottom: 6px;
}
.module span { font-size: 14px; line-height: 20px; color: var(--text-muted); }

/* --------------------------------------------------------------- nest -- */

/* Tiers are nested sets, so the figure is nested boxes and not three columns.
   Concentric insets carry the containment claim on their own; the label sits
   top-left of each ring so the reading order is outermost to innermost. */
.nest { display: flex; justify-content: center; }
.nest-ring {
  border: 1px solid var(--line-strong);
  padding: var(--s-8) var(--s-6) var(--s-6);
  position: relative;
  width: 100%;
  max-width: 620px;
}
.nest-ring > .mono, .nest-core > .mono {
  position: absolute; top: 10px; left: var(--s-5);
}
.nest-ring .nest-ring { max-width: none; }
.nest-core {
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  padding: var(--s-8) var(--s-6) var(--s-6);
  position: relative;
  min-height: 66px;
}

/* --------------------------------------------------------------- form -- */

/* Square's contact-sales: the whole decision sits in one tinted band, with the
   reason on the left and the form in a white card on the right. Measured on
   squareup.com/us/en/sales/contact — 580px intro column, 458px form column,
   80px of top padding, 48px display headline at -0.03em, a numbered list at
   22px/34px, 45px-tall fields one per row, a full-width submit. The radii are
   ours, not Square's 10px control / 50px button: this site runs one corner. */

/* Measured on Square's contact-sales, and the measurement changed the shape:
   the page is NOT a tinted band with a card inside it. The tint is one
   absolutely-placed block sized to the intro column alone (1275x526, #f7f6f5,
   starting flush under the header). The form card is taller than that block,
   so it starts inside the tint and finishes on white — the card breaks the
   band. That break is the whole device; it is why their page reads as
   composed rather than as two columns in a coloured box. */

.cs-band { position: relative; isolation: isolate; overflow-x: clip; }
.cs-grid { display: grid; grid-template-columns: 1fr; }

.cs-intro { position: relative; padding: 56px 0 48px; }
/* The tint: exactly as tall as the intro column, and wider than any viewport.
   The usual `calc(50% - 50vw)` bleed assumes a centred containing block; this
   one is the left track of a grid, so it is not centred and that formula lands
   short. Overshooting both edges and clipping at the band is correct wherever
   the column sits. */
.cs-intro::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: -100vw; right: -100vw;
  background:
    radial-gradient(circle at 24% 26%, rgba(38, 72, 239, .1), transparent 34%),
    var(--ground-sunk);
}
@media (min-width: 1024px) {
  .cs-grid {
    grid-template-columns: minmax(0, 1fr) 480px;
    column-gap: var(--s-14);
    align-items: start;
  }
  .cs-intro { grid-column: 1; grid-row: 1; padding: 80px 0 60px; }
  .cs-proof { grid-column: 1; grid-row: 2; }
  /* spans both rows so it can outgrow the tint and land on white */
  .cs-card  { grid-column: 2; grid-row: 1 / span 2; margin-top: 80px; }
}

.cs-h1 {
  font-size: clamp(36px, 4.4vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 400;
  max-width: 12ch;
  margin: 0;
}
@media (min-width: 1024px) { .cs-h1 { max-width: 500px; } }

.cs-expect { margin: var(--s-8) 0 var(--s-4); color: var(--text-muted); }

.cs-steps {
  margin: 0; padding: 0; list-style: none; counter-reset: step;
  display: flex; flex-direction: column; gap: 6px;
}
.cs-steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 28px 1fr; align-items: baseline;
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5;
}
.cs-steps li::before { content: counter(step) "."; color: var(--text-faint); }

.cs-already { margin: var(--s-8) 0 0; color: var(--text-muted); }
.cs-already a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.cs-card {
  min-width: 0;
  background: #fff;
  border: 0.5px solid var(--line);
  border-radius: var(--r-block);
  padding: clamp(24px, 5vw, 44px);
  margin-top: var(--s-8);
}

.form { display: flex; flex-direction: column; gap: var(--s-5); }

/* one field per row: Square never asks the eye to choose between two next
   moves inside a lead form */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 15px; font-weight: 500; color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: var(--font); font-size: 15px; line-height: 21px;
  color: var(--text); background: var(--bg);
  border: 1px solid #858984;
  border-radius: var(--r-control);
  padding: 11px 14px;
  transition: border-color 0.16s var(--ease-content), box-shadow 0.16s var(--ease-content);
}
.field textarea { resize: vertical; min-height: 104px; }
/* the native control paints its own ground in dark mode, so the option list
   has to be told the page's colours explicitly or it renders unreadable */
.field select {
  appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 6px;
}
.field select option { background: var(--bg); color: var(--text); }
.theme-dark .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fafafa' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}

.cs-hint { margin: 2px 0 0; font-size: 13px; line-height: 19px; color: var(--text-faint); }
.cs-status { margin: 0; }
.cs-submit { width: 100%; justify-content: center; margin-top: var(--s-2); }
.cs-fine { margin: 0; font-size: 12px; line-height: 18px; color: var(--text-faint); }

/* Square's proof slot sits in the left column on white, immediately under the
   tint: a line of copy, then one piece of media, then the qualifier. Theirs is
   a logo wall; the placement is what carries, not the content. */
.cs-proof { padding: var(--s-10) 0 var(--s-12); max-width: 560px; }
.cs-proof-line { margin: 0; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.4; }
.cs-proof-fig {
  margin: var(--s-6) 0 var(--s-5);
  border-radius: var(--r-block);
  overflow: hidden;
  background: var(--ground-sunk);
}
.cs-proof-fig img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.6s var(--ease-content);
}
.cs-proof-fig:hover img { transform: scale(1.05); }
.cs-proof-note { margin: 0; font-size: 14px; line-height: 21px; color: var(--text-muted); }
.cs-proof-note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------- merchant verticals -- */

/* Square's four-up: an image, a name, a line, and a link. The card is the hit
   target end to end, the image answers the cursor, the card lifts. */
/* The grid is pulled out by one gutter so every cell carries identical padding
   (and therefore an identical image width) while the first cell's content still
   lines up with the shell edge. .cols-3 drops the first cell's padding instead,
   which is invisible on text and very visible on a row of photographs. */
.vgrid {
  display: grid; grid-template-columns: 1fr;
  gap: var(--s-8) 0;
  margin: var(--s-12) calc(var(--s-6) * -1) 0;
}
@media (min-width: 640px)  { .vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vgrid { grid-template-columns: repeat(4, 1fr); } }

.vcard {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: 0 var(--s-6);
  border-left: 1px solid var(--line);
}
.vcard:first-child { border-left: 0; }
.vcard .media { }
.vcard-body { display: flex; flex-direction: column; gap: 6px; }
.vcard .muted { font-size: 14px; line-height: 20px; }
.vcard .go { margin-top: auto; }

/* ------------------------------------------------- institution segments -- */

/* Stripe hangs a customer story off each segment; Box hangs the merchant the
   institution serves, divided by hairlines like every other row on the site. */
.icards {
  display: grid; grid-template-columns: 1fr;
  gap: var(--s-8) 0;
  margin: var(--s-12) calc(var(--s-6) * -1) 0;
}
@media (min-width: 700px)  { .icards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .icards { grid-template-columns: repeat(4, 1fr); } }

.icard {
  display: flex; flex-direction: column;
  padding: 0 var(--s-6);
  border-left: 1px solid var(--line);
}
.icard:first-child { border-left: 0; }
.icard-art { display: block; }
.icard-art .media { }
.icard-body { display: flex; flex-direction: column; gap: 8px; padding: var(--s-5) 0 0; }
.icard .muted { font-size: 14px; line-height: 20px; }
.icard .go { margin-top: var(--s-2); }

/* ------------------------------------------------------------- what's on -- */

.ngrid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); margin-top: var(--s-10); }
@media (min-width: 800px) { .ngrid { grid-template-columns: repeat(3, 1fr); } }
.ncard { display: flex; flex-direction: column; gap: 10px; }
.ncard .mono { margin: var(--s-2) 0 0; }
.ncard .h-sm { color: var(--text); }

/* the deep region holds three sections, so it sets its own rhythm rather than
   letting each one add another section-pad on top of the ground's padding */


/* the surfaces arrive the way the software does: rows in, tiles filling */
.sf-row.sf-wait, .sf-tile.sf-wait, .sf-till .amt.sf-wait { opacity: 0; transform: translateY(6px); }
.sf-row, .sf-tile, .sf-till .amt {
  transition: opacity 420ms var(--ease-soft), transform 420ms var(--ease-soft);
  transition-delay: var(--d, 0ms);
}
.sf-tile.sf-wait { transform: scale(0.96); }

/* the whole panel answers the cursor, so it reads as something you could use */
.surface-console .sf-row:hover { background: var(--bg-card-hover); }

@media (prefers-reduced-motion: reduce) {
  .sf-row, .sf-tile, .sf-till .amt { transition: none; }
  .sf-row.sf-wait, .sf-tile.sf-wait, .sf-till .amt.sf-wait { opacity: 1; transform: none; }
}

/* ------------------------------------------------------ resource cards -- */

/* The column count follows the card count, so a four-card group never leaves
   one card stranded on a second row. */
.rgrid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--s-10); }
@media (min-width: 700px)  { .rgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .rgrid { grid-template-columns: repeat(3, 1fr); }
  .rgrid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
}

.rcard {
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--s-6);
  min-height: 190px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.rcard .muted { font-size: 14px; line-height: 20px; }
.rcard .go { margin-top: auto; }

/* ---------------------------------------------------------- doc groups -- */

.grows { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 700px)  { .grows { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grows { grid-template-columns: repeat(3, 1fr); } }

.grow {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title count" "body body" "go go";
  gap: 8px var(--s-4);
  padding: var(--s-6);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.grow .h-sm { grid-area: title; }
.grow-n     { grid-area: count; color: var(--text-faint); white-space: nowrap; }
.grow .muted { grid-area: body; font-size: 14px; line-height: 20px; }
.grow .go   { grid-area: go; margin-top: var(--s-2); }

/* ----------------------------------------------------- the empty state -- */

/* Used where Box genuinely has nothing to show yet. It states the absence
   rather than dressing it, which is the whole reason these pages can exist
   without inventing customers, partners or releases. */
.emptybox {
  border-top: 1px solid var(--line);
  padding: var(--s-8) 0 0;
  max-width: 720px;
}
.emptybox .h-sm { margin: 0 0 10px; }
.cbtns { display: flex; flex-wrap: wrap; margin-top: var(--s-5); }

/* ------------------------------------------------------- feature case --- */

.feature-case {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .feature-case { grid-template-columns: 1.1fr 1fr; align-items: stretch; } }
.feature-case .media { height: 100%; }
.feature-case-body { display: flex; flex-direction: column; gap: 12px; padding: var(--s-8) 0 var(--s-8) var(--s-8); justify-content: center; }
.feature-case .go { margin-top: var(--s-2) }

.ulink { text-decoration: underline; text-underline-offset: 3px; }

/* a cell that is itself a link takes the same quiet hover the post rows use */
a.cell { transition: opacity 220ms var(--ease-content); }
a.cell:hover { opacity: 0.72; }
a.cell .go { margin-top: var(--s-4); }

/* ------------------------------------------------------------- solutions -- */

.sgrid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--s-12); }
@media (min-width: 700px)  { .sgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sgrid { grid-template-columns: repeat(4, 1fr); } }
/* three-up when the group has three, so the row never leaves a gap */
.sgrid:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
@media (min-width: 900px) { .sgrid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }

.scard {
  padding: var(--s-6);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.scard .muted { margin: var(--s-3) 0 var(--s-5); font-size: 14px; line-height: 20px; }
.spoints { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.spoints li {
  font-size: 13px; line-height: 18px; color: var(--text-muted);
  padding-left: 14px; position: relative;
}
.spoints li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--line-strong); }

/* -------------------------------------------------- the stack comparison -- */

/* Two columns of the same list, one long and one short. The argument is the
   difference in length, so nothing here is decorated. */
.stackcmp { display: grid; grid-template-columns: 1fr; gap: var(--s-10); }
@media (min-width: 900px) { .stackcmp { grid-template-columns: 1fr 1fr; gap: 0; } }
.stackcol { padding: 0 var(--s-8); border-left: 1px solid var(--line); }
.stackcol:first-child { padding-left: 0; border-left: 0; }
.stackcol .mono { margin: 0 0 var(--s-5); }
.stackcol .note { margin-top: var(--s-5); }

.stacklist { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.stacklist li {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--text-muted);
}
.stacklist li:last-child { border-bottom: 1px solid var(--line); }
.stacklist .stack-end { color: var(--text); }
.stacklist .stack-box { color: var(--text); padding: 18px 0; }
.stack-surfaces {
  display: block; margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ------------------------------------------------ commerce banking parts -- */

/* Account → Payments → Commerce. Three words and two arrows; the point is the
   direction, so nothing else is drawn. */
.relgrow { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; padding: var(--s-8) 0; border-top: 1px solid var(--line); }
.relgrow-step { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.relgrow-step.is-now { color: var(--text); }
.relgrow-arrow .arrow { width: 12px; height: 12px; color: var(--text-faint); }

/* The problem and the opportunity are the same diagram with a different number
   of owners, so they share one component and the reader sees the difference. */
.fanout { margin-top: var(--s-12); border-top: 1px solid var(--line); padding-top: var(--s-6); }
.fanout .mono { margin: 0 0 var(--s-6); }
.fan-top { padding-bottom: var(--s-4); }
.fan-node {
  display: inline-block; padding: 10px 16px;
  border: 1px solid var(--line); font-size: 15px; color: var(--text-muted);
}
.fan-node.is-box { border-color: var(--text); color: var(--text); }
.fan-row { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--s-4); }
@media (min-width: 700px) { .fan-row { grid-template-columns: repeat(3, 1fr); } }
.fan-leaf {
  display: block; padding: var(--s-5) var(--s-6);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint);
}
.fan-leaf:first-child { padding-left: 0; border-left: 0; }
.fan-leaf b { display: block; font-family: var(--font); font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--text); margin-bottom: 6px; }
.fanout .note { margin-top: var(--s-6); }

/* Three origins converging on one box. */
.converge { margin-top: var(--s-12); }
.conv-row { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 700px) { .conv-row { grid-template-columns: repeat(3, 1fr); } }
.conv-src {
  display: block; padding: var(--s-6);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint);
}
.conv-src:first-child { padding-left: 0; border-left: 0; }
.conv-src b { display: block; font-family: var(--font); font-size: 17px; letter-spacing: -0.01em; text-transform: none; font-weight: 400; color: var(--text); margin-bottom: 6px; }
.conv-into { padding: var(--s-8) 0 0; border-top: 1px solid var(--text); margin-top: var(--s-8); }
.conv-box { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.035em; }
.conv-objects { margin: var(--s-4) 0 0; }

/* Three layers, the middle one lit, because the question is which layer the
   merchant actually sees. */
.layers { margin-top: var(--s-12); }
.layer { padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.layer:last-child { border-bottom: 1px solid var(--line); }
.layer .mono { margin: 0 0 8px; }
.layer .muted { margin: 0; }
.layer.is-box { border-top-color: var(--text); }
.layer.is-box .mono { color: var(--text); }

/* -------------------------------------------------------- primitive grid -- */

/* The commerce nouns as a dense mono grid. Real package names, so the density
   is the point: this is the surface area, stated rather than described. */
.primgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
@media (min-width: 640px)  { .primgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .primgrid { grid-template-columns: repeat(6, 1fr); } }
.prim {
  padding: var(--s-5) var(--s-4);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: color 220ms var(--ease-content);
}
.prim:hover { color: var(--text); }

/* ------------------------------------------------------ editorial + case -- */

/* The dominant card on Resources. Media left, argument right, nothing enclosed. */
.editorial { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); margin-top: var(--s-6); }
@media (min-width: 900px) { .editorial { grid-template-columns: 1.2fr 1fr; } }
.editorial .media { }
.editorial-body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-8) 0 var(--s-8) var(--s-8); justify-content: center; }
@media (max-width: 899px) { .editorial-body { padding: var(--s-6) 0 0; } }

/* A case study is a row of facts, so it is laid out as one. */
.casetable { border-top: 1px solid var(--line); }
.caserow {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
  padding: var(--s-6) 0; border-bottom: 1px solid var(--line);
  transition: opacity 220ms var(--ease-content);
}
@media (min-width: 900px) { .caserow { grid-template-columns: 1.6fr repeat(3, 1fr) 40px; gap: var(--s-6); align-items: center; } }
.caserow:hover { opacity: 0.72; }
.case-inst b { display: block; font-size: 20px; letter-spacing: -0.025em; font-weight: 400; color: var(--text); }
.case-inst { color: var(--text-muted); font-size: 14px; }
.case-col { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--text); }
.case-col .mono { color: var(--text-faint); }
.caserow .arrow-cell { display: flex; justify-content: flex-end; color: var(--text-muted); }
.caserow .arrow-cell svg { width: 14px; height: 14px; }

/* --------------------------------------------------- solution page parts -- */

/* Today vs with Box, as two chains. The argument is that one is shorter. */
.beforeafter { display: grid; grid-template-columns: 1fr; gap: var(--s-10); }
@media (min-width: 900px) { .beforeafter { grid-template-columns: 1fr 1fr; gap: 0; } }
.ba-col { padding: 0 var(--s-8); border-left: 1px solid var(--line); }
.ba-col:first-child { padding-left: 0; border-left: 0; }
.ba-col .mono { margin: 0 0 var(--s-5); }

.chain { display: flex; flex-direction: column; gap: 0; }
.chain-node {
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size: 15px; color: var(--text-muted);
}
.chain-node:last-of-type { border-bottom: 1px solid var(--line); }
.chain-node.is-lit { color: var(--text); }
.chain-sep { display: none; }

/* The closing list of what the institution gains. */
.gains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 700px)  { .gains { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .gains { grid-template-columns: repeat(3, 1fr); } }
.gains li {
  padding: var(--s-5) var(--s-6);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--text);
}
.scard-go { margin-top: var(--s-5); }

/* ══════════════════════════════════════════════════════════════ diagrams ══

   Box is infrastructure, so the visual language is systems diagrams rather
   than photography or abstract 3D. Everything here is built from the same
   parts the rest of the site uses: hairlines, mono labels, no fills, no
   radius, no colour. They are defined once in build.mjs and referenced by
   name, so the same diagram can appear in a blog post, a guide and a platform
   page without being redrawn.

   Every diagram degrades to a readable vertical list on a narrow screen. */

.dg { margin: var(--s-10) 0; }
.prose .dg { margin: var(--s-10) 0; }
/* A caption is a sentence, so it takes the reading face. Mono is reserved for
   things that name data: node labels, column heads, stat labels. */
.dg-cap {
  margin: var(--s-4) 0 0;
  font-size: 14px; line-height: 20px; color: var(--text-muted);
}

/* a node: the only box shape in the system */
.dg-node {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  font-size: 13px; line-height: 18px; color: var(--text);
  text-align: left;
}
.dg-node b { font-weight: 500; }
.dg-node span { font-size: 12px; line-height: 16px; color: var(--text-muted); }
/* the one node the diagram is about */
.dg-node.is-box { border-color: var(--line-strong); background: var(--ground-sunk); }
.dg-node.is-quiet { border-style: dashed; color: var(--text-muted); }

/* the connector between nodes; rotates with the axis */
.dg-arrow {
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-faint);
  min-height: 22px;
}

/* ---- vertical stack: A above B above C --------------------------------- */
.dg-stack { display: grid; grid-template-columns: minmax(0, 320px); justify-content: center; }
/* Inside a frame the stack sits between full-width rows, so a narrow centred
   column reads as an accident rather than a funnel. Match the rows. */
.dg-frame > .dg-stack { grid-template-columns: minmax(0, 1fr); }

/* ---- horizontal flow, wrapping to vertical when it runs out of room ---- */
.dg-flow { display: grid; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 700px) {
  .dg-flow { grid-auto-flow: column; grid-auto-columns: 1fr auto; grid-template-columns: none; align-items: center; }
  .dg-flow .dg-arrow { min-height: 0; padding: 0 12px; }
}

/* ---- one node branching into many -------------------------------------- */
.dg-branch { display: grid; gap: 0; }
.dg-branch-leaves { display: grid; grid-template-columns: 1fr; gap: 0; }
.dg-branch-leaves > .dg-node { border-top-width: 0; }
.dg-branch-leaves > .dg-node:first-child { border-top-width: 1px; }
@media (min-width: 760px) {
  .dg-branch-leaves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dg-branch-leaves > .dg-node { border-top-width: 1px; border-left-width: 0; }
  .dg-branch-leaves > .dg-node:first-child { border-left-width: 1px; }
  /* a second row re-draws its own top edge, so rows never double up */
  .dg-branch-leaves > .dg-node:nth-child(3n + 1) { border-left-width: 1px; }
}

/* ---- side-by-side comparison ------------------------------------------- */
.dg-cols { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 760px) { .dg-cols { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.dg-col { padding: var(--s-5) var(--s-5) var(--s-6); border-top: 1px solid var(--line); }
@media (min-width: 760px) {
  .dg-col { border-top: 0; border-left: 1px solid var(--line); }
  .dg-col:first-child { border-left: 0; padding-left: 0; }
}
.dg-col-head {
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-faint);
}
.dg-col .dg-stack { grid-template-columns: minmax(0, 1fr); }
.dg-col ul { margin: var(--s-4) 0 0; padding-left: 16px; }
.dg-col li { font-size: 13px; line-height: 20px; color: var(--text-muted); margin-bottom: 4px; }

/* ---- an enclosing boundary, for "inside your environment" -------------- */
.dg-frame {
  padding: var(--s-6);
  border: 1px dashed var(--line-strong);
}
.dg-frame-label {
  margin: 0 0 var(--s-5);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-faint);
}

/* ---- an inline lockstep line used inside prose ------------------------- */
.flowline {
  margin: var(--s-6) 0;
  padding: 14px 16px;
  border-left: 1px solid var(--line);
  font-size: 13px; line-height: 22px; color: var(--text-muted);
}
.stackline { line-height: 26px; }

/* a field the visitor has to go back to */
.field.is-error input,
.field.is-error select,
.field.is-error textarea { border-color: var(--text); }
.field.is-error label { color: var(--text); }

/* One surface on its own, at the scale Linear gives a product shot, rather
   than three competing for a row. The caption is redundant here because the
   section heading above already names it. */
.surface-solo { min-height: 460px; }
@media (min-width: 1024px) { .surface-solo { min-height: 560px; } }
.surface-solo .surface-cap { display: none; }
.surface-solo .sf-shop { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 1024px) { .surface-solo .sf-side { width: 200px; } }

/* At solo scale the storefront was three empty outlines, which showed the
   frame and none of the product. It now carries a shop bar and real rows: a
   thumbnail block, a name and a price, which is what a shopfront actually is. */
.sf-shop-bar {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 18px;
  padding: 0 2px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--text-muted);
}
.sf-shop-bar b { font-size: 14px; font-weight: 450; color: var(--text); margin-right: auto; }
.sf-shop-bar .sf-cart { font-family: var(--font-mono); font-size: 11px; }
.sf-tile b {
  position: absolute; left: 0; right: 0; bottom: -34px;
  font-size: 12px; line-height: 15px; font-weight: 400; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-tile em {
  position: absolute; left: 0; bottom: -50px;
  font-style: normal; font-family: var(--font-mono);
  font-size: 11px; color: var(--text-muted);
}
.surface-solo .sf-shop { grid-template-columns: repeat(4, 1fr); gap: 18px 20px; padding: 20px 22px 60px; }
.surface-solo .sf-tile { aspect-ratio: 4 / 3; margin-bottom: 52px; }


/* ---------------------------------------------------------- block radius --
   Every block-level surface takes --r-block from one place. Listed rather than
   applied with a wildcard so the exceptions stay visible and deliberate: the
   mega-menu stage is full-bleed and a radius on a full-width sheet reads as a
   mistake, and anything already circular keeps --r-round. */
.media,
.card, .card-art,
.stat,
.grid-4 .cell,
.featured, .featured-art,
.media-split-art,
.surface,
.scard, .ncard, .rcard, .vcard, .icard, .grow,
.people, .person,
.emptybox,
.dg-node, .dg-frame,
.pkg,
.conv-box, .fan-node, .chain-node,
.mm-feature-art,
.tip {
  border-radius: var(--r-block);
}
/* the grid draws its own hairlines with a 1px gap over a tinted parent, so a
   radius on the children only would show the parent through the corners */
.people { overflow: hidden; }
.person { border-radius: 0; }

/* ==========================================================================
   .showcase — one visual region, several labelled states, the reader drives it.

   The pattern Square uses to carry a product story without a paragraph: a
   single stage, a rail of tabs beside it, and the stage cross-fading between
   states as the tab changes. This implementation is native to Box tokens, so
   any page can compose with it.

   Two differences from the version it replaces. The stage is an aspect ratio
   rather than a fixed 834px, because the art is 2880x1860 and a fixed height
   letterboxes it differently at every width. And the dwell is one custom
   property, --dwell, read by both the ring here and the rule in .tsplit, so
   the two autoplaying blocks on a page cannot drift to different tempos.
   ========================================================================== */

@property --showcase-t {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.showcase {
  --dwell: 8s;
  /* Box's surface art is full bleed, so the stage reserves the rail's column
     rather than placing labels over live interface content. */
  --rail-w: min(32%, 340px);
  --rail-x: var(--s-16);
  position: relative;
  background: var(--ground-sunk);
  border-radius: var(--r-block);
  isolation: isolate;
  overflow: hidden;
}

.showcase-stage {
  position: relative;
  aspect-ratio: 16 / 10;
}

/* Every state is stacked in the same box and only opacity separates them, so
   the stage never reflows as the tab changes and the images can be decoded
   ahead of their turn. */
.showcase-stage img {
  position: absolute;
  /* contain letterboxes inside this box, so insetting it past the rail keeps
     the art clear of the labels at every aspect ratio. */
  inset: 0;
  width: 100%;
  height: 100%;
  /* The rail's column, reserved as PADDING rather than as an inset. An
     absolutely positioned <img> is a replaced element: it does not stretch to
     its insets, it falls back to intrinsic size, and a percentage width
     resolves against the stage regardless. Padding is the one thing that does
     shrink the box object-fit fits into. box-sizing is border-box globally. */
  padding-left: calc(var(--rail-x) + var(--rail-w) + var(--s-8));
  object-fit: contain;
  opacity: 0;
  transition: opacity 700ms var(--ease-soft);
}
.showcase-stage img.is-on { opacity: 1; }

/* The rail. It sits on the stage rather than beside it, which is what keeps
   the art full-bleed inside the block instead of squeezed into a column. */
.showcase-tabs {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--rail-x);
  width: var(--rail-w);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
}

.showcase-tabs button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 58px;
  padding: var(--s-3) var(--s-4);
  text-align: left;
  color: var(--text-faint);
  transition: color 340ms var(--ease), min-height 500ms var(--ease-soft);
}
.showcase-tabs button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* The lit segment of the rail. It is a child rather than a border so it can
   scale from its own centre and overlap the hairline exactly. */
.showcase-tabs button::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -1px;
  width: 1px;
  background: var(--text);
  opacity: 0;
  transform: scaleY(0);
  transition: opacity 300ms var(--ease), transform 500ms var(--ease-soft);
}

.showcase-tabs button > span {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

/* The description belongs to the active tab only, and it opens by max-height
   rather than by display so the rail's height animates instead of jumping. */
.showcase-tabs button small {
  max-width: 275px;
  max-height: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.4;
  opacity: 0;
  transition:
    max-height 500ms var(--ease-soft),
    margin-top 500ms var(--ease-soft),
    opacity 250ms var(--ease);
}

.showcase-tabs button[aria-selected='true'] { min-height: 112px; color: var(--text); }
.showcase-tabs button[aria-selected='true']::before { opacity: 1; transform: scaleY(1); }
.showcase-tabs button[aria-selected='true'] small {
  max-height: 64px;
  margin-top: var(--s-3);
  opacity: 1;
}

.showcase-controls {
  position: absolute;
  z-index: 3;
  right: var(--s-12);
  bottom: var(--s-8);
  display: flex;
  gap: var(--s-4);
}

.showcase-controls button {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-round);
  color: var(--text);
  transition: border-color 220ms var(--ease);
}
.showcase-controls button:hover { border-color: var(--text); }
.showcase-controls button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* The dwell timer, drawn as the ring around the forward control: a conic
   sweep masked down to the ring itself, so the control reads as filling up
   rather than as a pie chart. --showcase-t is animated, not the gradient. */
.showcase-controls [data-showcase-next]::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--r-round);
  pointer-events: none;
  background: conic-gradient(currentColor calc(var(--showcase-t) * 1turn), transparent 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
.showcase-controls [data-showcase-next].is-running::after {
  animation: showcase-ring var(--dwell) linear;
}
.showcase.is-paused .showcase-controls [data-showcase-next]::after { animation-play-state: paused; }

@keyframes showcase-ring { from { --showcase-t: 0; } to { --showcase-t: 1; } }

/* The caption the rail collapses into below the tab breakpoint. */
.showcase-caption { display: none; }

@media (max-width: 900px) {
  .showcase-stage { aspect-ratio: 4 / 3; }
  .showcase-stage img { padding-left: 0; }
  .showcase-tabs { display: none; }
  .showcase-caption {
    display: block;
    position: absolute;
    z-index: 2;
    left: var(--s-6);
    right: var(--s-6);
    bottom: calc(var(--s-8) + 56px);
  }
  .showcase-caption strong { display: block; font-size: 20px; font-weight: 450; letter-spacing: -0.03em; }
  .showcase-caption span { display: block; margin-top: var(--s-2); color: var(--text-muted); font-size: 15px; line-height: 1.4; }
  .showcase-controls { right: var(--s-6); bottom: var(--s-6); }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-stage img { transition: none; }
  .showcase-controls [data-showcase-next].is-running::after { animation: none; }
}


/* ==========================================================================
   .tsplit — copy one side, visual the other, and the copy is a list you click.

   The second half of the same idea: instead of a paragraph explaining three
   properties, three headings that open one at a time while the visual beside
   them keeps pace. The hairline above the open point doubles as the dwell
   timer, which is why the block needs no separate progress furniture.
   ========================================================================== */

.tsplit {
  --dwell: 8s;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  align-items: center;
}

.tsplit-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-12);
  padding: var(--s-6) var(--s-12) var(--s-8) 0;
}

/* The mirrored arrangement. Both children are placed explicitly rather than
   reordered with `direction` or `order`, so the DOM order stays the reading
   order and the tab order with it. */
.tsplit-reverse .tsplit-copy { grid-column: 2; grid-row: 1; padding-right: 0; padding-left: var(--s-12); }
.tsplit-reverse .tsplit-visual { grid-column: 1; grid-row: 1; }

/* The block carries its own display size: this heading is the largest thing
   in the section, and inheriting the base h2 left it at 24px — the same size
   as the point headings it is supposed to sit above. */
.tsplit-copy h2 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.tpoints { position: relative; width: 100%; }

.tpoint { position: relative; border-top: 1px solid var(--line); }

/* The dwell, drawn as the hairline filling in. It runs on .is-active, and
   because the active element changes each turn the animation restarts on its
   own — no class toggling, no reflow trick. */
.tpoint::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
}
.tpoint.is-active::before { animation: tpoint-fill var(--dwell) linear forwards; }
.tpoints.is-paused .tpoint.is-active::before { animation-play-state: paused; }

@keyframes tpoint-fill { to { transform: scaleX(1); } }

.tpoint button {
  width: 100%;
  max-width: 442px;
  padding: var(--s-6) 0;
  text-align: left;
}
.tpoint button:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }

.tpoint h3 {
  margin: 0;
  color: var(--text-faint);
  font-size: 24px;
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -0.03em;
  transition: color 300ms var(--ease);
}
.tpoint.is-active h3 { color: var(--text); }

/* 0fr -> 1fr rather than max-height, so the panel opens to exactly its own
   height and a long detail cannot be clipped by a guessed maximum. */
.tpoint-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--ease-soft);
}
.tpoint-detail > div { min-height: 0; overflow: hidden; }
.tpoint.is-active .tpoint-detail { grid-template-rows: 1fr; }

.tpoint-detail p {
  max-width: 442px;
  margin: 0;
  padding-bottom: var(--s-10);
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.4;
}

.tsplit-visual { position: relative; aspect-ratio: 4 / 5; }
.tsplit-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-block);
  opacity: 0;
  transition: opacity 700ms var(--ease-soft);
}
.tsplit-visual img.is-on { opacity: 1; }

@media (max-width: 900px) {
  .tsplit { grid-template-columns: 1fr; gap: var(--s-8); }
  .tsplit-copy,
  .tsplit-reverse .tsplit-copy { grid-column: 1; grid-row: 2; padding: 0; }
  .tsplit-reverse .tsplit-visual { grid-column: 1; grid-row: 1; }
  .tsplit-visual { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .tpoint.is-active::before { animation: none; transform: scaleX(1); }
  .tpoint-detail { transition: none; }
  .tsplit-visual img { transition: none; }
}

/* ---------------------------------------------------------- proof strip -- */

/* A single line of evidence, hung under a section that just made a claim: the
   customer's mark, one sentence, and the arrow. It is a link, so the whole
   strip is the target rather than the words inside it. */
.proof {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  margin-top: var(--s-10);
  background: var(--bg-card);
  border-radius: var(--r-block);
  transition: background-color 0.24s var(--ease);
}
.proof:hover { background: var(--bg-card-hover); }
.proof img { width: 60px; height: auto; flex: none; }
.proof span { flex: 1; font-size: 15px; line-height: 22px; }
.proof i {
  flex: none;
  font-style: normal;
  color: var(--text-muted);
  transition: transform 0.3s var(--ease-soft);
}
.proof:hover i { transform: translate(2px, -2px); }

/* -------------------------------------------------------------- stories -- */

/* Three photographs, each with a claim under it. The copy sits BELOW the image
   rather than over it: an overlay needs a dark wash and light text in both
   themes, which is a third ground the palette does not carry. Under the image
   the copy is ordinary ink on ordinary paper and the dark remap handles it. */
.stories {
  display: grid; grid-template-columns: 1fr;
  gap: var(--s-8) 0;
  margin: var(--s-12) calc(var(--s-6) * -1) 0;
}
@media (min-width: 900px) { .stories { grid-template-columns: repeat(3, 1fr); } }

.story {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: 0 var(--s-6);
  border-left: 1px solid var(--line);
}
.story:first-child { border-left: 0; }
@media (max-width: 899px) { .story { border-left: 0; } }

.story figure {
  margin: 0;
  aspect-ratio: 11 / 9;
  overflow: hidden;
  border-radius: var(--r-block);
  background: var(--bg-card);
}
.story figure img { width: 100%; height: 100%; object-fit: cover; }
.story h3 { margin: 0; }
.story p { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-muted); }

/* ------------------------------------------------- compare pair, visual -- */

/* .beforeafter already carries the two-column frame and the dividing rule;
   this is only the plate a column gets when the comparison is drawn rather
   than written. */
.ba-col figure { margin: 0 0 var(--s-6); border-radius: var(--r-block); overflow: hidden; background: var(--bg-card); }
.ba-col figure img { width: 100%; height: auto; }
.ba-col h3 { margin: 0; font-size: 20px; font-weight: 450; line-height: 1.25; letter-spacing: -0.02em; }

/* ---------------------------------------------------------------- plate -- */

/* A single still, sat on the card ground at whatever ratio it was drawn at.
   .band-media exists but crops to 16/9, which is right for the video bands and
   wrong for product art: the hero render is 1679x1787, and cover would take a
   letterbox out of the middle of it. This contains instead of cropping. */
.plate {
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--s-8);
  background: var(--bg-card);
  border-radius: var(--r-block);
  overflow: hidden;
}
.plate img { width: auto; max-width: 100%; max-height: 68vh; object-fit: contain; }


/* ------------------------------------------------- expanding panels -- */

/* A horizontal accordion, measured off Square's "Keep your business growing":
   four panels on one row, the open one at 780px showing its copy, the other
   three collapsed to 240px slivers carrying only a label. 464px tall, 16
   images, eighteen words in the whole section — it is an image view first and
   a text block a distant second.

   This is Box's own implementation of that pattern and lives in the shared
   component layer so any page can use it. */
.hpanels {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-10);
}

.hpanel {
  position: relative;
  /* Proportional, and numeric at BOTH ends. The first version animated
     flex-basis from a clamp() to `auto`, which is not an interpolatable
     value — the browser cannot tween to it, so the panel snapped open
     instead of sliding. Growing from 1 to 3.3 of a shared pool is a plain
     number at every frame. The ratio matches the reference: an open panel
     takes ~52% of the row, the three closed ones split the rest. */
  flex: 1 1 0;
  min-width: 0;
  height: clamp(360px, 34vw, 464px);
  /* was a hand-written 16px, the only component off the scale */
  border-radius: var(--r-block);
  overflow: hidden;
  background: var(--bg-card);
  cursor: pointer;
  /* 400ms, measured off the reference. The 620ms it had was not only slower
     to read, it left the row sliding under the cursor for half again as long. */
  transition: flex-grow 400ms var(--ease-soft);
}
.hpanel.is-open { flex-grow: 3.3; cursor: default; }
.hpanel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.hpanel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Copy sits on a photograph, so it needs its own ground in both themes. The
   ink is the palette's own #0b0d0f; nothing new is introduced here. */
.hpanel-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(11 13 15 / 82%) 0%, rgb(11 13 15 / 30%) 42%, rgb(11 13 15 / 0%) 70%);
}

.hpanel-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-6);
  color: #f0f0ec;
}
.hpanel-body h3 {
  margin: 0;
  font-size: 20px; font-weight: 450; line-height: 1.2; letter-spacing: -0.02em;
  white-space: nowrap;
}
/* The description belongs to the open panel only, and it opens by grid rather
   than by display so the height animates instead of jumping. */
.hpanel-body p {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  max-width: 46ch;
  font-size: 14px; line-height: 1.45;
  opacity: 0;
  transition: grid-template-rows 400ms var(--ease-soft), opacity 220ms var(--ease), margin-top 400ms var(--ease-soft);
}
.hpanel-body p > span { min-height: 0; overflow: hidden; }
.hpanel.is-open .hpanel-body p { grid-template-rows: 1fr; opacity: .88; margin-top: var(--s-3); }

@media (max-width: 900px) {
  .hpanels { flex-direction: column; }
  .hpanel, .hpanel.is-open { flex: 0 0 auto; height: 260px; }   /* stacked: no interpolation needed */
  .hpanel-body p { grid-template-rows: 1fr; opacity: .88; margin-top: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .hpanel, .hpanel-body p { transition: none; }
}

/* ------------------------------------------------------------- support --

   Square's /help is search-first: a question, one large field, then topics.
   The fastest route to an answer is typing it, not reading a page about where
   answers live. */
.support-hero { text-align: center; padding-top: 88px; }
.support-hero .h-display { margin: 0 auto 32px; max-width: 16ch; }
.support-search {
  appearance: none; cursor: pointer; width: min(620px, 100%);
  margin: 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; font: inherit; font-size: 17px; text-align: left;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-pill); color: var(--text-faint);
  transition: border-color 0.16s var(--ease-content), color 0.16s var(--ease-content);
}
.support-search:hover { border-color: var(--text-faint); color: var(--text-muted); }
.support-search svg { width: 20px; height: 20px; flex: none; }
.support-search span { flex: 1; }
.support-search kbd {
  font: inherit; font-size: 12px; padding: 2px 7px;
  border: 1px solid var(--line); border-radius: var(--r-control); color: var(--text-faint);
}
.support-note { margin: 18px auto 0; max-width: 56ch; font-size: 14px; }
.support-note a { text-decoration: underline; text-underline-offset: 3px; }

.support-grid {
  display: grid; gap: 12px; margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.support-card {
  display: block; padding: 24px; border: 1px solid var(--line);
  border-radius: var(--r-block); background: var(--bg-card);
  transition: border-color 0.16s var(--ease-content), transform 0.16s var(--ease-content);
}
.support-card:hover { border-color: var(--text-faint); transform: translateY(-2px); }
.support-card svg { width: 22px; height: 22px; color: var(--text-muted); }
.support-card h3 { margin: 14px 0 6px; font-size: 18px; line-height: 24px; font-weight: 500; }
.support-card p { margin: 0; font-size: 14px; line-height: 21px; color: var(--text-muted); }

.support-tiers {
  display: grid; gap: 24px; margin-bottom: 32px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.support-tiers .mm-label { margin: 0 0 8px; color: var(--text-faint); }
.support-early { margin-bottom: 24px; }

/* ------------------------------------------------------------- about -- */

/* Square's /about, measured: a 686px square of media centred on a dark ground
   with the headline at 124px/124px w500 set OVER it in a 960px column, so the
   type is wider than the picture and crosses it. Then one centred statement at
   50/58, a hairline, a 32px label beside the body, and stats at 62-96px each
   under its own rule. Sizes below are the same relationships, fluid. */

.ab-hero {
  position: relative;
  display: grid; place-items: center;
  padding: clamp(48px, 8vw, 104px) var(--pad, 24px) clamp(56px, 9vw, 120px);
}
.ab-hero-media {
  grid-area: 1 / 1;
  margin: 0;
  width: min(686px, 62vw);
  aspect-ratio: 1;
  border-radius: var(--r-block);
  overflow: hidden;
}
.ab-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-hero-h1 {
  grid-area: 1 / 1;
  position: relative;
  margin: 0;
  width: min(960px, 92vw);
  text-align: center;
  font-size: clamp(40px, 9vw, 124px);
  line-height: 1;
  font-weight: 400;
  -webkit-text-stroke: .5px currentColor;
  paint-order: stroke fill;
  letter-spacing: -0.03em;
  color: #fff;
  /* the picture is a photograph, not a controlled ground: the type needs its
     own contrast rather than trusting whatever is behind a given word */
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}

.ab-statement {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) 24px clamp(56px, 9vw, 112px);
  text-align: center;
}
.ab-statement p {
  margin: 0;
  font-size: clamp(24px, 3.6vw, 50px);
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.ab-star { color: var(--text-faint); }

.ab-split {
  display: grid; grid-template-columns: 1fr; gap: var(--s-6);
  padding-top: var(--s-10); padding-bottom: var(--s-12);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .ab-split { grid-template-columns: 1fr 1fr; gap: var(--s-14); } }
.ab-split-label { margin: 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; font-weight: 400; letter-spacing: -0.02em; -webkit-text-stroke: .35px currentColor; paint-order: stroke fill; }
.ab-split-body { display: flex; flex-direction: column; gap: var(--s-5); max-width: 52ch; }
.ab-split-body p { margin: 0; font-size: 17px; line-height: 27px; color: var(--text-muted); }
.ab-foot { font-size: 14px !important; line-height: 21px !important; color: var(--text-faint) !important; }

.ab-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10) var(--s-12); padding-bottom: var(--s-14); }
@media (min-width: 1024px) { .ab-stats { grid-template-columns: repeat(4, 1fr); } }
.ab-stat { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.ab-stat-n { margin: 0; font-size: clamp(46px, 6vw, 84px); line-height: 1; font-weight: 400; letter-spacing: -0.03em; }
.ab-stat-l { margin: 14px 0 0; font-size: 17px; line-height: 25px; color: var(--text-muted); max-width: 22ch; }

.ab-media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 290px);
  gap: 12px;
  padding: 12px;
  background: #0b0b0b;
}
.ab-media-grid img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.ab-media-grid img:first-child,
.ab-media-grid img:nth-child(6) { grid-column: span 2; }

.ab-principles { padding-bottom: var(--s-14); }
.ab-principle-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-8); margin-top: var(--s-8); }
@media (min-width: 720px)  { .ab-principle-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-12); } }
@media (min-width: 1200px) { .ab-principle-grid { grid-template-columns: repeat(3, 1fr); } }
.ab-principle { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.ab-principle h3 { margin: 0; font-size: 19px; line-height: 27px; font-weight: 400; -webkit-text-stroke: .3px currentColor; paint-order: stroke fill; }
.ab-principle p { margin: 8px 0 0; font-size: 15px; line-height: 23px; color: var(--text-muted); }

.ab-wide-media {
  width: min(1180px, calc(100% - 48px));
  height: clamp(420px, 62vw, 760px);
  margin: 0 auto clamp(72px, 10vw, 150px);
  overflow: hidden;
  border-radius: var(--r-block);
  background: #eceae4;
}
.ab-wide-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-wide-media-offset { width: min(980px, calc(100% - 48px)); margin-left: max(24px, calc((100% - 1180px) / 2)); }
.ab-proof-intro {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 20px 24px;
  border-block: 1px solid var(--line);
}
.ab-proof-intro p { margin: 0; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.ab-proof-strip { display: grid; grid-template-columns: 1fr 1fr; min-height: 151px; }
.ab-proof-strip a { display: grid; align-content: space-between; gap: 28px; padding: 28px clamp(24px, 4vw, 64px); color: inherit; border-bottom: 1px solid var(--line); }
.ab-proof-strip a + a { border-left: 1px solid var(--line); }
.ab-proof-strip span { color: var(--text-muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.ab-proof-strip strong { font-size: clamp(22px, 2.4vw, 34px); font-weight: 400; letter-spacing: -.035em; }
.ab-recognition { border-top: 1px solid var(--line); }
.ab-join { margin-top: clamp(40px, 6vw, 88px); }

.ab-close { padding-bottom: var(--s-12); }
.ab-close > * { max-width: 900px; }
.ab-close-h { margin: 0; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; font-weight: 400; letter-spacing: -0.02em; -webkit-text-stroke: .35px currentColor; paint-order: stroke fill; }
.ab-close-p { margin: var(--s-5) 0 0; font-size: 17px; line-height: 27px; color: var(--text-muted); }
.ab-close-p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 719px) {
  .ab-media-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 180px); }
  .ab-media-grid img:first-child,
  .ab-media-grid img:nth-child(6) { grid-column: auto; }
  .ab-proof-strip { grid-template-columns: 1fr; }
  .ab-proof-strip a + a { border-left: 0; }
  .ab-wide-media,
  .ab-wide-media-offset { width: calc(100% - 32px); height: 420px; margin-inline: 16px; }
}

/* ---------------------------------------------------------- partners -- */

/* Square's /partnerships owns a colour world: black, one lime accent, and a
   headline that switches mid-sentence from the sans into a MONO cut in that
   accent. The emphasis is a typeface change, not a weight change, which is why
   it reads as a voice rather than as shouting. Box already holds both halves —
   OnsiteMono and #b8f34a — so this page is where the mono gets to be display
   type. It is the only page that does; that is what makes it work. */

.pt-mono {
  font-family: var(--font-mono);
  color: var(--accent);
  letter-spacing: -0.01em;
}

.pt-hero { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 96px); }
.pt-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-10); align-items: center; }
@media (min-width: 1024px) { .pt-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--s-14); } }
.pt-h1 {
  margin: 0 0 var(--s-6);
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.08;
  font-weight: 500; letter-spacing: -0.03em; max-width: 16ch;
}
.pt-lede { margin: 0 0 var(--s-7); font-size: 17px; line-height: 27px; color: var(--text-muted); max-width: 54ch; }
.pt-hero-art { position: relative; width: 100%; height: clamp(260px, 30vw, 380px); }
.pt-hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.pt-h2 {
  margin: 0 0 var(--s-5);
  font-size: clamp(26px, 3.2vw, 42px); line-height: 1.1;
  font-weight: 500; letter-spacing: -0.03em; max-width: 16ch;
}

.pt-kinds { display: grid; grid-template-columns: 1fr; gap: var(--s-6); padding-bottom: var(--s-14); }
@media (min-width: 900px) { .pt-kinds { grid-template-columns: repeat(3, 1fr); } }
/* Square outlines these cards in the accent. Here the accent arrives on
   approach instead of sitting there — three permanently lime boxes would spend
   the one chromatic value the site has on decoration. */
.pt-card {
  display: flex; flex-direction: column; gap: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-block);
  padding: var(--s-8);
  transition: border-color 0.25s var(--ease-content), transform 0.25s var(--ease-content);
}
.pt-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.pt-card h2 { margin: 0; font-size: 21px; line-height: 29px; font-weight: 500; }
.pt-card p { margin: 0; font-size: 15px; line-height: 23px; color: var(--text-muted); }
.pt-card-note { color: var(--text-faint) !important; }
.pt-card .go { margin-top: auto; padding-top: var(--s-3); }

.pt-band { display: grid; grid-template-columns: 1fr; gap: var(--s-8); padding-bottom: var(--s-14); align-items: center; }
@media (min-width: 900px) { .pt-band { grid-template-columns: 1fr 1fr; gap: var(--s-14); } }
.pt-band--flip .pt-band-fig { order: 2; }
@media (max-width: 899px) { .pt-band--flip .pt-band-fig { order: 0; } }
.pt-band-fig { margin: 0; border-radius: var(--r-block); overflow: hidden; background: var(--ground-sunk); }
.pt-band-fig img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  transform: scale(1.02); transition: transform 0.7s var(--ease-soft);
}
.pt-band:hover .pt-band-fig img { transform: scale(1.06); }
.pt-band-txt p { margin: 0 0 var(--s-4); font-size: 17px; line-height: 27px; color: var(--text-muted); max-width: 50ch; }
.pt-band-txt p:last-child { margin-bottom: 0; }

.pt-close { padding-bottom: var(--s-12); }
.pt-close p { margin: 0; font-size: 17px; line-height: 27px; color: var(--text-muted); max-width: 62ch; }

/* ------------------------------------------------------- code block, 2026-09-14
   The site had NO <pre> styling anywhere: the only code surface was .cli-cmd,
   which is a single line with a `$` prefix. That is why five developer pages
   had commands but no output, no payload and no failure case — there was
   nowhere to put them. A developer judges an API by its response, not by the
   verb used to fetch it.

   Deliberately quieter than .cli: no typing animation, no caret, no prompt
   character. This is something you read and copy, not something that performs.
   The label is a <figcaption> so the block is announced rather than floating. */
.codeblock { margin: 24px 0 0; }
.codeblock figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.codeblock pre {
  margin: 0;
  padding: 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  /* Long JSON lines must scroll rather than wrap: a wrapped brace reads as a
     syntax error to the exact reader this block is for. */
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
.codeblock pre .c { color: var(--text-faint); }   /* comments and dimmed keys */
.codeblock pre .g { color: var(--accent); }        /* the value being pointed at */
@media (max-width: 700px) { .codeblock pre { font-size: 12px; padding: 16px; } }

/* The accordion's indicator. .acc-btn has been `justify-content: space-between`
   with a 24px gap since it was written, which only makes sense with a second
   child, and no page had ever rendered one — the component shipped styled, with
   working JS, and unused. /pricing's questions are the first to use it. A plus
   that becomes a minus: the vertical stroke is the one that rotates out. */
.acc-ic { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
/* Only the VERTICAL stroke turns. Rotating the whole glyph 90 degrees leaves a
   plus looking exactly like a plus, which is why the two strokes are separate
   paths rather than one. */
.acc-ic-v { transform-origin: 50% 50%; transition: transform 0.36s var(--ease); }
.acc-item.open .acc-ic-v { transform: rotate(90deg); }
.acc-item.open .acc-ic { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .acc-ic-v { transition: none; } }
.box-form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.box-form-status {
  flex-basis: 100%;
  margin: 12px 0 0;
  color: inherit;
  font-size: 13px;
  line-height: 1.45;
}
.box-form-status[hidden] { display: none; }
}

@layer chrome {
/* ==========================================================================
   Design system chrome: navigation, drawers, sub navigation, search, shared
   calls to action, footer, responsive spacing, and shell motion.
   ========================================================================== */

/* --------------------------------------------------- nav CTA + a11y ---- */

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-control);
  background: var(--bg-invert);
  color: var(--text-invert);
  font-size: 14px;
  transition: top 0.2s var(--ease-soft);
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--bg);
  transition: background-color 0.3s var(--ease);
  --mm-ground: #ffffff;
}

/* ---- overlay nav --------------------------------------------------------
   On a page whose first section is a full-bleed media hero (body.nav-overlay,
   set from pages.json), the header has no ground of its own: it sits ON the
   hero, and the hero runs the full viewport height underneath it. The header
   only takes a ground back once the hero has scrolled past, which app.js marks
   with .is-pinned. Opening the mega menu also forces the ground, because a
   panel needs something opaque behind it. */
body.nav-overlay .nav { background: transparent; }
body.nav-overlay .nav.is-pinned { background: var(--bg); }
/* An open header takes the drawer's surface, not the page's — the two are one
   sheet, and the stage's top hairline is what separates them. */
body.nav-overlay .nav.is-open { background: var(--mm-ground); }
/* the hero starts under the header rather than after it */
body.nav-overlay main > .hero:first-child { margin-top: calc(-1 * var(--nav-h)); }

.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* the clone pinned the nav to 24px here, which no longer meets the content edge */
@media (min-width: 768px) { .nav-inner { padding: 0 var(--gutter); } }

.nav-left  { display: flex; align-items: center; gap: 24px; }
.nav-right { display: flex; align-items: center; gap: 8px; }
/* A header control is 32px tall, not the 36px the body button computes to: the
   nav is 64px, and a 36px button inside it leaves 14px of air above and below,
   which is not enough to read as a bar. Measured off layerzero.network. */
.nav-right .btn {
  min-height: var(--control-h-compact);
  height: var(--control-h-compact);
  padding-inline: var(--control-pad-compact);
}
/* Two CTAs fit the bar only on desktop. Below 900px "Talk to us" and the burger
   already fill the right side, so Get started drops to the mobile sheet rather
   than squeezing a third control in beside them. */
.nav-start { display: none; }
@media (min-width: 900px) { .nav-start { display: inline-flex; } }

.sb { position: relative; display: inline-flex; }
.nav-right .sb .btn { height: var(--control-h-compact); }
.sb .btn-primary { background: var(--accent-fill); color: var(--accent-fill-text); }
.sb .btn-primary:hover { background: var(--accent-fill-hover); }
.sb .btn-primary:active { background: var(--accent-fill-press); }
.sb-main { border-radius: var(--r-control) 0 0 var(--r-control); padding: 0 12px; }
.sb-caret {
  border-radius: 0 var(--r-control) var(--r-control) 0;
  padding: 0 8px;
  margin-left: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sb-caret .chev { width: 12px; height: 12px; }
.sb-caret .chev path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s var(--ease-chev);
}
.sb-caret[aria-expanded="true"] .chev-l { transform: rotate(-90deg); }
.sb-caret[aria-expanded="true"] .chev-r { transform: rotate(90deg); }
.sb-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 252px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.sb-menu.is-open { opacity: 1; transform: none; }
.theme-dark .sb-menu { background: var(--d-bg-card); border-color: var(--d-line); }
.sb-item {
  display: block;
  padding: 6px 10px;
  border-radius: var(--r-control);
  transition: background 0.16s var(--ease);
}
.sb-item:hover { background: var(--bg-card); }
.theme-dark .sb-item:hover { background: rgba(255, 255, 255, 0.06); }
.sb-item-t { display: block; font-size: 14px; line-height: 21px; color: var(--text); }
.sb-item-d { display: block; font-size: 12.5px; line-height: 17px; color: var(--text-muted); }

.nav-logo { display: flex; align-items: center; color: var(--text); }

/* ---- the mark ----------------------------------------------------------
   The wordmark supplied as src/brand/box-logo.svg: B, a square O with a slot
   in it, X. It is set by HEIGHT rather than by font-size, because it is
   artwork now rather than two letters with a drawn square between them — 16px
   is the cap height the old mark computed to, so the bar's rhythm is unchanged.

   The ink is currentColor, so the mark inverts with the theme without a second
   file. The slot keeps its own blue: it is the only part of the mark that is
   not type, and it is the same colour on either ground. */
.bx-logo { display: block; height: 18px; width: auto; }
.bx-logo-slot { fill: #2648ef; }
.footer-mark .bx-logo { height: 20px; }
@media (max-width: 480px) { .bx-logo { height: 16px; } }

.nav-links { display: none; align-items: center; gap: 20px; }
@media (min-width: 900px) { .nav-links { display: flex; } }

.nav-link {
  font-size: 15px;
  line-height: 20px;
  color: var(--text-muted);
  transition: color 0.18s var(--ease);
  padding: 6px 0;
}
/* The class the build actually emits is `is-current` (build.mjs:1032), not
   `is-active`. Hover keeps the neutral; the current-page rules are grouped
   below where they can win on order. */
.nav-link:hover { color: var(--text); }
.theme-dark .nav-link:hover { color: var(--d-text); }

/* ------------------------------------------------------- mega menu ----
   One stage morphs its height between menus while the panels inside cross-
   fade with a directional slide. Content fades faster than it slides, which
   is what makes the change read as liquid instead of snappy. */

.nav-dd-trigger { display: inline-flex; align-items: center; gap: 5px; }
/* The chevron morphs rather than rotates: each stroke pivots 90 degrees about
   its own centre, so the two halves swing from meeting at the bottom to meeting
   at the top. Rotating the whole icon 180 degrees reads as a flip; this reads as
   the mark changing shape. Measured off stripe.com: 0.25s on their curve. */
.nav-dd-trigger .chev { width: 12px; height: 12px; }
.nav-dd-trigger .chev path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s var(--ease-chev);
}
.nav-dd-trigger.is-open .chev-l { transform: rotate(-90deg); }
.nav-dd-trigger.is-open .chev-r { transform: rotate(90deg); }
/* THREE states were sharing two values here. `is-open` (this menu is showing)
   and `is-current` (this is the section you are in) both resolved to --text,
   which is also what :hover gives, so the bar could not tell you where you
   already were: the open menu, the hovered item and the current section were
   one appearance. Open stays neutral because it is transient and the panel
   below it is already the signal. CURRENT takes the accent, which is the
   second job --accent's own comment claims and did not previously do.
   MEASURED 6.01:1 on the light bar and 6.38:1 on the dark one, both clear AA
   at this size, and it follows the theme for free, including green on the
   developer pages. Declared after :hover so the current section keeps its
   colour while you move the cursor across the bar. */
.nav-dd-trigger.is-open { color: var(--text); }
.nav-link.is-current,
.nav-dd-trigger.is-current { color: var(--accent); }

/* The drawer is full-bleed: it spans the viewport edge to edge and reads as a
   surface the header pulls down, not as a card floating under it. It used to be
   inset to the width of the navbar content, which is Stripe's shape; that made
   sense while the panel sat on the same ground as the page, because the inset
   was the only thing marking it as a separate surface. It is now lifted onto
   --bg-card instead, and once the surface itself carries the separation the
   inset only stops the drawer at an arbitrary line short of the screen.

   The CONTENT still aligns to .shell — full-bleed applies to the surface, not
   to the columns, which stay locked to the logo on the left and the actions on
   the right exactly as before.

   It pops: the stage scales up from just under full size as the height opens,
   which is the arrival a pure height slide does not have. Scaling is horizontal
   only now, since a full-bleed surface scaling in from both edges would show
   the page through the gap. */
.mm-stage {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  background: var(--mm-ground);
  /* The drawer's own line weight, one step down from the page's. Everything
     inside is only half a shade off the ground, so --line at full strength was
     the loudest thing in the panel. Derived from the inherited --line rather
     than pinned, so it still follows the theme. */
  --mm-line: color-mix(in srgb, var(--line) 70%, var(--bg));
  border: 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  opacity: 0;
  transform: scaleY(0.985);
  transform-origin: top center;
  transition:
    height 0.3s var(--ease-shell),
    opacity 0.18s var(--ease-shell),
    transform 0.3s var(--ease-shell),
    border-color 0.3s var(--ease-shell);
}
.nav.is-open .mm-stage { border-color: var(--mm-line); opacity: 1; transform: none; }

.nav.is-open {
  --bg: #ffffff;
  --bg-card: #f0f0ec;
  --text: #0b0d0f;
  --text-muted: #6a6d68;
  --text-faint: #8f918b;
  --line: #dcddd8;
  --line-strong: #c9cac4;
  --accent: #2648ef;
  --accent-ink: #1e39bd;
  background: var(--mm-ground);
  color: var(--text);
}
.mm-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(var(--slide, 24px));
  /* stripe.com runs its whole dropdown on ONE curve at 0.3s: the popup animates
     clip-path and max-height at 0.2s, then opacity, transform and height at 0.3s,
     all on cubic-bezier(0.45,0.05,0.55,0.95). Ours slid the content at 0.5s on a
     different curve, so it arrived after the shell had already stopped moving. */
  transition: opacity 0.3s var(--ease-shell), transform 0.3s var(--ease-shell), visibility 0.3s;
}
.mm-panel.is-active { opacity: 1; visibility: visible; transform: none; }
/* the outgoing panel clears out faster than the incoming one arrives, so the
   two never sit on top of each other at readable opacity */
.mm-panel:not(.is-active) {
  transition: opacity 0.18s var(--ease-shell), transform 0.3s var(--ease-shell), visibility 0.3s;
}

/* The surface is full-bleed; the content is not. This is .shell plus the
   drawer's own vertical rhythm, so the columns land on the same left edge as
   the logo above them and the same right edge as the actions. */
.mm-inner {
  /* Declared here rather than on .mm-stage: --mm-line is derived FROM --line,
     so redefining --line on that same element would be a cyclic reference and
     the whole custom property would drop out. One level down it resolves. */
  --line: var(--mm-line);
  max-width: var(--maxw);
  margin: 0 auto;
  /* Asymmetric on purpose. The footer row inside already carries 18px of its
     own padding under the link, so a matching 40px here stacked into ~58px of
     dead space under the drawer. */
  padding: 44px var(--gutter) 22px;
}
@media (max-width: 767px) { .mm-inner { padding: 32px var(--gutter) 16px; } }

/* The page behind recedes. A scrim alone is nearly invisible on a dark ground
   (dark over dark), so the blur is what actually does the work here. */
.mm-backdrop {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* stripe's overlay is 0.3s on the same curve, so the dim lands with the panel
     rather than a beat before it */
  transition: opacity 0.3s var(--ease-shell), visibility 0.3s;
}
body.nav-open .mm-backdrop { opacity: 1; visibility: visible; }

/* links on the left, one feature in a fixed rail on the right, so every menu
   is built the same way regardless of how many groups it has */
/* Square's menu is master-detail. Left rail of categories at display size,
   right panel showing only the selected category. The rail is the whole
   navigational decision; the panel is the consequence of it. */

/* Square's menu is master-detail. A rail of categories at display size on the
   left, and only the selected category's links beside it. The rail is the
   whole navigational decision; the panel is the consequence of it. Six columns
   of small links ask a reader to scan everything at once. */
/* CLOUDFLARE'S COLUMNS. Every group visible at once, divided by vertical
   hairlines, with the feature card as the last track. The rail is gone: it was
   Square's master-detail, and it charged a click before a reader had seen
   anything. Measured off cloudflare.com/products.

   The columns are auto-sized from the group count rather than fixed, because
   Platform has two groups and Solutions has four and a fixed five-track grid
   left one of them looking broken. The feature stays placed explicitly so it
   can never wrap under the columns. */
.mm-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 268px);
  gap: 40px; max-width: 1560px;
}
@media (min-width: 1400px) { .mm-body { gap: 56px; } }
.mm-cols    { grid-column: 1; display: grid; gap: 0; min-width: 0; }
.mm-feature { grid-column: 2; }
.mm-cols[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-cols[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-cols[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Vertical hairlines keep each group legible while preserving one shared
   baseline across the drawer. */
.mm-col { min-width: 0; padding: 0 22px; border-left: 1px solid var(--line); }
.mm-col:first-child { padding-left: 0; border-left: 0; }
.mm-col:last-child { padding-right: 0; }

/* Cloudflare's group label is sentence case and grey, not an uppercase mono
   kicker. It names the column quietly and lets the link names carry the
   weight, which is the opposite of Shopify putting its green on the label. */
.mm-col-label {
  margin: 0 0 14px; font-size: 13px; line-height: 20px; font-weight: 400;
  color: var(--text-faint);
}
.mm-col-links { display: flex; flex-direction: column; }

/* -------------------------------------------------------- the strip ----
   Both references close the menu with one: Cloudflare puts an accent "see all"
   at the left and secondary links at the right, Shopify runs blurbs across the
   bottom. Box takes Cloudflare's, in lime. */
.mm-strip {
  margin-top: 32px; padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; max-width: 1560px;
}
.mm-strip-all {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 400; color: var(--accent);
}
.mm-strip-all svg { width: 15px; height: 15px; }
.mm-strip-all:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The label form of the strip's left side, for a menu with no hub page to
   point at. Shopify's half of the pattern; Cloudflare's is the accent link. */
.mm-strip-label {
  margin: 0; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-faint);
}
.mm-strip-links { display: flex; gap: 26px; flex-wrap: wrap; }
.mm-strip-links a {
  font-size: 13px; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 5px;
}
.mm-strip-links a:hover { color: var(--text); }

.mm-link {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0; font-size: 15px; line-height: 23px; font-weight: 400;
  color: var(--text);
  transition: color 0.16s var(--ease-content), transform 0.16s var(--ease-content);
}
.mm-link:hover { transform: translateX(2px); }
.mm-ico { width: 21px; height: 21px; flex: none; opacity: 0.5; transition: opacity 0.16s var(--ease-content); }
.mm-link:hover .mm-ico { opacity: 1; }

/* A described item is an icon beside a title stacked over its description, so
   it is a two-row grid with the icon spanning both, not a flex row of three. */
/* Measured against Square: their detail row is a 21px icon and an 18px label
   at a 37px pitch. Ours carries a description as well — deliberately, because
   nobody meeting "Retail Rails", "Connect" or "Space" for the first time can
   read them the way anyone reads "Payments" or "Banking" — and that second
   line was costing 65px a row, 76% more than Square for the same count. The
   text itself is 44px of it; the rest was padding. Tightened to a 56px pitch,
   which keeps the description and closes most of the gap. (After the 1px
   reduction the text is 41px and the pitch 53px.) */
.mm-link.has-desc {
  display: grid; grid-template-columns: 21px minmax(0, 1fr);
  column-gap: 12px; row-gap: 1px; align-items: start; padding: 6px 0;
}
.mm-link.has-desc .mm-ico { margin-top: 4px; grid-row: 1 / span 2; grid-column: 1; }
/* Three children, two columns: without placing them the description falls into
   the 21px icon track and wraps one word per line. */
.mm-link.has-desc .mm-link-t,
.mm-link.has-desc .mm-link-d { grid-column: 2; }
.mm-link-t { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.mm-link-d { display: block; font-size: 12px; line-height: 18px; font-weight: 400; color: var(--text-muted); max-width: 34ch; }
.mm-link .arrow { opacity: 0.5; }

.mm-feature {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border: 0; border-radius: var(--r-control);
  background: var(--bg);
  color: var(--text-muted);
}
.mm-feature-art { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-card); margin-bottom: 6px; }
/* The card is the one thing in the panel with a picture; its title must not be
   the quietest text in it. This rule was lost in an earlier edit and the title
   had been inheriting .mm-feature's muted grey at w400 — lighter than the
   detail links it sits beside. */
.mm-feature-t {
  display: block; margin-top: 2px;
  font-size: 15px; line-height: 23px; font-weight: 400; color: var(--text);
  transition: color 0.16s var(--ease-content);
}
.mm-feature-t .arrow { display: inline-block; vertical-align: -1px; margin-left: 4px; transition: transform 0.16s var(--ease-content); }
.mm-feature:hover .mm-feature-t,
.mm-feature:focus-visible .mm-feature-t { color: var(--accent-ink); }
.mm-feature:hover .mm-feature-t .arrow,
.mm-feature:focus-visible .mm-feature-t .arrow { transform: translate(2px, -2px); }

.mm-feature-art img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.85;
  transition: transform 700ms var(--ease-soft), opacity 700ms var(--ease-soft);
}
.mm-feature:hover .mm-feature-art img { transform: scale(1.04); opacity: 1; }
.mm-feature-blurb { color: var(--text-muted); font-size: 14px; line-height: 20px; }
.mm-feature:hover .mm-feature-blurb,
.mm-feature:focus-visible .mm-feature-blurb { color: var(--text-muted); }

/* Below this the third track costs the links their line length, so the
   feature is dropped rather than shrunk. These rules sit here, after
   .mm-feature's own display, because at equal specificity the later rule wins
   and the earlier one silently did nothing. */
@media (max-width: 1080px) {
  .mm-body { grid-template-columns: minmax(0, 1fr); }
  .mm-feature { display: none; }
}
@media (max-width: 820px) {
  .mm-body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mm-rail, .mm-detail { grid-column: 1; }
}

.mm-foot { margin-top: 36px; border-top: 1px solid var(--line); padding: 18px 0; }
.mm-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); transition: opacity 0.16s var(--ease-content); }
.mm-cta:hover { opacity: 0.6; }

@media (max-width: 899px) { .mm-stage, .mm-backdrop { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .mm-stage, .mm-panel, .mm-backdrop { transition: none; }
}

/* mobile */
.nav-burger { display: inline-flex; flex-direction: column; gap: 4px; padding: 8px; margin-right: -8px; }
@media (min-width: 900px) { .nav-burger { display: none; } }
.nav-burger span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
.nav-burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav-mobile-back { display: none; }
@media (max-width: 899px) {
  .nav.mobile-detail-open .nav-logo { display: none; }
  .nav.mobile-detail-open .nav-mobile-back {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    cursor: pointer;
  }
  .nav-mobile-back::before {
    content: "";
    width: 9px;
    height: 9px;
    border-bottom: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
}

.nav-mobile {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 45;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--bg);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.nav-mobile.open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 900px) { .nav-mobile { display: none; } }
.nm-viewport { position: relative; min-height: 0; overflow: hidden; }
.nm-screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 16px 24px 32px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: opacity .24s var(--ease-shell), transform .3s var(--ease-shell), visibility .3s;
}
.nm-screen.is-active { opacity: 1; visibility: visible; transform: none; }
.nm-screen.is-previous { opacity: 0; visibility: hidden; transform: translateX(-24%); }
.nm-root-links { border-top: 1px solid var(--line); }
.nm-top {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 22px;
  letter-spacing: -.03em;
  text-align: left;
  cursor: pointer;
}
.nm-drill-trigger::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}
.nm-drill-trigger::after { margin-right: 3px; transform: rotate(45deg); }
.nm-detail-head {
  display: flex;
  align-items: center;
  min-height: 54px;
  border-bottom: 1px solid var(--line);
}
.nm-detail-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.035em;
}
.nm-detail-groups { padding-top: 8px; }
.nm-detail-group { padding-block: 18px 10px; border-bottom: 1px solid var(--line); }
.nav-mobile .nm-label {
  margin: 0 0 8px;
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: .02em;
}
.nav-mobile .nm-detail-group a {
  display: block;
  padding: 9px 0;
  color: var(--text);
  font-size: 18px;
  letter-spacing: -.02em;
}
.nav-mobile .nm-menu-cta {
  display: block;
  margin-top: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 18px;
}
.nm-actions {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 12px 24px max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.nav-mobile.is-searching .nm-actions { display: none; }
.nav-mobile .nm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--control-h);
  height: var(--control-h);
  margin: 0;
  padding: 0 var(--control-pad);
  border: var(--control-stroke) solid transparent;
  border-radius: var(--r-control);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0;
}
.nm-access { position: relative; }
.nav-mobile .nm-access > summary {
  position: relative;
  color: var(--accent-fill-text);
  background: var(--accent-fill);
  list-style: none;
  cursor: pointer;
}
.nm-access > summary::-webkit-details-marker { display: none; }
.nm-access > summary::after {
  content: "";
  position: absolute;
  right: 18px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s var(--ease-content);
}
.nm-access[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.nm-access-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 190px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}
.nav-mobile .nm-access-menu a {
  display: block;
  padding: 10px;
  border-bottom: 0;
  border-radius: calc(var(--r-control) - 2px);
  color: var(--text);
  font-size: 16px;
  letter-spacing: 0;
}
.nav-mobile .nm-access-menu a:hover { background: var(--bg-card); }

/* --------------------------------------------------------------- footer -- */

/* CTA pair — the hovered card takes the extra width, lights up, and its arrow
   goes solid. One card is always active so the row is never symmetric. */
/* Flex, not grid, and deliberately: the pair used to transition
   grid-template-columns, which is a layout property, so every frame of the
   700ms morph re-ran layout for the whole section. As flex-grow it is one
   number per card, it springs (see clay.js), and the default below is the
   resting split so the pair still looks right with no JS at all. */
/* The band the page ends on: viewport edge to viewport edge, WHITE against the
   footer's Chinese black directly below it (John, 2026-09-15, in three steps —
   same value as the footer, then "a shade lighter", then "way lighter" with a
   white reference). Two near-blacks touching read as a seam in one block; white
   on ink reads as two blocks, which is what a frame is.

   IT IS RE-GROUNDED BY SCOPED SEMANTIC TOKENS, not by a theme class. It carried
   .theme-dark while it was dark, and the obvious move when it went white was
   .theme-light — except no such class exists, because light IS :root and
   .theme-dark is the remap off it. Restating the light ramp here would be a
   second copy of the palette, so instead the three values this band's children
   actually read are pointed at the band's own tokens. That is the law this
   stylesheet already states for a surface needing its own register: scope a
   semantic token and let every component inherit it.

   `color` is re-declared and not merely remapped, for the reason spelled out on
   .footer-ground below: `body { color: var(--text) }` resolved once on the body,
   and a parent's computed colour does not re-resolve because a descendant
   changed the token behind it. */
.cta-ground {
  --bg:          var(--ground-closer);
  --text:        var(--closer-ink);
  --text-muted:  var(--closer-ink-dim);
  background: var(--bg);
  color: var(--text);
}

/* The band's air: inside as padding, and the separation from the page above it
   on the OUTSIDE as a margin. Putting that gap inside would paint it the band's
   colour, which is the band having slipped rather than the band having
   padding. */
.cta-ground { margin-top: 96px; }
@media (min-width: 768px) { .cta-ground { margin-top: 160px; } }

/* Words left, frame right, and the action UNDER the words rather than opposite
   them (John: "i prefer this style"). The two halves are not equal: the column
   of type takes the width it needs up to a measure, and the frame is a fixed
   square, so the row does not rebalance as the claim's length changes.

   padding-BLOCK, never the `padding` shorthand. This element is also .shell,
   whose whole job is `padding: 0 var(--gutter)`, and a shorthand here lands
   later in the file and zeroes the sides — the claim then starts at x=0 and the
   last action is clipped off the right edge of the viewport. Caught in the
   render, which is the only place it shows. */
.closer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding-block: 64px;
}
@media (min-width: 900px) {
  .closer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
    padding-block: 96px;
  }
}

.closer-words { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }

/* Display size, not a heading. It is the last thing said rather than the top of
   a section, and a page with an <h2> in its closer has a heading that belongs
   to no content. Capped at a measure so it breaks where the sentence does. */
.closer-claim {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.045em;
  color: var(--text);
  text-wrap: balance;
}

.closer-acts { display: flex; align-items: center; gap: 24px; }

/* --accent-fill, so the closer's action and the bar's Try Box are one control
   in two places rather than two blues that nearly match. See 01-tokens.css on
   why a fill blue is not the text blue. */
.closer-go {
  background: var(--accent-fill);
  color: var(--accent-fill-text);
  height: var(--control-h);
  padding-inline: var(--control-pad);
}
.closer-go:hover  { background: var(--accent-fill-hover); }
.closer-go:active { background: var(--accent-fill-press); }

/* A SQUARE, cropped by the frame rather than by the file: the library is a
   16:9-ish shoot and nothing in it is square, so the aspect is asserted here
   and object-position holds the part that matters — the two faces sit in the
   upper third of this frame, so a centred crop takes their heads off.

   `height: auto` IS LOAD-BEARING. The <img> carries width and height
   attributes — it must, or the page reflows when the picture arrives — and on
   an <img> those attributes are presentational hints mapped to the width and
   height CSS properties. So `height: 1340px` was winning over aspect-ratio and
   the "square" rendered 420 wide by 1340 tall. Measured in the browser; nothing
   about the rule reads wrong. */
.closer-art {
  flex: none;
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: var(--r-block);
}
@media (min-width: 900px) {
  .closer-art { width: clamp(280px, 30vw, 420px); }
}

/* A link, not a second button. Underlined on hover only, so at rest the blue
   button is the only thing in the band asking to be pressed. */
.closer-quiet {
  min-height: var(--control-h);
  padding-inline: var(--control-pad);
  color: var(--text-muted);
  text-decoration: none;
  text-underline-offset: 3px;
  transition:
    border-color 0.16s var(--ease-content),
    color 0.16s var(--ease-content);
}
.closer-quiet:hover {
  border-color: currentColor;
  color: var(--text);
  text-decoration: none;
}

/* The footer stands on Chinese black on every page, light-theme pages included
   (John, 2026-09-15). The selector is doubled rather than left as
   `.footer-ground` because .theme-dark also sets --bg, at the same specificity:
   as one class it would win or lose on file order alone, which is exactly the
   kind of rule that breaks the day someone reorders the stylesheet.

   --bg is remapped as well as painted, so anything inside that grounds itself
   on var(--bg) — a nested card, an inverted button's text — resolves against
   the ground it is actually on. */
.footer-ground.theme-dark {
  --bg: var(--chinese-black);
  background: var(--bg);
  /* `color` HAS to be re-declared, and this is the trap in re-grounding with
     .theme-dark anywhere but <body>. The class only remaps custom properties;
     the declaration that USES --text is `body { color: var(--text) }`, which
     was computed once on the body with the light theme's value and inherits
     down into here unchanged. Remapping the token after the fact changes
     nothing a parent already resolved. Without this line the footer's whole
     link column is near-black ink on Chinese black — measured, not guessed. */
  color: var(--text);
}

/* 64 at the top, not 40 (John, 2026-09-15: "the top inner padding for the
   footer increase it a little bit"). The 40 was set while the footer stood on
   the page's own ground, where the gap above it was the page's air and the
   padding only had to keep the column headings off the join. It is a filled
   block now: the padding IS the air, and 40px of it under a hard colour change
   read as the links being pushed against the edge. */
.footer { padding-top: 64px; padding-bottom: 32px; }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
/* Six physical columns. Explore holds the former Resources and Company links,
   avoiding a cramped seven-up desktop grid. At 768 the six still need a
   three-up step between the phone's two and the desktop's six. */
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .footer-cols { grid-template-columns: repeat(6, 1fr); } }
.footer-col h2 { margin: 0 0 16px; }
.footer-col a { display: block; padding: 4px 0; font-size: 15px; transition: opacity 0.15s var(--ease); }
.footer-col a:hover { opacity: 0.6; }
.footer-contact p { margin: 0; padding: 4px 0; font-size: 15px; line-height: 1.45; }
.footer-contact p span { color: var(--text-muted); }
/* The bottom bar: mark, then the notice and the legal links as one running
   line. Not a row of separated controls — the slashes make it read as a single
   statement, which is what keeps a legal strip quiet.

   The separators are generated so the markup stays a plain list of links, and
   they carry EMPTY ALT TEXT via the `content: "/" / ""` form. Generated content
   is not invisible to assistive technology — Chrome exposes it, and without the
   alt each link announced as "slash Privacy". The second half of that value is
   the accessible text, and an empty string removes it from the name while the
   slash still paints. */
.footer-bottom {
  display: flex;
  align-items: flex-start;
  gap: var(--s-10);
  padding-top: 88px;
  flex-wrap: wrap;
}
.footer-mark { color: var(--text); display: inline-flex; align-items: center; flex: none; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* the row gap is tighter than the column gap: two wrapped lines should read
     as one paragraph, not as two rows of links */
  gap: 2px 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-muted);
}
.footer-legal > * + *::before {
  content: "/" / "";
  margin: 0 0.5em;
  color: var(--text-faint);
}
.footer-legal a { transition: color 0.16s var(--ease-content); }
.footer-legal a:hover { color: var(--text); }
.footer-copy { color: var(--text-muted); }

/* pushed to the far edge, so the bar reads mark / statement / accounts */
.footer-social {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-left: auto;
  flex: none;
}
.footer-social a { color: var(--text-muted); transition: color 0.16s var(--ease-content); }
.footer-social a:hover { color: var(--text); }
.footer-social svg { display: block; width: 17px; height: 17px; fill: currentColor; }

@media (max-width: 767px) {
  .footer-bottom { gap: var(--s-6); }
  /* on one column the row would sit alone at the bottom looking orphaned */
  .footer-social { margin-left: 0; }
}

/* --------------------------------------------------------- cookie bar -- */

/* The cookie banner lived here. It was removed: the site sets no cookies, and
   its accept/decline buttons gated nothing, so it asked for consent to nothing
   and recorded an answer that changed nothing. See src/docs.json (cookies). */

/* A legal page that has not been through counsel says so, rather than looking
   settled. */
.doc-review {
  margin: 0 0 var(--s-8);
  padding: var(--s-5) var(--s-6);
  background: var(--ground-sunk);
}
.doc-review strong { color: var(--text); font-weight: 500; }

/* ------------------------------------------------------------- reveal -- */

/* Entrances: content fades in with a short rise rather than snapping in.
   Nothing moves until .is-ready, so the first paint is never a half-state. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
}
/* will-change is a promise to the compositor, and it holds a GPU layer for as
   long as it is set. Declared on .reveal it was held for the life of the page,
   on every revealed element, long after the one transition it was for had
   finished. It belongs only to the elements still waiting to animate. */
.is-ready .reveal:not(.in) { will-change: opacity, transform; }
.is-ready .reveal {
  transition:
    opacity   var(--enter) var(--ease-soft),
    transform var(--enter) var(--ease-soft);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* Once the motion layer is live it owns the entrance, so the CSS transition
   steps aside. */
.has-clay .reveal { transition-property: none; }
.reveal.in.settled { will-change: auto; }

/* The page used to be held at opacity 0 until fonts settled, which cost ~800ms
   of blank screen between first paint and first contentful paint. It is also
   the wrong idea: the ground IS the black box, so it should appear at once and
   the content should take shape on top of it. Nothing gates the paint now, and
   `font-display: swap` on a preloaded, self-hosted face handles the flash the
   gate was there to hide. */

@media (prefers-reduced-motion: reduce) {
  .reveal, .is-ready .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* With a menu open, Square drops every label but the one you opened. The bar
   stops competing with the panel under it. */
.nav.is-open .nav-link { color: var(--text-faint); }
.nav.is-open .nav-link.is-open,
.nav.is-open .nav-link:hover { color: var(--text); }

/* ---------------------------------------------------------------- search --

   Same scrim as the mega menu: one way of putting the page out of focus. */
.nav-search-btn {
  appearance: none; background: none; border: 0; cursor: pointer;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: color 0.16s var(--ease-content);
}
.nav-search-btn svg { width: 18px; height: 18px; }
.nav-search-btn:hover { color: var(--text); }
@media (max-width: 899px) {
  .nav-search-btn,
  .nav-right > .sb { display: none; }
}

/* Search is a panel in the drawer, so it inherits the stage's surface, its
   scrim and its motion. What is left here is the field and the results.
   Measured on squareup.com: clicking the magnifier drops a sheet out of the
   header, edge to edge, with a borderless input at display size and the nav
   still sitting above it, clickable. */
.srch-inner {
  padding-top: 18px;
  padding-bottom: 18px;
}

.srch-field {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mm-line, var(--line));
}
.srch-field > svg { width: 18px; height: 18px; flex: none; color: var(--text-faint); }
.srch-field input {
  flex: 1; appearance: none; background: none; border: 0; outline: 0;
  font: inherit; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2;
  letter-spacing: -0.02em; color: var(--text);
}
.srch-field input:focus-visible { outline: none; box-shadow: none; }
.srch-field:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}
.srch-field:focus-within > svg { color: var(--text); }
.srch-field input::placeholder { color: var(--text-faint); }
.srch-field input::-webkit-search-cancel-button { display: none; }
.srch-close {
  appearance: none; background: none; border: 0; cursor: pointer;
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-faint); transition: color 0.16s var(--ease-content);
}
.srch-close svg { width: 18px; height: 18px; }
.srch-close:hover { color: var(--text); }

/* Capped rather than free: a drawer that grows to twenty results pushes the
   whole page down and stops reading as a sheet under the bar. */
.srch-results { max-height: min(52vh, 460px); overflow-y: auto; margin-top: 12px; }
.srch-hit {
  display: block; padding: 12px 18px; margin: 0;
  border-radius: var(--r-control);
}
.srch-hit:hover, .srch-hit.is-sel { background: var(--bg-card); }
.srch-hit-k { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.srch-hit-t { display: block; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--text); margin-top: 2px; }
.srch-hit-d { display: block; font-size: 13px; line-height: 19px; color: var(--text-muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srch-hit mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; }
.srch-empty { padding: 18px 0 4px; color: var(--text-muted); font-size: 14px; }
.srch-empty b { display: block; color: var(--text); font-weight: 500; margin-bottom: 8px; }

/* the magnifier reads as open the way a menu trigger does */
.nav-search-btn[aria-expanded="true"] { color: var(--text); }

.nm-search { margin-bottom: 8px; padding: 4px 0 16px; border-bottom: 1px solid var(--line); }
.nm-search-screen .nm-search { margin: 0; padding: 18px 0 0; border-bottom: 0; }
.nm-search-field { padding: 8px 0 12px; }
.nm-search-results { max-height: none; }
.nav-mobile .nm-search-results .srch-hit {
  padding: 12px;
  border-bottom: 0;
  letter-spacing: 0;
}

/* ------------------------------------------------------- horizontal rail --

   Replaces the donor's pinned vertical stack, where reading three features
   meant scrolling three screens of the same block re-stacking itself. A set of
   things reads better as a set: side by side, with arrows, the way Square
   shows a product family. */
.bx-rail { position: relative; }
.bx-rail .bx-rail-track {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; scrollbar-width: none;
  /* the runway kept its width for a stack that no longer exists */
  max-width: none;
  /* Without this the browser snaps to the first card's own start on load,
     which is one gutter in — so the rail opened with its first card already
     clipped against the left edge. The snap port has to start where the
     content does. */
  scroll-padding-inline: var(--gutter);
}
.bx-rail .bx-rail-track::-webkit-scrollbar { display: none; }

.bx-rail-nav { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 20px; }
.bx-rail-btn {
  appearance: none; width: 40px; height: 40px; border-radius: var(--r-pill); cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.16s var(--ease-content), opacity 0.16s var(--ease-content);
}
.bx-rail-btn svg { width: 18px; height: 18px; }
.bx-rail-btn:hover { background: var(--bg-card); }
.bx-rail-btn[disabled] { opacity: 0.3; cursor: default; }
@media (max-width: 720px) { .bx-rail-nav { display: none; } }


/* A page whose single job is one form should not offer twenty ways to leave
   it. Square's contact-sales keeps the mark and nothing else; the one link
   that earns its place is the door out for people who are already customers
   and have landed on the sales form by mistake. */
.nav-focus { position: static; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav-focus .nav-inner { justify-content: space-between; }

/* The external-link arrow inside a menu label (2026-09-14). It is emitted with
   no space before it (`${label}${ARROW}`) and the global svg reset makes it
   display:block, so in an inline label it was relying on the 1.5 units of empty
   space inside its own viewBox to look separated. That is not a gap, it is an
   accident of the path. Give it a real one and an inline box, scoped to the
   menu so buttons, which lay their arrow out with flex, are untouched. */
.mm-link-t .arrow { margin-left: 5px; }
/* Only the margin. `display: inline-block` and `vertical-align` were in this
   rule first and NEITHER WON against the global svg reset, which sets block.
   Measured after: the arrow still sits on one line and its centre lands at 12px
   in a 23px line box, so block is doing the right thing here and a declaration
   that loses is worse than no declaration. */
}

@layer pages {
/* ==========================================================================
   Pages — the three templates build.mjs generates whole: the article, the
   legal document and the careers list. Nothing here is reused elsewhere.
   ========================================================================== */

/* ======================================================================
   Guides index
   ====================================================================== */

.olive-case-hero {
  padding-block: var(--section-display);
  color: #fff;
  background:
    radial-gradient(circle at 82% 32%, rgba(38, 72, 239, .28), transparent 30%),
    #090909;
}
.olive-case-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: clamp(44px, 8vw, 120px);
  align-items: end;
}
.olive-case-hero h1 {
  max-width: 960px;
  margin: 0;
  font-size: clamp(58px, 7.2vw, 104px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.052em;
}
.olive-case-hero__grid > p {
  max-width: 430px;
  margin: 0 0 8px;
  color: #b9b9b9;
  font-size: 19px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .olive-case-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .olive-case-hero h1 { font-size: 52px; }
  .olive-case-hero__grid > p { font-size: 17px; }
}

.olive-case-page { overflow: clip; }
.olive-case-metrics__grid,
.olive-case-operations__grid,
.olive-case-next__grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.olive-case-metrics__grid { grid-template-columns: repeat(3, 1fr); }
.olive-case-metrics article {
  display: grid;
  min-height: 180px;
  align-content: space-between;
  padding: clamp(24px, 3vw, 40px);
  background: var(--bg);
}
.olive-case-metrics strong {
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  letter-spacing: -.04em;
}
.olive-case-metrics span { max-width: 220px; color: var(--text-muted); }

.olive-case-story__grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 760px);
  justify-content: space-between;
  gap: clamp(56px, 9vw, 140px);
}
.olive-case-facts dl {
  position: sticky;
  top: 104px;
  margin: 0;
  border-top: 1px solid var(--line);
}
.olive-case-facts dl > div {
  display: grid;
  gap: 8px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
.olive-case-facts dt,
.olive-case-next span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.olive-case-facts dd { margin: 0; line-height: 1.45; }
.olive-case-copy h2 {
  margin: 64px 0 18px;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 400;
  letter-spacing: -.035em;
}
.olive-case-copy h2:first-child { margin-top: 0; }
.olive-case-copy > p {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.65;
}
.olive-case-image { margin: 56px 0; }
.olive-case-image img,
.olive-case-operations img {
  width: 100%;
  border-radius: var(--r-block);
  object-fit: cover;
}
.olive-case-image img { aspect-ratio: 16 / 9; }

.olive-case-operations { background: var(--bg-card); }
.olive-case-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  gap: 48px;
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.olive-case-section-head h2,
.olive-case-proof h2,
.olive-case-model h2,
.olive-case-next h2,
.olive-case-close h2 {
  margin: 0;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}
.olive-case-section-head p { margin: 0; color: var(--text-muted); line-height: 1.55; }
.olive-case-operations__grid { grid-template-columns: repeat(3, 1fr); }
.olive-case-operations article { padding: 20px; background: var(--bg-card); }
.olive-case-operations img { aspect-ratio: 4 / 3; }
.olive-case-operations h3 { margin: 24px 0 10px; font-size: 24px; font-weight: 400; }
.olive-case-operations p { margin: 0; color: var(--text-muted); line-height: 1.55; }

.olive-case-proof { color: #fff; background: #0b0d0f; }
.olive-case-proof__grid,
.olive-case-model__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  gap: clamp(56px, 9vw, 140px);
  align-items: start;
}
.olive-case-proof h2 { max-width: 760px; }
.olive-case-proof__grid > div > p { max-width: 620px; margin: 28px 0 0; color: #b9bcb7; font-size: 18px; line-height: 1.6; }
.olive-case-proof blockquote { margin: 0; padding-top: 16px; border-top: 1px solid #3a3d3a; }
.olive-case-proof blockquote p { margin: 0 0 32px; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; letter-spacing: -.03em; }
.olive-case-proof blockquote footer { color: #9da19c; }

.olive-case-model__grid > div > p { max-width: 500px; color: var(--text-muted); line-height: 1.6; }
.olive-case-model ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.olive-case-model li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
}
.olive-case-model li span { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.olive-case-model li p { margin: 0; line-height: 1.55; }

.olive-case-next h2 { margin-bottom: 48px; }
.olive-case-next__grid { grid-template-columns: repeat(2, 1fr); }
.olive-case-next a {
  display: grid;
  min-height: 190px;
  align-content: space-between;
  padding: clamp(24px, 3vw, 40px);
  background: var(--bg);
}
.olive-case-next strong { max-width: 440px; font-size: 22px; font-weight: 400; line-height: 1.25; }
.olive-case-next a:hover strong { text-decoration: underline; text-underline-offset: 4px; }

.olive-case-close { text-align: center; background: var(--bg-card); }
.olive-case-close h2 { max-width: 850px; margin-inline: auto; }
.olive-case-close p { margin: 24px auto 32px; color: var(--text-muted); }

@media (max-width: 760px) {
  .olive-case-metrics__grid,
  .olive-case-operations__grid,
  .olive-case-next__grid,
  .olive-case-story__grid,
  .olive-case-section-head,
  .olive-case-proof__grid,
  .olive-case-model__grid {
    grid-template-columns: 1fr;
  }
  .olive-case-metrics article { min-height: 140px; }
  .olive-case-facts dl { position: static; }
  .olive-case-section-head,
  .olive-case-proof__grid,
  .olive-case-model__grid { gap: 36px; }
}
@media (min-width: 761px) and (max-width: 920px) {
  .olive-case-operations__grid { grid-template-columns: repeat(2, 1fr); }
}

.guides-hero {
  padding-block: var(--section-display);
  background: #f3f0e9;
  color: #111;
}
.guides-eyebrow {
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.guides-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(260px, .7fr);
  gap: clamp(48px, 8vw, 128px);
  align-items: end;
}
.guides-hero h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(58px, 7.5vw, 116px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.058em;
}
.guides-hero__grid > p {
  max-width: 440px;
  margin: 0 0 8px;
  color: #53534f;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.45;
}
.guides-library { padding-block: var(--section-roomy); }
.guides-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
}
.guides-section-head h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.048em;
}
.guides-section-head > p {
  max-width: 420px;
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.5;
}
.guides-index { display: grid; gap: 24px; }
.guides-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  min-height: 510px;
  overflow: hidden;
  border-radius: var(--r-block);
  background: #101a36;
  color: #fff;
}
.guides-featured__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(32px, 5vw, 72px);
}
.guides-card__kind {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.guides-featured__title {
  max-width: 680px;
  margin-top: 40px;
  font-size: clamp(42px, 4.5vw, 68px);
  line-height: .98;
  letter-spacing: -.048em;
}
.guides-featured__deck {
  max-width: 610px;
  margin-top: 24px;
  color: #d6dded;
  font-size: 19px;
  line-height: 1.45;
}
.guides-card__audience {
  margin-top: 18px;
  color: #aeb9d2;
  font-size: 14px;
  line-height: 1.4;
}
.guides-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.guides-card__meta i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.guides-card__action {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 40px;
  font-weight: 500;
}
.guides-card__action svg,
.guides-card__arrow svg { width: 12px; height: 12px; }
.guides-featured__visual {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background: #182140;
}
.guides-featured__visual img { width: 100%; height: 100%; object-fit: cover; }
.guides-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.guides-card {
  display: flex;
  min-height: 340px;
  flex-direction: column;
  padding: clamp(28px, 3.3vw, 48px);
  border: 1px solid #d9d9d5;
  border-radius: var(--r-block);
  color: #111;
  background: #fff;
}
.guides-card__title {
  max-width: 520px;
  margin-top: 52px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.03;
  letter-spacing: -.04em;
}
.guides-card__deck {
  margin-top: 18px;
  color: #555650;
  font-size: 17px;
  line-height: 1.45;
}
.guides-card .guides-card__audience { color: #6a6d68; }
.guides-card__footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-top: auto;
  padding-top: 36px;
}
.guides-card__footer .guides-card__meta { margin: 0; color: #6a6d68; }
.guides-card__arrow {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border: 1px solid #bbbdb8;
  border-radius: 50%;
}
.guides-reference {
  padding-block: var(--section-roomy);
  background: #111;
  color: #fff;
}
.guides-section-head--reference > p { color: #aaa; }
.guides-terms { border-top: 1px solid #3d3d3d; }
.guides-term-group {
  display: grid;
  grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr);
  gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid #3d3d3d;
}
.guides-term-group h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.02em;
}
.guides-term-group dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin: 0;
}
.guides-term-group dt {
  margin-bottom: 10px;
  font-weight: 500;
}
.guides-term-group dd {
  margin: 0;
  color: #aaa;
  font-size: 15px;
  line-height: 1.55;
}
@media (max-width: 820px) {
  .guides-hero__grid,
  .guides-section-head,
  .guides-featured,
  .guides-term-group { grid-template-columns: 1fr; }
  .guides-hero__grid { gap: 32px; }
  .guides-hero h1 { font-size: clamp(52px, 15vw, 78px); }
  .guides-section-head { gap: 24px; }
  .guides-featured__visual { min-height: 300px; }
  .guides-grid { grid-template-columns: 1fr; }
  .guides-term-group { gap: 26px; }
}
@media (max-width: 560px) {
  .guides-hero h1 { font-size: 50px; }
  .guides-featured { min-height: 0; }
  .guides-featured__title { margin-top: 32px; font-size: 40px; }
  .guides-featured__visual { min-height: 240px; }
  .guides-card { min-height: 310px; }
  .guides-card__title { margin-top: 38px; font-size: 32px; }
  .guides-term-group dl { grid-template-columns: 1fr; gap: 28px; }
}

/* ======================================================================
   Article index
   ====================================================================== */

.article-index__hero { padding-top: var(--section-roomy); }
.article-index__hero h1 { max-width: 15ch; margin-top: 0; }
.article-index__hero .lede { margin-top: var(--s-6); }
.article-index__featured { padding-top: var(--section-compact); }
.article-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  min-height: 520px;
  color: var(--text);
  background: var(--bg-card);
}
.article-feature img { width: 100%; height: 100%; object-fit: cover; }
.article-feature__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 5vw, 72px);
}
.article-feature__copy strong {
  max-width: 16ch;
  margin: auto 0 24px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.article-feature__action { display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; }
.article-index__archive { padding-block: var(--section-roomy) 32px; }
.article-index__archive-head {
  margin-bottom: var(--s-10);
}
.article-index__archive-head .h-lg { margin-top: var(--s-3); }

@media (max-width: 800px) {
  .article-index__hero { padding-top: 56px; }
  .article-index__featured { padding-top: 56px; }
  .article-feature { grid-template-columns: 1fr; min-height: 0; }
  .article-feature img { aspect-ratio: 4 / 3; }
  .article-feature__copy { min-height: 360px; }
  .article-index__archive { padding-block: 72px 24px; }
}

/* ======================================================================
   Article
   ====================================================================== */

.article { max-width: 880px; margin: 0 auto; padding: 64px 0 0; }
.article-cat { margin: 0 0 12px; }
.article h1 { margin: 0; font-size: clamp(36px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.04em; font-weight: 400; }
.article-byline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 0; font-size: 14px; color: var(--text-muted); }
.article-byline .dot { width: 4px; height: 4px; background: currentColor; flex: none; }
.article-rule { margin: 20px 0 48px; }

.article-hero { width: 100%; aspect-ratio: 16 / 9; background: var(--bg-card); overflow: hidden; margin: 0 0 48px; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }

.guide-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  color: var(--text-muted);
  font-size: 14px;
}
.guide-back svg { width: 16px; height: 16px; flex: none; }
.guide-back:hover { color: var(--text); }
.guide-hero img { filter: saturate(0.82); }

.guide-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 1px;
  margin-top: 72px;
  padding-top: 1px;
  background: var(--line);
}
.guide-pagination > * { background: var(--bg); }
.guide-pagination__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
  padding: 24px;
}
.guide-pagination__link span,
.guide-pagination__all { color: var(--text-muted); font-size: 13px; }
.guide-pagination__link strong { max-width: 28ch; font-size: 16px; line-height: 1.35; font-weight: 400; }
.guide-pagination__link.is-next { align-items: flex-end; text-align: right; }
.guide-pagination__all {
  display: grid;
  min-width: 112px;
  padding: 24px 16px;
  place-items: center;
}
.guide-pagination__link:hover strong,
.guide-pagination__all:hover { color: var(--accent-ink); }

@media (max-width: 680px) {
  .article { padding-top: 48px; }
  .guide-back { margin-bottom: 24px; }
  .guide-pagination { grid-template-columns: 1fr 1fr; }
  .guide-pagination > span { display: none; }
  .guide-pagination__all { grid-column: 1 / -1; grid-row: 2; min-height: 56px; }
  .guide-pagination__link { min-height: 112px; padding: 18px; }
}

/* prose ---------------------------------------------------------------- */
.prose { font-size: 17px; line-height: 28px; color: var(--text); }
.prose > * { margin: 0 0 24px; }
.prose > *:last-child { margin-bottom: 0; }
.prose h2 {
  margin: 56px 0 24px;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 400;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.prose h4 { margin: 40px 0 16px; font-size: 20px; line-height: 28px; letter-spacing: -0.02em; font-weight: 500; }
.prose em { color: var(--text-muted); }
/* An inline link was `color: inherit` like every other link on the site, so in
   a body of text it was distinguished by its underline alone. This is the one
   job the accent exists for, and --accent-ink is the AAA half of it: 8.24:1 on
   the page, 7.74 on a card, against 6.01 for the brand value. The underline
   STAYS, so colour is never the only signal and 1.4.1 holds for anyone who
   cannot separate the hue.
   The hover was `opacity: 0.65`, which is fine on near-black text and a real
   regression on a coloured one: it took this link to 3.62:1, under AA. Every
   darker blue in the scale is LIGHTER than ink, so there is no colour hover
   that gains contrast. The hover is the underline thickening instead, which
   costs no contrast and no layout. */
.prose a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 0.18s var(--ease);
}
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 10px; }
.prose img { width: 100%; height: auto; background: var(--bg-card); }
.prose figure { margin: 40px 0; }
.prose figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.prose blockquote { margin: 40px 0; padding-left: 20px; border-left: 1px solid var(--line); color: var(--text-muted); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-card); padding: 2px 5px; }
.prose pre { background: var(--bg-card); padding: 20px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { color: var(--text-muted); font-weight: 400; }

/* table of contents ----------------------------------------------------- */
.toc {
  position: fixed;
  top: 50%;
  left: 24px;
  z-index: 30;
  transform: translateY(-50%);
  display: none;
}
@media (min-width: 1180px) { .toc { display: block; } }
/* it lives alongside the prose only — never over the footer CTA */
.toc[hidden] { display: none !important; }
.toc { transition: opacity 0.3s var(--ease-soft); }
.toc.away { opacity: 0; pointer-events: none; }

.toc-toggle { display: flex; flex-direction: column; gap: 5px; padding: 10px 4px; }
.toc-toggle span { display: block; width: 22px; height: 1px; background: var(--text-muted); transition: width 0.3s var(--ease-soft), background-color 0.3s var(--ease-soft); }
.toc-toggle:hover span { background: var(--text); }
.toc-toggle span:nth-child(2) { width: 16px; }
.toc.open .toc-toggle span:nth-child(2) { width: 22px; }

.toc-panel {
  position: absolute;
  left: 30px;
  top: 50%;
  width: 318px;
  transform: translate(-8px, -50%);
  background: var(--bg-card);
  border: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease-soft), transform 0.28s var(--ease-soft), visibility 0.28s;
}
.toc.open .toc-panel { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.toc-panel > p { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.toc-panel a {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.toc-panel a:last-child { border-bottom: 0; }
.toc-panel a:hover { color: var(--text); background: var(--bg-card-hover); }
.toc-panel a.current { color: var(--text); background: var(--bg-card-hover); }

/* mobile ToC, inline above the body */
.toc-inline { border: 1px solid var(--line); margin-bottom: 40px; }
@media (min-width: 1180px) { .toc-inline { display: none; } }
.toc-inline summary { padding: 14px 16px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline a { display: flex; gap: 10px; padding: 12px 16px; font-size: 15px; color: var(--text-muted); border-top: 1px solid var(--line); }

/* reading progress ------------------------------------------------------ */
.progress { position: fixed; top: 0; left: 0; z-index: 60; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--text); opacity: 0.5; }

/* more articles --------------------------------------------------------- */
.more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-top: 120px; }

/* ======================================================================
   Legal / long-form document pages
   ====================================================================== */

.legal-doc { color: #111; background: #fff; }
.legal-doc__hero { padding-block: var(--section-standard); border-bottom: 1px solid #d8d8d8; }
.legal-doc__hero h1 {
  max-width: 980px;
  margin: 14px 0 20px;
  font-size: clamp(58px, 7vw, 104px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.05em;
  -webkit-text-stroke: .5px currentColor;
  paint-order: stroke fill;
}
.legal-doc__eyebrow { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.legal-doc__hero p:last-child { margin: 0; color: #616161; }
.legal-doc__article { padding-block: var(--section-roomy); }
.doc { max-width: 820px; margin: 0; padding: 0; }
.legal-doc .doc .prose,
.legal-doc .doc .prose h2 { color: #111; }
.legal-doc .doc .prose em { color: #5d5d5d; }
.legal-doc .doc .prose a { color: #174ea6; }
.doc .prose h2 { scroll-margin-top: calc(var(--nav-h) + 24px); margin: 64px 0 16px; font-size: clamp(27px, 3vw, 38px); line-height: 1.08; }
.doc .prose h2:first-of-type { margin-top: 0; }
.doc .prose blockquote, .doc .prose table th, .doc .prose table td { border-color: var(--line); }
.doc .prose p,
.doc .prose li { font-size: 17px; line-height: 1.65; }
.legal-doc .doc .prose .doc-review { max-width: 720px; margin: 0 0 52px; padding: 22px 24px; border: 0; border-radius: 5px; color: #282828; background: #f2f1ed; font-size: 16px; line-height: 1.55; }
.legal-doc .doc .prose .doc-review strong { color: #111; }
.legal-doc .doc .prose .doc-review a { color: #174ea6; }
.doc-updated { margin: 0; }
@media (max-width: 767px) {
  .legal-doc__hero h1 { font-size: 52px; }
  .legal-doc .doc .prose .doc-review { padding: 18px; }
  .doc .prose h2 { margin-top: 48px; }
}

/* careers --------------------------------------------------------------- */
.page-careers main {
  --text: #0b0d0f;
  --text-muted: #626560;
  --text-faint: #6a6d68;
  --line: #dcddd8;
  --line-strong: #c9cac4;
  --accent: #2648ef;
  --accent-ink: #1e39bd;
  color: var(--text);
  background: #f7f7f4;
}
.career-hero {
  padding-block: var(--section-roomy);
  color: #0b0d0f;
  background: #eef1ff;
}
.career-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: center;
}
.career-hero h1 { max-width: 760px; margin-top: 24px; }
.career-hero .lede { max-width: 640px; margin-top: 28px; }
.career-hero figure {
  height: 520px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-block);
}
.career-hero img { width: 100%; height: 100%; object-fit: cover; }
.career-work,
.career-principles { padding-block: var(--section-roomy); }
.career-work { background: #fff; }
.career-section-head { max-width: 900px; margin-bottom: 56px; }
.career-section-head h2 { margin-top: 18px; }
.career-section-head .lede { margin-top: 24px; }
.career-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.career-card-grid article {
  min-height: 300px;
  padding: 30px;
  border: var(--control-stroke) solid var(--line);
  border-radius: var(--r-block);
  background: var(--ground-sunk);
}
.career-card-grid span { color: var(--accent-ink); font-family: var(--font-mono); font-size: 12px; }
.career-card-grid h3 { margin: 92px 0 12px; font-size: 24px; }
.career-card-grid p,
.career-principle-list p { margin: 0; color: var(--text-muted); line-height: 1.55; }
.page-careers main > .shell.section-pad,
.page-careers main > .shell.section-pad-sm { padding-bottom: var(--section-roomy); }
.roles { border-top: 1px solid var(--line); margin-top: 40px; }
.role {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) { .role { grid-template-columns: 1.6fr 1fr 1fr; gap: 24px; align-items: center; } }
.role p { margin: 0; }
.career-principles { background: #0b0d0f; color: #f4f4f2; }
.career-principles-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
  gap: clamp(52px, 8vw, 120px);
}
.career-principles h2 { max-width: 650px; margin-top: 20px; }
.career-principle-list article { padding: 26px 0; border-top: 1px solid #34383b; }
.career-principle-list article:last-child { border-bottom: 1px solid #34383b; }
.career-principle-list h3 { margin: 0 0 10px; font-size: 22px; }
.career-principle-list p { color: #b8bab6; }
@media (max-width: 760px) {
  .career-hero-grid,
  .career-principles-grid { grid-template-columns: 1fr; }
  .career-hero h1 { font-size: 46px; }
  .career-hero figure { height: 380px; }
  .career-card-grid { grid-template-columns: 1fr; }
  .career-card-grid article { min-height: 240px; }
  .career-card-grid h3 { margin-top: 60px; }
}

@media (max-width: 600px) {
  .article h1 { font-size: 30px; }
}

/* Keep the home page's chrome and content on the same wide measure. */
.page-home { --maxw: calc(var(--content-wide) + (2 * var(--gutter))); }

/* ------------------------------------------------------------- pricing -- */

/* Square's /pricing, recreated. One dark photograph full-bleed from the top of
   the document, the header floating on it, white type straight on the picture,
   the three cards riding up onto it, and the picture dissolving into the page
   ground behind the last band. Measured off the reference at 1920: content
   1352 wide, cards 529 with a 31px gutter, headline about 140px over two
   lines, the cards starting roughly 600px down.

   The page is .theme-light and the top of this band is not, so every value
   that lands ON the picture is written here rather than taken from the
   palette: --pr-on-media and its muted step are the only two colours the hero
   copy uses, and they exist so the same markup could be re-grounded by
   changing two lines rather than twenty.

   It reuses .hero, not because it looks like the homepage hero but because
   app.js pins the overlay header off `main > .hero` and 04-chrome pulls that
   element up under the bar. Everything .hero asserts about its own height is
   overridden below — the band is as tall as the cards, never 100svh. */

.pr-hero {
  --pr-on-media: #ffffff;
  --pr-on-media-dim: rgba(255, 255, 255, 0.76);
  min-height: 0;
  padding-top: calc(var(--nav-h) + clamp(40px, 5.6vw, 84px));
  padding-bottom: 0;
  align-items: stretch;
  isolation: isolate;
}
.pr-hero-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
}
/* NOT a flat scrim. The note this page used to carry said every attempt at
   full-bleed type painted instead of the photograph, and a single rgba wash is
   exactly how that happens: it is densest where the picture is most
   interesting and it leaves a hard edge wherever it stops. Four stops instead
   — dense only across the headline, thinning through the middle where nothing
   but the cards sits, and landing ON var(--bg) so the band has no bottom edge
   at all and the page ground simply continues. */
.pr-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(8, 7, 6, 0.78) 0%,
    rgba(8, 7, 6, 0.68) 26%,
    rgba(8, 7, 6, 0.48) 52%,
    color-mix(in srgb, var(--bg) 72%, transparent) 80%,
    var(--bg) 96%);
}
.pr-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: 0 var(--gutter);
}

/* Suisse Intl, like every other page title. The reference sets its headline in
   a serif and this carried one for a day — a self-hosted Newsreader behind a
   --font-display token — which John dropped: one page in a face no other page
   uses reads as an exception, not a decision. The face, the token, the
   @font-face and the preload went with it.

   So the only thing this shares with .h-hero now is a bigger size and the
   centring. Tracking is -0.048em because that is what the sans headings take
   at display sizes; the serif wanted near zero and would look wrong here.

   TEXT-ALIGN, not just auto margins. `margin: 0 auto` on a max-width block
   centres the BOX and leaves the lines ragged-right inside it, which is why a
   wrapped line sits hard left under the first while the block looks centred.
   Both are needed, and both still matter at the phone sizes where this wraps.

   NO MEASURE CAP. It was 17ch, which held the headline to two lines by
   construction — and the headline is one line now (John, 2026-09-15: "it
   should occupy one line not two", then the tail cut). 31 characters at 76px
   set about 980 wide against the 1072 the content column leaves at the widest
   gutter, so the cap has nothing left to do except break a line that fits.

   The reference sets this at about 140px at 1920. It is 76 here (John,
   2026-09-15: "why is it too big"), and the sans sets wider than the serif did
   at the same size, so it comes down another step from the 84 the serif ran
   at. */
.pr-h1 {
  margin: 0 auto;
  max-width: none;
  font-size: clamp(36px, 5vw, 76px);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -0.048em;
  text-align: center;
  color: var(--pr-on-media);
  text-wrap: balance;
}
.pr-lede {
  margin: 12px auto 0;
  max-width: 54ch;
  text-align: center;
  font-size: 16px; line-height: 25px;
  color: var(--pr-on-media-dim);
}

/* ---- the three cards ----------------------------------------------------
   Square's card is a white sheet on the picture with no border: the frame is
   made by the card being lighter than everything around it. --surface-raised
   exists for exactly this and says so in 01-tokens. The hairline the plancol
   in the enterprise sheet carries is NOT wanted here — on a photograph it
   reads as a cut line rather than an edge. */
.pcards {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  margin-top: clamp(40px, 5vw, 72px);
}
@media (min-width: 1000px) { .pcards { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.pcard {
  display: flex; flex-direction: column;
  padding: 24px;
  background: var(--surface-raised);
  border-radius: var(--r-block);
  box-shadow: 0 24px 60px rgba(8, 7, 6, 0.18), 0 2px 6px rgba(8, 7, 6, 0.06);
}
/* Tighter than the reference, which runs about 47px at 1920 (John,
   2026-09-15). The vertical is the half that was loose: the card already
   separates from the photograph by being white, so it does not also need a
   frame of empty white to do it. */
@media (min-width: 1000px) { .pcard { padding: 30px 28px; } }

.pcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pcard-name {
  margin: 0; font-size: 26px; line-height: 32px;
  font-weight: 400; letter-spacing: -0.03em;
}
/* the "Best value" flag, ink-filled as the reference has it */
.pcard-flag {
  flex: none; margin-top: 4px;
  padding: 4px 10px; border-radius: var(--r-control);
  background: var(--bg-invert); color: var(--text-invert);
  font-size: 12px; line-height: 16px; letter-spacing: -0.01em;
}
/* 2px, and it is not a typo. The name sits in a 32px line box on a 26px face
   and this sits in a 22px box on a 15px one, so there is already about 6px of
   half-leading between the two boxes before any margin is added. At 10px the
   pair measured 16px apart optically and read as two things rather than a name
   and its descriptor. */
.pcard-desc {
  margin: 2px 0 0; max-width: 34ch;
  font-size: 15px; line-height: 22px; color: var(--text-muted);
}

/* The price, and the one place the weight problem shows. The site loads a
   single static 400, so `font-weight: 700` here would render at 400 and the
   figure would carry no more emphasis than the sentence above it. The stroke
   is .h-hero's own device, doing the same job a heavier cut would. */
.pcard-price {
  margin: 26px 0 0;
  font-size: 42px; line-height: 48px; letter-spacing: -0.04em;
  -webkit-text-stroke: 0.6px currentColor;
  paint-order: stroke fill;
}
.pcard-price small {
  font-size: 42px; letter-spacing: -0.04em; margin-left: 0; color: inherit;
}
.pcard-per { margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--text-muted); }

/* full width, and above the list: Square's order, and it stops five bullets
   standing between deciding and acting */
.pcard-cta {
  margin-top: 22px;
  justify-content: center;
  height: var(--control-h);
}
/* THE ONE BLUE BUTTON ON THE SITE (John, 2026-09-15: "isn't our primary button
   meant to be blue"). 01-tokens.css argues at length that the accent is not on
   .btn-primary, and gives the reason: "Only Stripe and Railway colour the
   primary, and both are self-serve signups where that one button is the whole
   funnel. Box is institution-led and converts through Talk to us."

   That was true when /pricing sold a licence. It is not true of this page any
   more: it carries three plans, a $20 and a $60, and a button that goes
   straight to the console. This IS the Stripe case, so the exception the rule
   already names applies here rather than being invented for it.

   Scoped to the plan card, deliberately. The enterprise band's button on the
   same screen stays ink: it opens a page, it is the Talk-to-us shape, and it is
   not the funnel. Ramp does exactly this split. White on the accent measures
   6.45:1, and 7.76:1 on the hover. */
.pcard-cta.btn-primary { background: var(--accent); color: var(--accent-text); }
.pcard-cta.btn-primary:hover { background: var(--accent-hover); }

/* the quiet card's button is an outline, not a fill — two filled buttons in a
   row of three and the row has no recommendation in it */
.pcard-cta:not(.btn-primary) {
  background: none;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow 0.3s var(--ease-stripe), background-color 0.3s var(--ease-stripe);
}
.pcard-cta:not(.btn-primary):hover { background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--text-muted); }

.pcard-label {
  margin: 26px 0 0;
  font-size: 15px; line-height: 22px;
  -webkit-text-stroke: 0.4px currentColor;
  paint-order: stroke fill;
}

/* Square's "Processing fees" pair lived here, filled with credits and the
   domain because Box has no rate to put in it — the site's promise is that it
   never takes a share of a merchant's sales. It is GONE (John, 2026-09-15:
   "why do we have usage there"), and the honest answer is that it was the
   reference's slot carrying facts this page already states twice: every row in
   it was repeated in the chips directly below, and "$18 a year" again in
   "One credit is one dollar". A table that restates the list under it is not a
   second reason to buy. */

.pcard-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* The carry-forward row is a chip like every other row. The reference leaves
   its equivalent outside the tinted boxes, and that was the shape here first —
   it makes a ragged left edge halfway down the column, with one row's text
   starting 14px further in than the four under it. Same frame, tick in the
   icon slot. */
.pc-carry b { font-weight: 400; -webkit-text-stroke: 0.4px currentColor; paint-order: stroke fill; }
.pc-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  background: var(--bg-card); border-radius: var(--r-block);
  font-size: 14px; line-height: 20px;
}
.pc-ic { width: 16px; height: 16px; flex: none; color: var(--text-muted); }

/* ---- the wide band: Square Pro's slot ------------------------------------
   Still on the picture, where the veil has already given most of the page
   ground back, so it reads as the last thing in the band rather than the first
   thing after it. */
.pr-pro {
  display: grid; gap: 28px;
  margin-top: 24px; padding: 24px;
  background: var(--surface-raised);
  border-radius: var(--r-block);
  box-shadow: 0 24px 60px rgba(8, 7, 6, 0.1), 0 2px 6px rgba(8, 7, 6, 0.05);
}
@media (min-width: 1000px) {
  /* the same padding as a plan card: the band sits 24px under the row and a
     12px deeper inset on the adjacent element reads as a mistake, not as a
     different kind of panel */
  /* CENTRE, not start (John, 2026-09-15: "fix this alignment"). `start` made
     the sentence's first line level with the eyebrow's, which sounds like
     alignment and is not: the left column then runs on for a 40px heading and a
     44px button, so the right column finished 150px up the panel with white
     under it and the button facing nothing across the gap.

     Centring is the fix rather than a nudge, because the two columns hold
     different KINDS of thing: a claim with its action, and the sentence that
     qualifies it. There is no shared baseline to find between an eyebrow, a
     display heading and body copy, so aligning their optical centres is the
     only alignment that stays true when the sentence wraps to two lines or to
     four. It is also why this was never the eyebrow's fault. */
  .pr-pro { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; padding: 30px 28px; align-items: center; }
}
.pr-pro-label { margin: 0; font-size: 15px; line-height: 22px; color: var(--text-muted); }
.pr-pro-h {
  margin: 10px 0 0; max-width: 14ch;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.08;
  font-weight: 400; letter-spacing: -0.04em;
  -webkit-text-stroke: 0.5px currentColor;
  paint-order: stroke fill;
}
.pr-pro-cta { margin-top: 24px; height: var(--control-h); }
/* A measure, not the column width. With the five bullets gone the paragraph is
   the only thing in this column, and at the full 700px it set as two very long
   lines with 200px of empty white under them. --measure-tight runs it at three
   comfortable ones and gives the column something with a shape. */
.pr-pro-copy { margin: 0; max-width: var(--measure-tight); font-size: 15px; line-height: 24px; color: var(--text-muted); }
.pr-pro-link { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
/* .pr-pro-list held five bullets under the paragraph. Gone with them: the band
   is a heading, a sentence and a button now, which is the shape the reference
   gives this slot. */

/* ---- the overlay header on a light page ---------------------------------
   The header has no ground of its own over the photograph, and this page is
   .theme-light, so its ink would be near-black on a dark picture. Rather than
   recolouring the nav's parts one at a time, remap the four SEMANTIC tokens it
   builds from and let every child follow — the same argument the adoption note
   makes for scoping a token instead of writing a skin. Scoped to the unpinned,
   unopened bar on this page alone: once .is-pinned puts the page ground back
   under it, or the menu opens and needs something opaque, the light palette
   returns on its own. */
body.page-pricing .nav:not(.is-pinned):not(.is-open) {
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.72);
  --text-faint: rgba(255, 255, 255, 0.55);
  --bg-invert: #ffffff;
  --text-invert: #0b0d0f;
  --bg-invert-hover: #e4e4df;
  --bg-card: rgba(255, 255, 255, 0.14);
  --bg-card-hover: rgba(255, 255, 255, 0.22);
  --line: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

/* ---------------------------------------------- before and after (deck 8) -- */

/* The deck's comparison slide, in Square's idiom rather than the deck's: no
   red crosses and green ticks, no icons. Two plain lists under one headline,
   the rows aligned so the eye reads ACROSS — every line on the right is the
   same line on the left, after. The alignment is the argument, which is why
   the columns share a row rhythm rather than each flowing on its own.

   Every colour here is derived from currentColor, not from --text. This
   section is APPENDED into a generated page, and a donor page paints its own
   ground: on commerce-banking the surrounding ground is eggshell while the
   body carries .theme-dark, so --text resolves to near-white and the whole
   right column rendered as pale grey on cream. A fragment that can land on
   either ground has to take its colour from the ground it lands on. */
.ba-band { padding-top: var(--s-14); padding-bottom: var(--s-14); }
.ba-h2 {
  margin: 0; max-width: 20ch;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1;
  font-weight: 500; letter-spacing: -0.03em;
  color: inherit;
}
.ba-tail { opacity: 0.45; }
.ba-lede {
  margin: var(--s-5) 0 0; max-width: 58ch;
  font-size: 17px; line-height: 27px;
  color: inherit; opacity: 0.62;
}

.ba-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-8); margin-top: var(--s-10); }
@media (min-width: 900px) { .ba-grid { grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: start; } }

.ba-col {
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  padding-top: var(--s-5);
}
.ba-col-label { margin: 0 0 var(--s-5); font-size: 14px; color: inherit; opacity: 0.5; }
.ba-col--after .ba-col-label { opacity: 1; font-weight: 500; }

.ba-list { margin: 0; padding: 0; list-style: none; }
.ba-list li {
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  font-size: 16px; line-height: 24px;
  color: inherit; opacity: 0.55;
}
.ba-col--after .ba-list li { opacity: 1; }
.ba-list li:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .ba-list li { min-height: 76px; display: flex; align-items: center; }
}

.ba-foot {
  margin: var(--s-8) 0 0; max-width: 68ch;
  font-size: 15px; line-height: 24px;
  color: inherit; opacity: 0.5;
}


/* ------------------------------------------- pricing: three plans, plus one --
   The row was four columns and is three. Enterprise came out of it because a
   fourth card next to three prices reads as the top of a ladder, and it is not
   on the same ladder: the three are priced per merchant, it is priced per
   deployment. The `is-4` modifier that sized the four-up grid is deleted with
   it. If a fourth MERCHANT plan ever exists, bring it back; do not reuse it to
   put the licence in the row again. */
/* .pr-note was the fine print under the plan row, "Prices in US dollars,
   exclusive of tax. Annual plans are billed once for the year." Both halves are
   questions now: the annual one was already duplicated word for word in the
   FAQ, and the currency one followed it there (John, 2026-09-15). The rule is
   gone with the element rather than left to rot. */

/* .pr-ent* lived here: the enterprise band framed like a plancol and laid out
   across. It is gone with the layout — the band is .pr-pro above now, in the
   slot the reference gives Square Pro. */

/* ------------------------------------------- pricing: the enterprise sheet --
   UNREFERENCED SINCE 2026-09-15. John: the band "should just take us to the
   enterprise page", so /pricing's button is now a link to /enterprise.html and
   nothing in src/ renders .emodal any more. initEnterpriseModal in app.js is
   dead with it. Both are left standing rather than deleted because the sheet
   is a whole layout; delete the pair when the decision has settled.
   A dialog, not a page. It scrolls itself so the comparison table's sticky
   header sticks to the sheet rather than to a viewport it cannot see, and the
   body behind it is locked while it is open. */
.emodal { position: fixed; inset: 0; z-index: 200; }
.emodal[hidden] { display: none; }
.emodal-scrim {
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(5px);
  opacity: 0; transition: opacity 0.28s var(--ease);
}
.emodal-sheet {
  position: absolute; inset: 24px;
  max-width: 1120px; margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(0.995);
  transition: opacity 0.3s var(--ease-shell), transform 0.3s var(--ease-shell);
}
.emodal.is-open .emodal-scrim { opacity: 1; }
.emodal.is-open .emodal-sheet { opacity: 1; transform: none; }
@media (max-width: 720px) { .emodal-sheet { inset: 0; border-radius: 0; border: 0; } }

.emodal-bar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.emodal-t { font-size: 22px; font-weight: 400; letter-spacing: -0.02em; margin: 0; }
.emodal-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); }
.emodal-x {
  flex: none; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-control);
  color: var(--text-muted);
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.emodal-x svg { width: 18px; height: 18px; }
.emodal-x:hover { background: var(--bg-card); color: var(--text); }
.emodal-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 28px 28px; }
.em-sec { padding: 36px 0 0; }
.em-sec:first-child { padding-top: 28px; }
.em-close { padding-bottom: 8px; }
/* inside the sheet the plan columns are the institution's three, not four */
.emodal-body .plancols { margin-top: 28px; }

/* The comparison header sticks to --nav-h, which is correct on the page and
   wrong inside the sheet: the sheet is its own scroll container and the bar
   above it is not the site nav. Stick it to the top of that container instead,
   and give it the sheet's own ground so rows cannot show through it. */
.emodal-body .ctab-head { top: 0; background: var(--bg); }
.emodal-body .ctab-scroll { overflow-x: visible; max-width: none; }

/* ------------------------------------------------------- native homepage -- */

.home-section { padding-block: var(--section-standard); }
.home-heading {
  display: grid;
  gap: 20px;
  margin-bottom: 36px;
}
.home-heading h2,
.home-industries__head h2 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(34px, 4.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.home-heading > p:last-child {
  max-width: 56ch;
  margin: 0;
  color: var(--text-muted);
}
.home-heading--light > p:last-child { color: rgba(255, 255, 255, 0.7); }

@media (min-width: 900px) {
  .home-heading {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.45fr);
    align-items: end;
    gap: 48px;
    margin-bottom: 48px;
  }
  .home-heading h2 { grid-column: 1; }
  .home-heading > p:last-child { grid-column: 2; }
}

.home-audiences__grid i,
.home-control__grid i {
  display: inline-block;
  font-style: normal;
  transition: transform 220ms var(--ease-content);
}
.home-audiences__grid a:hover i,
.home-control__grid a:hover i { transform: translateX(4px); }
/* Commerce system */
.home-system {
  overflow: hidden;
  color: #0b0d0f;
  background: #f0f0ec;
}
.home-system .home-heading {
  display: flex;
  max-width: 980px;
  margin-inline: auto;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.home-system .home-heading h2 { max-width: 20ch; }
.home-system .home-heading > p:last-child { max-width: 60ch; }
.home-system__flow {
  display: grid;
  gap: 12px;
}
.home-system__card {
  display: flex;
  min-width: 0;
  min-height: 610px;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-block);
  background: #fff;
  color: #0b0d0f;
}
.home-system__copy {
  display: flex;
  min-height: 350px;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
}
.home-system__step {
  margin: 0;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.home-system__card h3 {
  max-width: 13ch;
  margin: 30px 0 0;
  font-size: clamp(31px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.045em;
}
.home-system__card .home-system__copy > p:not(.home-system__step) {
  max-width: 37ch;
  margin: 22px 0 0;
  color: #5f625e;
}
.home-system__card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.home-system__card li {
  padding: 7px 10px;
  border: 1px solid rgba(11, 13, 15, .18);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
}
.home-system__card a {
  margin-top: auto;
  padding-top: 32px;
  color: inherit;
}
.home-system__card a span {
  display: inline-block;
  transition: transform 220ms var(--ease-content);
}
.home-system__card a:hover span { transform: translateX(4px); }
.home-system__card figure {
  height: 280px;
  flex: none;
  margin: 0;
  padding: 18px 0 0 18px;
  overflow: hidden;
  border-top: 1px solid rgba(11, 13, 15, .12);
  background: #eceee9;
}
.home-system__card img {
  width: 118%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  border-radius: 8px 0 0;
}
.home-system__card--operate { background: #e7ecff; }
.home-system__card--operate figure { background: #d5ddfb; }
.home-system__card--control {
  color: #fff;
  background: #111315;
}
.home-system__card--control .home-system__copy > p:not(.home-system__step) {
  color: rgba(255, 255, 255, .68);
}
.home-system__card--control li { border-color: rgba(255, 255, 255, .22); }
.home-system__card--control figure {
  border-color: rgba(255, 255, 255, .14);
  background: #24282b;
}
@media (min-width: 720px) and (max-width: 1099px) {
  .home-system__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-system__card--control { grid-column: 1 / -1; }
  .home-system__card--control {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }
  .home-system__card--control figure {
    height: 100%;
    min-height: 420px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, .14);
  }
}
@media (min-width: 1100px) {
  .home-system__flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .home-system__card { min-height: 0; }
  .home-system__copy { min-height: 390px; padding: 26px 24px; }
  .home-system__card figure { height: 250px; }
}

/* Institution outcomes */
.home-outcomes__grid {
  display: grid;
  border-top: 1px solid var(--line);
}
.home-outcomes__grid article {
  min-height: 140px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.home-outcomes__grid h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.home-outcomes__grid p {
  max-width: 38ch;
  margin: 24px 0 0;
  color: var(--text-muted);
}
@media (min-width: 720px) {
  .home-outcomes__grid {
    grid-template-columns: repeat(2, 1fr);
    border-left: 1px solid var(--line);
  }
  .home-outcomes__grid article {
    min-height: 180px;
    padding: 32px;
    border-right: 1px solid var(--line);
  }
}
@media (min-width: 1200px) {
  .home-outcomes__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Industry image rail */
.home-industries {
  overflow: hidden;
  color: #0b0d0f;
  background: #f7f7f4;
}
.home-industries__head {
  margin-bottom: 46px;
}
.home-industries__head h2 {
  max-width: 19ch;
  margin: 0;
  font-size: clamp(40px, 5.8vw, 82px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.home-industries__viewport {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}
.home-industries__track {
  display: flex;
  width: max-content;
  animation: home-industries-move 46s linear infinite;
  will-change: transform;
}
.home-industries:hover .home-industries__track,
.home-industries:focus-within .home-industries__track { animation-play-state: paused; }
.home-industries__group {
  display: flex;
  gap: 18px;
  padding-right: 18px;
}
.home-industries__group figure {
  width: clamp(255px, 25vw, 390px);
  height: clamp(340px, 35vw, 520px);
  flex: none;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #deded8;
}
.home-industries__group img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-industries__cards {
  display: grid;
  gap: clamp(34px, 5vw, 76px);
  margin-top: 72px;
}
.home-industries__cards a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 16px;
  color: inherit;
}
.home-industries__cards h3 {
  margin: 0 0 38px;
  padding: 5px 10px;
  color: #064fc4;
  border-radius: 999px;
  background: #d8e6ff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}
.home-industries__cards strong {
  max-width: 16ch;
  font-size: clamp(30px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.04em;
}
.home-industries__cards p {
  max-width: 34ch;
  margin: 28px 0 26px;
  color: #282a28;
  font-size: 18px;
  line-height: 1.5;
}
.home-industries__cards span {
  margin-top: 0;
  border-bottom: 1px solid currentColor;
}
.home-industries__cards i {
  display: inline-block;
  font-style: normal;
  transition: transform 220ms var(--ease-content);
}
.home-industries__cards a:hover i { transform: translateX(4px); }
@keyframes home-industries-move {
  to { transform: translate3d(-50%, 0, 0); }
}
@media (min-width: 760px) {
  .home-industries__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .home-industries__cards { margin-top: 52px; }
  .home-industries__cards a + a { margin-top: 48px; }
}

/* Audience map */
.home-audiences {
  color: #0b0d0f;
  background: #e7ecff;
}
.home-audiences__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  padding: 1px;
  background: rgba(11, 13, 15, 0.16);
}
.home-audiences__grid a {
  grid-column: span 12;
  display: grid;
  grid-template-columns: 1fr auto;
  min-height: 132px;
  padding: 28px;
  background: #e7ecff;
  color: #0b0d0f;
  transition: background 220ms var(--ease-content);
}
.home-audiences__grid a:hover { background: #dce3ff; }
.home-audiences__grid span {
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.home-audiences__grid p {
  grid-column: 1 / -1;
  align-self: end;
  max-width: 34ch;
  margin: 20px 0 0;
  color: #555a67;
}
.home-audiences__grid i {
  font-size: 22px;
  font-style: normal;
}
@media (min-width: 700px) {
  .home-audiences__grid a { grid-column: span 6; min-height: 180px; }
  .home-audiences__grid a:last-child { grid-column: span 12; }
}
@media (min-width: 1100px) {
  .home-audiences__grid a { grid-column: span 4; }
  .home-audiences__grid a:nth-child(n+4) { grid-column: span 6; }
}

/* Architecture and security */
.home-control {
  color: #fff;
  background: #111315;
}
.home-control__grid {
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.home-control__grid a {
  display: grid;
  grid-template-columns: 1fr auto;
  min-height: 152px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
.home-control__grid span {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.home-control__grid p {
  grid-column: 1 / -1;
  align-self: end;
  max-width: 39ch;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.65);
}
.home-control__grid i { font-style: normal; }
@media (min-width: 760px) {
  .home-control__grid {
    grid-template-columns: repeat(2, 1fr);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }
  .home-control__grid a {
    min-height: 220px;
    padding: 32px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }
}

/* Closing paths */
.home-final {
  padding-top: var(--section-display);
  color: #0b0d0f;
  background: #fff;
}
.home-final__head {
  padding-bottom: var(--section-compact);
}
.home-final__head h2 {
  max-width: 1080px;
  margin: 0;
  font-size: clamp(50px, 7.5vw, 118px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.home-final__stage {
  position: relative;
  padding-bottom: var(--section-compact);
}
.home-final__stage > img {
  display: block;
  width: 100%;
  height: clamp(420px, 49vw, 740px);
  object-fit: cover;
  object-position: center 46%;
}
.home-final__cards {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  margin-top: clamp(-150px, -10vw, -96px);
}
.home-final__cards article {
  min-height: 270px;
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  background: #f0f0ec;
  border-radius: var(--r-block);
}
.home-final__card-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}
.home-final__card-head h3 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(28px, 2.6vw, 42px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}
.home-final__card-head p {
  flex: none;
  margin: 3px 0 0;
  color: #5a5d58;
  font-size: 13px;
  line-height: 1.3;
}
.home-final__cards article > p {
  max-width: 46ch;
  margin: 28px 0;
  color: #4f534e;
  font-size: 16px;
  line-height: 1.5;
}
.home-final__cards .btn {
  align-self: flex-start;
  min-height: var(--control-h-large);
  padding-inline: var(--control-pad-large);
  margin-top: auto;
}
.home-final__cards .btn-primary {
  color: #fff;
  background: var(--accent-fill);
}
.home-final__cards .btn-primary:hover { background: var(--accent-fill-hover); }
@media (min-width: 760px) {
  .home-final__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}
@media (max-width: 759px) {
  .home-final__stage > img {
    height: 360px;
    object-position: 58% center;
  }
  .home-final__cards {
    gap: 12px;
    margin-top: -44px;
  }
  .home-final__cards article { min-height: 250px; }
  .home-final__card-head { display: block; }
  .home-final__card-head p { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-industries__track { animation: none; }
}

/* ------------------------------------------------------ developer pages --
   Code before prose. docs.stripe.com puts a terminal and its real response
   beside the task list, above the fold; railway.com puts the product surface
   there. Both answer "what will I actually type" before they argue anything.
   The copy sits left, the terminal right, and on a narrow screen the terminal
   goes under rather than shrinking to unreadable. */
.dev-hero { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) { .dev-hero { grid-template-columns: 1fr 1fr; gap: 56px; } }
.dev-hero .lede { margin: 18px 0 24px; }
.dev-hero-cli { margin-top: 0; }

/* Developer detail pages share one editorial system. Their original structure
   was sound but every section sat on the same black plane, so commands,
   explanations and the page introduction all carried identical visual weight.
   The page class supplies a route-specific technical mark without adding
   decorative media requests or duplicating product screenshots. */
body[class*="page-developers-"] main {
  --bg: #f7f7f4;
  --bg-card: #fff;
  --bg-card-hover: #f0f0ec;
  --text: #0b0d0f;
  --text-muted: #626560;
  --text-faint: #6a6d68;
  --line: #dcddd8;
  --line-strong: #c9cac4;
  --accent: #2648ef;
  --accent-hover: #1838d7;
  --accent-ink: #1e39bd;
  color: var(--text);
  overflow: clip;
  background: var(--bg);
}
body[class*="page-developers-"] main > .shell:first-child {
  --text: #f0f0ec;
  --text-muted: #b8bab6;
  --text-faint: #8f928d;
  --accent: #7fb0ff;
  position: relative;
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  padding-block: var(--section-display);
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  overflow: hidden;
  border-bottom: 1px solid #252525;
  background: #0b0d0f;
}
body[class*="page-developers-"] main > .shell:first-child::after {
  content: "";
  position: static;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 8px solid #f7f7f4;
  outline: var(--control-stroke) solid #41464f;
  border-radius: var(--r-block);
  background: var(--dev-hero-image) center / cover no-repeat #fff;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .38);
}
body.page-developers-cli { --dev-hero-image: url("/assets/img/lib/ui-home-today.png"); }
body.page-developers-testing { --dev-hero-image: url("/assets/img/lib/ui-checkout-cart.png"); }
body.page-developers-deployment { --dev-hero-image: url("/assets/img/lib/ui-payment-schedule.png"); }
body.page-developers-api { --dev-hero-image: url("/assets/img/lib/ui-account-activity.png"); }
body.page-developers-sdks { --dev-hero-image: url("/assets/img/lib/ui-product-create.png"); }
body.page-developers-webhooks { --dev-hero-image: url("/assets/img/lib/ui-flow-builder.png"); }
body.page-developers-packages { --dev-hero-image: url("/assets/img/lib/ui-catalogue-checkout.png"); }
body.page-developers-live-upgrades { --dev-hero-image: url("/assets/img/lib/ui-reports-fortnight.png"); }
body[class*="page-developers-"] main > .shell:first-child .split-hero-grid {
  position: relative;
  z-index: 1;
  min-width: 0;
  grid-template-columns: minmax(0, 760px);
}
body[class*="page-developers-"] main > .shell:first-child h1 {
  max-width: 760px;
  color: #fff;
  font-size: clamp(58px, 6.4vw, 92px);
  line-height: .93;
  letter-spacing: -.052em;
}
body[class*="page-developers-"] main > .shell:first-child .lede {
  max-width: 650px;
  padding-top: 12px;
  color: var(--text-muted);
  font-size: 19px;
  line-height: 1.5;
}
body[class*="page-developers-"] main > .shell:first-child .lede a {
  color: #7fb0ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body[class*="page-developers-"] main > .shell:not(:first-child) {
  position: relative;
  width: 100%;
  max-width: none;
  padding-block: var(--section-roomy);
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  background: #f0f0ec;
}
body[class*="page-developers-"] main > .shell:last-child {
  padding-block: var(--section-compact);
}
body[class*="page-developers-"] main > .shell:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: var(--control-stroke) solid var(--line);
}
body[class*="page-developers-"] main > .shell:nth-of-type(3n + 2) {
  background: #fff;
}
body[class*="page-developers-"] main > .shell:nth-of-type(3n) {
  background: #eef1ff;
}
body[class*="page-developers-"] main > .shell .split-hero-grid h2 {
  max-width: 760px;
}
body[class*="page-developers-"] main > .shell .split-hero-grid > .lede {
  color: var(--text-muted);
}
body[class*="page-developers-"] .cols-3.tight {
  gap: 16px;
  margin-top: 40px;
  border: 0;
}
body[class*="page-developers-"] .cols-3.tight > * {
  position: relative;
  min-height: 230px;
  padding: 30px;
  overflow: hidden;
  border: var(--control-stroke) solid var(--line);
  border-radius: var(--r-block);
  background: #fff;
}
body[class*="page-developers-"] .cols-3.tight > *::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  margin-bottom: 48px;
  border: var(--control-stroke) solid #b9c5ff;
  border-radius: var(--r-control);
  background:
    linear-gradient(90deg, transparent 48%, var(--accent) 48% 52%, transparent 52%),
    linear-gradient(transparent 48%, var(--accent) 48% 52%, transparent 52%);
}
body[class*="page-developers-"] .cols-3.tight .lead {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.3;
}
body[class*="page-developers-"] .cols-3.tight p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
}
body[class*="page-developers-"] .cli,
body[class*="page-developers-"] .codeblock pre {
  border-color: #303030;
  border-radius: var(--r-block);
  background: #101010;
  color: #e7e8e5;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .2);
}
body[class*="page-developers-"] .cli { overflow: hidden; }
body[class*="page-developers-"] .cli-cmd { color: #fff; }
body[class*="page-developers-"] .cli-note { color: #aeb1ac; }
body[class*="page-developers-"] .cli-when { color: #7fb0ff; }
body[class*="page-developers-"] .codeblock pre .g { color: #50cd62; }
body[class*="page-developers-"] .codeblock figcaption {
  color: #9a9a9a;
}
body[class*="page-developers-"] .cbtns .btn-primary {
  color: var(--accent-fill-text);
  background: var(--accent-fill);
}
body[class*="page-developers-"] .cbtns .btn-secondary {
  border-color: #555;
}
@media (max-width: 900px) {
  body[class*="page-developers-"] main > .shell:first-child {
    grid-template-columns: 1fr;
  }
  body[class*="page-developers-"] main > .shell:first-child::after {
    width: min(100%, 620px);
  }
}
@media (max-width: 600px) {
  body[class*="page-developers-"] main > .shell:first-child {
    padding-block: var(--section-display);
    padding-inline: var(--gutter);
  }
  body[class*="page-developers-"] main > .shell:first-child h1 {
    font-size: clamp(46px, 13vw, 58px);
  }
  body[class*="page-developers-"] main > .shell:first-child .lede {
    font-size: 17px;
  }
  body[class*="page-developers-"] main > .shell:first-child::after {
    width: 100%;
  }
  body[class*="page-developers-"] main > .shell:not(:first-child) {
    padding-inline: var(--gutter);
  }
  body[class*="page-developers-"] .cols-3.tight > * {
    min-height: 210px;
    padding: 24px;
  }
}

/* The developer gateway is a map, not a long-form product page. Hairlines make
   the routes feel like one system; the only filled object above the fold is the
   terminal, which is the thing a developer can actually use. */
.dev-gateway-note {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 13px 0;
  margin-bottom: 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 20px;
  transition: color 0.16s var(--ease-content);
}
.dev-gateway-note:hover { color: var(--text); }
.dev-gateway-note .mono { font-size: 10.5px; letter-spacing: 0.07em; }
.dev-console-link {
  align-self: center;
  color: var(--text-muted);
  font-size: 14px;
  text-underline-offset: 3px;
}
.dev-console-link:hover { color: var(--text); text-decoration: underline; }

.dev-path-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 40px;
  padding: 1px;
  background: var(--line);
}
@media (min-width: 760px) { .dev-path-grid { grid-template-columns: repeat(2, 1fr); } }
.dev-path {
  position: relative;
  min-height: 240px;
  padding: 28px;
  background: var(--bg);
  transition: background 0.18s var(--ease-content);
}
.dev-path:hover { background: var(--bg-card); }
.dev-path > .mono { display: block; margin-bottom: 52px; color: var(--text-muted); font-size: 10.5px; letter-spacing: 0.07em; }
.dev-path h3 { max-width: 14ch; }
.dev-path p { max-width: 48ch; margin: 12px 40px 0 0; color: var(--text-muted); font-size: 15px; line-height: 23px; }
.dev-path-arrow { position: absolute; right: 28px; top: 28px; color: var(--text-muted); transition: transform 0.2s var(--ease-content), color 0.2s var(--ease-content); }
.dev-path:hover .dev-path-arrow { color: var(--text); transform: translate(2px, -2px); }

.dev-lifecycle {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
@media (min-width: 700px) { .dev-lifecycle { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dev-lifecycle { grid-template-columns: repeat(4, 1fr); } }
.dev-life-step {
  min-height: 230px;
  padding: 24px;
  border-bottom: 1px solid var(--line);
  transition: background 0.18s var(--ease-content);
}
@media (min-width: 700px) { .dev-life-step { border-left: 1px solid var(--line); } }
.dev-life-step:first-child { border-left: 0; }
.dev-life-step:hover { background: var(--bg-card); }
.dev-life-step .mono { color: var(--text-muted); font-size: 11px; }
.dev-life-step h3 { margin: 64px 0 8px; font-size: 20px; font-weight: 400; letter-spacing: -0.025em; }
.dev-life-step p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 22px; }

.dev-resource-list { margin-top: 40px; border-top: 1px solid var(--line); }
.dev-resource-list a {
  display: grid;
  grid-template-columns: 110px minmax(140px, 0.55fr) 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.16s var(--ease-content);
}
.dev-resource-list .mono { color: var(--text-muted); font-size: 10.5px; letter-spacing: 0.07em; }
.dev-resource-list strong { font-weight: 500; }
.dev-resource-list a > span:nth-child(3) { color: var(--text-muted); font-size: 14px; }
.dev-resource-list i { color: var(--text-muted); font-style: normal; transition: transform 0.2s var(--ease-content); }
.dev-resource-list a:hover i { color: var(--text); transform: translate(2px, -2px); }
@media (max-width: 680px) {
  .dev-gateway-note { grid-template-columns: 1fr auto; }
  .dev-gateway-note > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .dev-resource-list a { grid-template-columns: 1fr auto; gap: 6px 20px; }
  .dev-resource-list strong, .dev-resource-list a > span:nth-child(3) { grid-column: 1; }
  .dev-resource-list i { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* Developer portal ------------------------------------------------------ */
.dev-portal,
.dev-doc-page {
  color: #111;
  background: #f7f7f4;
}
.dev-portal-hero,
.dev-doc-hero {
  color: #f7f7f4;
  background: #0b0d0f;
}
.dev-portal-hero-grid,
.dev-doc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}
.dev-portal-hero h1,
.dev-doc-hero h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(56px, 6.4vw, 92px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.06em;
}
.dev-portal-hero p,
.dev-doc-hero p {
  max-width: 700px;
  margin: 28px 0 0;
  color: #b9bcb7;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
}
.dev-portal-actions,
.dev-doc-actions { display: flex; flex-wrap: wrap; margin-top: 32px; }
.dev-portal-hero .btn-primary,
.dev-doc-hero .btn-primary { color: #fff; background: #2864f0; }
.dev-portal-hero .btn-secondary,
.dev-doc-hero .btn-secondary { border-color: #4a4d49; color: #fff; background: transparent; }
.dev-code-panel {
  overflow: hidden;
  margin: 0;
  border: 1px solid #363a3d;
  border-radius: 16px;
  background: #111416;
  box-shadow: 0 32px 80px rgba(0,0,0,.28);
}
.dev-code-panel figcaption {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid #303438;
  color: #8e938d;
  font: 12px/1 var(--font-mono);
}
.dev-code-panel figcaption span { width: 8px; height: 8px; border-radius: 50%; background: #555a55; }
.dev-code-panel figcaption b { margin-left: 6px; font-weight: 400; }
.dev-code-panel pre {
  min-height: 320px;
  margin: 0;
  padding: clamp(24px, 4vw, 48px);
  overflow: auto;
  color: #e8ebe6;
  font: clamp(13px, 1.2vw, 16px)/1.75 var(--font-mono);
}
.dev-code-panel em { color: #7fb0ff; font-style: normal; }
.dev-code-panel i,
.dev-code-panel strong { color: #63d77a; font-style: normal; font-weight: 400; }
.dev-portal-section-blue { background: #eef1ff; }
.dev-portal-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .65fr); gap: 48px; align-items: end; margin-bottom: 56px; }
.dev-portal-heading h2,
.dev-reference-grid h2 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(42px, 5.2vw, 72px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.05em;
}
.dev-portal-heading p,
.dev-reference-grid p { margin: 0; color: #626560; font-size: 18px; line-height: 1.5; }
.dev-interface-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dev-interface-grid article {
  min-height: 340px;
  padding: 28px;
  border: 1px solid #d6d8d2;
  border-radius: 16px;
  background: #fff;
}
.dev-interface-grid h3 { margin: 112px 0 12px; font-size: 28px; font-weight: 400; letter-spacing: -.035em; }
.dev-interface-grid p { margin: 0; color: #626560; line-height: 1.5; }
.dev-interface-grid code { color: #1e43cc; font: 13px/1 var(--font-mono); }
.dev-build-path-grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(440px, 1fr);
  gap: clamp(64px, 10vw, 160px);
  align-items: start;
}
.dev-build-path h2 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(42px, 5.2vw, 72px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.05em;
}
.dev-build-path > .shell > div > p {
  max-width: 620px;
  margin: 28px 0 0;
  color: #626560;
  font-size: 18px;
  line-height: 1.5;
}
.dev-build-path ol { margin: 0; padding: 0; border-top: 1px solid #cfd1cb; list-style: none; }
.dev-build-path li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding-block: 28px;
  border-bottom: 1px solid #cfd1cb;
}
.dev-build-path li > span { padding-top: 5px; color: #626560; font: 12px/1 var(--font-mono); }
.dev-build-path h3 { margin: 0 0 10px; font-size: 26px; font-weight: 400; letter-spacing: -.035em; }
.dev-build-path li p { max-width: 620px; margin: 0; color: #626560; line-height: 1.5; }
.dev-portal-reference { color: #f7f7f4; background: #0b0d0f; }
.dev-reference-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .7fr); gap: 72px; }
.dev-reference-grid p { color: #b9bcb7; }
.dev-portal-reference .btn-primary { color: #fff; background: #2864f0; }
.dev-portal-reference .btn-secondary { border-color: #4a4d49; color: #fff; background: transparent; }

.dev-doc-hero h1 { font-size: clamp(52px, 5.6vw, 80px); }
.dev-doc-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 820px);
  justify-content: space-between;
  gap: clamp(64px, 10vw, 160px);
  padding-block: 72px 120px;
}
.dev-doc-layout aside {
  position: sticky;
  top: 160px;
  align-self: start;
  display: grid;
  gap: 12px;
  padding-left: 16px;
  border-left: 1px solid #d3d5cf;
  font-size: 14px;
}
.dev-doc-layout aside strong { margin-bottom: 8px; font-weight: 500; }
.dev-doc-layout aside a { color: #696c67; }
.dev-doc-layout aside a:hover { color: #1e43cc; }
.dev-doc-content > section { padding: 0 0 72px; margin: 0 0 72px; border-bottom: 1px solid #d3d5cf; scroll-margin-top: 160px; }
.dev-doc-content > section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.dev-doc-content h2 { margin: 0 0 24px; font-size: clamp(36px, 4vw, 52px); font-weight: 400; line-height: 1; letter-spacing: -.045em; }
.dev-doc-content > section > p { max-width: 720px; margin: 0 0 28px; color: #5f625e; font-size: 17px; line-height: 1.65; }
.dev-snippet {
  overflow: hidden;
  margin: 28px 0;
  border: 1px solid #303438;
  border-radius: 12px;
  background: #111416;
}
.dev-snippet figcaption { padding: 12px 18px; border-bottom: 1px solid #303438; color: #9ca09a; font: 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.dev-snippet pre { margin: 0; padding: 22px; overflow: auto; color: #e8ebe6; font: 14px/1.7 var(--font-mono); }
.dev-note { margin: 28px 0; padding: 22px; border-left: 3px solid #2864f0; background: #eef1ff; }
.dev-note strong { font-weight: 500; }
.dev-note p { margin: 8px 0 0; color: #5f625e; line-height: 1.5; }
.dev-next-grid,
.dev-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dev-next-grid a,
.dev-fact-grid article { padding: 22px; border: 1px solid #d3d5cf; border-radius: 12px; background: #fff; }
.dev-next-grid strong,
.dev-next-grid span { display: block; }
.dev-next-grid span,
.dev-fact-grid p { margin: 8px 0 0; color: #626560; line-height: 1.45; }
.dev-checklist { display: grid; gap: 0; margin: 28px 0; padding: 0; border-top: 1px solid #d3d5cf; list-style: none; }
.dev-checklist li { padding: 16px 0 16px 30px; border-bottom: 1px solid #d3d5cf; background: linear-gradient(#2864f0,#2864f0) 4px center / 8px 8px no-repeat; }

@media (max-width: 820px) {
  .dev-portal-hero-grid,
  .dev-doc-hero-grid,
  .dev-portal-heading,
  .dev-build-path-grid,
  .dev-reference-grid { grid-template-columns: minmax(0, 1fr); }
  .dev-interface-grid { grid-template-columns: 1fr; }
  .dev-interface-grid article { min-height: 260px; }
  .dev-interface-grid h3 { margin-top: 68px; }
  .dev-doc-layout { grid-template-columns: 1fr; }
  .dev-doc-layout aside {
    position: static;
    display: flex;
    overflow-x: auto;
    padding: 0 0 14px;
    border-left: 0;
    border-bottom: 1px solid #d3d5cf;
    white-space: nowrap;
  }
  .dev-doc-layout aside strong { display: none; }
}
@media (max-width: 560px) {
  .dev-portal-hero h1,
  .dev-doc-hero h1 { font-size: 48px; }
  .dev-code-panel pre { min-height: 0; padding: 22px; font-size: 12px; }
  .dev-next-grid,
  .dev-fact-grid { grid-template-columns: 1fr; }
  .dev-doc-layout { gap: 40px; }
  .dev-doc-content > section { padding-bottom: 56px; margin-bottom: 56px; }
}

/* Every command is copyable. A snippet a developer has to select by hand is a
   snippet that gets mis-copied, and the whole point of the block is the
   sequence being run verbatim. */
.cli-cmd[data-copy] { cursor: pointer; position: relative; padding-right: 62px; }
.cli-cmd[data-copy]::after {
  content: 'copy';
  position: absolute; right: 0; top: 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-faint);
  opacity: 0; transition: opacity 0.16s var(--ease), color 0.16s var(--ease);
}
.cli-cmd[data-copy]:hover::after { opacity: 1; }
.cli-cmd[data-copy].is-copied::after { content: 'copied'; opacity: 1; color: var(--text); }

/* The hero's live-proof chip. A claim is a sentence; a claim with a pulse next
   to it is evidence. Restrained on purpose: it sits above an eleven-word h1 on
   a film, so it is one line of small type, not a badge. */
.live {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 20px;
  font-size: 13px; line-height: 20px;
  color: var(--text-muted);
  transition: color 0.18s var(--ease);
}
.live:hover { color: var(--text); }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: live-pulse 2.4s var(--ease) infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Billing toggle. A segmented pair, now sitting ON the photograph between the
   lede and the cards, so the track is a translucent white rather than the card
   ground and the chosen segment is the only opaque thing in it. It is centred
   by its own wrapper rather than by text-align, because the .pr-save badge
   inside it must not inherit a centring the rest of the hero sets. */
.pr-toggle {
  display: flex; width: max-content; gap: 2px;
  margin: clamp(26px, 3vw, 36px) auto 0;
  padding: 4px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: calc(var(--r-control) + 4px);
  backdrop-filter: blur(6px);
}
.pr-toggle-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; font: inherit; font-size: 13.5px; line-height: 20px;
  color: rgba(255, 255, 255, 0.76); background: none; border: 0; cursor: pointer;
  border-radius: var(--r-control);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.pr-toggle-btn:hover { color: #fff; }
.pr-toggle-btn.is-on { background: #fff; color: #0b0d0f; }
.pr-save {
  padding: 4px 10px;
  font-size: 11px; line-height: 16px; letter-spacing: 0.04em;
  border-radius: var(--r-control); background: var(--accent); color: var(--accent-text);
}

/* The compare heading is centred, as the reference has it, and it is the only
   centred h2 on the page — the two below it are the site's split-hero pair,
   which sets its heading left with the lede beside it. */
.pr-cmp-h { text-align: center; margin-bottom: 40px; }
@media (min-width: 768px) { .pr-cmp-h { margin-bottom: 56px; } }

/* The questions: heading parked left, the list in its own column on the right.
   Measured before the change: "Is Box Core really free?" was 200px of text with
   1040px of nothing before the plus sign, because a question row was running
   the full 1352 content width. A four-word question and its control at opposite
   ends of the screen is not a long line, it is a broken one.

   This is NOT .split-hero-grid, which is 1fr + a fixed 480px column: that shape
   is a headline with a lede beside it, so it gives the width to the LEFT. A
   question list needs the width on the right, and enough of it to hold an
   answer as well as a question. 0.8 / 1.3 puts the list at about 760px here.

   It is the only left-parked heading on the page, against the compare table's
   centred one. They are different kinds of object: a full-width table earns a
   heading centred over it, a column of questions does not. */
.pr-faq { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 1024px) {
  .pr-faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: 80px; }
}
/* the heading sits on the first question's cap line rather than above the
   list's top hairline, which is 22px higher */
@media (min-width: 1024px) { .pr-faq > h2 { padding-top: 14px; } }

body.page-pricing .closer-acts { gap: 12px; }

body.page-pricing .closer-quiet {
  height: var(--control-h);
  border-color: color-mix(in srgb, currentColor 48%, transparent);
  background: var(--bg-card-hover);
  color: var(--text);
}
body.page-pricing .closer-quiet:hover {
  border-color: currentColor;
  background: var(--line);
}

body.page-olivepay .bg-white .text-v3-gray-04,
body.page-whats-new .bg-white .text-v3-gray-04 {
  color: #666 !important;
}

/* ======================================================================
   404
   ====================================================================== */

/* Centred on an otherwise empty page, which is the whole design: the reference
   spends the viewport on three elements and nothing else, and the emptiness is
   what tells you the page is not a page.

   min-height rather than a fixed one, minus the bar, so the block is optically
   centred in what is left of the screen and the footer still sits under it on a
   short viewport rather than being pushed off. svh, not vh: on iOS vh is the
   tall-toolbar measurement, which puts the button under the browser chrome. */
.nf {
  min-height: calc(74svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding-block: 96px;
}
/* Bigger than any other page's title here, and it is the one place that is
   right: there is no content under it to out-rank, and the size IS the message.
   Capped so a translation that runs long wraps rather than reflowing the page. */
.nf-title { max-width: 20ch; }
.nf-lede  { max-width: 42ch; }
/* The button gets its own air, not the 20px gap: it is the only thing on the
   page that does anything, and the reference leaves it standing alone. */
.nf-go { margin-top: 16px; height: 40px; padding: 0 18px; }

/* ======================================================================
   Payments study
   ====================================================================== */

.page-solutions-in-person-commerce main,
.page-platform-payments main { overflow: clip; }
.page-solutions-in-person-commerce .eyebrow,
.page-platform-payments .eyebrow {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ps-hero { padding-top: var(--section-display); background: var(--surface-raised); }
.ps-hero-copy { max-width: 980px; text-align: center; }
.ps-hero h1 {
  max-width: 850px;
  margin: 0 auto;
  font-size: clamp(44px, 7.8vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.065em;
  font-weight: 400;
  text-wrap: balance;
}
.ps-hero-lede {
  max-width: 650px;
  margin: 24px auto 0;
  color: var(--text-muted);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.45;
}
.ps-actions { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.page-platform-payments .ps-actions .btn,
.page-platform-payments .ps-light-btn {
  min-height: var(--control-h-large);
  border-width: var(--control-stroke);
  border-style: solid;
  border-color: currentColor;
  border-radius: var(--r-control);
}
.page-platform-payments .ps-actions .btn-primary { border-color: var(--accent-fill); }
.page-platform-payments .ps-actions .btn-secondary { background: transparent; }
.ps-hero-media { max-width: 1420px; margin-top: clamp(56px, 8vw, 112px); }
.ps-hero-media img {
  width: 100%;
  height: clamp(420px, 66vw, 820px);
  object-fit: cover;
  object-position: center 42%;
  border-radius: var(--r-block) var(--r-block) 0 0;
}
.ps-section { padding-block: var(--section-roomy); }
.ps-heading { max-width: 760px; }
.ps-heading-wide { max-width: 980px; }
.ps-heading h2,
.ps-enterprise h2,
.ps-final h2 {
  margin: 0;
  font-size: clamp(34px, 5.3vw, 68px);
  line-height: 1;
  letter-spacing: -0.055em;
  font-weight: 400;
  text-wrap: balance;
}
.ps-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(48px, 7vw, 88px);
  background: var(--line);
  border: 1px solid var(--line);
}
.ps-method { display: grid; grid-template-rows: auto 1fr; background: var(--surface-raised); }
.ps-method img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.ps-method > div { padding: clamp(24px, 4vw, 44px); }
.ps-method h3, .ps-device h3, .ps-assurance h3 {
  margin: 0;
  font-size: clamp(23px, 2.4vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 400;
}
.ps-method p:last-child,
.ps-device > p:last-child,
.ps-assurance p {
  max-width: 48ch;
  margin: 14px 0 0;
  color: var(--text-muted);
  line-height: 1.55;
}
.ps-devices { background: var(--bg-card); }
.ps-rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.ps-rail-controls { display: flex; gap: 8px; flex: none; }
.ps-rail-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 20px;
  transition: color 0.18s var(--ease), background 0.18s var(--ease), opacity 0.18s var(--ease);
}
.ps-rail-controls .ps-rail-toggle {
  width: auto;
  padding-inline: 16px;
  border-radius: 999px;
  font-size: 13px;
}
.ps-rail-controls button:hover:not(:disabled) { color: var(--text-invert); background: var(--bg-invert); }
.ps-rail-controls button:disabled { opacity: 0.28; }
.ps-device-track {
  gap: 20px;
  margin-top: clamp(48px, 7vw, 84px);
  padding: 0 max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) 12px;
}
.ps-device-track .ps-device {
  flex: 0 0 clamp(290px, 39vw, 520px);
  scroll-snap-align: start;
  position: relative;
  top: auto;
  z-index: auto;
  display: block;
  padding: 0;
}
.ps-device-media { overflow: hidden; background: var(--surface-raised); }
.ps-device-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s var(--ease-soft);
}
.ps-device:hover .ps-device-media img { transform: scale(1.025); }
.ps-device > .eyebrow { margin-top: 24px; }
.ps-light-btn { margin-top: 30px; background: #fff; color: #0b0d0f; }
.ps-light-btn:hover { background: #ededed; }
.ps-embedded-lede { max-width: 64ch; margin: 24px 0 0; color: var(--text-muted); font-size: 18px; line-height: 1.6; }
.ps-embedded-grid { margin-top: 64px; }
.ps-flow {
  padding-block: var(--section-roomy);
  color: #fff;
  background: #0b0d0f;
}
.ps-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: center;
}
.ps-flow-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-block);
  background: #d7f2a7;
}
.ps-flow-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.ps-flow-copy .eyebrow { color: #a9aca9; }
.ps-flow-copy > h2 {
  max-width: 720px;
  margin: 18px 0 24px;
  font-size: clamp(44px, 4.6vw, 68px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
}
.ps-flow-copy > p:not(.eyebrow) {
  max-width: 55ch;
  margin: 0;
  color: #b8bbb7;
  font-size: 17px;
  line-height: 1.6;
}
.ps-flow-list {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.ps-flow-list li {
  padding: 22px 0;
  border-top: 1px solid #34383b;
}
.ps-flow-list li:last-child { border-bottom: 1px solid #34383b; }
.ps-flow-list h3 {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.ps-flow-list p { margin: 0; color: #aeb1ad; line-height: 1.5; }
.ps-assurance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 72px; background: var(--line); border: 1px solid var(--line); }
.ps-assurance article { min-height: 250px; padding: clamp(26px, 3.4vw, 44px); background: var(--surface-raised); }
.ps-security-link {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
  padding: 12px 18px;
  border: 1px solid currentColor;
  border-radius: var(--r-control);
  font-size: 16px;
}
.ps-enterprise { padding-block: var(--section-display); color: var(--text-invert); background: var(--bg-invert); }
.ps-enterprise .eyebrow { color: #aeb1ad; }
.ps-enterprise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: clamp(72px, 9vw, 120px); }
.ps-enterprise-grid > div { border-top: 1px solid #34383b; padding-top: 22px; }
.ps-enterprise-grid p:last-child { max-width: 37ch; margin: 18px 0 0; color: #b8bbb7; line-height: 1.55; }
.ps-big-number { margin: 0; font-size: clamp(40px, 5vw, 66px); line-height: 1; letter-spacing: -0.055em; }
.ps-faq { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(48px, 8vw, 120px); }
.ps-faq .faq { align-self: start; }
.ps-final { padding-block: var(--section-standard); background: var(--bg-card); }
.ps-final-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.ps-final .ps-actions { flex: none; margin: 0; }

@media (max-width: 820px) {
  .ps-methods, .ps-flow-grid, .ps-assurance, .ps-enterprise-grid, .ps-faq { grid-template-columns: 1fr; }
  .ps-final-inner { display: block; }
  .ps-final .ps-actions { justify-content: flex-start; margin-top: 28px; }
}

@media (max-width: 560px) {
  .ps-hero h1 { font-size: clamp(42px, 14vw, 64px); }
  .ps-hero-media { padding: 0; }
  .ps-hero-media img { height: 76vh; border-radius: 0; }
  .ps-rail-head { align-items: flex-start; }
  .ps-rail-controls { display: none; }
  .ps-device-track .ps-device { flex-basis: 82vw; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-device-media img { transition: none; }
}

/* ======================================================================
   Beauty study
   ====================================================================== */

.page-merchants main { overflow: clip; background: #fff; }
.bs-hero { position: relative; min-height: min(78vw, 920px); display: grid; place-items: start center; color: #fff; isolation: isolate; }
.bs-hero-image, .bs-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.bs-hero-image { z-index: -2; object-fit: cover; object-position: center 44%; }
.bs-hero-shade {
  z-index: -1;
  background: linear-gradient(180deg, rgba(13, 5, 28, 0.56) 0%, rgba(13, 5, 28, 0.12) 52%, rgba(13, 5, 28, 0.32) 100%);
}
.bs-hero-inner { padding-top: var(--section-standard); text-align: center; }
.bs-hero h1 {
  margin: 0;
  font-size: clamp(52px, 6vw, 86px);
  line-height: 0.95;
  letter-spacing: -0.06em;
  font-weight: 500;
}
.bs-hero-inner > p { max-width: 560px; margin: 24px auto 0; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; }
.bs-actions { display: flex; flex-wrap: wrap; margin-top: 28px; }
.bs-hero .bs-actions { justify-content: center; }
.bs-light-btn { color: #0b0d0f; background: #fff; }
.bs-light-btn:hover { background: #ececec; }
.bs-outline-btn { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.85); }
.bs-outline-btn:hover { color: #0b0d0f; background: #fff; }
.bs-types { padding-block: var(--section-roomy); background: #f3ede4; }
.bs-types h2, .bs-section-head h2, .bs-final h2 {
  margin: 0;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1;
  letter-spacing: -0.055em;
  font-weight: 400;
}
.bs-type-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(48px, 6vw, 78px);
}
.bs-type-card { min-width: 0; }
.bs-type-card img { width: 100%; height: auto; aspect-ratio: 0.71; object-fit: cover; transition: transform 0.55s var(--ease-soft), filter 0.3s var(--ease); }
.bs-type-card span { display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; font-size: clamp(16px, 1.45vw, 20px); }
.bs-type-card b { font-weight: 400; transition: transform 0.25s var(--ease); }
.bs-type-card:hover img { transform: scale(0.985); filter: saturate(1.08); }
.bs-type-card:hover b { transform: translate(3px, -3px); }
.bs-capabilities { padding-block: var(--section-roomy); }
.bs-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.bs-section-head > a { flex: none; padding-bottom: 8px; border-bottom: 1px solid currentColor; font-size: 15px; }
.bs-cap-grid { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(44px, 8vw, 120px); margin-top: clamp(58px, 8vw, 104px); }
.bs-tab-list { display: flex; flex-direction: column; align-self: start; border-top: 1px solid var(--line-strong); }
.bs-tab {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  width: 100%;
  padding: 24px 0;
  text-align: left;
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-faint);
  transition: color 0.2s var(--ease), padding-left 0.25s var(--ease);
}
.bs-tab span { padding-top: 4px; font-family: var(--font-mono); font-size: 11px; }
.bs-tab strong { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 400; }
.bs-tab:hover, .bs-tab.is-active { color: var(--text); }
.bs-tab.is-active { padding-left: 12px; }
.bs-panel-stage { min-width: 0; }
.bs-panel { animation: bs-panel-in 0.42s var(--ease-soft) both; }
.bs-panel img { width: 100%; height: auto; aspect-ratio: 1.23; object-fit: cover; object-position: left top; background: var(--bg-card); }
.bs-panel > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-top: 24px; }
.bs-panel p { max-width: 54ch; margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.55; }
.bs-panel a { flex: none; border-bottom: 1px solid currentColor; padding-bottom: 5px; font-size: 14px; }
@keyframes bs-panel-in { from { opacity: 0; transform: translateY(8px); } }
.bs-stories { position: relative; min-height: min(75vw, 940px); display: flex; align-items: flex-end; color: #fff; isolation: isolate; }
.bs-story-media, .bs-story-media img, .bs-story-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.bs-story-media { z-index: -2; }
.bs-story-media img { object-fit: cover; opacity: 0; transform: scale(1.025); transition: opacity 0.55s var(--ease-soft), transform 0.8s var(--ease-soft); }
.bs-story-media img.is-active { opacity: 1; transform: scale(1); }
.bs-story-shade { z-index: -1; background: linear-gradient(90deg, rgba(5, 6, 7, 0.78), rgba(5, 6, 7, 0.08) 75%); }
.bs-story-inner { padding-bottom: var(--section-standard); }
.bs-story-slides { max-width: 760px; min-height: 285px; }
.bs-story { margin: 0; animation: bs-panel-in 0.42s var(--ease-soft) both; }
.bs-story blockquote { margin: 0; font-size: clamp(31px, 4vw, 58px); line-height: 1.04; letter-spacing: -0.045em; }
.bs-story figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 30px; }
.bs-story figcaption strong { font-size: 16px; }
.bs-story figcaption span { color: rgba(255, 255, 255, 0.72); font-size: 14px; }
.bs-story-controls { display: flex; align-items: center; gap: 10px; margin-top: 32px; }
.bs-story-controls button { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 50%; font-size: 18px; }
.bs-story-controls button:hover { color: #0b0d0f; background: #fff; }
.bs-story-controls .bs-story-toggle { width: auto; padding-inline: 16px; border-radius: var(--r-control); font-size: 13px; }
.bs-story-controls a { margin-left: 14px; padding-bottom: 5px; border-bottom: 1px solid currentColor; }
.bs-stats { padding-block: var(--section-standard); background: #d8f05b; }
.bs-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 6vw, 90px); }
.bs-stat-grid article { border-top: 1px solid rgba(11, 13, 15, 0.5); padding-top: 24px; }
.bs-stat-grid strong { display: block; font-size: clamp(50px, 6vw, 86px); line-height: 1; letter-spacing: -0.06em; font-weight: 400; }
.bs-stat-grid p { max-width: 26ch; margin: 22px 0 0; font-size: 17px; line-height: 1.45; }
.bs-resources { padding-block: var(--section-roomy); }
.bs-resource-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(48px, 7vw, 82px); }
.bs-resource-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform 0.5s var(--ease-soft); }
.bs-resource-grid span { display: block; padding-top: 18px; font-size: 18px; line-height: 1.32; }
.bs-resource-grid a:hover img { transform: scale(0.98); }
.bs-final { padding-block: var(--section-standard); color: #fff; background: #0b0d0f; }
.bs-final-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(70px, 12vw, 180px); }
.bs-newsletter h2 { max-width: 15ch; font-size: clamp(30px, 3.8vw, 52px); }
.bs-newsletter label { display: flex; margin-top: 42px; border-bottom: 1px solid rgba(255, 255, 255, 0.7); }
.bs-newsletter label:focus-within { outline: 2px solid #fff; outline-offset: 3px; }
.bs-newsletter input { min-width: 0; flex: 1; height: var(--control-h-large); color: #fff; background: transparent; border: 0; outline: 0; font: inherit; }
.bs-newsletter input::placeholder { color: rgba(255, 255, 255, 0.58); }
.bs-newsletter button { padding-inline: 18px; }
.bs-newsletter p { max-width: 58ch; margin: 18px 0 0; color: rgba(255, 255, 255, 0.58); font-size: 12px; line-height: 1.5; }

@media (max-width: 900px) {
  .bs-hero { min-height: 760px; }
  .bs-type-track { overflow-x: auto; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 38vw); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .bs-type-card { scroll-snap-align: start; }
  .bs-cap-grid, .bs-final-grid { grid-template-columns: 1fr; }
  .bs-panel-stage { order: -1; }
  .bs-tab-list { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); overflow-x: auto; border-top: 0; }
  .bs-tab { border-top: 1px solid var(--line-strong); }
  .bs-story-shade { background: linear-gradient(0deg, rgba(5, 6, 7, 0.78), rgba(5, 6, 7, 0.1) 85%); }
  .bs-stat-grid { grid-template-columns: 1fr; }
  .bs-resource-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .bs-hero { min-height: 680px; }
  .bs-hero-inner > p { max-width: 32ch; }
  .bs-type-track { margin-right: calc(var(--gutter) * -1); grid-auto-columns: 76vw; padding-right: var(--gutter); }
  .bs-section-head { display: block; }
  .bs-section-head > a { display: inline-block; margin-top: 22px; }
  .bs-panel > div { display: block; }
  .bs-panel a { display: inline-block; margin-top: 20px; }
  .bs-stories { min-height: 760px; }
  .bs-story-slides { min-height: 330px; }
  .bs-resource-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-type-card img, .bs-panel, .bs-story, .bs-story-media img, .bs-resource-grid img { animation: none; transition: none; }
}
}

@layer utilities {
/* ==========================================================================
   Utilities — the last layer, so a utility always wins over the component it
   is placed on. This is the complete list a page body may reach for; anything
   a block needs beyond it belongs in that block's own rule, not in a style
   attribute. That is the line these classes exist to hold.
   ========================================================================== */

/* Suisse Intl Regular is the only shipped face. Keeping this in the final
   layer prevents older page modules from asking the browser to synthesize
   weights that do not exist in the font files. */
:where(body, body *, button, input, select, textarea) {
  font-weight: 400;
}

.flush { margin: 0; }

.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--action-gap);
}

.mt-2  { margin-top: var(--s-2); }
.mt-4  { margin-top: var(--s-4); }
.mt-5  { margin-top: var(--s-5); }
.mt-6  { margin-top: var(--s-6); }
.mt-8  { margin-top: var(--s-8); }
.mt-10 { margin-top: var(--s-10); }
.mt-12 { margin-top: var(--s-12); }
.mt-14 { margin-top: var(--s-14); }

.pt-10 { padding-top: var(--s-10); }
.pt-16 { padding-top: var(--s-16); }

.measure-tight { max-width: var(--measure-tight); }
.measure       { max-width: var(--measure); }
.measure-wide  { max-width: var(--measure-wide); }

/* Shared layout grid. Page families keep their own composition, while their
   outer edges and repeated card gaps resolve to one responsive system. */
:where(
  .bt-wrap,
  .cb-wrap,
  .cl-wrap,
  .cn-wrap,
  .ep-wrap,
  .mg-wrap,
  .ph-wrap,
  .sbx-wrap,
  .in-wrap,
  .ce-wrap,
  .rr-wrap,
  .os-wrap,
  .wb-wrap
) {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

:where(
  .pc-value-strip > div,
  .pc-control-grid,
  .pc-moving-grid,
  .st-resource-grid,
  .cs-hardware-rail,
  .build-start-grid,
  .connect-template-grid,
  .build-commerce-grid,
  .clone-step-grid,
  .clone-three,
  .clone-four,
  .dir-picker-grid,
  .ct-guide-grid,
  .rr-grid,
  .os-brand-gallery,
  .stories-recipe-grid
) {
  gap: var(--grid-gap);
}

:where(
  .ep-support-grid,
  .ep-resource-grid,
  .mc-module-grid,
  .os-plan-cards
) {
  column-gap: var(--grid-gap);
}

:where(
  .ce-trace-grid,
  .rr-flow-grid,
  .mc-day__grid,
  .in-journey-grid,
  .stories-pair-grid,
  .stories-proof-grid
) {
  gap: var(--grid-gap-wide);
}

/* Display-depth sections use one ceiling rather than drifting toward
   170–200px of padding as individual page families scale up. */
:where(
  .fl-hero,
  .fl-feed,
  .fl-final,
  .in-final,
  .insights-context,
  .ce-final,
  .ps-enterprise,
  .sbx-intro,
  .sbx-flow,
  .sbx-layers,
  .sbx-boundary,
  .sbx-review,
  .sbx-final,
  .mg-inventory,
  .ph-toolkit,
  .ph-final,
  .wb-hero,
  .wb-story,
  .wb-choice,
  .wb-final,
  .home-final,
  .ab-hero,
  .stories-pair,
  .stories-recipes
) {
  padding-block: var(--section-display);
}

.rr-section { padding-block: var(--section-compact); }
.cs-band { padding-block: 0; }

.markerless:is(button, header, li) { grid-template-columns: 1fr !important; }
.ph-directory a.markerless { grid-template-columns: 1fr auto !important; }
.cn-flow-card div.markerless { grid-template-columns: 1fr auto; }
.marker-label-only { width: auto !important; }

.ce-trace-grid > *,
.rr-flow-grid > *,
.ce-trace-tabs,
.rr-flow-tabs {
  min-width: 0;
  max-width: 100%;
}

/* a line-art mark sized to sit beside copy rather than behind it */
.mark-lg { width: 200px; height: 200px; }

/* Legacy page families keep their contextual colours, but their controls use
   the same large-action geometry and interaction contract as .btn-lg. Pills,
   chips, tabs, toggles, and circular controls remain intentionally distinct. */
:where(
  .ph-button,
  .clone-button,
  .cn-button,
  .cs-button,
  .pc-button,
  .sqc-button,
  .st-button,
  .stories-button,
  .bt-button,
  .cb-button,
  .ce-button,
  .cl-button,
  .ep-button,
  .in-button,
  .ipc-button,
  .mc-button,
  .mg-button,
  .os-button,
  .sbx-button,
  .rr-button,
  .wb-button
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-h-large);
  padding: 0 var(--control-pad-large);
  border-width: var(--control-stroke);
  border-style: solid;
  border-radius: var(--r-control);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  -webkit-text-stroke: 0;
  paint-order: normal;
  transform: none;
  transition:
    background-color 0.2s var(--ease-content),
    border-color 0.2s var(--ease-content),
    color 0.2s var(--ease-content),
    opacity 0.2s var(--ease-content);
}

:where(
  .ph-button,
  .clone-button,
  .cn-button,
  .cs-button,
  .pc-button,
  .sqc-button,
  .st-button,
  .stories-button,
  .bt-button,
  .cb-button,
  .ce-button,
  .cl-button,
  .ep-button,
  .in-button,
  .ipc-button,
  .mc-button,
  .mg-button,
  .os-button,
  .sbx-button,
  .rr-button,
  .wb-button
):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

:where(
  .ph-button,
  .clone-button,
  .cn-button,
  .cs-button,
  .pc-button,
  .sqc-button,
  .st-button,
  .stories-button,
  .bt-button,
  .cb-button,
  .ce-button,
  .cl-button,
  .ep-button,
  .in-button,
  .ipc-button,
  .mc-button,
  .mg-button,
  .os-button,
  .sbx-button,
  .rr-button,
  .wb-button
):is(:disabled, [aria-disabled="true"]) {
  opacity: 0.55;
  pointer-events: none;
}

/* Submit controls joined to an input are a single system variant: the input
   owns the left edge and the action owns the right edge. */
.btn-attached {
  height: var(--control-h-large);
  min-height: var(--control-h-large);
  padding-inline: var(--control-pad);
  border-width: var(--control-stroke);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  font-size: 14px;
  font-weight: 450;
  -webkit-text-stroke: 0;
  paint-order: normal;
}

/* Display-heading guardrails.
   Page families can choose their own composition and line breaks, but a title
   should not jump from the site's 64–108px range to 130–176px simply because
   a viewport is wide. These are the measured outliers from the 82-route audit.
   Article and guide titles intentionally keep their smaller reading scale. */
body.page-about .ab-hero-h1,
body.page-release-notes .fl-hero h1,
body.page-platform-merchant-console .mc-hero h1,
body.page-solutions-in-person-commerce .ipc-hero h1,
body.page-templates .tg-hero h1,
body.page-template-detail .td-head h1,
body.page-community .rr-word-stack {
  font-size: clamp(56px, 7.8vw, 112px);
  line-height: .92;
}

body.page-partners .rr-partners-hero h1 {
  max-width: 980px;
  margin: 24px auto;
  font-size: clamp(56px, 6.7vw, 96px);
  line-height: .96;
  letter-spacing: -.048em;
}

@media (max-width: 600px) {
  body.page-about .ab-hero-h1,
  body.page-release-notes .fl-hero h1,
  body.page-platform-merchant-console .mc-hero h1,
  body.page-solutions-in-person-commerce .ipc-hero h1,
  body.page-templates .tg-hero h1,
  body.page-community .rr-word-stack,
  body.page-partners .rr-partners-hero h1 {
    font-size: 56px;
  }
  body.page-template-detail .td-head h1 {
    font-size: 38px;
  }
}

@media (max-width: 600px) {
  body.page-guides .guides-hero h1 { font-size: 42px; }
  body.page-olivepay main h1 { font-size: 42px; }
}

/* Secondary typography guardrails.
   Display sections may be larger than ordinary section headings, but H2s stop
   below the H1 ceiling and feature-level H3s stop below the H2 tier. */
.home-final__head h2,
.cl-use-cases h2,
.mc-cta h2,
.sbx-intro h2,
.sbx-section-head h2,
.sbx-boundary h2,
.sbx-review h2,
.sbx-final h2,
.os-section-head h2,
.ipc-page h2,
.wb-story-grid h2 {
  font-size: clamp(48px, 6.1vw, 88px);
}

.sbx-panels h3,
.ph-toolkit-copy h3,
.ph-spotlight h3 {
  font-size: clamp(34px, 3.6vw, 52px);
}

/* Display copy supports the page title; it never competes with it. This cap
   stays below the smallest desktop H1 tier used anywhere on the site. */
.ab-statement p,
.ep-intro p,
.cs-testimonial blockquote p,
.mc-quote__statement p,
.bs-story blockquote,
.sqc-quote blockquote,
.st-proof blockquote,
.closer-claim {
  font-size: clamp(28px, 3vw, 40px);
}

/* These are genuine section headings, not eyebrow labels. Their original
   10–20px treatment made the document hierarchy invisible. */
.dir-picker h2 { font-size: 28px; line-height: 1.2; }
.dir-title { height: auto; min-height: 132px; }
.dir-title h2 {
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: none;
}
/* Long supporting copy never drops below 14px. Compact labels and numerical
   metadata may remain at 10–13px because they are not reading text. */
.cli-note,
.cl-contact > p,
.cs-disclaimer,
.bs-newsletter p,
.prose .flowline {
  font-size: 14px !important;
}

body.page-platform-architecture .sqc-card-number { color: #aeb1ad; }

@media (max-width: 600px) {
  .home-final__head h2,
  .cl-use-cases h2,
  .mc-cta h2,
  .sbx-intro h2,
  .sbx-section-head h2,
  .sbx-boundary h2,
  .sbx-review h2,
  .sbx-final h2,
  .os-section-head h2,
  .ipc-page h2,
  .wb-story-grid h2 {
    font-size: 48px;
  }

  .dir-picker h2 { font-size: 24px; }
  .dir-title h2 { font-size: 34px; }

  .ab-statement p,
  .ep-intro p,
  .cs-testimonial blockquote p,
  .mc-quote__statement p,
  .bs-story blockquote,
  .sqc-quote blockquote,
  .st-proof blockquote,
  .closer-claim {
    font-size: 28px;
  }
}
}

@layer pages {
.sqc-page {
  overflow: clip;
  color: #0a0a0a;
  background: #fff;
  font-family: "Suisse Intl", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

.sqc-page *,
.sqc-page *::before,
.sqc-page *::after { box-sizing: border-box; }
.sqc-page h1,
.sqc-page h2,
.sqc-page h3,
.sqc-page p { margin-top: 0; }
.sqc-page h1,
.sqc-page h2,
.sqc-page h3 {
  font-weight: 400;
  letter-spacing: -.048em;
  -webkit-text-stroke: .45px currentColor;
  paint-order: stroke fill;
}
.sqc-page p { line-height: 1.5; }
.sqc-label {
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  -webkit-text-stroke: .25px currentColor;
  paint-order: stroke fill;
}
.sqc-muted { color: #5d5d5d; }
.sqc-actions { display: flex; flex-wrap: wrap; margin-top: 30px; }
.sqc-actions-center { justify-content: center; }
.sqc-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1.5px solid currentColor;
  border-radius: 8px;
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  -webkit-text-stroke: .3px currentColor;
  paint-order: stroke fill;
}
.sqc-button-primary { border-color: #2864f0; color: #fff; background: #2864f0; }
.sqc-button-light { border-color: #fff; color: #050505; background: #fff; }
.sqc-button-dark { border-color: #0a0a0a; color: #fff; background: #0a0a0a; }
.sqc-hero {
  display: grid;
  align-items: center;
  padding-block: var(--section-display);
}
.sqc-hero-grid,
.sqc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 76px;
  align-items: center;
}
.sqc-hero h1 {
  max-width: 720px;
  margin-bottom: 26px;
  font-size: clamp(56px, 5.2vw, 78px);
  line-height: .98;
}
.sqc-hero-copy > p:not(.sqc-label) {
  max-width: 590px;
  font-size: 19px;
  line-height: 1.5;
}
.sqc-media {
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #e8e7e3;
}
.sqc-media img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.sqc-section { padding-block: var(--section-standard); }
.sqc-section-soft { background: #f2f1ed; }
.sqc-section-dark { color: #fff; background: #090909; }
.sqc-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .65fr);
  gap: 70px;
  align-items: end;
  margin-bottom: 60px;
}
.sqc-head h2 {
  max-width: 850px;
  margin-bottom: 0;
  font-size: clamp(46px, 4.4vw, 66px);
  line-height: 1;
}
.sqc-head p { margin-bottom: 0; font-size: 18px; }
.sqc-split h2 {
  margin-bottom: 22px;
  font-size: clamp(44px, 4vw, 62px);
  line-height: 1;
}
.sqc-split-copy > p:not(.sqc-label) { max-width: 560px; font-size: 18px; }
.sqc-split-reverse .sqc-media { order: -1; }
.sqc-feature { min-height: 760px; display: grid; align-items: center; }
.sqc-grid { display: grid; gap: var(--grid-gap); }
.sqc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sqc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sqc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sqc-card {
  min-height: 285px;
  padding: 30px;
  border-radius: 18px;
  color: inherit;
  background: #fff;
  text-decoration: none;
}
.sqc-section:not(.sqc-section-soft) .sqc-card { background: #f2f1ed; }
.sqc-card-number {
  display: block;
  margin-bottom: 74px;
  color: #626262;
  font-size: 13px;
  letter-spacing: .08em;
}
.sqc-card h3 {
  margin-bottom: 14px;
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: -.035em;
  -webkit-text-stroke: .35px currentColor;
}
.sqc-card p { margin-bottom: 0; color: #5d5d5d; }
.sqc-rail {
  display: grid;
  grid-auto-columns: minmax(300px, 31vw);
  grid-auto-flow: column;
  gap: var(--grid-gap);
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sqc-rail::-webkit-scrollbar { display: none; }
.sqc-rail > * { scroll-snap-align: start; }
.sqc-rail-card {
  min-height: 440px;
  padding: 26px;
  border-radius: 18px;
  color: inherit;
  background: #f2f1ed;
  text-decoration: none;
}
.sqc-rail-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 13px;
}
.sqc-rail-card h3 { margin: 24px 0 10px; font-size: 28px; line-height: 1.1; letter-spacing: -.035em; }
.sqc-rail-card p { margin-bottom: 0; color: #5d5d5d; }
.sqc-stat {
  display: grid;
  place-items: center;
  padding-block: var(--section-standard);
  text-align: center;
}
.sqc-stat strong {
  display: block;
  font-size: clamp(72px, 11vw, 160px);
  font-weight: 400;
  line-height: .85;
  letter-spacing: -.065em;
  -webkit-text-stroke: .8px currentColor;
  paint-order: stroke fill;
}
.sqc-stat p { max-width: 720px; margin: 34px auto 0; font-size: 20px; }
.sqc-faq { padding-block: var(--section-standard); background: #fff; }
.sqc-faq h2 { margin-bottom: 42px; font-size: 58px; line-height: 1; }
.sqc-faq details { border-top: 1px solid #aaa; }
.sqc-faq details:last-child { border-bottom: 1px solid #aaa; }
.sqc-faq summary {
  position: relative;
  padding: 26px 54px 26px 0;
  cursor: pointer;
  list-style: none;
  font-size: 22px;
}
.sqc-faq summary::-webkit-details-marker { display: none; }
.sqc-faq summary::after { content: "+"; position: absolute; right: 2px; font-size: 28px; line-height: 1; }
.sqc-faq details[open] summary::after { content: "−"; }
.sqc-faq details p { max-width: 850px; padding: 0 54px 28px 0; color: #5d5d5d; }
.sqc-cta { display: grid; place-items: center; padding-block: var(--section-standard); text-align: center; }
.sqc-cta h2 { max-width: 850px; margin: 0 auto 26px; font-size: 58px; line-height: 1; }
.sqc-cta p { max-width: 700px; margin: 0 auto; font-size: 18px; }
.sqc-signup { padding-block: var(--section-compact); background: #f2f1ed; }
.sqc-signup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.sqc-signup h2 { margin-bottom: 12px; font-size: 34px; line-height: 1.05; }
.sqc-signup form { display: flex; gap: 10px; }
.sqc-signup input {
  width: 100%;
  min-height: var(--control-h-large);
  padding: 0 16px;
  border: 1px solid #777;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}
.sqc-legal { padding: 38px 0; color: #6a6a6a; background: #f2f1ed; font-size: 13px; }

/* Loyalty / Mobile money */
.sqc-loyalty .sqc-hero { color: #fff; background: #030303; }
.sqc-loyalty .sqc-hero .sqc-media { background: #1d1d1d; }
.sqc-loyalty-steps { display: grid; gap: 80px; }
.sqc-loyalty-step { min-height: 390px; }
.sqc-loyalty-engage { min-height: 650px; }
.sqc-loyalty-data { min-height: 850px; }

/* Enterprise sales / Fintechs */
.sqc-sales .sqc-hero { text-align: center; }
.sqc-sales .sqc-hero h1 { max-width: 1050px; margin-inline: auto; }
.sqc-sales .sqc-hero-copy > p:not(.sqc-label) { margin-inline: auto; }
.sqc-sales .sqc-hero .sqc-actions,
.sqc-sales .sqc-cta .sqc-actions { justify-content: center; }
.sqc-sales-banner { height: 768px; margin: 0; }
.sqc-sales-banner img { width: 100%; height: 100%; object-fit: cover; }
.sqc-sales-intro { min-height: 540px; }
.sqc-sales .sqc-feature { min-height: 760px; }
.sqc-sales .sqc-rail-card {
  padding: 16px 16px 28px;
  border: var(--control-stroke) solid var(--line);
  border-radius: var(--r-block);
  background: #fff;
}
.sqc-sales .sqc-rail-card img {
  border-radius: max(0px, calc(var(--r-block) - 2px));
  background: var(--ground-sunk);
}
.sqc-marquee {
  overflow: hidden;
  padding-block: var(--section-standard);
  color: #fff;
  background: #050505;
  white-space: nowrap;
}
.sqc-marquee div { width: max-content; font-size: 74px; letter-spacing: -.05em; animation: sqc-marquee 24s linear infinite; }
@keyframes sqc-marquee { to { transform: translateX(-40%); } }
.sqc-quote { display: grid; place-items: center; padding-block: var(--section-roomy); text-align: center; }
.sqc-quote blockquote { max-width: 1000px; margin: 0; font-size: 54px; line-height: 1.08; letter-spacing: -.04em; }
.sqc-quote cite { display: block; margin-top: 30px; font-size: 16px; font-style: normal; }

/* Banking / public sector and online commerce */
.sqc-bank .sqc-hero { align-items: start; }
.sqc-bank .sqc-hero-grid { align-items: start; }
.sqc-bank .sqc-media { min-height: 650px; }
.sqc-bank-tools .sqc-grid { margin-top: 55px; }
.sqc-bank-reading { padding-block: var(--section-standard); }
.sqc-bank-reading .sqc-head { margin-bottom: 28px; }
.sqc-public .sqc-bank-tools,
.sqc-public .sqc-bank-speed { padding-block: var(--section-standard); }

/* Services / payment links */
.sqc-services .sqc-hero { color: #fff; background: #050505; }
.sqc-services .sqc-hero-grid { align-items: start; }
.sqc-services .sqc-hero .sqc-media { min-height: 560px; }
.sqc-services-types { min-height: 900px; }
.sqc-services-toolkit { min-height: 1034px; }
.sqc-services-resources { min-height: 880px; }

/* AI / architecture */
.sqc-ai { color: #fff; background: #000; }
.sqc-ai .sqc-muted { color: #bdbdbd; }
.sqc-ai .sqc-rail-card { color: #090909; }
.sqc-ai .sqc-rail-card p,
.sqc-ai .sqc-cta .sqc-muted { color: #5d5d5d; }
.sqc-ai .sqc-hero .sqc-media { min-height: 560px; background: #161616; }
.sqc-ai-intro { min-height: 696px; }
.sqc-ai-flow { min-height: 1400px; }
.sqc-ai .sqc-section .sqc-card { color: #fff; background: #171717; }
.sqc-ai .sqc-section .sqc-card p { color: #bbb; }
.sqc-ai-resources { min-height: 1500px; }
.sqc-ai .sqc-cta { color: #090909; background: #fff; }
.sqc-orbit {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid #333;
  border-radius: 50%;
}
.sqc-orbit::before,
.sqc-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid #444;
  border-radius: 50%;
  inset: 12%;
}
.sqc-orbit::after { inset: 26%; }
.sqc-orbit span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 148px;
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 999px;
  color: #050505;
  background: #fff;
  text-align: center;
  transform: translate(-50%, -50%);
}

@media (max-width: 760px) {
  .sqc-hero,
  .sqc-page .sqc-feature,
  .sqc-loyalty-setup,
  .sqc-loyalty-engage,
  .sqc-loyalty-data,
  .sqc-sales-intro,
  .sqc-bank-tools,
  .sqc-bank-proof,
  .sqc-bank-speed,
  .sqc-bank-reading,
  .sqc-services-types,
  .sqc-services-toolkit,
  .sqc-services-resources,
  .sqc-ai-intro,
  .sqc-ai-flow,
  .sqc-ai-resources {
    min-height: 0;
  }
  .sqc-hero-grid,
  .sqc-split,
  .sqc-head,
  .sqc-signup-grid { grid-template-columns: 1fr; gap: 34px; }
  .sqc-hero h1 { font-size: 47px; line-height: .98; }
  .sqc-hero-copy > p:not(.sqc-label) { font-size: 17px; }
  .sqc-head { margin-bottom: 38px; }
  .sqc-head h2,
  .sqc-split h2 { font-size: 40px; line-height: 1.02; }
  .sqc-section { padding-block: var(--section-compact); }
  .sqc-media,
  .sqc-bank .sqc-media,
  .sqc-services .sqc-hero .sqc-media,
  .sqc-ai .sqc-hero .sqc-media { min-height: 0; height: 390px; }
  .sqc-media img { min-height: 0; height: 100% !important; }
  .sqc-split-reverse .sqc-media { order: 0; }
  .sqc-grid-2,
  .sqc-grid-3,
  .sqc-grid-4 { grid-template-columns: 1fr; }
  .sqc-card { min-height: 250px; }
  .sqc-card-number { margin-bottom: 54px; }
  .sqc-rail { grid-auto-columns: 84%; }
  .sqc-stat { min-height: 340px; }
  .sqc-stat strong { font-size: 76px; }
  .sqc-faq { padding-block: var(--section-compact); }
  .sqc-faq h2,
  .sqc-cta h2 { font-size: 42px; }
  .sqc-faq summary { font-size: 19px; }
  .sqc-signup form { flex-direction: column; }
  .sqc-sales-banner { height: 470px; }
  .sqc-marquee div { font-size: 48px; }
  .sqc-quote blockquote { font-size: 38px; }
  .sqc-loyalty-steps { gap: 48px; }
  .sqc-loyalty-step { min-height: 0; }
  .sqc-orbit { min-height: 350px; }
}

@media (prefers-reduced-motion: reduce) {
  .sqc-marquee div { animation: none; }
}
}

@layer pages {
.business-types {
  --bt-ink: #080808;
  --bt-muted: #62625f;
  --bt-line: #d7d7d2;
  --bt-blue: #2862f4;
  --bt-pink: #b94d7c;
  --bt-green: #d8f2a8;
  overflow: clip;
  background: #fff;
  color: var(--bt-ink);
}

.bt-wrap {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding-inline: clamp(20px, 4.167vw, 60px);
}

.bt-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-size: 16px;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease);
}

.bt-button:hover { transform: translateY(-2px); }
.bt-button-light { background: #fff; color: var(--bt-blue); }
.bt-button-ghost { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.bt-button-dark { background: var(--bt-ink); color: #fff; }
.bt-button-outline { border-color: var(--bt-blue); color: var(--bt-blue); }
.bt-actions { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; }

.bt-hero {
  display: block;
  min-height: 0;
  place-items: normal;
  padding: 0;
  color: var(--bt-ink);
  background: var(--bt-pink);
}

.bt-hero-stage {
  position: relative;
  min-height: 950px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 70%, rgba(255, 224, 187, 0.5), transparent 36%),
    radial-gradient(circle at 85% 22%, rgba(175, 112, 255, 0.35), transparent 35%),
    var(--bt-pink);
}

.bt-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 82px 30px 0;
  color: #fff;
  text-align: center;
}

.bt-hero h1,
.bt-audiences h2,
.bt-centred-head h2,
.bt-system h2,
.bt-feature h2,
.bt-institution h2,
.bt-final h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.045em;
}

.bt-hero h1 {
  max-width: 950px;
  margin: 0 0 32px;
  font-size: clamp(58px, 6.5vw, 94px);
  line-height: 0.95;
}

.bt-hero figure {
  position: absolute;
  right: 6%;
  bottom: -13%;
  left: 6%;
  height: 61%;
  overflow: hidden;
  margin: 0;
  border-radius: 24px 24px 0 0;
}

.bt-hero figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.bt-audiences {
  padding-block: var(--section-roomy);
}

.bt-gallery-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 64px;
}

.bt-audiences h2,
.bt-centred-head h2 {
  margin: 0;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
}

.bt-gallery-controls {
  display: flex;
  gap: 8px;
}

.bt-gallery-controls button {
  width: 48px;
  height: 48px;
  border: 1px solid var(--bt-ink);
  border-radius: var(--r-control);
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.bt-gallery-controls button:disabled {
  cursor: default;
  opacity: 0.3;
}

.bt-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 0 max(20px, calc((100vw - 1320px) / 2)) 18px;
  scroll-padding-left: max(20px, calc((100vw - 1320px) / 2));
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.bt-rail::-webkit-scrollbar { display: none; }

.bt-rail a {
  position: relative;
  flex: 0 0 clamp(260px, 26vw, 375px);
  height: 535px;
  overflow: hidden;
  border-radius: 24px;
  scroll-snap-align: start;
  color: #fff;
}

.bt-rail a::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
}

.bt-rail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-soft);
}

.bt-rail a:nth-child(2) img { object-position: 68% center; }
.bt-rail a:nth-child(5) img { object-position: 54% center; }
.bt-rail a:nth-child(6) img { object-position: 58% center; }
.bt-rail a:nth-child(7) img { object-position: 58% center; }

.bt-rail span {
  position: absolute;
  right: 26px;
  bottom: 26px;
  left: 26px;
  z-index: 1;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.bt-rail a:hover img { transform: scale(1.04); }

.bt-capabilities {
  padding: 0 0 120px;
}

.bt-centred-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-bottom: 70px;
  text-align: center;
}

.bt-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 0;
  border: 0;
  background: transparent;
}

.bt-capability {
  min-height: 560px;
  overflow: hidden;
  border-radius: 28px;
  padding: clamp(30px, 4vw, 58px);
  background: #f3f2ee;
}

.bt-capability-wide {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
  gap: 70px;
  padding-right: 0;
}

.bt-capability h3 {
  margin: 20px 0 16px;
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
}

.bt-capability p:last-of-type { max-width: 520px; color: var(--bt-muted); line-height: 1.5; }
.bt-capability figure { align-self: end; overflow: hidden; margin: 0; border-radius: 18px 0 0 0; }
.bt-capability figure img { display: block; width: 110%; height: auto; }
.bt-capability-blue { background: #dbe6ff; }
.bt-capability-green { background: var(--bt-green); }

.bt-word-wheel {
  display: grid;
  gap: 10px;
  margin-top: 70px;
}

.bt-word-wheel span {
  border-top: 1px solid rgba(0, 0, 0, 0.35);
  padding: 14px 0;
  font-size: clamp(24px, 3vw, 44px);
}

.bt-package-stack {
  position: relative;
  height: 250px;
  margin-top: 55px;
}

.bt-package-stack span {
  position: absolute;
  display: grid;
  width: 62%;
  height: 100px;
  place-items: center;
  border: 1px solid var(--bt-ink);
  border-radius: var(--r-control);
  background: #fff;
  font-size: 22px;
}

.bt-package-stack span:nth-child(2) { top: 52px; left: 18%; }
.bt-package-stack span:nth-child(3) { top: 104px; left: 36%; }

.bt-system {
  padding-block: var(--section-roomy);
  background: var(--bt-ink);
  color: #fff;
}

.bt-system h2 {
  max-width: 1050px;
  margin: 0 0 90px;
  font-size: clamp(52px, 6vw, 86px);
  line-height: 0.96;
}

.bt-system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bt-system-grid article {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  padding: 28px 38px;
  border-top: 1px solid #424242;
  border-left: 1px solid #424242;
}

.bt-system-grid article:last-child { border-right: 1px solid #424242; }
.bt-system-grid span { color: #9db7ff; font-family: var(--font-mono); font-size: 12px; }
.bt-system-grid h3 { margin: auto 0 15px; font-size: 30px; font-weight: 400; line-height: 1.05; letter-spacing: -0.04em; }
.bt-system-grid p { margin: 0; color: #aaa; line-height: 1.5; }

.bt-feature {
  padding-block: var(--section-roomy);
  background: #f3d6e2;
}

.bt-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  align-items: center;
  gap: clamp(50px, 9vw, 140px);
}

.bt-feature figure { overflow: hidden; margin: 0; border-radius: 26px; }
.bt-feature img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.bt-feature h2 {
  margin: 0 0 24px;
  font-size: clamp(46px, 5vw, 72px);
  line-height: 0.98;
}
.bt-feature p { color: #54434a; font-size: 18px; line-height: 1.55; }
.bt-feature .bt-button { margin-top: 18px; }

.bt-institution {
  padding-block: var(--section-roomy);
}

.bt-institution h2 {
  max-width: 1120px;
  margin: 0 0 86px;
  font-size: clamp(50px, 6vw, 86px);
  line-height: 0.96;
}

.bt-institution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bt-institution-grid article {
  display: flex;
  min-height: 310px;
  flex-direction: column;
  padding: 26px 36px;
  border-top: 1px solid var(--bt-line);
  border-left: 1px solid var(--bt-line);
}

.bt-institution-grid article:last-child { border-right: 1px solid var(--bt-line); }
.bt-institution-grid span { color: var(--bt-blue); font-family: var(--font-mono); font-size: 12px; }
.bt-institution-grid h3 { margin: auto 0 14px; font-size: 28px; font-weight: 400; line-height: 1.05; letter-spacing: -0.04em; }
.bt-institution-grid p { margin: 0; color: var(--bt-muted); line-height: 1.5; }

.bt-resources {
  padding-block: var(--section-roomy);
  background: #f7f6f5;
}

.bt-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.bt-resource-grid a { color: var(--bt-ink); }
.bt-resource-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.3;
  object-fit: cover;
  border-radius: 22px;
  transition: transform 400ms var(--ease-soft);
}
.bt-resource-grid a:hover img { transform: scale(0.985); }
.bt-resource-grid span { display: block; margin-top: 18px; font: 400 11px/1.2 var(--font-mono); text-transform: uppercase; }
.bt-resource-grid strong { display: block; margin-top: 12px; font-size: 30px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; }

.bt-final {
  padding-block: var(--section-display);
}

.bt-final-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
}

.bt-final-grid > div:last-child {
  padding-left: 60px;
  border-left: 1px solid var(--bt-line);
}

.bt-final h2 {
  margin: 0 0 36px;
  font-size: clamp(50px, 6vw, 84px);
  line-height: 0.96;
}

.bt-final h3 { margin: 0; font-size: 24px; font-weight: 400; }
.bt-final p { max-width: 500px; margin: 20px 0; color: var(--bt-muted); font-size: 18px; line-height: 1.55; }
.bt-final-grid > div:last-child a { color: var(--bt-blue); }
.bt-final .bt-actions { justify-content: flex-start; }

@media (max-width: 899px) {
  .bt-capability-wide,
  .bt-feature-grid,
  .bt-final-grid { grid-template-columns: 1fr; }
  .bt-capability-wide { padding-right: clamp(30px, 4vw, 58px); }
  .bt-capability figure { border-radius: 18px; }
  .bt-system-grid,
  .bt-institution-grid { grid-template-columns: 1fr; }
  .bt-system-grid article,
  .bt-institution-grid article { min-height: 240px; border-right: 1px solid currentColor; }
  .bt-feature-grid figure { order: 2; }
  .bt-final-grid > div:last-child { padding: 50px 0 0; border-top: 1px solid var(--bt-line); border-left: 0; }
}

@media (max-width: 599px) {
  .bt-wrap { padding-inline: 24px; }
  .bt-hero { padding: 0; }
  .bt-hero-stage { min-height: 780px; }
  .bt-hero-copy { padding: 58px 24px 0; }
  .bt-hero h1 { font-size: 50px; }
  .bt-hero figure { right: 10px; bottom: -2%; left: 10px; height: 49%; border-radius: 18px 18px 0 0; }
  .bt-audiences,
  .bt-system,
  .bt-feature,
  .bt-institution,
  .bt-resources,
  .bt-gallery-head { align-items: flex-start; margin-bottom: 42px; }
  .bt-audiences h2,
  .bt-centred-head h2 { font-size: 48px; }
  .bt-gallery-controls { display: none; }
  .bt-rail { gap: 14px; padding-inline: 15px; scroll-padding-left: 15px; }
  .bt-rail a { flex-basis: 82vw; height: 480px; border-radius: 20px; }
  .bt-capabilities { padding-bottom: 80px; }
  .bt-centred-head { margin-bottom: 44px; }
  .bt-capability-grid { grid-template-columns: 1fr; }
  .bt-capability { min-height: 500px; border-radius: 20px; }
  .bt-capability-wide { grid-column: auto; gap: 36px; }
  .bt-capability h3 { font-size: 38px; }

  .bt-system h2,
  .bt-feature h2,
  .bt-institution h2,
  .bt-final h2 { font-size: 48px; }
  .bt-system h2,
  .bt-institution h2 { margin-bottom: 54px; }
  .bt-feature figure { border-radius: 20px; }
  .bt-resource-grid { grid-template-columns: 1fr; gap: 48px; }
  .bt-resource-grid img { border-radius: 20px; }
  .bt-final .bt-actions { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-button,
  .bt-rail img,
  .bt-resource-grid img { transition: none; }
}
}

@layer pages {
.stories-page { --story-blue: #2864f0; overflow: clip; color: #090909; background: #fff; }
.stories-page * { box-sizing: border-box; }
.stories-hero p, .stories-category { margin: 0; font-size: 13px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.stories-hero h1 { max-width: 920px; margin: 24px 0 0; font-size: clamp(54px, 6.2vw, 86px); font-weight: 450; line-height: .92; letter-spacing: -.06em; }
.stories-pair { background: #fff; }
.stories-pair-first { padding-bottom: var(--section-roomy); }
.stories-pair-second { padding-block: var(--section-roomy); }
.stories-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: start; }
.stories-card { display: block; color: inherit; text-decoration: none; }
.stories-card-offset { margin-top: 0; }
.stories-card figure { aspect-ratio: 4 / 3; margin: 0 0 30px; overflow: hidden; border-radius: 18px; background: #eee; }
.stories-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.stories-card:hover img { transform: scale(1.025); }
.stories-card h2 { max-width: 560px; margin: 18px 0 24px; font-size: clamp(34px, 3.4vw, 50px); font-weight: 500; line-height: 1; letter-spacing: -.055em; }
.stories-card > span { font-weight: 700; }
.stories-card > span i { margin-left: 8px; color: var(--story-blue); font-style: normal; }
.stories-film { color: #fff; background:
  linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.26)),
  url('/assets/img/lib/team-counter-5919.jpg') center 46% / cover no-repeat; }
.stories-film-inner { display: flex; align-items: center; justify-content: space-between; gap: 80px; }
.stories-film h2 { max-width: 760px; margin: 20px 0 0; font-size: clamp(42px, 4.8vw, 68px); font-weight: 500; line-height: .98; letter-spacing: -.055em; }
.stories-play { display: inline-flex; align-items: center; gap: 24px; color: #fff; font-weight: 700; text-decoration: none; }
.stories-play span { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; color: #111; background: #fff; }
.stories-proof { color: #fff; background: #111; }
.stories-proof-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
.stories-proof figure { height: 342px; margin: 0; overflow: hidden; border-radius: 18px; }
.stories-proof img { width: 100%; height: 100%; object-fit: cover; }
.stories-proof h2 { margin: 0 0 34px; font-size: clamp(36px, 4.2vw, 58px); font-weight: 500; line-height: .98; letter-spacing: -.055em; }
.stories-proof p { margin: 5px 0 0; color: #bbb; font-size: 15px; }
.stories-recipes { background: #f2efe9; }
.stories-recipes > .shell > h2 { margin: 0 0 72px; font-size: clamp(54px, 6vw, 82px); font-weight: 500; line-height: .96; letter-spacing: -.06em; }
.stories-recipe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 52px 28px; }
.stories-recipe-grid a { position: relative; color: inherit; text-decoration: none; }
.stories-recipe-grid img { width: 100%; height: 300px; object-fit: cover; border-radius: 18px; }
.stories-recipe-grid span { display: block; margin: 20px 0 12px; color: #666; font-size: 13px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.stories-recipe-grid h3 { max-width: 510px; margin: 0; padding-right: 40px; font-size: 29px; font-weight: 550; line-height: 1.05; letter-spacing: -.045em; }
.stories-recipe-grid i { position: absolute; right: 8px; bottom: 2px; color: var(--story-blue); font-size: 28px; font-style: normal; }
.stories-final { margin-top: 38px; background: #fff; }
.stories-final-inner { display: flex; align-items: center; justify-content: space-between; gap: 70px; }
.stories-final h2 { max-width: 700px; margin: 0; font-size: clamp(48px, 5.2vw, 72px); font-weight: 500; line-height: .96; letter-spacing: -.055em; }
.stories-final-inner > div { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.stories-button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; padding: 0 25px; border: 1.5px solid currentColor; border-radius: 8px; color: inherit; font-weight: 700; text-decoration: none; }
.stories-button-primary { border-color: var(--story-blue); color: #fff; background: var(--story-blue); }
@media (max-width: 760px) {
  .stories-hero h1 { margin-top: 42px; font-size: 61px; }
  .stories-pair-first, .stories-pair-second { height: auto; padding: 0 0 90px; }
  .stories-pair-grid { grid-template-columns: 1fr; gap: 40px; }
  .stories-card-offset { margin-top: 0; }
  .stories-card figure { height: 300px; }
  .stories-card h2 { font-size: 32px; }
  .stories-film-inner { display: grid; align-content: center; gap: 36px; }
  .stories-film h2 { font-size: 45px; }
  .stories-pair-second { padding-top: 90px; }
  .stories-proof-grid { grid-template-columns: 1fr; gap: 42px; }
  .stories-proof figure { height: 300px; }
  .stories-proof h2 { font-size: 38px; }
  .stories-recipes > .shell > h2 { font-size: 50px; }
  .stories-recipe-grid { grid-template-columns: 1fr; gap: 36px; }
  .stories-recipe-grid img { height: 180px; }
  .stories-recipe-grid h3 { font-size: 24px; }
  .stories-final-inner { display: grid; gap: 46px; }
  .stories-final h2 { font-size: 48px; }
  .stories-final-inner > div { justify-content: flex-start; }
}
}

@layer pages {
.cloud-retail {
  --cl-ink: #080808;
  --cl-blue: #2862f4;
  --cl-muted: #5f605e;
  --cl-line: #d8d8d4;
  overflow: clip;
  background: #fff;
  color: var(--cl-ink);
}

.cl-wrap {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding-inline: clamp(24px, 8.333vw, 120px);
}

.cl-kicker {
  margin: 0;
  font-size: 15px;
  letter-spacing: .03em;
}

.cl-button {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
}
.cl-button-light { background: #fff; color: var(--cl-blue); }
.cl-button-blue { background: var(--cl-blue); color: #fff; }
.cl-button-outline { border-color: var(--cl-blue); color: var(--cl-blue); }
.cl-actions { display: flex; flex-wrap: wrap; justify-content: center; }

.cl-hero {
  padding-block: var(--section-display);
  background:
    radial-gradient(circle at 18% 18%, rgba(111, 161, 143, .85), transparent 42%),
    radial-gradient(circle at 83% 8%, rgba(197, 188, 195, .8), transparent 45%),
    #111;
  color: #fff;
}
.cl-hero-copy { text-align: center; }
.cl-hero h1 {
  max-width: 1320px;
  margin: 16px auto 26px;
  font-size: clamp(64px, 5.7vw, 82px);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.07em;
}
.cl-hero-copy > p:not(.cl-kicker) {
  max-width: 710px;
  margin: 0 auto 24px;
  font-size: 19px;
  line-height: 1.5;
}
.cl-hero-media {
  width: calc(100% - 120px);
  max-width: 1320px;
  height: 670px;
  margin: 50px auto 0;
  overflow: hidden;
  border-radius: 12px;
}
.cl-hero-media img { width: 100%; height: 100%; object-fit: cover; }

.cl-use-cases {
  padding-block: var(--section-roomy);
}
.cl-use-cases h2 {
  margin: 0 0 78px;
  font-size: clamp(54px, 6.2vw, 90px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.06em;
}
.cl-use-case-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.cl-use-case-grid a {
  position: relative;
  height: 362px;
  overflow: hidden;
  border-radius: 10px;
  color: #fff;
}
.cl-use-case-grid a::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .76));
}
.cl-use-case-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.cl-use-case-grid a:hover img { transform: scale(1.035); }
.cl-use-case-grid span {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 20px;
  left: 20px;
  font-size: 18px;
  font-weight: 500;
}
.cl-use-case-grid b { font-weight: 400; }

.cl-capability-intro { padding-block: var(--s-10); }
.cl-capability-intro .cl-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
}
.cl-capability-intro h2 {
  margin: 0;
  font-size: 66px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.055em;
}

.cl-capabilities { padding-block: var(--section-roomy); }
.cl-capability-grid {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 90px;
}
.cl-capability-list {
  align-self: center;
  border-top: 1px solid var(--cl-line);
}
.cl-capability-list details { padding: 0; border-bottom: 1px solid var(--cl-line); }
.cl-capability-list summary {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  font-size: 19px;
  font-weight: 500;
  list-style: none;
}
.cl-capability-list summary::-webkit-details-marker { display: none; }
.cl-capability-list summary::after { content: "+"; font-size: 28px; font-weight: 400; }
.cl-capability-list details[open] summary::after { content: "−"; }
.cl-capability-list p { margin: -2px 0 22px; color: var(--cl-muted); line-height: 1.55; }
.cl-capability-list a { display: inline-block; margin-bottom: 30px; border-bottom: 1px solid currentColor; }
.cl-capability-list code { font: inherit; }
.cl-capability-media {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  height: 650px;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #dce5ff;
}
.cl-capability-media img { width: 100%; height: 100%; object-fit: cover; }

.cl-proof {
  position: relative;
  min-height: 930px;
  overflow: hidden;
  color: #fff;
  background: #000;
}
.cl-proof > img,
.cl-proof-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-proof > img { object-fit: cover; }
.cl-proof-shade { background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.68) 38%, rgba(0,0,0,.05) 76%); }
.cl-proof-content {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 930px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.cl-proof-label { margin: 0 0 80px; font-size: 16px; }
.cl-proof h2 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(44px, 4.4vw, 64px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.05em;
}
.cl-proof-content > p:not(.cl-proof-label) {
  max-width: 600px;
  margin: 38px 0 26px;
  font-size: 18px;
  line-height: 1.55;
}
.cl-boundary-grid {
  display: grid;
  width: min(720px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.cl-boundary-grid article {
  padding: 24px;
  border: var(--control-stroke) solid rgba(255, 255, 255, .28);
  border-radius: var(--r-block);
  background: rgba(11, 13, 15, .74);
}
.cl-boundary-grid h3 { margin: 0 0 16px; font-size: 20px; font-weight: 500; }
.cl-boundary-grid ul { margin: 0; padding-left: 18px; color: #d2d4d0; }
.cl-boundary-grid li + li { margin-top: 8px; }
.cl-proof a { border-bottom: 1px solid currentColor; padding-bottom: 4px; }

.cl-resources { padding-block: var(--section-roomy); }
.cl-resource-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 72px;
}
.cl-resource-head h2 {
  max-width: 850px;
  margin: 0;
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.055em;
}
.cl-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cl-resource-grid a { color: var(--cl-ink); }
.cl-resource-grid figure { height: 520px; margin: 0 0 24px; overflow: hidden; border-radius: 10px; }
.cl-resource-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.cl-resource-grid a:hover img { transform: scale(1.025); }
.cl-resource-grid h3 { margin: 0; font-size: 23px; font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }

.cl-final { padding-block: var(--section-standard); border-top: 1px solid var(--cl-line); }
.cl-final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.cl-final h2 { margin: 0 0 28px; font-size: 64px; font-weight: 400; line-height: 1; letter-spacing: -.055em; }
.cl-final .cl-actions { justify-content: flex-start; }
.cl-contact > label { display: block; max-width: 580px; margin-bottom: 28px; font-size: 22px; font-weight: 500; line-height: 1.25; }
.cl-contact > div { display: grid; grid-template-columns: 1fr auto; gap: 18px; }
.cl-contact input { min-width: 0; min-height: var(--control-h-large); padding: 0 20px; border: 1px solid #858984; border-radius: var(--r-control); font: inherit; }
.cl-contact > p { margin: 18px 0 0; color: var(--cl-muted); font-size: 13px; }

@media (max-width: 999px) {
  .cl-use-case-grid { grid-template-columns: repeat(3, 1fr); }
  .cl-use-case-grid a:nth-child(n + 4) { display: none; }
  .cl-capability-grid { grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: 50px; }
}

@media (max-width: 699px) {
  .cl-wrap { padding-inline: 24px; }
  .cl-hero h1 { font-size: 62px; }
  .cl-hero-copy > p:not(.cl-kicker) { font-size: 17px; }
  .cl-hero-media { width: calc(100% - 24px); height: 570px; margin-top: 56px; }
  .cl-use-cases h2 { margin-bottom: 52px; font-size: 48px; }
  .cl-use-case-grid { grid-template-columns: 1fr; gap: 0; }
  .cl-boundary-grid { grid-template-columns: 1fr; }
  .cl-use-case-grid a,
  .cl-use-case-grid a:nth-child(n + 4) {
    display: flex;
    height: auto;
    align-items: center;
    padding: 22px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--cl-line);
    color: var(--cl-ink);
  }
  .cl-use-case-grid a:first-child { border-top: 1px solid var(--cl-line); }
  .cl-use-case-grid a::after,
  .cl-use-case-grid img { display: none; }
  .cl-use-case-grid span { position: static; width: 100%; font-size: 20px; }
  .cl-use-case-grid b { float: right; }
  .cl-capability-intro { text-align: center; }
  .cl-capability-intro h2 { font-size: 48px; }
  .cl-capability-grid { grid-template-columns: 1fr; gap: 44px; }
  .cl-capability-media { position: static; order: -1; height: 430px; }
  .cl-proof,
  .cl-proof-content { min-height: 780px; }
  .cl-proof-shade { background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.15) 85%); }
  .cl-proof-content { justify-content: flex-end; padding-bottom: 70px; }
  .cl-proof-label { margin-bottom: 36px; }
  .cl-proof h2 { font-size: 42px; }
  .cl-resource-grid,
  .cl-final-grid { grid-template-columns: 1fr; }
  .cl-resource-head { align-items: flex-start; flex-direction: column; }
  .cl-resource-head h2,
  .cl-final h2 { font-size: 48px; }
  .cl-resource-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .cl-resource-grid a { width: 82vw; flex: 0 0 auto; scroll-snap-align: start; }
  .cl-resource-grid figure { height: 430px; }
  .cl-final-grid { gap: 64px; }
  .cl-contact > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-use-case-grid img,
  .cl-resource-grid img { transition: none; }
}
}

@layer pages {
.commerce-banking {
  --cb-ink: #080808;
  --cb-muted: #62625f;
  --cb-blue: #2862f4;
  --cb-paper: #f7f6f5;
  --cb-line: #d7d7d2;
  overflow: clip;
  background: #fff;
  color: var(--cb-ink);
}

.cb-wrap {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding-inline: clamp(20px, 4.167vw, 60px);
}

.cb-kicker,
.cb-number {
  margin: 0;
  font: 400 12px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cb-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-size: 16px;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease);
}

.cb-button:hover { transform: translateY(-2px); }
.cb-button-primary { background: var(--cb-blue); color: #fff; }
.cb-button-outline { border-color: var(--cb-blue); color: var(--cb-blue); }
.cb-actions { display: flex; flex-wrap: wrap; }

.cb-hero {
  padding-block: var(--section-compact);
  background: #fff;
}

.cb-hero-copy {
  display: flex;
  min-height: 373px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cb-hero h1,
.cb-control h2,
.cb-entry h2,
.cb-growth h2,
.cb-products h2,
.cb-resources h2,
.cb-faq h2,
.cb-final h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.cb-hero h1 {
  max-width: 970px;
  margin: 24px 0 32px;
  font-size: clamp(48px, 4.45vw, 64px);
  line-height: 1;
}

.cb-hero-media {
  position: relative;
  width: min(calc(100% - 120px), 1320px);
  height: min(58vw, 836px);
  min-height: 620px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--r-block);
  background: #deded8;
}

.cb-hero-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cb-ledger-card {
  position: absolute;
  right: 5%;
  bottom: 7%;
  width: min(46%, 560px);
  border-radius: var(--r-block);
  padding: clamp(18px, 2.4vw, 34px);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
}

.cb-ledger-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--cb-line);
}

.cb-ledger-top span,
.cb-ledger-flow span {
  color: var(--cb-muted);
  font-size: 13px;
}

.cb-ledger-top strong {
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  letter-spacing: -0.05em;
}

.cb-ledger-flow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 13px 20px;
  padding-top: 22px;
}

.cb-ledger-flow b {
  font-weight: 400;
  text-align: right;
}

.cb-boundary {
  margin-top: 0;
  padding: 30px 0;
  background: #080808;
  color: #fff;
}

.cb-boundary .cb-wrap {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
}

.cb-boundary strong { font-size: 18px; font-weight: 400; }
.cb-boundary p { max-width: 760px; margin: 0; color: #aaa; line-height: 1.5; }
.cb-boundary a { white-space: nowrap; }

.cb-control {
  padding-block: var(--section-roomy);
  background: #080808;
  color: #fff;
}

.cb-control h2 {
  margin: 0 auto 96px;
  max-width: 1100px;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  text-align: center;
}

.cb-scroll-story {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: clamp(64px, 9vw, 132px);
  align-items: start;
}

.cb-story-visual {
  position: sticky;
  top: calc(var(--nav-h) + 92px);
  height: min(64vw, 660px);
  overflow: hidden;
  border-radius: var(--r-block);
  padding: clamp(20px, 3vw, 42px);
  background: #d7f2a7;
}

.cb-story-visual figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 400ms var(--ease), transform 600ms var(--ease-soft);
}

.cb-story-visual figure.is-active {
  opacity: 1;
  transform: scale(1);
}

.cb-story-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-block);
}

.cb-story-steps article {
  display: flex;
  min-height: 370px;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0 80px;
  border-bottom: 1px solid #393939;
  opacity: 0.32;
  transition: opacity 300ms var(--ease);
}

.cb-story-steps article:first-child { padding-top: 80px; }
.cb-story-steps article.is-active { opacity: 1; }
.cb-story-steps figure { display: none; }
.cb-story-steps h3 {
  margin: 22px 0 18px;
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.cb-story-steps article > p:last-child {
  max-width: 520px;
  margin: 0;
  color: #aaa;
  font-size: 17px;
  line-height: 1.55;
}

.cb-proof {
  padding-bottom: var(--section-roomy);
  background: #080808;
  color: #fff;
}

.cb-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cb-proof-grid div {
  display: flex;
  min-height: 310px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px 38px;
  border-left: 1px solid #3b3b3b;
}

.cb-proof-grid div:last-child { border-right: 1px solid #3b3b3b; }
.cb-proof-grid strong {
  font-size: clamp(72px, 8vw, 116px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.07em;
}
.cb-proof-grid span { max-width: 300px; margin-top: 24px; font-size: 17px; line-height: 1.4; }

.cb-entry {
  padding-block: var(--section-roomy);
  background: var(--cb-paper);
}

.cb-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 80px;
}

.cb-entry h2,
.cb-growth h2 {
  max-width: 1080px;
  margin: 0;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
}

.cb-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.cb-entry-grid article {
  display: flex;
  min-height: 510px;
  flex-direction: column;
  padding: 38px;
  border-radius: var(--r-block);
  background: #fff;
}

.cb-entry-grid h3 {
  margin: 60px 0 16px;
  font-size: clamp(32px, 3vw, 46px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
}

.cb-entry-grid article > p:not(.cb-kicker) {
  margin: 0;
  color: var(--cb-muted);
  line-height: 1.5;
}

.cb-entry-grid ul {
  margin: 32px 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--cb-line);
  list-style: none;
}

.cb-entry-grid li { margin-top: 10px; }
.cb-entry-grid li::before { content: "✓"; margin-right: 10px; }
.cb-entry-grid article > a { margin-top: auto; color: var(--cb-blue); }

.cb-growth {
  padding-block: var(--section-roomy);
  background: #fff;
}

.cb-growth h2 { margin-bottom: 80px; }
.cb-growth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
}

.cb-growth-grid article {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
}

.cb-drawing {
  position: relative;
  height: 440px;
  overflow: hidden;
  border-radius: var(--r-block);
  background: #dbe6ff;
}

.cb-drawing-bars {
  display: flex;
  align-items: flex-end;
  gap: 7%;
  padding: 60px 10% 54px;
}

.cb-drawing-bars span {
  position: relative;
  z-index: 1;
  width: 13%;
  height: var(--bar);
  border: 1px solid var(--cb-ink);
  background: #fff;
}

.cb-drawing-bars i {
  position: absolute;
  right: 7%;
  bottom: 42px;
  left: 7%;
  height: 2px;
  background: var(--cb-ink);
  transform: rotate(-24deg);
  transform-origin: left;
}

.cb-drawing-route {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 48px;
  background: #d7f2a7;
}

.cb-drawing-route span {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--cb-ink);
  border-radius: var(--r-round);
  padding: 20px;
  background: #fff;
}

.cb-drawing-route i {
  height: 1px;
  background: var(--cb-ink);
}

.cb-growth-grid h3 {
  margin: 30px 0 14px;
  font-size: 21px;
  font-weight: 400;
}

.cb-growth-grid p { max-width: 560px; margin: 0; color: var(--cb-muted); line-height: 1.5; }

.cb-account,
.cb-field-story {
  padding-block: var(--section-roomy);
}

.cb-account {
  background: var(--cb-paper);
}

.cb-account-grid,
.cb-field-story-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(50px, 9vw, 150px);
}

.cb-account h2,
.cb-field-story h2 {
  margin: 18px 0 0;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: -0.06em;
}

.cb-account-grid > div > p:not(.cb-kicker),
.cb-field-story-grid > div > p:not(.cb-kicker) {
  margin: 25px 0 0;
  color: var(--cb-muted);
  font-size: 18px;
  line-height: 1.65;
}

.cb-account figure {
  margin: 0;
  padding: clamp(20px, 3vw, 44px);
  border-radius: var(--r-block);
  background: #dbe6ff;
}

.cb-account figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-block);
  box-shadow: 0 22px 60px rgba(31, 49, 95, 0.15);
}

.cb-text-link {
  display: inline-flex;
  gap: 12px;
  margin-top: 28px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
}

.cb-field-story {
  background: var(--cb-blue);
  color: #fff;
}

.cb-field-story-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
}

.cb-field-story figure {
  overflow: hidden;
  margin: 0;
  border-radius: var(--r-block);
}

.cb-field-story figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cb-field-story-grid > div > p:not(.cb-kicker) {
  color: #fff;
}

.cb-products,
.cb-resources,
.cb-faq {
  padding-block: var(--section-roomy);
}
.cb-final { padding-block: var(--section-display); }

.cb-products h2,
.cb-resources h2,
.cb-faq h2 {
  margin: 0 0 64px;
  font-size: clamp(34px, 3.3vw, 48px);
  line-height: 1.1;
}

.cb-products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.cb-products-grid > a { color: var(--cb-ink); }
.cb-product-art {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--r-block);
  padding: 38px 0 0 38px;
}
.cb-product-art-console { background: #f2d6bc; }
.cb-product-art-payments { background: #dbe6ff; }
.cb-product-art-insights { background: #d7f2a7; }
.cb-product-art img {
  display: block;
  width: 120%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--r-block) 0 0 0;
  transition: transform 350ms var(--ease-soft);
}
.cb-products-grid > a:hover img { transform: translate(-8px, -8px); }
.cb-products-grid h3 {
  margin: 24px 0 10px;
  font-size: 21px;
  font-weight: 400;
}
.cb-products-grid p { min-height: 48px; margin: 0 0 20px; color: var(--cb-muted); line-height: 1.5; }
.cb-products-grid > a > span:last-child { color: var(--cb-blue); }

.cb-resources {
  border-top: 1px solid var(--cb-line);
}

.cb-resources-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--cb-line);
}

.cb-resources-grid a {
  display: grid;
  min-height: 300px;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  padding: 28px;
  border-bottom: 1px solid var(--cb-line);
  border-left: 1px solid var(--cb-line);
  color: var(--cb-ink);
}
.cb-resources-grid a:last-child { border-right: 1px solid var(--cb-line); }
.cb-resources-grid span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
.cb-resources-grid strong { align-self: end; font-size: 26px; font-weight: 400; line-height: 1.05; letter-spacing: -0.04em; }
.cb-resources-grid b { justify-self: end; font-size: 20px; font-weight: 400; }

.cb-faq .faq { max-width: none; }
.cb-faq h2 { margin-bottom: 38px; }

.cb-final h2 {
  max-width: 980px;
  margin: 0 0 42px;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
}

@media (max-width: 899px) {
  .cb-boundary .cb-wrap { grid-template-columns: 1fr; }
  .cb-boundary a { justify-self: start; }
  .cb-scroll-story { grid-template-columns: 1fr; gap: 0; }
  .cb-story-visual { display: none; }
  .cb-story-steps article { min-height: 0; padding: 56px 0; opacity: 1; }
  .cb-story-steps figure { display: block; overflow: hidden; margin: 0 0 32px; aspect-ratio: 16 / 10; border-radius: var(--r-block); }
  .cb-story-steps img { width: 100%; height: 100%; object-fit: cover; }
  .cb-entry-grid,
  .cb-products-grid,
  .cb-account-grid,
  .cb-field-story-grid { grid-template-columns: 1fr; }
  .cb-entry-grid article { min-height: 430px; }
  .cb-growth-grid { gap: 36px; }
  .cb-resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-resources-grid a:nth-child(2) { border-right: 1px solid var(--cb-line); }
}

@media (max-width: 599px) {
  .cb-wrap { padding-inline: 15px; }
  .cb-hero-copy { min-height: 301px; }
  .cb-hero h1 { margin: 20px 0 28px; font-size: 40px; line-height: 1; }
  .cb-hero-media { width: calc(100% - 30px); height: 520px; min-height: 0; }
  .cb-hero-media > img { object-position: 42% center; }
  .cb-ledger-card { right: -12%; bottom: 7%; width: 88%; padding: 18px; }
  .cb-ledger-top { align-items: start; flex-direction: column; gap: 8px; }
  .cb-ledger-top strong { font-size: 36px; }
  .cb-boundary { padding: 28px 0; }
  .cb-control h2 { margin-bottom: 44px; font-size: 48px; }
  .cb-story-steps article:first-child { padding-top: 0; }
  .cb-proof-grid { grid-template-columns: 1fr; }
  .cb-proof-grid div { min-height: 210px; border-right: 1px solid var(--cb-line); border-bottom: 1px solid var(--cb-line); }
  .cb-section-head { align-items: flex-start; flex-direction: column; margin-bottom: 50px; }
  .cb-entry h2,
  .cb-growth h2,
  .cb-final h2 { font-size: 48px; }
  .cb-entry-grid article { min-height: 400px; padding: 28px; }
  .cb-growth h2 { margin-bottom: 50px; }
  .cb-growth-grid { grid-template-columns: 1fr; }
  .cb-drawing { height: 330px; }
  .cb-drawing-route { grid-template-columns: 1fr; justify-items: center; padding: 32px; }
  .cb-drawing-route span { width: 100px; }
  .cb-drawing-route i { width: 1px; height: 28px; }
  .cb-products h2,
  .cb-resources h2,
  .cb-faq h2 { margin-bottom: 42px; font-size: 32px; }
  .cb-products-grid { gap: 50px; }
  .cb-product-art { padding: 24px 0 0 24px; }
  .cb-resources-grid { grid-template-columns: 1fr; }
  .cb-resources-grid a,
  .cb-resources-grid a:nth-child(2) { min-height: 220px; border-right: 1px solid var(--cb-line); }
  .cb-final .cb-actions { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-button,
  .cb-story-visual figure,
  .cb-products-grid img { transition: none; }
}
}

@layer pages {
.compliance-secure { overflow: clip; color: #090909; background: #fff; }
.compliance-secure * { box-sizing: border-box; }
.cs-kicker { margin: 0; font-size: 14px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.compliance-secure .cs-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; padding: 0 24px; border: 1.5px solid currentColor; border-radius: 8px; color: inherit; font-weight: 400; text-decoration: none; -webkit-text-stroke: .3px currentColor; paint-order: stroke fill; }
.compliance-secure .cs-button-primary { border-color: #2864f0; color: #fff; background: #2864f0; }
.compliance-secure .cs-actions { display: flex; justify-content: flex-start; margin-top: 32px; }
.compliance-secure .cs-hero { padding-block: var(--section-standard); color: #090909; background: #fff; }
.compliance-secure .cs-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; }
.compliance-secure .cs-hero h1 { margin: 22px 0 28px; font-size: 68px; font-weight: 400; letter-spacing: -.048em; line-height: .98; -webkit-text-stroke: .5px currentColor; paint-order: stroke fill; }
.compliance-secure .cs-hero p:not(.cs-kicker) { max-width: 560px; color: #505050; font-size: 19px; line-height: 1.5; }
.compliance-secure .cs-hero figure { height: 100%; margin: 0; overflow: hidden; border-radius: 18px; }
.compliance-secure .cs-hero img { width: 100%; height: 100% !important; object-fit: cover; }
.cs-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; margin-bottom: 62px; }
.cs-heading h2 { margin: 0; font-size: 64px; font-weight: 400; letter-spacing: -.048em; line-height: 1; -webkit-text-stroke: .5px currentColor; paint-order: stroke fill; }
.cs-heading p { margin: 0; color: #555; font-size: 18px; line-height: 1.5; }
.cs-guard { padding-block: var(--section-compact); border-block: 1px solid #d7d8d3; background: #fff; }
.cs-matrix-head { max-width: 900px; margin-bottom: 44px; }
.cs-matrix-head .cs-kicker { margin-bottom: 18px; color: #2864f0; }
.cs-matrix-head h2 { margin: 0; font-size: clamp(42px, 4vw, 56px); font-weight: 400; letter-spacing: -.048em; line-height: 1; -webkit-text-stroke: .5px currentColor; paint-order: stroke fill; }
.cs-control-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid #c9cbc5; }
.cs-control-matrix article { padding: 32px 36px 36px; }
.cs-control-matrix article + article { border-left: 1px solid #c9cbc5; }
.cs-control-matrix h3 { margin: 0 0 16px; font-size: 28px; font-weight: 400; letter-spacing: -.035em; line-height: 1.1; -webkit-text-stroke: .35px currentColor; paint-order: stroke fill; }
.cs-control-matrix p { margin: 0; color: #555; font-size: 17px; line-height: 1.55; }
.cs-industries { padding-block: var(--section-compact); background: #f3f1eb; }
.cs-industries h2 { max-width: 840px; margin: 0 0 62px; font-size: 64px; font-weight: 400; letter-spacing: -.048em; line-height: 1; -webkit-text-stroke: .5px currentColor; paint-order: stroke fill; }
.cs-industry-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.cs-industry-rail article { display: flex; overflow: hidden; flex-direction: column; border-radius: 18px; background: #fff; }
.cs-industry-rail img { width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
.cs-industry-rail article > :not(img) { margin-inline: 28px; }
.cs-industry-rail article > p { margin-top: 28px; color: #666; font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.cs-industry-rail h3 { font-size: 26px; font-weight: 400; letter-spacing: -.035em; line-height: 1.12; -webkit-text-stroke: .35px currentColor; paint-order: stroke fill; }
.cs-industry-rail a { display: block; margin-top: auto; margin-bottom: 32px; color: inherit; font-weight: 400; text-decoration: none; -webkit-text-stroke: .3px currentColor; paint-order: stroke fill; }
.cs-assessment { display: grid; place-items: center; padding-block: var(--section-standard); text-align: center; background: #d8ff43; }
.cs-assessment h2 { max-width: 940px; margin: 0 auto 35px; font-size: 68px; font-weight: 400; letter-spacing: -.048em; line-height: 1; -webkit-text-stroke: .5px currentColor; paint-order: stroke fill; }
.cs-reading { padding-block: var(--section-compact); color: #fff; background: #111; }
.cs-reading h2 { margin: 0 0 24px; font-size: 28px; font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
.cs-reading-grid { display: flex; gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; }
.cs-reading-grid a { min-width: 300px; min-height: 180px; padding: 24px; border: 1px solid #555; border-radius: 15px; color: inherit; text-decoration: none; scroll-snap-align: start; }
.cs-reading-grid span { display: block; margin-bottom: 44px; color: #aaa; font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.cs-reading-grid strong { font-size: 22px; font-weight: 400; line-height: 1.25; -webkit-text-stroke: .35px currentColor; paint-order: stroke fill; }
.cs-disclaimer { margin: 32px 0 0; max-width: 900px; color: #888; font-size: 13px; line-height: 1.5; }
@media (max-width: 760px) {
  .compliance-secure .cs-hero-grid, .cs-heading { grid-template-columns: 1fr; gap: 36px; }
  .compliance-secure .cs-hero h1 { font-size: 38px; }
  .cs-heading h2, .cs-matrix-head h2, .cs-industries h2, .cs-assessment h2 { font-size: 48px; }
  .compliance-secure .cs-hero figure { height: 360px; }
  .cs-matrix-head { margin-bottom: 44px; }
  .cs-control-matrix { grid-template-columns: 1fr; }
  .cs-control-matrix article { padding: 30px 0; }
  .cs-control-matrix article + article { border-top: 1px solid #c9cbc5; border-left: 0; }
  .cs-control-matrix h3 { font-size: 26px; }
  .cs-industry-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .cs-industry-rail article { min-width: 82vw; scroll-snap-align: start; }
  .cs-reading-grid a { min-width: 82vw; scroll-snap-align: start; }
  .compliance-secure .cs-actions { flex-wrap: wrap; }
}
}

@layer pages {
.connect-loyalty {
  --cn-ink: #0b0d0f;
  --cn-muted: #5f625e;
  --cn-paper: #f2f1ed;
  --cn-blue: #2648ef;
  overflow: clip;
  color: var(--cn-ink);
  background: var(--cn-paper);
}

.connect-loyalty * { box-sizing: border-box; }
.cn-wrap { width: min(calc(100% - (2 * var(--layout-gutter))), var(--content-standard)); margin-inline: auto; }
.cn-kicker { margin: 0; font: 700 13px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.connect-loyalty h1,
.connect-loyalty h2,
.connect-loyalty h3 { margin-top: 0; color: inherit; letter-spacing: -.055em; text-wrap: balance; }
.connect-loyalty p { text-wrap: pretty; }
.connect-loyalty h2 { font-size: clamp(42px, 5.5vw, 76px); font-weight: 400; line-height: .98; }
.connect-loyalty h3 { font-weight: 400; }

.cn-hero { padding-block: var(--section-standard); color: #fff; background: #080808; }
.cn-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr); gap: clamp(48px, 5vw, 76px); align-items: center; }
.cn-hero h1 { max-width: 11ch; margin: 28px 0 30px; font-size: clamp(60px, 6.4vw, 92px); font-weight: 400; line-height: .92; }
.cn-hero-copy > p:not(.cn-kicker) { max-width: 610px; margin: 0; color: #c8cac6; font-size: 20px; line-height: 1.55; }
.cn-actions { display: flex; flex-wrap: wrap; margin-top: 36px; }
.cn-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 24px; border: 1px solid currentColor; border-radius: 5px; font-weight: 700; }
.cn-button-light { border-color: #fff; color: #0b0d0f; background: #fff; }
.cn-button-outline-light { color: #fff; background: transparent; }
.cn-button-dark { color: #fff; background: var(--cn-ink); }
.cn-hero-media { position: relative; min-height: 690px; margin: 0; overflow: hidden; border-radius: 28px; background: #222; }
.cn-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn-hero-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); }
.cn-flow-card { position: absolute; z-index: 1; right: 26px; bottom: 26px; width: min(390px, calc(100% - 52px)); padding: 24px; border: 1px solid rgba(255,255,255,.34); border-radius: 18px; color: #111; background: rgba(255,255,255,.94); box-shadow: 0 24px 70px rgba(0,0,0,.28); backdrop-filter: blur(14px); }
.cn-flow-card > span { display: block; margin-bottom: 15px; color: #5f625e; font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.cn-flow-card div { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid #d8d9d4; font-size: 13px; }
.cn-flow-card b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; background: #111; font-size: 10px; }
.cn-flow-card i { color: #315d27; font-style: normal; font-weight: 700; }

.cn-start,
.cn-ecosystem,
.cn-use-cases,
.cn-package,
.cn-faq { padding: var(--section-roomy) 0; }
.cn-section-head { max-width: 980px; margin-bottom: 64px; }
.cn-section-head h2 { margin: 24px 0; }
.cn-section-head > p:last-child { max-width: 760px; margin: 0; color: var(--cn-muted); font-size: 19px; line-height: 1.6; }
.cn-section-head-wide { max-width: 1080px; }
.cn-record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.cn-record-grid article { overflow: hidden; border-radius: 22px; background: #fff; }
.cn-record-grid figure { height: 280px; margin: 0; overflow: hidden; background: #e5e6e1; }
.cn-record-grid img { width: 100%; height: 100%; object-fit: cover; }
.cn-record-grid article > span,
.cn-use-case-grid article span { display: block; margin: 28px 28px 12px; color: var(--cn-muted); font: 700 12px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.cn-record-grid h3 { margin: 0 28px 14px; font-size: 34px; line-height: 1; }
.cn-record-grid article > p { margin: 0; padding: 0 28px 32px; color: var(--cn-muted); font-size: 16px; line-height: 1.55; }

.cn-journey { padding: var(--section-display) 0; color: #fff; background: #0c0d10; }
.cn-journey-head { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 58px; }
.cn-journey-head h2 { margin: 22px 0 0; }
.cn-controls { display: flex; gap: 8px; }
.cn-controls button { min-width: 48px; height: 48px; padding: 0 14px; border: 1px solid #676a67; border-radius: 5px; color: #fff; background: transparent; font: inherit; cursor: pointer; }
.cn-workflow { display: grid; grid-template-columns: minmax(270px, .68fr) minmax(0, 1.32fr); gap: 20px; }
.cn-tabs { display: grid; gap: 8px; }
.cn-tabs button { display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px; min-height: 105px; padding: 20px; border: 1px solid #6a6d68; border-radius: 12px; color: #d0d2cd; background: #171817; text-align: left; cursor: pointer; }
.cn-tabs button[aria-selected="true"] { border-color: #fff; color: #111; background: #fff; }
.cn-tabs span { grid-row: 1 / 3; font: 700 11px/1.3 var(--font-mono); }
.cn-tabs strong { font-size: 18px; }
.cn-tabs small { font-size: 13px; }
.cn-panels { min-height: 448px; }
.cn-panels article { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; min-height: 448px; padding: 44px; border-radius: 22px; color: #111; background: #f2f1ed; }
.cn-panels article[hidden] { display: none; }
.cn-panel-copy h3 { margin: 18px 0; font-size: clamp(34px, 3.4vw, 50px); line-height: 1; }
.cn-panel-copy > p:last-child { margin: 0; color: #5f625e; font-size: 16px; line-height: 1.6; }
.cn-template-ui,
.cn-map-ui,
.cn-log-ui,
.cn-run-ui { min-height: 300px; padding: 26px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px rgba(0,0,0,.1); }
.cn-template-ui span,
.cn-log-ui > span { display: block; margin-bottom: 26px; color: #6a6d68; font: 700 11px/1 var(--font-mono); letter-spacing: .08em; }
.cn-template-ui b { display: block; padding: 20px 4px; border-top: 1px solid #d9dad5; font-size: 16px; }
.cn-map-ui { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.cn-map-ui b,
.cn-map-ui i { padding: 16px; border: 1px solid #c8cac5; border-radius: 8px; font-style: normal; }
.cn-map-ui i { font: 12px/1.3 var(--font-mono); }
.cn-map-ui span { grid-column: 1 / -1; color: var(--cn-blue); font-size: 28px; text-align: center; }
.cn-log-ui { display: flex; flex-direction: column; justify-content: center; background: #101111; }
.cn-log-ui code { padding: 11px 0; color: #d8dad6; font: 13px/1.4 var(--font-mono); }
.cn-log-ui strong { margin-top: 22px; color: #b9f183; }
.cn-run-ui { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: center; }
.cn-run-ui span { padding: 18px 12px; border-radius: 10px; background: #f0f1ec; color: #5f625e; font-size: 12px; }
.cn-run-ui b { display: block; margin-bottom: 8px; color: #111; font-size: 32px; }

.cn-ecosystem { background: #fff; }
.cn-logo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cn-logo-grid li { min-height: 190px; padding: 24px; border: 1px solid #b8bab5; border-radius: 18px; background: #fafaf7; }
.cn-logo { display: flex; width: 50px; height: 50px; align-items: center; justify-content: center; margin-bottom: 34px; padding: 8px; border: 1px solid #c6c8c2; border-radius: 13px; background: #fff; }
.cn-logo img { width: 100%; height: 100%; object-fit: contain; }
.cn-logo-grid li:nth-child(7) .cn-logo { border-color: #111; background: #111; }
.cn-logo-grid strong,
.cn-logo-grid small { display: block; }
.cn-logo-grid strong { font-size: 16px; line-height: 1.2; }
.cn-logo-grid small { margin-top: 7px; color: var(--cn-muted); font-size: 12px; }
.cn-ecosystem-note { max-width: 830px; margin: 28px 0 0; color: var(--cn-muted); font-size: 13px; line-height: 1.55; }

.cn-use-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.cn-use-case-grid article { overflow: hidden; border-radius: 24px; background: #fff; }
.cn-use-case-grid img { width: 100%; height: 420px; object-fit: cover; }
.cn-use-case-grid h3 { margin: 0 28px 16px; font-size: clamp(34px, 3.2vw, 48px); line-height: 1; }
.cn-use-case-grid p { margin: 0; padding: 0 28px 34px; color: var(--cn-muted); font-size: 17px; line-height: 1.55; }

.cn-insight { padding: var(--section-roomy) 0; color: #fff; background: var(--cn-blue); }
.cn-insight-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(52px, 8vw, 112px); align-items: center; }
.cn-insight h2 { margin: 24px 0; }
.cn-insight p:not(.cn-kicker) { max-width: 560px; margin: 0; color: #eef0ff; font-size: 18px; line-height: 1.6; }
.cn-insight a { display: inline-flex; margin-top: 30px; font-weight: 700; }
.cn-insight a span { margin-left: 10px; }
.cn-insight figure { position: relative; margin: 0; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.22); }
.cn-insight img { width: 100%; min-height: 500px; object-fit: cover; }
.cn-insight figcaption { position: absolute; right: 22px; bottom: 22px; width: min(310px, calc(100% - 44px)); padding: 22px; border-radius: 14px; color: #111; background: rgba(255,255,255,.95); }
.cn-insight figcaption span,
.cn-insight figcaption strong,
.cn-insight figcaption small { display: block; }
.cn-insight figcaption span { color: #5f625e; font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.cn-insight figcaption strong { margin: 12px 0 7px; font-size: 26px; }
.cn-insight figcaption small { color: #5f625e; }

.cn-boundary { padding: var(--section-display) 0; color: #fff; background: #090a0a; }
.cn-boundary .cn-section-head > p:last-child { color: #b7bab5; }
.cn-boundary-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #454744; }
.cn-boundary-grid article { min-height: 300px; padding: 34px; border-bottom: 1px solid #454744; }
.cn-boundary-grid article + article { border-left: 1px solid #454744; }
.cn-boundary-grid span { color: #aeb1ad; font: 700 12px/1 var(--font-mono); }
.cn-boundary-grid h3 { margin: 80px 0 18px; font-size: 34px; line-height: 1; }
.cn-boundary-grid p { margin: 0; color: #b7bab5; line-height: 1.6; }

.cn-package-grid,
.cn-final-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(50px, 8vw, 120px); align-items: end; }
.cn-package h2 { margin: 22px 0 0; }
.cn-package-grid > div:last-child > p { margin: 0; color: var(--cn-muted); font-size: 19px; line-height: 1.6; }
.cn-package .cn-button { margin-top: 30px; }
.cn-faq { background: #fff; }
.cn-faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(60px, 10vw, 150px); }
.cn-faq h2 { margin: 22px 0 0; }
.cn-faq .faq details { border-color: #cfd1cb; }
.cn-final { padding: var(--section-display) 0; color: #fff; background: #0b0d0f; }
.cn-final h2 { max-width: 820px; margin: 22px 0 0; }
.cn-final .cn-actions { justify-content: flex-end; }

@media (max-width: 980px) {
  .cn-hero-grid,
  .cn-insight-grid { grid-template-columns: 1fr; }
  .cn-hero-media { min-height: 620px; }
  .cn-record-grid { grid-template-columns: 1fr; }
  .cn-record-grid article { display: grid; grid-template-columns: .8fr 1.2fr; }
  .cn-record-grid figure { grid-row: 1 / 5; height: 100%; min-height: 320px; }
  .cn-record-grid article > span { margin-top: 42px; }
  .cn-workflow { grid-template-columns: 1fr; }
  .cn-tabs { grid-template-columns: repeat(4, minmax(170px, 1fr)); overflow-x: auto; }
  .cn-logo-grid { grid-template-columns: repeat(3, 1fr); }
  .cn-faq-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 1100px) {
  .cn-record-grid { grid-template-columns: 1fr; }
  .cn-record-grid article { display: grid; grid-template-columns: .8fr 1.2fr; }
  .cn-record-grid figure { grid-row: 1 / 5; height: 100%; min-height: 320px; }
  .cn-record-grid article > span { margin-top: 42px; }
  .cn-workflow { grid-template-columns: 1fr; }
  .cn-tabs { grid-template-columns: repeat(4, minmax(170px, 1fr)); overflow-x: auto; }
  .cn-boundary-grid { grid-template-columns: 1fr; }
  .cn-boundary-grid article { min-height: 0; padding: 34px 0; }
  .cn-boundary-grid article + article { border-left: 0; }
  .cn-boundary-grid h3 { margin-top: 46px; }
}

@media (max-width: 700px) {
  .cn-hero h1 { max-width: none; font-size: clamp(46px, 13vw, 52px); }
  .cn-hero-copy > p:not(.cn-kicker) { font-size: 17px; }
  .cn-hero-media { min-height: 490px; border-radius: 18px; }
  .cn-flow-card { right: 14px; bottom: 14px; width: calc(100% - 28px); padding: 18px; }
  .cn-section-head { margin-bottom: 40px; }
  .connect-loyalty h2 { font-size: 42px; }
  .cn-record-grid article { display: block; }
  .cn-record-grid figure { height: 260px; min-height: 0; }
  .cn-record-grid article > span { margin-top: 28px; }
  .cn-journey-head { display: block; }
  .cn-controls { margin-top: 28px; }
  .cn-panels article { grid-template-columns: 1fr; min-height: 0; padding: 24px; }
  .cn-template-ui,
  .cn-map-ui,
  .cn-log-ui,
  .cn-run-ui { min-height: 260px; }
  .cn-run-ui { grid-template-columns: 1fr; }
  .cn-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-logo-grid li { min-height: 170px; padding: 20px; }
  .cn-use-case-grid { grid-template-columns: 1fr; }
  .cn-use-case-grid img { height: 300px; }
  .cn-insight img { min-height: 380px; }
  .cn-package-grid,
  .cn-final-grid { grid-template-columns: 1fr; }
  .cn-final .cn-actions { justify-content: flex-start; }
}
}

@layer pages {
.page-console {
  background: #f7f7f4;
}

.page-console .footer-ground {
  display: none;
}

.console-access {
  display: grid;
  min-height: calc(100svh - var(--nav-h));
  align-items: center;
  padding-block: var(--section-standard);
}

.console-access-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .78fr);
  gap: clamp(72px, 10vw, 160px);
  align-items: center;
}

.console-intro {
  max-width: 760px;
}

.console-label,
.console-card-label {
  margin: 0 0 24px;
  font: 12px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.console-intro h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(56px, 6.4vw, 94px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.06em;
}

.console-lede {
  max-width: 670px;
  margin: 32px 0 0;
  color: #626560;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
}

.console-capabilities {
  margin-top: 64px;
  border-top: 1px solid #d3d5cf;
}

.console-capabilities article {
  padding-block: 22px;
  border-bottom: 1px solid #d3d5cf;
}

.console-capabilities h2 {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.025em;
}

.console-capabilities p {
  max-width: 600px;
  margin: 0;
  color: #737670;
  line-height: 1.5;
}

.console-card {
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid #d3d5cf;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(20, 24, 20, .08);
}

.console-card-mark {
  display: grid;
  width: 48px;
  height: 48px;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 56px;
  padding: 8px;
  border: 1px solid #cfd1cb;
  border-radius: 10px;
}

.console-card-mark span {
  border-radius: 2px;
  background: #2864f0;
}

.console-card-label {
  margin-bottom: 18px;
  color: #737670;
}

.console-card h2 {
  max-width: 420px;
  margin: 0;
  font-size: clamp(40px, 4.2vw, 62px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.05em;
}

.console-card > p:not(.console-card-label, .console-card-help) {
  max-width: 440px;
  margin: 24px 0 0;
  color: #626560;
  font-size: 18px;
  line-height: 1.5;
}

.console-card-list {
  margin: 40px 0 0;
  border-top: 1px solid #dfe1dc;
}

.console-card-list div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
  border-bottom: 1px solid #dfe1dc;
}

.console-card-list dt,
.console-card-list dd {
  margin: 0;
  font-size: 14px;
}

.console-card-list dd {
  color: #737670;
  text-align: right;
}

.console-card-action {
  width: 100%;
  margin-top: 32px;
  color: #fff;
  background: #2864f0;
}

.console-card-help {
  margin: 18px 0 0;
  color: #737670;
  font-size: 14px;
  text-align: center;
}

.console-card-help a {
  color: #1e43cc;
}

@media (max-width: 900px) {
  .console-access {
    align-items: start;
  }

  .console-access-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
  }

  .console-card {
    max-width: 620px;
  }
}

@media (max-width: 560px) {
  .console-access {
    padding-block: var(--section-compact);
  }

  .console-intro h1 {
    font-size: 52px;
  }

  .console-capabilities {
    margin-top: 48px;
  }

  .console-card {
    padding: 28px 24px;
  }

  .console-card-mark {
    margin-bottom: 44px;
  }
}
}

@layer pages {
.enterprise-page {
  --ep-ink: #030303;
  --ep-muted: #5f5f5b;
  --ep-line: #d4d4cf;
  --ep-blue: var(--accent-ink);
  overflow: clip;
  background: #fff;
  color: var(--ep-ink);
}

.ep-wrap {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding-inline: clamp(20px, 8.333vw, 120px);
}

.ep-button {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 1px solid var(--ep-blue);
  border-radius: var(--r-control);
  font-size: 16px;
}
.ep-button-primary { background: var(--ep-blue); color: #fff; }
.ep-button-outline { background: #fff; color: var(--ep-blue); }
.ep-text-link { display: inline-flex; gap: 10px; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.ep-actions { display: flex; align-items: center; }

.ep-hero {
  padding-block: var(--section-roomy);
}
.ep-hero-grid {
  display: grid;
  grid-template-columns: 525px 525px;
  justify-content: space-between;
  align-items: center;
  gap: 80px;
}
.ep-hero-copy > p:first-child {
  margin: 0 0 20px;
  font-size: 18px;
}
.ep-hero h1 {
  margin: 0;
  font-size: 74px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.055em;
}
.ep-hero-copy > p:nth-of-type(2) {
  margin: 30px 0;
  color: var(--ep-muted);
  font-size: 18px;
  line-height: 1.55;
}
.ep-hero-media {
  width: 525px;
  height: 525px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-block);
}
.ep-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ep-intro {
  padding-block: var(--section-compact);
}
.ep-intro .ep-wrap,
.ep-foundation .ep-wrap {
  width: 100%;
  padding-inline: clamp(20px, 4.5vw, 65px);
}
.ep-intro p {
  max-width: 1240px;
  margin: 0;
  font-size: clamp(34px, 3.45vw, 50px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.ep-intro strong {
  display: inline-block;
  padding: 5px 18px 8px;
  border-radius: 999px;
  background: var(--ep-ink);
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}

.ep-foundation {
  padding-bottom: var(--section-roomy);
}
.ep-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.ep-feature-grid article {
  display: flex;
  min-height: 512px;
  flex-direction: column;
  overflow: hidden;
  padding: 0 20px 24px;
  border-radius: 24px;
  background: #f1f1f1;
}
.ep-feature-grid figure {
  height: 270px;
  margin: 0 -20px 22px;
  overflow: hidden;
  background: #f1f1ee;
}
.ep-feature-grid img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.ep-feature-grid h2,
.ep-support-grid h3 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}
.ep-feature-grid p,
.ep-support-grid p { margin: 0 0 20px; color: var(--ep-muted); line-height: 1.5; }
.ep-feature-grid a {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  color: var(--ep-blue);
  font-size: 14px;
  font-weight: 500;
}
.ep-feature-grid a::before {
  content: "+";
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
}
.ep-support-grid a { color: var(--ep-ink); text-decoration: underline; text-underline-offset: 4px; }
.ep-support {
  padding-block: var(--section-roomy);
}
.ep-section-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 80px;
  margin-bottom: 50px;
}
.ep-section-intro h2,
.ep-tiers h2,
.ep-pricing-title h2,
.ep-faq h2,
.ep-resources h2 {
  max-width: 1120px;
  margin: 0;
  font-size: 62px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.045em;
}
.ep-section-intro p { max-width: 430px; margin: 0; color: var(--ep-muted); font-size: 17px; line-height: 1.5; }
.ep-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ep-support-grid li {
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: clamp(24px, 3vw, 40px);
}
.ep-support-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 36px;
  color: var(--ep-blue);
  stroke-width: 1.5;
}
.ep-support-grid li a { margin-top: auto; }

.ep-tiers {
  padding-block: var(--section-roomy);
  background: var(--ep-ink);
  color: #fff;
}
.ep-tiers h2 { margin-bottom: 100px; }
.ep-tier-showcase {
  display: grid;
  grid-template-columns: 760px minmax(0, 1fr);
  align-items: start;
  gap: 80px;
}
.ep-tier-showcase figure {
  position: sticky;
  top: calc(var(--nav-h) + 86px);
  height: 518px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-block);
}
.ep-tier-showcase img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ep-tier-list article { min-height: 245px; padding: 18px 0 44px; border-bottom: 1px solid #3c3c3c; }
.ep-tier-list h3 { display: flex; justify-content: space-between; gap: 24px; margin: 0 0 20px; font-size: 30px; font-weight: 500; line-height: 1.1; }
.ep-tier-list h3 span { color: #aaa; font-size: 16px; white-space: nowrap; }
.ep-tier-list p { margin: 0; color: #aaa; font-size: 17px; line-height: 1.55; }

.ep-proof {
  padding-block: var(--section-roomy);
  background: var(--ep-ink);
  color: #fff;
}
.ep-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  align-items: end;
  gap: 100px;
}
.ep-proof h2 {
  margin: 0;
  font-size: clamp(42px, 4.5vw, 64px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.045em;
}
.ep-proof p { margin: 0 0 28px; color: #aaa; font-size: 18px; line-height: 1.6; }
.ep-proof a { border-bottom: 1px solid currentColor; padding-bottom: 4px; }

.ep-pricing-title {
  height: 120px;
  padding-top: 28px;
}
.ep-pricing-title h2 {
  font-size: 58px;
  line-height: 1;
}

.ep-pricing {
  position: relative;
  padding-bottom: 0;
}
.ep-pricing-media {
  width: 100%;
  height: 525px;
  margin: 0;
  overflow: hidden;
}
.ep-pricing-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 43%; }
.ep-pricing-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: -124px;
}
.ep-pricing-cards article {
  display: flex;
  min-height: 246px;
  flex-direction: column;
  padding: 28px;
  border-radius: 12px;
  background: #f2f2f2;
}
.ep-pricing-cards article > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.ep-pricing-cards h3,
.ep-pricing-cards strong {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.ep-pricing-cards .ep-price {
  display: flex;
  max-width: 230px;
  align-items: flex-end;
  flex-direction: column;
  margin: 0;
  color: var(--ep-ink);
  text-align: right;
}
.ep-pricing-cards .ep-price span {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
}
.ep-pricing-cards .ep-button {
  min-height: 47px;
  align-self: flex-start;
  margin-top: auto;
  padding: 11px 20px;
  border-radius: 5px;
  font-size: 14px;
}
.ep-faq {
  padding-block: var(--section-standard);
}
.ep-faq h2 { margin-bottom: 54px; }
.ep-faq-grid {
  display: grid;
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
}
.ep-faq-grid details { align-self: start; }

.ep-resources {
  padding-block: var(--section-standard);
}
.ep-resources h2 { margin-bottom: 54px; }
.ep-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ep-line); }
.ep-resource-grid a {
  display: grid;
  min-height: 230px;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  padding: 28px;
  border-bottom: 1px solid var(--ep-line);
  border-left: 1px solid var(--ep-line);
  color: var(--ep-ink);
}
.ep-resource-grid a:nth-child(3n) { border-right: 1px solid var(--ep-line); }
.ep-resource-grid strong { font-size: 24px; font-weight: 500; }
.ep-resource-grid span { align-self: end; color: var(--ep-muted); line-height: 1.5; }
.ep-resource-grid b { justify-self: end; font-weight: 400; }

@media (max-width: 999px) {
  .ep-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr); gap: 48px; }
  .ep-hero h1 { font-size: 58px; }
  .ep-hero-media { width: 100%; height: auto; aspect-ratio: 1; }
  .ep-tier-showcase { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); gap: 48px; }
  .ep-tier-showcase figure { width: 100%; height: auto; aspect-ratio: 760 / 518; }
}

@media (max-width: 699px) {
  .ep-wrap { padding-inline: 24px; }
  .ep-hero-grid,
  .ep-section-intro,
  .ep-tier-showcase,
  .ep-proof-grid,
  .ep-pricing-cards,
  .ep-faq-grid { grid-template-columns: 1fr; }
  .ep-hero h1 { font-size: 52px; }
  .ep-hero-copy > p:nth-of-type(2) { font-size: 17px; }
  .ep-actions { align-items: stretch; flex-direction: column; }
  .ep-hero-media { margin-top: 56px; border-radius: 0; }
  .ep-intro p { font-size: 30px; }
  .ep-feature-grid,
  .ep-support-grid,
  .ep-resource-grid { grid-template-columns: 1fr; }
  .ep-feature-grid { gap: 56px; }
  .ep-feature-grid figure { height: auto; aspect-ratio: 380 / 270; }
  .ep-section-intro { align-items: start; gap: 24px; margin-bottom: 56px; }
  .ep-section-intro h2,
  .ep-tiers h2,
  .ep-pricing-title h2,
  .ep-faq h2,
  .ep-resources h2 { font-size: 46px; }
  .ep-support-grid { gap: 52px; }
  .ep-tiers h2 { margin-bottom: 56px; }
  .ep-tier-showcase figure { position: static; }
  .ep-tier-list article { min-height: 0; padding: 42px 0; }
  .ep-tier-list h3 { align-items: flex-start; flex-direction: column; gap: 8px; }
  .ep-proof-grid { gap: 48px; }
  .ep-pricing-title { height: auto; padding: 64px 0 40px; }
  .ep-pricing-title h2 { font-size: 46px; }
  .ep-pricing-media { height: 360px; }
  .ep-pricing-cards { gap: 20px; margin-top: -72px; }
  .ep-pricing-cards article { min-height: 246px; padding: 24px; }
  .ep-pricing-cards article > div { gap: 16px; }
  .ep-pricing-cards h3,
  .ep-pricing-cards strong { font-size: 26px; }
  .ep-pricing-cards strong { text-align: left; }
  .ep-resource-grid a { min-height: 210px; border-right: 1px solid var(--ep-line); }
}
}

@layer pages {
.page-release-notes main {
  overflow: clip;
  color: #0b0d0f;
  background: #fff;
}

.fl-hero {
  padding-block: var(--section-display);
  border-bottom: 1px solid #d9d9d6;
}

.fl-hero-inner {
  display: grid;
  justify-items: center;
  gap: 40px;
  text-align: center;
}

.fl-hero h1 {
  margin: 0;
  font-size: clamp(72px, 12vw, 176px);
  line-height: 0.88;
  letter-spacing: -0.065em;
  font-weight: 400;
}

.fl-hero p {
  max-width: 760px;
  margin: 0;
  font-size: clamp(21px, 2.1vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.fl-feed { padding-block: var(--section-standard); }

.fl-feed-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.56fr);
  gap: 48px;
  align-items: end;
  padding-bottom: 48px;
}

.fl-feed-intro h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 400;
}

.fl-feed-intro > p {
  max-width: 56ch;
  margin: 0;
  color: #666863;
}

.fl-list { border-top: 1px solid #d9d9d6; }

.fl-entry {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(40px, 5vw, 72px) 0;
  border-bottom: 1px solid #d9d9d6;
  color: inherit;
}

.fl-entry figure {
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-block);
  background: #f0f0ec;
}

.fl-entry img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-soft);
}

.fl-entry:hover img { transform: scale(1.018); }

.fl-entry div > p {
  margin: 0 0 24px;
  color: #6a6d68;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fl-entry h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 400;
  text-wrap: balance;
}

.fl-entry-planned div > p { color: var(--accent-ink); }

.fl-empty[hidden] { display: none; }

.fl-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-top: 56px;
}

.fl-pagination > div { display: flex; gap: 8px; }

.fl-pagination button {
  min-width: 46px;
  height: 46px;
  padding-inline: 12px;
  border: 1px solid #c9cac4;
  border-radius: 50%;
  transition: color 180ms var(--ease), background 180ms var(--ease), opacity 180ms var(--ease);
}

.fl-pagination button:hover:not(:disabled),
.fl-pagination button[aria-current="page"] {
  color: #fff;
  background: #0b0d0f;
}

.fl-pagination button:disabled { opacity: 0.28; }

.fl-final {
  padding-block: var(--section-display);
  color: #fff;
  background: #0b0d0f;
}

.fl-final-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}

.fl-final h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(38px, 5.5vw, 76px);
  line-height: 1;
  letter-spacing: -0.055em;
  font-weight: 400;
}

.fl-final .btn {
  flex: none;
  color: #0b0d0f;
  background: #fff;
}

@media (max-width: 760px) {
  .fl-hero-inner { gap: 24px; }
  .fl-hero h1 {
    max-width: 100%;
    font-size: clamp(50px, 15vw, 58px);
    white-space: nowrap;
  }
  .fl-feed-intro { grid-template-columns: 1fr; gap: 24px; padding-bottom: 36px; }
  .fl-entry { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; }
  .fl-entry div > p { margin-bottom: 14px; }
  .fl-final-inner { display: block; }
  .fl-final .btn { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-entry img { transition: none; }
}
}

@layer pages {
.ipc-page { --ipc-blue: #2864f0; overflow: clip; color: #0a0a0a; background: #fff; }
.ipc-page * { box-sizing: border-box; }
.ipc-label { margin: 0; font-size: 26px; font-weight: 400; letter-spacing: -.03em; }
.ipc-hero h1 { width: max-content; margin: 62px 0 80px; font-size: clamp(94px, 12.2vw, 176px); font-weight: 400; line-height: .88; letter-spacing: -.07em; white-space: nowrap; }
.ipc-hero-media { display: grid; grid-template-columns: 1.55fr .85fr; gap: 38px; }
.ipc-hero-media figure { height: 620px; margin: 0; overflow: hidden; border-radius: 24px; }
.ipc-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.ipc-hero-media figure:last-child img { object-position: 58% center; }
.ipc-capabilities { position: relative; background: #fff; }
.ipc-tabs { display: flex; gap: 32px; overflow-x: auto; padding-bottom: 22px; border-bottom: 1px solid #aaa; scrollbar-width: none; }
.ipc-tabs::-webkit-scrollbar { display: none; }
.ipc-tabs button { flex: none; padding: 0 0 12px; border: 0; border-bottom: 3px solid transparent; color: #666; background: transparent; font: inherit; font-size: 18px; font-weight: 400; cursor: pointer; }
.ipc-tabs button[aria-selected="true"] { border-color: #111; color: #111; }
.ipc-panels { min-height: 690px; padding-top: 46px; }
.ipc-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ipc-panel[hidden] { display: none; }
.ipc-panel article { min-width: 0; }
.ipc-panel img { width: 100%; height: 390px; object-fit: cover; border-radius: 18px; background: #eee; }
.ipc-panel h3 { margin: 24px 0 12px; font-size: 30px; line-height: 1; letter-spacing: -.04em; }
.ipc-panel p { margin: 0 0 18px; color: #555; font-size: 17px; line-height: 1.5; }
.ipc-panel a { color: inherit; font-weight: 400; text-decoration: none; }
.ipc-section-head { display: grid; grid-template-columns: .9fr 2fr; gap: 48px; margin-bottom: 78px; }
.ipc-section-head p { margin: 8px 0 0; font-size: 20px; font-weight: 400; }
.ipc-page h2 { margin: 0; max-width: 900px; font-size: clamp(54px, 6.6vw, 94px); font-weight: 400; line-height: .96; letter-spacing: -.06em; }
.ipc-ledger { border-top: 1px solid #aaa; }
.ipc-ledger article { display: grid; grid-template-columns: .9fr 1.45fr .55fr; gap: 48px; align-items: start; padding: 42px 0; border-bottom: 1px solid #aaa; }
.ipc-ledger h3 { margin: 0; font-size: 32px; font-weight: 400; letter-spacing: -.04em; }
.ipc-ledger p { margin: 0; max-width: 620px; font-size: 20px; line-height: 1.5; }
.ipc-ledger a, .ipc-proof a { color: inherit; font-weight: 400; text-decoration: none; }
.ipc-ledger a span, .ipc-proof a span { color: var(--ipc-blue); }
.ipc-tap { padding: 110px 0; color: #fff; background: #0a0a0a; }
.ipc-tap-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 90px; align-items: center; }
.ipc-tap figure { height: 680px; margin: 0; overflow: hidden; border-radius: 24px; }
.ipc-tap img { width: 100%; height: 100%; object-fit: cover; }
.ipc-tap h2 { margin: 32px 0; font-size: clamp(54px, 5.8vw, 84px); }
.ipc-tap p:not(.ipc-label) { max-width: 540px; margin: 0; color: #c8c8c8; font-size: 20px; line-height: 1.55; }
.ipc-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 0 24px; border: 1px solid currentColor; border-radius: var(--r-control); color: inherit; font-weight: 400; text-decoration: none; }
.ipc-button-light { margin-top: 34px; color: #111; background: #fff; }
.ipc-button-primary { border-color: var(--ipc-blue); color: #fff; background: var(--ipc-blue); }
.ipc-compare h2 { margin-bottom: 68px; }
.ipc-compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ipc-compare-grid a { display: grid; min-height: 270px; grid-template-columns: 1fr auto; align-content: space-between; gap: 22px; padding: 34px; border-radius: 20px; color: inherit; background: #f1efe9; text-decoration: none; }
.ipc-compare-grid span { grid-column: 1 / -1; color: #666; font-weight: 400; }
.ipc-compare-grid strong { max-width: 470px; font-size: 30px; line-height: 1.05; letter-spacing: -.04em; }
.ipc-compare-grid i { align-self: end; color: var(--ipc-blue); font-size: 30px; font-style: normal; }
.ipc-close { background: #f1efe9; }
.ipc-close-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.ipc-close h2 { margin-bottom: 42px; }
.ipc-close h3 { margin: 0 0 42px; max-width: 560px; font-size: 36px; line-height: 1.08; letter-spacing: -.045em; }
.ipc-signup label { display: block; margin-bottom: 10px; font-weight: 400; }
.ipc-signup > div { display: flex; border-bottom: 1px solid #111; }
.ipc-signup input { min-width: 0; flex: 1; padding: 15px 0; border: 0; background: transparent; font: inherit; }
.ipc-signup button { border: 1px solid #111; color: #fff; background: #111; padding: 0 24px; font: inherit; font-weight: 400; }
.ipc-table { border-top: 2px solid #111; }
.ipc-table-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid #aaa; font-size: 18px; line-height: 1.4; }
.ipc-table-head { color: #666; font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; }
.ipc-table-row span:last-child { font-weight: 400; }
.ipc-proof { padding: 120px 0; background: #f1efe9; }
.ipc-proof-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 110px; align-items: end; }
.ipc-proof h2 { margin-top: 30px; }
.ipc-proof-grid > div:last-child p { margin: 0 0 30px; font-size: 22px; line-height: 1.55; }
.ipc-final { padding-block: var(--section-display); }
.ipc-final h2 { margin: 34px 0 58px; max-width: 1100px; }
.ipc-actions { display: flex; flex-wrap: wrap; }
@media (max-width: 760px) {
  .ipc-label { font-size: 18px; }
  .ipc-hero .shell { position: static; padding-top: 0; }
  .ipc-hero h1 { width: auto; margin: 42px 0 62px; font-size: 61px; line-height: .92; white-space: normal; }
  .ipc-hero-media { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ipc-hero-media figure { height: 420px; border-radius: 14px; }
  .ipc-section-head, .ipc-tap-grid, .ipc-proof-grid { grid-template-columns: 1fr; gap: 28px; }
  .ipc-proof { padding: 78px 0; }
  .ipc-page h2 { font-size: 48px; }
  .ipc-ledger article { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
  .ipc-tap { padding: 72px 0; }
  .ipc-tap figure { height: 430px; }
  .ipc-tap-grid { gap: 50px; }
  .ipc-table { overflow-x: auto; }
  .ipc-table-row { min-width: 710px; }
  .ipc-panels { min-height: 0; }
  .ipc-panel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .ipc-panel[hidden] { display: none; }
  .ipc-panel article { min-width: 86%; scroll-snap-align: start; }
  .ipc-panel img { height: 360px; }
  .ipc-compare-grid, .ipc-close-grid { grid-template-columns: 1fr; }
  .ipc-close-grid { gap: 70px; }
}
}

@layer pages {
.intel-page {
  --in-ink: #111;
  --in-muted: #625f59;
  --in-line: rgba(17, 17, 17, .15);
  --in-paper: #f4f1eb;
  --in-lime: #d9ff43;
  color: var(--in-ink);
  background: #fff;
}

.intel-page * { box-sizing: border-box; }
.in-wrap { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.in-kicker { margin: 0 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.intel-page h1,
.intel-page h2,
.intel-page h3 { margin-top: 0; letter-spacing: -.045em; line-height: .98; }
.intel-page h1 { max-width: 850px; margin-bottom: 26px; font-size: clamp(54px, 7vw, 104px); }
.intel-page h2 { margin-bottom: 22px; font-size: clamp(40px, 5vw, 72px); }
.intel-page h3 { margin-bottom: 12px; font-size: clamp(24px, 2.2vw, 34px); }
.intel-page p { line-height: 1.58; }
.in-actions { display: flex; flex-wrap: wrap; margin-top: 32px; }
.in-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; padding: 0 24px; border: 1px solid currentColor; border-radius: 999px; color: inherit; font-size: 15px; font-weight: 750; text-decoration: none; transition: transform .2s ease; }
.in-button:hover { transform: translateY(-2px); }
.in-button-primary { border-color: var(--in-lime); color: #111; background: var(--in-lime); }
.in-text-link { display: inline-flex; gap: 10px; align-items: center; margin-top: 18px; color: inherit; font-weight: 800; text-decoration: none; }
.in-text-link span { transition: transform .2s ease; }
.in-text-link:hover span { transform: translateX(5px); }

.in-hero { overflow: hidden; padding-block: var(--section-display); }
.in-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); gap: clamp(48px, 7vw, 100px); align-items: center; }
.in-hero p:not(.in-kicker) { max-width: 680px; margin: 0; font-size: clamp(18px, 2vw, 23px); }
.in-hero-build { color: #fff; background: #261d78; }
.in-hero-build > .in-wrap > div:first-child > p:not(.in-kicker) { color: #d5d0ef; }
.in-hero-connect { color: #fff; background: #10110e; }
.in-hero-connect > .in-wrap > div:first-child > p:not(.in-kicker) { color: #c8cac1; }
.in-hero-insights { background: #e9e4dc; }
.in-hero-insights > .in-wrap > div:first-child > p:not(.in-kicker) { color: #514e49; }
.in-hero-build .in-button-outline,
.in-hero-connect .in-button-outline,
.in-final .in-button-outline { color: #fff; }

.build-prompt { overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; background: rgba(255,255,255,.08); box-shadow: 0 32px 80px rgba(0,0,0,.25); }
.build-prompt-input { padding: 26px; border-bottom: 1px solid rgba(255,255,255,.16); }
.build-prompt span { display: block; margin-bottom: 14px; color: #bbb4df; font: 700 12px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.build-prompt-input p { color: #fff !important; font-size: 20px !important; }
.build-prompt-output { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 26px; }
.build-prompt-output > span { grid-column: 1 / -1; color: var(--in-lime); }
.build-prompt-output div { padding: 18px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; }
.build-prompt-output b,
.build-prompt-output small { display: block; }
.build-prompt-output b { margin-bottom: 6px; font-size: 28px; }
.build-prompt-output small { color: #c8c4dc; line-height: 1.35; }

.build-workspace {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  background: #f5f2eb;
  box-shadow: 0 32px 80px rgba(0,0,0,.28);
}
.build-workspace-bar,
.connect-canvas-bar { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 18px; border-bottom: 1px solid rgba(17,17,17,.14); color: #111; background: #fff; font-size: 13px; }
.build-workspace-bar > span,
.connect-canvas-bar > span { font-weight: 800; }
.build-workspace-bar div,
.connect-canvas-bar div { display: flex; gap: 8px; align-items: center; }
.build-workspace-bar b,
.build-workspace-bar strong,
.connect-canvas-bar b,
.connect-canvas-bar strong { padding: 8px 12px; border: 1px solid rgba(17,17,17,.15); border-radius: 8px; font-size: 11px; }
.build-workspace-bar strong,
.connect-canvas-bar strong { color: #111; background: var(--in-lime); }
.build-workspace-body { display: grid; grid-template-columns: 42% 58%; min-height: 420px; color: #111; }
.build-chat { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-right: 1px solid rgba(17,17,17,.14); background: #fff; }
.build-chat > span { color: #6a665f; font: 700 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.build-chat > p,
.build-chat-reply { margin: 0; padding: 14px; border-radius: 12px; font-size: 14px !important; line-height: 1.45 !important; }
.build-chat > p { background: #eee9ff; }
.build-chat-reply { display: grid; grid-template-columns: 10px 1fr; gap: 10px; border: 1px solid rgba(17,17,17,.12); }
.build-chat-reply i { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #5d46d8; }
.build-chat-reply p { margin: 0; font-size: 14px !important; }
.build-chat-field { display: flex; justify-content: space-between; margin-top: auto; padding: 13px; border: 1px solid rgba(17,17,17,.18); border-radius: 10px; color: #66635e; font-size: 12px; }
.build-chat-field b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: #111; }
.build-preview { padding: 24px; background: #eeeae1; }
.build-preview-nav { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #fff; font-size: 10px; }
.build-preview-hero { display: flex; min-height: 245px; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 24px; color: #fff; background: #875634; }
.build-preview-hero small { text-transform: uppercase; letter-spacing: .1em; }
.build-preview-hero strong { max-width: 280px; margin: 8px 0 18px; font-size: 30px; line-height: .95; }
.build-preview-hero button { padding: 9px 12px; border: 0; border-radius: 999px; background: #fff; font: inherit; font-size: 10px; }
.build-preview-products { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 8px; }
.build-preview-products i { display: block; aspect-ratio: 1; background: #d6b996; }
.build-preview-products i:nth-child(2) { background: #9c6d4e; }
.build-preview-products i:nth-child(3) { background: #e8c876; }

.build-starts,
.connect-templates { padding-block: var(--section-roomy); background: #fff; }
.build-start-grid,
.connect-template-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.build-start-grid article,
.connect-template-grid article { overflow: hidden; padding: 18px; border: 1px solid var(--in-line); border-radius: 18px; background: var(--in-paper); }
.build-start-grid h3,
.connect-template-grid h3 { margin: 12px 0 8px; font-size: clamp(24px,2.5vw,36px); }
.build-start-grid figure { overflow: hidden; aspect-ratio: 4 / 5; margin: 0 0 24px; border-radius: 12px; background: #333; }
.build-start-grid figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.build-start-grid article:hover figure img { transform: scale(1.035); }
.build-start-art { display: flex; min-height: 260px; align-items: flex-end; gap: 8px; padding: 22px; margin-bottom: 24px; border-radius: 12px; }
.build-start-art span { display: block; flex: 1; border-radius: 80px 80px 6px 6px; background: rgba(255,255,255,.8); }
.build-start-art span:nth-child(1) { height: 44%; }
.build-start-art span:nth-child(2) { height: 72%; }
.build-start-art span:nth-child(3) { height: 58%; }
.build-start-retail { background: #e7764f; }
.build-start-food { background: #284e43; }
.build-start-service { background: #6c62d8; }

.insights-hero-ui,
.connect-hero-ui { position: relative; overflow: hidden; margin: 0; border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,.18); }
.insights-hero-ui img,
.connect-hero-ui img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; }
.insights-hero-ui figcaption { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; justify-content: space-between; gap: 20px; padding: 15px 18px; border-radius: 10px; color: #fff; background: rgba(17,17,17,.82); }
.insights-hero-ui figcaption span { color: #bbb; font-size: 13px; }
.connect-hero-ui { padding: 24px; background: #e0ddd5; }
.connect-canvas { overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: #f4f2ed; box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.connect-canvas-body { display: grid; grid-template-columns: 150px 1fr; min-height: 440px; color: #111; }
.connect-canvas aside { display: grid; align-content: start; gap: 9px; padding: 18px 12px; border-right: 1px solid rgba(17,17,17,.13); background: #fff; }
.connect-canvas aside span { margin-bottom: 10px; padding: 10px; border: 1px solid rgba(17,17,17,.13); border-radius: 8px; color: #777; font-size: 10px; }
.connect-canvas aside b { padding: 9px 8px; border-radius: 6px; font-size: 10px; }
.connect-canvas aside b:first-of-type { background: #eee9ff; }
.connect-flow { display: grid; align-content: center; justify-items: center; padding: 26px; background-image: radial-gradient(rgba(17,17,17,.14) 1px,transparent 1px); background-size: 18px 18px; }
.connect-node { width: min(260px,100%); padding: 15px; border: 1px solid rgba(17,17,17,.16); border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(17,17,17,.1); }
.connect-node-trigger { border-color: #7b66e8; }
.connect-node small,
.connect-node strong,
.connect-node span { display: block; }
.connect-node small { margin-bottom: 5px; color: #705bd5; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.connect-node strong { font-size: 13px; }
.connect-node span { margin-top: 5px; color: #777; font-size: 10px; }
.connect-flow > i { display: block; width: 1px; height: 28px; background: #8b8580; }
.connect-template-grid article { min-height: 320px; padding: 28px; }
.connect-template-grid article > span { color: #6a665f; font: 700 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.connect-template-grid article > div { display: grid; grid-template-columns: 24px 1fr 24px 24px 1fr; gap: 8px; align-items: center; margin-top: 50px; padding: 18px; border-radius: 12px; background: #fff; }
.connect-template-grid i { width: 24px; height: 24px; border-radius: 7px; background: #705bd5; }
.connect-template-grid i:last-of-type { background: #d9ff43; }
.connect-template-grid em { width: 24px; height: 1px; background: #aaa; }
.connect-template-grid b { font-size: 10px; line-height: 1.25; }

.in-strip { padding-block: var(--s-12); border-bottom: 1px solid var(--in-line); background: #fff; }
.in-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.in-strip p { display: grid; gap: 8px; margin: 0; padding: 6px 30px; border-right: 1px solid var(--in-line); }
.in-strip p:first-child { padding-left: 0; }
.in-strip p:last-child { border-right: 0; }
.in-strip strong { font-size: 22px; }
.in-strip span { color: var(--in-muted); line-height: 1.45; }

.in-metrics { padding-block: var(--s-12); color: #fff; background: #1f328d; }
.in-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.in-metric-grid article { display: grid; gap: 8px; padding: 10px 32px; border-right: 1px solid rgba(255,255,255,.24); }
.in-metric-grid article:first-child { padding-left: 0; }
.in-metric-grid article:last-child { border-right: 0; }
.in-metric-grid span,
.in-metric-grid small { color: #d6dbf4; }
.in-metric-grid strong { color: var(--in-lime); font-size: clamp(36px, 4vw, 58px); letter-spacing: -.04em; }

.in-journey,
.in-cards,
.in-boundaries,
.in-faq { padding-block: var(--section-roomy); }
.in-journey { background: var(--in-paper); }
.in-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 52px; }
.in-section-head h2 { max-width: 900px; margin-bottom: 0; }
.in-controls { display: flex; gap: 8px; flex-shrink: 0; }
.in-controls button { min-width: 46px; height: 46px; padding: 0 14px; border: 1px solid var(--in-line); border-radius: 999px; color: inherit; background: transparent; font: inherit; font-weight: 800; cursor: pointer; }
.in-controls button:hover { background: #fff; }
.in-journey-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; }
.in-tabs { display: grid; align-content: start; }
.in-tabs button { display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px; padding: 23px 10px; border: 0; border-top: 1px solid var(--in-line); color: inherit; background: transparent; text-align: left; cursor: pointer; }
.in-tabs button:last-child { border-bottom: 1px solid var(--in-line); }
.in-tabs button[aria-selected="true"] { padding-inline: 18px; border-radius: 12px; background: #fff; }
.in-tabs span { grid-row: 1 / span 2; color: var(--in-muted); font: 750 12px/1.5 var(--font-mono); }
.in-tabs strong { font-size: 18px; }
.in-tabs small { color: var(--in-muted); font-size: 13px; line-height: 1.45; }
.in-panels { min-width: 0; }
.in-panels article { overflow: hidden; border-radius: 18px; color: #fff; background: #151613; }
.in-panels article[hidden] { display: none; }
.in-panels figure { overflow: hidden; aspect-ratio: 16 / 9; margin: 0; background: #ddd; }
.in-panels img { display: block; width: 100%; height: 100%; object-fit: cover; }
.in-panels article > div { padding: 34px; }
.in-panels article > div p:last-child { max-width: 700px; margin-bottom: 0; color: #c4c6bc; }

.in-copy-head { max-width: 900px; margin-bottom: 54px; }
.in-copy-head > p:last-child { max-width: 720px; color: var(--in-muted); font-size: 18px; }
.in-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--in-line); border-left: 1px solid var(--in-line); }
.in-card-grid-four { grid-template-columns: repeat(4, 1fr); }
.in-card-grid article { min-height: 300px; padding: 30px; border-right: 1px solid var(--in-line); border-bottom: 1px solid var(--in-line); }
.in-card-grid article > span { display: block; margin-bottom: 72px; color: var(--in-muted); font: 750 12px/1.2 var(--font-mono); }
.in-card-grid article p { margin-bottom: 0; color: var(--in-muted); }
.connector-library { background: #fff; }

.in-split { padding-block: var(--section-roomy); }
.in-split-lime { background: var(--in-lime); }
.in-split-blue { color: #fff; background: #1f328d; }
.in-split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr); gap: clamp(50px, 9vw, 140px); align-items: center; }
.in-split-grid > div:last-child p { font-size: 20px; }
.in-split-blue .in-split-grid > div:last-child p { color: #d8dcf2; }
.in-boundaries { background: #fff; }
.in-faq { background: var(--in-paper); }
.in-faq-grid { display: grid; grid-template-columns: .65fr 1fr; gap: clamp(44px, 8vw, 120px); }

.in-final { padding-block: var(--section-display); color: #fff; background: #111; text-align: center; }
.in-final-inner { display: grid; justify-items: center; }
.in-final h2 { max-width: 960px; }

/* Build is an immersive creation workspace, not a conventional split hero. */
.build-page .in-hero {
  padding-bottom: var(--section-roomy);
  background: #261d78;
}
.build-page .in-hero-grid { grid-template-columns: 1fr; }
.build-page .in-hero-grid > div:first-child { display: grid; justify-items: center; text-align: center; }
.build-page .in-hero h1 { max-width: 1120px; }
.build-page .in-hero p:not(.in-kicker) { max-width: 760px; }
.build-page .build-workspace { width: min(1120px, 100%); margin: 38px auto 0; }
.build-page .build-workspace-body { min-height: 560px; grid-template-columns: 34% 66%; }
.build-page .build-preview { padding: 34px; }
.build-page .build-preview-hero { min-height: 340px; }
.build-page .build-preview-hero strong { max-width: 420px; font-size: 44px; }
.build-product-rail { padding-block: var(--section-standard); border-bottom: 1px solid var(--in-line); background: #fff; }
.build-product-rail-head { display: grid; grid-template-columns: .38fr 1fr; gap: 30px 70px; align-items: start; }
.build-product-rail-head h2 { max-width: 820px; margin-bottom: 0; }
.build-product-logos { display: grid; grid-template-columns: repeat(5,1fr); margin-top: 56px; border-top: 1px solid var(--in-line); border-left: 1px solid var(--in-line); }
.build-product-logos a { min-height: 210px; padding: 24px; border-right: 1px solid var(--in-line); border-bottom: 1px solid var(--in-line); transition: color .25s ease, background-color .25s ease; }
.build-product-logos a:hover { color: #fff; background: #261d78; }
.build-product-logos span { display: grid; width: 48px; height: 48px; margin-bottom: 48px; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.build-product-logos img { width: 24px; height: 24px; color: currentColor; }
.build-product-logos a:hover img { filter: invert(1); }
.build-product-logos strong,
.build-product-logos small { display: block; }
.build-product-logos strong { margin-bottom: 8px; font-size: 16px; }
.build-product-logos small { color: var(--in-muted); font-size: 12px; }
.build-product-logos a:hover small { color: #d5d0ef; }
.build-page .build-starts { color: #fff; background: #111; }
.build-page .build-starts .in-copy-head > p:last-child { color: #b9bab4; }
.build-page .build-start-grid { grid-template-columns: 1.15fr .85fr 1fr; align-items: start; }
.build-page .build-start-grid article { border-color: rgba(255,255,255,.15); background: #1b1c19; }
.build-page .build-start-grid article:nth-child(2) { margin-top: 70px; }
.build-film { position: relative; min-height: min(900px,92vh); overflow: hidden; color: #fff; background: #111; }
.build-film-media { position: absolute; inset: -6% 0; }
.build-film-media::after { position: absolute; inset: 0; background: rgba(17,17,17,.38); content: ""; }
.build-film video { width: 100%; height: 100%; object-fit: cover; }
.build-film-copy { position: relative; z-index: 1; display: flex; min-height: min(900px,92vh); flex-direction: column; justify-content: flex-end; padding-block: var(--section-roomy); }
.build-film-copy h2 { max-width: 850px; }
.build-film-copy > p:last-child { max-width: 620px; margin: 0; color: #e3e3df; font-size: 19px; }
.build-page .in-journey { background: #fff; }
.build-page .in-tabs button { display: block; }
.build-page .in-tabs small { display: block; margin-top: 7px; }
.build-surfaces { overflow: hidden; padding-block: var(--section-roomy); background: #e9e4dc; }
.build-surfaces-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.56fr); gap: 50px 100px; align-items: end; }
.build-surfaces-head h2 { max-width: 850px; margin-bottom: 0; }
.build-surfaces-head > p { margin: 0 0 8px; color: var(--in-muted); font-size: 18px; }
.build-surface-stage { position: relative; min-height: 780px; margin-top: 72px; }
.build-surface-stage figure { position: absolute; overflow: hidden; margin: 0; border-radius: 20px; box-shadow: 0 32px 80px rgba(17,17,17,.2); }
.build-surface-stage figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.build-surface-desktop { top: 0; left: 0; width: 76%; aspect-ratio: 16 / 10; }
.build-surface-phone { right: 0; bottom: 0; width: 30%; aspect-ratio: 3 / 5; border: 8px solid #111; }
.build-style-panel { position: absolute; right: 6%; top: 7%; width: min(310px,28%); padding: 24px; border: 1px solid rgba(17,17,17,.13); border-radius: 16px; background: rgba(255,255,255,.95); box-shadow: 0 24px 60px rgba(17,17,17,.16); }
.build-style-panel > div { padding: 15px 0; border-top: 1px solid var(--in-line); }
.build-style-panel span { display: block; margin-bottom: 8px; color: var(--in-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.build-style-panel strong { font-size: 14px; }
.build-style-panel i { display: inline-block; width: 28px; height: 28px; margin-right: 7px; border-radius: 50%; background: #6c442b; }
.build-style-panel i:nth-of-type(2) { background: #d49556; }
.build-style-panel i:nth-of-type(3) { background: #f2dba8; }
.build-style-panel b { display: inline-block; margin-right: 6px; padding: 7px 10px; border: 1px solid var(--in-line); border-radius: 999px; font-size: 11px; }
.build-commerce { padding-block: var(--section-roomy); color: #fff; background: #111; }
.build-commerce-head { display: grid; grid-template-columns: .34fr 1fr; gap: 30px 70px; align-items: start; }
.build-commerce-head h2 { max-width: 980px; }
.build-commerce-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 22px; margin-top: 64px; align-items: start; }
.build-commerce-grid article { overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: #1b1c19; }
.build-commerce-grid article:nth-child(2) { margin-top: 110px; }
.build-commerce-grid figure { overflow: hidden; aspect-ratio: 16 / 10; margin: 0; }
.build-commerce-grid figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.build-commerce-grid article > div { padding: 34px; }
.build-commerce-grid article p { margin-bottom: 0; color: #bbbdb5; }
[data-build-shift] { transform: translate3d(0,var(--build-shift,0),0); }
.build-handoff { padding-block: var(--section-roomy); background: #eee9ff; }
.build-handoff-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(380px,.82fr); gap: clamp(48px,8vw,120px); align-items: center; }
.build-handoff figure { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin: 0; border-radius: 22px; }
.build-handoff figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.build-handoff figcaption { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; justify-content: space-between; gap: 20px; padding: 16px 18px; border-radius: 12px; color: #fff; background: rgba(17,17,17,.84); }
.build-handoff figcaption span { color: #bebcc5; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.build-handoff-grid > div > p:not(.in-kicker) { color: var(--in-muted); font-size: 18px; }
.build-handoff ul { margin: 34px 0 0; padding: 0; border-top: 1px solid var(--in-line); list-style: none; }
.build-handoff li { padding: 18px 0; border-bottom: 1px solid var(--in-line); line-height: 1.45; }

/* Insights reads like an editorial report with the interface as evidence. */
.insights-page .in-hero {
  padding-bottom: 0;
  color: #fff;
  background: #142d73;
}
.insights-page .in-hero-grid { grid-template-columns: 1fr; }
.insights-page .in-hero-grid > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .48fr); gap: 40px 80px; align-items: end; }
.insights-page .in-hero-grid > div:first-child .in-kicker { grid-column: 1 / -1; }
.insights-page .in-hero-grid > div:first-child h1 { margin-bottom: 0; }
.insights-page .in-hero-grid > div:first-child > p:not(.in-kicker) { color: #d7ddf2; }
.insights-page .in-hero-grid > div:first-child .in-actions { grid-column: 2; }
.insights-page .insights-hero-ui { width: min(1100px, 92%); margin: 70px auto -80px; border: 10px solid #0c1b48; border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 40px 90px rgba(0,0,0,.32); }
.insights-page .in-metrics { padding-top: 130px; color: #111; background: var(--in-lime); }
.insights-page .in-metric-grid article { border-color: rgba(17,17,17,.22); }
.insights-page .in-metric-grid span,
.insights-page .in-metric-grid small { color: #3e421e; }
.insights-page .in-metric-grid strong { color: #111; }
.insights-page .in-journey { background: #fff; }
.insights-page .in-cards { color: #fff; background: #111; }
.insights-page .in-cards .in-card-grid { border-color: rgba(255,255,255,.2); }
.insights-page .in-cards .in-card-grid article { border-color: rgba(255,255,255,.2); }
.insights-page .in-cards .in-card-grid article p,
.insights-page .in-cards .in-card-grid article > span { color: #bbbdb5; }
.insights-context { padding-block: var(--section-roomy); background: #f2eee7; }
.insights-context-grid { display: grid; grid-template-columns: minmax(380px,.82fr) minmax(0,1.18fr); gap: clamp(50px,8vw,120px); align-items: center; }
.insights-context-grid > div > p:not(.in-kicker) { max-width: 620px; color: var(--in-muted); font-size: 18px; }
.insights-context-list { margin-top: 36px; border-top: 1px solid var(--in-line); }
.insights-context-list p { display: grid; grid-template-columns: minmax(140px,.7fr) 1fr; gap: 20px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--in-line); }
.insights-context-list span { color: var(--in-muted); }
.insights-context figure { position: relative; overflow: hidden; aspect-ratio: 4 / 5; margin: 0; border-radius: 220px 220px 20px 20px; }
.insights-context figure > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.insights-context-card { position: absolute; right: 18px; bottom: 18px; left: 18px; padding: 20px; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 18px 40px rgba(0,0,0,.15); }
.insights-context-card span,
.insights-context-card strong,
.insights-context-card small { display: block; }
.insights-context-card span { color: #666; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.insights-context-card strong { margin: 8px 0; font-size: 24px; }
.insights-context-card small { color: #666; }

/* Connect is a builder surface first, with templates and operations around it. */
.connect-page .in-hero-connect {
  padding-bottom: var(--section-roomy);
  color: #111;
  background:
    radial-gradient(circle at 10% 30%, rgba(217,255,67,.55), transparent 24%),
    radial-gradient(circle at 92% 28%, rgba(159,136,255,.5), transparent 30%),
    #eeeafb;
}
.connect-page .in-hero-grid { grid-template-columns: 1fr; }
.connect-page .in-hero-grid > div:first-child { display: grid; justify-items: center; text-align: center; }
.connect-page .in-hero h1 { max-width: 1060px; }
.connect-page .in-hero-connect > .in-wrap > div:first-child > p:not(.in-kicker) { max-width: 720px; color: #514b64; }
.connect-page .in-hero-connect .in-button-outline { color: #111; }
.connect-page .connect-canvas { width: min(1080px,100%); margin: 38px auto 0; }
.connect-page .connect-canvas-body { min-height: 570px; grid-template-columns: 220px 1fr; }
.connect-page .connect-flow { padding: 54px; }
.connect-page .connect-node { width: min(380px,100%); padding: 20px; }
.connect-page .connect-node strong { font-size: 16px; }
.connect-page .connect-node span { font-size: 12px; }
.connect-page .connect-templates { color: #fff; background: #111; }
.connect-page .connect-templates .in-copy-head > p:last-child { color: #b9bab4; }
.connect-page .connect-template-grid { grid-template-columns: 1.15fr .85fr 1fr; align-items: start; }
.connect-page .connect-template-grid article { min-height: 360px; border-color: rgba(255,255,255,.16); background: #1c1d1a; }
.connect-page .connect-template-grid article:nth-child(2) { margin-top: 72px; }
.connect-page .connect-template-grid article > span { color: #a9aaa4; }
.connect-page .connect-template-grid article > div { color: #111; }
.connect-page .in-journey { background: #e8e3f8; }
.connect-page .connector-library { background: #fff; }
.connect-page .connector-library .in-card-grid-four { border: 0; gap: 14px; }
.connect-page .connector-library .in-card-grid-four article { min-height: 360px; border: 0; border-radius: 18px; background: #f1efe9; }
.connect-page .connector-library .in-card-grid-four article:nth-child(1) { background: #d9ff43; }
.connect-page .connector-library .in-card-grid-four article:nth-child(2) { color: #fff; background: #283277; }
.connect-page .connector-library .in-card-grid-four article:nth-child(2) p,
.connect-page .connector-library .in-card-grid-four article:nth-child(2) > span { color: #d5daf3; }
.connect-embedded { padding-block: var(--section-roomy); background: #fff; }
.connect-embedded-grid { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(380px,.78fr); gap: clamp(50px,8vw,120px); align-items: center; }
.connect-embedded figure { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin: 0; border-radius: 22px; }
.connect-embedded figure > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.connect-embedded-flow { position: absolute; right: 20px; bottom: 20px; left: 20px; display: grid; grid-template-columns: 1fr 34px 1fr; gap: 8px; align-items: center; padding: 18px; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.connect-embedded-flow span { padding: 12px; border: 1px solid var(--in-line); border-radius: 9px; font-size: 12px; font-weight: 750; text-align: center; }
.connect-embedded-flow i { height: 1px; background: #777; }
.connect-embedded-grid > div > p:not(.in-kicker) { color: var(--in-muted); font-size: 18px; }

@media (max-width: 960px) {
  .in-hero-grid,
  .in-split-grid { grid-template-columns: 1fr; }
  .build-prompt,
  .build-workspace,
  .insights-hero-ui,
  .connect-hero-ui { max-width: 720px; }
  .in-journey-grid { grid-template-columns: 1fr; }
  .in-tabs { grid-template-columns: repeat(4, minmax(190px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
  .in-tabs button { border-right: 1px solid var(--in-line); border-bottom: 1px solid var(--in-line); }
  .in-card-grid-four { grid-template-columns: repeat(2, 1fr); }
  .build-page .in-card-grid-four { grid-template-columns: repeat(2,1fr); }
  .build-page .in-card-grid-four article:nth-child(n) { grid-column: auto; }
  .build-surfaces-head { grid-template-columns: 1fr; }
  .build-surface-stage { min-height: 650px; }
  .build-commerce-head { grid-template-columns: 1fr; }
  .build-product-logos { grid-template-columns: repeat(3,1fr); }
  .build-handoff-grid,
  .insights-context-grid,
  .connect-embedded-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .in-wrap { width: min(100% - 28px, 1240px); }
  .intel-page h1 { font-size: clamp(46px, 14vw, 68px); }
  .intel-page h2 { font-size: clamp(36px, 10vw, 52px); }
  .build-prompt-output,
  .build-start-grid,
  .connect-template-grid,
  .in-strip-grid,
  .in-metric-grid,
  .in-card-grid,
  .in-card-grid-four,
  .in-faq-grid { grid-template-columns: 1fr; }
  .build-prompt-output > span { grid-column: 1; }
  .build-workspace-body { grid-template-columns: 1fr; }
  .build-chat { min-height: 320px; border-right: 0; border-bottom: 1px solid rgba(17,17,17,.14); }
  .build-preview { padding: 14px; }
  .build-workspace-bar b { display: none; }
  .connect-canvas-body { grid-template-columns: 1fr; }
  .connect-canvas aside { display: none; }
  .connect-flow { min-height: 420px; }
  .build-page .build-workspace-body { grid-template-columns: 1fr; min-height: 0; }
  .build-page .build-start-grid,
  .connect-page .connect-template-grid { grid-template-columns: 1fr; }
  .build-page .build-start-grid article:nth-child(2),
  .connect-page .connect-template-grid article:nth-child(2) { margin-top: 0; }
  .build-page .in-card-grid-four { grid-template-columns: 1fr; }
  .build-product-rail-head { grid-template-columns: 1fr; }
  .build-product-logos { grid-template-columns: 1fr 1fr; }
  .build-product-logos a { min-height: 175px; }
  .build-film,
  .build-film-copy { min-height: 680px; }
  .build-surface-stage { display: grid; min-height: 0; gap: 14px; margin-top: 44px; }
  .build-surface-stage figure,
  .build-style-panel { position: static; width: 100%; }
  .build-surface-phone { aspect-ratio: 4 / 5; }
  .build-style-panel { order: 2; }
  .build-commerce-grid { grid-template-columns: 1fr; }
  .build-commerce-grid article:nth-child(2) { margin-top: 0; }
  .build-commerce-grid article > div { padding: 26px; }
  [data-build-shift] { transform: none; }
  .insights-page .in-hero-grid > div:first-child { display: block; }
  .insights-page .in-hero-grid > div:first-child .in-actions { margin-bottom: 40px; }
  .insights-page .insights-hero-ui { width: 100%; margin-top: 42px; }
  .connect-page .connect-canvas-body { grid-template-columns: 1fr; min-height: 0; }
  .build-handoff figcaption { display: grid; gap: 5px; }
  .insights-context figure { border-radius: 120px 120px 16px 16px; }
  .in-strip p,
  .in-metric-grid article { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--in-line); }
  .in-metric-grid article { border-color: rgba(255,255,255,.24); }
  .in-section-head { align-items: flex-start; }
  .in-controls button:first-child,
  .in-controls button:last-child { display: none; }
  .in-card-grid article { min-height: 0; }
  .in-card-grid article > span { margin-bottom: 42px; }
  .in-panels article > div { padding: 26px; }
}

@media (max-width: 800px) {
  .build-page .in-boundaries .in-card-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .intel-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
}

@layer pages {
/* Merchant Console — scoped product page. */
.mc-page {
  --mc-dark: #101210;
  --mc-blue: #0066ff;
  color: var(--text);
  background: var(--bg);
}
.mc-hero {
  color: #fff;
  background: var(--mc-dark);
}
.mc-hero__grid { display: grid; gap: clamp(56px, 8vw, 120px); }
.mc-hero__copy { max-width: 1240px; }
.mc-eyebrow,
.mc-kicker {
  margin: 0 0 24px;
  font: 400 12px/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mc-eyebrow { color: #aeb1ad; }
.mc-hero h1 {
  max-width: 1280px;
  margin: 0;
  font-size: clamp(58px, 9.2vw, 172px);
  font-weight: 400;
  line-height: .89;
  letter-spacing: -.065em;
}
.mc-intro {
  max-width: 700px;
  margin: clamp(36px, 5vw, 72px) 0 0;
  color: #c8cbc7;
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.45;
}
.mc-jump {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  margin-top: 40px;
}
.mc-jump a {
  color: #77a4ff;
  font-size: clamp(17px, 1.2vw, 20px);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.mc-jump a span { display: inline-block; margin-left: 5px; transition: transform .2s ease; }
.mc-jump a:hover { color: #fff; border-bottom-color: currentColor; }
.mc-jump a:hover span { transform: translate(3px, -3px); }
.mc-hero__media { margin: 0; }
.mc-hero__media img {
  display: block;
  width: 100%;
  height: clamp(350px, 55vw, 900px);
  object-fit: cover;
  object-position: center 45%;
  border-radius: clamp(20px, 3vw, 48px);
}
.mc-section-head { max-width: 900px; margin-bottom: clamp(48px, 7vw, 100px); }
.mc-section-head--wide { max-width: 1200px; }
.mc-kicker { color: var(--accent-ink); }
.mc-section-head h2,
.mc-day h2,
.mc-orders h2,
.mc-integrations h2,
.mc-cta h2 {
  margin: 0;
  font-size: clamp(42px, 6vw, 102px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.055em;
}
.mc-section-head > p:last-child {
  max-width: 680px;
  margin: 28px 0 0;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.55;
}
.mc-app {
  display: grid;
  gap: 36px;
  padding: clamp(24px, 4vw, 64px);
  overflow: hidden;
  border-radius: clamp(20px, 3vw, 48px);
  background: #dbe5ff;
}
.mc-app__copy { display: grid; align-content: center; gap: 0; }
.mc-app__copy article { padding: 26px 0; border-top: 1px solid rgba(16,18,16,.2); }
.mc-app__copy article:last-child { border-bottom: 1px solid rgba(16,18,16,.2); }
.mc-app__copy span,
.mc-card-number,
.mc-resources__grid > a > span {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .06em;
}
.mc-app h3,
.mc-access h3,
.mc-resources h3 { margin: 10px 0 8px; font-size: clamp(24px, 2.2vw, 38px); font-weight: 400; letter-spacing: -.035em; }
.mc-app p,
.mc-access p,
.mc-resources p { margin: 0; color: #454943; font-size: 16px; line-height: 1.5; }
.mc-app__visual { margin: 0; display: flex; align-items: center; }
.mc-app__visual img,
.mc-integrations__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(11,13,15,.17);
}
.mc-orders { background: #fff; }
.mc-orders__grid { display: grid; gap: 56px; }
.mc-orders__body > p { margin: 0 0 50px; max-width: 680px; font-size: clamp(19px, 1.7vw, 27px); line-height: 1.45; }
.mc-orders ul { margin: 0; padding: 0; list-style: none; }
.mc-orders li {
  display: grid;
  gap: 10px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.mc-orders li:last-child { border-bottom: 1px solid var(--line); }
.mc-orders li strong { font-size: 18px; font-weight: 400; }
.mc-orders li span { max-width: 540px; color: var(--text-muted); line-height: 1.5; }
.mc-quote { color: #fff; background: var(--mc-blue); }
.mc-quote__inner { max-width: 1600px; }
.mc-quote__statement { margin: 0; }
.mc-quote__statement p { margin: 0; font-size: clamp(38px, 5.8vw, 100px); line-height: 1; letter-spacing: -.05em; }
.mc-quote__source { margin: 48px 0 0; font: 400 12px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.mc-day { background: #f0eee7; }
.mc-day__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.mc-day__head h2 { max-width: 820px; margin-bottom: 0; }
.mc-day__controls { display: flex; gap: 8px; flex-shrink: 0; }
.mc-day__controls button {
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.mc-day__controls button:hover { background: #fff; }
.mc-day__grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 28px; }
.mc-day__tabs { display: grid; align-content: start; }
.mc-day__tabs button {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 12px;
  padding: 20px 10px;
  border: 0;
  border-top: 1px solid var(--line-strong);
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.mc-day__tabs button:last-child { border-bottom: 1px solid var(--line-strong); }
.mc-day__tabs button[aria-selected="true"] { padding-inline: 18px; border-radius: 12px; background: #fff; }
.mc-day__tabs span { grid-row: 1 / span 2; color: var(--text-faint); font: 700 12px/1.5 var(--font-mono); }
.mc-day__tabs strong { font-size: 17px; }
.mc-day__tabs small { color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.mc-day__panels { min-width: 0; }
.mc-day__panels article { overflow: hidden; border-radius: 20px; color: #fff; background: #111; }
.mc-day__panels article[hidden] { display: none; }
.mc-day__panels img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mc-day__panels article > div { padding: 32px; }
.mc-day__panels article > div p { max-width: 720px; margin-bottom: 0; color: #c8c8c3; line-height: 1.55; }
.mc-access__cards { display: grid; gap: 16px; }
.mc-access__cards article {
  min-height: 320px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--bg-card);
}
.mc-access__cards h3 { margin-top: auto; }
.mc-card-number { color: var(--text-faint); }
.mc-integrations__grid { display: grid; gap: clamp(48px, 8vw, 120px); align-items: center; }
.mc-integrations__visual {
  padding: clamp(24px, 4vw, 60px);
  overflow: hidden;
  border-radius: clamp(20px, 3vw, 44px);
  background: #e7e4db;
}
.mc-integrations__copy > p:not(.mc-kicker) { margin: 30px 0; max-width: 640px; color: var(--text-muted); font-size: 18px; line-height: 1.55; }
.mc-arrow-link {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  color: var(--text);
  text-decoration: none;
  border-top: 1px solid var(--line-strong);
}
.mc-arrow-link:last-child { border-bottom: 1px solid var(--line-strong); }
.mc-arrow-link:hover { color: var(--accent-ink); }
.mc-resources { background: #fff; }
.mc-resources__grid { display: grid; gap: 16px; }
.mc-resources__grid > a {
  position: relative;
  min-height: 300px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: transform .2s ease, background-color .2s ease;
}
.mc-resources__grid > a:hover { transform: translateY(-4px); background: var(--bg-card); }
.mc-resources__grid h3 { margin-top: auto; }
.mc-resources__grid b { position: absolute; top: 26px; right: 26px; font-size: 22px; font-weight: 400; }
.mc-cta { color: #fff; background: var(--mc-dark); text-align: center; }
.mc-cta .mc-kicker { color: #8db2ff; }
.mc-cta__inner { display: flex; flex-direction: column; align-items: center; }
.mc-cta h2 { max-width: 1200px; font-size: clamp(48px, 7.5vw, 132px); }
.mc-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 48px; }
.mc-button {
  min-height: 48px;
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  color: #fff;
  text-decoration: none;
  border: 1px solid #6d716d;
  border-radius: 999px;
}
.mc-button--light { color: #101210; background: #fff; border-color: #fff; }
.mc-button:hover { border-color: #fff; }
.mc-button--light:hover { background: #dfe1dc; border-color: #dfe1dc; }

@media (min-width: 800px) {
  .mc-app { grid-template-columns: minmax(280px, .8fr) minmax(440px, 1.2fr); }
  .mc-orders__grid { grid-template-columns: 1fr 1fr; }
  .mc-orders li { grid-template-columns: minmax(180px, .7fr) 1.3fr; gap: 32px; }
  .mc-access__cards,
  .mc-resources__grid { grid-template-columns: repeat(3, 1fr); }
  .mc-integrations__grid { grid-template-columns: 1.08fr .92fr; }
}
@media (max-width: 799px) {
  .mc-jump { margin-top: 32px; }
  .mc-day__head { align-items: flex-start; }
  .mc-day__grid { grid-template-columns: 1fr; }
  .mc-day__tabs { grid-template-columns: repeat(5, minmax(180px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
  .mc-day__tabs button { border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
  .mc-app__visual { grid-row: 1; }
  .mc-access__cards article,
  .mc-resources__grid > a { min-height: 240px; }
  .mc-button { width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) {
  .mc-day__controls button:first-child,
  .mc-day__controls button:last-child { display: none; }
  .mc-day__panels article > div { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-page a,
  .mc-page a span { transition: none; }
}
}

@layer pages {
.migration-page {
  --mg-ink: #080808;
  --mg-muted: #62625f;
  --mg-blue: #2862f4;
  --mg-paper: #f7f6f5;
  --mg-line: #d7d7d2;
  overflow: clip;
  background: #fff;
  color: var(--mg-ink);
}

.mg-wrap {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding-inline: clamp(20px, 4.167vw, 60px);
}

.mg-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-size: 16px;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease);
}

.mg-button:hover { transform: translateY(-2px); }
.mg-button-primary { background: var(--mg-blue); color: #fff; }
.mg-button-outline { border-color: var(--mg-blue); color: var(--mg-blue); }
.mg-actions { display: flex; flex-wrap: wrap; justify-content: center; }

.mg-hero {
  padding-block: var(--section-compact);
}

.mg-hero-copy {
  display: flex;
  min-height: 373px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mg-hero-copy > p {
  margin: 0 0 34px;
  color: var(--mg-muted);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mg-hero h1,
.mg-sequence h2,
.mg-inventory h2,
.mg-cohorts h2,
.mg-acceptance h2,
.mg-owners h2,
.mg-resources h2,
.mg-faq h2,
.mg-final h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.045em;
}

.mg-hero h1 {
  max-width: 1040px;
  margin: 0 0 52px;
  font-size: clamp(48px, 4.45vw, 64px);
  line-height: 0.98;
}

.mg-hero-scene {
  position: relative;
  width: min(100%, 1440px);
  height: 1420px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
}

.mg-hero-scene figure {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border-radius: var(--r-block);
  background: var(--mg-paper);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.08);
}

.mg-hero-scene figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mg-hero-scene figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 13px;
}

.mg-scene-source {
  top: 520px;
  left: 5%;
  width: 36%;
  height: 430px;
  transform: rotate(-2deg);
}

.mg-scene-box {
  top: 190px;
  right: 17%;
  width: 28%;
  height: 350px;
  transform: rotate(2deg);
}

.mg-scene-box img {
  object-position: left top;
}

.mg-scene-route {
  position: absolute;
  top: 760px;
  left: 50%;
  display: flex;
  width: min(46%, 620px);
  align-items: center;
  gap: 14px;
  transform: translateX(-8%) rotate(-1deg);
}

.mg-scene-route span {
  display: grid;
  min-width: 112px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--mg-ink);
  border-radius: 50%;
  background: #fff;
  font-size: 18px;
}

.mg-scene-route i {
  width: 90px;
  height: 1px;
  background: var(--mg-ink);
}

.mg-promises {
  display: grid;
  width: min(100%, 1440px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto;
  border-top: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
}

.mg-promises p {
  display: grid;
  min-height: 180px;
  place-items: center;
  margin: 0;
  padding: 30px;
  border-left: 1px solid var(--mg-line);
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
}

.mg-promises p:last-child { border-right: 1px solid var(--mg-line); }

.mg-sequence {
  padding-block: var(--section-roomy);
  background: #fff;
  color: var(--mg-ink);
}

.mg-sequence h2 {
  max-width: 1100px;
  margin: 0 auto 96px;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  text-align: center;
}

.mg-scroll-story {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  align-items: start;
  gap: clamp(64px, 9vw, 132px);
}

.mg-story-visual {
  position: sticky;
  top: calc(var(--nav-h) + 92px);
  height: min(64vw, 660px);
  overflow: hidden;
  border-radius: var(--r-block);
  background: #d7f2a7;
}

.mg-story-visual figure {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: clamp(20px, 3vw, 42px);
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 400ms var(--ease), transform 600ms var(--ease-soft);
}

.mg-story-visual figure:nth-child(2) { background: #dbe6ff; }
.mg-story-visual figure:nth-child(3) { background: #f2d6bc; }
.mg-story-visual figure.is-active { opacity: 1; transform: scale(1); }
.mg-story-visual img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-block); }

.mg-story-steps article {
  display: flex;
  min-height: 370px;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0 80px;
  border-bottom: 1px solid var(--mg-line);
  opacity: 0.24;
  transition: opacity 300ms var(--ease);
}

.mg-story-steps article:first-child { padding-top: 80px; }
.mg-story-steps article.is-active { opacity: 1; }
.mg-story-steps h3 {
  margin: 0 0 18px;
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.mg-story-steps p { max-width: 520px; margin: 0; color: var(--mg-muted); font-size: 17px; line-height: 1.55; }

.mg-proof {
  padding-bottom: 120px;
  background: #fff;
}

.mg-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mg-proof-grid div {
  display: flex;
  min-height: 310px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px 38px;
  border-top: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
  border-left: 1px solid var(--mg-line);
}

.mg-proof-grid div:last-child { border-right: 1px solid var(--mg-line); }
.mg-proof-grid strong {
  font-size: clamp(48px, 6vw, 86px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.07em;
}
.mg-proof-grid span { max-width: 310px; margin-top: 24px; color: var(--mg-muted); font-size: 17px; line-height: 1.4; }

.mg-inventory {
  padding-block: var(--section-display);
  background: var(--mg-paper);
}

.mg-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr);
  align-items: end;
  gap: 80px;
  margin-bottom: 80px;
}

.mg-section-head h2,
.mg-cohorts h2,
.mg-owners h2 {
  max-width: 1080px;
  margin: 0;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
}

.mg-section-head > p { margin: 0; color: var(--mg-muted); font-size: 18px; line-height: 1.55; }

.mg-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--mg-line);
}

.mg-card-grid article {
  display: flex;
  min-height: 510px;
  flex-direction: column;
  padding: 38px;
  border-bottom: 1px solid var(--mg-line);
  border-left: 1px solid var(--mg-line);
  background: transparent;
}
.mg-card-grid article:last-child { border-right: 1px solid var(--mg-line); }

.mg-card-grid h3 {
  margin: 0 0 18px;
  font-size: clamp(32px, 3vw, 46px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
}

.mg-card-grid p { margin: 0; color: var(--mg-muted); line-height: 1.55; }
.mg-card-grid ul {
  margin: auto 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--mg-line);
  list-style: none;
}
.mg-card-grid li { margin-top: 10px; }
.mg-card-grid li::before { content: "✓"; margin-right: 10px; }

.mg-cohorts {
  padding-block: var(--section-roomy);
}

.mg-cohorts h2 { margin-bottom: 80px; }
.mg-cohort-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }

.mg-cohort-art {
  position: relative;
  height: 440px;
  overflow: hidden;
  border-radius: var(--r-block);
}

.mg-cohort-art-pilot {
  display: grid;
  grid-template-columns: repeat(2, 110px);
  place-content: center;
  gap: 18px;
  background: #dbe6ff;
}

.mg-cohort-art-pilot span {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--mg-ink);
  border-radius: 50%;
  background: #fff;
  font-size: 22px;
}

.mg-cohort-art-signal {
  display: flex;
  align-items: flex-end;
  gap: 8%;
  padding: 60px 10% 90px;
  background: #d7f2a7;
}

.mg-cohort-art-signal i {
  width: 12%;
  height: var(--signal);
  border: 1px solid var(--mg-ink);
  background: #fff;
}
.mg-cohort-art-signal i:nth-child(1) { --signal: 28%; }
.mg-cohort-art-signal i:nth-child(2) { --signal: 40%; }
.mg-cohort-art-signal i:nth-child(3) { --signal: 52%; }
.mg-cohort-art-signal i:nth-child(4) { --signal: 68%; }
.mg-cohort-art-signal i:nth-child(5) { --signal: 82%; }
.mg-cohort-art-signal b { position: absolute; right: 10%; bottom: 34px; font-weight: 400; }

.mg-cohort-grid h3,
.mg-owner-grid h3 {
  margin: 30px 0 14px;
  font-size: 21px;
  font-weight: 400;
}
.mg-cohort-grid p { max-width: 560px; margin: 0; color: var(--mg-muted); line-height: 1.55; }

.mg-acceptance {
  padding-block: var(--section-roomy);
  background: var(--mg-blue);
  color: #fff;
}

.mg-acceptance-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(50px, 9vw, 150px);
}

.mg-acceptance h2 {
  margin: 0;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 0.97;
}
.mg-acceptance p { margin: 25px 0 0; color: #fff; font-size: 18px; line-height: 1.65; }
.mg-text-link {
  display: inline-flex;
  gap: 12px;
  margin-top: 28px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
}
.mg-acceptance figure { overflow: hidden; margin: 0; padding: clamp(20px, 3vw, 44px); border-radius: var(--r-block); background: #dbe6ff; }
.mg-acceptance img { display: block; width: 100%; height: auto; border-radius: var(--r-block); box-shadow: 0 22px 60px rgba(31, 49, 95, 0.18); }

.mg-owners,
.mg-resources,
.mg-faq {
  padding-block: var(--section-roomy);
}
.mg-final { padding-block: var(--section-display); }

.mg-owners h2 { margin-bottom: 80px; }
.mg-owner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mg-owner-grid article {
  min-height: 360px;
  padding: 38px;
  border-top: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
  border-left: 1px solid var(--mg-line);
}
.mg-owner-grid article:last-child { border-right: 1px solid var(--mg-line); }
.mg-owner-grid span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.mg-owner-grid h3 { margin-top: 120px; font-size: 28px; letter-spacing: -0.035em; }
.mg-owner-grid p { margin: 0; color: var(--mg-muted); line-height: 1.55; }

.mg-resources {
  background: var(--mg-paper);
}
.mg-resources h2,
.mg-faq h2 {
  margin: 0 0 64px;
  font-size: clamp(34px, 3.3vw, 48px);
  line-height: 1.1;
}
.mg-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--mg-line);
}
.mg-resource-grid a {
  display: grid;
  min-height: 300px;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  padding: 28px;
  border-bottom: 1px solid var(--mg-line);
  border-left: 1px solid var(--mg-line);
  color: var(--mg-ink);
}
.mg-resource-grid a:last-child { border-right: 1px solid var(--mg-line); }
.mg-resource-grid span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.mg-resource-grid strong { align-self: end; font-size: 26px; font-weight: 400; line-height: 1.05; letter-spacing: -0.04em; }
.mg-resource-grid b { justify-self: end; font-size: 20px; font-weight: 400; }

.mg-faq .faq { max-width: none; }
.mg-faq h2 { margin-bottom: 38px; }

.mg-final {
  background: var(--mg-ink);
  color: #fff;
}
.mg-final h2 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
}
.mg-final p { max-width: 720px; margin: 28px 0 38px; color: #aaa; font-size: 18px; line-height: 1.55; }
.mg-final .mg-actions { justify-content: flex-start; }
.mg-final .mg-button-outline { border-color: #fff; color: #fff; }

@media (max-width: 899px) {
  .mg-section-head { grid-template-columns: 1fr; }
  .mg-scroll-story { grid-template-columns: 1fr; gap: 0; }
  .mg-story-visual { display: none; }
  .mg-story-steps article { min-height: 0; padding: 56px 0; opacity: 1; }
  .mg-card-grid,
  .mg-acceptance-grid { grid-template-columns: 1fr; }
  .mg-card-grid article { min-height: 430px; }
  .mg-cohort-grid { gap: 36px; }
  .mg-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-resource-grid a:nth-child(2) { border-right: 1px solid var(--mg-line); }
}

@media (max-width: 599px) {
  .mg-wrap { padding-inline: 15px; }
  .mg-hero-copy { min-height: 330px; }
  .mg-hero h1 { font-size: 40px; }
  .mg-hero-copy > p { margin-bottom: 28px; font-size: 12px; }
  .mg-hero-scene { height: 760px; }
  .mg-scene-source { top: 300px; left: -12%; width: 70%; height: 280px; }
  .mg-scene-box { top: 80px; right: -9%; width: 61%; height: 240px; }
  .mg-scene-route { top: 510px; left: 25%; width: 88%; gap: 8px; transform: rotate(-2deg); }
  .mg-scene-route span { min-width: 76px; font-size: 14px; }
  .mg-scene-route i { width: 42px; }
  .mg-promises { grid-template-columns: 1fr; }
  .mg-promises p { min-height: 110px; border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); }
  .mg-promises p:last-child { border-bottom: 0; }
  .mg-sequence,
  .mg-inventory,
  .mg-cohorts,
  .mg-acceptance,
  .mg-owners,
  .mg-resources,
  .mg-faq,
  .mg-sequence h2 { margin-bottom: 44px; font-size: 48px; }
  .mg-story-steps article:first-child { padding-top: 0; }
  .mg-proof-grid,
  .mg-card-grid,
  .mg-cohort-grid,
  .mg-owner-grid,
  .mg-resource-grid { grid-template-columns: 1fr; }
  .mg-proof { padding-bottom: 80px; }
  .mg-proof-grid div { min-height: 210px; border-right: 1px solid var(--mg-line); }
  .mg-section-head { gap: 24px; margin-bottom: 50px; }
  .mg-section-head h2,
  .mg-cohorts h2,
  .mg-owners h2,
  .mg-final h2 { font-size: 48px; }
  .mg-card-grid article { min-height: 400px; padding: 28px; border-right: 1px solid var(--mg-line); }
  .mg-cohorts h2,
  .mg-owners h2 { margin-bottom: 50px; }
  .mg-cohort-art { height: 330px; }
  .mg-cohort-art-pilot { grid-template-columns: repeat(2, 90px); }
  .mg-acceptance h2 { font-size: 48px; }
  .mg-owner-grid article { min-height: 300px; border-right: 1px solid var(--mg-line); }
  .mg-owner-grid h3 { margin-top: 76px; }
  .mg-resources h2,
  .mg-faq h2 { margin-bottom: 42px; font-size: 32px; }
  .mg-resource-grid a,
  .mg-resource-grid a:nth-child(2) { min-height: 220px; border-right: 1px solid var(--mg-line); }
  .mg-actions { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-button,
  .mg-story-visual figure { transition: none; }
}
}

@layer pages {
.online-store {
  --os-ink: #0a0b0c;
  --os-muted: #626461;
  --os-blue: #2862f4;
  --os-paper: #f2f1ec;
  --os-line: #d8d7d1;
  color: var(--os-ink);
  background: #fff;
  overflow: clip;
}

.os-wrap {
  width: min(100%, 1600px);
  margin-inline: auto;
  padding-inline: clamp(22px, 4vw, 68px);
}

.os-kicker,
.os-index {
  margin: 0;
  font: 400 12px/1.3 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.os-hero { padding-block: var(--section-display); }
.os-hero-copy { max-width: 1200px; text-align: center; }
.os-hero h1 {
  margin: 28px 0 0;
  font: 400 clamp(58px, 8.5vw, 132px)/.89 var(--font-display);
  letter-spacing: -.07em;
}
.os-hero-copy > p:not(.os-kicker) {
  max-width: 750px;
  margin: 30px auto 0;
  color: var(--os-muted);
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.55;
}
.os-actions { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.os-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 23px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  transition: transform .2s ease, background-color .2s ease;
}
.os-button:hover { transform: translateY(-2px); }
.os-button-primary { color: #fff; background: var(--os-blue); }
.os-button-outline { color: var(--os-blue); border-color: var(--os-blue); }
.os-hero-media {
  position: relative;
  width: min(calc(100% - 44px), 1750px);
  height: clamp(560px, 65vw, 900px);
  margin: clamp(70px, 9vw, 130px) auto 0;
  overflow: hidden;
  border-radius: 36px 36px 0 0;
}
.os-hero-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.os-hero-screen {
  position: absolute;
  width: min(58%, 820px);
  right: 6%;
  bottom: -2%;
  padding: clamp(12px, 2vw, 28px);
  border-radius: 24px 24px 0 0;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 25px 80px rgba(0, 0, 0, .2);
  animation: os-screen-float 6s ease-in-out infinite alternate;
}
.os-hero-screen img { display: block; width: 100%; height: auto; border-radius: 12px; }
@keyframes os-screen-float { to { transform: translateY(-18px); } }

.os-integrated,
.os-themes,
.os-brand,
.os-shopping,
.os-fulfilment,
.os-estate,
.os-plans,
.os-faq,
.os-final { padding-block: var(--section-display); }
.os-section-head-center { max-width: 1080px; margin-inline: auto; text-align: center; }
.os-section-head h2,
.os-brand h2,
.os-fulfilment h2,
.os-estate h2,
.os-plans h2,
.os-faq h2,
.os-final h2 {
  margin: 18px 0 0;
  font-size: clamp(44px, 6.2vw, 92px);
  font-weight: 400;
  line-height: .97;
  letter-spacing: -.06em;
}
.os-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(60px, 8vw, 110px);
  border-top: 1px solid var(--os-line);
}
.os-benefit-grid article { min-height: 360px; display: flex; flex-direction: column; padding: 26px clamp(24px, 3vw, 50px) 30px 0; }
.os-benefit-grid article + article { padding-left: clamp(24px, 3vw, 50px); border-left: 1px solid var(--os-line); }
.os-index { color: #6a6d68; }
.os-benefit-grid h3 { margin: auto 0 15px; font-size: clamp(28px, 3.2vw, 48px); font-weight: 400; letter-spacing: -.045em; }
.os-benefit-grid p:last-child { margin: 0; color: var(--os-muted); line-height: 1.6; }

.os-workflow { color: #fff; background: #070707; }
.os-workflow .os-section-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: clamp(58px, 8vw, 110px); }
.os-workflow-controls { display: flex; gap: 8px; }
.os-workflow-controls button {
  min-width: 46px;
  min-height: 46px;
  padding: 10px 14px;
  color: #fff;
  border: 1px solid #666;
  border-radius: 999px;
  background: transparent;
  font: inherit;
}
.os-workflow-layout { display: grid; grid-template-columns: minmax(280px, .65fr) minmax(0, 1.35fr); gap: clamp(40px, 8vw, 125px); align-items: start; }
.os-workflow-tabs { border-top: 1px solid #3c3c3c; }
.os-workflow-tabs button {
  width: 100%;
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 7px 15px;
  padding: 22px 0;
  color: #858585;
  border: 0;
  border-bottom: 1px solid #3c3c3c;
  background: transparent;
  text-align: left;
}
.os-workflow-tabs button[aria-selected="true"] { color: #fff; }
.os-workflow-tabs span { grid-row: 1 / 3; font: 400 11px/1.7 var(--font-mono); }
.os-workflow-tabs strong { font-size: 24px; font-weight: 400; }
.os-workflow-tabs small { font-size: 14px; line-height: 1.5; }
.os-workflow-panels { position: sticky; top: calc(var(--nav-h) + 50px); }
.os-workflow-panels figure { margin: 0; padding: clamp(18px, 3vw, 42px); border-radius: 30px; background: #d8e1fb; }
.os-workflow-panels figure[hidden] { display: none; }
.os-workflow-panels img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; box-shadow: 0 25px 70px rgba(0, 0, 0, .22); }

.os-brand { background: #e7d7b8; }
.os-brand-grid { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: clamp(50px, 9vw, 150px); align-items: center; }
.os-brand-copy > p:not(.os-kicker) { margin: 25px 0 0; color: #5a5143; font-size: 18px; line-height: 1.65; }
.os-text-link { display: inline-flex; gap: 12px; margin-top: 28px; padding-bottom: 5px; border-bottom: 1px solid currentColor; }
.os-brand-gallery { min-height: 720px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: center; }
.os-brand-card { margin: 0; overflow: hidden; border-radius: 24px; box-shadow: 0 20px 55px rgba(43, 32, 18, .14); }
.os-brand-card img { display: block; width: 100%; height: auto; object-fit: cover; }
.os-brand-card-one { transform: translateY(70px); }
.os-brand-card-one img { aspect-ratio: 4 / 5; }
.os-brand-card-two img { aspect-ratio: 4 / 5; }
.os-brand-card-three { grid-column: 1 / -1; width: 72%; margin: -90px auto 0; }
.os-brand-card-three img { aspect-ratio: 16 / 10; }

.os-shopping { background: var(--os-paper); }
.os-shopping-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: clamp(60px, 8vw, 110px); border: 1px solid var(--os-line); background: var(--os-line); }
.os-shopping-grid article { min-height: 390px; display: flex; flex-direction: column; padding: clamp(28px, 4vw, 54px); background: #fff; }
.os-shopping-grid span { color: var(--os-blue); font: 400 12px/1 var(--font-mono); }
.os-shopping-grid h3 { max-width: 600px; margin: auto 0 16px; font-size: clamp(30px, 3.4vw, 50px); font-weight: 400; line-height: 1.03; letter-spacing: -.05em; }
.os-shopping-grid p { max-width: 580px; margin: 0; color: var(--os-muted); line-height: 1.6; }

.os-fulfilment { background: #fff; }
.os-fulfilment-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: clamp(50px, 9vw, 150px); align-items: start; }
.os-fulfilment figure { position: sticky; top: calc(var(--nav-h) + 50px); margin: 0; height: calc(100vh - var(--nav-h) - 100px); min-height: 600px; overflow: hidden; border-radius: 30px; }
.os-fulfilment figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.os-fulfilment ul { margin: 60px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--os-line); }
.os-fulfilment li { display: grid; grid-template-columns: 38px 1fr; gap: 18px; padding: 24px 0 30px; border-bottom: 1px solid var(--os-line); }
.os-fulfilment li > span { color: #777; font: 400 11px/1.8 var(--font-mono); }
.os-fulfilment h3 { margin: 0; font-size: 26px; font-weight: 400; }
.os-fulfilment li p { margin: 10px 0 0; color: var(--os-muted); line-height: 1.55; }

.os-estate { color: #fff; background: var(--os-blue); }
.os-estate-copy { max-width: 1050px; }
.os-estate-copy > p:last-child { max-width: 750px; margin: 28px 0 0; color: rgba(255,255,255,.8); font-size: 19px; line-height: 1.6; }
.os-estate-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(70px, 9vw, 125px); border-top: 1px solid rgba(255,255,255,.45); }
.os-estate-stats div { display: flex; flex-direction: column; min-height: 280px; padding: 24px 30px 30px 0; }
.os-estate-stats div + div { padding-left: 30px; border-left: 1px solid rgba(255,255,255,.45); }
.os-estate-stats strong { margin-top: auto; font-size: clamp(58px, 7vw, 105px); font-weight: 400; line-height: 1; letter-spacing: -.065em; }
.os-estate-stats span { margin-top: 10px; font-size: 18px; }

.os-plans { background: #fff; }
.os-plans-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 50px clamp(70px, 10vw, 160px); align-items: end; }
.os-plans-grid > div:last-child > p { margin: 0; color: var(--os-muted); font-size: 19px; line-height: 1.65; }

.os-faq { background: #fff; }
.os-faq-grid { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: 50px clamp(70px, 10vw, 160px); align-items: start; }
.os-faq h2 { margin: 0; }

.os-final { color: #fff; background: #070707; }
.os-final-inner { text-align: center; }
.os-final h2 { max-width: 1100px; margin-inline: auto; }
.os-button-light { color: var(--os-ink); background: #fff; }
.os-button-dark-outline { color: #fff; border-color: #666; }

@media (max-width: 899px) {
  .os-benefit-grid,
  .os-workflow-layout,
  .os-brand-grid,
  .os-fulfilment-grid,
  .os-plans-grid,
  .os-faq-grid { grid-template-columns: 1fr; }
  .os-benefit-grid article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--os-line); }
  .os-benefit-grid article { min-height: 280px; }
  .os-workflow-panels,
  .os-fulfilment figure { position: static; height: auto; min-height: 0; }
  .os-fulfilment figure { aspect-ratio: 4 / 3; }
}

@media (max-width: 599px) {
  .os-hero-media { width: calc(100% - 20px); height: 680px; }
  .os-hero-screen { width: 88%; right: -12%; bottom: 4%; }
  .os-workflow .os-section-head { align-items: start; flex-direction: column; }
  .os-workflow-tabs { display: flex; overflow-x: auto; }
  .os-workflow-tabs button { min-width: 210px; }
  .os-brand-gallery { min-height: 590px; }
  .os-shopping-grid,
  .os-estate-stats { grid-template-columns: 1fr; }
  .os-estate-stats div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.45); }
  .os-estate-stats div { min-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .os-hero-screen { animation: none; }
  .os-button { transition: none; }
}

/* Square Online Store reference geometry, adapted to Box content. */
@media (min-width: 900px) {
  .os-hero {
    box-sizing: border-box;
  }
  .os-hero-copy { max-width: 1160px; }
  .os-hero h1 {
    max-width: 1060px;
    margin: 30px auto 0;
    font-size: 96px;
    line-height: .94;
    letter-spacing: -.06em;
  }
  .os-hero-media {
    width: calc(100% - 120px);
    max-width: 1320px;
    height: 746px;
    margin-top: 70px;
    border-radius: 10px;
  }

  .os-integrated {
    box-sizing: border-box;
    padding-block: var(--section-roomy);
  }
  .os-integrated .os-section-head h2 { max-width: 820px; margin-inline: auto; font-size: 56px; line-height: 1.02; }
  .os-benefit-grid {
    position: relative;
    gap: 20px;
    margin-top: 72px;
    border-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .os-benefit-grid article,
  .os-benefit-grid article + article {
    min-height: 480px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .os-benefit-grid article:nth-child(2) { transform: translateY(160px); }
  .os-benefit-grid article:nth-child(3) { grid-column: 1; margin-top: 36px; }
  .os-benefit-grid figure {
    height: 330px;
    margin: 0 0 26px;
    overflow: hidden;
    border-radius: 10px;
  }
  .os-benefit-grid img { width: 100%; height: 100%; object-fit: cover; }
  .os-benefit-grid h3 { margin: 18px 0 14px; font-size: 34px; line-height: 1.05; }
  .os-benefit-grid p:last-child { max-width: 540px; }

  .os-themes {
    box-sizing: border-box;
    padding-block: var(--section-roomy);
    background: #fff;
    color: var(--os-ink);
  }
  .os-themes h2 {
    margin: 0 0 42px;
    text-align: center;
    font-size: 68px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.055em;
  }
  .os-theme-window { width: 100%; overflow: hidden; }
  .os-theme-rail {
    --theme-x: calc((100vw - 1390px) / 2);
    display: flex;
    width: max-content;
    gap: 14px;
    transform: translate3d(var(--theme-x), 0, 0);
    will-change: transform;
  }
  .os-theme-rail figure {
    width: 220px;
    height: 510px;
    flex: 0 0 220px;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    background: var(--os-paper);
  }
  .os-theme-rail img { width: 100%; height: 100%; object-fit: cover; }
  .os-theme-rail figure {
    --theme-scale: 1;
    transform: scale(var(--theme-scale));
    transition: transform 120ms linear;
  }
  .os-theme-rail figure:nth-child(2) img,
  .os-theme-rail figure:nth-child(5) img { object-position: left top; }
  .os-theme-copy { max-width: 620px; margin: 42px auto 0; text-align: center; }
  .os-theme-copy p { margin: 0 0 20px; line-height: 1.45; }
  .os-theme-copy a { border-bottom: 1px solid currentColor; padding-bottom: 3px; font-weight: 500; }

  .os-brand { box-sizing: border-box; padding-block: var(--section-roomy); }
  .os-brand h2 { font-size: 64px; line-height: 1; }
  .os-brand-gallery { min-height: 650px; }
  .os-shopping { box-sizing: border-box; padding-block: var(--section-roomy); }

  .os-fulfilment {
    box-sizing: border-box;
    padding-block: var(--section-compact);
  }
  .os-fulfilment > .os-wrap > h2 {
    max-width: 920px;
    margin: 0 0 32px;
    font-size: 48px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.05em;
  }
  .os-fulfilment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  .os-fulfilment-grid article { position: relative; height: 265px; overflow: hidden; border-radius: 10px; }
  .os-fulfilment-grid img { width: 100%; height: 100%; object-fit: cover; }
  .os-fulfilment-grid article::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
  .os-fulfilment-grid h3 { position: absolute; z-index: 1; bottom: 20px; left: 22px; margin: 0; color: #fff; font-size: 22px; }

  .os-estate { box-sizing: border-box; padding-block: var(--section-roomy); }

  .os-plans {
    box-sizing: border-box;
    padding-block: var(--section-roomy);
    background: var(--os-paper);
  }
  .os-plans .os-section-head > p:last-child {
    max-width: 700px;
    margin: 28px auto 0;
    color: var(--os-muted);
    font-size: 18px;
    line-height: 1.55;
  }
  .os-plan-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 90px;
  }
  .os-plan-cards article {
    display: flex;
    min-height: 720px;
    flex-direction: column;
    padding: 40px;
    border-radius: 12px;
    background: #fff;
  }
  .os-plan-cards h3 { margin: 0; font-size: 42px; font-weight: 500; letter-spacing: -.04em; }
  .os-plan-cards p { margin: 28px 0; color: var(--os-muted); font-size: 17px; line-height: 1.55; }
  .os-plan-cards ul { margin: 22px 0 40px; padding: 0; list-style: none; border-top: 1px solid var(--os-line); }
  .os-plan-cards li { padding: 15px 0; border-bottom: 1px solid var(--os-line); color: var(--os-muted); }
  .os-plan-cards strong { margin-top: auto; font-size: 30px; font-weight: 500; letter-spacing: -.035em; }
  .os-plan-cards .os-button { align-self: flex-start; margin-top: 34px; }

  .os-resources { box-sizing: border-box; padding-block: var(--section-roomy); }
  .os-resources h2 { margin: 0 0 62px; font-size: 64px; font-weight: 400; line-height: 1; letter-spacing: -.055em; }
  .os-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .os-resource-grid a { color: var(--os-ink); }
  .os-resource-grid figure { height: 430px; margin: 0 0 22px; overflow: hidden; border-radius: 10px; }
  .os-resource-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
  .os-resource-grid a:hover img { transform: scale(1.025); }
  .os-resource-grid h3 { margin: 0; font-size: 23px; font-weight: 500; line-height: 1.2; }

  .os-faq { box-sizing: border-box; padding-block: var(--section-standard); }
  .os-faq h2 { font-size: 56px; line-height: 1; }
  .os-final { box-sizing: border-box; color: var(--os-ink); background: #fff; }
  .os-final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
  .os-final h2 { max-width: 560px; margin: 18px 0 30px; font-size: 64px; }
  .os-final .os-actions { justify-content: flex-start; }
  .os-final form > label { display: block; margin-bottom: 28px; font-size: 22px; font-weight: 500; line-height: 1.25; }
  .os-final form > div { display: grid; grid-template-columns: 1fr auto; gap: 18px; }
  .os-final input { min-width: 0; min-height: var(--control-h-large); padding: 0 20px; border: 1px solid #858984; border-radius: var(--r-control); font: inherit; }
}

@media (max-width: 899px) {
  .os-benefit-grid figure { height: 300px; margin: 0 0 24px; overflow: hidden; border-radius: 10px; }
  .os-benefit-grid figure img { width: 100%; height: 100%; object-fit: cover; }
  .os-themes h2 { margin: 0 24px 42px; text-align: center; font-size: 48px; font-weight: 400; line-height: 1; letter-spacing: -.05em; }
  .os-theme-window { overflow-x: auto; scroll-snap-type: x mandatory; }
  .os-theme-rail { display: flex; width: max-content; gap: 12px; padding-inline: 24px; }
  .os-theme-rail [data-theme-clone] { display: none; }
  .os-theme-rail figure { width: 230px; height: 470px; flex: 0 0 230px; margin: 0; overflow: hidden; border-radius: 10px; scroll-snap-align: center; }
  .os-theme-rail img { width: 100%; height: 100%; object-fit: cover; }
  .os-theme-copy { padding-inline: 24px; margin-top: 36px; text-align: center; }
  .os-theme-copy p { line-height: 1.5; }
  .os-theme-copy a { display: inline-block; margin-top: 8px; border-bottom: 1px solid currentColor; }
  .os-fulfilment > .os-wrap > h2 { margin: 0 0 40px; font-size: 42px; font-weight: 400; line-height: 1; letter-spacing: -.05em; }
  .os-fulfilment-grid { display: grid; gap: 18px; }
  .os-fulfilment-grid article { position: relative; height: 300px; overflow: hidden; border-radius: 10px; }
  .os-fulfilment-grid img { width: 100%; height: 100%; object-fit: cover; }
  .os-fulfilment-grid h3 { position: absolute; bottom: 20px; left: 20px; margin: 0; color: #fff; }
  .os-plan-cards { display: grid; gap: 18px; margin-top: 54px; }
  .os-plan-cards article { display: flex; min-height: 360px; flex-direction: column; padding: 28px; border-radius: 12px; background: #fff; }
  .os-plan-cards h3 { margin: 0; font-size: 34px; }
  .os-plan-cards p { color: var(--os-muted); line-height: 1.55; }
  .os-plan-cards ul { margin: 20px 0 34px; padding: 0; list-style: none; }
  .os-plan-cards li { padding: 13px 0; border-bottom: 1px solid var(--os-line); }
  .os-plan-cards strong { margin-top: auto; font-size: 26px; }
  .os-plan-cards .os-button { align-self: flex-start; margin-top: 28px; }
  .os-resources h2 { margin: 0 0 46px; font-size: 46px; }
  .os-resource-grid { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .os-resource-grid a { width: 82vw; flex: 0 0 auto; color: var(--os-ink); scroll-snap-align: start; }
  .os-resource-grid figure { height: 390px; margin: 0 0 20px; overflow: hidden; border-radius: 10px; }
  .os-resource-grid img { width: 100%; height: 100%; object-fit: cover; }
  .os-resource-grid h3 { margin: 0; font-size: 22px; }
  .os-final { color: var(--os-ink); background: #fff; }
  .os-final-grid { display: grid; gap: 56px; text-align: left; }
  .os-final h2 { margin-inline: 0; }
  .os-final .os-actions { justify-content: flex-start; }
  .os-final form > label { display: block; margin-bottom: 24px; font-size: 20px; font-weight: 500; }
  .os-final form > div { display: grid; gap: 14px; }
  .os-final input { min-height: var(--control-h-large); padding: 0 18px; border: 1px solid #858984; border-radius: var(--r-control); font: inherit; }
}
}

@layer pages {
.provider-card-page { overflow: clip; color: #090909; background: #fff; }
.provider-card-page * { box-sizing: border-box; }
.pc-kicker { margin: 0; font-size: 14px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.pc-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; padding: 0 24px; border: 1.5px solid currentColor; border-radius: 8px; color: inherit; font-weight: 400; text-decoration: none; -webkit-text-stroke: .3px currentColor; paint-order: stroke fill; }
.pc-button-primary { border-color: #2864f0; color: #fff; background: #2864f0; }
.pc-actions { display: flex; justify-content: center; margin-top: 32px; }
.pc-hero { display: grid; place-items: center; text-align: center; background: #d8ff43; }
.pc-hero h1 { max-width: 1000px; margin: 22px auto 26px; font-size: 64px; font-weight: 400; letter-spacing: -.048em; line-height: 1.02; -webkit-text-stroke: .5px currentColor; paint-order: stroke fill; }
.pc-hero > div > p:not(.pc-kicker) { max-width: 690px; margin-inline: auto; font-size: 19px; line-height: 1.5; }
.pc-value-strip { display: grid; align-items: center; }
.pc-value-strip > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pc-value-strip p { margin: 0; padding-top: 22px; border-top: 1px solid #999; font-size: 22px; font-weight: 400; line-height: 1.15; -webkit-text-stroke: .35px currentColor; paint-order: stroke fill; }
.pc-control { background: #f3f1eb; }
.pc-control h2, .pc-expenses h2, .pc-moving h2 { max-width: 960px; margin: 0 0 70px; font-size: 64px; font-weight: 400; letter-spacing: -.048em; line-height: 1; -webkit-text-stroke: .5px currentColor; paint-order: stroke fill; }
.pc-control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pc-control-grid article { overflow: hidden; border-radius: 18px; background: #fff; }
.pc-control-grid article > div { min-height: 260px; padding: 30px; }
.pc-control-grid img { width: 100%; height: 410px !important; object-fit: cover; object-position: top; }
.pc-control-grid h3 { margin: 16px 0 12px; font-size: 29px; font-weight: 400; letter-spacing: -.035em; line-height: 1.1; -webkit-text-stroke: .35px currentColor; paint-order: stroke fill; }
.pc-control-grid p:not(.pc-kicker) { color: #555; line-height: 1.5; }
.pc-tabs { display: flex; gap: 12px; margin-bottom: 55px; overflow-x: auto; }
.pc-tabs button { flex: 0 0 auto; min-height: 48px; padding: 0 22px; border: 1px solid #858984; border-radius: 999px; color: #111; background: #fff; font: inherit; font-weight: 400; }
.pc-tabs button[aria-selected="true"] { border-color: #111; color: #fff; background: #111; }
.pc-panels article { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: center; }
.pc-panels article[hidden] { display: none; }
.pc-panels img { width: 100%; height: 635px !important; object-fit: cover; object-position: top; border-radius: 18px; }
.pc-panels h3 { margin: 0 0 18px; font-size: 32px; font-weight: 400; letter-spacing: -.035em; line-height: 1.1; -webkit-text-stroke: .35px currentColor; paint-order: stroke fill; }
.pc-panels p { color: #555; font-size: 18px; line-height: 1.5; }
.pc-moving { background: #111; color: #fff; }
.pc-moving-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pc-moving-grid a { color: inherit; text-decoration: none; }
.pc-moving-grid img { width: 100%; height: 397px !important; object-fit: cover; border-radius: 50%; }
.pc-moving-grid strong { display: block; min-height: 92px; margin-top: 24px; font-size: 27px; font-weight: 400; line-height: 1.15; -webkit-text-stroke: .35px currentColor; paint-order: stroke fill; }
.pc-moving-grid span { color: #bbb; font-weight: 400; -webkit-text-stroke: .3px currentColor; paint-order: stroke fill; }
.pc-faq-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: 90px; }
.pc-faq h2 { margin: 0; font-size: 40px; font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
.pc-close { background: #d8ff43; }
.pc-close-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.pc-close h2 { margin: 0 0 32px; font-size: 56px; font-weight: 400; letter-spacing: -.048em; line-height: 1; -webkit-text-stroke: .5px currentColor; paint-order: stroke fill; }
.pc-close h3 { margin-top: 0; font-size: 22px; font-weight: 400; line-height: 1.15; }
.pc-close label { display: block; margin-bottom: 10px; font-weight: 400; -webkit-text-stroke: .3px currentColor; paint-order: stroke fill; }
.pc-close form > div { display: flex; }
.pc-close input { min-width: 0; flex: 1; height: var(--control-h-large); padding: 0 16px; border: 1px solid #777; border-radius: var(--r-control) 0 0 var(--r-control); font: inherit; }
.pc-close form button { height: 56px; padding: 0 20px; border: 0; border-radius: 0 8px 8px 0; color: #fff; background: #2864f0; font: inherit; font-weight: 400; -webkit-text-stroke: .3px currentColor; paint-order: stroke fill; }
.pc-note p { max-width: 940px; color: #555; font-size: 17px; line-height: 1.6; }
@media (max-width: 760px) {
  .pc-hero h1 { font-size: 40px; }
  .pc-control h2, .pc-expenses h2, .pc-moving h2 { font-size: 48px; }
  .pc-value-strip > div, .pc-control-grid, .pc-faq-grid, .pc-close-grid { grid-template-columns: 1fr; }
  .pc-control-grid img { height: 300px !important; }
  .pc-control-grid article > div { min-height: 0; }
  .pc-panels article { grid-template-columns: 1fr; gap: 30px; }
  .pc-panels img { height: 500px !important; }
  .pc-moving-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .pc-moving-grid a { min-width: 80vw; scroll-snap-align: start; }
  .pc-moving-grid img { height: min(80vw, 360px) !important; }
  .pc-faq h2 { font-size: 32px; }
  .pc-close h2 { font-size: 44px; }
}
}

@layer pages {
.secure-box {
  --sbx-ink: #0b0c0d;
  --sbx-muted: #626462;
  --sbx-paper: #f3f2ed;
  --sbx-blue: #2862f4;
  --sbx-line: #d7d7d1;
  color: var(--sbx-ink);
  background: #fff;
  overflow: clip;
}

.sbx-wrap {
  width: min(100%, 1600px);
  margin-inline: auto;
  padding-inline: clamp(22px, 4vw, 68px);
}

.sbx-kicker,
.sbx-index,
.sbx-boundary-label {
  margin: 0;
  font: 400 12px/1.3 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sbx-hero { padding-block: var(--section-display); }
.sbx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(46px, 8vw, 130px);
  align-items: center;
}
.sbx-hero-copy { max-width: 720px; }
.sbx-hero h1 {
  margin: 30px 0 0;
  font: 400 clamp(62px, 7.7vw, 118px)/.88 var(--font-display);
  letter-spacing: -.065em;
}
.sbx-hero-copy > p:not(.sbx-kicker) {
  max-width: 620px;
  margin: 32px 0 0;
  color: var(--sbx-muted);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.58;
}
.sbx-actions { display: flex; flex-wrap: wrap; margin-top: 32px; }
.sbx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 21px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  transition: transform .2s ease, background-color .2s ease;
}
.sbx-button:hover { transform: translateY(-2px); }
.sbx-button-primary { color: #fff; background: var(--sbx-blue); }
.sbx-button-secondary { color: var(--sbx-blue); border-color: var(--sbx-blue); }
.sbx-hero-media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 28px; }
.sbx-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sbx-intro { padding-block: var(--section-roomy); color: #fff; background: #050505; }
.sbx-intro-copy { max-width: 1060px; }
.sbx-intro h2,
.sbx-section-head h2,
.sbx-boundary h2,
.sbx-review h2,
.sbx-faq h2,
.sbx-final h2 {
  margin: 20px 0 0;
  font-size: clamp(44px, 6.2vw, 92px);
  font-weight: 400;
  line-height: .97;
  letter-spacing: -.06em;
}
.sbx-intro-copy > p:last-child { max-width: 760px; margin: 30px 0 0; color: #bdbdbd; font-size: 19px; line-height: 1.6; }
.sbx-assurance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(60px, 8vw, 110px); border-top: 1px solid #3b3b3b; }
.sbx-assurance-grid article { padding: 26px clamp(24px, 3vw, 46px) 0 0; }
.sbx-assurance-grid article + article { padding-left: clamp(24px, 3vw, 46px); border-left: 1px solid #3b3b3b; }
.sbx-assurance-grid span { color: #888; font: 400 12px/1 var(--font-mono); }
.sbx-assurance-grid h3 { margin: 55px 0 14px; font-size: clamp(24px, 2.4vw, 36px); font-weight: 400; line-height: 1.06; letter-spacing: -.04em; }
.sbx-assurance-grid p { margin: 0; color: #aaa; line-height: 1.6; }

.sbx-flow { padding-block: var(--section-roomy); background: var(--sbx-paper); }
.sbx-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr); gap: 40px clamp(60px, 9vw, 150px); align-items: end; margin-bottom: clamp(56px, 8vw, 110px); }
.sbx-section-head > p { margin: 0; color: var(--sbx-muted); font-size: 18px; line-height: 1.6; }
.sbx-tablist { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--sbx-line); }
.sbx-tablist button {
  display: flex;
  gap: 18px;
  padding: 22px 18px;
  color: #666;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 18px;
  text-align: left;
}
.sbx-tablist button span { font: 400 11px/1.7 var(--font-mono); }
.sbx-tablist button[aria-selected="true"] { color: var(--sbx-ink); border-bottom-color: var(--sbx-blue); }
.sbx-panels { padding-top: clamp(38px, 6vw, 80px); }
.sbx-panels article { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: clamp(42px, 8vw, 130px); align-items: center; }
.sbx-panels article[hidden] { display: none; }
.sbx-panels figure { margin: 0; padding: clamp(20px, 3vw, 45px); background: #dfe5f7; border-radius: 30px; }
.sbx-panels img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; box-shadow: 0 25px 70px rgba(20, 30, 60, .14); }
.sbx-panels h3 { margin: 20px 0 18px; font-size: clamp(35px, 4.5vw, 66px); font-weight: 400; line-height: 1; letter-spacing: -.055em; }
.sbx-panels article > div > p:last-child { margin: 0; color: var(--sbx-muted); font-size: 18px; line-height: 1.6; }

.sbx-layers { padding-block: var(--section-roomy); color: #fff; background: #050505; }
.sbx-layer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sbx-layer-grid article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); background: #171717; border-radius: 24px; overflow: hidden; }
.sbx-layer-grid figure { margin: 0; min-height: 360px; }
.sbx-layer-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sbx-layer-grid article > div { display: flex; flex-direction: column; padding: 28px; }
.sbx-index { color: #888; }
.sbx-layer-grid h3 { margin: auto 0 15px; font-size: clamp(26px, 2.8vw, 42px); font-weight: 400; line-height: 1.04; letter-spacing: -.045em; }
.sbx-layer-grid p:last-child { margin: 0; color: #aaa; line-height: 1.55; }

.sbx-boundary { padding-block: var(--section-roomy); background: #dce5ff; }
.sbx-boundary-intro { max-width: 1050px; }
.sbx-boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(60px, 8vw, 110px); border-top: 1px solid #aeb9d5; }
.sbx-boundary-grid article { padding: 26px clamp(30px, 4vw, 60px) 20px 0; }
.sbx-boundary-grid article + article { padding-left: clamp(30px, 4vw, 60px); border-left: 1px solid #aeb9d5; }
.sbx-boundary-label { color: #3656ad; }
.sbx-boundary-grid h3 { margin: 50px 0 20px; font-size: clamp(28px, 3.2vw, 48px); font-weight: 400; line-height: 1.05; letter-spacing: -.045em; }
.sbx-boundary-grid p:last-child { margin: 0; color: #4e5871; font-size: 17px; line-height: 1.6; }
.sbx-boundary-link { display: flex; justify-content: space-between; gap: 24px; margin-top: 70px; padding: 22px 0; border-block: 1px solid #8999c3; font-size: 20px; }

.sbx-review { padding-block: var(--section-roomy); }
.sbx-review-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 50px clamp(60px, 10vw, 160px); align-items: start; }
.sbx-review-grid > div:last-child > p { margin: 0 0 42px; color: var(--sbx-muted); font-size: 19px; line-height: 1.65; }
.sbx-review-links { border-top: 1px solid var(--sbx-line); }
.sbx-review-links a { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--sbx-line); }

.sbx-faq { padding-block: var(--section-standard); background: var(--sbx-paper); }
.sbx-faq-grid { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: 50px clamp(60px, 10vw, 160px); align-items: start; }
.sbx-faq h2 { margin: 0; font-size: clamp(42px, 5vw, 74px); }

.sbx-final { padding-block: var(--section-display); text-align: center; }
.sbx-final h2 { max-width: 1050px; margin-inline: auto; }
.sbx-final-inner > p:not(.sbx-kicker) { max-width: 620px; margin: 28px auto; color: var(--sbx-muted); font-size: 19px; line-height: 1.6; }

@media (max-width: 899px) {
  .sbx-hero-grid,
  .sbx-section-head,
  .sbx-panels article,
  .sbx-review-grid,
  .sbx-faq-grid { grid-template-columns: 1fr; }
  .sbx-hero-media { aspect-ratio: 4 / 3; }
  .sbx-assurance-grid { grid-template-columns: 1fr; }
  .sbx-assurance-grid article + article { padding-left: 0; border-left: 0; border-top: 1px solid currentColor; }
  .sbx-assurance-grid article { padding-block: 28px 38px; }
  .sbx-assurance-grid h3 { margin-top: 30px; margin-bottom: 20px; }
  .sbx-layer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .sbx-tablist { overflow-x: auto; }
  .sbx-tablist button { min-width: 150px; }
  .sbx-layer-grid article { grid-template-columns: 1fr; }
  .sbx-layer-grid figure { min-height: 300px; }
  .sbx-layer-grid h3 { margin-top: 60px; }
  .sbx-boundary-grid { grid-template-columns: 1fr; }
  .sbx-boundary-grid article + article { padding-left: 0; border-left: 0; border-top: 1px solid #aeb9d5; }
}

@media (prefers-reduced-motion: reduce) {
  .sbx-button { transition: none; }
}
}

@layer pages {
/* Platform software directory. Kept under .platform-hub so this page does not
   alter the shared chrome or any other route. */

.platform-hub {
  --ph-ink: #0b0d0f;
  --ph-muted: #626660;
  --ph-paper: #fff;
  --ph-tint: #f2f3ef;
  --ph-line: #d9dbd5;
  background: var(--ph-paper);
  color: var(--ph-ink);
  overflow: clip;
}

/* Shared product-proof layer. Page layouts stay distinct; this block provides
   the common information contract every Platform route must satisfy. */
.pd-proof {
  --pd-ink: #111412;
  --pd-muted: #60655f;
  --pd-line: #d7dad4;
  --pd-paper: #f3f4f0;
  padding-block: var(--section-roomy);
  color: var(--pd-ink);
  background: var(--pd-paper);
}
.pd-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 24px clamp(40px, 8vw, 130px);
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 96px);
}
.pd-eyebrow,
.pd-label,
.pd-screen figcaption,
.pd-steps > li > span {
  font: 400 11px/1.3 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.pd-eyebrow { grid-column: 1 / -1; margin: 0; color: #3158d7; }
.pd-head h2 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(38px, 5.2vw, 76px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.055em;
}
.pd-head > p:last-child {
  max-width: 620px;
  margin: 0;
  color: var(--pd-muted);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.55;
}
.pd-work {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.pd-screen-stack {
  position: sticky;
  top: calc(var(--nav-h) + 92px);
  display: grid;
  gap: 14px;
}
.pd-screen-stack--multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-screen-stack--multi .pd-screen:first-child { grid-column: 1 / -1; }
.pd-screen {
  margin: 0;
  padding: clamp(14px, 2vw, 26px);
  border-radius: clamp(18px, 2.2vw, 32px);
  background: #dfe5f7;
}
.pd-screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 22px 58px rgba(12, 20, 42, .14);
}
.pd-screen figcaption { margin-top: 14px; color: #4e5668; }
.pd-steps { margin: 0; padding: 0; list-style: none; counter-reset: pd-step; }
.pd-steps li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 20px;
  padding: 25px 0 30px;
  border-top: 1px solid var(--pd-line);
}
.pd-steps li:last-child { border-bottom: 1px solid var(--pd-line); }
.pd-steps > li > span { padding-top: 5px; color: #666a64; }
.pd-steps h3 { margin: 0; font-size: clamp(23px, 2.1vw, 34px); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; }
.pd-steps p { max-width: 620px; margin: 12px 0 0; color: var(--pd-muted); font-size: 16px; line-height: 1.58; }
.pd-evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(56px, 8vw, 112px);
  border-block: 1px solid var(--pd-line);
}
.pd-evidence > * { margin: 0; padding: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 56px) clamp(34px, 5vw, 64px) 0; }
.pd-evidence > :last-child { padding-left: clamp(28px, 4vw, 56px); border-left: 1px solid var(--pd-line); }
.pd-label { margin: 0 0 18px; color: #3158d7; }
.pd-evidence p:last-child { max-width: 660px; margin: 0; color: var(--pd-muted); font-size: 17px; line-height: 1.62; }
.pd-next {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  color: var(--pd-ink);
  border-bottom: 1px solid var(--pd-ink);
  font-size: clamp(20px, 2vw, 28px);
}
.pd-next span { transition: transform .2s ease; }
.pd-next:hover span { transform: translateX(5px); }
.pd-proof--trace { --pd-paper: #101310; --pd-ink: #f6f7f3; --pd-muted: #b8bdb5; --pd-line: #383d38; }
.pd-proof--trace .pd-screen { background: #232a25; }
.pd-proof--trace .pd-screen figcaption,
.pd-proof--trace .pd-steps > li > span { color: #a9b0a8; }
.pd-proof--workspace .pd-work { grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr); }
.pd-proof--workspace .pd-screen { background: #e7e1d5; }
.pd-proof--journey .pd-screen { background: #dce5ff; }

@media (max-width: 799px) {
  .pd-head,
  .pd-work,
  .pd-proof--workspace .pd-work,
  .pd-evidence { grid-template-columns: 1fr; }
  .pd-screen-stack { position: static; }
  .pd-evidence > :last-child { padding-left: 0; border-left: 0; border-top: 1px solid var(--pd-line); }
  .pd-evidence > * { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-next span { transition: none; }
}

.ph-wrap {
  width: min(100%, 1600px);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 72px);
}

.ph-hero {
  padding-block: var(--section-display);
  background: var(--ph-paper);
}

.ph-hero-inner { display: flex; flex-direction: column; }
.ph-eyebrow,
.ph-kicker {
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ph-eyebrow { margin-bottom: clamp(28px, 5vw, 64px); text-align: center; color: var(--ph-muted); }

.ph-hero-media {
  margin: 0 auto;
  width: min(100%, 1280px);
  aspect-ratio: 16 / 9;
  border-radius: clamp(22px, 3.2vw, 52px);
  overflow: hidden;
  background: #e9ebe6;
  box-shadow: 0 24px 70px rgba(11, 13, 15, .12);
}
.ph-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-hero-copy {
  order: -1;
  max-width: 960px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
}
.ph-hero-copy h1,
.ph-intro h2,
.ph-group h2,
.ph-final h2 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -.05em;
}
.ph-hero-copy h1 { font-size: clamp(42px, 6.7vw, 92px); line-height: .98; }
.ph-hero-copy > p { max-width: 700px; margin: 28px auto 0; color: var(--ph-muted); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; }
.ph-actions { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.ph-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 7px;
  font-size: 15px;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.ph-button:hover { transform: translateY(-1px); }
.ph-button-primary { background: var(--ph-ink); color: #fff; }
.ph-button-primary:hover { background: #292c2f; }
.ph-button-secondary { background: #eceee9; color: var(--ph-ink); }
.ph-button-secondary:hover { background: #e1e3dd; }

@media (min-width: 1000px) {
  .ph-hero-inner {
    display: grid;
    grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr);
    grid-template-rows: auto 1fr;
    gap: 20px clamp(54px, 7vw, 108px);
    align-items: center;
  }
  .ph-eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 18px;
    text-align: left;
  }
  .ph-hero-copy {
    grid-column: 1;
    grid-row: 2;
    order: 0;
    margin: 0;
    text-align: left;
  }
  .ph-hero-copy h1 { font-size: clamp(52px, 5vw, 76px); }
  .ph-hero-copy > p { margin-inline: 0; }
  .ph-hero-copy .ph-actions { justify-content: flex-start; }
  .ph-hero-media {
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: 4 / 3;
  }
}

.ph-directory-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  background: #fff;
  border-block: 1px solid var(--ph-line);
}
.ph-directory-nav .ph-wrap { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ph-directory-nav span { font-size: 14px; color: var(--ph-muted); white-space: nowrap; }
.ph-directory-links { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); overflow-x: auto; scrollbar-width: none; }
.ph-directory-links::-webkit-scrollbar { display: none; }
.ph-directory-links a { padding: 22px 0; color: var(--ph-ink); font-size: 14px; white-space: nowrap; }
.ph-directory-links a:hover { color: #2648ef; }

.ph-intro { padding: clamp(80px, 10vw, 152px) 0; }
.ph-intro-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: clamp(40px, 9vw, 140px); align-items: end; }
.ph-intro h2 { max-width: 900px; font-size: clamp(34px, 5vw, 70px); line-height: 1.02; }
.ph-intro p { margin: 0; color: var(--ph-muted); font-size: 17px; line-height: 1.6; }

.ph-engine {
  padding-block: var(--section-roomy);
  color: #fff;
  background: #111315;
  scroll-margin-top: calc(var(--nav-h) + 64px);
}
.ph-engine-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(40px, 8vw, 128px);
  align-items: end;
}
.ph-engine .ph-kicker { color: #9ea39c; }
.ph-engine-head h2 {
  max-width: 830px;
  margin: 0;
  font-size: clamp(40px, 5.6vw, 78px);
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.055em;
}
.ph-engine-head > div:last-child > p {
  max-width: 590px;
  margin: 0;
  color: #b8bcb6;
  font-size: 17px;
  line-height: 1.6;
}
.ph-engine-head a {
  display: inline-block;
  margin-top: 28px;
  color: #fff;
}
.ph-engine-head a span {
  display: inline-block;
  transition: transform .2s ease;
}
.ph-engine-head a:hover span { transform: translateX(5px); }
.ph-engine-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: 12px;
  margin-top: clamp(56px, 8vw, 104px);
}
.ph-engine-code,
.ph-engine-model {
  min-width: 0;
  border: 1px solid #363a3d;
  border-radius: 20px;
  background: #0b0d0f;
}
.ph-engine-code {
  display: flex;
  min-height: 450px;
  flex-direction: column;
  overflow: hidden;
}
.ph-engine-codebar,
.ph-engine-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  font: 400 12px/1.4 var(--font-mono);
}
.ph-engine-codebar { border-bottom: 1px solid #363a3d; }
.ph-engine-codebar span { color: #8da5ff; }
.ph-engine-codebar code { color: #d9ddd7; }
.ph-engine-codebar b {
  margin-left: auto;
  color: #8fd6a5;
  font-weight: 400;
}
.ph-engine-code pre {
  margin: 0;
  padding: clamp(26px, 4vw, 48px);
  overflow: auto;
  color: #e8ebe6;
  font: 400 clamp(13px, 1.2vw, 16px)/1.75 var(--font-mono);
}
.ph-engine-result {
  justify-content: space-between;
  margin-top: auto;
  border-top: 1px solid #363a3d;
  color: #9ea39c;
}
.ph-engine-result strong { color: #fff; font-weight: 400; }
.ph-engine-model {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}
.ph-engine-model article {
  min-height: 225px;
  padding: 28px;
  border-bottom: 1px solid #363a3d;
}
.ph-engine-model article:nth-child(odd) { border-right: 1px solid #363a3d; }
.ph-engine-model article:nth-child(n + 3) { border-bottom: 0; }
.ph-engine-model span {
  color: #fff;
  font-size: clamp(21px, 2vw, 28px);
  letter-spacing: -.035em;
}
.ph-engine-model p {
  margin: 22px 0 0;
  color: #9ea39c;
  line-height: 1.55;
}

.ph-toolkit {
  padding: clamp(92px, 12vw, 184px) 0;
  color: #fff;
  background: #0b0d0f;
  scroll-margin-top: calc(var(--nav-h) + 64px);
}
.ph-toolkit-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: clamp(60px, 8vw, 110px);
}
.ph-toolkit-head > div:first-child { max-width: 1050px; }
.ph-toolkit-head h2 {
  margin: 0;
  font-size: clamp(40px, 5.7vw, 82px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.06em;
}
.ph-toolkit .ph-kicker { color: #a9ada7; }
.ph-toolkit-controls { display: flex; gap: 8px; }
.ph-toolkit-controls button {
  min-width: 46px;
  min-height: 46px;
  padding: 10px 14px;
  color: #fff;
  border: 1px solid #666;
  border-radius: 999px;
  background: transparent;
  font: inherit;
}
.ph-toolkit-grid {
  display: grid;
  grid-template-columns: minmax(270px, .58fr) minmax(0, 1.42fr);
  gap: clamp(42px, 7vw, 110px);
  align-items: center;
}
.ph-toolkit-tabs { border-top: 1px solid #3b3e3c; }
.ph-toolkit-tabs button {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 7px 15px;
  padding: 20px 0;
  color: #7f837e;
  border: 0;
  border-bottom: 1px solid #3b3e3c;
  background: transparent;
  text-align: left;
}
.ph-toolkit-tabs button[aria-selected="true"] { color: #fff; }
.ph-toolkit-tabs span { grid-row: 1 / 3; font: 400 11px/1.8 var(--font-mono); }
.ph-toolkit-tabs strong { font-size: 23px; font-weight: 400; }
.ph-toolkit-tabs small { font-size: 13px; line-height: 1.45; }
.ph-toolkit-panels article {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(280px, .94fr);
  overflow: hidden;
  min-height: 700px;
  color: var(--ph-ink);
  border-radius: 30px;
  background: #c9f2aa;
}
.ph-toolkit-panels article[hidden] { display: none; }
.ph-toolkit-panels figure { margin: 0; min-height: 100%; }
.ph-toolkit-panels img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-toolkit-copy { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 52px); }
.ph-toolkit-copy .ph-kicker { color: #526640; }
.ph-toolkit-copy h3 {
  margin: 18px 0 0;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.055em;
}
.ph-toolkit-copy > p:not(.ph-kicker) { margin: 20px 0 0; color: #526640; line-height: 1.58; }
.ph-tool-links { display: grid; margin-top: auto; padding-top: 38px; border-top: 1px solid rgba(21,35,12,.25); }
.ph-tool-links a {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(150px, 1.2fr);
  gap: 18px;
  padding: 15px 0;
  color: var(--ph-ink);
  border-bottom: 1px solid rgba(21,35,12,.25);
}
.ph-tool-links strong { font-weight: 400; }
.ph-tool-links span { color: #526640; font-size: 14px; }

.ph-group { padding-block: var(--section-roomy); scroll-margin-top: calc(var(--nav-h) + 64px); }
.ph-group-tint { background: var(--ph-tint); }
.ph-group-head { display: grid; grid-template-columns: 72px 1fr; gap: 18px; padding-bottom: clamp(42px, 6vw, 80px); border-top: 1px solid var(--ph-line); padding-top: 22px; }
.ph-index { margin: 0; color: var(--ph-muted); font-family: var(--font-mono); font-size: 12px; }
.ph-kicker { color: var(--ph-muted); margin-bottom: 16px; }
.ph-group h2 { max-width: 850px; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; }

.ph-group-head-simple {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(36px, 8vw, 120px);
  align-items: end;
}
.ph-group-head-simple > p {
  max-width: 560px;
  margin: 0;
  color: var(--ph-muted);
  font-size: 17px;
  line-height: 1.6;
}
.ph-product-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ph-line);
  border-left: 1px solid var(--ph-line);
}
.ph-product-map a {
  position: relative;
  min-height: 310px;
  padding: 30px;
  color: var(--ph-ink);
  border-right: 1px solid var(--ph-line);
  border-bottom: 1px solid var(--ph-line);
  transition: background-color .2s ease;
}
.ph-product-map a:hover { background: var(--ph-tint); }
.ph-product-map span {
  color: var(--ph-muted);
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.ph-product-map h3 {
  margin: 44px 0 0;
  font-size: clamp(28px, 2.7vw, 40px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.045em;
}
.ph-product-map p {
  max-width: 34ch;
  margin: 18px 0 0;
  color: var(--ph-muted);
  line-height: 1.55;
}
.ph-product-map b,
.ph-control-grid b {
  position: absolute;
  top: 28px;
  right: 28px;
  font-size: 20px;
  font-weight: 400;
  transition: transform .2s ease;
}
.ph-product-map a:hover b,
.ph-control-grid a:hover b { transform: translate(3px, -3px); }

.ph-control {
  padding-block: var(--section-roomy);
  color: #fff;
  background: #111315;
  scroll-margin-top: calc(var(--nav-h) + 64px);
}
.ph-control .ph-kicker { color: #9ea39c; }
.ph-control-head h2 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(40px, 5.5vw, 76px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.055em;
}
.ph-control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(52px, 7vw, 92px);
  border-top: 1px solid #383c3f;
  border-left: 1px solid #383c3f;
}
.ph-control-grid a {
  position: relative;
  min-height: 240px;
  padding: 28px;
  color: #fff;
  border-right: 1px solid #383c3f;
  border-bottom: 1px solid #383c3f;
}
.ph-control-grid span {
  display: block;
  max-width: calc(100% - 30px);
  font-size: clamp(23px, 2.2vw, 31px);
  letter-spacing: -.035em;
}
.ph-control-grid p {
  max-width: 28ch;
  margin: 74px 0 0;
  color: #9ea39c;
  line-height: 1.55;
}

.ph-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ph-feature {
  min-height: 640px;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  background: var(--ph-tint);
  color: var(--ph-ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ph-feature:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(11, 13, 15, .1); }
.ph-feature-wide { grid-column: 1 / -1; min-height: 560px; }
.ph-feature-wide { display: grid; grid-template-columns: .8fr 1.2fr; }
.ph-card-copy { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; }
.ph-card-label { color: var(--ph-muted); font-size: 14px; }
.ph-card-copy h3 { margin: 22px 0 0; max-width: 580px; font-size: clamp(28px, 3.3vw, 46px); line-height: 1.06; letter-spacing: -.045em; font-weight: 400; }
.ph-card-copy p { margin: 20px 0 0; max-width: 520px; color: var(--ph-muted); font-size: 16px; line-height: 1.55; }
.ph-card-link { margin-top: auto; padding-top: 32px; font-size: 15px; }
.ph-feature img { width: 100%; height: 310px; margin-top: auto; object-fit: cover; object-position: center; display: block; }
.ph-feature-wide img { height: 100%; margin: 0; }

.ph-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ph-line); }
.ph-directory > a {
  min-height: 210px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 18px;
  padding: 28px 22px 32px 0;
  color: var(--ph-ink);
  border-bottom: 1px solid var(--ph-line);
}
.ph-directory > a:nth-child(odd) { padding-right: clamp(24px, 4vw, 64px); border-right: 1px solid var(--ph-line); }
.ph-directory > a:nth-child(even) { padding-left: clamp(24px, 4vw, 64px); }
.ph-dir-number { color: var(--ph-muted); font-family: var(--font-mono); font-size: 11px; }
.ph-directory h3 { margin: 0; font-size: clamp(23px, 2.4vw, 32px); line-height: 1.1; font-weight: 400; letter-spacing: -.035em; }
.ph-directory p { margin: 14px 0 0; max-width: 440px; color: var(--ph-muted); font-size: 15px; line-height: 1.5; }
.ph-dir-arrow { font-size: 20px; transition: transform .2s ease; }
.ph-directory > a:hover .ph-dir-arrow { transform: translate(3px, -3px); }

.ph-spotlight { display: grid; grid-template-columns: .78fr 1.22fr; overflow: hidden; min-height: 520px; margin-bottom: 70px; border-radius: 28px; background: #111416; color: #fff; }
.ph-spotlight-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(34px, 5vw, 68px); }
.ph-spotlight h3 { margin: 0; font-size: clamp(32px, 4vw, 56px); line-height: 1.03; letter-spacing: -.05em; font-weight: 400; }
.ph-spotlight p { margin: 22px 0 0; color: #b8bcb6; font-size: 16px; line-height: 1.55; }
.ph-text-link { margin-top: auto; padding-top: 32px; color: #fff; font-size: 15px; }
.ph-spotlight img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-directory-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ph-directory-three > a,
.ph-directory-three > a:nth-child(even) { padding-inline: 30px; border-right: 1px solid var(--ph-line); }
.ph-directory-three > a:first-child { padding-left: 0; }
.ph-directory-three > a:last-child { border-right: 0; padding-right: 0; }

.ph-group-dark { background: #0b0d0f; color: #fff; }
.ph-group-dark .ph-group-head { border-color: #373a3c; }
.ph-group-dark .ph-index,
.ph-group-dark .ph-kicker { color: #a9ada7; }
.ph-solution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #373a3c; }
.ph-solution-grid a { min-height: 150px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 26px 24px 26px 0; color: #fff; border-bottom: 1px solid #373a3c; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.03em; }
.ph-solution-grid a:not(:nth-child(3n + 1)) { padding-left: 24px; }
.ph-solution-grid a:not(:nth-child(3n)) { border-right: 1px solid #373a3c; }
.ph-solution-grid a:hover { color: #aeb9ff; }
.ph-solution-grid a span:last-child { transition: transform .2s ease; }
.ph-solution-grid a:hover span:last-child { transform: translate(3px, -3px); }

.ph-final { padding-block: var(--section-display); background: #fff; }
.ph-final-inner { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: clamp(44px, 10vw, 150px); }
.ph-final h2 { max-width: 820px; font-size: clamp(42px, 6vw, 82px); line-height: 1; }
.ph-final-inner > div:last-child > p { margin: 0; color: var(--ph-muted); font-size: 17px; line-height: 1.55; }
.ph-final .ph-actions { justify-content: flex-start; }

@media (max-width: 900px) {
  .ph-engine-head,
  .ph-engine-grid,
  .ph-final-inner { grid-template-columns: 1fr; }
  .ph-product-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-toolkit-grid { grid-template-columns: 1fr; }
  .ph-toolkit-panels article { min-height: 0; }
  .ph-feature-wide { display: flex; }
  .ph-feature-wide img { height: auto; aspect-ratio: 16 / 9; }
  .ph-spotlight { grid-template-columns: 1fr; }
  .ph-spotlight img { min-height: 360px; }
  .ph-directory-three,
  .ph-solution-grid { grid-template-columns: 1fr; }
  .ph-directory-three > a,
  .ph-directory-three > a:nth-child(even),
  .ph-directory-three > a:first-child,
  .ph-directory-three > a:last-child { padding-inline: 0; border-right: 0; }
  .ph-solution-grid a,
  .ph-solution-grid a:not(:nth-child(3n + 1)) { padding-left: 0; border-right: 0; }
}

@media (max-width: 680px) {
  .ph-engine-model { grid-template-columns: 1fr; }
  .ph-engine-model article,
  .ph-engine-model article:nth-child(odd),
  .ph-engine-model article:nth-child(n + 3) {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #363a3d;
  }
  .ph-engine-model article:last-child { border-bottom: 0; }
  .ph-hero-media { aspect-ratio: 4 / 3; }
  .ph-directory-nav .ph-wrap { align-items: stretch; flex-direction: column; gap: 0; padding-top: 14px; }
  .ph-directory-nav span { display: none; }
  .ph-directory-links { justify-content: flex-start; }
  .ph-directory-links a { padding: 16px 0; }
  .ph-group-head.ph-group-head-simple { grid-template-columns: 1fr; }
  .ph-product-map,
  .ph-control-grid { grid-template-columns: 1fr; }
  .ph-product-map a { min-height: 280px; }
  .ph-toolkit-head { align-items: flex-start; flex-direction: column; }
  .ph-toolkit-tabs { display: flex; overflow-x: auto; }
  .ph-toolkit-tabs button { min-width: 210px; }
  .ph-toolkit-panels article { grid-template-columns: 1fr; }
  .ph-toolkit-panels figure { min-height: 0; }
  .ph-toolkit-panels img { height: auto; aspect-ratio: 4 / 3; }
  .ph-tool-links a { grid-template-columns: 1fr; gap: 5px; }
  .ph-feature-grid,
  .ph-directory { grid-template-columns: 1fr; }
  .ph-feature { min-height: 540px; }
  .ph-feature-wide { grid-column: auto; }
  .ph-directory > a,
  .ph-directory > a:nth-child(odd),
  .ph-directory > a:nth-child(even) { padding-inline: 0; border-right: 0; }
  .ph-spotlight img { min-height: 260px; }
  .ph-actions { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .platform-hub *,
  .platform-hub *::before,
  .platform-hub *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
}

@layer pages {
.rr-page {
  overflow: clip;
  color: #0a0a0a;
  background: #fff;
  font-family: "Suisse Intl", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}
.rr-page *,
.rr-page *::before,
.rr-page *::after { box-sizing: border-box; }
.rr-page h1,
.rr-page h2,
.rr-page h3 {
  margin-top: 0;
  font-weight: 400;
  letter-spacing: -.048em;
  -webkit-text-stroke: .45px currentColor;
  paint-order: stroke fill;
}
.rr-page p { margin-top: 0; line-height: 1.5; }
.rr-label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.rr-muted { color: #5d5d5d; }
.rr-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1.5px solid currentColor;
  border-radius: 5px;
  color: inherit;
  text-decoration: none;
  -webkit-text-stroke: .3px currentColor;
}
.rr-button-primary { border-color: #2864f0; color: #fff; background: #2864f0; }
.rr-button-light { border-color: #fff; color: #050505; background: #fff; }
.rr-actions { display: flex; flex-wrap: wrap; margin-top: 28px; }
.rr-hero { padding-block: var(--section-standard); }
.rr-hero-grid,
.rr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.rr-hero h1 { max-width: 820px; margin-bottom: 24px; font-size: clamp(58px, 6vw, 88px); line-height: .95; }
.rr-hero p:not(.rr-label) { max-width: 590px; font-size: 19px; }
.rr-media { min-height: 540px; margin: 0; overflow: hidden; border-radius: 18px; background: #eceae4; }
.rr-media img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.rr-soft { background: #f2f1ed; }
.rr-dark { color: #fff; background: #090909; }
.rr-head { display: flex; justify-content: space-between; gap: 70px; align-items: end; margin-bottom: 48px; }
.rr-head h2 { max-width: 790px; margin-bottom: 0; font-size: clamp(44px, 4.3vw, 64px); line-height: 1; }
.rr-head p { max-width: 430px; margin-bottom: 0; font-size: 18px; }
.rr-grid { display: grid; gap: 22px; }
.rr-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rr-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rr-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rr-card {
  min-height: 280px;
  padding: 28px;
  border-radius: 18px;
  color: inherit;
  background: #fff;
  text-decoration: none;
}
.rr-page:not(.rr-dark) .rr-section:not(.rr-soft) .rr-card { background: #f2f1ed; }
.rr-card span { display: block; margin-bottom: 68px; color: #666; font-size: 13px; letter-spacing: .08em; }
.rr-card h3 { margin-bottom: 12px; font-size: 29px; line-height: 1.1; letter-spacing: -.035em; }
.rr-card p { margin-bottom: 0; color: #5d5d5d; }
.rr-rail {
  display: grid;
  grid-auto-columns: minmax(310px, 31vw);
  grid-auto-flow: column;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rr-rail::-webkit-scrollbar { display: none; }
.rr-rail > * { scroll-snap-align: start; }
.rr-story {
  min-height: 500px;
  padding: 26px;
  border-radius: 18px;
  color: inherit;
  background: #f2f1ed;
  text-decoration: none;
}
.rr-story img { width: 100%; height: 280px; object-fit: cover; border-radius: 13px; }
.rr-story h3 { margin: 24px 0 10px; font-size: 29px; line-height: 1.1; letter-spacing: -.035em; }
.rr-story p { color: #5d5d5d; }
.rr-cta { display: grid; place-items: center; padding-block: var(--section-standard); text-align: center; }
.rr-cta h2 { max-width: 850px; margin: 0 auto 24px; font-size: 58px; line-height: 1; }
.rr-cta p { max-width: 680px; margin-inline: auto; font-size: 18px; }
.rr-cta .rr-actions { justify-content: center; }
.rr-signup { padding-block: var(--section-compact); background: #f2f1ed; }
.rr-signup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; }
.rr-signup h2 { margin-bottom: 10px; font-size: 36px; line-height: 1.05; }
.rr-signup form { display: flex; gap: 10px; }
.rr-signup input { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid #777; border-radius: 5px; background: #fff; font: inherit; }
.rr-inline-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; }
.rr-inline-links a,
.rr-section-link { display: inline-block; padding-bottom: 4px; border-bottom: 1px solid currentColor; }

.rr-community-hero { display: grid; align-items: center; padding-block: var(--section-display); color: #fff; background: #111; }
.rr-community-hero .rr-hero-grid { align-items: end; }
.rr-word-stack { font-size: clamp(64px, 8vw, 116px); line-height: .78; letter-spacing: -.06em; text-transform: lowercase; }
.rr-word-stack span { display: block; }
.rr-topic-card { min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; }
.rr-feed article { padding: 28px 0; border-top: 1px solid #999; }
.rr-feed article:last-child { border-bottom: 1px solid #999; }
.rr-feed time { color: #666; font-size: 13px; letter-spacing: .08em; }
.rr-feed h3 { max-width: 850px; margin: 14px 0 8px; font-size: 34px; line-height: 1.08; }
.rr-community-stats { background: #d8ff43; }
.rr-community-stats strong { display: block; font-size: 76px; font-weight: 400; letter-spacing: -.055em; }
.rr-page:not(.rr-dark) .rr-section.rr-dark:not(.rr-soft) .rr-card { color: #fff; background: #171717; }
.rr-page:not(.rr-dark) .rr-section.rr-dark:not(.rr-soft) .rr-card span,
.rr-page:not(.rr-dark) .rr-section.rr-dark:not(.rr-soft) .rr-card p { color: #bbb; }

.rr-partners-hero { display: grid; align-items: center; padding-block: var(--section-display); text-align: center; }
.rr-partners-hero h1,
.rr-partners-hero p { margin-inline: auto; }
.rr-partners-hero .rr-actions { justify-content: center; }
.rr-partner-types { background: #fff; }
.rr-partner-path .rr-muted { color: #b8bab6; }

@media (min-width: 761px) {
  .rr-partners .rr-marketplace,
  .rr-partners .rr-partner-platform { padding-block: 88px; }
  .rr-partners .rr-media { min-height: 420px; height: 420px; }
  .rr-partners .rr-story { min-height: 430px; }
  .rr-partners .rr-story img { height: 230px; }
}

.rr-developers { color: #0b0d0f; background: #f7f7f4; }
.rr-developers .rr-muted { color: #6a6d68; }
.rr-page.rr-developers .rr-hero {
  padding-block: var(--section-standard);
  color: #fff;
  background: #080808;
}
.rr-developers .rr-hero .rr-label {
  margin-bottom: 26px;
  color: #7fb0ff;
  font-size: 13px;
}
.rr-developers .rr-hero h1 {
  max-width: 760px;
  margin-bottom: 28px;
  font-size: clamp(54px, 5.25vw, 76px);
}
.rr-developers .rr-hero p:not(.rr-label) {
  max-width: 650px;
  color: #bdbdbd;
  font-size: 19px;
}
.rr-developers .rr-hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: clamp(48px, 7vw, 96px);
}
.rr-developers .rr-hero .rr-button-light {
  border-color: var(--accent-fill);
  color: var(--accent-fill-text);
  background: var(--accent-fill);
}
.rr-developers .rr-hero .rr-button:not(.rr-button-light) {
  border-color: #666;
  color: #fff;
  background: transparent;
}
.rr-terminal {
  overflow: hidden;
  min-height: 420px;
  border: 1px solid #343434;
  border-radius: var(--r-block);
  background: #101010;
  box-shadow: 0 36px 100px rgba(0, 0, 0, .42);
}
.rr-terminal__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #2f2f2f;
  color: #777;
}
.rr-terminal__bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #444;
}
.rr-terminal__bar b {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
}
.rr-terminal pre {
  margin: 0;
  padding: 32px;
  overflow: auto;
  color: #e7e7e7;
  font: 14px/1.9 var(--font-mono);
  white-space: pre-wrap;
}
.rr-terminal__prompt,
.rr-terminal__ready { color: #7fb0ff; }
.rr-terminal__ok { color: #50cd62; }
.rr-terminal__muted { color: #818181; }
.rr-developers .rr-media { border: 1px solid #333; background: #121212; }
.rr-code-window { min-height: 540px; padding: 30px; border: 1px solid #333; border-radius: 18px; background: #111; }
.rr-code-window pre { margin: 0; overflow: auto; color: #e8ebff; font: 15px/1.8 "Suisse Intl", system-ui, sans-serif; white-space: pre-wrap; }
.rr-page.rr-developers .rr-section:not(.rr-soft) .rr-card {
  color: #0b0d0f;
  border: var(--control-stroke) solid #dcddd8;
  background: #fff;
}
.rr-page.rr-developers .rr-section:not(.rr-soft) .rr-card span,
.rr-page.rr-developers .rr-section:not(.rr-soft) .rr-card p { color: #5f625e; }
.rr-page.rr-developers .rr-card .rr-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 52px;
  color: #5f625e;
}
.rr-page.rr-developers .rr-card .rr-card-top > span { margin: 0; }
.rr-page.rr-developers .rr-card .rr-card-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: none;
  place-items: center;
  border: var(--control-stroke) solid #b9c5ff;
  border-radius: 50%;
  color: #2648ef;
}
.rr-page.rr-developers .rr-section:not(.rr-soft) .rr-card .rr-card-icon {
  color: #2648ef;
}
.rr-page.rr-developers .rr-card .rr-card-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rr-developers .rr-story { color: #0b0d0f; background: #fff; }
.rr-developers .rr-story p { color: #5f625e; }
.rr-developers .rr-soft { color: #090909; background: #eef1ff; }
.rr-developers .rr-soft .rr-muted { color: #5d5d5d; }
.rr-developers .rr-soft .rr-card { color: #090909; background: #fff; }
.rr-developers .rr-soft .rr-card span,
.rr-developers .rr-soft .rr-card p { color: #5d5d5d; }
.rr-api-grid .rr-card { min-height: 330px; }
.rr-section-link { margin-top: 34px; }
.dev-chapter { scroll-margin-top: calc(var(--nav-h) + 56px); }
.dev-route-grid .rr-card {
  min-height: 300px;
  border-radius: var(--r-block);
}
.rr-card-index {
  font-family: var(--font-mono);
  color: #2648ef !important;
}
.dev-reference {
  color: #fff;
  background: #0b0d0f;
}
.dev-reference .rr-muted { color: #b8bab6; }
.dev-reference .rr-button-primary {
  border-color: var(--accent-fill);
  color: var(--accent-fill-text);
  background: var(--accent-fill);
}
.dev-reference .rr-button:not(.rr-button-primary) {
  border-color: #686b70;
  color: #fff;
}
.rr-marketplace-band { padding-block: var(--section-standard); color: #fff; border-block: 1px solid #333; background: #111; }
.rr-marketplace-band h2 { margin-bottom: 0; font-size: clamp(38px, 4.4vw, 62px); line-height: 1; }
.rr-marketplace-band p { color: #bbb; font-size: 18px; }

@media (min-width: 761px) {
  .rr-developers > .rr-section:nth-child(2) .rr-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .rr-developers > .rr-section:nth-child(2) .rr-card { grid-column: span 2; }
  .rr-developers > .rr-section:nth-child(2) .rr-card:nth-child(n + 4) { grid-column: span 3; }
  .rr-developers > .rr-section:nth-child(2) .rr-card { min-height: 300px; }
  .rr-developers > .rr-section:nth-child(5) { padding-block: 40px; }
  .rr-developers > .rr-section:nth-child(5) .rr-head { margin-bottom: 28px; }
  .rr-developers > .rr-section:nth-child(5) .rr-card { min-height: 160px; }
  .rr-developers > .rr-section:nth-child(6) .rr-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
  }
  .rr-developers .rr-developer-growth { padding-block: 32px; }
  .rr-developers .rr-developer-growth .rr-media { min-height: 220px; height: 220px; }
  .rr-community .rr-section { padding-block: 60px; }
  .rr-community .rr-topic-card { min-height: 180px; }
  .rr-community .rr-story { min-height: 430px; }
  .rr-community .rr-story img { height: 230px; }
}

@media (max-width: 760px) {
  .rr-hero-grid,
  .rr-split,
  .rr-signup-grid { grid-template-columns: 1fr; gap: 34px; }
  .rr-hero h1 { font-size: 48px; }
  .rr-head { display: grid; gap: 20px; margin-bottom: 34px; }
  .rr-head h2 { font-size: 40px; line-height: 1.02; }
  .rr-grid-2,
  .rr-grid-3,
  .rr-grid-4 { grid-template-columns: 1fr; }
  .rr-card { min-height: 240px; }
  .rr-media { min-height: 0; height: 390px; }
  .rr-media img { min-height: 0; height: 100% !important; }
  .rr-rail { grid-auto-columns: 84%; }
  .rr-story { min-height: 470px; }
  .rr-cta h2 { font-size: 42px; }
  .rr-signup form { flex-direction: column; }
  .rr-signup .rr-button { width: 100%; }
  .rr-developers .rr-hero-grid { grid-template-columns: 1fr; }
  .rr-developers .rr-hero h1 { font-size: 48px; }
  .rr-terminal { min-height: 350px; }
  .rr-terminal pre { padding: 24px; font-size: 12px; }
  .rr-word-stack { font-size: 62px; }
  .rr-partners .rr-signup { min-height: 680px; align-content: center; }
}
}

@layer pages {
.social-team { --st-blue: #2864f0; overflow: clip; color: #0a0a0a; background: #fff; }
.social-team * { box-sizing: border-box; }
.st-label { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.social-team h1, .social-team h2, .social-team h3 { margin-top: 0; letter-spacing: -.055em; }
.st-button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; padding: 0 26px; border: 1px solid currentColor; border-radius: 8px; color: inherit; font-weight: 700; text-decoration: none; }
.st-button-primary { border-color: var(--st-blue); color: #fff; background: var(--st-blue); }
.st-button-dark { margin-top: 28px; color: #fff; background: #111; }
.st-hero-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 80px; }
.st-hero-copy { padding-top: 72px; }
.st-hero h1 { margin: 30px 0; font-size: clamp(68px, 7vw, 100px); font-weight: 450; line-height: .88; }
.st-hero-copy > p:not(.st-label) { max-width: 540px; margin: 0 0 34px; font-size: 20px; line-height: 1.5; }
.st-hero-collage { position: relative; height: 1000px; }
.st-hero-card { position: absolute; margin: 0; }
.st-hero-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.st-hero-card figcaption { margin-top: 12px; font-size: 16px; }
.st-hero-card-main { top: 35px; left: 0; width: 62%; height: 450px; }
.st-hero-card-front { top: 320px; right: 0; width: 62%; height: 500px; z-index: 2; }
.st-hero-card-low { top: 690px; left: 22%; width: 48%; height: 300px; z-index: 3; }
.st-manifesto { display: grid; place-items: center; background: #f1efe9; }
.st-manifesto h2 { max-width: 1050px; margin: 0 auto; text-align: center; font-size: clamp(48px, 5.5vw, 76px); font-weight: 500; line-height: .95; }
.st-feature-blue { color: #fff; background: var(--st-blue); }
.st-feature-cream { background: #f3d9c5; }
.st-feature-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 95px; align-items: center; }
.st-feature-reverse > div { order: 2; }
.st-feature h2 { margin: 28px 0; font-size: clamp(52px, 5.6vw, 78px); font-weight: 500; line-height: .95; }
.st-feature p:not(.st-label) { max-width: 520px; margin: 0; font-size: 19px; line-height: 1.55; }
.st-feature figure { height: 530px; margin: 0; overflow: hidden; border-radius: 22px; }
.st-feature figure > img { width: 100%; height: 100%; object-fit: cover; }
.st-phone-ui { padding: 52px; color: #111; background: #fff; box-shadow: 0 28px 60px rgba(0,0,0,.16); }
.st-phone-top { margin-bottom: 70px; padding-bottom: 18px; border-bottom: 1px solid #ccc; font-weight: 700; }
.st-bubble { width: fit-content; max-width: 75%; margin-bottom: 20px; padding: 16px 20px; border-radius: 18px; line-height: 1.4; }
.st-bubble-in { background: #eee; }
.st-bubble-out { margin-left: auto; color: #fff; background: var(--st-blue); }
.st-phone-ui a { display: block; margin-top: 62px; color: var(--st-blue); font-weight: 700; text-decoration: none; }
.st-compact { padding-block: var(--s-5); }
.st-compact-dark { color: #fff; background: #111; }
.st-compact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.st-compact h3 { margin-bottom: 14px; font-size: 36px; }
.st-compact p { max-width: 520px; margin: 0; color: #666; font-size: 17px; line-height: 1.5; }
.st-compact-dark p { color: #bbb; }
.st-compact figure { height: 190px; margin: 0; overflow: hidden; }
.st-compact img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.st-marquee { display: grid; align-content: center; gap: 28px; overflow: hidden; background: #d8ff43; }
.st-marquee-row { display: flex; width: max-content; gap: 56px; font-size: 44px; font-weight: 750; white-space: nowrap; animation: st-marquee 28s linear infinite; }
.st-marquee-row-reverse { transform: translateX(-20%); animation-direction: reverse; }
@keyframes st-marquee { to { transform: translateX(-35%); } }
.st-plan-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 100px; }
.st-plan h2 { margin: 0; font-size: clamp(48px, 5vw, 70px); font-weight: 500; line-height: .95; }
.st-plan p { margin: 0; color: #555; font-size: 18px; line-height: 1.5; }
.st-proof { display: grid; place-items: center; color: #fff; background: #111; }
.st-proof-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 90px; align-items: end; }
.st-proof blockquote { margin: 0; font-size: clamp(46px, 5vw, 70px); line-height: .98; letter-spacing: -.055em; }
.st-proof strong, .st-proof span { display: block; }
.st-proof span { margin-top: 10px; color: #bbb; line-height: 1.45; }
.st-connected { background: #f1efe9; }
.st-connected-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 75px; align-items: center; }
.st-connected figure { height: 250px; margin: 0; overflow: hidden; border-radius: 16px; }
.st-connected img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.st-connected h3 { margin-bottom: 18px; font-size: 44px; }
.st-connected p { max-width: 650px; margin: 0 0 18px; color: #555; line-height: 1.5; }
.st-connected a { color: inherit; font-weight: 700; text-decoration: none; }
.st-faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; }
.st-faq h2 { margin-bottom: 24px; font-size: 70px; font-weight: 500; line-height: .95; }
.st-faq-grid > div:first-child p { max-width: 420px; color: #555; font-size: 18px; line-height: 1.5; }
.st-resources { background: #f1efe9; }
.st-resources h2 { margin-bottom: 48px; font-size: 60px; font-weight: 500; }
.st-resource-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.st-resource-grid a { color: inherit; text-decoration: none; }
.st-resource-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 12px; }
.st-resource-grid span, .st-resource-grid strong { display: block; }
.st-resource-grid span { margin: 16px 0 8px; color: #666; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.st-resource-grid strong { font-size: 18px; line-height: 1.15; letter-spacing: -.025em; }
@media (prefers-reduced-motion: reduce) { .st-marquee-row { animation: none; } }
@media (max-width: 760px) {
  .st-hero-grid { grid-template-columns: 1fr; gap: 45px; }
  .st-hero-copy { padding-top: 0; }
  .st-hero h1 { font-size: 60px; }
  .st-hero-collage { height: 640px; }
  .st-hero-card-main { width: 75%; height: 300px; }
  .st-hero-card-front { top: 220px; width: 72%; height: 330px; }
  .st-hero-card-low { top: 465px; left: 10%; width: 62%; height: 180px; }
  .st-manifesto h2 { font-size: 40px; }
  .st-feature { overflow: hidden; }
  .st-feature-grid { grid-template-columns: 1fr; gap: 46px; }
  .st-feature-reverse > div { order: 0; }
  .st-feature-grid { gap: 24px; }
  .st-feature h2 { margin: 16px 0; font-size: 38px; }
  .st-feature p:not(.st-label) { font-size: 15px; }
  .st-feature figure { height: 205px; }
  .st-phone-ui { padding: 18px; }
  .st-phone-top { margin-bottom: 18px; padding-bottom: 10px; }
  .st-bubble { margin-bottom: 8px; padding: 9px 12px; font-size: 12px; }
  .st-phone-ui a { margin-top: 15px; font-size: 13px; }
  .st-compact-grid { grid-template-columns: 1.2fr .8fr; gap: 20px; }
  .st-compact h3 { font-size: 27px; }
  .st-compact p { font-size: 14px; }
  .st-compact figure { height: 150px; }
  .st-marquee-row { gap: 32px; font-size: 28px; }
  .st-plan-grid, .st-proof-grid, .st-connected-grid, .st-faq-grid { grid-template-columns: 1fr; gap: 42px; }
  .st-plan h2 { font-size: 42px; }
  .st-proof blockquote { font-size: 46px; }
  .st-connected { overflow: hidden; }
  .st-connected-grid { gap: 18px; }
  .st-connected figure { height: 112px; }
  .st-connected h3 { margin-bottom: 10px; font-size: 30px; }
  .st-connected p { margin-bottom: 10px; font-size: 14px; }
  .st-faq h2 { font-size: 52px; }
  .st-resources h2 { font-size: 50px; }
  .st-resource-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .st-resource-grid a { min-width: 72%; scroll-snap-align: start; }
  .st-resource-grid img { height: 190px; }
}
}

@layer pages {
.clone-label { margin: 0; font-size: 14px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.clone-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; padding: 0 24px; border: 1.5px solid currentColor; border-radius: 8px; color: inherit; font-weight: 700; text-decoration: none; }
.clone-button-primary { border-color: #2864f0; color: #fff; background: #2864f0; }
.clone-button-dark { color: #fff; background: #111; }
.clone-step-grid, .clone-three, .clone-four { display: grid; gap: 22px; }
.clone-step-grid, .clone-three { grid-template-columns: repeat(3, 1fr); }
.clone-four { grid-template-columns: repeat(4, 1fr); }

/* Full platform: Square Partner Directory */
.directory-page { overflow: clip; color: #090909; background: #fff; }
.directory-page h1, .directory-page h2, .directory-page h3 { margin-top: 0; letter-spacing: -.025em; }
.dir-hero { display: grid; place-items: center; padding-block: var(--section-display); text-align: center; }
.dir-hero h1 { max-width: 900px; margin: 26px auto 24px; font-size: 62px; font-weight: 450; line-height: 1.08; }
.dir-hero > div > p:last-child { max-width: 720px; margin: 0 auto; color: #555; font-size: 20px; line-height: 1.5; }
.dir-picker { padding-block: var(--section-compact); }
.dir-picker h2 { margin: 0 0 38px; text-align: center; font-size: 16px; font-weight: 550; letter-spacing: 0; }
.dir-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dir-picker-grid a { display: grid; grid-template-columns: 1fr auto; min-height: 145px; padding: 24px; border-radius: 16px; color: inherit; background: #f1efe9; text-decoration: none; }
.dir-picker-grid span { grid-column: 1 / -1; color: #666; font-size: 14px; font-weight: 700; }
.dir-picker-grid strong { align-self: end; font-size: 22px; line-height: 1.1; }
.dir-picker-grid i { align-self: end; color: #2864f0; font-size: 25px; font-style: normal; }
.dir-path { padding-block: var(--section-roomy); }
.dir-path-components { background: #eef1ff; }
.dir-path-engine { background: #f1efe9; }
.dir-path .dir-feature-grid { margin-bottom: 72px; }
.dir-path .dir-feature-grid-reverse figure { order: -1; }
.dir-path h2 { margin: 20px 0; font-size: 52px; font-weight: 500; line-height: .98; }
.dir-path p:not(.clone-label) { margin: 0 0 25px; color: #555; font-size: 17px; line-height: 1.55; }
.dir-path figure { height: 420px; margin: 0; overflow: hidden; border-radius: 18px; background: #fff; }
.dir-path figure img { width: 100%; height: 100%; object-fit: cover; }
.dir-path .dir-benefit-grid,
.dir-path .dir-service-grid { height: auto; }
.dir-path .dir-benefit-grid article,
.dir-path .dir-service-grid article { padding-top: 22px; border-top: 1px solid #999; }
.dir-benefit-grid-three { grid-template-columns: repeat(3, 1fr); }
.dir-title { display: grid; align-items: center; padding-block: var(--s-10); border-top: 1px solid #dedbd4; background: #fff; color: #090909; }
.dir-title h2 { margin: 0; font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.dir-feature { padding-block: var(--section-standard); }
.dir-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; align-items: center; }
.dir-feature h2 { margin: 20px 0; font-size: 52px; font-weight: 500; line-height: .95; }
.dir-feature p:not(.clone-label) { margin: 0 0 25px; color: #555; font-size: 17px; line-height: 1.5; }
.dir-feature figure { height: 330px; margin: 0; overflow: hidden; border-radius: 18px; }
.dir-feature img { width: 100%; height: 100%; object-fit: cover; }
.dir-feature-compact { padding-block: var(--section-compact); }
.dir-feature-compact figure { height: 270px; }
.dir-feature-compact h2 { margin-block: 14px; font-size: 42px; line-height: 1; }
.dir-feature-compact p:not(.clone-label) { margin-bottom: 16px; font-size: 16px; line-height: 1.35; }
.dir-feature-compact .clone-button { min-height: 48px; }
.dir-benefits { padding-block: var(--s-6); }
.dir-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; }
.dir-benefit-grid article { padding-right: 18px; }
.dir-benefit-grid h3 { margin-bottom: 10px; font-size: 22px; }
.dir-benefit-grid p { margin: 0; color: #666; line-height: 1.4; }
.dir-benefits-three .dir-benefit-grid { grid-template-columns: repeat(3, 1fr); }
.dir-steps { padding-block: var(--section-standard); }
.dir-steps h2 { margin-bottom: 48px; font-size: 32px; font-weight: 500; }
.clone-step-grid article { border-top: 1px solid #999; padding-top: 22px; }
.clone-step-grid span { color: #666; font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
.clone-step-grid h3 { margin: 22px 0 12px; font-size: 30px; }
.clone-step-grid p { color: #555; line-height: 1.5; }
.dir-steps > .shell > .clone-button { margin-top: 30px; }
.dir-services { padding-block: var(--section-standard); }
.dir-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.dir-service-grid article { border-top: 1px solid #999; padding-top: 18px; }
.dir-service-grid h3 { margin-bottom: 10px; font-size: 27px; }
.dir-service-grid p { margin: 0; color: #666; line-height: 1.45; }
.dir-final { display: grid; place-items: center; padding-block: var(--section-standard); text-align: center; background: #d8ff43; }
.dir-final h2 { margin-bottom: 34px; font-size: 32px; font-weight: 500; }

/* Embedded components: Square Specialists */
.specialists-page { overflow: clip; color: #090909; background: #fff; }
.specialists-page h1, .specialists-page h2, .specialists-page h3 { margin-top: 0; letter-spacing: -.025em; }
.sp-hero { padding-block: var(--section-standard); }
.sp-hero-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 80px; align-items: center; }
.sp-hero h1 { margin: 24px 0; font-size: 62px; font-weight: 450; line-height: 1.08; }
.sp-hero p:not(.clone-label) { max-width: 590px; color: #555; font-size: 19px; line-height: 1.5; }
.sp-words { display: block; position: relative; height: 1em; overflow: hidden; color: #2864f0; }
.sp-words span { position: absolute; left: 0; top: 0; opacity: 0; animation: sp-words 9s infinite; }
.sp-words span:nth-child(2) { animation-delay: 3s; }
.sp-words span:nth-child(3) { animation-delay: 6s; }
@keyframes sp-words { 0%,29%{opacity:1;transform:translateY(0)} 33%,96%{opacity:0;transform:translateY(-25%)} 97%,100%{opacity:0;transform:translateY(25%)} }
.sp-collage { position: relative; height: 610px; }
.sp-collage img { position: absolute; width: 60%; height: 310px; object-fit: cover; border-radius: 18px; }
.sp-collage img:nth-child(1) { top: 0; left: 0; }
.sp-collage img:nth-child(2) { top: 170px; right: 0; }
.sp-collage img:nth-child(3) { bottom: 0; left: 10%; }
.sp-solutions { padding-block: var(--section-roomy); background: #f1efe9; }
.sp-solutions h2 { max-width: 900px; margin-bottom: 55px; font-size: 50px; font-weight: 500; line-height: 1.08; }
.sp-solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 24px; }
.sp-solution-grid article { border-top: 1px solid #999; padding-top: 18px; }
.sp-solution-grid h3 { margin-bottom: 10px; font-size: 25px; }
.sp-solution-grid p { margin: 0; color: #555; line-height: 1.45; }
.sp-all, .sp-video-link { display: grid; place-items: center; padding-block: var(--section-compact); }
.sp-value { padding-block: var(--section-roomy); }
.sp-value > .shell > h2 { margin-bottom: 50px; font-size: 50px; font-weight: 500; }
.sp-value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.sp-value-grid img { width: 100%; height: 300px; object-fit: cover; border-radius: 18px; }
.sp-value-grid h3 { margin: 20px 0 10px; font-size: 30px; }
.sp-value-grid p { margin: 0; color: #555; line-height: 1.45; }
.sp-video-link { color: #fff; background: #111; }
.sp-video-link a { color: inherit; font-size: 24px; font-weight: 700; text-decoration: none; }
.sp-video-link span { margin-left: 16px; }
.sp-steps { padding-block: var(--section-roomy); background: #f1efe9; }
.sp-head { display: flex; justify-content: space-between; gap: 60px; margin-bottom: 48px; }
.sp-head h2 { margin: 0; font-size: 50px; font-weight: 500; }
.sp-head p { max-width: 520px; color: #555; font-size: 18px; line-height: 1.5; }
.sp-steps img { width: 100%; height: 150px; object-fit: cover; border-radius: 14px; margin: 16px 0; }
.sp-trust { padding-block: var(--section-standard); }
.sp-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.sp-trust h2 { margin-bottom: 24px; font-size: 50px; font-weight: 500; line-height: 1.08; }
.sp-trust p { color: #555; font-size: 18px; line-height: 1.5; }
.sp-token-cloud { display: flex; flex-wrap: wrap; gap: 14px; align-content: center; }
.sp-token-cloud span { padding: 18px 22px; border-radius: 12px; background: #f1efe9; font-weight: 750; }
.sp-ready { padding-block: var(--section-standard); background: #d8ff43; }
.sp-ready-grid { display: grid; grid-template-columns: 1fr .75fr; gap: 80px; align-items: center; }
.sp-ready h2 { margin-bottom: 34px; font-size: 50px; font-weight: 500; line-height: 1.08; }
.sp-ready p { max-width: 560px; margin: -14px 0 28px; color: #343631; font-size: 18px; line-height: 1.5; }
.sp-ready img { width: 100%; height: 380px; object-fit: cover; border-radius: 18px; }
.sp-faq { padding-block: var(--section-standard); }
.sp-faq-grid { display: grid; grid-template-columns: .6fr 1.4fr; gap: 90px; }
.sp-faq h2 { font-size: 50px; font-weight: 500; }
.sp-support { display: grid; align-items: center; padding-block: var(--section-compact); background: #f1efe9; }
.sp-support > div { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.sp-support h2 { margin: 0; font-size: 30px; }
.sp-support a { color: inherit; font-weight: 700; text-decoration: none; }

/* Engine only: Square Contracts */
.contracts-page { overflow: clip; color: #090909; background: #fff; }
.contracts-page h1 { margin-top: 0; letter-spacing: -.045em; }
.contracts-page h2 { margin-top: 0; line-height: 1.1; letter-spacing: -.04em; }
.contracts-page h3 { margin-top: 0; line-height: 1.16; letter-spacing: -.025em; }
.contracts-page .clone-label { font-size: 13px; line-height: 1.2; letter-spacing: .08em; }
.ct-hero,
.ct-benefits,
.ct-control,
.ct-library,
.ct-faq { padding: var(--section-standard) 0; }
.ct-hero { text-align: center; }
.ct-hero h1 { max-width: 900px; margin: 22px auto; font-size: clamp(44px, 4.5vw, 56px); font-weight: 500; line-height: 1.05; }
.ct-hero > div > p:not(.clone-label) { margin: 0 auto 28px; max-width: 650px; color: #555; font-size: 18px; line-height: 1.5; }
.ct-hero-media { height: 566px; }
.ct-hero-media .shell { height: 100%; }
.ct-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.ct-section-head { max-width: 760px; margin-bottom: 56px; }
.ct-section-head .clone-label { margin-bottom: 14px; }
.ct-section-head h2 { margin-bottom: 0; font-size: 36px; }
.ct-section-head > p:last-child { max-width: 680px; margin: 18px 0 0; color: #555; font-size: 18px; line-height: 1.5; }
.ct-benefits article { border-top: 1px solid #999; padding-top: 25px; }
.ct-benefits h3 { margin-bottom: 12px; font-size: 28px; }
.ct-benefits p { margin: 0; color: #555; font-size: 17px; line-height: 1.5; }
.ct-control { background: var(--ground-sunk); }
.ct-control-list article { display: grid; min-height: 410px; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; border-top: 1px solid #aaa; padding: 42px 0; }
.ct-control-list article:nth-child(even) > div { order: 2; }
.ct-control-list h3 { margin: 12px 0 14px; font-size: 30px; }
.ct-control-list p:not(.clone-label) { margin: 0; color: #555; font-size: 17px; line-height: 1.5; }
.ct-control-list img { width: 100%; height: 320px; object-fit: cover; object-position: top; border-radius: 18px; }
.ct-signup { display: grid; padding: var(--section-compact) 0 0; place-items: center; text-align: center; }
.ct-signup > .shell { padding: 56px 32px; border: 1px solid #b7d92f; background: #d8ff43; }
.ct-signup h2 { margin-bottom: 18px; font-size: 36px; font-weight: 500; }
.ct-signup p { max-width: 680px; margin: 0 auto 24px; color: #343631; font-size: 17px; line-height: 1.5; }
.ct-library { border-top: 1px solid #ccc; }
.ct-library h2 { margin-bottom: 45px; font-size: 36px; font-weight: 500; }
.ct-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ct-guide-grid a { display: flex; min-height: 240px; flex-direction: column; padding: 24px; border-radius: 15px; color: inherit; background: #f1efe9; text-decoration: none; }
.ct-guide-grid h3 { margin-bottom: 12px; font-size: 24px; line-height: 1.2; }
.ct-guide-grid p { margin: 0; color: #555; font-size: 16px; line-height: 1.5; }
.ct-guide-grid span { display: block; margin-top: auto; padding-top: 22px; font-weight: 700; }
.ct-faq { border-top: 1px solid #ccc; }
.ct-faq-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: 90px; align-items: start; }
.ct-faq h2 { margin-bottom: 0; font-size: 36px; font-weight: 500; }
.ct-faq summary { font-size: 20px; line-height: 1.35; letter-spacing: -.01em; }

@media (prefers-reduced-motion: reduce) {
  .sp-words span { animation: none; }
  .sp-words span:first-child { opacity: 1; }
}
@media (max-width: 760px) {
  .clone-step-grid, .clone-three, .clone-four { grid-template-columns: 1fr; }
  .dir-path .dir-feature-grid { margin-bottom: 54px; }
  .dir-path .dir-feature-grid-reverse figure { order: 0; }
  .dir-path h2 { font-size: 38px; }
  .dir-path figure { height: 320px; }
  .dir-hero h1 { font-size: 38px; }
  .dir-feature h2, .dir-feature-compact h2 { font-size: 38px; }
  .dir-feature-grid { grid-template-columns: 1fr; }
  .dir-picker-grid, .directory-page .clone-step-grid, .dir-benefit-grid, .dir-benefits-three .dir-benefit-grid, .dir-benefit-grid-three { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .dir-picker-grid > *, .directory-page .clone-step-grid > *, .dir-benefit-grid > * { min-width: min(78vw, 300px); scroll-snap-align: start; }
  .directory-page .clone-step-grid > * { min-height: 220px; }
  .dir-benefit-grid > * { min-height: 160px; }
  .dir-service-grid { grid-template-columns: repeat(2, 1fr); }
  .dir-steps h2 { font-size: 24px; }
  .dir-feature figure { height: 320px; }
  .sp-hero-grid, .sp-value-grid, .sp-trust-grid, .sp-ready-grid, .sp-faq-grid { grid-template-columns: 1fr; gap: 44px; }
  .sp-faq-grid { gap: 20px; }
  .sp-faq h2 { margin-bottom: 0; }
  .sp-hero h1 { font-size: 38px; }
  .sp-collage { height: 560px; }
  .sp-solutions h2, .sp-value > .shell > h2, .sp-head h2, .sp-trust h2, .sp-ready h2, .sp-faq h2 { font-size: 30px; }
  .sp-solution-grid { grid-template-columns: 1fr 1fr; }
  .sp-head { display: block; }
  .sp-ready img { height: 300px; }
  .sp-support > div { display: block; }
  .sp-support a { display: inline-block; margin-top: 20px; }
  .ct-hero h1 { font-size: 40px; }
  .ct-hero-media { height: auto; }
  .ct-hero-media img { height: 390px; }
  .ct-control-list article { min-height: 0; grid-template-columns: 1fr; gap: 28px; padding: 48px 0; }
  .ct-control-list article:nth-child(even) > div { order: 0; }
  .ct-control-list img { height: 250px; }
  .ct-guide-grid { grid-template-columns: 1fr; }
  .ct-section-head { margin-bottom: 40px; }
  .ct-section-head h2, .ct-library h2, .ct-faq h2, .ct-signup h2 { font-size: 30px; }
  .ct-benefits h3, .ct-control-list h3 { font-size: 27px; }
  .ct-faq-grid { grid-template-columns: 1fr; gap: 38px; }
  .ct-signup > .shell { padding: 44px 24px; }
}
}

@layer pages {
/* Templates gallery and template detail pages. */

.page-templates main,
.page-template-detail main {
  background: #f7f6f2;
  color: #151515;
}

.tg-hero {
  overflow: hidden;
  padding-block: var(--section-display);
}

.tg-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

.tg-hero-copy {
  position: relative;
  z-index: 2;
}

.tg-hero h1 {
  margin: 0;
  font-size: clamp(72px, 9.6vw, 156px);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.075em;
}

.tg-hero h1 span {
  display: block;
}

.tg-hero p {
  max-width: 510px;
  margin: 48px 0 0;
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.35;
}

.tg-collage {
  position: relative;
  min-height: clamp(500px, 47vw, 710px);
}

.tg-float {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(21, 21, 21, 0.82);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(21, 21, 21, 0.12);
}

.tg-float span {
  display: block;
  height: 27px;
  border-bottom: 1px solid rgba(21, 21, 21, 0.3);
  background: #e4ff40;
}

.tg-float span::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 10px 0 0 12px;
  border-radius: var(--r-round);
  background: #151515;
  box-shadow: 13px 0 #151515, 26px 0 #151515;
}

.tg-float img {
  display: block;
  width: 100%;
  height: calc(100% - 27px);
  object-fit: cover;
}

.tg-float-1 {
  top: 4%;
  right: 4%;
  width: 69%;
  height: 49%;
  transform: rotate(3deg);
}

.tg-float-2 {
  top: 36%;
  left: 0;
  z-index: 2;
  width: 64%;
  height: 48%;
  transform: rotate(-5deg);
}

.tg-float-2 span { background: #86b9ff; }

.tg-float-3 {
  right: 0;
  bottom: 2%;
  z-index: 3;
  width: 57%;
  height: 40%;
  transform: rotate(5deg);
}

.tg-float-3 span { background: #ff8b75; }

.tg-gallery {
  padding-bottom: 64px;
}

.tg-search {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  min-height: 64px;
  padding: 0 clamp(18px, 2vw, 28px);
  border: 1px solid #151515;
  border-radius: var(--r-control);
  background: #fff;
}

.tg-search svg {
  width: 22px;
  height: 22px;
}

.tg-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 14px;
  color: #151515;
  font: inherit;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.02em;
}

.tg-search input::placeholder {
  color: #77756f;
  opacity: 1;
}

.tg-search input:focus-visible {
  outline: 0;
  box-shadow: none;
}

.tg-search:focus-within {
  box-shadow: 0 0 0 3px #f7f6f2, 0 0 0 5px #151515;
}

.tg-filter-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 0 48px;
}

.tg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tg-filters button,
.tg-tags span,
.td-tags span {
  border: 1px solid #151515;
  border-radius: var(--r-pill);
  padding: 6px 13px 7px;
  background: transparent;
  color: #151515;
  font: inherit;
  font-size: 14px;
  line-height: 1;
}

.tg-filters button {
  border-radius: var(--r-control);
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}

.tg-filters button:hover,
.tg-filters button[aria-pressed="true"] {
  background: #151515;
  color: #fff;
}

.tg-count {
  flex: none;
  margin: 7px 0 0;
  color: #6f6d68;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.tg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 64px 24px;
}

.tg-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  color: #151515;
}

.tg-card[hidden] {
  display: none;
}

.tg-card-art {
  display: block;
  overflow: hidden;
  aspect-ratio: 1.25;
  border: 1px solid rgba(21, 21, 21, 0.85);
  border-radius: 22px;
  background: #e8e6df;
}

.tg-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-soft);
}

.tg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 16px;
}

.tg-tags span {
  padding: 4px 9px 5px;
  font-size: 11px;
}

.tg-card strong {
  margin-top: 16px;
  font-size: clamp(27px, 2.25vw, 38px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.055em;
  transition: color 180ms var(--ease);
}

.tg-card-copy {
  margin-top: 12px;
  color: #686660;
  font-size: 15px;
  line-height: 1.4;
}

.tg-card-action {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tg-card:hover .tg-card-art img {
  transform: scale(1.045);
}

.tg-card:hover strong {
  color: #2449d8;
}

.tg-empty {
  margin: 24px 0 0;
  padding: 72px 24px;
  border: 1px solid #151515;
  border-radius: 22px;
  text-align: center;
  font-size: clamp(24px, 3vw, 42px);
  letter-spacing: -0.04em;
}

.tg-note {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr) auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 96px;
  border: 1px solid #151515;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 60px);
  background: #dce8ff;
}

.tg-note h2 {
  margin: 0;
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.tg-note p {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
}

/* Template detail */
.td-head {
  padding-top: var(--section-standard);
}

.td-back {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 17px;
}

.td-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 46px;
}

.td-head h1 {
  max-width: 1200px;
  margin: 30px 0 0;
  font-size: clamp(76px, 11vw, 176px);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.075em;
}

.td-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(350px, 0.65fr);
  gap: clamp(48px, 9vw, 150px);
  align-items: end;
  padding: 52px 0 72px;
}

.td-intro p {
  max-width: 720px;
  margin: 0;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.td-use {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-width: 260px;
  margin-top: 30px;
  border-radius: var(--r-control);
  padding: 19px 24px;
  background: #151515;
  color: #fff;
  font-size: 17px;
}

.td-meta dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
}

.td-meta dt {
  margin-bottom: 10px;
  color: #6f6d68;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.td-meta dd {
  margin: 0;
  font-size: 20px;
}

.td-visual figure {
  overflow: hidden;
  margin: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid #151515;
  border-radius: 32px;
  background: #e8e6df;
}

.td-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.td-about {
  display: grid;
  grid-template-columns: 0.45fr 1.05fr 0.7fr;
  gap: 40px;
  padding-top: var(--section-standard);
  padding-bottom: 96px;
}

.td-about p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

.td-about h2 {
  margin: 0;
  font-size: clamp(40px, 5vw, 74px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.td-neighbours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: var(--section-standard);
}

.td-neighbours a {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #151515;
  padding: 26px;
}

.td-neighbours a:first-child {
  border-radius: 24px 0 0 24px;
}

.td-neighbours a:last-child {
  border-left: 0;
  border-radius: 0 24px 24px 0;
  text-align: right;
}

.td-neighbours span {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.td-neighbours strong {
  font-size: clamp(25px, 3vw, 44px);
  font-weight: 400;
  letter-spacing: -0.045em;
}

@media (max-width: 1100px) {
  .tg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-note { grid-template-columns: 1fr 1fr; }
  .tg-note .btn { grid-column: 2; justify-self: start; }
}

@media (max-width: 820px) {
  .tg-hero-inner { grid-template-columns: 1fr; }
  .tg-collage { min-height: 470px; }
  .tg-search { min-height: 56px; grid-template-columns: 20px minmax(0, 1fr); }
  .tg-search svg { width: 18px; height: 18px; }
  .tg-search input { padding: 12px 10px; }
  .td-meta,
  .td-about { grid-template-columns: 1fr; }
  .td-meta { gap: 44px; }
}

@media (max-width: 600px) {
  .tg-hero h1 { font-size: clamp(58px, 19vw, 78px); line-height: 0.88; }
  .tg-hero p { margin-top: 28px; }
  .tg-collage { min-height: 360px; }
  .tg-float { border-radius: 12px; }
  .tg-filter-row { display: block; padding-bottom: 36px; }
  .tg-filters { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
  .tg-filters::-webkit-scrollbar { display: none; }
  .tg-filters button { flex: none; }
  .tg-count { margin-top: 14px; }
  .tg-grid { grid-template-columns: 1fr; gap: 54px; }
  .tg-card-art { aspect-ratio: 1.35; }
  .tg-card strong { font-size: 34px; }
  .tg-note { grid-template-columns: 1fr; gap: 26px; margin-bottom: 64px; }
  .tg-note .btn { grid-column: auto; }
  .td-head h1 { font-size: clamp(40px, 13vw, 68px); }
  .td-meta { padding-top: 36px; }
  .td-meta dl { grid-template-columns: 1fr 1fr; }
  .td-visual figure { aspect-ratio: 4 / 3; border-radius: 20px; }
  .td-about { padding-top: 64px; padding-bottom: 64px; }
  .td-neighbours { grid-template-columns: 1fr; }
  .td-neighbours a:first-child { border-radius: 20px 20px 0 0; }
  .td-neighbours a:last-child { border-top: 0; border-left: 1px solid #151515; border-radius: 0 0 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .tg-card-art img { transition: none; }
  .tg-card:hover .tg-card-art img { transform: none; }
}
}

@layer pages {
.why-box {
  --wb-black: #050505;
  --wb-white: #fff;
  --wb-blue: #1f56f0;
  --wb-paper: #f4f2ec;
  --wb-line: #d9d8d2;
  color: #101112;
  background: var(--wb-white);
  overflow: clip;
}

.wb-wrap {
  width: min(100%, 1540px);
  margin-inline: auto;
  padding-inline: clamp(22px, 4vw, 68px);
}

.wb-kicker {
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wb-hero {
  position: relative;
  min-height: min(1180px, calc(100vh + 260px));
  display: grid;
  place-items: center;
  padding: clamp(120px, 16vw, 250px) 0;
  color: var(--wb-white);
  background: var(--wb-black);
  isolation: isolate;
}

.wb-hero-collage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.wb-float {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(18px, 2.5vw, 42px);
  animation: wb-float 8s ease-in-out infinite alternate;
}

.wb-float img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wb-float-one { width: clamp(190px, 23vw, 380px); height: clamp(300px, 38vw, 610px); top: 2%; left: -3%; }
.wb-float-two { width: clamp(180px, 21vw, 350px); aspect-ratio: 1.15; top: -7%; left: 42%; animation-delay: -2s; }
.wb-float-three { width: clamp(190px, 23vw, 390px); height: clamp(310px, 35vw, 560px); top: 18%; right: -5%; animation-delay: -4s; }
.wb-float-four { width: clamp(180px, 24vw, 410px); aspect-ratio: 1.4; bottom: 2%; left: 11%; animation-delay: -6s; }
.wb-float-five { width: clamp(180px, 25vw, 420px); aspect-ratio: 1.5; bottom: -3%; right: 13%; animation-delay: -1s; }
.wb-float-six { width: clamp(160px, 18vw, 300px); aspect-ratio: 1.25; bottom: 18%; right: -3%; animation-delay: -3s; }

@keyframes wb-float {
  from { transform: translate3d(0, -8px, 0); }
  to { transform: translate3d(0, 14px, 0); }
}

.wb-hero-copy {
  max-width: 1040px;
  text-align: center;
}

.wb-hero-copy .wb-kicker { margin-bottom: 42px; }
.wb-hero h1 {
  margin: 0;
  font-size: clamp(54px, 7.4vw, 112px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.065em;
}
.wb-hero-copy > p:not(.wb-kicker) {
  max-width: 720px;
  margin: 32px auto 0;
  color: #c9c9c9;
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.5;
}
.wb-actions { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.wb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 21px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 16px;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.wb-button:hover { transform: translateY(-2px); }
.wb-button-light { color: #101112; background: var(--wb-white); }
.wb-button-outline { color: var(--wb-white); border-color: #777; }
.wb-button-outline:hover { background: #1d1d1d; }
.wb-button-dark { color: var(--wb-white); background: #101112; }

.wb-story { padding-block: var(--section-roomy); }
.wb-story-grid {
  display: grid;
  grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
  gap: 26px clamp(50px, 9vw, 150px);
}
.wb-story-grid h2 {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(46px, 6.5vw, 94px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.06em;
}
.wb-story-copy {
  grid-column: 2;
  max-width: 820px;
  margin: 24px 0 0;
  color: #616362;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.5;
}

.wb-intro {
  margin-top: clamp(64px, 8vw, 110px);
  padding-top: clamp(64px, 8vw, 110px);
  border-top: 1px solid var(--wb-line);
  text-align: center;
}
.wb-intro h2 {
  margin: 18px 0;
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.058em;
}
.wb-intro p:last-child {
  max-width: 650px;
  margin: 0 auto;
  color: #606260;
  font-size: 19px;
  line-height: 1.6;
}

.wb-control {
  padding-top: var(--section-roomy);
  color: var(--wb-white);
  background: var(--wb-black);
}
.wb-control-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr);
  gap: 40px clamp(60px, 10vw, 170px);
  align-items: end;
  padding-bottom: clamp(56px, 7vw, 100px);
}
.wb-control h2,
.wb-choice h2,
.wb-unified h2,
.wb-directory h2,
.wb-final h2 {
  margin: 18px 0 0;
  font-size: clamp(45px, 6vw, 88px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.058em;
}
.wb-control-head > p {
  margin: 0;
  color: #c2c2c2;
  font-size: 19px;
  line-height: 1.6;
}
.wb-control-media {
  position: relative;
  width: min(calc(100% - 44px), 1840px);
  margin: 0 auto;
  aspect-ratio: 16 / 8.5;
  overflow: hidden;
  border-radius: 34px 34px 0 0;
}
.wb-control-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wb-control-tags { position: absolute; inset: 0; }
.wb-control-tags span {
  position: absolute;
  padding: 12px 18px;
  color: #1249df;
  background: var(--wb-white);
  border-radius: 999px;
  font-size: clamp(13px, 1.2vw, 18px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}
.wb-control-tags span:nth-child(1) { top: 17%; left: 13%; }
.wb-control-tags span:nth-child(2) { top: 39%; right: 10%; }
.wb-control-tags span:nth-child(3) { bottom: 18%; left: 34%; }
.wb-control-tags span:nth-child(4) { top: 18%; right: 28%; }
.wb-control-tags span:nth-child(5) { bottom: 10%; right: 24%; }

.wb-marquee-section { padding-block: var(--section-standard); color: var(--wb-white); background: var(--wb-blue); }
.wb-marquee-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 58px; }
.wb-marquee-head h2 { max-width: 800px; margin: 14px 0 0; font-size: clamp(36px, 5vw, 72px); font-weight: 400; line-height: 1; letter-spacing: -.05em; }
.wb-marquee-toggle {
  padding: 11px 15px;
  color: var(--wb-white);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  background: transparent;
  font: inherit;
}
.wb-marquee { overflow: hidden; }
.wb-marquee-track {
  display: flex;
  width: max-content;
  animation: wb-marquee 28s linear infinite;
}
.wb-marquee[data-paused="true"] .wb-marquee-track { animation-play-state: paused; }
.wb-marquee-set { display: flex; align-items: center; }
.wb-marquee-set span {
  display: flex;
  align-items: center;
  font-size: clamp(54px, 8vw, 124px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.06em;
  white-space: nowrap;
}
.wb-marquee-set span::after { content: ""; width: .18em; height: .18em; margin: 0 .36em; border-radius: 50%; background: currentColor; }
@keyframes wb-marquee { to { transform: translateX(-50%); } }

.wb-choice { padding-block: var(--section-roomy); background: var(--wb-paper); }
.wb-choice-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: clamp(48px, 9vw, 150px); align-items: center; }
.wb-choice-copy > p:not(.wb-kicker),
.wb-unified-head > p:not(.wb-kicker) { color: #606260; font-size: 18px; line-height: 1.65; }
.wb-text-link { display: inline-flex; gap: 12px; margin-top: 24px; padding-bottom: 5px; border-bottom: 1px solid currentColor; }
.wb-choice-media { margin: 0; padding: clamp(20px, 3vw, 44px); border-radius: clamp(22px, 3vw, 46px); background: #dfe5f7; }
.wb-choice-media img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 25px 65px rgba(23, 32, 54, .16); }
.wb-polish { margin-top: clamp(70px, 9vw, 130px); padding-top: clamp(70px, 9vw, 130px); border-top: 1px solid var(--wb-line); }

.wb-unified { padding-top: var(--section-roomy); }
.wb-unified-head { max-width: 1050px; text-align: center; }
.wb-unified-head > p:not(.wb-kicker) { max-width: 730px; margin: 26px auto 0; }
.wb-unified-media { width: min(calc(100% - 44px), 1700px); margin: clamp(48px, 6vw, 82px) auto 0; padding: clamp(24px, 3vw, 48px); border-radius: 42px 42px 0 0; background: #e8d5b5; }
.wb-unified-media img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 28px 80px rgba(32, 27, 18, .18); }

.wb-directory { padding-block: var(--section-standard); color: var(--wb-white); background: var(--wb-black); }
.wb-directory h2 { max-width: 870px; margin: 0 0 clamp(42px, 5vw, 70px); }
.wb-directory-list { border-top: 1px solid #474747; }
.wb-directory-list a {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 27px 0;
  color: var(--wb-white);
  border-bottom: 1px solid #474747;
  font-size: clamp(21px, 2.3vw, 34px);
}
.wb-directory-list a span:last-child { transition: transform .2s ease; }
.wb-directory-list a:hover span:last-child { transform: translate(4px, -4px); }

.wb-final { padding-block: var(--section-display); background: var(--wb-paper); }
.wb-final-inner { text-align: center; }
.wb-final h2 { max-width: 950px; margin-inline: auto; }
.wb-final-inner > p:not(.wb-kicker) { max-width: 610px; margin: 28px auto; color: #606260; font-size: 20px; line-height: 1.55; }

@media (max-width: 799px) {
  .wb-hero { min-height: 0; padding-block: var(--section-display); }
  .wb-float-one { left: -28%; }
  .wb-float-two { top: -4%; left: 52%; }
  .wb-float-three { top: 25%; right: -39%; }
  .wb-float-four { left: -15%; }
  .wb-float-five { right: -25%; }
  .wb-float-six { display: none; }
  .wb-story-grid,
  .wb-control-head,
  .wb-choice-grid { grid-template-columns: 1fr; }
  .wb-story-copy { grid-column: 1; }
  .wb-control-media { width: calc(100% - 20px); min-height: 650px; aspect-ratio: auto; }
  .wb-control-tags span:nth-child(1) { left: 5%; }
  .wb-control-tags span:nth-child(2) { right: 4%; }
  .wb-control-tags span:nth-child(3) { left: 8%; }
  .wb-control-tags span:nth-child(4) { right: 5%; }
  .wb-control-tags span:nth-child(5) { right: 5%; }
  .wb-marquee-head { align-items: start; flex-direction: column; }
  .wb-choice-copy { order: 1; }
  .wb-choice-media { order: 2; }
  .wb-unified-media { width: calc(100% - 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .wb-float,
  .wb-marquee-track { animation: none; }
  .wb-button,
  .wb-directory-list a span:last-child { transition: none; }
}
}