/* CollectivIQ marketing site. Design language borrowed from the product: Inter, brand blue,
   the pink-purple-blue gradient from the app's own stylesheet, product grays. */

@font-face { font-family: "Inter"; src: url("/assets/fonts/inter.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url("/assets/fonts/plexmono.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  --blue: #0284c7;          /* product brand */
  --blue-deep: #1c5a87;     /* gradient stop 3 */
  --purple: #7048a8;        /* gradient stop 2 */
  --pink: #d6336c;          /* gradient stop 1 */
  --pink-bright: #f6339a;
  --violet: #ad46ff;
  --ink: #0f172a;
  --ink-2: #101828;
  --gray-700: #4a5565;
  --gray-500: #64748b;
  --gray-400: #6b7280;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #f8fafc;
  --amber: #d97706;
  --green: #15803d;
  --red: #dc2626;
  --white: #ffffff;
  --surface: #ffffff;
  --bg: #ffffff;
  --grad: linear-gradient(180deg, #d6336c 0%, #7048a8 52%, #1c5a87 100%);
  --grad-h: linear-gradient(90deg, #d6336c 0%, #7048a8 52%, #1c5a87 100%);
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "PlexMono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --max: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 40px rgba(15, 23, 42, 0.10);
  --nav-bg: rgba(255, 255, 255, 0.86);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--text); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0 0 14px; }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.eyebrow { font-family: var(--text); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-500); }
.grad-text { background: var(--grad-h); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--gray-500); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* buttons, product-shaped */
.btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 11px 18px; border-radius: 10px; font-weight: 500; font-size: 15px; border: 1px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; cursor: pointer; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #0369a1; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-outline { border-color: var(--gray-200); color: var(--ink); background: var(--surface); }
.btn-outline:hover { border-color: var(--gray-400); }

/* nav */
.nav { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-200); }
.nav .wrap { display: flex; align-items: center; gap: 26px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.brand img { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 22px; font-size: 15px; color: var(--gray-700); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 15px; }
.nav-toggle { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--gray-200); border-radius: 10px; background: var(--surface); cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 3px auto; }

/* gradient field: the brand atmosphere, used once per page */
.field { position: relative; isolation: isolate; overflow-x: clip; }
.field::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 120%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 30%, rgba(214, 51, 108, 0.20), transparent 70%),
    radial-gradient(55% 45% at 60% 20%, rgba(112, 72, 168, 0.18), transparent 70%),
    radial-gradient(60% 50% at 90% 60%, rgba(2, 132, 199, 0.18), transparent 70%);
  filter: blur(20px); }


