/* =====================================================================
   Floating components: tiles that sit on the page ground instead of
   filling the band. Every tile is its own component (Float*.dc.html);
   these are the shared tile styles plus two layout helpers:
   .fl-bento (a 12-column grid of tiles) and .fl-rail (a scrolling row).
   ===================================================================== */
.fl { container-type: inline-size; position: relative; height: 100%; box-sizing: border-box; border-radius: 30px; overflow: hidden; padding: clamp(26px, 6cqw, 48px); display: flex; flex-direction: column; gap: 14px; font-family: var(--sans, "Plus Jakarta Sans", system-ui, sans-serif); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; isolation: isolate; }
.fl *, .fl *::before, .fl *::after { box-sizing: border-box; }
a.fl, .fl a { text-decoration: none; }
.fl:hover { transform: translateY(-4px); }
/* tones */
.fl.t-ink { background: linear-gradient(160deg, #18204A 0%, #0E1226 60%); color: #EEF1F8; box-shadow: inset 0 0 0 1px rgba(207,224,255,.12), 0 30px 70px rgba(3,6,20,.35); }
.fl.t-midnight { background: linear-gradient(160deg, #1A2A6E, #0F1846 70%); color: #EEF1F8; box-shadow: inset 0 0 0 1px rgba(207,224,255,.14), 0 30px 70px rgba(3,6,20,.35); }
.fl.t-electric { background: radial-gradient(120% 90% at 85% 0%, #5B85FF 0%, #2C59E6 45%, #1B3BA8 100%); color: #FFFFFF; box-shadow: 0 30px 70px rgba(35,72,196,.35); }
.fl.t-white { background: #FFFFFF; color: #0E1226; box-shadow: 0 1px 0 rgba(14,18,38,.04), 0 24px 60px rgba(14,18,38,.08); }
.fl.t-ice { background: linear-gradient(180deg, #F3F6FE, #E2EAFB); color: #0E1226; box-shadow: inset 0 0 0 1px rgba(35,72,196,.10), 0 24px 60px rgba(15,24,70,.08); }
.fl.t-paper { background: #FBF8F1; color: #0E1226; box-shadow: inset 0 0 0 1px rgba(14,18,38,.06), 0 24px 60px rgba(42,30,22,.08); }
.fl.t-brass { background: linear-gradient(160deg, #C9BB93, #A79976); color: #0E1226; box-shadow: 0 30px 70px rgba(110,90,44,.25); }
.fl.t-white:hover, .fl.t-ice:hover, .fl.t-paper:hover { box-shadow: 0 1px 0 rgba(14,18,38,.04), 0 40px 80px rgba(14,18,38,.14); }
/* text inside tiles */
.fl-kick { margin: 0; font: 700 clamp(13px, 2.4cqw, 15px)/1.2 var(--sans, sans-serif); letter-spacing: -.005em; opacity: .72; }
.t-brass .fl-kick, .t-white .fl-kick, .t-ice .fl-kick, .t-paper .fl-kick { color: #5A6180; opacity: 1; }
.t-paper .fl-kick { color: #766332; }
.fl-h { margin: 0; font: 800 clamp(28px, 7.4cqw, 64px)/.98 var(--sans, sans-serif); letter-spacing: -.05em; max-width: 16ch; }
.fl-h .k { font-style: italic; color: #7FA3FF; padding-right: .04em; }
.t-white .fl-h .k, .t-ice .fl-h .k, .t-paper .fl-h .k { color: #2348C4; }
.t-electric .fl-h .k { color: #FFFFFF; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.t-brass .fl-h .k { color: #0E1226; }
.fl-p { margin: 0; font-size: clamp(15px, 2.8cqw, 19px); line-height: 1.45; max-width: 44ch; opacity: .82; }
.t-white .fl-p, .t-ice .fl-p, .t-paper .fl-p, .t-brass .fl-p { color: #3E4256; opacity: 1; }
.t-brass .fl-p { color: #2A2B33; }
.fl-link { margin-top: auto; padding-top: 10px; font: 700 15px var(--sans, sans-serif); color: #A9C0FF; display: inline-flex; gap: 6px; align-items: center; }
.t-white .fl-link, .t-ice .fl-link, .t-paper .fl-link { color: #2348C4; } .t-electric .fl-link, .t-brass .fl-link { color: inherit; }
.fl-link i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(127,163,255,.18); transition: transform .3s; }
.t-white .fl-link i, .t-ice .fl-link i, .t-paper .fl-link i { background: rgba(35,72,196,.1); } .t-electric .fl-link i { background: rgba(255,255,255,.2); } .t-brass .fl-link i { background: rgba(14,18,38,.12); }
.fl:hover .fl-link i { transform: translateX(4px); }
/* stat */
.fl-num { margin: auto 0 0; font: 800 clamp(72px, 30cqw, 260px)/.82 var(--sans, sans-serif); letter-spacing: -.07em; }
.fl-num small { font-size: .2em; letter-spacing: -.02em; opacity: .6; margin-left: .2em; }
.fl-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(6px, 1.6cqw, 12px); max-width: 420px; margin-top: 10px; }
.fl-dots i { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed currentColor; opacity: .35; }
.fl-dots i.on { border: 0; background: #7FA3FF; opacity: 1; }
.t-electric .fl-dots i.on { background: #FFFFFF; } .t-white .fl-dots i.on, .t-ice .fl-dots i.on { background: #2C59E6; }
/* screen: the product screen bleeds off the bottom edge */
.fl-screen { padding-bottom: 0; }
.fl-shot { margin-top: auto; position: relative; width: 100%; padding-top: 24px; }
.fl-shot-in { border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 -10px 40px rgba(3,6,20,.25); margin-bottom: -14%; }
.fl-shot-in .sx { border-radius: 0; border: 0; box-shadow: none; }
.fl-screen.b-right .fl-shot { width: 118%; margin-right: -18%; }
/* feature */
.fl-chip { width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto; position: relative; overflow: hidden; }
.fl-chip::after { content: ""; position: absolute; inset: 14px; border-radius: 4px; border: 2px solid rgba(255,255,255,.85); }
.fl-feature .fl-h { font-size: clamp(24px, 6.4cqw, 40px); }
/* quote */
.fl-q { margin: auto 0 0; font: 400 clamp(22px, 5.2cqw, 40px)/1.28 var(--serif, "Newsreader", Georgia, serif); letter-spacing: -.01em; }
.fl-q::before { content: "“"; display: block; font: 800 1.8em/0.6 var(--sans, sans-serif); color: #A79976; margin-bottom: 18px; }
.fl-cite { font: 600 14px var(--sans, sans-serif); opacity: .7; }
.t-white .fl-cite, .t-ice .fl-cite, .t-paper .fl-cite { color: #5A6180; opacity: 1; }
/* call to action */
.fl-form { margin-top: auto; display: flex; gap: 8px; padding: 8px; border-radius: 16px; background: rgba(230,236,248,.08); border: 1px solid rgba(207,224,255,.28); }
.t-white .fl-form, .t-ice .fl-form, .t-paper .fl-form { background: #FBFAF7; border-color: rgba(14,18,38,.14); }
.t-electric .fl-form { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }
.fl-form input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; padding: 0 12px; font: 600 17px var(--sans, sans-serif); color: inherit; outline: none; }
.fl-form input::placeholder { color: currentColor; opacity: .55; }
.fl-form button { border: 0; border-radius: 10px; padding: 0 22px; min-height: 52px; background: #2C59E6; color: #FFFFFF; font: 700 16px var(--sans, sans-serif); cursor: pointer; white-space: nowrap; }
.t-electric .fl-form button { background: #0E1226; }
.fl-sub { font: 600 14px var(--sans, sans-serif); opacity: .75; } .fl-sub b { color: #CDBF97; }
.t-white .fl-sub, .t-ice .fl-sub, .t-paper .fl-sub { color: #3E4256; opacity: 1; } .t-white .fl-sub b, .t-ice .fl-sub b, .t-paper .fl-sub b { color: #766332; }
@container (max-width: 420px) { .fl-form { flex-direction: column; } .fl-form button { width: 100%; } }
/* book */
.fl-book { flex-direction: row; align-items: flex-end; gap: clamp(20px, 5cqw, 40px); }
.fl-cover { flex: 0 0 38%; max-width: 220px; transform: rotate(-3deg); filter: drop-shadow(0 30px 40px rgba(42,30,22,.32)); align-self: center; }
.fl-cover img { width: 100%; display: block; border-radius: 3px 10px 10px 3px; background: #0E1226; aspect-ratio: 2 / 3; object-fit: cover; }
.fl-book > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; height: 100%; justify-content: flex-end; }
.fl-book .fl-h { font-size: clamp(24px, 6cqw, 40px); }
@container (max-width: 380px) { .fl-book { flex-direction: column; align-items: flex-start; } .fl-cover { max-width: 140px; } }
/* answers: the questions the machines are asked */
.fl-ans { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.fl-ans div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 14px; background: rgba(230,236,248,.06); border: 1px solid rgba(207,224,255,.1); font-size: clamp(14px, 2.6cqw, 16px); font-weight: 600; }
.t-white .fl-ans div, .t-ice .fl-ans div, .t-paper .fl-ans div { background: #FFFFFF; border-color: rgba(14,18,38,.08); }
.fl-ans em { flex: 0 0 auto; font: 700 12px var(--sans, sans-serif); font-style: normal; padding: 5px 10px; border-radius: 999px; }
.fl-ans em.r { background: #2C59E6; color: #FFFFFF; } .fl-ans em.n { background: rgba(167,153,118,.28); color: #E3D5AE; } .fl-ans em.x { border: 1px dashed currentColor; opacity: .7; }
.t-white .fl-ans em.n, .t-ice .fl-ans em.n, .t-paper .fl-ans em.n { color: #5C4A1E; }

/* ---------- layout helpers ---------- */
.fl-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(260px, auto); gap: 20px; }
.fl-bento > * { grid-column: span 4; min-width: 0; }
.fl-bento > .s-3 { grid-column: span 3; } .fl-bento > .s-4 { grid-column: span 4; } .fl-bento > .s-5 { grid-column: span 5; } .fl-bento > .s-6 { grid-column: span 6; } .fl-bento > .s-7 { grid-column: span 7; } .fl-bento > .s-8 { grid-column: span 8; } .fl-bento > .s-12 { grid-column: span 12; }
.fl-bento > .r-2 { grid-row: span 2; } .fl-bento > .h-tall { min-height: 520px; }
@media (max-width: 1100px) { .fl-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } .fl-bento > *, .fl-bento > .s-3, .fl-bento > .s-4, .fl-bento > .s-5 { grid-column: span 3; } .fl-bento > .s-6, .fl-bento > .s-7, .fl-bento > .s-8, .fl-bento > .s-12 { grid-column: span 6; } }
@media (max-width: 640px) { .fl-bento { grid-template-columns: minmax(0, 1fr); gap: 14px; grid-auto-rows: minmax(220px, auto); } .fl-bento > * { grid-column: 1 / -1 !important; grid-row: auto !important; } .fl { border-radius: 24px; } }
.fl-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px, 30%); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--pad, 48px) 40px; margin: 0 calc(var(--pad, 48px) * -1); scrollbar-width: none; }
.fl-rail::-webkit-scrollbar { display: none; }
.fl-rail > * { scroll-snap-align: start; height: 560px; }
@media (max-width: 640px) { .fl-rail { grid-auto-columns: 84%; } .fl-rail > * { height: 480px; } }
/* a whole section boxed onto the ground */
.fl-panel { margin: 0 max(var(--pad, 48px), calc((100% - var(--max, 1600px)) / 2 + var(--pad, 48px))); border-radius: 40px; overflow: hidden; }
@media (max-width: 640px) { .fl-panel { border-radius: 28px; margin: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .fl, .fl-link i { transition: none; } .fl:hover { transform: none; } }
/* grid cells hold one tile component and let it fill the cell */
.fl-bento > div, .fl-rail > div { display: flex; flex-direction: column; min-height: 260px; }
.fl-bento > div > *, .fl-rail > div > * { flex: 1 1 auto; display: flex; flex-direction: column; }
.fl-bento > div > * > *, .fl-rail > div > * > * { flex: 1 1 auto; }
@media (max-width: 1100px) { .fl-panel > div > div[style*="repeat(3"] { grid-template-columns: minmax(0, 1fr) !important; } }
/* narrow tiles: the screen grows past the right edge so it stays legible */
@container (max-width: 760px) { .fl-shot { width: 150%; } .fl-shot-in { border-radius: 16px 0 0 0; } }
@container (max-width: 480px) { .fl-shot { width: 190%; } }
.fl-dots i { opacity: .5; }
.fl-rail { scroll-padding-inline: var(--pad, 48px); }