/* The landing page follows the reference's home page: the hero with the style stage, the lifecycle deck, the pinned
   feature list, the AI accordion, the category tiles with the use cards, and the closing marquee. Sizes, gaps, radii,
   colours and timings are the reference's. Where it shows photos or Rive scenes,
   Bloom's own icons and files stand in; stage.js, deck.js, features.js, accordion.js and marquee.js play the parts. */

.home {
  --chrome: light-dark(#ffffff, #071a31);
  --ash: light-dark(#e4e6e9, #0c2d54);
  --ui-card: light-dark(#ffffff, #0c2d54);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-tab: cubic-bezier(0.5, 0, 0.5, 1);
  --ease-text: cubic-bezier(1, 0, 0.03, 1.01);
  --ease-step: cubic-bezier(0.76, 0.01, 0.29, 0.99);
}
.goo { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* A style's logo, small: a 24px chip and the name. */
.style-logo { display: flex; align-items: center; gap: 4px; height: 24px; }
.style-logo-chip { width: 24px; height: 24px; }
.style-logo > span:last-child { color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1; white-space: nowrap; }
.eyebrow-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }

/* Section heading, centered: overline, title, paragraph and the buttons. */
.heading { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); width: 100%; margin-inline: auto; text-align: center; }
.heading-copy { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); width: 100%; }
.heading-copy > h2 { width: 100%; max-width: 560px; }
.heading-copy > p { width: 100%; max-width: 480px; color: var(--ink-2); white-space: pre-line; }
.heading-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-md); }
.heading-actions .btn-tertiary > .i { width: 20px; height: 20px; }
.heading-padded { padding-inline: 80px; }
@media (min-width: 768px) { .heading { max-width: 640px; } }
@media (min-width: 1280px) {
  .heading { width: 880px; max-width: 100%; }
  .heading-copy > h2 { max-width: 640px; }
  .heading-copy > p { max-width: 560px; }
}

/* Hero: a linen card in the page with the centered heading, two buttons, a caption and the style stage. */
.hero { display: flex; justify-content: center; width: 100%; padding: 0 8px 8px; }
.hero-card { position: relative; display: flex; justify-content: center; width: 100%; max-width: 1920px; overflow: clip; --r: 32px; background: var(--panel); }
.hero-inner { position: relative; z-index: 10; display: flex; flex-direction: column; gap: var(--gap-2xl); width: 100%; padding-block: var(--section); }
.hero-inner:has(.stage[data-overlay]) { z-index: 1001; }
.hero-head { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); width: 100%; }
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); width: 100%; max-width: 320px; margin-inline: auto; text-align: center; }
.hero-text { display: flex; flex-direction: column; align-items: center; gap: var(--gap-lg); width: 100%; }
.hero-text h1 { width: 100%; max-width: 560px; }
.hero-text p { width: 100%; max-width: 480px; color: var(--ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-md); }
.hero-caption { color: var(--ink-2); text-align: center; }
.hero-caption a { border-radius: 4px; font-weight: 400; text-decoration: underline; text-underline-offset: 1px; transition: opacity 150ms var(--ease); }
.hero-caption a:hover { opacity: 0.8; }
@media (min-width: 577px) { .hero { padding: 0 24px 24px; } }
@media (min-width: 768px) { .hero-copy { max-width: 560px; } }
@media (min-width: 1280px) {
  .hero-copy { max-width: 640px; }
  .hero-text h1 { max-width: 640px; }
  .hero-text p { max-width: 560px; }
}

/* The style stage. From 768px it pins: stage.js fixes it to the viewport, grows it to
   a 24px inset over 0.3s and gives each style 600px of scroll. A colour strip, one screen wide per style, pans behind
   the card. */
.switcher { position: relative; padding-inline: 16px; }
.pin-slot { position: relative; }
.pin-backdrop { position: fixed; inset: 0; z-index: 0; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-in-out); }
.pin-backdrop[data-shown] { opacity: 1; }
.stage { position: relative; max-width: 1200px; margin-inline: auto; padding: 32px 16px; overflow: hidden; --r: 32px; background: var(--ash); }
.stage[data-overlay] { display: flex; align-items: center; justify-content: center; max-width: none; padding: 48px; }
.stage[data-fixed] { position: fixed; z-index: 1; margin: 0; }
.stage-gradient-track { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transform: translate3d(0, 0, 0); }
/* One screen per style. The strip is sized to the screen, not to the stage, so the stage can grow and shrink without
   the gradients being painted again on every frame (the reference pans a bitmap, which scales for free). Linear opens
   on the site's lime and Bold Duotone ends on the blue: the two screens traded places, each moved by 80%, and a
   lavender stop between Bold's orange and the blue keeps that blend from going grey. */
