/* ===========================================================================
   VARIANT A · delta over precision-page.css
   ---------------------------------------------------------------------------
   0 · DARK PAGE
   ----------------------------------------------------------------------------
   The page is dark by client direction. Not a `prefers-color-scheme` variant
   and not a toggle: this is the palette. Every value is audited by
   tools/contrast.mjs on all three page grounds and all three panel grounds.
   Lowest text ratio in the set is 5.23:1.

   Two things this buys that the light canvas could not.

   THE SUPPLIED BRAND COLOURS BECOME TEXT. On white, all four measured under
   3:1 and were confined to decorative fills, which is why the light palette
   had to derive #3B3E9E from the periwinkle rather than use it. Here the
   accent IS #9FA1FF, unmodified: 8.39:1 on the canvas. Mint reaches 17.28,
   sky 14.08, lilac 10.64. The client's palette finally carries meaning
   instead of just filling shapes.

   ELEVATION RUNS THE RIGHT WAY. `--surface-sunken` is LIGHTER than the canvas
   here, not darker. On a dark page raised means lighter, and mechanically
   inverting the light palette's relationship would have made the alternating
   band read as a hole punched in the page.

   Nothing below hardcodes a colour that is not defined here.
   ------------------------------------------------------------------------ */
.p-body-root {
  --canvas: #0a0c12;
  --surface: #161b27;
  --surface-sunken: #0e111a;

  --ink: #ffffff;            /* 19.55 · 18.85 · 17.21 */
  --ink-secondary: #a9aec0;  /*  8.85 ·  8.53 ·  7.79 */
  --ink-tertiary: #8a90a4;   /*  6.15 ·  5.93 ·  5.41 */
  --ink-disabled: #565c6e;   /*  2.93 — NON-TEXT ONLY */

  /* Hairlines invert to light at low opacity for the same reason they were
     dark at low opacity before: opacity is what lets one value sit correctly
     on every ground in the set. */
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-strong: rgba(255, 255, 255, 0.18);

  --accent: #9fa1ff;         /* the supplied periwinkle, unmodified */
  --accent-quiet: #aee2ff;   /* the supplied sky, unmodified        */
  --accent-contrast: #0a0c12;
  --accent-tint: rgba(159, 161, 255, 0.12);

  /* The canvas at zero alpha. Gradients that fade to nothing need the ground
     colour, not `transparent`: `transparent` is black at zero alpha, and on a
     dark page that is close enough to pass unnoticed while still shifting the
     midpoint. Named so it cannot drift from --canvas. */
  --canvas-fade: rgba(10, 12, 18, 0);

  /* --- Product panels, dark ---------------------------------------------
     They go dark with the page, and they sit ABOVE it: every panel ground is
     lighter than every page ground, so a panel reads as raised without
     needing a heavy border. The faint ink is lifted from the original
     #7B84A4, which measured 4.20 on the raised ground and missed the body
     floor. Ratios are panel · raised · sunken. */
  --panel: #161b27;
  --panel-raised: #1e2432;
  --panel-sunken: #121620;
  --panel-line: rgba(255, 255, 255, 0.12);
  --panel-ink: #eaecf6;        /* 14.61 · 13.17 · 15.35 */
  --panel-ink-muted: #a2aac6;  /*  7.46 ·  6.72 ·  7.84 */
  --panel-ink-faint: #8c95b4;  /*  5.80 ·  5.23 ·  6.09 */
  --panel-accent: #9fa1ff;     /*  7.39 ·  6.66          */
  --panel-accent-alt: #aee2ff; /* 12.39 · 11.17          */
  --panel-ok: #d9f9df;         /* 15.22 · 13.72          */
  --panel-flag: #e9a238;       /*  7.94 ·  7.16          */
}

/* The browser's own surfaces, so form controls and the overscroll gutter do
   not flash white against the page. */
.p-body-root { color-scheme: dark; }

