/* ============================================================
   base — reset, type, shell, accessibility.
   Owns: document defaults and the two layout containers every
   section sits in. Owns no component.
   ============================================================ */

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

/* No scroll-behavior: smooth. It was here and it broke every
   in-page link: with it set, fragment navigation on this page
   silently did nothing — the hash changed and the page stayed
   put. Programmatic smooth scrolling still worked, so it is the
   fragment path specifically. Measured, not guessed: the same
   link lands correctly the moment the declaration is gone.

   It is also the right call on its own. This page is ~15,000px;
   a smooth scroll from the nav to the footer is several seconds
   of motion the reader cannot stop, which is the same WCAG 2.2.2
   problem the looping scenes already have to answer for. An
   instant jump is what a nav link should do at this length. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 20px);   /* clears the sticky nav on anchor jump */
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

/* ---------- Type ---------- */

/* .as-h2 / .as-h3: a heading's look for text that is not a heading, such as labels
   inside the product demos. */
h1, h2, h3, h4, .as-h2, .as-h3 {
  font-family: var(--head);
  font-weight: var(--h-weight);
  margin: 0;
  text-wrap: balance;
  color: var(--text);
}
h1 { font-size: var(--d1-size); line-height: var(--d1-lh); letter-spacing: var(--d1-track); }
h2, .as-h2 { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-track); }
h3, .as-h3 { font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-track); }
h4 { font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-track); }

.text-gradient { color: var(--blue-deep); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .text-gradient {
    background-image: var(--heading-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
@media print, (forced-colors: active) {
  .text-gradient {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}

p { margin: 0; }
p + p { margin-top: var(--s-3); }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-deep); }

b, strong { font-weight: 600; color: var(--text); }

ul, ol { margin: 0; padding: 0; list-style: none; }

.lede {
  font-size: var(--lead-size);
  line-height: var(--lead-lh);
  color: var(--text-2);
  max-width: 62ch;
}

/* Uppercase micro-label. Used for eyebrows and section markers. */
.label {
  font-size: var(--label-size);
  line-height: var(--label-lh);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-faint);
}

.mono { font-family: var(--mono); font-size: .92em; }

/* ---------- Shell ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (min-width: 1024px) {
  .shell { padding-inline: var(--s-7); }
}

/* Vertical rhythm between top-level sections. One value, one scale.
   Named as a property so the padding and the anchor correction below
   read the same number and cannot drift apart. */
.band { --band-pad: clamp(56px, 9vw, var(--band)); }
.band-tight { --band-pad: clamp(36px, 5vw, 72px); }

/* A band's top padding is breathing room for a reader arriving by scroll.
   Someone arriving by anchor has already been given that room by
   scroll-padding-top above, so the two stack: at 1440x900 the nav's 84px
   and the band's 130px put the section's first line 213px down an empty
   screen. Cancel the padding for the jump only, keeping 24px of air.
   scroll-margin is scroll geometry, not layout -- nothing moves on the
   page, only the resting place of a link to it.

   A band with its own rhythm sets --band-pad, never padding-block: the
   property is what keeps the padding and this correction in step. Set
   padding-block directly and the band silently opts out of the fix --
   it keeps its old landing. .loop and #faq.faq-cards are the two that
   have their own value; the rest read the scale above. */
.band, .band-tight {
  padding-block: var(--band-pad);
  scroll-margin-top: calc(24px - var(--band-pad));
}

/* A tinted band, used to separate movements of the page. */
.band-wash { background: var(--sky); }
.band-sunken { background: var(--surface-sunken); }

/* ---------- Section heading pattern ---------- */

.sec-head { display: grid; gap: var(--s-3); max-width: 62ch; }
.sec-head .lede { max-width: none; }

/* ---------- Accessibility ---------- */

.skip {
  position: absolute;
  left: var(--s-4);
  top: calc(-1 * var(--s-9));
  z-index: 100;
  background: var(--surface);
  color: var(--text);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-field);
  box-shadow: var(--sh-float);
  font-weight: 600;
}
.skip:focus { top: var(--s-4); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-chip);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Buttons ----------
   The three sizes from Figma (frame 1272:360): sm 40 / md 44 / lg 48.
   They are three SIZES of one filled indigo button, not three styles —
   fill, radius, padding, gap and weight are identical across all three.
   The live b2c site measures the same button (#5070FE, 12px, weight 500,
   8px/16px), so this is two independent sources agreeing.

   Figma fixes the height as a track rather than deriving it from padding
   (8 + 20 + 8 = 36, but sm is 40), so min-height carries the size and the
   padding is only a floor. md is the default because it is also NF3's
   44px touch target.

   Buttons carry their own type ramp — 14/16/18 — which is Figma's, not
   the page type scale. That is deliberate: it is one component's ramp,
   and the only place on the page these three sizes appear. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-field);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

/* Figma pairs one icon size with each text size. Any icon dropped into a
   button inherits the right one without a second class. */
.btn :where(svg, img) { width: 20px; height: 20px; flex: 0 0 auto; }

.btn-sm { min-height: 40px; font-size: 14px; line-height: 20px; }
.btn-sm :where(svg, img) { width: 16px; height: 16px; }

.btn-lg { min-height: 48px; font-size: 18px; line-height: 28px; }
.btn-lg :where(svg, img) { width: 24px; height: 24px; }

.btn-primary {
  /* The brand's deeper indigo keeps small white labels above AA contrast. */
  background: var(--cta-deep);
  color: var(--cta-ink);
}
.btn-primary:hover { background: var(--cta-abyss); color: var(--cta-ink); }

/* No Figma source — the frame Elif pointed at has only the filled style.
   So this is ours, and it borrows the filled button's geometry exactly
   rather than inventing a second one. */
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--hairline);
}
.btn-ghost:hover { background: var(--surface); color: var(--text); border-color: var(--line); }

/* The same two buttons, inverted for the indigo closing card. Geometry
   is untouched — only the two colour pairs change, which is the whole
   point of keeping .btn as the one shape. */
.btn-on-cta {
  background: var(--cta-ink);
  color: var(--ink);
}
.btn-on-cta:hover { background: var(--card); color: var(--ink); }

.btn-on-cta-ghost {
  background: transparent;
  color: var(--on-cta);
  border-color: var(--on-cta-line);
}
.btn-on-cta-ghost:hover { background: var(--on-cta-fill); color: var(--on-cta); border-color: var(--on-cta); }

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

/* Match the B2C navigation demo CTA. */
.btn-primary.btn-demo{background:#5070fe;color:#fafafa}
.btn-primary.btn-demo:hover{background:#4161ed;color:#fafafa}