/* ==========================================================================
   Curiosity — the third round of the style switch: new layouts
   --------------------------------------------------------------------------
   The first two rounds recolored one layout. These four change the layout
   itself, each from a group of the reference images, each with its own
   blue and with pink as a second accent. They sit on everything shared in
   css/styles-alt.css ([data-alt]) and on the art hosts of
   css/styles-img.css; js/decor.js draws their art.

     sheet   the site as a white sheet in a black frame, ticks and plus
             marks in the margin; uppercase titles; cards as full width
             rows with pills; ultramarine, hot pink for the call
     night   dark first: the tokens inverted, so the brand's dark sections
             turn light; a grid of white lines over the page; a giant full
             width headline over a lattice of plus signs with a pink x;
             counters on every card
     pastel  white with periwinkle and baby pink; labels run vertically
             down the left margin; pill counters; the solutions as a
             staircase; staggered cards; cobalt and hot pink
     cobalt  the whole page electric blue with white type; content in
             white bento cards of mixed sizes, the first of each grid pink;
             dark sections navy; charts drawn in small squares

   Pink is never body text on white: hot pink measures 3.3:1 (Sheet) and
   4.1:1 (Pastel) there, so it marks, fills and sets large type only.
   Every text pairing below was measured to 4.5:1 (3:1 for large type).
   ========================================================================== */

/* ==========================================================================
   Sheet
   ========================================================================== */
