/*
Theme Name: IAMB.AI
Theme URI: https://iamb.ai/
Author: IAMB.AI
Description: The public face of IAMB.AI, an AI research assistant that takes a research question to a publishable PRISMA 2020 systematic literature review. A child of the IAMB.AI theme (icai): a product site for the home page, the header, the footer and the public pages (log in, join, reset, the policies). The app at /app/ keeps the parent's look.
Template: icai
Version: 3.0.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: slrbaby
*/

/*
 * Everything here sits under body.sb-site (every page but the app's). The product site is a quiet neobrutalist one:
 * the parent's ink and the mark's pink, flat blocks of colour, 2 px ink edges, hard shadows with no blur that a button
 * gives up when pressed, one small corner everywhere, heavy display type and room around it. The parent's falling
 * bits come back behind the hero and the public pages' ground (assets/js/rain.js), in colours chosen so every word
 * over them keeps AA contrast; whatever is long to read stands on a solid block. The parent's tokens (--ic-*) point
 * at the child's (--sb-*) so the site layer's forms (gts-*) on /login/, /join/, /reset/ follow the same look.
 */

body.sb-site {
	--sb-bg: #0b0b0d;
	--sb-bg-2: #131317;
	--sb-surface: #17171c;
	--sb-line: #34343c;
	--sb-text: #f4f3ef;
	--sb-muted: #bdbcb5;
	--sb-accent: #ff5c93;
	--sb-accent-soft: rgba(255, 92, 147, 0.14);
	--sb-on-accent: #0b0b0d;
	--sb-ink: #f4f3ef;
	--sb-on-ink: #0b0b0d;
	--sb-edge: #f4f3ef;
	--sb-hard: #f4f3ef;
	--sb-rain-bg: #0b0b0d;
	--sb-rain-ink: #2a2a30;
	--sb-rain-egg: #4f1a2c;
	--sb-bw: 2px;
	--sb-sh: 4px;
	--sb-sh-lg: 8px;
	--sb-font: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--sb-display: "Anybody", "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
	--sb-mono: "Cascadia Mono", Consolas, ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace;
	--sb-r: 4px;
	--sb-r-lg: 4px;
	--sb-wrap: 1180px;
	--sb-gutter: clamp(16px, 4vw, 40px);
	--sb-y: clamp(64px, 8vw, 120px);

	--ic-bg: var(--sb-bg);
	--ic-bg-2: var(--sb-bg-2);
	--ic-surface: var(--sb-surface);
	--ic-surface-2: var(--sb-bg-2);
	--ic-line: var(--sb-edge);
	--ic-line-soft: var(--sb-line);
	--ic-text: var(--sb-text);
	--ic-muted: var(--sb-muted);
	--ic-faint: var(--sb-muted);
	--ic-pink: var(--sb-accent);
	--ic-pink-soft: var(--sb-accent-soft);
	--ic-on-pink: var(--sb-on-accent);
	--ic-focus: var(--sb-accent);
	--ic-radius-sm: var(--sb-r);
	--ic-radius: var(--sb-r);
	--ic-radius-lg: var(--sb-r);
	--ic-header-h: 66px;

	background: none;
	color: var(--sb-text);
	font-family: var(--sb-font);
}
:root[data-mode="light"] body.sb-site {
	--sb-bg: #faf9f6;
	--sb-bg-2: #f1efe9;
	--sb-surface: #ffffff;
	--sb-line: #d6d3c9;
	--sb-text: #121212;
	--sb-muted: #46453f;
	--sb-accent: #c4124f;
	--sb-accent-soft: rgba(196, 18, 79, 0.09);
	--sb-on-accent: #ffffff;
	--sb-ink: #121212;
	--sb-on-ink: #faf9f6;
	--sb-edge: #121212;
	--sb-hard: #121212;
	--sb-rain-bg: #faf9f6;
	--sb-rain-ink: #e8e6e0;
	--sb-rain-egg: #f9dde6;
}
html:has(> body.sb-site) { background: #0b0b0d; }
:root[data-mode="light"]:has(> body.sb-site) { background: #faf9f6; }

/* ------------------------------------------------------------------ what the parent's terminal look adds */
body.sb-site .ic-main > *, body.sb-site:not(.ic-app-page) .ic-main > * { background: none; }
body.sb-site:not(.ic-app-page) .ic-main > .ic-wrap, body.sb-site .ic-main > section > .ic-wrap { background: none; box-shadow: none; padding: 0; margin-block: 0; }
body.sb-site :is(.sb-header, .sb-drawer, .ic-main, .sb-footer) a { text-decoration-style: solid; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 0.22em; }
body.sb-site :is(.sb-header, .sb-drawer, .ic-main, .sb-footer) a:hover { text-decoration-color: currentColor; }
body.sb-site:not(.ic-app-page) :is(.ic-header, .ic-drawer, .ic-main, .ic-footer) ::selection { background: var(--sb-accent); color: var(--sb-on-accent); }
body.sb-site .ic-main.sb-main :is(input, select, textarea, button, label:not(.gtm-plan-card)) { font-family: var(--sb-font); }
body.sb-site :focus-visible { outline: 3px solid var(--sb-accent); outline-offset: 3px; border-radius: var(--sb-r); }
.sb-site .ic-skip { border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-accent); color: var(--sb-on-accent); font-family: var(--sb-font); font-weight: 700; }
/* The rain: the parent's canvas, behind everything; the colours are drawn by assets/js/rain.js from the tokens. */
body.sb-site .sb-rain { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* --------------------------------------------------------------------------------------------- basics */
.sb-wrap { width: min(100% - 2 * var(--sb-gutter), var(--sb-wrap)); margin-inline: auto; }
.sb-main { min-height: 60vh; }
.sb-site .sb-h1, .sb-site .sb-h2, .sb-site .sb-h3, .sb-hero__title, .sb-auth__title, .sb-brand__name { font-family: var(--sb-display); text-transform: none; letter-spacing: -0.02em; color: var(--sb-text); }
.sb-h1 { margin: 0 0 0.35em; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); font-weight: 860; font-stretch: 104%; line-height: 1.02; }
.sb-h2 { margin: 0; font-size: clamp(1.8rem, 1.25rem + 2.1vw, 3rem); font-weight: 860; font-stretch: 100%; line-height: 1.04; text-wrap: balance; }
.sb-h3 { margin: 0 0 8px; font-size: clamp(1.1rem, 1rem + 0.3vw, 1.26rem); font-weight: 780; font-stretch: 100%; line-height: 1.25; letter-spacing: -0.01em; }
.sb-lead { max-width: 62ch; margin: 0; color: var(--sb-muted); font-size: clamp(1.06rem, 1rem + 0.3vw, 1.22rem); line-height: 1.6; }
.sb-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--sb-accent); font-family: var(--sb-mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sb-kicker::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--sb-accent); }
.sb-accent { color: var(--sb-accent); }
.sb-nowrap { white-space: nowrap; }
.sb-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.sb-head .sb-kicker { margin: 0; }
.sb-section, .sb-band { padding-block: var(--sb-y); }
/* Solid ground under everything read on the home page; the hero alone lets the rain through. */
body.sb-site .sb-main > .sb-section { background: var(--sb-bg); }
body.sb-site .sb-main > .sb-band { background: var(--sb-bg-2); border-block: var(--sb-bw) solid var(--sb-edge); }
body.sb-site .sb-main > .sb-hero + .sb-band { border-top-width: var(--sb-bw); }
.sb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }

/* A block of the site: an ink edge and a hard shadow. */
.sb-step, .sb-card, .sb-plan, .sb-flow__box, .sb-auth__side, .sb-page, .sb-site .gts-card, .sb-site .gts-notice { border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); box-shadow: var(--sb-sh) var(--sb-sh) 0 var(--sb-hard); }

