/* ==========================================================================
   Curiosity — Blend: the brand, with sections from the other styles
   --------------------------------------------------------------------------
   One exploratory style (CLAUDE.md §8) put together section by section from
   the ones before it, on the brand's own palette. Nothing here names a color
   the brand does not have: paper, stone, ink, slate, ash, ink-2, the Signal
   #2F6BFF and the call's deep blue #0029E7. What changes is how freely the
   two blues are spent.

     hero              the first screen and nothing else: the headline in a
                       big cell, the lede in a stone cell beside it, the
                       brand's square field on ink under it, the spec strip
                       as a column of cells; after Mistral's hero, on the
                       brand's grammar
     page bands        the brand's dash field
     Studio steps      Blocks: a staircase, ink, deep blue, stone
     problem           the brand
     in production     the brand's dark canvas, with Blocks' staggered
                       cards: paper, deep blue, slate
     flow              the brand, each drawing on a plate: the square field,
                       two dash tiles
     Studio + devs     Mosaic: panels as tiles on stone, dash patterns in
                       the textures, Developers on the deep blue
     solutions         Sheet's rows: glyph, title, text, the link as a pill
     why               the brand
     industries        Mosaic: a dash tile per industry, in five surfaces,
                       no icons; each industry page's hero draws its own
     security          the brand's pixel window, a Mosaic dash mountain in it
     call, footer      the brand
     Blend Rows, Split the same style with another hero (data-hero): the
                       copy in a row, the details, the dash field on ink

   One eyebrow mark runs through every section (Blocks' two squares, the
   Escape mark in miniature), so the borrowed sections read as one site;
   the two big panels go without it. Every surface is a solid color: no dot
   grids, no hatching. The motion is the brand's: the first load is the
   square field (js/intro.js, --intro-kind), and there are no square covers
   and no pixel band (js/motion.js, --px-motion).
   js/decor.js draws the art (PLAN.blend). Every text pairing was measured:
   paper on #0029E7 7.7:1, ink-2 on #0029E7 5.0:1, ink on paper 16.8:1;
   #2F6BFF only sets large type (4.1:1 on paper) and marks.
   ========================================================================== */

[data-style="blend"] {
  --deep: #0029E7;
  --accent: var(--signal); --accent-2: var(--signal);
  --btn: #0029E7; --btn-hover: var(--ink);
  --field-dash: var(--slate);
  --px-tones: #111418, #2F6BFF, #0029E7, #E6E8E8, #F4F4F2;
  --band-tones: #111418, #2A2F38, #0029E7, #2F6BFF, #8A9099, #C5C9CE, #E6E8E8, #F4F4F2;
  --intro-tones: #111418, #2F6BFF, #0029E7, #E6E8E8, #2F6BFF;
  --hover-fill: var(--stone); --grid-img: none;
  --intro-kind: field; --px-motion: none;
}

/* The brand's sections keep the brand's headlines: no counters. */
[data-style="blend"] main .section h2.display--md::before, [data-style="blend"] main .section h2.display--lg::before { content: none; }

/* The one eyebrow mark: a Signal square and a small escaped one. */
[data-style="blend"] .eyebrow { display: flex; align-items: center; gap: .7rem; }
[data-style="blend"] .eyebrow::before {
  content: ""; flex: none; width: 13px; height: 13px;
  background: linear-gradient(var(--signal), var(--signal)) 0 100% / 8px 8px no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 4px 4px no-repeat;
}

/* ==========================================================================
   Hero — the first screen, in cells
   --------------------------------------------------------------------------
   The markup is the brand's (copy, field, spec strip); the wrap becomes the
   grid and the copy dissolves into it (display: contents), so each part
   takes a cell of its own. Wide: the headline large in the left cell, the
   lede and the two pills bottom aligned in a stone cell on the right, the
   square field on ink under the headline, the spec strip as a column of
   cells under the stone. The whole thing is one screen under the masthead.
   ========================================================================== */