[data-style="sheet"] {
  --paper: #FFFFFF; --stone: #F2F2F4; --line-c: #E1E1E6; --frame-c: #0A0A0C;
  --ink: #0A0A0C; --slate: #26272D; --ash: #8B8D95; --mute: #6A6C74; --mute-ink: #55575F; --ink-2: #C8C9CE;
  --signal: #2B2BE8; --accent: #2B2BE8; --accent-2: #9C9CFF; --soft: #DADAFF;
  --blue: #2B2BE8; --blue-deep: #0A0A0C; --on-blue-2: #DADAFF; --pink: #FF3E9A;
  --btn: #0A0A0C; --btn-hover: #2B2BE8; --field-dash: #0A0A0C;
  --f-slate: #0A0A0C; --f-ash: #FF3E9A;
  --px-tones: #0A0A0C, #2B2BE8, #FF3E9A, #FFFFFF;
  --band-tones: #0A0A0C, #2B2BE8, #6D6DF2, #FF3E9A, #FFD3E6, #FFFFFF;
  --intro-tones: #0A0A0C, #0A0A0C, #2B2BE8, #FFFFFF, #FF3E9A;
  --hover-fill: #FFD3E6; --grid-img: none;
  --fw: clamp(12px, 3.6vw, 52px);
}
[data-style="sheet"] body { background: var(--frame-c); }
[data-style="sheet"] :is(.masthead, main, .foot) { margin-inline: var(--fw); background: #FFFFFF; }
[data-style="sheet"] .masthead { border-bottom-color: var(--ink); }
[data-style="sheet"] body > .pxband { margin-inline: var(--fw); }
/* The frame's own marks: ticks down the left margin, plus signs at the
   corners, chevrons at the foot. Decoration in the margin only. */
[data-style="sheet"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 61; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23FFFFFF' stroke-width='1.5'/%3E%3C/svg%3E") calc(var(--fw) / 2 - 7px) 14px / 14px 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23FFFFFF' stroke-width='1.5'/%3E%3C/svg%3E") calc(100% - var(--fw) / 2 + 7px) 14px / 14px 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23FF3E9A' stroke-width='1.5'/%3E%3C/svg%3E") calc(100% - var(--fw) / 2 + 7px) calc(100% - 70px) / 14px 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='28'%3E%3Crect x='0' y='13' width='10' height='1.5' fill='%23FFFFFF'/%3E%3C/svg%3E") calc(var(--fw) / 2 - 5px) 60px / 10px 28px repeat-y;
}
/* On a phone the frame gives its width back to the column. */
@media (max-width: 620px) { [data-style="sheet"] { --fw: 0px; } [data-style="sheet"] body::before { display: none; } }
/* Titles in capitals, tight, as the rows of a price sheet. */
[data-style="sheet"] .display { text-transform: uppercase; font-weight: 500; letter-spacing: -.02em; line-height: .98; }
[data-style="sheet"] .display--xl { font-size: clamp(2.4rem, 4.4vw, 3.9rem); }
[data-style="sheet"] .display--lg { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
[data-style="sheet"] .display--md { font-size: clamp(1.8rem, 2.9vw, 2.6rem); }
[data-style="sheet"] .display :is(.red, .blue, .yellow) { color: var(--accent); }
[data-style="sheet"] main .section h2.display--md::before, [data-style="sheet"] main .section h2.display--lg::before { color: var(--ink); }
[data-style="sheet"] .eyebrow { color: var(--ink); }
[data-style="sheet"] .eyebrow::before { content: "***" / ""; color: var(--pink); margin-right: .7em; letter-spacing: .12em; }
[data-style="sheet"] :is(.section--dark, .sec, .panel--dark, .proof) .eyebrow { color: #FFFFFF; }
[data-style="sheet"] .btn { font-family: var(--mono); font-size: .78rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; padding: .8rem 1.3rem; }
[data-style="sheet"] .btn--sm { padding: .55rem 1rem; font-size: .72rem; }
/* Tags are black pills. */
[data-style="sheet"] .chiprow { border-left: 0; gap: 8px; }
[data-style="sheet"] .chiprow li { border: 0; border-radius: 999px; background: var(--ink); color: #FFFFFF; padding: .5rem .9rem; }
/* Cards become rows: number, title, description, and the link as a pill. */
@media (min-width: 821px) {
  [data-style="sheet"] :is(.cardgrid, .grid5, .cards3) { display: block; border: 0; border-top: 1px solid var(--ink); }
  [data-style="sheet"] :is(.cardgrid, .grid5, .cards3) > * {
    display: grid; grid-template-columns: 3rem minmax(0, 1.15fr) minmax(0, 1fr) 11rem; column-gap: 2rem; align-items: start;
    min-height: 0; padding: 1.7rem 0; border: 0; border-bottom: 1px solid var(--line-c);
  }
  [data-style="sheet"] :is(.cardgrid, .grid5, .cards3) > * > * { grid-row: 1; margin: 0; padding: 0; }
  [data-style="sheet"] :is(.cardgrid, .grid5) > * > .tile__glyph { grid-column: 1; }
  [data-style="sheet"] :is(.cardgrid, .grid5) > * > h3 { grid-column: 2; }
  [data-style="sheet"] :is(.cardgrid, .grid5) > * > p { grid-column: 3; }
  [data-style="sheet"] :is(.cardgrid, .grid5) > * > .tlink { grid-column: 4; justify-self: end; }
  [data-style="sheet"] :is(.cardgrid, .grid5) > * > h3, [data-style="sheet"] .cards3 .case h3 { text-transform: uppercase; font-size: 1.45rem; letter-spacing: -.01em; }
  [data-style="sheet"] .cards3 .case > .case__no { grid-column: 1; }
  [data-style="sheet"] .cards3 .case > h3 { grid-column: 2; }
  [data-style="sheet"] .cards3 .case > p { grid-column: 3; }
  [data-style="sheet"] .cards3 .case > .case__px { grid-column: 4; justify-self: end; max-width: 7rem; }
}
[data-style="sheet"] :is(.sol, .tile) .tlink { border: 1px solid var(--ink); border-radius: 999px; padding: .55rem .95rem; }
[data-style="sheet"] :is(.sol, .tile) .tlink::after { display: none; }
[data-style="sheet"] .stat .stat__n { font-family: var(--sans); font-weight: 500; letter-spacing: -.04em; font-size: clamp(3rem, 5.4vw, 5rem); }
[data-style="sheet"] .trust__logo { background-color: var(--ink); }
[data-style="sheet"] .tile__glyph, [data-style="sheet"] .case__glyph { color: var(--accent); }
[data-style="sheet"] .ticks li::before, [data-style="sheet"] .plan__list li::before, [data-style="sheet"] .chip::before, [data-style="sheet"] .faq summary::before { background: var(--pink); }
[data-style="sheet"] .hero__field { margin-left: 0; }
/* Surfaces: proof ultramarine, the call hot pink with ink type. */
[data-style="sheet"] .proof {
  --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);
  background: var(--blue); color: #FFFFFF; border-top-color: var(--blue);
}
[data-style="sheet"] .proof :is(.body, .stat__d, .proof__note blockquote, .label, .label--soft) { color: var(--on-blue-2); }
[data-style="sheet"] .proof :is(.stat .stat__n, .proof__co, .proof__noteco) { color: #FFFFFF; }
html [data-style="sheet"] main .proof h2.display::before, [data-style="sheet"] main .proof h2.display--md::before { color: var(--on-blue-2); }
[data-style="sheet"] .proof .btn--ghost { border-color: #FFFFFF; }
[data-style="sheet"] .proof .btn--ghost:hover { background: #FFFFFF; color: var(--blue); }
[data-style="sheet"] .proof :focus-visible { outline-color: #FFFFFF; }
[data-style="sheet"] .call { background: var(--pink); --f-stone: var(--pink); --f-paper: var(--pink); --hover-fill: #FFFFFF; }
[data-style="sheet"] .call :is(.call__kicker, .badge span) { color: var(--slate); }
[data-style="sheet"] .call .badges { border-top-color: var(--ink); }
[data-style="sheet"] .call .badge + .badge { border-left-color: rgba(10, 10, 12, .25); }
[data-style="sheet"] .call .btn:not(.btn--solid):hover { background: #FFFFFF; }
[data-style="sheet"] main .call h2.display::before { color: var(--ink); }

/* ==========================================================================
   Night — dark first. The tokens are inverted: paper is the night, ink is
   the light, so everything the brand draws dark here draws light, and the
   brand's dark sections (proof, why, security) become the light ones.
   ========================================================================== */
[data-style="night"] {
  --paper: #0A0E1A; --stone: #111733; --line-c: #1F2742;
  --ink: #F2F4FA; --slate: #C5CCE0; --ash: #6E7897; --mute: #8C97B5; --mute-ink: #97A2C0; --ink-2: #3A4462;
  --signal: #FF6FB5; --accent: #4D7CFF; --accent-2: #2D4BD8; --soft: #1A2447; --ice: #A9C2FF; --pink: #FF6FB5;
  --blue: #4D7CFF; --blue-deep: #0A0E1A; --on-blue-2: #E4EBFF;
  --btn: #F2F4FA; --btn-hover: #A9C2FF; --btn-ink: #0A0E1A; --field-dash: #A9C2FF;
  --f-white: #121934; --f-slate: #A9C2FF; --f-ash: #4D7CFF; --f-signal: #FF6FB5;
  --counter: #FF6FB5; --counter-dark: #2D4BD8;
  --px-tones: #0A0E1A, #1A2447, #4D7CFF, #FF6FB5, #F2F4FA;
  --band-tones: #0A0E1A, #111733, #1A2447, #2D4BD8, #4D7CFF, #A9C2FF, #FF6FB5;
  --intro-tones: #0A0E1A, #111733, #1A2447, #4D7CFF, #FF6FB5;
  --hover-fill: #111733;
  --grid-img: linear-gradient(rgba(242, 244, 250, .07) 1px, transparent 1px);
  --grid-size: 100% 120px;
  color-scheme: dark;
}
/* Six column rules down the page, on the container. */
[data-style="night"] body::before {
  content: ""; position: fixed; top: 0; bottom: 0; left: 50%; z-index: -1; pointer-events: none;
  width: min(100%, var(--max)); transform: translateX(-50%); padding-inline: var(--gut);
  background-image: repeating-linear-gradient(to right, rgba(242, 244, 250, .07) 0 1px, transparent 1px calc((100% + 24px) / 6));
  background-origin: content-box; background-clip: content-box;
  border-right: 1px solid rgba(242, 244, 250, .07);
}
[data-style="night"] .masthead { border-bottom-color: rgba(242, 244, 250, .14); }
/* The hero: one giant headline across the whole width, the lattice under it. */
[data-style="night"] .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; }
[data-style="night"] .hero__copy { grid-column: 1; padding-bottom: 2.5rem; }
[data-style="night"] .hero h1.display--xl { font-size: clamp(2.6rem, 7.2vw, 7.2rem); text-transform: uppercase; letter-spacing: -.045em; line-height: .9; max-width: none; }
[data-style="night"] .hero .lede { max-width: 46ch; }
[data-style="night"] .hero__field { grid-column: 1; height: clamp(220px, 26vw, 340px); margin: 0 calc(-1 * var(--gut)); }
[data-style="night"] .display { letter-spacing: -.035em; }
[data-style="night"] .display :is(.red, .blue, .yellow) { color: var(--accent); }
[data-style="night"] :is(.section--dark, .sec, .panel--dark) .display :is(.red, .blue, .yellow) { color: var(--accent-2); }
[data-style="night"] .eyebrow { color: var(--ice); }
[data-style="night"] :is(.section--dark, .sec, .panel--dark, .plan--feature) :is(.eyebrow, .label--soft, .reason__k, .sec__kicker) { color: #4A5372; }
[data-style="night"] .stat .stat__n { font-family: var(--sans); font-weight: 400; letter-spacing: -.05em; font-size: clamp(3rem, 6vw, 5.6rem); }
/* Every card carries its number, top right, in pink. */
[data-style="night"] :is(.grid5, .cardgrid, .inds, .cards3) { counter-reset: card; }
[data-style="night"] :is(.grid5, .cardgrid, .inds, .cards3) > * { counter-increment: card; position: relative; }
[data-style="night"] :is(.grid5, .cardgrid) > *::before, [data-style="night"] .inds > * > h3::after {
  content: "(" counter(card, decimal-leading-zero) ")" / "";
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--pink);
}
[data-style="night"] :is(.grid5, .cardgrid) > *::before { position: absolute; top: 1.4rem; right: 1.4rem; }
[data-style="night"] .inds > * > h3::after { margin-left: .6rem; }
[data-style="night"] .trust__logo { background-color: #B8C1DA; }
[data-style="night"] .trust__cell { background: transparent; }
[data-style="night"] .tile__glyph, [data-style="night"] .case__glyph { color: var(--ice); }
[data-style="night"] .ind__icon { background: var(--paper); border-color: var(--ink); color: var(--ink); }
[data-style="night"] .ticks li::before, [data-style="night"] .plan__list li::before, [data-style="night"] .chip::before, [data-style="night"] .faq summary::before { background: var(--pink); }
[data-style="night"] .plan__flag { background: var(--pink); }
[data-style="night"] .foot { background: var(--paper); }
[data-style="night"] #sudo-track { background: rgba(242, 244, 250, .12); }

/* ==========================================================================
   Pastel
   ========================================================================== */
[data-style="pastel"] {
  --paper: #FFFFFF; --stone: #F5F6FF; --peri: #D9DFFF; --baby: #FFDCEB; --line-c: #E3E6F5;
  --ink: #14162B; --slate: #2E3252; --ash: #9096B8; --mute: #6B7094; --mute-ink: #585D80; --ink-2: #CDD2EE;
  --signal: #E8307F; --accent: #3343E0; --accent-2: #9DA6FF; --soft: #D9DFFF; --pink: #E8307F;
  --blue: #3343E0; --blue-deep: #14162B; --on-blue-2: #E6E9FF;
  --btn: #3343E0; --btn-hover: #14162B; --field-dash: #3343E0;
  --f-slate: #3343E0; --f-ash: #E8307F;
  --counter: var(--ink);
  --px-tones: #D9DFFF, #FFDCEB, #3343E0, #FFFFFF, #E8307F;
  --band-tones: #14162B, #3343E0, #9DA6FF, #D9DFFF, #FFDCEB, #F7A8C8, #FFFFFF;
  --intro-tones: #D9DFFF, #FFDCEB, #FFFFFF, #3343E0, #E8307F;
  --hover-fill: #FFDCEB; --grid-img: none;
}
[data-style="pastel"] .display { letter-spacing: -.04em; }
[data-style="pastel"] .display :is(.red, .blue, .yellow) { color: var(--pink); }
/* Pill counters, like a note's number: (001). */
[data-style="pastel"] main .section h2.display--md::before, [data-style="pastel"] main .section h2.display--lg::before {
  content: "0" counter(sec, decimal-leading-zero) / "";
  display: table; padding: .3rem .75rem; border: 1px solid currentColor; border-radius: 999px;
  font-size: .72rem; margin-bottom: 1.2rem; color: inherit;
}
/* Section labels run up the left margin, outside the text column. */
@media (min-width: 901px) {
  [data-style="pastel"] main > .section .eyebrow:not(.panel .eyebrow):not(.hsform .eyebrow):not(.callout .eyebrow) {
    position: absolute; left: calc(max(0px, (100% - var(--max)) / 2) + var(--gut) / 2 - .5em);
    writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; white-space: nowrap;
  }
}
[data-style="pastel"] .eyebrow { color: var(--ink); }
[data-style="pastel"] :is(.sec, .panel--dark) .eyebrow { color: #FFFFFF; }
/* The solutions as a staircase, a tone lighter and a step taller each. */
@media (min-width: 1101px) {
  [data-style="pastel"] .grid5 { border: 0; gap: 10px; align-items: end; }
  [data-style="pastel"] .grid5 > * { border: 0; }
  [data-style="pastel"] .grid5 > :nth-child(1) { background: var(--ink); color: #FFFFFF; min-height: 18rem; --hover-fill: #2E3252; }
  [data-style="pastel"] .grid5 > :nth-child(1) :is(p, .tlink) { color: var(--ink-2); }
  [data-style="pastel"] .grid5 > :nth-child(1) .tile__glyph { color: #FFFFFF; }
  [data-style="pastel"] .grid5 > :nth-child(2) { background: var(--accent); color: #FFFFFF; min-height: 22rem; --hover-fill: #2533B8; }
  [data-style="pastel"] .grid5 > :nth-child(2) :is(p, .tlink) { color: var(--on-blue-2); }
  [data-style="pastel"] .grid5 > :nth-child(2) .tile__glyph { color: #FFFFFF; }
  [data-style="pastel"] .grid5 > :nth-child(3) { background: var(--peri); min-height: 26rem; }
  [data-style="pastel"] .grid5 > :nth-child(4) { background: var(--baby); min-height: 30rem; }
  [data-style="pastel"] .grid5 > :nth-child(5) { background: var(--stone); min-height: 34rem; }
}
/* Cards float free of the grid lines, in pastel fills. */
[data-style="pastel"] .cardgrid, [data-style="pastel"] .cards3, [data-style="pastel"] .inds { border: 0; gap: 10px; }
[data-style="pastel"] :is(.cardgrid, .cards3, .inds) > * { border: 0 !important; }
[data-style="pastel"] :is(.cardgrid, .cards3) > :nth-child(3n+1) { background: var(--stone); }
[data-style="pastel"] :is(.cardgrid, .cards3) > :nth-child(3n+2) { background: var(--peri); }
[data-style="pastel"] :is(.cardgrid, .cards3) > :nth-child(3n) { background: var(--baby); }
[data-style="pastel"] .inds > * { background: var(--stone); }
/* The numbers as staggered cards. */
[data-style="pastel"] .stats__grid { border: 0; gap: 10px; align-items: start; }
[data-style="pastel"] .stats__grid .stat { border: 0; min-height: 14rem; }
[data-style="pastel"] .stats__grid .stat:nth-child(1) { background: #FFFFFF; }
[data-style="pastel"] .stats__grid .stat:nth-child(2) { background: var(--baby); margin-top: 3rem; }
[data-style="pastel"] .stats__grid .stat:nth-child(3) { background: var(--ink); margin-top: 6rem; }
[data-style="pastel"] .stats__grid .stat:nth-child(3) .stat__n { color: #FFFFFF; }
[data-style="pastel"] .stats__grid .stat:nth-child(3) .stat__d { color: var(--ink-2); }
@media (max-width: 560px) { [data-style="pastel"] .stats__grid .stat:nth-child(n) { margin-top: 0; } }
[data-style="pastel"] .stat .stat__n { font-family: var(--sans); font-weight: 500; letter-spacing: -.05em; font-size: clamp(3rem, 5.6vw, 5rem); color: var(--pink); }
/* Surfaces: proof periwinkle, why baby pink, both light; security the one
   dark band; the call periwinkle. */
[data-style="pastel"] .section--dark {
  --canvas: var(--baby); --hair: 1px solid rgba(20, 22, 43, .16); --line: 1px solid rgba(20, 22, 43, .16); --f-paper: var(--baby); --f-stone: var(--baby);
  background: var(--baby); color: var(--ink); border-top-color: var(--baby);
}
[data-style="pastel"] .proof { --canvas: var(--peri); --f-paper: var(--peri); --f-stone: var(--peri); background: var(--peri); border-top-color: var(--peri); }
[data-style="pastel"] .section--dark :is(.body, .stat__d, .reason p, .proof__note blockquote, .eyebrow, .label--soft, .label, .reason__k) { color: var(--slate); }
[data-style="pastel"] .section--dark :is(.proof__co, .proof__noteco) { color: var(--ink); }
[data-style="pastel"] .section--dark .stat .stat__n { color: var(--ink); }
[data-style="pastel"] .section--dark .stats__grid .stat:nth-child(3) .stat__n { color: #FFFFFF; }
[data-style="pastel"] .section--dark .stats__grid .stat:nth-child(3) .stat__d { color: var(--ink-2); }
[data-style="pastel"] .section--dark .btn--ghost { border-color: var(--ink); color: var(--ink); }
[data-style="pastel"] .section--dark .btn--ghost:hover { background: #FFFFFF; }
[data-style="pastel"] .section--dark .proof__link { border-bottom-color: var(--ink); }
[data-style="pastel"] .section--dark :focus-visible { outline-color: var(--ink); }
[data-style="pastel"] main .section--dark h2.display::before { color: var(--ink); }
[data-style="pastel"] .call { background: var(--peri); }
[data-style="pastel"] .call :is(.call__kicker, .badge span) { color: var(--slate); }
[data-style="pastel"] .panel--paper { background: var(--baby); }
[data-style="pastel"] .trust__logo { background-color: var(--slate); }
[data-style="pastel"] .tile__glyph, [data-style="pastel"] .case__glyph { color: var(--accent); }
[data-style="pastel"] .ind__icon { border-color: var(--ink); }
[data-style="pastel"] .ticks li::before, [data-style="pastel"] .plan__list li::before, [data-style="pastel"] .chip::before, [data-style="pastel"] .faq summary::before { background: var(--pink); }
[data-style="pastel"] .hero__field { margin-left: 0; }

/* ==========================================================================
   Cobalt — the page is the blue. Tokens inverted onto it: paper is the
   blue, ink is white. Content sits in white cards, which put the ink tokens
   back inside themselves.
   ========================================================================== */
[data-style="cobalt"] {
  --paper: #2233E6; --stone: #1B2BC9; --line-c: #4656F0;
  --ink: #FFFFFF; --slate: #DCE1FF; --ash: #8E9BFF; --mute: #B3BCFF; --mute-ink: #C3CBFF; --ink-2: #C3CBFF;
  --signal: #FF9CCB; --accent: #FF9CCB; --accent-2: #FF9CCB; --soft: #3445EE; --pink: #FF9CCB;
  --blue: #2233E6; --blue-deep: #0B1030; --on-blue-2: #DCE1FF;
  --btn: #FFFFFF; --btn-ink: #2233E6; --btn-hover: #FF9CCB; --field-dash: #FFFFFF;
  --f-white: #FFFFFF; --f-signal: #FF9CCB;
  --counter: #FF9CCB; --counter-dark: #FF9CCB;
  --px-tones: #FFFFFF, #FF9CCB, #1B2BC9, #0B1030;
  --band-tones: #0B1030, #1B2BC9, #2233E6, #5A68F2, #A9B2FF, #FF9CCB, #FFFFFF;
  --intro-tones: #2233E6, #1B2BC9, #FFFFFF, #0B1030, #FF9CCB;
  --hover-fill: #FFE3F0; --grid-img: none;
}
[data-style="cobalt"] .masthead { border-bottom-color: rgba(255, 255, 255, .25); }
[data-style="cobalt"] .display { letter-spacing: -.045em; }
[data-style="cobalt"] .display--xl { font-size: clamp(2.8rem, 5.6vw, 5rem); line-height: 1; }
[data-style="cobalt"] .display :is(.red, .blue, .yellow) { color: var(--pink); }
[data-style="cobalt"] .eyebrow { color: var(--ink); }
[data-style="cobalt"] .trust__logo { background-color: #FFFFFF; }
[data-style="cobalt"] .trust__cell { background: transparent; }
[data-style="cobalt"] .hero__field { margin-left: 0; }
/* The cards: white, with the brand's own ink tokens restored inside. */
[data-style="cobalt"] :is(.sol, .tile, .case, .ind, .stat, .flowstep, .plan:not(.plan--feature), .proof__note, .sec__item, .chip, .callout, .hsform, .plate, .phero__fig, .frow__fig, .panel--paper, .reason, .def, .step, .faq details, .tablewrap, .prose, .pending) {
  --ink: #0B1030; --slate: #2A3150; --ash: #8C93B0; --mute: #6B7394; --mute-ink: #515A7A; --ink-2: #C3CBFF;
  --paper: #FFFFFF; --stone: #EEF0FF; --line-c: #E1E4FA; --hair: 1px solid #E1E4FA; --line: 1px solid #E1E4FA; --canvas: #FFFFFF;
  --accent: #2233E6; --counter: #2233E6; --hover-fill: #EEF0FF;
  --f-ink: #0B1030; --f-slate: #2233E6; --f-ash: #FF9CCB; --f-paper: #FFFFFF; --f-stone: #EEF0FF; --f-line: #E1E4FA; --f-mute: #6B7394; --f-muteink: #515A7A; --f-ink2: #C3CBFF; --f-signal: #2233E6;
  --btn: #2233E6; --btn-ink: #FFFFFF; --btn-hover: #0B1030;
  background: #FFFFFF; color: var(--ink);
}
[data-style="cobalt"] :is(.plate, .phero__fig, .frow__fig, .prose, .tablewrap, .pending) { padding: 12px; }
[data-style="cobalt"] .prose { padding: clamp(1.2rem, 3vw, 2.4rem); }
[data-style="cobalt"] :is(.reason, .def, .step, .faq details) { padding-inline: 1.2rem; margin-bottom: 8px; border-bottom: 0; }
[data-style="cobalt"] :is(.reasons, .defs, .steps, .faq) { border-top: 0; }
/* Grids open up into a bento on the blue: gaps, no rules. */
[data-style="cobalt"] :is(.cardgrid, .grid5, .inds, .cards3, .stats__grid, .flowsteps, .proof__notes, .plans, .sec__grid, .panels) { border: 0; gap: 10px; background: none; }
[data-style="cobalt"] :is(.cardgrid, .grid5, .inds, .cards3, .stats__grid, .flowsteps, .proof__notes, .plans, .sec__grid, .panels) > * { border: 0 !important; }
[data-style="cobalt"] .chips { border: 0; gap: 8px; }
@media (min-width: 1101px) {
  [data-style="cobalt"] :is(.grid5, .inds) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-style="cobalt"] :is(.grid5, .inds) > :first-child { grid-column: span 2; grid-row: span 2; }
  [data-style="cobalt"] .cardgrid--3 > :first-child, [data-style="cobalt"] .cardgrid--4 > :first-child { grid-column: span 2; }
  [data-style="cobalt"] .cards3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  [data-style="cobalt"] .cards3 > :first-child { grid-row: span 2; }
  [data-style="cobalt"] .grid5 > :first-child h3 { font-size: 2.2rem; letter-spacing: -.03em; }
  [data-style="cobalt"] .inds > :first-child .ind__fig { aspect-ratio: auto; height: calc(100% - 3.6rem); }
}
/* The first card of each grid is pink, with ink type. */
[data-style="cobalt"] :is(.grid5, .cardgrid, .cards3, .stats__grid) > :first-child {
  --paper: #FF9CCB; --stone: #FFB8D9; --hover-fill: #FFB8D9; --f-paper: #FF9CCB; --f-stone: #FFB8D9; --mute-ink: #3A2340;
  background: #FF9CCB;
}
[data-style="cobalt"] :is(.grid5, .cardgrid, .cards3, .stats__grid) > :first-child :is(p, .stat__d, .case__no, .label) { color: #3A2340; }
[data-style="cobalt"] .stat .stat__n { font-family: var(--sans); font-weight: 500; letter-spacing: -.05em; font-size: clamp(3rem, 5.6vw, 5rem); color: #2233E6; }
[data-style="cobalt"] .stats__grid > :first-child .stat__n { color: #0B1030; }
/* Dark sections are navy here, so the white cards still read as cards. */
[data-style="cobalt"] :is(.section--dark, .sec, .panel--dark, .plan--feature) {
  --canvas: #0B1030; --hair: 1px solid #262D5A; --line: 1px solid #262D5A; --f-paper: #0B1030; --f-stone: #0B1030;
  background: #0B1030; color: #FFFFFF; border-top-color: #0B1030;
}
[data-style="cobalt"] :is(.section--dark, .sec, .panel--dark, .plan--feature) > .wrap > :is(.body, .label--soft),
[data-style="cobalt"] :is(.section--dark, .sec) :is(.sechead, .why__in > div, .sec__head, .proof__quote) :is(.body, .label--soft, p) { color: var(--mute-ink); }
[data-style="cobalt"] .sec__px { background: var(--pink); }
[data-style="cobalt"] .call { background: var(--stone); }
[data-style="cobalt"] .ind__icon { background: #FFFFFF; border-color: #0B1030; color: #0B1030; }
[data-style="cobalt"] .ticks li::before, [data-style="cobalt"] .plan__list li::before, [data-style="cobalt"] .chip::before, [data-style="cobalt"] .faq summary::before { background: var(--pink); }
[data-style="cobalt"] .foot { background: var(--paper); }
[data-style="cobalt"] .foot__bubble { color: #0B1030; }
[data-style="cobalt"] .foot__bubble::before { background: #0B1030; }
[data-style="cobalt"] .foot__bubble::after { background: #FFFFFF; }
[data-style="cobalt"] .foot__bubble a { color: #0B1030; }
[data-style="cobalt"] :is(.foot__esc, .foot__think i) { background: #0B1030; }
[data-style="cobalt"] #sudo-track { background: rgba(255, 255, 255, .2); }