/* Buttons: an ink edge and a hard shadow; under the pointer the button sinks halfway, pressed it sits flat. */
.sb-site .sb-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.7em 1.35em; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); box-shadow: 3px 3px 0 var(--sb-hard); font-family: var(--sb-font); font-size: 1rem; font-weight: 800; line-height: 1.1; text-decoration: none; text-transform: none; letter-spacing: 0; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s, color 0.12s; }
.sb-site .sb-btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--sb-hard); }
.sb-site .sb-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--sb-hard); }
.sb-site .sb-btn--primary { background: var(--sb-accent); color: var(--sb-on-accent); }
.sb-site .sb-btn--ghost { background: var(--sb-surface); color: var(--sb-text); }
.sb-site .sb-btn--ghost:hover { background: var(--sb-bg-2); }
.sb-site .sb-cta .sb-btn { border-color: var(--sb-on-ink); box-shadow: 3px 3px 0 var(--sb-accent); }
.sb-site .sb-cta .sb-btn:hover { box-shadow: 2px 2px 0 var(--sb-accent); }
.sb-site .sb-cta .sb-btn:active { box-shadow: 0 0 0 var(--sb-accent); }
.sb-site .sb-btn--invert { background: var(--sb-on-ink); color: var(--sb-ink); }
.sb-site .sb-btn--invert-ghost { background: var(--sb-ink); color: var(--sb-on-ink); }
.sb-site .sb-btn--sm { min-height: 40px; padding: 0.5em 1.05em; font-size: 0.95rem; }
.sb-site .sb-btn--quiet { color: var(--sb-muted); }

/* Ticks. */
.sb-ticks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sb-ticks li { position: relative; padding-left: 28px; line-height: 1.45; }
.sb-ticks li::before { content: ""; position: absolute; left: 2px; top: 0.3em; width: 14px; height: 8px; border-left: 3px solid var(--sb-accent); border-bottom: 3px solid var(--sb-accent); transform: rotate(-45deg); }

/* A sticker: a small label in a box of its own (the plans' "Planned", the steps' numbers). */
.sb-step__n, .sb-plan__tag { display: inline-flex; align-items: center; width: fit-content; padding: 3px 9px; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); font-family: var(--sb-mono); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; }

/* ---------------------------------------------------------------------------------------------- header */
.sb-header { position: sticky; top: 0; z-index: 50; background: var(--sb-bg); border-bottom: var(--sb-bw) solid var(--sb-edge); }
.sb-header__bar { display: flex; align-items: center; gap: 20px; height: var(--ic-header-h); }
.sb-site .sb-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--sb-text); text-decoration: none; flex: none; }
.sb-mark { width: 30px; height: 30px; color: var(--sb-text); }
.sb-brand__name { font-size: 1.36rem; font-weight: 880; font-stretch: 110%; line-height: 1; }
.sb-nav { margin-inline: auto; }
.sb-nav__list { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.sb-site .sb-nav__list > li > a { display: inline-block; padding: 7px 10px; border: var(--sb-bw) solid transparent; border-radius: var(--sb-r); color: var(--sb-muted); font-size: 0.96rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sb-site .sb-nav__list > li > a:hover, .sb-site .sb-nav__list > li > a[aria-current] { color: var(--sb-text); border-color: var(--sb-edge); background: var(--sb-surface); }
.sb-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sb-nav + .sb-header__actions { margin-left: 0; }
.sb-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); color: var(--sb-text); cursor: pointer; box-shadow: 2px 2px 0 var(--sb-hard); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.sb-icon-btn:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--sb-hard); }
.sb-icon-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--sb-hard); }
.sb-icon-btn .ic-icon { width: 18px; height: 18px; }
/* The look switch: one button, four states. The moon is dark, the sun light; the pink 01 chip is the rain. */
.sb-look { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 60px; }
.sb-look__bits { padding: 2px 3px 1px; border: var(--sb-bw) solid var(--sb-edge); background: var(--sb-accent); color: var(--sb-on-accent); font-family: var(--sb-mono); font-size: 0.66rem; font-weight: 800; line-height: 1; letter-spacing: 0.02em; }
:root[data-sb-bits="off"] .sb-look__bits { display: none; }
.sb-icon-btn .ic-icon--sun, :root[data-mode="light"] .sb-icon-btn .ic-icon--moon { display: none; }
:root[data-mode="light"] .sb-icon-btn .ic-icon--sun { display: block; }
.sb-menu { display: none; }
.sb-menu .ic-icon--close, .sb-menu[aria-expanded="true"] .ic-icon--menu { display: none; }
.sb-menu[aria-expanded="true"] .ic-icon--close { display: block; }
.sb-drawer[hidden] { display: none; }
.sb-drawer { border-top: var(--sb-bw) solid var(--sb-edge); background: var(--sb-bg); padding: 8px 0 24px; }
.sb-drawer__list { margin: 0 0 20px; padding: 0; list-style: none; }
.sb-site .sb-drawer__list a { display: block; padding: 13px 0; border-bottom: var(--sb-bw) solid var(--sb-line); font-family: var(--sb-display); font-size: 1.15rem; font-weight: 780; text-decoration: none; }
.sb-drawer .sb-actions .sb-btn { flex: 1 1 140px; }
@media (max-width: 1240px) {
	.sb-nav { display: none; }
	.sb-menu { display: inline-grid; }
}
@media (max-width: 560px) {
	.sb-site .sb-header__btn { display: none; }
	.sb-header__bar { gap: 12px; }
	.sb-header__actions { gap: 8px; }
}

/* ------------------------------------------------------------------------------------------------ hero */
.sb-hero { padding: clamp(44px, 6vw, 92px) 0 clamp(60px, 7vw, 108px); overflow: hidden; }
.sb-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.sb-hero__title { margin: 0 0 24px; font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.1rem); font-weight: 900; font-stretch: 102%; line-height: 0.96; letter-spacing: -0.03em; text-wrap: balance; }
.sb-hero__title .sb-accent { display: inline-block; padding: 0 0.12em 0.04em; background: var(--sb-accent); color: var(--sb-on-accent); border-radius: var(--sb-r); }
.sb-hero__lead { max-width: 56ch; margin: 0 0 30px; color: var(--sb-muted); font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); line-height: 1.6; }
.sb-hero__note { margin: 18px 0 0; color: var(--sb-muted); font-size: 0.95rem; }
.sb-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 32px 0 0; padding: 18px 0 0; border-top: var(--sb-bw) solid var(--sb-edge); list-style: none; font-size: 0.95rem; font-weight: 700; }
.sb-hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.sb-hero__facts .ic-icon { width: 18px; height: 18px; color: var(--sb-accent); flex: none; }