/* ---------------------------------------------------------------------------
   1 · TYPOGRAPHIC HERO
   The gradient tile is gone, so the hero is type and two buttons on bare
   canvas. Two things follow from that:

     · The band has to close itself. Its bottom padding used to belong to
       `.p-hero__stage`, which no longer exists, so without this the CTAs sit
       flush against the thesis band above its own top padding.
     · With nothing beneath it competing, the headline can hold a wider
       measure than 16ch without the line breaks going slack.
   ------------------------------------------------------------------------ */
/* --- Full viewport ------------------------------------------------------
   `100dvh`, never `100vh`: on mobile Safari `vh` is measured against the
   address bar's collapsed state, so a `100vh` hero jumps by the bar's height
   the moment the user scrolls. `svh` is the safe floor for browsers without
   `dvh`, and plain `vh` backs both up for older ones. Declared in that order
   so each overrides the last only where supported.

   The nav is sticky and transparent at rest, so it overlays the hero rather
   than taking height from it. Centring the copy in the full band puts it
   optically below the nav without either of them knowing about the other. */
.p-hero--typographic {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  align-content: center;
}

.p-hero--typographic .p-hero__copy {
  padding-top: var(--s-16);
  padding-bottom: var(--s-16);
}

@media (min-width: 64em) {
  .p-hero--typographic .p-hero__copy {
    padding-top: var(--s-12);
    padding-bottom: var(--s-12);
  }
}

/* A short viewport is the one case where a full-height band hurts: the copy
   stops fitting and the CTAs go under the fold, which is the exact failure
   the rule was meant to prevent. Below 640px tall the band gives up its
   minimum and sizes to its content. */
@media (max-height: 40em) {
  .p-hero--typographic { min-height: 0; }
  .p-hero--typographic .p-hero__copy {
    padding-top: var(--s-16);
    padding-bottom: var(--s-16);
  }
}

.p-hero--typographic .p-display {
  max-width: 20ch;
}

/* ---------------------------------------------------------------------------
   MESH TEXT HOVER  ·  Originkit, ported
   ----------------------------------------------------------------------------
   The real <h1> is never removed. While the effect runs it is painted
   transparent and the WebGL canvas draws the visible glyphs on top of it, so
   the heading keeps its layout, its place in the reading order, its selection
   behaviour and its announcement to a screen reader.

   `color: transparent` rather than `visibility: hidden` or `opacity: 0`: the
   first two take the heading out of the accessibility tree, and the page has
   exactly one <h1>.

   `.is-mesh` is added by the script only after a texture has been drawn, so
   every failure path leaves the heading visible: no WebGL2, reduced motion,
   a touch-only pointer, a shader that will not compile, or the script never
   arriving at all.
   ------------------------------------------------------------------------ */
.p-meshtext {
  position: relative;
  display: block;
}

.p-meshtext__canvas {
  position: absolute;
  display: block;
  /* Sized and offset in script from the heading's measured box plus padding
     for displaced glyphs. Hidden until there is something to show. */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--base) var(--ease-out);
}

.p-meshtext.is-mesh .p-display {
  color: transparent;
}

.p-meshtext.is-mesh .p-meshtext__canvas {
  opacity: 1;
}

/* The heading must never be caught mid-swap with both copies showing, and a
   fade on the canvas would do exactly that against a transparent heading. */
@media (prefers-reduced-motion: reduce) {
  .p-meshtext__canvas { transition: none; }
}

/* ---------------------------------------------------------------------------
   REACTIVE LINES  ·  Originkit "Hero 27", ported
   ----------------------------------------------------------------------------
   A full-bleed canvas behind the hero copy. Ground and stroke both come from
   the page tokens, read at runtime, so the band cannot drift from the theme.

   The band needs a stacking context of its own: the canvas is absolutely
   positioned to fill it, and the copy has to sit above without either of them
   reaching the sticky nav's layer.
   ------------------------------------------------------------------------ */
.p-hero--lines {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.p-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Decoration. It must never intercept a click meant for the CTA, and it is
     aria-hidden, so nothing inside it can be reached by keyboard either. */
  pointer-events: none;
}