/* dark theme: same tokens, product-dark values */
html[data-theme="dark"] {
  --bg: #0b1220; --surface: #111a2b; --white: #111a2b; --nav-bg: rgba(11, 18, 32, 0.82);
  --ink: #e6eaf2; --ink-2: #e6eaf2; --gray-700: #b7bfcc; --gray-500: #8b95a7; --gray-400: #7b8496;
  --gray-200: #223047; --gray-100: #182338; --gray-50: #0f1728;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 48px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}
html[data-theme="dark"] .field::before { background:
    radial-gradient(60% 50% at 18% 30%, rgba(214, 51, 108, 0.34), transparent 70%),
    radial-gradient(55% 45% at 60% 20%, rgba(112, 72, 168, 0.32), transparent 70%),
    radial-gradient(60% 50% at 90% 60%, rgba(2, 132, 199, 0.30), transparent 70%); }
html[data-theme="dark"] .msg.you .bubble { background: #0c2a44; }
html[data-theme="dark"] .agree { background: #0f2a1c; border-color: #1e5a38; }
html[data-theme="dark"] .contra { background: #2b1d0c; border-color: #6b4a18; }
html[data-theme="dark"] .chapter .approval { background: #2b2410; border-color: #5a4a12; }
html[data-theme="dark"] .chapter .approval.ok { background: #0f2a1c; border-color: #1e5a38; }
html[data-theme="dark"] .window .label { background: rgba(17, 26, 43, 0.85); }
html[data-theme="dark"] .rail i { background: #223047; }
html[data-theme="dark"] .rail i.on { background: var(--blue); }
html[data-theme="dark"] .ok { color: #4ade80; } html[data-theme="dark"] .flag { color: #fbbf24; }
html[data-theme="dark"] .legal a { color: #38bdf8; }

/* theme toggle */
.theme-toggle { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--gray-200); background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--gray-700); }
.theme-toggle .sun { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; }
html[data-theme="dark"] .theme-toggle .sun { box-shadow: inset -4px -4px 0 0 currentColor; transform: rotate(-30deg); }

/* ---------- homepage: the day ---------- */
.day-head { padding: clamp(56px, 8vh, 96px) 0 20px; }
.day-head .eyebrow { margin-bottom: 14px; }
.platform { font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; display: inline-block; }
.day-head h1 { font-size: clamp(38px, 5.6vw, 76px); letter-spacing: -0.03em; max-width: 16ch; }
.day-head h1 em { font-style: normal; color: var(--gray-500); }
.day-head p { font-size: clamp(17px, 1.35vw, 20px); color: var(--gray-700); max-width: 60ch; margin-top: 18px; }
.day-head .note { font-size: 13px; color: var(--gray-500); margin-top: 8px; }

.day { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: start; padding-bottom: clamp(48px, 8vh, 120px); width: auto; margin-inline: 0; padding-left: max(var(--gutter), calc((100% - var(--max)) / 2)); }
.chapters { display: flex; flex-direction: column; }
.chapter { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 6vh 0; border-top: 1px solid var(--gray-200); }
.chapter:first-child { border-top: 0; }
.chapter .time { font-family: var(--mono); font-size: 13px; color: var(--gray-500); letter-spacing: 0.06em; }
.chapter .time b { color: var(--ink); font-weight: 500; }
.chapter h2 { font-size: clamp(26px, 2.6vw, 38px); margin: 10px 0 12px; }
.chapter p { color: var(--gray-700); max-width: 44ch; }
.chapter .who { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--gray-700); }
.chapter .approval { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--amber); background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 6px 10px; }
.chapter .approval.ok { color: var(--green); background: #f0fdf4; border-color: #bbf7d0; }
.chapter.is-active h2 { color: var(--ink); }
.chapter:not(.is-active) h2 { color: var(--gray-500); }
.chapter .scene-inline { display: none; }

.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; background: var(--grad); flex: none; }

/* the pinned product window */
.window-wrap { position: sticky; top: clamp(84px, calc(50vh - 21vw), 40vh); }
.window { container-type: inline-size; position: relative; background: var(--surface); border: 1px solid var(--gray-200); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); box-shadow: var(--shadow); overflow: hidden; height: auto; aspect-ratio: 16 / 10; max-height: calc(100vh - 108px); }
.chrome { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border-bottom: 1px solid var(--gray-200); font-size: 13px; color: var(--gray-500); background: var(--gray-50); }
.chrome img { width: 18px; height: 18px; }
.chrome .crumb b { color: var(--ink); font-weight: 500; }
.chrome .clock { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--gray-500); }
.stage { position: relative; height: 100%; }
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.scene.is-active { opacity: 1; pointer-events: auto; }
.rail { border-right: 1px solid var(--gray-200); background: var(--gray-50); display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 12px; }
.rail i { width: 28px; height: 28px; border-radius: 8px; background: var(--gray-200); display: block; }
.rail i.on { background: var(--blue); }
.pane { padding: 3.2cqw 3.6cqw; overflow: hidden; font-size: clamp(13px, 1.9cqw, 19px); color: var(--ink); display: flex; flex-direction: column; gap: 0.9em; }
.pane .title { font-size: 1.1em; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.pane .title .tag { font-size: 0.75em; color: var(--gray-500); font-weight: 500; border: 1px solid var(--gray-200); border-radius: 999px; padding: 1px 8px; }
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg .bubble { background: var(--gray-100); border-radius: 12px; padding: 12px 14px; max-width: 60ch; }
.msg.you { justify-content: flex-end; }
.msg.you .bubble { background: #e0f2fe; }
.msg.you .av { display: none; }
.msg .bubble b { font-weight: 600; }
.card { background: var(--surface); border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px 16px; }
.card .eyebrow { margin-bottom: 8px; font-size: 0.74em; }
table.data { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.88em; }
table.data td { padding: 7px 0; border-bottom: 1px solid var(--gray-200); }
table.data td:last-child { text-align: right; }
table.data tr:last-child td { border-bottom: 0; }
.ok { color: var(--green); font-weight: 600; }
.flag { color: var(--amber); font-weight: 600; }
.bad { color: var(--red); font-weight: 600; }
.approve { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 0.9em; flex-wrap: wrap; }
.approve .btn { padding: 0.45em 0.9em; font-size: 0.92em; border-radius: 8px; }
.approve .hint { color: var(--gray-500); }
.tabs { display: flex; gap: 16px; font-size: 0.9em; color: var(--gray-500); border-bottom: 1px solid var(--gray-200); padding-bottom: 8px; }
.tabs span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: currentColor; }
.tabs .on { color: var(--blue); font-weight: 600; border-bottom: 2px solid var(--blue); margin-bottom: -9px; padding-bottom: 8px; }
.agree { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 10px 12px; }
.agree .eyebrow { color: var(--green); }
.contra { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 10px 12px; }
.contra .eyebrow { color: var(--amber); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; }
.tile .n { font-family: var(--mono); font-size: 1.7em; font-weight: 500; }
.tile .l { font-size: 0.78em; color: var(--gray-500); }
.bars { display: grid; gap: 6px; }
.bars div { height: 8px; border-radius: 4px; background: var(--grad-h); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 0.45em 1.2em; font-size: 0.95em; }
.kv b { font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: 0.82em; border: 1px solid var(--gray-200); border-radius: 999px; padding: 3px 9px; color: var(--gray-700); }
.chips span.on { border-color: var(--blue); color: var(--blue); }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.shot.dark { display: none; }
html[data-theme="dark"] .shot.light { display: none; }
html[data-theme="dark"] .shot.dark { display: block; }
.frame-shot { position: relative; aspect-ratio: 16 / 10; }
.frame-shot.wide { aspect-ratio: 1040 / 560; }
.frame-shot.square { aspect-ratio: 500 / 420; max-width: 460px; margin: 0 auto; }
.frame-shot.tall { aspect-ratio: 1690 / 1100; max-width: 640px; margin: 0 auto; }
.frame-shot.agree { aspect-ratio: 1690 / 730; }
.frame-shot.models { aspect-ratio: 960 / 600; max-width: 560px; margin: 0 auto; }
.frame-shot.charts { aspect-ratio: 1800 / 920; }
.frame-shot.galaxy { aspect-ratio: 1500 / 1140; max-width: 640px; margin: 0 auto; }
.frame-shot .shot { position: absolute; }
.window .label { position: absolute; right: 12px; bottom: 10px; font-family: var(--mono); font-size: 10px; color: var(--gray-500); background: rgba(255,255,255,0.85); padding: 2px 7px; border-radius: 6px; }

/* ---------- generic sections ---------- */
.section { padding: clamp(56px, 8vh, 112px) 0; }
.section.tint { background: var(--gray-50); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.section.ink { background: #0f172a; color: #fff; }
.section.ink .muted, .section.ink .eyebrow { color: #9aa3b2; }
.section-head { max-width: 62ch; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -0.03em; }
.section-head p { color: var(--gray-700); font-size: 18px; margin-top: 12px; }
.section.ink .section-head p { color: #c5cbd6; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.feat { border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 22px; background: var(--surface); }
.section.ink .feat { background: #161e2e; border-color: #263244; }
.feat h3 { font-size: 18px; margin-bottom: 8px; }
.feat p { color: var(--gray-700); font-size: 15px; margin: 0; }
.section.ink .feat p { color: #c5cbd6; }
.feat .eyebrow { margin-bottom: 10px; }
.role-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.role { border: 1px solid var(--gray-200); border-radius: 12px; padding: 16px; background: var(--surface); }
.role h3 { font-size: 16px; display: flex; align-items: center; gap: 10px; }
.role p { color: var(--gray-700); font-size: 14px; margin: 8px 0 0; }
.role .tools { margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--gray-500); }
.systems { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; color: var(--gray-700); align-items: baseline; }
.systems b { color: var(--ink); font-weight: 500; }
.stat { font-size: clamp(34px, 4vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.stat + p { color: var(--gray-500); font-size: 14px; margin-top: 8px; max-width: 34ch; }
.cta { text-align: center; padding: clamp(64px, 10vh, 128px) 0; }
.cta .actions { margin-top: 28px; }
.cta h2 { font-size: clamp(32px, 4.2vw, 56px); letter-spacing: -0.03em; }
.cta p { color: var(--gray-700); font-size: 18px; margin: 14px auto 26px; max-width: 46ch; }
.cta .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta .fine { font-size: 13px; color: var(--gray-500); margin-top: 16px; }

/* product pages */
.page-head { padding: clamp(56px, 8vh, 96px) 0 clamp(28px, 4vh, 48px); }
.page-head .eyebrow { margin-bottom: 12px; }
.page-head h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.03em; max-width: 18ch; }
.page-head p { font-size: clamp(17px, 1.35vw, 20px); color: var(--gray-700); max-width: 58ch; margin-top: 16px; }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.two.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.two.flip > :first-child { order: 2; }
.two h2 { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -0.03em; margin-bottom: 12px; }
.two p { color: var(--gray-700); }
.two ul { color: var(--gray-700); padding-left: 18px; margin: 10px 0 0; }
.two li { margin: 6px 0; }
.frame { background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.frame .chrome { height: 40px; }
.frame .pane { position: static; height: auto; }
.frame .scene { position: static; opacity: 1; pointer-events: auto; display: grid; grid-template-columns: 56px 1fr; }
.frame .rail { min-height: 100%; }

/* press */
.press-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.press-item { border: 1px solid var(--gray-200); border-radius: 12px; padding: 18px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.press-item .outlet { font-family: var(--mono); font-size: 11px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.08em; }
.press-item h3 { font-size: 16px; line-height: 1.3; }
.press-item .date { font-size: 12px; color: var(--gray-500); margin-top: auto; }

/* legal */
.legal { max-width: 74ch; padding: clamp(40px, 6vh, 72px) 0 clamp(64px, 8vh, 112px); color: var(--gray-700); }
.legal h1 { color: var(--ink); font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 20px; }
.legal h2 { color: var(--ink); margin: 36px 0 10px; font-size: 22px; letter-spacing: -0.01em; }
.legal h3, .legal h4 { color: var(--ink); margin: 26px 0 8px; font-size: 17px; }
.legal p, .legal li { line-height: 1.65; }
.legal li { margin: 5px 0; }
.legal .meta { color: var(--gray-500); font-size: 14px; margin: -8px 0 24px; }
.legal a { color: var(--blue); text-decoration: underline; }
.legal ul, .legal ol { padding-left: 22px; }

/* footer */
footer { border-top: 1px solid var(--gray-200); padding: 36px 0 44px; color: var(--gray-500); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; }
.foot-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.social { display: flex; gap: 6px; }
.social a { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 8px; color: var(--gray-500); }
.social a:hover { color: var(--ink); background: var(--gray-100); }
.social svg { width: 16px; height: 16px; }
footer .links { display: flex; gap: 20px; flex-wrap: wrap; }
footer .copy { white-space: nowrap; }
footer a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .scene, .btn { transition: none; } }
@media (max-width: 1024px) { .grid-4, .role-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .press-list, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .nav-links, .nav-right .hide-m { display: none; }
  .nav-toggle { display: block; }
  .nav .wrap { gap: 10px; }
  .nav-right { gap: 10px; }
  .nav-right .btn { padding: 9px 13px; font-size: 14px; }
  .nav.open .nav-links { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 64px; background: var(--bg); border-bottom: 1px solid var(--gray-200); padding: 12px var(--gutter) 18px; gap: 14px; }
  .day, .two, .two.flip { grid-template-columns: 1fr; }
  .day { padding: 0 var(--gutter); }
  .two.flip > :first-child { order: 0; }
  .window-wrap { display: none; }
  .chapter { min-height: 0; padding: 32px 0; }
  .chapter .scene-inline { display: block; margin-top: 18px; }
  .chapter .scene-inline .window { height: auto; min-height: 0; aspect-ratio: 5 / 4; border-right: 1px solid var(--gray-200); border-radius: var(--radius); }
  .chapter .scene-inline .window { aspect-ratio: auto; max-height: none; height: auto; overflow: hidden; }
  .chapter .scene-inline .scene { position: static; }
  .chapter .scene-inline .shot { position: static; width: 100%; height: auto; }
  .chapter .scene-inline .scene { opacity: 1; pointer-events: auto; }
  .chapter:not(.is-active) h2 { color: var(--ink); }
}
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4, .role-list, .press-list, .tiles { grid-template-columns: 1fr; } .scene, .frame .scene { grid-template-columns: 1fr; } .rail { display: none; } footer .copy { margin-left: 0; } }

/* ---------- lower homepage ---------- */
.hire { padding-top: clamp(64px, 9vh, 120px); }
.hire-head { max-width: 62ch; margin-bottom: 34px; }
.hire-head h2 { font-size: clamp(32px, 4vw, 54px); letter-spacing: -0.03em; line-height: 1.08; }
.hire-head p { color: var(--gray-700); font-size: 18px; margin-top: 14px; }
.rotator { display: inline-flex; overflow: hidden; height: 1.18em; vertical-align: bottom; }
.rot-track { display: flex; flex-direction: column; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rot-track span { display: block; height: 1.18em; line-height: 1.18em; white-space: nowrap; background: var(--grad-h); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rot-track.snap { transition: none; }
.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.role { border: 1px solid var(--gray-200); border-radius: 14px; padding: 18px 18px 16px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; transition: border-color 0.15s ease, transform 0.15s ease; }
.role b { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.role span { color: var(--gray-500); font-size: 14px; }
.role.custom { border-style: dashed; border-color: var(--purple); background: linear-gradient(135deg, rgba(214,51,108,.06), rgba(2,132,199,.06)); }
.role.custom b { background: var(--grad-h); -webkit-background-clip: text; background-clip: text; color: transparent; }

.products .section-head h2 { font-size: clamp(32px, 4vw, 54px); }
.tiles4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ptile { display: block; border: 1px solid var(--gray-200); border-radius: 16px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.18s ease; }
.ptile:hover { transform: translateY(-2px); }
.ptile-art { aspect-ratio: 16 / 10; display: grid; place-items: center; border-bottom: 1px solid var(--gray-200); background: linear-gradient(135deg, rgba(214, 51, 108, 0.09), rgba(112, 72, 168, 0.09) 55%, rgba(28, 90, 135, 0.09)); }
.ptile-art svg { width: 36%; height: auto; }
html[data-theme="dark"] .ptile-art { background: linear-gradient(135deg, rgba(214, 51, 108, 0.18), rgba(112, 72, 168, 0.18) 55%, rgba(28, 90, 135, 0.18)); }
.ptile h3 { font-size: 18px; margin: 16px 18px 6px; }
.ptile p { color: var(--gray-700); font-size: 14.5px; margin: 0 18px 18px; }

.connect .two { align-items: center; }
.connect h2 { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.03em; margin-bottom: 12px; }
.connect p { color: var(--gray-700); font-size: 17px; }
.systems-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.systems-grid li { border: 1px solid var(--gray-200); border-radius: 12px; padding: 0 16px; min-height: 58px; font-weight: 500; font-size: 15px; white-space: nowrap; background: var(--surface); display: flex; align-items: center; gap: 12px; }

.bep { border-top: 1px solid var(--gray-200); }
.bep .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.bep-lockup { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); flex-wrap: nowrap; }
.lk-ciq { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.lk-ciq img { width: 1.35em; height: auto; }
.lk-x { font-size: 22px; color: var(--gray-500); font-weight: 400; }
.lk-bep { width: clamp(130px, 11vw, 160px); height: auto; flex: none; }
.lk-bep.dark { display: none; }
html[data-theme="dark"] .lk-bep.light { display: none; }
html[data-theme="dark"] .lk-bep.dark { display: block; }
.bep h2 { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.03em; margin-bottom: 12px; }
.bep p { color: var(--gray-700); font-size: 17px; }

@media (max-width: 1024px) { .roles, .tiles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .systems-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .bep .wrap { grid-template-columns: 1fr; } .bep-lockup { flex-wrap: wrap; } }
@media (max-width: 640px) { .tiles4 { grid-template-columns: 1fr; } .role { padding: 14px; } .role strong { font-size: 15px; } .role span { font-size: 13px; } .systems-grid { grid-template-columns: 1fr 1fr; } .rotator { max-width: 100%; } .rot-track span { white-space: normal; } }
.systems-grid img { width: 26px; height: 26px; flex: none; border-radius: 6px; }
.mcp-mark { width: 26px; height: 26px; flex: none; border-radius: 6px; background: var(--grad-h); color: #fff; font-size: 8px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.02em; }
.sys-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--grad-h); margin: 0 8px; }

/* Phones: every scene and frame swaps to a capture of the app's own phone layout. */
@media (max-width: 900px) {
  .two > * { min-width: 0; }
  .nav .login { display: inline-flex; padding: 8px 14px; font-size: 14px; }
  .nav-right { gap: 10px; }
  .frame-shot, .frame-shot.wide, .frame-shot.agree, .frame-shot.tall, .frame-shot.models, .frame-shot.charts, .frame-shot.galaxy { aspect-ratio: auto; max-width: none; margin: 0; }
  .frame, .frame-shot { max-height: none; height: auto; }
  .frame-shot .shot { position: static; display: block; width: 100%; height: auto; }
  .frame-shot .shot.dark { display: none; }
  html[data-theme="dark"] .frame-shot .shot.light { display: none; }
  html[data-theme="dark"] .frame-shot .shot.dark { display: block; }
  .frame-shot.square { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .systems-grid li { white-space: normal; }
  .two .frame, .chapter .scene-inline .window { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; }
}