[data-style="blend"] .hero > .wrap {
  max-width: none; padding: 0; position: relative;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto minmax(240px, 44svh);
  min-height: calc(100svh - 57px);
}
[data-style="blend"] .hero :is(.hero__grid, .hero__copy) { display: contents; }
/* The stone cell, drawn by the grid itself behind the lede and the pills. */
[data-style="blend"] .hero > .wrap::before { content: ""; grid-column: 2; grid-row: 1 / 4; background: var(--stone); border-left: var(--hair); }
[data-style="blend"] .hero__copy > * { position: relative; z-index: 1; }
[data-style="blend"] .hero__copy .eyebrow { grid-column: 1; grid-row: 1; align-self: start; padding: clamp(1.75rem, 3.4vw, 3rem) var(--gut) 0; }
[data-style="blend"] .hero .display--xl {
  grid-column: 1; grid-row: 2 / 4; align-self: end; margin: 0;
  padding: 2rem var(--gut) clamp(1.75rem, 3.4vw, 3rem);
  font-size: clamp(3rem, 6.6vw, 6.6rem); line-height: .98; letter-spacing: -.045em;
}
[data-style="blend"] .hero .display :is(.red, .blue, .yellow) { color: var(--signal); }
[data-style="blend"] .hero__copy .lede { grid-column: 2; grid-row: 2; align-self: end; max-width: 26em; margin: 0; padding: 2rem var(--gut) 1.6rem; color: var(--ink); font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.35; letter-spacing: -.01em; }
[data-style="blend"] .hero__actions { grid-column: 2; grid-row: 3; padding: 0 var(--gut) clamp(1.75rem, 3.4vw, 3rem); }
[data-style="blend"] .hero__field { grid-column: 1; grid-row: 4; margin: 0; border-top: var(--hair); }
/* The spec strip as a column of cells, each a label over its value. */
[data-style="blend"] .hero__meta { grid-column: 2; grid-row: 4; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0; border-top: var(--hair); border-left: var(--hair); }
[data-style="blend"] .hero__meta span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem; padding: .9rem var(--gut); }
[data-style="blend"] .hero__meta span + span { border-top: var(--hair); }
[data-style="blend"] .hero__meta b { margin-left: 0; }
@media (max-width: 1100px) { [data-style="blend"] .hero > .wrap { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
@media (max-width: 900px) {
  [data-style="blend"] .hero > .wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; }
  [data-style="blend"] .hero > .wrap::before { grid-column: 1; grid-row: 3 / 5; border-left: 0; border-top: var(--hair); }
  [data-style="blend"] .hero__copy .eyebrow { grid-row: 1; }
  [data-style="blend"] .hero .display--xl { grid-row: 2; padding-top: 1.25rem; font-size: clamp(2.5rem, 10.5vw, 4.4rem); }
  [data-style="blend"] .hero__copy .lede { grid-column: 1; grid-row: 3; padding-top: 1.75rem; }
  [data-style="blend"] .hero__actions { grid-column: 1; grid-row: 4; }
  [data-style="blend"] .hero__field { grid-column: 1; grid-row: 5; height: auto; aspect-ratio: 4 / 3; }
  [data-style="blend"] .hero__meta { grid-column: 1; grid-row: 6; border-left: 0; }
}

/* ==========================================================================
   Hero, in rows — Blend Rows and Blend Split (data-hero, CLAUDE.md §8)
   --------------------------------------------------------------------------
   The same markup again, laid out another way. Both: the eyebrow across the
   top, the headline on the left, the lede and the pills on the right with
   the lede's first line on the headline's cap line. Then the details and
   the brand's dash field on ink, which keeps drifting round its Signal
   pixel and follows the pointer (--field-drift, js/field.js).
     rows   the details as a row of four cells, the field a full width band
     split  the details as a list on the left, the field filling the rest
   The headline's second tone is Signal, as in Blend.
   ========================================================================== */
[data-style="blend"][data-hero] .hero > .wrap {
  --h1: clamp(3rem, 5.6vw, 6.2rem);
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
  grid-template-rows: auto auto auto auto minmax(260px, 1fr);
}
[data-style="blend"][data-hero] .hero > .wrap::before { content: none; }
/* The space above the eyebrow and under the pills grows with the screen's
   height, so on a tall screen the paper takes it rather than the field. */
[data-style="blend"][data-hero] .hero__copy .eyebrow { grid-column: 1 / -1; grid-row: 1; padding: clamp(4rem, calc(24svh - 6rem), 12rem) var(--gut) 2.4rem; }
[data-style="blend"][data-hero] .hero .display--xl {
  grid-column: 1 / 3; grid-row: 2 / 4; align-self: start;
  padding: 0 3rem clamp(2rem, 3.4vw, 3rem) var(--gut); font-size: var(--h1);
}
/* The headline's line box starts about .12em above its capitals. */
[data-style="blend"][data-hero] .hero__copy .lede { grid-column: 3; grid-row: 2; align-self: start; padding: calc(var(--h1) * .12) var(--gut) 0 0; }
[data-style="blend"][data-hero] .hero__actions { grid-column: 3; grid-row: 3; align-self: start; padding: 2rem var(--gut) clamp(3rem, calc(14svh - 3rem), 8rem) 0; }
[data-style="blend"][data-hero] .hero__meta {
  grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 0; border-top: var(--hair);
}
[data-style="blend"][data-hero] .hero__meta span { justify-content: flex-start; gap: .55rem; padding: 1.5rem var(--gut) 1.6rem; border-top: 0; }
[data-style="blend"][data-hero] .hero__meta span + span { border-left: var(--hair); }
[data-style="blend"][data-hero] .hero__field { grid-column: 1 / -1; grid-row: 5; height: auto; border-top: 0; }
[data-style="blend"][data-hero] .hero__field .lfield { background: var(--ink); --dash: var(--ash); --field-dot: var(--paper); --field-drift: 1; }
[data-style="blend"][data-hero] .hero__field svg.field > rect:first-child { fill: var(--ink); }
[data-style="blend"][data-hero] .hero__field svg.field > g { stroke: var(--ash); }
/* Split: the details stacked in the first column, the field in the rest. */
[data-style="blend"][data-hero="split"] .hero > .wrap { grid-template-rows: auto auto auto minmax(340px, 1fr); }
[data-style="blend"][data-hero="split"] .hero__meta { grid-column: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); }
[data-style="blend"][data-hero="split"] .hero__meta span { justify-content: center; padding-block: 1rem; }
[data-style="blend"][data-hero="split"] .hero__meta span + span { border-left: 0; border-top: var(--hair); }
[data-style="blend"][data-hero="split"] .hero__field { grid-column: 2 / -1; grid-row: 4; border-top: var(--hair); }
@media (max-width: 900px) {
  [data-style="blend"][data-hero] .hero > .wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  [data-style="blend"][data-hero] .hero__copy .eyebrow { padding-top: clamp(2rem, 3.4vw, 3rem); }
  [data-style="blend"][data-hero] .hero .display--xl { grid-column: 1; grid-row: 2; padding: 0 var(--gut) 1.5rem; font-size: clamp(2.5rem, 10.5vw, 4.4rem); }
  [data-style="blend"][data-hero] .hero__copy .lede { grid-column: 1; grid-row: 3; padding: 0 var(--gut); }
  [data-style="blend"][data-hero] .hero__actions { grid-column: 1; grid-row: 4; padding: 1.5rem var(--gut) 2rem; }
  [data-style="blend"][data-hero] .hero__meta,
  [data-style="blend"][data-hero="split"] .hero__meta { grid-column: 1; grid-row: 5; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  [data-style="blend"][data-hero] .hero__meta span,
  [data-style="blend"][data-hero="split"] .hero__meta span { justify-content: flex-start; padding: 1rem var(--gut); border-left: 0; border-top: 0; }
  [data-style="blend"][data-hero] .hero__meta span:nth-child(even) { border-left: var(--hair); }
  [data-style="blend"][data-hero] .hero__meta span:nth-child(n+3) { border-top: var(--hair); }
  [data-style="blend"][data-hero] .hero__field,
  [data-style="blend"][data-hero="split"] .hero__field { grid-column: 1; grid-row: 6; aspect-ratio: 4 / 3; border-top: 0; }
}

/* The three steps as a staircase, each one wider than the last. */
[data-style="blend"] .hero__steps { border-top: 0; display: grid; gap: 6px; }
[data-style="blend"] .hero__steps li { border-bottom: 0; padding: 1rem; background: var(--stone); }
[data-style="blend"] .hero__steps li:nth-child(1) { width: 64%; background: var(--ink); color: var(--paper); }
[data-style="blend"] .hero__steps li:nth-child(2) { width: 82%; background: var(--deep); color: var(--paper); }
[data-style="blend"] .hero__steps li:nth-child(-n+2) .label { color: var(--ink-2); }

/* ==========================================================================
   In production — the dark canvas, the numbers as staggered cards
   ========================================================================== */
[data-style="blend"] .stats__grid { border: 0; gap: 12px; align-items: start; }
[data-style="blend"] .stats__grid .stat { border: 1px solid var(--paper); background: var(--paper); min-height: 15rem; }
[data-style="blend"] .stats__grid .stat .stat__n { font-family: var(--sans); font-weight: 400; letter-spacing: -.05em; font-size: clamp(3rem, 5.6vw, 5rem); color: var(--ink); }
[data-style="blend"] .stats__grid .stat .stat__d { color: var(--mute-ink); }
[data-style="blend"] .stats__grid .stat:nth-child(2) { margin-top: 3.5rem; background: var(--deep); border-color: var(--deep); }
[data-style="blend"] .stats__grid .stat:nth-child(3) {
  margin-top: 7rem; background: var(--slate); border-color: var(--slate);
}
[data-style="blend"] .stats__grid .stat:nth-child(n+2) .stat__n { color: var(--paper); }
[data-style="blend"] .stats__grid .stat:nth-child(n+2) .stat__d { color: var(--ink-2); }
@media (max-width: 560px) {
  [data-style="blend"] .stats__grid .stat:nth-child(n) { margin-top: 0; min-height: 11rem; }
}

/* ==========================================================================
   Studio and Developers — Mosaic tiles on stone
   ========================================================================== */
[data-style="blend"] #studio-panel { background: var(--stone); }
[data-style="blend"] .panels { border: 0; gap: 10px; }
[data-style="blend"] .panel__texture { height: 200px; border-bottom: 0; }
[data-style="blend"] .panel__texture svg { height: 200px; }
[data-style="blend"] .panel--paper {
  --canvas: var(--deep); background: var(--deep); color: var(--paper); border-left: 0; border-top: 0;
}
[data-style="blend"] .panel--paper :is(.body, .label--soft) { color: var(--ink-2); }
[data-style="blend"] .panel--paper .eyebrow { color: var(--paper); }
/* The two big panels carry their eyebrow plain, without the mark. */
[data-style="blend"] .panel .eyebrow::before { content: none; }
[data-style="blend"] .panel--paper .btn { border-color: var(--paper); color: var(--paper); background: transparent; }
[data-style="blend"] .panel--paper .btn:hover { background: var(--paper); color: var(--deep); }
[data-style="blend"] .panel--paper :focus-visible { outline-color: var(--paper); }

/* ==========================================================================
   Industries — a Mosaic dash tile per industry
   ========================================================================== */
[data-style="blend"] .ind__fig { border-bottom: 0; }
[data-style="blend"] .ind__icon { display: none; }
/* An industry page: the headline's second tone in Signal, as in the hero,
   and the staircase's middle step on the deep blue, as the Studio steps. */
[data-style="blend"] .ihero__copy .display :is(.red, .blue, .yellow) { color: var(--signal); }
[data-style="blend"] .istairs li:nth-child(2) { background: var(--deep); }

/* ==========================================================================
   Solutions — Sheet's rows: glyph, title, text, the link as a pill
   ========================================================================== */
@media (min-width: 821px) {
  [data-style="blend"] #solutions .grid5 { display: block; border: 0; border-top: 1px solid var(--ink); }
  [data-style="blend"] #solutions .grid5 > .sol {
    display: grid; grid-template-columns: 3.5rem minmax(0, 1.15fr) minmax(0, 1fr) 11rem; column-gap: 2rem; align-items: center;
    min-height: 0; padding: 1.6rem 0; border: 0; border-bottom: var(--hair);
  }
  [data-style="blend"] #solutions .grid5 > .sol > * { grid-row: 1; margin: 0; padding: 0; }
  [data-style="blend"] #solutions .sol > .tile__glyph { grid-column: 1; }
  [data-style="blend"] #solutions .sol > h3 { grid-column: 2; font-size: 1.45rem; }
  [data-style="blend"] #solutions .sol > p { grid-column: 3; }
  [data-style="blend"] #solutions .sol > .tlink { grid-column: 4; justify-self: end; }
}
[data-style="blend"] #solutions .sol .tlink { border: 1px solid var(--ink); border-radius: 999px; padding: .55rem .95rem; }
[data-style="blend"] #solutions .sol .tlink::after { display: none; }
[data-style="blend"] #solutions .sol:hover .tlink { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   Security — the brand's pixel window, a dash mountain inside it
   ========================================================================== */