/* The illustration of a screening screen, drawn in the app's own face (black and white, fixed width), as a block. */
.sb-shot { margin: 0; min-width: 0; padding: 0 var(--sb-sh-lg) var(--sb-sh-lg) 0; }
.sb-shot__win { overflow: hidden; border: 3px solid var(--sb-edge); border-radius: var(--sb-r); background: #000; color: #fff; font-family: var(--sb-mono); box-shadow: var(--sb-sh-lg) var(--sb-sh-lg) 0 var(--sb-accent); }
.sb-shot__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 2px solid #fff; font-size: 0.8rem; white-space: nowrap; overflow: hidden; }
.sb-shot__dots { display: inline-flex; gap: 6px; }
.sb-shot__dots i { width: 10px; height: 10px; border: 2px solid #fff; }
.sb-shot__dots i:first-child { background: #ff5c93; border-color: #ff5c93; }
.sb-shot__app { font-weight: 800; }
.sb-shot__tab { padding: 3px 8px; color: #ccc; border: 2px solid transparent; }
.sb-shot__tab.is-on { background: #fff; color: #000; font-weight: 700; }
.sb-shot__body { display: grid; gap: 14px; padding: clamp(16px, 2.4vw, 24px); }
.sb-shot__stage { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0; font-size: 0.82rem; font-weight: 700; }
.sb-shot__stage span { color: #bbb; font-weight: 400; }
.sb-shot__record { padding: 16px; border: 2px solid #fff; box-shadow: 4px 4px 0 #fff; margin-right: 4px; }
.sb-shot__title { margin: 0 0 6px; font-family: var(--sb-font); font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.1rem); font-weight: 800; line-height: 1.3; }
.sb-shot__meta { margin: 0 0 12px; color: #bbb; font-size: 0.75rem; }
.sb-shot__line { display: block; height: 7px; margin-top: 8px; background: repeating-linear-gradient(90deg, #fff 0 6px, #000 6px 9px); opacity: 0.55; }
.sb-shot__line.is-short { width: 62%; }
.sb-shot__votes { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-shot__btn { padding: 7px 14px; border: 2px solid #fff; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: 3px 3px 0 #fff; }
.sb-shot__btn.is-yes { background: #ff5c93; border-color: #ff5c93; color: #000; box-shadow: 1px 1px 0 #fff; transform: translate(2px, 2px); }
.sb-shot__ai { padding: 12px 14px; border: 2px dashed #888; font-size: 0.78rem; line-height: 1.5; }
.sb-shot__ai p { margin: 0; }
.sb-shot__ai b { color: #ff5c93; }
.sb-shot__hint { margin-top: 4px !important; color: #bbb; }
.sb-shot__prisma { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 0.72rem; color: #ccc; }
.sb-shot__prisma span { padding: 8px; border-top: 3px solid #fff; }
.sb-shot__prisma b { display: block; color: #fff; font-size: 1rem; }
.sb-shot__prisma span:last-child { border-top-color: #ff5c93; }
/* In light mode the illustration takes the light palette: white window, ink lines and text, the same pink. */
:root[data-mode="light"] .sb-shot__win { background: #fff; color: #121212; }
:root[data-mode="light"] .sb-shot__bar { border-bottom-color: #121212; }
:root[data-mode="light"] .sb-shot__dots i { border-color: #121212; }
:root[data-mode="light"] .sb-shot__dots i:first-child { background: #ff5c93; border-color: #121212; }
:root[data-mode="light"] .sb-shot__tab { color: #46453f; }
:root[data-mode="light"] .sb-shot__tab.is-on { background: #121212; color: #fff; }
:root[data-mode="light"] :is(.sb-shot__stage span, .sb-shot__meta, .sb-shot__hint) { color: #46453f; }
:root[data-mode="light"] .sb-shot__record { border-color: #121212; box-shadow: 4px 4px 0 #121212; }
:root[data-mode="light"] .sb-shot__line { background: repeating-linear-gradient(90deg, #121212 0 6px, #fff 6px 9px); opacity: 0.4; }
:root[data-mode="light"] .sb-shot__btn { border-color: #121212; box-shadow: 3px 3px 0 #121212; }
:root[data-mode="light"] .sb-shot__btn.is-yes { background: #ff5c93; border-color: #121212; color: #121212; box-shadow: 1px 1px 0 #121212; }
:root[data-mode="light"] .sb-shot__ai { border-color: #6b6a63; }
:root[data-mode="light"] .sb-shot__ai b { color: #c4124f; }
:root[data-mode="light"] .sb-shot__prisma { color: #46453f; }
:root[data-mode="light"] .sb-shot__prisma span { border-top-color: #121212; }
:root[data-mode="light"] .sb-shot__prisma b { color: #121212; }
:root[data-mode="light"] .sb-shot__prisma span:last-child { border-top-color: #c4124f; }
.sb-shot__cap { width: fit-content; margin: 16px auto 0; padding: 2px 8px; background: var(--sb-bg); color: var(--sb-muted); font-size: 0.85rem; text-align: center; }

/* ------------------------------------------------------------------------------------------- AI-first */
.sb-first { padding-block: clamp(52px, 6vw, 92px); }
.sb-first__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.sb-first__text .sb-lead { color: var(--sb-text); }
.sb-first__origin { margin: 24px 0 0; padding-left: 16px; border-left: 4px solid var(--sb-accent); color: var(--sb-muted); font-weight: 700; }

/* ------------------------------------------------------------------------------------------- the steps */
.sb-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.sb-step { padding: 22px 22px 24px; min-width: 0; }
.sb-step__n { margin-bottom: 16px; background: var(--sb-accent); color: var(--sb-on-accent); }
.sb-step p, .sb-card p, .sb-trust__item p { margin: 0; color: var(--sb-muted); line-height: 1.55; }

/* ----------------------------------------------------------------------------------- bring your own AI */
.sb-byo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sb-byo__text .sb-h2 { margin: 0 0 18px; }
.sb-byo__steps { display: grid; gap: 14px; margin: 26px 0 30px; padding: 0; list-style: none; counter-reset: sb-byo; }
.sb-byo__steps li { position: relative; padding-left: 46px; line-height: 1.5; counter-increment: sb-byo; }
.sb-byo__steps li::before { content: counter(sb-byo); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); color: var(--sb-text); font-family: var(--sb-mono); font-size: 0.85rem; font-weight: 800; }
.sb-byo__note { margin: 20px 0 0; color: var(--sb-muted); font-size: 0.95rem; }
.sb-byo__art { margin: 0; min-width: 0; padding-right: var(--sb-sh); }
.sb-flow { display: grid; gap: 0; justify-items: stretch; }
.sb-flow__box { display: grid; gap: 4px; padding: 22px; }
.sb-flow__box.is-you { box-shadow: var(--sb-sh-lg) var(--sb-sh-lg) 0 var(--sb-accent); }
.sb-flow__box b { font-family: var(--sb-display); font-size: 1.24rem; font-weight: 820; }
.sb-flow__box span { color: var(--sb-muted); }
.sb-flow__label { color: var(--sb-accent) !important; font-family: var(--sb-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sb-flow__arrow { position: relative; height: 72px; margin-inline: auto; width: 3px; background: var(--sb-edge); }
.sb-flow__arrow::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 12px; height: 12px; border-right: 3px solid var(--sb-edge); border-bottom: 3px solid var(--sb-edge); transform: translate(-50%, 0) rotate(45deg); }
.sb-flow__arrow span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--sb-mono); font-size: 0.8rem; font-weight: 700; color: var(--sb-muted); }
.sb-flow__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sb-flow__chips i { padding: 3px 9px; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); color: var(--sb-text); font-family: var(--sb-mono); font-size: 0.78rem; font-style: normal; font-weight: 700; }
.sb-byo__cap { margin-top: 18px; color: var(--sb-muted); font-size: 0.82rem; line-height: 1.5; }

/* ----------------------------------------------------------------------------------- cards and trust */
.sb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.sb-card { padding: 24px; min-width: 0; }
.sb-card__n { display: block; margin-bottom: 12px; color: var(--sb-accent); font-family: var(--sb-mono); font-size: 0.85rem; font-weight: 800; }
.sb-card a { text-decoration-color: currentColor !important; }
.sb-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); box-shadow: var(--sb-sh) var(--sb-sh) 0 var(--sb-hard); overflow: hidden; }
.sb-trust__item { display: flex; gap: 16px; min-width: 0; padding: clamp(22px, 3vw, 32px); border-color: var(--sb-edge); border-style: solid; border-width: 0; }
.sb-trust__item:nth-child(odd) { border-right-width: var(--sb-bw); }
.sb-trust__item:nth-child(n + 3) { border-top-width: var(--sb-bw); }
.sb-trust__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-accent); color: var(--sb-on-accent); }
.sb-trust__icon .ic-icon { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------------------------- pricing */
.sb-plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 0 0 40px; padding: 0 var(--sb-sh) var(--sb-sh) 0; list-style: none; align-items: stretch; }
.sb-plan { display: flex; flex-direction: column; gap: 4px; padding: 22px 20px 24px; min-width: 0; }
.sb-plan.is-featured { border-width: 3px; box-shadow: var(--sb-sh-lg) var(--sb-sh-lg) 0 var(--sb-accent); }
.sb-plan__tag { margin: 0 0 12px; background: var(--sb-bg-2); color: var(--sb-text); }
.sb-plan.is-featured .sb-plan__tag { background: var(--sb-accent); color: var(--sb-on-accent); }
.sb-plan__price { margin: 0; font-family: var(--sb-display); font-size: 2rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.sb-plan__note { margin: 0 0 8px; color: var(--sb-muted); line-height: 1.45; min-height: 2.9em; }
.sb-plan__per { margin: 0 0 16px; padding-bottom: 16px; border-bottom: var(--sb-bw) solid var(--sb-edge); color: var(--sb-muted); font-size: 0.88rem; line-height: 1.45; }
.sb-plan__per span { color: var(--sb-text); }
.sb-plan .sb-ticks { font-size: 0.95rem; }
@media (max-width: 1180px) { .sb-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .sb-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sb-plans { grid-template-columns: minmax(0, 1fr); } .sb-plan__note { min-height: 0; } }

/* ------------------------------------------------------------------------------------------------- FAQ */
.sb-faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.sb-faq { display: grid; gap: 12px; }
.sb-faq__item { border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); transition: box-shadow 0.12s ease, transform 0.12s ease; }
.sb-faq__item[open] { box-shadow: var(--sb-sh) var(--sb-sh) 0 var(--sb-hard); transform: translate(-2px, -2px); }
.sb-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; list-style: none; font-family: var(--sb-display); font-size: clamp(1.04rem, 1rem + 0.3vw, 1.18rem); font-weight: 780; line-height: 1.3; border-radius: var(--sb-r); }
.sb-faq__item summary::-webkit-details-marker { display: none; }
.sb-faq__item summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); font-family: var(--sb-mono); font-size: 1.1rem; font-weight: 800; }
.sb-faq__item[open] summary::after { content: "\2212"; background: var(--sb-accent); color: var(--sb-on-accent); }
.sb-faq__answer { max-width: 66ch; margin: 0; padding: 0 18px 20px; color: var(--sb-muted); line-height: 1.65; }

/* ------------------------------------------------------------------------------------------ the way in */
.sb-cta { padding-block: 0 var(--sb-y); }
body.sb-site .sb-main > .sb-cta { background: var(--sb-bg); }
.sb-cta .sb-wrap { padding-right: var(--sb-sh-lg); }
.sb-cta__inner { display: grid; justify-items: center; gap: 18px; padding: clamp(44px, 6vw, 84px) clamp(20px, 4vw, 56px); border: 3px solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-ink); color: var(--sb-on-ink); text-align: center; box-shadow: var(--sb-sh-lg) var(--sb-sh-lg) 0 var(--sb-accent); }
.sb-site .sb-cta .sb-h2 { color: var(--sb-on-ink); }
.sb-cta .sb-lead { color: color-mix(in srgb, var(--sb-on-ink) 82%, var(--sb-ink)); }
.sb-cta .sb-actions { justify-content: center; margin-top: 8px; }
.sb-cta :focus-visible { outline-color: var(--sb-accent); }

/* --------------------------------------------------------------------------------------------- footer */
.sb-footer { padding: 60px 0 36px; border-top: var(--sb-bw) solid var(--sb-edge); background: var(--sb-bg-2); font-size: 0.95rem; }
.sb-footer__inner { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
.sb-footer__line { max-width: 40ch; margin: 14px 0 0; color: var(--sb-muted); line-height: 1.5; }
.sb-footer__title { margin: 0 0 14px; color: var(--sb-text); font-family: var(--sb-mono); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sb-footer__col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.sb-site .sb-footer__col a { color: var(--sb-muted); text-decoration: none; }
.sb-site .sb-footer__col a:hover { color: var(--sb-text); text-decoration: underline; text-decoration-thickness: 2px; }
.sb-footer__copy { grid-column: 1 / -1; margin: 14px 0 0; padding-top: 20px; border-top: var(--sb-bw) solid var(--sb-edge); color: var(--sb-muted); font-size: 0.88rem; }

/* ----------------------------------------------------------------------- the public pages (the frame) */
/* The rain falls on the frame's ground; what is read sits on a block. */
.sb-page { max-width: 820px; margin-block: clamp(32px, 5vw, 72px); padding: clamp(24px, 4.5vw, 56px); }
.sb-page__head { margin-bottom: 28px; padding-bottom: 24px; border-bottom: var(--sb-bw) solid var(--sb-edge); }
.sb-page__head .sb-kicker { margin-bottom: 12px; }
.sb-site .sb-prose { font-size: 1.06rem; line-height: 1.7; color: var(--sb-text); }
.sb-site .sb-prose :is(h2, h3, h4) { font-family: var(--sb-display); font-weight: 820; text-transform: none; letter-spacing: -0.01em; }
.sb-site .sb-prose a:where(:not(.gts-btn, .ic-btn, .sb-btn)) { color: var(--sb-accent); }
.sb-account { padding-block: clamp(32px, 5vw, 64px); }
.sb-auth { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 72px); align-items: start; padding-block: clamp(32px, 5vw, 72px) clamp(56px, 8vw, 104px); }
.sb-auth__side { position: sticky; top: calc(var(--ic-header-h) + 28px); display: flex; flex-direction: column; gap: 16px; padding: clamp(26px, 4vw, 44px); background: var(--sb-bg-2); }
.sb-auth__mark { width: 52px; height: 52px; color: var(--sb-text); }
.sb-auth__title { margin: 12px 0 0; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); font-weight: 880; font-stretch: 104%; line-height: 1.02; }
.sb-auth__text { margin: 0; max-width: 34ch; color: var(--sb-muted); font-size: 1.05rem; }
.sb-auth__side .sb-ticks { margin-top: 10px; font-size: 0.98rem; }
.sb-auth__main { min-width: 0; }
.sb-auth__h1 { width: fit-content; max-width: 100%; padding: 0 0.1em; background: var(--sb-bg); font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); }
@media (max-width: 860px) {
	.sb-auth { grid-template-columns: minmax(0, 1fr); }
	.sb-auth__side { position: static; order: 2; }
	.sb-auth__title { margin-top: 4px; }
}

/* The site layer's forms and cards (gts-*), in the product's shape: ink edges, hard shadows, sentence case. */
.sb-site .gts-card, .sb-site .gts-notice { border-color: var(--sb-edge); }
.sb-site .gts-btn { border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); box-shadow: 3px 3px 0 var(--sb-hard); text-transform: none; letter-spacing: 0; font-family: var(--sb-font); font-weight: 800; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.sb-site .gts-btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--sb-hard); }
.sb-site .gts-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--sb-hard); }
.sb-site .gts-btn--primary, .sb-site .gts-btn--primary:hover { background: var(--sb-accent); border-color: var(--sb-edge); color: var(--sb-on-accent); }
.sb-site .gts-input, .sb-site .gts-form select, .sb-site .gts-form textarea { border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-bg); color: var(--sb-text); }
.sb-site .gts-input:focus, .sb-site .gts-form select:focus, .sb-site .gts-form textarea:focus { border-color: var(--sb-accent); box-shadow: 3px 3px 0 var(--sb-accent); outline: none; }
.sb-site .gts-input:focus-visible, .sb-site .gts-form select:focus-visible, .sb-site .gts-form textarea:focus-visible { outline: 3px solid var(--sb-accent); outline-offset: 2px; }
.sb-site .gts-chip { border-radius: var(--sb-r); }
.sb-site .gts-label { font-family: var(--sb-font); font-weight: 700; }
.sb-site .gts-card__title, .sb-site .gts-section__title { font-family: var(--sb-display); font-weight: 820; text-transform: none; }
.sb-site .gts-btn[disabled], .sb-site .gts-btn[disabled]:hover { border-radius: var(--sb-r); transform: none; box-shadow: none; }

/* ------------------------------------------------------------------------------------------ narrower */
@media (max-width: 1020px) {
	.sb-hero__grid, .sb-byo__grid, .sb-first__grid, .sb-faq__grid { grid-template-columns: minmax(0, 1fr); }
	.sb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.sb-steps, .sb-cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.sb-trust { grid-template-columns: minmax(0, 1fr); }
	.sb-trust__item:nth-child(odd) { border-right-width: 0; }
	.sb-trust__item:nth-child(n + 2) { border-top-width: var(--sb-bw); }
	.sb-shot__prisma { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-actions .sb-btn { flex: 1 1 auto; }
	.sb-hero__facts { flex-direction: column; }
	.sb-page { margin-inline: var(--sb-gutter); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.sb-site .sb-btn, .sb-site .gts-btn, .sb-icon-btn, .sb-faq__item { transition: none; }
	.sb-faq__item[open] { transform: none; }
}

/* ======================================================================================== 3.0: the rebuild */
/* The pages are sections drawn from data (inc/render.php); what follows styles the pieces they add. */

/* The announcement line above the header. */
.sb-topbar { background: var(--sb-ink); color: var(--sb-on-ink); font-size: 0.9rem; font-weight: 700; }
.sb-topbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding-block: 8px; text-align: center; }
.sb-topbar__tag { padding: 1px 7px; background: var(--sb-accent); color: var(--sb-on-accent); font-family: var(--sb-mono); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sb-site .sb-topbar a { color: var(--sb-on-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* The menus: buttons that look like the menu's links, and their panels. */
.sb-header__bar { position: relative; gap: 16px; }
.sb-dd { position: relative; }
.sb-dd__btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: var(--sb-bw) solid transparent; border-radius: var(--sb-r); background: none; color: var(--sb-muted); font: 700 0.96rem/1.4 var(--sb-font); white-space: nowrap; cursor: pointer; }
.sb-dd__btn:hover, .sb-dd.is-open .sb-dd__btn { color: var(--sb-text); border-color: var(--sb-edge); background: var(--sb-surface); }
.sb-dd__caret { width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.12s ease; }
.sb-dd.is-open .sb-dd__caret { margin-top: 3px; transform: rotate(-135deg); }
.sb-dd__panel { position: absolute; top: calc(100% + 12px); left: 0; z-index: 60; display: none; gap: 8px 28px; width: max-content; max-width: min(380px, 90vw); padding: 18px; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); box-shadow: var(--sb-sh) var(--sb-sh) 0 var(--sb-hard); }
.sb-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.sb-dd--wide .sb-dd__panel { left: 50%; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(780px, 92vw); max-width: none; transform: translateX(-40%); }
.sb-dd.is-open .sb-dd__panel { display: grid; }
@media (hover: hover) and (pointer: fine) { .sb-dd:hover .sb-dd__panel { display: grid; } }
.sb-dd__title { margin: 0 0 8px; padding-bottom: 8px; border-bottom: var(--sb-bw) solid var(--sb-edge); color: var(--sb-accent); font-family: var(--sb-mono); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sb-dd__col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sb-site .sb-dd__col a { display: grid; gap: 1px; padding: 8px 10px; border: var(--sb-bw) solid transparent; border-radius: var(--sb-r); color: var(--sb-text); text-decoration: none; }
.sb-site .sb-dd__col a:hover, .sb-site .sb-dd__col a[aria-current] { border-color: var(--sb-edge); background: var(--sb-bg-2); }
.sb-dd__col a b { font-weight: 800; font-size: 0.98rem; }
.sb-dd__col a span { color: var(--sb-muted); font-size: 0.86rem; line-height: 1.35; }
.sb-site .sb-btn--quiet { border-color: transparent; background: none; box-shadow: none; color: var(--sb-text); }
.sb-site .sb-btn--quiet:hover { border-color: var(--sb-edge); background: var(--sb-surface); box-shadow: 2px 2px 0 var(--sb-hard); transform: none; }
.sb-header__actions { gap: 8px; }

/* The phone drawer's groups. */
.sb-drawer { max-height: calc(100vh - var(--ic-header-h)); overflow-y: auto; }
.sb-drawer__group summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: var(--sb-bw) solid var(--sb-line); font-family: var(--sb-display); font-size: 1.15rem; font-weight: 780; cursor: pointer; list-style: none; }
.sb-drawer__group summary::-webkit-details-marker { display: none; }
.sb-drawer__group summary::after { content: "+"; font-family: var(--sb-mono); font-weight: 800; }
.sb-drawer__group[open] summary::after { content: "\2212"; color: var(--sb-accent); }
.sb-drawer__group ul { margin: 6px 0 12px; padding: 0 0 0 14px; list-style: none; border-left: 3px solid var(--sb-accent); }
.sb-drawer__group .sb-dd__title { margin: 14px 0 4px; padding: 0; border: 0; }
.sb-site .sb-drawer__group ul a { display: block; padding: 9px 0; font-weight: 700; text-decoration: none; }

/* The hero, without a picture, and its proof line. */
.sb-hero--solo .sb-hero__grid { grid-template-columns: minmax(0, 1fr); }
.sb-hero--solo .sb-hero__text { max-width: 860px; }
.sb-hero--solo { padding-bottom: clamp(48px, 6vw, 88px); }
.sb-hero__proof { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: -8px 0 28px; padding: 6px 0; font-family: var(--sb-mono); font-size: 0.9rem; font-weight: 800; color: var(--sb-text); }
.sb-hero__dot { color: var(--sb-accent); }

/* The scrolling strip of text under the home hero. */
.sb-strip { overflow: hidden; border-block: var(--sb-bw) solid var(--sb-edge); background: var(--sb-accent); color: var(--sb-on-accent); }
.sb-strip__track { display: flex; width: max-content; animation: sb-strip 48s linear infinite; }
.sb-strip:hover .sb-strip__track { animation-play-state: paused; }
.sb-strip__list { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.sb-strip__list li { display: flex; align-items: center; gap: 28px; padding: 15px 0 15px 28px; font-family: var(--sb-display); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); font-weight: 820; white-space: nowrap; }
.sb-strip__list li::after { content: ""; width: 10px; height: 10px; background: var(--sb-on-accent); }
@keyframes sb-strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.sb-strip__track { animation: none; width: auto; }
	.sb-strip__list { flex-wrap: wrap; justify-content: center; }
	.sb-strip__list[aria-hidden] { display: none; }
}

/* The institutions page's in-page links. */
.sb-tabs { position: sticky; top: var(--ic-header-h); z-index: 40; border-block: var(--sb-bw) solid var(--sb-edge); background: var(--sb-bg); }
.sb-tabs ul { display: flex; gap: 4px; margin: 0; padding: 8px 0; overflow-x: auto; list-style: none; scrollbar-width: thin; }
.sb-site .sb-tabs a { display: inline-block; padding: 6px 12px; border: var(--sb-bw) solid transparent; border-radius: var(--sb-r); color: var(--sb-muted); font-weight: 700; text-decoration: none; white-space: nowrap; }
.sb-site .sb-tabs a:hover { border-color: var(--sb-edge); color: var(--sb-text); background: var(--sb-surface); }
.sb-main > section[id] { scroll-margin-top: calc(var(--ic-header-h) + 64px); }

/* The problem and how IAMB.AI handles it. */
.sb-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 0 var(--sb-sh-lg) var(--sb-sh-lg) 0; }
.sb-split__box { padding: clamp(22px, 3vw, 32px); border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); box-shadow: var(--sb-sh) var(--sb-sh) 0 var(--sb-hard); }
.sb-split__box.is-ours { border-width: 3px; box-shadow: var(--sb-sh-lg) var(--sb-sh-lg) 0 var(--sb-accent); }
.sb-split__box p { margin: 0; font-size: 1.08rem; line-height: 1.6; }
.sb-split__box p + p { margin-top: 12px; }
.sb-split__tag { margin-bottom: 12px !important; color: var(--sb-accent); font-family: var(--sb-mono); font-size: 0.8rem !important; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

/* Cards in two or three columns; a card with a link. */
.sb-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-cards { padding: 0 var(--sb-sh) var(--sb-sh) 0; }
.sb-site .sb-card h3 a { color: var(--sb-text); text-decoration: underline; text-decoration-color: var(--sb-accent) !important; text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.sb-card--link { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.sb-card--link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sb-accent); }
.sb-card__tag { margin: 0 0 12px; background: var(--sb-bg-2); color: var(--sb-text); }
.sb-card p + p { margin-top: 10px; }
.sb-step .sb-ticks { gap: 6px; margin-top: 4px; color: var(--sb-muted); font-size: 0.95rem; }
.sb-step .sb-ticks li { padding-left: 24px; }
.sb-step .sb-ticks li::before { width: 11px; height: 6px; }

/* Numbers. */
.sb-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); box-shadow: var(--sb-sh) var(--sb-sh) 0 var(--sb-hard); }
.sb-stat { display: grid; gap: 6px; align-content: start; padding: clamp(18px, 2.4vw, 28px); border-left: var(--sb-bw) solid var(--sb-edge); min-width: 0; }
.sb-stat:first-child { border-left: 0; }
.sb-stat__n { font-family: var(--sb-display); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); font-weight: 900; line-height: 1; color: var(--sb-accent); }
.sb-stat span { color: var(--sb-muted); line-height: 1.4; }
.sb-stats__more { margin-top: 28px; }

/* Lists of ticks in columns, and notes. */
.sb-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; padding: 0 var(--sb-sh) var(--sb-sh) 0; }
.sb-list { padding: 24px; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); box-shadow: var(--sb-sh) var(--sb-sh) 0 var(--sb-hard); min-width: 0; }
.sb-list .sb-h3 { margin-bottom: 14px; padding-bottom: 12px; border-bottom: var(--sb-bw) solid var(--sb-edge); }
.sb-list .sb-ticks { gap: 8px; color: var(--sb-muted); }
.sb-site .sb-list a, .sb-site .sb-note a, .sb-site .sb-faq__answer a, .sb-site .sb-lead a { color: var(--sb-accent); }
.sb-notes { display: grid; gap: 22px; max-width: 860px; padding: 0 var(--sb-sh) var(--sb-sh) 0; }
.sb-note { padding: clamp(22px, 3vw, 32px); border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); box-shadow: var(--sb-sh) var(--sb-sh) 0 var(--sb-hard); }
.sb-note p { margin: 0; color: var(--sb-muted); line-height: 1.65; }
.sb-note p + p { margin-top: 12px; }
.sb-note .sb-ticks { color: var(--sb-muted); }

/* The pricing page's billing switch, and the home page's short version of the plans. */
.sb-bill { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 28px; }
.sb-bill[hidden] { display: none; }
.sb-bill__label { font-family: var(--sb-mono); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sb-bill__opts { display: inline-flex; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); box-shadow: 3px 3px 0 var(--sb-hard); }
.sb-bill__opt { padding: 9px 16px; border: 0; background: none; color: var(--sb-text); font: 800 0.95rem/1.2 var(--sb-font); cursor: pointer; }
.sb-bill__opt + .sb-bill__opt { border-left: var(--sb-bw) solid var(--sb-edge); }
.sb-bill__opt[aria-pressed="true"] { background: var(--sb-accent); color: var(--sb-on-accent); }
.sb-bill__opt span { font-weight: 600; font-size: 0.82rem; }
.sb-plan__alt { display: block; color: var(--sb-text); }
.sb-plans.is-switched .sb-plan__alt:not(.is-kept) { display: none; }
.sb-plans:not(.is-switched) [data-q] { display: none; }
.sb-plans--teaser .sb-plan__per { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* The compare table: its own sideways scroll on a phone, never the page's. */
.sb-compare { max-width: 100%; overflow-x: auto; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); box-shadow: var(--sb-sh) var(--sb-sh) 0 var(--sb-hard); margin-right: var(--sb-sh); }
.sb-compare table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.95rem; }
.sb-compare th, .sb-compare td { padding: 11px 14px; border-bottom: 1px solid var(--sb-line); text-align: center; vertical-align: middle; }
.sb-compare thead th { position: sticky; top: 0; background: var(--sb-ink); color: var(--sb-on-ink); font-family: var(--sb-display); font-weight: 820; }
.sb-compare th[scope="row"], .sb-compare thead th:first-child { text-align: left; font-weight: 700; }
.sb-compare tbody th[scope="row"] { color: var(--sb-text); }
.sb-compare__group th { padding-top: 18px; background: var(--sb-bg-2); color: var(--sb-accent) !important; font-family: var(--sb-mono); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-align: left !important; text-transform: uppercase; }
.sb-compare td { color: var(--sb-muted); font-weight: 700; }
.sb-compare__yes .ic-icon { width: 20px; height: 20px; color: var(--sb-accent); }
.sb-compare__no { color: var(--sb-line); font-size: 1.4rem; line-height: 1; }
.sb-compare__note { margin: 18px 0 0; color: var(--sb-muted); font-size: 0.92rem; }

/* The FAQ in groups. */
.sb-faq__group { margin: 12px 0 2px; font-family: var(--sb-mono); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-accent); }
.sb-faq__group:first-child { margin-top: 0; }

/* A feature page's illustration: the screening window's frame with lines of label and value. */
.sb-shot__rows { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 2px solid #fff; box-shadow: 4px 4px 0 #fff; margin-right: 4px; }
.sb-shot__rows li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 14px; border-top: 2px solid #fff; font-size: 0.85rem; min-width: 0; }
.sb-shot__rows li:first-child { border-top: 0; }
.sb-shot__rows li span { color: #ccc; min-width: 0; overflow-wrap: anywhere; }
.sb-shot__rows li b { flex: none; max-width: 60%; text-align: right; overflow-wrap: anywhere; }
.sb-shot__rows li.is-on { background: #ff5c93; color: #000; }
.sb-shot__rows li.is-on span { color: #000; }
:root[data-mode="light"] .sb-shot__rows { border-color: #121212; box-shadow: 4px 4px 0 #121212; }
:root[data-mode="light"] .sb-shot__rows li { border-top-color: #121212; }
:root[data-mode="light"] .sb-shot__rows li:first-child { border-top: 0; }
:root[data-mode="light"] .sb-shot__rows li span { color: #46453f; }
:root[data-mode="light"] .sb-shot__rows li.is-on, :root[data-mode="light"] .sb-shot__rows li.is-on span { color: #121212; }

/* A page's own content, inside a section. */
.sb-page--inline { margin: 0; max-width: 820px; }
.sb-page__h2 { margin-bottom: 20px; }

/* The footer: five columns, the features one in two. */
.sb-footer__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.sb-footer__col--features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: 20px; align-content: start; }
.sb-footer__col--features .sb-footer__title { grid-column: 1 / -1; }
.sb-footer__col--features .sb-footer__sub:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.sb-footer__col--features ul:nth-of-type(1) { grid-column: 1; grid-row: 3; }
.sb-footer__col--features ul:nth-of-type(2) { grid-column: 2; grid-row: 3; }
.sb-footer__sub { margin: 0 0 10px; color: var(--sb-accent); font-size: 0.82rem; font-weight: 800; }
.sb-footer__chat { display: grid; gap: 2px; margin: 16px 0; }
.sb-site .sb-footer__chat a { color: var(--sb-text); font-weight: 800; }
.sb-footer__chat span { color: var(--sb-muted); font-size: 0.9rem; }

@media (max-width: 1240px) {
	.sb-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sb-footer__brand { grid-column: 1 / -1; }
	.sb-footer__col--features { grid-column: 1 / -1; }
	.sb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sb-stat:nth-child(4) { border-left: 0; }
	.sb-stat:nth-child(n + 4) { border-top: var(--sb-bw) solid var(--sb-edge); }
}
@media (max-width: 1020px) {
	.sb-split, .sb-cards--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.sb-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.sb-footer__col--features { grid-template-columns: minmax(0, 1fr); }
	.sb-footer__col--features .sb-footer__sub:nth-of-type(2), .sb-footer__col--features ul:nth-of-type(1), .sb-footer__col--features ul:nth-of-type(2) { grid-column: auto; grid-row: auto; }
	.sb-footer__col--features ul:nth-of-type(1) { margin-bottom: 16px; }
	.sb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-stat { border-left: 0; border-top: var(--sb-bw) solid var(--sb-edge); }
	.sb-stat:nth-child(even) { border-left: var(--sb-bw) solid var(--sb-edge); }
	.sb-stat:nth-child(-n + 2) { border-top: 0; }
	.sb-stat:nth-child(4) { border-left: var(--sb-bw) solid var(--sb-edge); }
	.sb-stat:nth-child(n + 4) { border-top: var(--sb-bw) solid var(--sb-edge); }
	.sb-topbar { font-size: 0.82rem; }
	.sb-shot__rows li { flex-direction: column; gap: 2px; }
	.sb-shot__rows li b { max-width: none; text-align: left; }
}

/* The parent clears every main child's ground; these keep theirs. The hero titles of the rebuilt pages are longer. */
body.sb-site .sb-main > .sb-strip { background: var(--sb-accent); }
body.sb-site .sb-main > .sb-tabs { background: var(--sb-bg); }
.sb-hero__title { font-size: clamp(2.3rem, 1.2rem + 3.5vw, 4.25rem); }

/* The compare table scrolls inside its own box. Its screen-reader labels are absolutely placed; without a positioned
 * box around them they hang off the table's far edge and widen the whole page on a phone. */
.sb-compare { position: relative; }

/* The "trusted by" strip under the home hero: names as wordmark tiles, scrolling, still for reduced motion. */
body.sb-site .sb-main > .sb-brands { background: var(--sb-bg-2); }
.sb-brands { padding: 26px 0 30px; border-block: var(--sb-bw) solid var(--sb-edge); }
.sb-brands__label { margin: 0 0 16px; color: var(--sb-muted); font-family: var(--sb-mono); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.sb-brands__view { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sb-brands__track { display: flex; width: max-content; animation: sb-strip 36s linear infinite; }
.sb-brands:hover .sb-brands__track { animation-play-state: paused; }
.sb-brands__list { display: flex; flex: none; gap: 22px; margin: 0; padding: 4px 22px 8px 0; list-style: none; }
.sb-brands__mark { display: inline-flex; align-items: center; min-height: 64px; padding: 0 30px; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); box-shadow: var(--sb-sh) var(--sb-sh) 0 var(--sb-hard); color: var(--sb-text); font-family: var(--sb-display); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem); font-weight: 850; letter-spacing: -0.01em; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
	.sb-brands__view { -webkit-mask: none; mask: none; }
	.sb-brands__track { animation: none; width: auto; }
	.sb-brands__list { flex-wrap: wrap; justify-content: center; padding-right: 0; }
	.sb-brands__list[aria-hidden] { display: none; }
}

/* The help library in the product's palette: its AI accent (the parent maps it to mint) is the pink. */
body.sb-site .gtl { --gtl-ai: var(--sb-accent); --gtl-on-ai: var(--sb-on-accent); --gtl-ai-soft: var(--sb-accent-soft); }

/* The log-in page's "Keep me logged in": a box and a label big enough to tap. */
.sb-site .gts-check label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.sb-site .gts-check input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--sb-accent); }

/* Tap targets on touch screens: 44 px tall, without moving the words. */
@media (pointer: coarse), (max-width: 640px) {
	.sb-site .sb-topbar a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; padding-inline: 6px; }
	.sb-footer__col ul { gap: 0; }
	.sb-site .sb-footer__col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
	.sb-site .sb-footer__chat a { display: inline-flex; align-items: center; min-height: 44px; }
	.sb-site .gtl-chip { min-height: 44px; }
	.sb-site .gtl-btn--small { min-height: 44px; }
	.sb-site .gtl-iconbtn { width: 44px; height: 44px; }
	.sb-site .sb-brand { min-height: 44px; }
	.sb-site .sb-bill__opt { min-height: 44px; }
	.sb-site :is(.gtl-bar__brand, .gtl-side__link, .gtl-cat__more, .gtl-section__more) { display: inline-flex; align-items: center; min-height: 44px; }
	.sb-site .gtl-side__link { display: flex; }
	.sb-site .gtl-side__title { display: flex; align-items: center; min-height: 44px; }
}

/* The chat window: its two header buttons (make larger, close) as one pair in the product look, 44 px to tap.
   The chat sets display on every icon (.gtchat--standalone .gt-icon) after the rule that hides the one not in use,
   so "larger" and "smaller" both showed at once, the second cut off; which one shows is chosen again here. */
body.sb-site .gtchat .gtchat-header :is(.gtchat-max, .gtchat-close) { display: inline-grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); color: var(--sb-text); box-shadow: 2px 2px 0 var(--sb-hard); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
body.sb-site .gtchat .gtchat-header :is(.gtchat-max, .gtchat-close):hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--sb-hard); }
body.sb-site .gtchat .gtchat-header :is(.gtchat-max, .gtchat-close):active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--sb-hard); }
body.sb-site .gtchat .gtchat-header :is(.gtchat-max, .gtchat-close) .gt-icon { width: 20px; height: 20px; }
body.sb-site .gtchat .gtchat-max .gtchat-max__grow { display: block; }
body.sb-site .gtchat .gtchat-max .gtchat-max__shrink,
body.sb-site .gtchat .gtchat-max[aria-pressed="true"] .gtchat-max__grow { display: none; }
body.sb-site .gtchat .gtchat-max[aria-pressed="true"] .gtchat-max__shrink { display: block; }
@media (prefers-reduced-motion: reduce) {
	body.sb-site .gtchat .gtchat-header :is(.gtchat-max, .gtchat-close) { transition: none; }
}

/* Phone tap targets, 44px at least (WCAG 2.5.5): the small buttons, the sign-in links and the password eye, the help
   library's breadcrumbs, heading anchors, contents links and article buttons. Inline links inside a sentence are left as
   they are (the guideline exempts them). */
.sb-site .sb-btn--sm { min-height: 44px; }
.sb-site .gts-reveal { min-width: 44px; min-height: 44px; }
.sb-site .gts-link { display: inline-flex; align-items: center; min-height: 44px; }
.sb-site .gtl-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.sb-site .gtl-prose .gtl-anchor { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -6px 0 -6px 2px; vertical-align: middle; }
.sb-site .gtl-toc__item > a { display: inline-flex; align-items: center; min-height: 44px; }
.sb-site .gtl-btn, .sb-site .gtl-bar__link { min-height: 44px; min-width: 44px; }

/* The help search box: a 44px target like every other control. */
body.sb-site .gtl-search__input { min-height: 44px; }

/* ------------------------------------------------------------------------------------------------------------------
 * The app (/app/) in IAMB.AI's look. The app keeps its own two themes, Light (One) and Dark (Zero), and its rain;
 * here they take the product's colours: paper #f4f3ef and ink #0b0b0d, with pink #ff5c93 for what is chosen and what
 * is the main action (always with ink on it, never pink text). Scoped to the app's page (body.slr-app-screen).
 * ------------------------------------------------------------------------------------------------------------------ */
body.slr-app-screen.slr-theme-zero { --bit-bg: #0b0b0d; --bit-ink: #f4f3ef; }
body.slr-app-screen.slr-theme-one { --bit-bg: #f4f3ef; --bit-ink: #0b0b0d; }
body.slr-app-screen:is(.slr-theme-zero, .slr-theme-one) { --sb-app-pink: #ff5c93; --sb-app-on-pink: #0b0b0d; }
html:has(> body.slr-app-screen.slr-theme-zero) { background: #0b0b0d; scrollbar-color: #f4f3ef #0b0b0d; }
html:has(> body.slr-app-screen.slr-theme-one) { background: #f4f3ef; scrollbar-color: #0b0b0d #f4f3ef; }

/* What is read sits on a solid sheet: the rain runs behind the app, never through its cards, and quieter than on the
   product site, so the lines between the sheets stay easy to read. */
body.slr-app-screen:is(.slr-theme-zero, .slr-theme-one) .slr-app { --bit-weave: var(--bit-bg); }
body.slr-app-screen:is(.slr-theme-zero, .slr-theme-one) > .slr-rain { opacity: 0.4; }

/* Pink for what is chosen and the main action. */
body.slr-app-screen:is(.slr-theme-zero, .slr-theme-one) .slr-topnav a.is-active,
body.slr-app-screen:is(.slr-theme-zero, .slr-theme-one) .slr-segmented button.is-active { background: var(--sb-app-pink); color: var(--sb-app-on-pink); box-shadow: inset 0 0 0 2px var(--bit-ink); }
body.slr-app-screen:is(.slr-theme-zero, .slr-theme-one) .slr-tabs a.is-active { box-shadow: inset 0 -4px var(--sb-app-pink); }
body.slr-app-screen:is(.slr-theme-zero, .slr-theme-one) .slr-app .slr-btn.is-primary:not(:disabled) { background: var(--sb-app-pink); border-color: var(--bit-ink); color: var(--sb-app-on-pink); box-shadow: 3px 3px 0 var(--bit-ink); }
body.slr-app-screen:is(.slr-theme-zero, .slr-theme-one) .slr-app .slr-btn.is-primary:hover:not(:disabled) { background: var(--bit-ink); color: var(--bit-bg); box-shadow: 1px 1px 0 var(--bit-ink); }
body.slr-app-screen:is(.slr-theme-zero, .slr-theme-one) .slr-toggle input:checked + .slr-toggle-track { background: var(--sb-app-pink); box-shadow: inset 0 0 0 2px var(--bit-ink); }
body.slr-app-screen:is(.slr-theme-zero, .slr-theme-one) .slr-brand::after { background: var(--sb-app-pink); }
body.slr-app-screen:is(.slr-theme-zero, .slr-theme-one) .slr-app ::selection { background: var(--sb-app-pink); color: var(--sb-app-on-pink); }

/* The two product themes only: the others (green Matrix, the holidays, the school ones) are not offered here. The
   one a person wears now stays in the list, so they can see it and move off it. */
body.slr-app-screen .slr-theme-switch [data-theme]:not([data-theme="zero"]):not([data-theme="one"]):not(.is-active),
body.slr-app-screen .slr-themes-item:not([data-theme="zero"]):not([data-theme="one"]):not(.is-now) { display: none; }

/* On a phone: every control the thumb uses is at least 44px, the "?" dots keep their look with a bigger touch area. */
@media (max-width: 600px) {
	body.slr-app-screen .slr-topnav a,
	body.slr-app-screen :is(.slr-tabs a, .gtb-tabs a, .gtr-tabs button, .gpf-tabs button, .gtr-chat-views > button) { min-height: 44px; display: inline-flex; align-items: center; }
	body.slr-app-screen :is(.slr-hbtn, .slr-me, .slr-focus-exit-btn, .slr-focus-fold) { min-width: 44px; min-height: 44px; }
	body.slr-app-screen .gtsh-subnav a { min-height: 44px; }
	body.slr-app-screen :is(.slr-back, .gtb-back, .gtb-review-link, .slr-review-card-who, .slr-key-head .slr-small) { display: inline-flex; align-items: center; min-height: 44px; }
	body.slr-app-screen .slr-help-btn::after { inset: -15px; }
	body.slr-app-screen :is(.slr-check, .slr-radio-card, .slr-share-level, .slr-toggle) { min-height: 44px; }
	body.slr-app-screen :is(.slr-icon-btn, .gtr-icon-btn, .gtb-icon-btn, .gtr-head > .slr-btn.is-small, .gtb-bell-btn) { min-width: 44px; min-height: 44px; }
	body.slr-app-screen .slr-app :is(.slr-btn, .gtb-export-menu, .gtb-quick-add, .gpf-todo) { min-height: 44px; }
	body.slr-app-screen :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select) { min-height: 44px; }
	body.slr-app-screen :is(.slr-topnav a, .slr-tabs a, .gtr-chat-views > button) { flex-shrink: 0; min-width: 44px; justify-content: center; }
	body.slr-app-screen :is(.slr-tag > button, .gtb-tools-toggle, .slr-voice-btn, .slr-video-btn, .gtav-swatch) { min-width: 44px; min-height: 44px; }
	body.slr-app-screen :is(.slr-filter, .gtb-dock-bar, .gtav-btn, .gtav-tab, .gtav-check) { min-height: 44px; }
	html body.slr-app-screen .gtb-board-view .gtb-tools-toggle { min-width: 44px; height: 44px; }
	html body.slr-app-screen .slr-app .slr-tags { min-height: 44px; }
	html body.slr-app-screen .gpf-row-tools .gpf-vis, html body.slr-app-screen .gpf-vis { min-height: 44px; }
	html body.slr-app-screen .gtr-composer-row > .slr-btn { min-width: 44px; min-height: 44px; }
}

/* The floating chat and the other widgets wait at the bottom right corner, as the product site's chat does, unless
   the app bar itself is docked at the bottom (a workspace), where they keep the room it needs. */
body.slr-app-screen:not(:has(.slr-topbar.is-dock)) .slr-bee-field { right: 16px; bottom: 16px; }

/* The board's Backlog bar sits at the foot of the screen: the widgets stand just above it there, not on it. */
body.slr-app-screen:not(:has(.slr-topbar.is-dock)):has(.gtb-dock-bar) .slr-bee-field { bottom: 66px; }

/* Features and access: the chosen Everyone / Chosen / None card is plain to see (pink, ink text, a heavier edge), and a
   feature's name and lines in its row read in normal case, not as a table heading. */
body.slr-app-screen .slr-radio-card.is-on { background: #ff5c93; color: #0b0b0d; border: 2px solid #0b0b0d; box-shadow: 3px 3px 0 #0b0b0d; }
body.slr-app-screen .slr-radio-card.is-on :is(strong, span, small) { color: #0b0b0d; }
body.slr-app-screen tr[data-feature] > th { text-transform: none; letter-spacing: 0; font-size: 0.9rem; font-weight: 400; color: inherit; }
body.slr-app-screen tr[data-feature] > th > strong { font-size: 1rem; font-weight: 800; }

/* No Android app on IAMB.AI: its card stays off the Apps page (phones use the browser). */
body.slr-app-screen .gtapps-card.is-android { display: none; }
/* 2026-10-20 (owner: "CTA BUTTONS HAVE TO SCROLL DOWN"): the hero fits the first screen. The banner and header take
   about 108px (134 on phones), so the hero's gaps and title size also follow the window's height, not just its width. */
.sb-hero { padding-top: clamp(20px, min(6vw, 4.5vh), 92px); padding-bottom: clamp(40px, min(7vw, 7vh), 108px); }
.sb-hero__title { font-size: clamp(2.1rem, min(1.2rem + 3.5vw, 8.4vh), 4.25rem); margin-bottom: clamp(14px, 2.4vh, 24px); }
.sb-hero__lead { margin-bottom: clamp(18px, 3vh, 30px); }
.sb-hero__proof { margin-bottom: clamp(16px, 2.6vh, 28px); }
@media (max-width: 899px) {
	.sb-hero { padding-top: clamp(16px, 3vh, 44px); }
	.sb-hero__title { font-size: clamp(2rem, min(1.2rem + 3.5vw, 6.2vh), 3rem); }
}
@media (max-height: 640px) {
	.sb-hero { padding-top: 12px; }
	.sb-hero__title { font-size: clamp(1.9rem, min(1.2rem + 3.5vw, 7.6vh), 3.4rem); line-height: 0.94; }
	.sb-hero__lead { font-size: 1rem; line-height: 1.45; margin-bottom: 14px; }
	.sb-hero__proof { margin: -6px 0 12px; }
}
/* The closed chat bubble steps aside while it would cover a hero button (nav.js adds .sb-tuck). */
.gtchat-bubble { transition: transform 0.2s ease, opacity 0.2s ease; }
.gtchat-bubble.sb-tuck { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .gtchat-bubble { transition: none; } }
/* 2026-10-20 (owner: "HAMBURGER MENU IN THE MIDDLE OF THE TOP BAR"): where the main nav is hidden (1240px and
   narrower), the header's buttons go back to the right edge; ".sb-nav + .sb-header__actions" had pinned them
   next to the brand because the hidden nav is still in the page. */
@media (max-width: 1240px) {
	.sb-nav + .sb-header__actions { margin-left: auto; }
}
/* PD-451: once checkout opens, each plan card ends with its button. */
.sb-plan .sb-plan__btn { margin-top: 18px; align-self: flex-start; }

/* The Android app (no sign-in): the home hero's third button and the footer's link. */
.sb-site .sb-android, .sb-site .sb-android-link { flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
.sb-site .sb-android > span, .sb-android__meta { white-space: nowrap; }
.sb-site .sb-android .ic-icon, .sb-site .sb-android-link .ic-icon { width: 18px; height: 18px; flex: none; }
.sb-android__meta { font-size: 0.75em; font-weight: 600; opacity: 0.8; }
.sb-footer__android { margin: 0 0 16px; }
.sb-site .sb-android-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: var(--sb-bw) solid var(--sb-edge); border-radius: var(--sb-r); background: var(--sb-surface); color: var(--sb-text); box-shadow: 3px 3px 0 var(--sb-hard); font-weight: 800; font-size: 0.95rem; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.sb-site .sb-android-link:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--sb-hard); }
.sb-site .sb-android-link:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--sb-hard); }
.sb-site .sb-android-link:focus-visible { outline: 3px solid var(--sb-text); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sb-site .sb-android-link { transition: none; } .sb-site .sb-android-link:hover, .sb-site .sb-android-link:active { transform: none; } }