.p-lines__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The copy rides above the canvas. Nothing else in the band needs a layer. */
.p-hero--lines .p-hero__copy {
  position: relative;
  z-index: 1;
}

/* --- Two washes, both in the page canvas colour -------------------------
   The supplied component ships a `fade` option that lays a radial wash of the
   background over the fan. Both of these are that technique; only the centres
   differ, and because every stop is `--canvas` neither can introduce a tint.

   EDGES. The fan's convergence point sits off-canvas to the upper right, so
   the band shows the middle of very long curves at fairly even density. Only
   the outer edges need settling, where strokes meet the band boundary and the
   cut reads as a hard line. */
.p-hero--lines .p-lines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--canvas) 0%,
    var(--canvas-fade) 14%,
    var(--canvas-fade) 86%,
    var(--canvas) 100%
  );
}

/* BEHIND THE COPY. This one is not decoration, it is the contrast fix.
   Measured: with the fan at full strength the densest ground under the subhead
   reached #B3B3B3, putting --ink-secondary at 3.69 against a 4.5 body floor.
   Dropping the stroke alpha far enough to clear it flattened the effect to
   almost nothing, so instead the fan is held off the copy itself and left at
   full strength everywhere else.

   The ellipse is centred slightly above the band's middle, where the copy
   block actually sits, and is opaque well past the text before it starts to
   fall away, so the transition is never visible as an edge.

   Re-measure with tools/check-a11y.mjs if the stroke alpha, the type scale or
   the band's padding change. Any of the three moves this. */
.p-hero--lines .p-lines::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse 62% 48% at 50% 44%,
    var(--canvas) 0%,
    var(--canvas) 46%,
    var(--canvas-fade) 100%
  );
}

/* With the script blocked the canvas is never sized and paints nothing. The
   band is type on the page canvas, which is what it was before this component
   arrived, so no fallback styling is needed. */

/* ---------------------------------------------------------------------------
   2 · The capabilities functions leave the four-equal-column
   grid, so they no longer rhyme with the AI layer's four cards directly
   beneath (taste-skill §4.7 layout-family repetition, §9.C equal-column
   feature rows).

   Shape: lead-plus-three. The first function takes a full-width cell with
   its line set at lede size; the other three share a row under it. The
   hairline gap technique is unchanged, so the rules still come from the
   grid background showing through 1px gaps rather than from borders.

   Loaded after precision-page.css, so these win on equal specificity.
   ======================================================================== */

@media (min-width: 40em) {
  .p-functions--lead {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* The lead spans the full row; the remaining three fill the row beneath. */
  .p-functions--lead .p-functions__item--lead {
    grid-column: 1 / -1;
  }
}

@media (min-width: 72em) {
  .p-functions--lead {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- The lead cell ------------------------------------------------------
   Wider measure, larger supporting line, more room above and below. It is
   the one capability the blueprint marks CONFIRMED, so the extra weight is
   carrying real information rather than decorating the grid. */
.p-functions--lead .p-functions__item--lead {
  padding-block: var(--s-8);
}

.p-functions--lead .p-functions__item--lead .p-functions__title {
  font-size: var(--text-h2-sm, var(--text-h3));
  max-width: 24ch;
}

.p-functions--lead .p-functions__item--lead .p-functions__line {
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
  color: var(--ink-secondary);
  max-width: 62ch;
}

/* --- Padding rules, restated for a 3-column row -------------------------
   precision-page.css keys its inline padding off :first-child and
   :last-child at 4 columns. With the lead spanning the row, the edge cells
   are different elements, so the rules are restated here rather than
   inherited into the wrong places. */
@media (min-width: 40em) {
  .p-functions--lead .p-functions__item { padding-inline: var(--s-6); }
  .p-functions--lead .p-functions__item--lead { padding-inline: 0 var(--s-6); }
  /* first of the three-across row */
  .p-functions--lead .p-functions__item--lead + .p-functions__item {
    padding-inline: 0 var(--s-6);
  }
  .p-functions--lead .p-functions__item:last-child {
    padding-inline: var(--s-6) 0;
  }
}