[data-style="blend"] .sec__field { border-color: var(--slate); }

/* ==========================================================================
   Call — the brand's, without the side rules of the paper sections
   ========================================================================== */
[data-style="blend"] .call > .wrap { background: none; }

/* ==========================================================================
   Masthead drop-downs — the live site's menus, in hairline cells
   --------------------------------------------------------------------------
   Solutions, Developers and Resources open a full width panel under the
   masthead: mono column titles with the eyebrow mark, rows of an icon tile,
   the label and a chevron, columns split by hairlines. A row on hover fills
   stone and its tile turns deep blue. No blur and no shadow behind it: the
   page under the panel is veiled in paper instead. js/main.js opens them
   (hover on a wide screen, the chevron toggle, the keyboard) and only while
   this style is on; below 1040px they fold open inside the menu panel.
   ========================================================================== */
[data-style="blend"] .nav__group { display: flex; align-items: stretch; }
[data-style="blend"] .nav__group > a { padding-right: .35rem; border-right: 0; }
[data-style="blend"] .nav__more {
  display: flex; align-items: center; justify-content: center; width: 30px; padding: 0 .75rem 0 .2rem;
  border: 0; border-right: var(--hair); background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color .15s linear;
}
[data-style="blend"] .nav__more .chev { width: 6px; height: 10px; transform: rotate(90deg); transition: transform .15s linear; }
[data-style="blend"] .nav__more[aria-expanded="true"] .chev { transform: rotate(-90deg); }
[data-style="blend"] .nav__group:hover > :is(a, .nav__more),
[data-style="blend"] .nav__group:has(.nav__more[aria-expanded="true"]) > :is(a, .nav__more) { background: var(--stone); }
/* On a page in the group, the chevron shares the link's current state, so
   the stone and the ink rule run under the whole cell, arrow included. */
