/* ==========================================================================
   Curiosity — the image-led styles (round two of the style switch)
   --------------------------------------------------------------------------
   Three more exploratory styles, each following one group of the reference
   images closely rather than the brief in general. They sit on everything
   in css/styles-alt.css that is shared ([data-alt]: white paper, the figure
   remap, the word rise, the square covers, the stepped hover, the counters)
   and add their own art, drawn by js/decor.js in place of the brand's field.

     mosaic     square tiles on a gray gutter, black, electric blue and gray,
                grids of short vertical dashes that form shapes and charts
     contour    pale blue cards of dense flow lines, editorial two column
                heads with the label on the left, light type
     blocks     big squares stacked on a cell grid over a dot grid,
                staircases, staggered hatched cards, one sentence to a line

   Every text pairing was measured to 4.5:1 (3:1 for large type).
   ========================================================================== */

/* --- the art: js/decor.js draws into a host, then marks it has-dc --------- */
.has-dc { position: relative; }
.has-dc > :not(.dc):not(.ind__icon):not(.pxd):not(.stiles__logo) { visibility: hidden; }
.has-dc > .ind__icon { z-index: 2; }
.dc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
:root:not([data-alt]) .dc { display: none; }
@media print { .dc { display: none !important; } .has-dc > * { visibility: visible !important; } }

/* A sentence break a headline can take (js/motion.js marks it). */
.w-br { display: none; }

/* ==========================================================================
   Mosaic — the page as square tiles on a gray gutter
   ========================================================================== */