.stage-gradient {
  position: absolute; top: 0; left: 0; width: 600vw; height: 100vh;
  background:
    radial-gradient(6% 55% at -1% 78%, rgb(184 159 250 / 60%), rgb(184 159 250 / 20%) 55%, transparent),
    radial-gradient(7% 60% at 8% 30%, rgb(219 238 159 / 100%), rgb(219 238 159 / 40%) 55%, transparent),
    radial-gradient(6% 55% at 16% 76%, rgb(93 223 215 / 70%), rgb(93 223 215 / 25%) 55%, transparent),
    radial-gradient(6% 45% at 28% 18%, rgb(77 53 137 / 40%), rgb(77 53 137 / 12%) 55%, transparent),
    radial-gradient(7% 60% at 21% 32%, rgb(184 159 250 / 90%), rgb(184 159 250 / 35%) 55%, transparent),
    radial-gradient(6% 55% at 29% 78%, rgb(107 177 255 / 60%), rgb(107 177 255 / 20%) 55%, transparent),
    radial-gradient(7% 60% at 38% 32%, rgb(93 223 215 / 90%), rgb(93 223 215 / 35%) 55%, transparent),
    radial-gradient(6% 50% at 46% 82%, rgb(30 94 167 / 40%), rgb(30 94 167 / 12%) 55%, transparent),
    radial-gradient(7% 60% at 54% 30%, rgb(255 211 157 / 95%), rgb(255 211 157 / 40%) 55%, transparent),
    radial-gradient(6% 55% at 62% 78%, rgb(248 150 31 / 55%), rgb(248 150 31 / 18%) 55%, transparent),
    radial-gradient(7% 60% at 71% 30%, rgb(248 150 31 / 80%), rgb(248 150 31 / 30%) 55%, transparent),
    radial-gradient(6% 55% at 79% 78%, rgb(184 159 250 / 60%), rgb(184 159 250 / 20%) 55%, transparent),
    radial-gradient(6% 45% at 93% 22%, rgb(30 94 167 / 55%), rgb(30 94 167 / 18%) 55%, transparent),
    radial-gradient(7% 60% at 84% 28%, rgb(72 144 227 / 85%), rgb(72 144 227 / 35%) 55%, transparent),
    radial-gradient(6% 55% at 92% 80%, rgb(212 194 255 / 85%), rgb(212 194 255 / 30%) 55%, transparent),
    linear-gradient(90deg, #ffd6a6 -10%, #e9f4c4 6%, #cdeee8 16.5%, #ddd2fd 20%, #c4f0ec 36%, #ffe8cc 53%, #ffd6a6 70%, #f7e1b1 76%, #ddd2fd 78%, #bcd9fd 80%, #ddd2fd 98%);
  transition: transform 200ms var(--ease-in-out);
  will-change: transform;
}
/* The reference's close button is a white X on its deep blue strip; Bloom's strip is pastel, so the X is midnight. */
.stage-close { position: absolute; top: 40px; right: 40px; z-index: 20; display: inline-flex; align-items: center; justify-content: center; padding: 12px; border: 1px solid rgb(7 26 49 / 15%); border-radius: 12px; background: rgb(252 251 248 / 40%); color: #071a31; outline: none; opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease); }
.stage[data-overlay] .stage-close { opacity: 1; pointer-events: auto; }
.stage-close:hover { background: rgb(252 251 248 / 60%); }
.stage-close:active { background: rgb(252 251 248 / 80%); }
.stage-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.stage-content { width: 100%; max-width: 342px; margin-inline: auto; filter: drop-shadow(0 4px 5px rgb(95 109 119 / 4%)) drop-shadow(0 10px 15px rgb(95 109 119 / 4%)) drop-shadow(0 40px 50px rgb(95 109 119 / 10%)); transform: translate3d(0, 0, 0); }
@media (min-width: 640px) {
  .switcher { padding-inline: 32px; }
  .stage { padding: 40px 30px; }
  .stage-content { max-width: 596px; }
}
@media (min-width: 768px) { .stage-gradient { transition: none; } }
@media (min-width: 1024px) { .stage-content { max-width: 996px; } }
@media (min-width: 1280px) { .stage { padding: 48px 30px 64px; } }

/* Style tabs: round chips; the open one is joined to the card by a neck (chip + bridge + neck merged by the goo filter),
   and one colour blob slides along the row behind the chips' faces. All of it takes 600ms. */
.stage-tabs { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 7px; width: fit-content; max-width: 100%; margin-inline: auto; padding-inline: var(--sp-sm); }
/* Five chips are one more than the reference's four, so on a narrow phone the row shrinks them to fit. */
.stage-tab { position: relative; z-index: 10; display: grid; flex: 0 1 auto; place-items: center; width: 48px; min-width: 0; aspect-ratio: 1; padding: 0; border: 0; background: none; outline: none; }
.stage-tab:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--focus); }
.tab-ring, .tab-glow, .tab-glyph > span { position: absolute; inset: 0; }
.tab-ring svg, .tab-face > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tab-chrome path, .tab-bridge path { fill: var(--chrome); }
.tab-glow { opacity: 0; filter: url(#stage-goo); transition: opacity 600ms var(--ease-tab); }
.stage-tab[aria-selected="true"] .tab-glow { opacity: 1; }
.tab-ring .tab-bridge { inset: 100% auto auto 50%; width: 32px; height: 14px; translate: -50% 0; }
.tab-neck { position: absolute; top: calc(100% + 14px); left: 50%; width: 32px; height: 48px; translate: -50% 0; background: var(--chrome); }
.tab-face { position: absolute; inset: 7.15%; }
.tab-wipe { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 600ms var(--ease-tab); }
.tab-wipe path { transition: fill 600ms var(--ease-tab); }
.tab-glyph { position: relative; z-index: 20; width: 85.7%; height: 85.7%; }
.tab-glyph .i { position: absolute; inset: 14.29%; width: 71.42%; height: 71.42%; color: #071a31; }
.tab-glyph-dim { opacity: 0.35; }
.tab-glyph-on { opacity: 0; transition: opacity 600ms var(--ease-tab); }
.stage-tab[aria-selected="true"] .tab-glyph-on { opacity: 1; }
@media (min-width: 640px) {
  .stage-tabs { gap: 8px; }
  .stage-tab { width: 56px; }
}

/* The card under the tabs: one panel per style stacked in one cell, cross-fading in 0.2s. */
.stage-card { position: relative; z-index: 10; display: grid; margin-top: 14px; padding: 32px; --r: 24px; background: var(--bg); }
.stage-panel { display: grid; grid-area: 1 / 1; align-content: center; align-items: center; gap: 24px; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-in-out); }
.stage-panel[data-active] { opacity: 1; pointer-events: auto; }
.stage-copy, .stage-copy-top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-lg); width: 100%; }
.stage-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.stage-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-md); width: 100%; }
.stage-text h2 { color: var(--ink); }
.stage-text p { color: var(--ink-2); }
.stage-copy .btn-underline > .i { width: 20px; height: 20px; }
.stage-scene { width: 100%; aspect-ratio: 278 / 172.314; overflow: hidden; border-radius: 20px; background: color-mix(in srgb, var(--scene) 40%, #ffffff); }
.stage-scene[data-style="linear"] { --scene: #dbee9f; }
.stage-scene[data-style="line-duotone"] { --scene: #5ddfd7; }
.stage-scene[data-style="outline"] { --scene: #ffd39d; }
.stage-scene[data-style="bold"] { --scene: #f8961f; }
.stage-scene[data-style="bold-duotone"] { --scene: #6bb1ff; }
.scene-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; height: 100%; padding: 8px; }
.scene-tile { display: grid; place-items: center; border-radius: 10px; background: rgb(255 255 255 / 72%); color: #071a31; }
.scene-tile .i { width: 24px; height: 24px; }
@media (min-width: 640px) {
  .stage-card { padding: 56px; }
  .stage-panel { gap: 32px; }
  .stage-scene { aspect-ratio: 484 / 300; }
  .scene-grid { gap: 10px; padding: 16px; }
  .scene-tile { border-radius: 14px; }
  .scene-tile .i { width: 32px; height: 32px; }
}
@media (min-width: 1024px) {
  .stage-card { padding: 64px; }
  .stage-panel { grid-template-columns: 320px minmax(0, 1fr); gap: 48px; }
  .stage-copy { width: 320px; }
  .stage-scene { aspect-ratio: 516 / 333; }
  .scene-grid { gap: 12px; padding: 20px; }
  .scene-tile .i { width: 40px; height: 40px; }
}
@media (min-width: 1280px) {
  .stage-card { padding: 48px; }
  .stage-panel { grid-template-columns: 320px minmax(0, 516px); gap: 64px; }
}

/* Lifecycle: a rounded card with a soft top-to-linen fade, the heading and the deck. */
.lifecycle { display: flex; justify-content: center; width: 100%; padding: 8px; }
.lifecycle-card { position: relative; display: flex; justify-content: center; width: 100%; max-width: 1920px; overflow: clip; --r: 32px; background: linear-gradient(180deg, var(--bg) 0, var(--panel) 52.6%); }
.lifecycle-inner { position: relative; z-index: 10; display: flex; flex-direction: column; gap: var(--gap-4xl); width: 100%; max-width: 1280px; padding: var(--section) 16px; }
@media (min-width: 577px) { .lifecycle { padding: 24px; } }
@media (min-width: 1024px) { .lifecycle-inner { padding-inline: 40px; } }

/* Lifecycle deck: below 1280px every card is open and stacked; from 1280px four cards sit in a row, one open at
   384px and the rest resting at 248px (500ms ease-in-out), with invisible tabs over them for the keyboard. */
.deck { --deck-rest: 248px; --deck-open: 384px; --deck-joint: 24px; display: flex; flex-direction: column; gap: var(--gap-3xl); width: 100%; }
.deck-cards { position: relative; width: 100%; }
.deck-tabs { display: none; }
.deck-tab { display: flex; flex: none; align-items: flex-start; width: var(--deck-rest); height: 100%; padding: 32px; border: 0; border-radius: 20px; background: transparent; color: transparent; text-align: left; transition: width 500ms ease-in-out; }
.deck-tab[aria-selected="true"] { width: var(--deck-open); }
.deck-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.deck-row { display: flex; flex-direction: column; gap: var(--gap-lg); width: 100%; }
.deck-card { display: flex; flex: none; flex-direction: column; width: 100%; overflow: hidden; border-radius: 20px; background: var(--card); box-shadow: 0 20px 48px -12px rgb(11 53 88 / 16%); transition: width 500ms ease-in-out, box-shadow 180ms ease-in-out; }
.deck-card-text { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 24px; }
.deck-card-title { color: var(--ink); font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: 0; }
.deck-stack { display: grid; width: 100%; }
.deck-stack > * { grid-area: 1 / 1; }
.deck-resting-text { display: none; }
.deck-active-text { position: relative; width: 100%; overflow: hidden; color: var(--ink-2); font-size: var(--b-md); line-height: 1.4; }
.deck-active-text p, .deck-resting-text { color: var(--ink-2); font-size: var(--b-sm); line-height: 1.4; }
.deck-active-text p { margin-bottom: 16px; }
.deck-steps { display: flex; flex-direction: column; gap: 14px; }
.deck-steps li { position: relative; display: flex; align-items: center; gap: 12px; font-size: var(--b-sm); line-height: 1.4; }
.deck-steps li + li::before { content: ""; position: absolute; top: -12px; left: 9px; width: 2px; height: 10px; background: var(--line-2); }
.deck-step-chip { width: 20px; height: 20px; }
.deck-visual { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 100%; aspect-ratio: 342 / 231.562; overflow: hidden; background: var(--card); }
.deck-gradient { position: absolute; inset: -1px; z-index: 20; pointer-events: none; background: linear-gradient(180deg, var(--card) 6%, transparent 58%), linear-gradient(20deg, var(--tone-a) 0%, var(--tone-b) 72%); transition: opacity 500ms var(--ease-in-out); }
.deck-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 500ms var(--ease-in-out), translate 500ms var(--ease-in-out); }
/* Resting, a card shows its icon large and pale, cut by the card's foot like the reference's resting shapes. */
.deck-layer-resting { z-index: 10; display: none; align-items: flex-end; color: light-dark(color-mix(in srgb, var(--tone-a) 40%, #ffffff), rgb(252 251 248 / 10%)); }
.deck-layer-resting .i { width: 200px; height: 200px; translate: 0 22%; }
.deck-layer-active { z-index: 30; }
.deck-connector { display: none; }
.deck-connector path { fill: var(--card); }
@media (min-width: 768px) {
  .deck-row { gap: 0; }
  .deck-card { display: grid; grid-template-columns: minmax(0, 1fr) 358px; align-items: stretch; border-radius: 24px; }
  .deck-card-text { grid-area: 1 / 1; padding: var(--sp-xl) var(--sp-lg) var(--sp-xl) var(--sp-xl); }
  .deck-visual { grid-area: 1 / 2; align-self: stretch; height: auto; aspect-ratio: auto; }
  .deck-connector { display: flex; flex: none; align-items: center; justify-content: flex-start; width: 100%; height: 27px; margin-block: -1px; padding-left: 32px; }
  .deck-connector svg { flex: none; width: 27px; height: 50.4px; rotate: -90deg; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .deck-gradient { background: linear-gradient(90deg, var(--card) 6%, transparent 58%), linear-gradient(290deg, var(--tone-a) 0%, var(--tone-b) 72%); }
}
@media (min-width: 1024px) { .deck-card { grid-template-columns: minmax(0, 1fr) 405px; } }
@media (min-width: 1280px) {
  .deck-tabs { position: absolute; inset: 0; z-index: 10; display: flex; justify-content: center; pointer-events: none; }
  .deck-tabs > [role="tablist"] { display: flex; align-items: stretch; gap: var(--deck-joint); height: 100%; }
  .deck-row { flex-direction: row; align-items: stretch; justify-content: center; }
  .deck-card { display: flex; min-width: 0; width: var(--deck-rest); box-shadow: none; }
  .deck-card[data-active] { width: var(--deck-open); box-shadow: 0 20px 48px -12px rgb(11 53 88 / 16%); }
  .deck-card-text { position: relative; padding: 32px 32px 0; }
  .deck-stack { width: 320px; }
  .deck-resting-text { display: block; width: 200px; }
  .deck-active-text { width: 320px; }
  .deck-active-text { opacity: 0; transition: opacity 180ms 120ms var(--ease-text); }
  .deck-card[data-active] .deck-active-text { opacity: 1; }
  .deck-resting-text { transition: opacity 180ms 120ms var(--ease-text), translate 180ms 120ms var(--ease-text); }
  .deck-card[data-active] .deck-resting-text { opacity: 0; translate: 60px 0; transition: opacity 180ms 120ms var(--ease-text), translate 0s 300ms; }
  .deck-visual { height: 260px; margin-top: auto; }
  .deck-gradient { opacity: 0; }
  .deck-card[data-active] .deck-gradient { opacity: 1; }
  .deck-layer-resting { display: flex; }
  .deck-card[data-active] .deck-layer-resting { opacity: 0; }
  .deck-layer-active { opacity: 0; translate: 60px 0; transition: opacity 500ms var(--ease-in-out), translate 0s 500ms; }
  .deck-card[data-active] .deck-layer-active { opacity: 1; translate: 0 0; transition: opacity 500ms var(--ease-in-out), translate 500ms var(--ease-in-out); }
  .deck-connector { align-items: flex-start; justify-content: center; width: var(--deck-joint); height: auto; margin-block: 0; padding: 48px 0; }
  .deck-connector svg { width: 24px; height: 44.8px; rotate: 0deg; }
}

/* What an open card shows over its gradient: a small white window made of the set itself. */
.deck-art { width: min(84%, 296px); padding: 16px; border-radius: 16px; background: var(--ui-card); color: var(--ink); box-shadow: 0 4px 5px rgb(95 109 119 / 4%), 0 10px 15px rgb(95 109 119 / 4%), 0 30px 40px rgb(95 109 119 / 10%); font-size: 13px; }
.deck-searchbox { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--chip); font-weight: 500; }
.deck-searchbox .i { width: 18px; height: 18px; color: var(--ink-2); }
.deck-art-search ul { display: grid; gap: 4px; margin-top: 10px; }
.deck-art-search li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font: 400 12px/1.2 var(--font-mono); }
.deck-art-search li:first-child { background: color-mix(in srgb, var(--tone-a) 22%, transparent); }
.deck-art-search li .i { width: 20px; height: 20px; }
.deck-art-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.deck-art-styles li { display: grid; place-items: center; aspect-ratio: 1.3; border-radius: 12px; background: var(--chip); }
.deck-art-styles .i { width: 28px; height: 28px; }
.deck-art-file figcaption { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); font: 500 12px/1.4 var(--font-mono); }
.deck-art-file figcaption .i { width: 16px; height: 16px; }
.deck-art-file pre { margin: 0; overflow: hidden; font-size: 11.5px; line-height: 1.6; white-space: pre; }
.deck-art-color { display: flex; align-items: flex-end; justify-content: center; gap: 28px; }
.deck-color { display: grid; justify-items: center; gap: 8px; }
.deck-color::after { content: attr(data-size) "px"; color: var(--ink-2); font: 400 11px/1 var(--font-mono); }
.deck-color[data-size="16"] { color: light-dark(#1e5ea7, #84c1ff); }
.deck-color[data-size="16"] .i { width: 16px; height: 16px; }
.deck-color[data-size="24"] { color: light-dark(#4d3589, #d4c2ff); }
.deck-color[data-size="32"] { color: light-dark(#a3560a, #ffd39d); }
.deck-color[data-size="32"] .i { width: 32px; height: 32px; }

/* The plain sections below: the reference's 1280px column with 24px (40px from 768px) side padding. */
.band { display: flex; justify-content: center; width: 100%; padding-block: var(--section); }
.band-inner { position: relative; z-index: 10; display: flex; flex-direction: column; gap: var(--gap-3xl); width: 100%; max-width: 1280px; padding-inline: 24px; }
.band-stack { gap: var(--gap-2xl); }
@media (min-width: 768px) { .band-inner { padding-inline: 40px; } }

/* Pinned feature list: below 1024px every entry stacks with its own picture and the one nearest 40% of the screen is lit.
   From 1024px the heading and the frame stick under the header while the entries scroll; the entry nearest the
   heading is lit. 1024-1279: heading across the top, list and frame beneath; from 1280px: heading and list on the left. */
.sc { --sticky-top: calc(var(--header-height, 0px) + 96px); display: flex; flex-direction: column; align-items: center; overflow: clip; }
.sc-main { display: flex; flex-direction: column; width: 100%; }
.sc-head { width: 100%; }
.sc-heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-md); width: 100%; padding-bottom: var(--sp-4xl); border-bottom: 1px solid var(--line-2); text-align: left; }
.sc-heading h2, .fa-head h2 { width: 100%; max-width: 560px; }
.sc-list { display: flex; flex-direction: column; width: 100%; }
.sc-entry { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.sc-entry::after { content: ""; width: 100%; height: 1px; background: var(--line-2); }
.sc-entry-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-md); width: 100%; padding-block: var(--sp-4xl); opacity: 0.2; transition: opacity 150ms var(--ease); }
.sc-entry[data-active] .sc-entry-body { opacity: 1; }
.sc-title, .fa-trigger { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; text-align: left; outline: none; cursor: pointer; }
.sc-entry[data-active] .sc-title { cursor: default; }
.sc-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.sc-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 21px; height: 21px; color: light-dark(#000000, #fcfbf8); }
.sc-icon .i { width: 100%; height: 100%; }
.sc-title-text { flex: 1; color: var(--ink-2); transition: color 150ms var(--ease); }
.sc-entry[data-active] .sc-title-text { color: var(--ink); }
.sc-copy, .fa-copy { display: flex; align-items: flex-start; width: 100%; }
.sc-copy { gap: var(--gap-lg); }
.sc-copy p, .fa-copy p { flex: 1; color: var(--ink-2); font-size: var(--b-md); line-height: 1.4; }
.sc-inline { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: calc(var(--gap-3xl) - var(--gap-md)); aspect-ratio: 1; overflow: hidden; --r: 24px; }
.sc-frame-wrap { display: none; }
.sc-frame { position: relative; overflow: hidden; }
.sc-layer, .fa-layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease); }
.sc-layer { display: flex; align-items: center; justify-content: center; }
.sc-layer[data-active], .fa-layer[data-active] { opacity: 1; pointer-events: auto; }
@media (min-width: 768px) {
  .sc { align-items: flex-start; }
  .sc-head { max-width: 672px; }
  .sc-heading { max-width: 640px; }
  .sc-inline { align-self: center; max-width: 672px; }
}
@media (min-width: 1024px) {
  .sc-head { position: sticky; top: var(--sticky-top); z-index: 10; max-width: none; background: var(--bg); }
  .sc-head::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: max(96px, var(--header-height, 0px)); background: var(--bg); }
  .sc-list { padding: 64px 0 360px; }
  .sc-icon { width: 24px; height: 24px; }
  .sc-inline { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .sc { display: grid; grid-template-columns: minmax(0, 556px) minmax(424px, 1fr); grid-template-rows: auto auto; align-items: start; gap: 48px; width: 100%; max-width: 896px; margin-inline: auto; }
  .sc-main { display: contents; }
  .sc-head { grid-column: 1 / -1; grid-row: 1; }
  .sc-head::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 48px; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
  .sc-list { grid-column: 1; grid-row: 2; max-width: 556px; overflow: hidden; }
  .sc-frame-wrap { position: sticky; top: calc(var(--sticky-top) + var(--sc-head-h, 0px) + 48px); display: flex; grid-column: 2; grid-row: 2; align-self: start; justify-content: center; min-width: 424px; }
  .sc-frame { width: 100%; min-width: 424px; height: 424px; --r: 32px; }
}
@media (min-width: 1280px) {
  .sc { flex-direction: row; justify-content: space-between; width: 100%; max-width: 1200px; margin-inline: auto; }
  .sc-main { flex: 1; min-width: 0; max-width: 532px; }
  .sc-heading h2, .fa-head h2 { max-width: 640px; }
  .sc-title, .sc-copy { max-width: 516px; }
  .sc-frame-wrap { position: sticky; top: var(--sticky-top); display: block; flex: none; }
  .sc-frame { width: 580px; height: 580px; --r: 40px; }
}

/* The pictures: Bloom's demos in a frame like the one the reference paints inside its Rive scenes, light at the top,
   a pale band across the middle and deep at the foot, in the reference palette (one colour per section). */
.feature-art, .fa-art { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 9%; background: linear-gradient(160deg, transparent 22%, rgb(255 255 255 / 70%) 42%, transparent 60%), linear-gradient(180deg, var(--frame-top) 0%, var(--frame-band) 50%, var(--frame-low) 76%, var(--frame-deep) 100%); container-type: inline-size; }
.feature-art[data-tone="blue"] { --frame-top: #6bb1ff; --frame-band: #baf0ec; --frame-low: #4890e3; --frame-deep: #0e396a; }
.fa-art[data-tone="green"] { --frame-top: #c1defe; --frame-band: #baf0ec; --frame-low: #5ddfd7; --frame-deep: #0c2d54; }
.feature-art .demo { max-width: 400px; }
/* Demos with loose captions sit on a white window, as the reference's scenes put their content on white cards. */
.feature-art :is(.demo-styles, .demo-grid, .demo-color) { padding: 20px; border-radius: 20px; background: var(--ui-card); box-shadow: 0 4px 5px rgb(95 109 119 / 4%), 0 10px 15px rgb(95 109 119 / 4%), 0 30px 40px rgb(95 109 119 / 10%); }
.feature-art :is(.style-strip-glyph, .color-row, .grid-figure) { background: var(--chip); }
/* In the smaller frames the picture shrinks as a whole, as the reference's scenes scale with their frame. */
@container (max-width: 480px) { .feature-art > .demo { zoom: 0.8; } }
@container (max-width: 380px) {
  .feature-art > .demo { zoom: 0.66; }
  .code-art pre { padding: 12px; }
}
.code-art { width: 100%; max-width: 440px; overflow: hidden; border-radius: 16px; background: #071a31; color: #fcfbf8; box-shadow: var(--shadow-lg); }
.code-art figcaption { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgb(252 251 248 / 12%); color: rgb(252 251 248 / 70%); font: 500 12px/1.4 var(--font-mono); }
.code-art figcaption span { flex: none; width: 10px; height: 10px; border-radius: 50%; background: rgb(252 251 248 / 25%); }
.code-art figcaption span:nth-child(3) { margin-right: 8px; }
.code-art pre { margin: 0; padding: 16px; overflow: hidden; font-size: clamp(8.5px, 2.3cqi, 13px); line-height: 1.6; white-space: pre; }
.code-art code > span { display: block; overflow: hidden; text-overflow: ellipsis; }

/* AI accordion: one item open, the next opening every six seconds while a lime bar fills. Below 1024px the open
   item carries its own picture; 1024-1279 the list sits beside a 424px frame; from 1280px the 580px frame is on the
   left of the heading and list. */
.fa { display: flex; flex-direction: column; width: 100%; }
.fa-side { display: flex; flex-direction: column; gap: var(--gap-2xl); width: 100%; }
.fa-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-md); width: 100%; text-align: left; }
.fa-body { display: flex; flex-direction: column; width: 100%; }
.fa-list { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.fa-item { position: relative; width: 100%; padding-block: var(--sp-lg); opacity: 0.4; transition: opacity 150ms var(--ease); }
.fa-item[data-open], .fa-item:hover { opacity: 1; }
.fa-item h3 { font: inherit; }
.fa-item[data-open] .fa-trigger { cursor: default; }
.fa-trigger:focus-visible { outline: 2px solid var(--focus); }
.fa-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--ink); }
.fa-title { flex: 1; color: var(--ink); }
.fa-panel-inner { width: 100%; overflow: hidden; }
.fa-panel-body { display: flex; flex-direction: column; gap: var(--gap-md); width: 100%; padding-top: var(--sp-sm); }
.fa-copy { gap: var(--gap-md); }
.fa-bar { height: 2px; overflow: hidden; background: light-dark(rgb(7 26 49 / 20%), rgb(252 251 248 / 20%)); }
.fa-bar > span { display: block; width: 100%; height: 100%; background: #dbee9f; transform: scaleX(0); transform-origin: 0 50%; }
.fa-bar-edge { position: absolute; inset: auto 0 0; display: none; }
.fa-inline { position: relative; display: flex; align-items: center; justify-content: center; align-self: center; width: 100%; margin: var(--sp-md) 0 var(--sp-xs); aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--ash); }
.fa-frame { position: relative; display: none; flex: none; overflow: hidden; --r: 32px; background: var(--ash); }
@media (min-width: 768px) {
  .fa-head { max-width: 640px; }
  .fa-inline { max-width: 672px; margin-block: var(--sp-lg); border-radius: 24px; }
}
@media (min-width: 1024px) {
  .fa { max-width: 896px; margin-inline: auto; gap: var(--gap-2xl); }
  .fa-body { flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: var(--gap-2xl); }
  .fa-list { flex: none; width: 424px; }
  .fa-bar-inline, .fa-inline { display: none; }
  .fa-bar-edge { display: block; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .fa-frame-sdsk { display: block; width: 424px; height: 424px; } }
@media (min-width: 1280px) {
  .fa { flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; max-width: none; gap: var(--gap-3xl); }
  .fa-side { flex: none; justify-content: space-between; min-width: 440px; max-width: 540px; height: 580px; }
  .fa-body { flex-direction: column; gap: 0; }
  .fa-list { flex: 0 1 auto; width: 100%; }
  .fa-frame-dsk { display: block; width: 580px; height: 580px; }
}

/* Category tiles: linen tiles joined by small bridges, 3 / 5 / 6 / 9 to a row; the end tiles of a row lose their bridge. A
   tile swells 5px (6px from 768px) per side on hover in 0.2s and the bridges squeeze to make room. */
.tile-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; max-width: calc(3 * 112px - 19px); margin-inline: auto; }
.tile { display: flex; align-items: center; width: calc(92px + (var(--_left, 1) + var(--_right, 1)) * 10px); height: 112px; overflow: visible; outline: none; }
.tile-bridge { position: relative; height: 34px; overflow: hidden; }
.tile-bridge-left { flex: 0 1 calc(var(--_left, 1) * 10px); }
.tile-bridge-right { flex: 0 1 calc(var(--_right, 1) * 10px); }
.tile-bridge svg { position: absolute; left: -1px; width: calc(100% + 2px); height: 100%; fill: var(--panel); }
.tile-bridge-left svg { transform: scaleX(-1); }
.tile-body { position: relative; display: flex; flex: 1 0 auto; align-items: center; justify-content: center; padding: 20px; border-radius: 16px; background: var(--panel); transition: padding 0.2s ease-in-out, margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out; }
.tile-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 53px; height: 53px; color: var(--tile-ink); }
.tile[data-tone="blue"] { --tile-ink: #4890e3; }
.tile[data-tone="purple"] { --tile-ink: #8b6fe6; }
.tile[data-tone="green"] { --tile-ink: #2fb8ae; }
.tile[data-tone="orange"] { --tile-ink: #f8961f; }
.tile-icon > .i { width: 100%; height: 100%; }
.tile:is(:hover, :active, :focus-visible) .tile-body { margin-left: calc((var(--_left, 1) - 1) * 5px); margin-right: calc((var(--_right, 1) - 1) * 5px); padding: 25px; }
.tile:active .tile-body { background: light-dark(#f5f5f7, #0e396a); transition: none; }
.tile:active .tile-bridge svg { fill: light-dark(#f5f5f7, #0e396a); }
.tile:focus-visible .tile-body { z-index: 1; outline: 2px solid var(--focus); outline-offset: 0; transition: none; }
.tile:last-child { --_right: 0; }
@media (max-width: 767px) {
  .tile:nth-child(3n + 1) { --_left: 0; }
  .tile:nth-child(3n) { --_right: 0; }
}
@media (min-width: 768px) {
  .tile-grid { max-width: calc(5 * 136px - 23px); }
  .tile { width: calc(112px + (var(--_left, 1) + var(--_right, 1)) * 12px); height: 136px; }
  .tile-bridge { height: 42px; }
  .tile-bridge-left { flex-basis: calc(var(--_left, 1) * 12px); }
  .tile-bridge-right { flex-basis: calc(var(--_right, 1) * 12px); }
  .tile-body { padding: 24px; border-radius: 24px; }
  .tile-icon { width: 64px; height: 64px; }
  .tile:is(:hover, :active, :focus-visible) .tile-body { margin-left: calc((var(--_left, 1) - 1) * 6px); margin-right: calc((var(--_right, 1) - 1) * 6px); padding: 30px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tile:nth-child(5n + 1) { --_left: 0; }
  .tile:nth-child(5n) { --_right: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .tile-grid { max-width: calc(6 * 136px - 23px); }
  .tile:nth-child(6n + 1) { --_left: 0; }
  .tile:nth-child(6n) { --_right: 0; }
}
@media (min-width: 1280px) {
  .tile-grid { max-width: calc(9 * 136px - 23px); }
  .tile:nth-child(9n + 1) { --_left: 0; }
  .tile:nth-child(9n) { --_right: 0; }
}

/* Use cards: a linen card that lifts a shadow in 200ms and nudges its arrow on hover or focus. */
.use-grid { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr; align-items: stretch; gap: var(--gap-lg); width: 100%; }
.use-card { display: flex; flex-direction: column; gap: var(--gap-md); min-height: 164px; padding: var(--sp-lg); border-radius: 16px; background: light-dark(#f5f3ee, rgb(252 251 248 / 5%)); outline: none; transition: box-shadow 200ms var(--ease); }
.use-card:hover, .use-card:focus-visible { box-shadow: var(--shadow-xl); }
.use-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.use-card-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
.use-card-logo { width: var(--sp-lg); height: var(--sp-lg); margin: 4px; }
.use-card:hover .icon-btn, .use-card:focus-visible .icon-btn { background: var(--ib-hover); }
.use-card:hover .icon-btn > .i, .use-card:focus-visible .icon-btn > .i { transform: translate(2px, -2px); }
.use-card-text { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.use-card-text .t-body-md { color: var(--ink-2); }
@media (min-width: 768px) {
  .use-grid { grid-template-columns: repeat(2, 1fr); }
  .use-card { border-radius: 20px; }
}

/* Get started: a full-bleed panel with the heading over the marquee. */
.conversion { position: relative; left: 50%; display: flex; flex-direction: column; align-items: center; gap: var(--gap-4xl); width: 100vw; overflow: hidden; translate: -50% 0; background: var(--bg); }
@media (min-width: 1968px) { .conversion { width: 1968px; } }

/* Card marquee: without motion the cards are one centered row that scrolls sideways; marquee.js turns it
   into three copies that slide one card to the middle every 4s (1.2s each), the middle card at full size. The
   reference's figure stands above its backdrop (16% and 60% from the top); Bloom's icon sits inside it, so the drawn
   icon and the label move down together until they are centred on the backdrop. */
.marquee { width: 100%; overflow-x: auto; }
.marquee-track { display: flex; width: max-content; margin-inline: auto; padding-inline: 80px; }
.marquee-list { display: flex; flex: none; }
.marquee-list + .marquee-list { display: none; }
.marquee-item { flex: none; margin-right: -15px; }
.marquee[data-animated] { overflow: hidden; }
.marquee[data-animated] .marquee-track { margin: 0; padding: 0; opacity: 0; transition: opacity 300ms var(--ease); }
.marquee[data-animated][data-ready] .marquee-track { opacity: 1; }
.marquee[data-animated] .marquee-list + .marquee-list { display: flex; }
.mcard { position: relative; display: block; flex: none; width: 341px; aspect-ratio: 341 / 248; transform-origin: center; transition: scale 1200ms var(--ease-step); }
.marquee[data-animated] .marquee-item:not([data-active]) .mcard { scale: 0.85; }
.mcard-backdrop { position: absolute; inset: auto 0 0; height: 80.6%; overflow: hidden; border-radius: 8px; background: radial-gradient(90% 70% at 85% 15%, color-mix(in srgb, var(--tone-b) 85%, transparent), transparent 70%), linear-gradient(200deg, color-mix(in srgb, var(--tone-a) 35%, #ffffff), var(--tone-a)); }
.mcard-figure { position: absolute; top: 33%; left: 50%; width: 23.5%; translate: -50% 0; color: #071a31; pointer-events: none; }
.mcard-figure .i { width: 100%; height: auto; aspect-ratio: 1; }
.mcard-label { position: absolute; top: 77%; left: 50%; z-index: 10; translate: -50% -50%; }

/* Label chain: white chip and pills poured into one blob by the goo filter, the real chip and words on top. */
.daisy { position: relative; display: inline-flex; align-items: center; justify-content: center; filter: drop-shadow(0 2px 12px rgb(95 108 122 / 30%)); transition: opacity 1200ms var(--ease-step), scale 1200ms var(--ease-step), translate 1200ms var(--ease-step); }
.marquee[data-animated] .marquee-item:not([data-active]) .daisy { opacity: 0; scale: 0.9; translate: 0 16px; }
.daisy-goo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; filter: url(#daisy-goo); }
.daisy-goo-chip { width: 40px; height: 40px; }
.daisy-bridge { flex: none; width: 8px; height: 14px; fill: #ffffff; }
.daisy-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; }
.daisy-chip-face { width: 34.28px; height: 34.28px; margin-inline: 2.86px; }
.daisy-pill, .daisy-text { display: inline-flex; flex: none; align-items: center; justify-content: center; height: 40px; padding-inline: 12px; border-radius: 4px; white-space: nowrap; }
.daisy-pill { background: #ffffff; color: transparent; }
.daisy-text { color: #071a31; }
.daisy-display { font-family: var(--font-display); }
@media (min-width: 768px) {
  .marquee-item { margin-right: -27px; }
  .mcard { width: 656px; aspect-ratio: 656 / 432; }
  .mcard-backdrop { height: 88.9%; border-radius: 24px; }
  .mcard-figure { top: 29.3%; width: 23%; }
  .mcard-label { top: 73.3%; }
  .daisy-goo-chip { width: 56px; height: 56px; }
  .daisy-bridge { width: 16px; height: 28px; }
  .daisy-row { gap: 16px; }
  .daisy-chip-face { width: 48px; height: 48px; margin-inline: 4px; }
  .daisy-pill, .daisy-text { height: 56px; border-radius: 12px; }
}
@media (min-width: 1024px) { .marquee-item { margin-right: 38px; } }

/* Squircle corners where the browser draws them. The .sq panels double their --r there (site.css); these four follow
   the reference's class-name matching, which lands them on its xl radius whatever their own radius is. */
@supports (corner-shape: squircle) and (background: paint(x)) {
  .deck-card, .fa-inline, .use-card, .mcard-backdrop { corner-shape: squircle; border-radius: 48px; }
  @media (max-width: 767px) { .use-card, .mcard-backdrop { border-radius: 40px; } }
}

/* Reduced motion, as in site.css: the fades and colours stay, while the colour blob, the gradient, the cards and the
   tiles change in place and no layer slides in. The marquee does not run at all (marquee.js). */
@media (prefers-reduced-motion: reduce) {
  .stage-gradient, .tab-wipe, .deck-tab, .tile-body { transition: none; }
  .deck-card { transition: box-shadow 180ms ease-in-out; }
  .deck-layer-active, .deck-card[data-active] .deck-resting-text { translate: none; }
  .use-card:hover .icon-btn > .i, .use-card:focus-visible .icon-btn > .i { transform: none; }
}