[data-style="blend"] .nav__group:has(> a[aria-current="page"]) > .nav__more { background: var(--stone); box-shadow: inset 0 -2px 0 var(--ink); }
[data-style="blend"] .nav__more:focus-visible { outline-offset: -3px; }
/* Solutions and Developers have no page: the label is the toggle, one cell,
   set like a link, with the chevron after it. */
[data-style="blend"] .nav__more--label {
  width: auto; gap: .5rem; padding: 0 1.1rem;
  font: inherit; font-size: .94rem; font-weight: 500;
}

[data-style="blend"] .mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-top: var(--hair); border-bottom: var(--hair);
}
/* The veil: the page under an open panel, faded toward paper. */
[data-style="blend"] .mega::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh;
  background: rgba(244, 244, 242, .78); pointer-events: none;
}
[data-style="blend"] .mega__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-style="blend"] .mega__in--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-style="blend"] .mega__col:last-child { border-right: 0; }
[data-style="blend"] .mega__col { padding: 1.6rem var(--gut) 1.8rem; border-right: var(--hair); }
[data-style="blend"] .mega__title {
  margin: 0 0 1rem; font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mute-ink);
}
[data-style="blend"] .mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 22rem; }
[data-style="blend"] .nav .mega a {
  display: flex; align-items: center; gap: .9rem; padding: .35rem .75rem .35rem .35rem;
  border: 0; font-size: .94rem; font-weight: 500; color: var(--ink); text-decoration: none;
}
[data-style="blend"] .nav .mega a:hover, [data-style="blend"] .nav .mega a[aria-current="page"] { background: var(--stone); }
[data-style="blend"] .nav .mega a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--ink); }
[data-style="blend"] .mega__icon {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  background: var(--stone); color: var(--slate); transition: background-color .15s linear, color .15s linear;
}
[data-style="blend"] .mega__icon svg { width: 20px; height: 20px; }
[data-style="blend"] .mega a:hover .mega__icon, [data-style="blend"] .mega a:focus-visible .mega__icon { background: var(--deep); color: var(--paper); }
[data-style="blend"] .mega__label { flex: 1; min-width: 0; }
[data-style="blend"] .mega a .chev { width: 6px; height: 10px; flex: none; color: var(--slate); transition: transform .15s linear; }
[data-style="blend"] .mega a:hover .chev { transform: translateX(3px); color: var(--ink); }
[data-style="blend"] .nav .mega a:focus-visible { outline-offset: -3px; }