[data-style="mosaic"] {
  --paper: #FFFFFF; --stone: #EEEFF3; --line-c: #E2E3E8; --gutter: #D5D7DD;
  --ink: #0B0B0D; --slate: #2A2C33; --ash: #8D9099; --mute: #6A6E78; --mute-ink: #585B64; --ink-2: #C9CBD1;
  --signal: #2E3CF5; --accent: #2E3CF5; --accent-2: #8A93FF; --soft: #E4E6FF;
  --blue: #2E3CF5; --blue-deep: #0B0B0D; --on-blue-2: #E4E6FF;
  --btn: #0B0B0D; --btn-hover: #2E3CF5; --field-dash: #0B0B0D;
  --f-slate: #0B0B0D; --f-ash: #8A93FF;
  --px-tones: #0B0B0D, #2E3CF5, #2E3CF5, #8A93FF, #EEEFF3;
  --band-tones: #0B0B0D, #2E3CF5, #8A93FF, #EEEFF3;
  --intro-tones: #0B0B0D, #2E3CF5, #EEEFF3, #FFFFFF, #2E3CF5;
  --hover-fill: #EEEFF3; --grid-img: none;
  --counter: currentColor;
}
[data-style="mosaic"] body { background: var(--gutter); }
[data-style="mosaic"] main { display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 0; }
[data-style="mosaic"] main > * { border-top: 0; background: #FFFFFF; }
[data-style="mosaic"] .foot { margin: 10px; border-top: 0; }
[data-style="mosaic"] .pxband { display: none !important; }
[data-style="mosaic"] :is(.hero-build, #problem, #studio-panel, #industries) { background: var(--stone); }
[data-style="mosaic"] main > .section:nth-of-type(even):not(.section--dark):not(.sec):not(.call):not(.proof) { background: var(--stone); }
[data-style="mosaic"] :is(.section--dark, .sec) { background: var(--ink); }
[data-style="mosaic"] .plate { background: transparent; }
/* Titles regular and tight; the second tone is a gray, as on the boards. */
[data-style="mosaic"] .display { font-weight: 400; letter-spacing: -.045em; }
[data-style="mosaic"] .display--xl { font-size: clamp(2.8rem, 5.2vw, 4.7rem); line-height: 1; }
[data-style="mosaic"] .display--lg { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1; }
[data-style="mosaic"] .display--md { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.02; }
[data-style="mosaic"] .display :is(.red, .blue, .yellow) { color: #7E828C; }
[data-style="mosaic"] :is(.section--dark, .sec) .display :is(.red, .blue, .yellow) { color: var(--ash); }
[data-style="mosaic"] main .section h2.display--md::before, [data-style="mosaic"] main .section h2.display--lg::before {
  content: counter(sec, decimal-leading-zero) / ""; font-size: .95rem; font-weight: 400; margin-bottom: 1.1rem;
}
[data-style="mosaic"] .eyebrow { color: var(--ink); }
[data-style="mosaic"] .eyebrow::before { content: "<>" / ""; margin-right: .7em; }
[data-style="mosaic"] :is(.section--dark, .sec, .panel--dark, .proof, .call) .eyebrow { color: #FFFFFF; }
[data-style="mosaic"] .stat .stat__n { font-family: var(--sans); font-weight: 400; letter-spacing: -.05em; font-size: clamp(3rem, 5.6vw, 5.2rem); }
[data-style="mosaic"] .trust__logo { background-color: var(--ink); }
[data-style="mosaic"] .tile__glyph, [data-style="mosaic"] .case__glyph { color: var(--accent); }
[data-style="mosaic"] .ind__icon { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); }
[data-style="mosaic"] .phero__band { border-top: 0; }
/* The hero field becomes a two by two mosaic of pattern tiles. */
[data-style="mosaic"] .hero__field { margin-left: 0; }
.dc-mosaic { inset: 24px 0; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dc-tile { position: relative; overflow: hidden; min-height: 0; }
.dc-tile > .dc { inset: 0 0 40px 0; height: calc(100% - 40px); }
.dc-tile__cap { position: absolute; left: 14px; bottom: 14px; z-index: 2; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
@media (max-width: 900px) {
  [data-style="mosaic"] .hero__field { height: auto; aspect-ratio: 1; margin-inline: 0; }
  .dc-mosaic { inset: 0 0 24px; }
}

/* ==========================================================================
   Contour — flow line cards and editorial columns
   ========================================================================== */
[data-style="contour"] {
  --paper: #FFFFFF; --stone: #EEF2F6; --pale: #BCD0E6; --cool: #C3C9CF; --line-c: #D8DEE5;
  --ink: #111416; --slate: #2E3440; --ash: #8C96A3; --mute: #5F6773; --mute-ink: #515966; --ink-2: #C8D2DE;
  --signal: #2F6BFF; --accent: #4A6E96; --accent-2: #9FB4CC; --soft: #EEF2F6;
  --blue: #4A6E96; --blue-deep: #111416; --on-blue-2: #EEF2F6;
  --btn: #111416; --btn-hover: #4A6E96; --field-dash: #4A6E96;
  --f-slate: #4A6E96; --f-ash: #9FB4CC;
  --px-tones: #BCD0E6, #FFFFFF, #C3C9CF, #EEF2F6;
  --intro-tones: #BCD0E6, #C3C9CF, #FFFFFF, #EEF2F6, #4A6E96;
  --hover-fill: var(--stone); --grid-img: none;
}
[data-style="contour"] .pxband { display: none !important; }
[data-style="contour"] .display { font-weight: 400; letter-spacing: -.035em; }
[data-style="contour"] .display--xl { font-size: clamp(2.6rem, 5.4vw, 4.8rem); line-height: 1.04; }
[data-style="contour"] .display :is(.red, .blue, .yellow) { color: var(--accent); }
[data-style="contour"] main .section h2.display--md::before, [data-style="contour"] main .section h2.display--lg::before { content: none; }
/* The hero's meta strip moves to the top, as a row of labeled columns. */
[data-style="contour"] .hero > .wrap { display: flex; flex-direction: column; }
[data-style="contour"] .hero__meta {
  order: -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2rem;
  border-top: 0; border-bottom: 1px solid var(--ink); padding: 1.6rem 0 1.4rem;
}
[data-style="contour"] .hero__meta span { display: flex; flex-direction: column; gap: .35rem; font-family: var(--sans); font-size: .75rem; color: var(--ink); }
[data-style="contour"] .hero__meta b { margin: 0; font-family: var(--sans); font-weight: 400; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--slate); }
@media (max-width: 700px) { [data-style="contour"] .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Section heads in two columns under a rule: the label left, the rest right. */
[data-style="contour"] :is(.problem__head, .flow__head > div, .sechead > div, .phero__copy) {
  display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem);
  align-content: start; border-top: 1px solid currentColor; padding-top: 1.3rem; max-width: none;
}
[data-style="contour"] :is(.problem__head, .flow__head > div, .sechead > div, .phero__copy) > * { grid-column: 2; }
[data-style="contour"] :is(.problem__head, .flow__head > div, .sechead > div, .phero__copy) > .eyebrow {
  grid-column: 1; grid-row: 1 / span 4; margin: 0; padding-top: .35rem;
  font-family: var(--sans); font-size: 1rem; letter-spacing: 0; text-transform: none; color: inherit;
}
[data-style="contour"] :is(.sechead, .flow__head) > div { flex: 1 1 32rem; }
@media (max-width: 700px) {
  [data-style="contour"] :is(.problem__head, .flow__head > div, .sechead > div, .phero__copy) { grid-template-columns: minmax(0, 1fr); }
  [data-style="contour"] :is(.problem__head, .flow__head > div, .sechead > div, .phero__copy) > * { grid-column: 1; }
  [data-style="contour"] :is(.problem__head, .flow__head > div, .sechead > div, .phero__copy) > .eyebrow { grid-row: auto; margin-bottom: 1rem; }
}
/* Cases and reasons read as name and narrative, each under its own rule. */
[data-style="contour"] .cards3 { border: 0; gap: 2rem; }
[data-style="contour"] .case { border-right: 0; border-bottom: 0; border-top: 1px solid var(--ink); padding: 1.2rem 0 0; }
[data-style="contour"] .reasons { border-top: 0; }
[data-style="contour"] .why__in > div:first-child { border-top: 1px solid currentColor; padding-top: 1.3rem; }
[data-style="contour"] .why__in .eyebrow { font-family: var(--sans); font-size: 1rem; letter-spacing: 0; text-transform: none; color: inherit; }
[data-style="contour"] .reason { border-bottom: 0; border-top: 1px solid currentColor; }
/* Surfaces: proof on the pale card blue, why on the cool gray, both light;
   security is the one dark band. */
[data-style="contour"] .section--dark {
  --canvas: var(--cool); --hair: 1px solid #A3ABB4; --line: 1px solid #A3ABB4; --f-paper: var(--cool); --f-stone: var(--cool);
  background: var(--cool); color: var(--ink); border-top-color: var(--cool);
}
[data-style="contour"] .proof { --canvas: var(--pale); --hair: 1px solid #9FB3CB; --line: 1px solid #9FB3CB; --f-paper: var(--pale); --f-stone: var(--pale); background: var(--pale); border-top-color: var(--pale); }
[data-style="contour"] .section--dark :is(.body, .stat__d, .reason p, .proof__note blockquote, .eyebrow, .label--soft, .label, .reason__k) { color: #3A4250; }
[data-style="contour"] .section--dark :is(.stat .stat__n, .proof__co, .proof__noteco) { color: var(--ink); }
[data-style="contour"] .section--dark .btn--ghost { border-color: var(--ink); color: var(--ink); }
[data-style="contour"] .section--dark .btn--ghost:hover { background: rgba(255, 255, 255, .5); }
[data-style="contour"] .section--dark .proof__link { border-bottom-color: var(--ink); }
[data-style="contour"] .section--dark :focus-visible { outline-color: var(--ink); }
[data-style="contour"] .sec, [data-style="contour"] .sec__item { background: #15181C; }
[data-style="contour"] .sec { --ink: #15181C; }
[data-style="contour"] .call { background: var(--pale); }
[data-style="contour"] .call :is(.call__kicker, .badge span) { color: #3A4250; }
[data-style="contour"] .panel--paper { background: var(--stone); }
[data-style="contour"] .stat .stat__n { font-family: var(--sans); font-weight: 400; letter-spacing: -.04em; font-size: clamp(2.8rem, 5vw, 4.4rem); }
[data-style="contour"] .trust__logo { background-color: var(--mute); }
[data-style="contour"] .tile__glyph, [data-style="contour"] .case__glyph { color: var(--accent); }
/* The hero: two cards of flow lines, the name set in the corner of each. */
[data-style="contour"] .hero__field { margin-left: 0; }
.dc-cards { inset: 28px 0; height: auto; display: grid; grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; }
.dc-card { position: relative; overflow: hidden; min-height: 0; }
.dc-card--pale { background: var(--pale, #BCD0E6); }
.dc-card--white { background: #FFFFFF; border: 1px solid var(--line-c); margin-left: 18%; }
.dc-card__name { position: absolute; right: 18px; bottom: 14px; z-index: 2; font-weight: 500; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.dc-card--white .dc-card__name { font-size: 1rem; font-weight: 400; }
@media (max-width: 900px) {
  [data-style="contour"] .hero__field { height: auto; aspect-ratio: 4 / 3; margin-inline: 0; }
  .dc-cards { inset: 0 0 20px; }
}

/* ==========================================================================
   Blocks — squares stacked on a cell grid, staircases, one sentence a line
   ========================================================================== */
[data-style="blocks"] {
  --paper: #FFFFFF; --stone: #F2F3F5; --g1: #E6E8EB; --g2: #D5D8DD; --line-c: #E3E5E9;
  --ink: #0C0D10; --slate: #2B2E36; --ash: #8A8F99; --mute: #666B75; --mute-ink: #555A64; --ink-2: #C9CCD3;
  --signal: #2F55FF; --accent: #2F55FF; --accent-2: #A8BEFF; --sky: #A8BEFF; --soft: #E3E9FF;
  --blue: #2F55FF; --blue-deep: #0C0D10; --on-blue-2: #EEF2FF;
  --btn: #2F55FF; --btn-hover: #0C0D10; --field-dash: #2F55FF;
  --f-slate: #2F55FF; --f-ash: #A8BEFF;
  --px-tones: #0C0D10, #2F55FF, #A8BEFF, #E6E8EB, #FFFFFF;
  --band-tones: #0C0D10, #2B2E36, #2F55FF, #A8BEFF, #D5D8DD, #E6E8EB, #FFFFFF;
  --intro-tones: #2F55FF, #A8BEFF, #0C0D10, #E6E8EB, #2F55FF;
  --hover-fill: #E3E9FF;
  --grid-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='11' y='11' width='2' height='2' fill='%23BFC3CA'/%3E%3C/svg%3E");
  --grid-size: 24px 24px;
}
[data-style="blocks"] .display { font-weight: 400; letter-spacing: -.045em; }
[data-style="blocks"] .display--xl { font-size: clamp(2.8rem, 5.2vw, 4.7rem); line-height: 1; }
[data-style="blocks"] .display--lg { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.02; }
[data-style="blocks"] .display :is(.red, .blue, .yellow) { color: var(--accent); }
/* One sentence to a line, as the reference sets it: "Pricing. Built." */
[data-style="blocks"] .display .w-br { display: block; height: 0; }
[data-style="blocks"] .eyebrow { display: flex; align-items: center; gap: .7rem; color: var(--ink); }
[data-style="blocks"] .eyebrow::before {
  content: ""; flex: none; width: 13px; height: 13px;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 8px 8px no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 4px 4px no-repeat;
}
[data-style="blocks"] :is(.section--dark, .sec, .panel--dark, .call) .eyebrow { color: #FFFFFF; }
[data-style="blocks"] .hero__field { margin-left: 0; }
/* The Studio steps as a staircase, each step a gray lighter and taller. */
[data-style="blocks"] .hero__steps { border-top: 0; display: grid; gap: 6px; }
[data-style="blocks"] .hero__steps li { border-bottom: 0; padding: 1rem 1rem; background: var(--g1); }
[data-style="blocks"] .hero__steps li:nth-child(1) { width: 64%; background: var(--ink); color: var(--paper); }
[data-style="blocks"] .hero__steps li:nth-child(1) .label { color: var(--ink-2); }
[data-style="blocks"] .hero__steps li:nth-child(2) { width: 82%; background: var(--g2); }
[data-style="blocks"] .flowsteps { border: 0; gap: 8px; align-items: end; }
[data-style="blocks"] .flowstep { border: 0; }
[data-style="blocks"] .flowstep:nth-child(1) { background: var(--g2); }
[data-style="blocks"] .flowstep:nth-child(2) { background: var(--g1); padding-top: 4rem; }
[data-style="blocks"] .flowstep:nth-child(3) { background: var(--stone); padding-top: 8rem; }
[data-style="blocks"] .flowstep .flowstep__k { font-family: var(--sans); font-size: 1.5rem; letter-spacing: -.02em; text-transform: none; color: var(--ink); }
[data-style="blocks"] .flowstep:nth-child(1) p { color: var(--slate); }
@media (max-width: 900px) { [data-style="blocks"] .flowstep:nth-child(n) { padding-top: 1.3rem; } }
[data-style="blocks"] .reason:nth-child(2) { margin-left: 1.5rem; }
[data-style="blocks"] .reason:nth-child(3) { margin-left: 3rem; }
[data-style="blocks"] .reason:nth-child(4) { margin-left: 4.5rem; }
@media (max-width: 560px) { [data-style="blocks"] .reason:nth-child(n) { margin-left: 0; } }
/* Numbers as staggered cards: the first open, the others hatched ink. */
[data-style="blocks"] .stats__grid { border: 0; gap: 12px; align-items: start; }
[data-style="blocks"] .stats__grid .stat { border: 1px solid var(--ink); background: #FFFFFF; min-height: 15rem; }
[data-style="blocks"] .stats__grid .stat:nth-child(n+2) {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 16px), var(--ink);
  border-color: var(--ink);
}
[data-style="blocks"] .stats__grid .stat:nth-child(n+2) .stat__n { color: #FFFFFF; }
[data-style="blocks"] .stats__grid .stat:nth-child(n+2) .stat__d { color: var(--ink-2); }
[data-style="blocks"] .stats__grid .stat:nth-child(2) { margin-top: 3.5rem; }
[data-style="blocks"] .stats__grid .stat:nth-child(3) { margin-top: 7rem; }
@media (max-width: 560px) { [data-style="blocks"] .stats__grid .stat:nth-child(n) { margin-top: 0; } }
[data-style="blocks"] .stat .stat__n { font-family: var(--sans); font-weight: 400; letter-spacing: -.05em; font-size: clamp(3rem, 5.6vw, 5rem); }
/* Proof sits on light stone here, so the hatched cards carry the dark. */
[data-style="blocks"] .proof {
  --canvas: var(--stone); --hair: 1px solid var(--g2); --line: 1px solid var(--g2); --f-paper: var(--stone); --f-stone: var(--stone);
  background: var(--stone); color: var(--ink); border-top-color: var(--stone);
}
[data-style="blocks"] .proof :is(.body, .proof__note blockquote, .eyebrow, .label--soft, .label) { color: var(--mute-ink); }
[data-style="blocks"] .proof :is(.proof__co, .proof__noteco) { color: var(--ink); }
[data-style="blocks"] .proof .stat:first-child .stat__n { color: var(--ink); }
[data-style="blocks"] .proof .stat:first-child .stat__d { color: var(--mute-ink); }
[data-style="blocks"] .proof .eyebrow { color: var(--ink); }
[data-style="blocks"] .proof .btn--ghost { border-color: var(--ink); color: var(--ink); }
[data-style="blocks"] .proof .btn--ghost:hover { background: #FFFFFF; }
[data-style="blocks"] .proof .proof__link { border-bottom-color: var(--ink); }
[data-style="blocks"] .proof :focus-visible { outline-color: var(--ink); }
[data-style="blocks"] .panel--paper { background: var(--stone); }
[data-style="blocks"] .trust__logo { background-color: var(--slate); }
[data-style="blocks"] .tile__glyph, [data-style="blocks"] .case__glyph { color: var(--accent); }
[data-style="blocks"] .ind__icon { border-color: var(--ink); }

/* ==========================================================================
   Blue surfaces in this round: Mosaic's proof and call, Blocks' call.
   White type; secondary type in the style's pale blue.
   ========================================================================== */
:is([data-style="mosaic"] :is(.proof, .call), [data-style="blocks"] .call) {
  --canvas: var(--blue); --hair: 1px solid rgba(255, 255, 255, .3); --line: 1px solid rgba(255, 255, 255, .3);
  --f-paper: var(--blue); --f-stone: var(--blue); --f-ink: var(--blue); --f-slate: #FFFFFF; --f-ash: var(--on-blue-2); --f-signal: #FFFFFF;
  --hover-fill: rgba(255, 255, 255, .12);
  background: var(--blue); color: #FFFFFF; border-top-color: var(--blue);
}
:is([data-style="mosaic"] :is(.proof, .call), [data-style="blocks"] .call)
  :is(.body, .stat__d, .proof__note blockquote, .label, .label--soft, .call__kicker, .badge span) { color: var(--on-blue-2); }
html :is([data-style="mosaic"] :is(.proof, .call), [data-style="blocks"] .call) h2.display::before { color: var(--on-blue-2); }
:is([data-style="mosaic"] :is(.proof, .call), [data-style="blocks"] .call) :is(.stat .stat__n, .proof__co, .proof__noteco, .badge strong, h2) { color: #FFFFFF; }
:is([data-style="mosaic"] :is(.proof, .call), [data-style="blocks"] .call) :is(.btn, .btn--ghost) { background: transparent; border-color: #FFFFFF; color: #FFFFFF; }
:is([data-style="mosaic"] :is(.proof, .call), [data-style="blocks"] .call) .btn--solid { background: #FFFFFF; border-color: #FFFFFF; color: var(--blue); }
:is([data-style="mosaic"] :is(.proof, .call), [data-style="blocks"] .call) :is(.btn, .btn--ghost, .btn--solid):hover { background: var(--on-blue-2); border-color: var(--on-blue-2); color: var(--blue-deep); }
:is([data-style="mosaic"] :is(.proof, .call), [data-style="blocks"] .call) :focus-visible { outline-color: #FFFFFF; }
:is([data-style="mosaic"] :is(.proof, .call), [data-style="blocks"] .call) .proof__link { border-bottom-color: rgba(255, 255, 255, .6); }
:is([data-style="mosaic"], [data-style="blocks"]) .call .badges { border-top-color: #FFFFFF; }
@media (max-width: 900px) { [data-style="blocks"] .hero__field { height: auto; aspect-ratio: 1; margin-inline: 0; } }