@media (max-width: 1040px) {
  [data-style="blend"] .nav.is-open .nav__group { display: grid; grid-template-columns: minmax(0, 1fr) 56px; }
  [data-style="blend"] .nav.is-open .nav__group > a { border-bottom: var(--hair); }
  [data-style="blend"] .nav.is-open .nav__more { width: auto; padding: 0; border-right: 0; border-left: var(--hair); border-bottom: var(--hair); }
  [data-style="blend"] .nav.is-open .nav__group--menu { grid-template-columns: minmax(0, 1fr); }
  [data-style="blend"] .nav.is-open .nav__more--label { justify-content: space-between; padding: 1rem var(--gut); border-left: 0; font-size: 1.1rem; }
  [data-style="blend"] .mega { position: static; grid-column: 1 / -1; border-top: 0; background: var(--paper); }
  [data-style="blend"] .mega::after { content: none; }
  [data-style="blend"] .mega__in, [data-style="blend"] .mega__in--2 { grid-template-columns: minmax(0, 1fr); }
  [data-style="blend"] .mega__col { border-right: 0; padding: 1rem var(--gut) .8rem; }
  [data-style="blend"] .mega ul { max-width: none; }
  [data-style="blend"] .mega__col + .mega__col { border-top: var(--hair); }
  [data-style="blend"] .nav.is-open .mega a { padding: .3rem .5rem .3rem .3rem; border-bottom: 0; font-size: 1rem; }
}

/* ==========================================================================
   Flow — each stage's drawing on a plate: the square field on ink, a dash
   tile on stone, a dash tile on the deep blue (js/decor.js, PLAN.blend).
   The plate bleeds to the cell's edges; the drawing stays on top of it with
   its own paper ground cleared, so its cards read against the art.
   ========================================================================== */
[data-style="blend"] .flowstep__fig { margin: -1.3rem -1.3rem 0; padding: 1.3rem; }
[data-style="blend"] .flowstep__fig svg { display: block; }
[data-style="blend"] .flowsteps .flowstep__fig.has-dc > svg:not(.dc) { visibility: visible; position: relative; z-index: 2; }
[data-style="blend"] .flowstep__fig.has-dc > svg > rect:first-of-type { fill: transparent; }

/* ==========================================================================
   Customer stories index (site/pages/customer-stories.js)
   --------------------------------------------------------------------------
   Every tile draws its story's own drawing (js/decor.js, STORY_TILES,
   keyed by data-story), the same one as in the story pages' More stories.
   ========================================================================== */
[data-style="blend"] .stile:hover .stile__go { background: var(--deep); border-color: var(--deep); }
[data-style="blend"] .stile__fig { border-bottom: 0; }

/* ==========================================================================
   Pricing — Enterprise on the deep blue, as the Developers panel and the
   second number card are; the headline takes the Signal second tone of the
   Rows hero, beside its field's pixel.
   ========================================================================== */
[data-style="blend"] .pcell--feature { --canvas: var(--deep); background: var(--deep); border-color: var(--deep); }
[data-style="blend"] .pcell--feature .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
[data-style="blend"] .prhero__h :is(.red, .blue, .yellow) { color: var(--signal); }
[data-style="blend"] .prhero__eyebrow { color: var(--mute-ink); }

/* ==========================================================================
   Developer overview (site/pages/developers.js) — the headline's second
   tone is Signal, as in the Rows hero; icon tiles fill deep blue on hover,
   as the drop-down's do.
   ========================================================================== */
[data-style="blend"] .dvhero__h :is(.red, .blue, .yellow) { color: var(--signal); }
[data-style="blend"] .dvrow:hover .dvrow__icon { background: var(--deep); color: #F4F4F2; }
[data-style="blend"] .dvrow:hover .dvrow__go { background: var(--deep); border-color: var(--deep); color: #F4F4F2; }

/* ==========================================================================
   Customer stories — the headline's second tone is Signal, as on pricing.
   ========================================================================== */
[data-style="blend"] .sbhero__h :is(.red, .blue, .yellow) { color: var(--signal); }
/* The conversion pages (site/pages/convert.js): the headline's
   second tone is Signal, as in the Rows hero. */
[data-style="blend"] .cvtile--head .display :is(.red, .blue, .yellow) { color: var(--signal); }