/* FluffCams sales site, components of the new look (DESIGN-UPDATE.md section 3). Values are the mockups' (design-reference/*.dc.html); colours only from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* layout */
.ct { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sec { max-width: var(--wrap); margin: 0 auto; padding: var(--section-gap) var(--gutter) 40px; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.span2 { grid-column: span 2; }

/* type */
.h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.035em; }
.h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; }
.h2-s { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
.h3 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.lead { margin: 0; font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 520px; }
.body { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.55; }
.body-l { margin: 0; font-size: 17px; color: var(--muted); line-height: 1.6; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.mono { font-family: var(--font-mono); }
.acc { color: var(--accent); }
.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; max-width: 640px; }
.sec-head.is-center { align-items: center; text-align: center; gap: 18px; max-width: none; }
.sec-head.is-center .h2 { max-width: 760px; }
.sec-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.sec-head-row .sec-head { margin-bottom: 0; }
.link-acc { font-size: 15px; font-weight: 600; color: var(--accent); }

/* buttons */
.btn-p, .btn-s { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 600; padding: 16px 24px; border-radius: var(--r-md); }
.btn-p { color: var(--on-accent); background: var(--accent); }
.btn-p:hover { color: var(--on-accent); }
.btn-s { color: var(--text); border: 1px solid var(--border-strong); }
.btn-p svg, .link-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* hero */
.hero { max-width: var(--wrap); margin: 0 auto; padding: 88px var(--gutter) 120px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.pill-new { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border: 1px solid var(--border-2); border-radius: var(--r-pill); font-size: 13px; color: var(--text-3); background: var(--surface); }
.pill-new b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--on-accent); background: var(--accent); padding: 3px 8px; border-radius: var(--r-pill); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--subtle); margin: 0; padding: 0; list-style: none; }
.hero-facts li + li::before { content: "·"; margin-right: 20px; }
.hero-art { position: relative; padding: 24px 0 48px 0; }
.glow { position: absolute; inset: 10% 5% 0 15%; background: var(--accent); opacity: 0.10; filter: blur(90px); border-radius: 50%; pointer-events: none; }

/* browser frame */
.frame { position: relative; border: 1px solid var(--frame-border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-frame); overflow: hidden; }
.frame-bar { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--divider); background: var(--frame-bar); }
.frame-bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--frame-dot); flex: none; }
.frame-url { margin-left: 14px; flex: 1; max-width: 260px; height: 22px; border-radius: 6px; background: var(--frame-url); font-family: var(--font-mono); font-size: 11px; color: var(--subtle); display: flex; align-items: center; padding: 0 10px; white-space: nowrap; overflow: hidden; }

/* drawn live room */
.room { display: grid; grid-template-columns: minmax(0, 1fr) 220px; min-height: 380px; }
.room-video { position: relative; background: var(--stream-bg); display: flex; flex-direction: column; justify-content: space-between; padding: 14px; }
.room-video > img, .tile > img, .bt-stream > img, .cam > img, .msg-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-video > *:not(img) { position: relative; }
.room-top { display: flex; justify-content: space-between; align-items: center; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; background: var(--live); color: var(--on-live); padding: 4px 9px; border-radius: 6px; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--on-live); }
.watching { font-size: 12px; color: var(--text-on-photo); background: var(--shade); padding: 4px 9px; border-radius: 6px; }
.room-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-acc { font-size: 12px; font-weight: 600; background: var(--accent); color: var(--on-accent); padding: 9px 14px; border-radius: 9px; }
.chip-glass { font-size: 12px; font-weight: 600; background: var(--shade-2); color: var(--text); padding: 9px 14px; border-radius: 9px; border: 1px solid var(--glass-line); }
.room-side { border-left: 1px solid var(--divider); display: flex; flex-direction: column; font-size: 12px; }
.room-goal { padding: 12px 14px; border-bottom: 1px solid var(--divider); }
.room-goal-t { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 8px; }
.room-goal-t b { color: var(--text); font-weight: 400; }
.bar { height: 6px; border-radius: 4px; background: var(--border-2); overflow: hidden; }
.bar > i { display: block; width: 78%; height: 100%; background: var(--accent); border-radius: 4px; }
.room-chat { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.room-chat .who { color: var(--subtle); }
.room-chat .say { color: var(--text-2); }
.room-tip { background: var(--accent-12); border: 1px solid var(--accent-35); border-radius: 8px; padding: 7px 9px; color: var(--text); }
.room-tip b { font-weight: 600; }
.room-input { height: 30px; border-radius: 8px; background: var(--frame-url); border: 1px solid var(--border-2); color: var(--faint); display: flex; align-items: center; padding: 0 10px; }

/* phone frame */
.phone { position: absolute; left: -36px; bottom: 0; width: 176px; height: 340px; border-radius: 30px; border: 6px solid var(--bezel); background: var(--surface); box-shadow: var(--shadow-phone); overflow: hidden; display: flex; flex-direction: column; }
.phone-top { padding: 18px 14px 10px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.phone-top b { font-weight: 600; }
.phone-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.cam { position: relative; margin: 0 10px; height: 120px; border-radius: 14px; background: var(--cam-bg); overflow: hidden; }
.phone-l { padding: 12px 14px 4px; font-size: 10px; color: var(--subtle); }
.phone-n { padding: 0 14px; font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.phone-rows { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 10px; color: var(--text-3); }
.kv { display: flex; justify-content: space-between; gap: 8px; }
.kv .acc { color: var(--accent); }

/* floating card */
.float { position: absolute; right: -20px; top: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; background: var(--card-float); border: 1px solid var(--border-3); border-radius: 14px; box-shadow: var(--shadow-float); }
.float-ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.float-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--on-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.float-tx { display: flex; flex-direction: column; gap: 2px; }
.float-tx b { font-size: 13px; font-weight: 600; }
.float-tx span { font-size: 12px; color: var(--muted); }

/* trust strip */
.band { border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); background: var(--bg-band); }
.trust { max-width: var(--wrap); margin: 0 auto; padding: 40px var(--gutter); gap: 32px; }
.trust-i { display: flex; flex-direction: column; gap: 6px; }
.trust-i b { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.trust-i span { font-size: 14px; color: var(--muted); line-height: 1.5; }

/* segmented tabs */
.tabs-wrap { display: flex; justify-content: center; margin-bottom: 28px; }
.tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; flex-wrap: wrap; justify-content: center; }
.tab { cursor: pointer; border: 0; background: transparent; color: var(--text-3); font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 12px 22px; border-radius: var(--r-sm); min-height: 44px; }
.tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.tab-cap { margin: 0 auto 8px; text-align: center; font-size: 16px; color: var(--muted); max-width: 560px; }
.tabs-art { position: relative; }
.tabs-art .glow { inset: 15% 20% -5% 20%; opacity: 0.07; filter: blur(100px); }
.frame.is-big { border-radius: 18px; box-shadow: var(--shadow-tabs); }
.frame.is-big .frame-bar { height: 40px; padding: 0 16px; }
.frame.is-big .frame-url { flex: none; max-width: none; }
.tab-view[hidden] { display: none; }

/* member view */
.mv { padding: 20px 24px 28px; }
.mv-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.mv-brand { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.mv-search { flex: 1; max-width: 360px; height: 34px; border-radius: 9px; background: var(--frame-url); border: 1px solid var(--border-2); font-size: 12px; color: var(--faint); display: flex; align-items: center; padding: 0 12px; }
.mv-chips { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; font-size: 12px; }
.mv-chips span { padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-3); color: var(--text-3); }
.mv-chips span.is-on { background: var(--text); color: var(--on-accent); font-weight: 600; border-color: var(--text); }
.tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tile { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-sm); background: var(--stream-bg); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; }
.tile > *:not(img) { position: relative; }
.tile .live { font-size: 9px; font-weight: 700; padding: 3px 6px; border-radius: 4px; align-self: flex-start; }
.tile .live::before { display: none; }
.tile-name { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; text-shadow: var(--photo-shadow); }
.tile-name span:last-child { font-weight: 500; color: var(--text-on-photo); }

/* model and admin views */
.dv { padding: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dv-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.dv-head > div { display: flex; flex-direction: column; gap: 4px; }
.dv-head small { font-size: 13px; color: var(--subtle); }
.dv-head b { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.go-live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; background: var(--live); color: var(--on-live); padding: 12px 20px; border-radius: 11px; }
.go-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-live); }
.stat { background: var(--card-float); border: 1px solid var(--border-2); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.stat small { font-size: 12px; color: var(--subtle); }
.stat b { font-family: var(--font-display); font-size: 28px; font-weight: 700; }
.stat span { font-size: 12px; color: var(--muted); }
.stat span.acc { color: var(--accent); }
.av .stat b { font-size: 26px; }
.card-t { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.menu-rows { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.menu-rows .kv { padding: 10px 12px; background: var(--surface-4); border-radius: 9px; }
.menu-rows .kv span:last-child { color: var(--accent); font-weight: 600; }
.recent { display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: var(--text-3); }
.av { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.av .g4, .av .g2 { gap: 14px; }
.chart { height: 140px; display: flex; align-items: flex-end; gap: 8px; }
.chart i { flex: 1; border-radius: 4px 4px 0 0; background: var(--border-strong); }
.chart i:last-child { background: var(--accent); }
.tx { display: flex; flex-direction: column; font-size: 12px; }
.tx > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--text-2); }
.tx > div:last-child { border-bottom: 0; }
.tx span:nth-child(2) { color: var(--subtle); }
.tx span:last-child { text-align: right; }

/* bento */
.bento { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; gap: 22px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.bento:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-float); }
.bento.is-wide { min-height: 340px; }
.bento-t { display: flex; flex-direction: column; gap: 8px; }
.bento.is-wide .body { max-width: 460px; }
.bt-stream { flex: 1; position: relative; border-radius: 14px; background: var(--stream-bg); min-height: 170px; overflow: hidden; }
.bt-stream > *:not(img) { position: absolute; }
.bt-stream .live { left: 14px; top: 14px; font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 5px; }
.bt-stream .live::before { display: none; }
.meter { right: 14px; bottom: 14px; background: var(--glass); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 12px 16px; display: flex; gap: 22px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.meter > div { display: flex; flex-direction: column; gap: 2px; }
.meter small { font-size: 11px; color: var(--subtle); }
.meter b { font-family: var(--font-mono); font-size: 18px; font-weight: 500; }
.meter b.acc { color: var(--accent); }
.rows { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.rows > .kv, .rows > .goal { padding: 11px 13px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: var(--r-sm); align-items: center; }
.rows > .kv.is-tight { padding: 10px 12px; }
.rows > .kv.is-on { border-color: var(--accent); }
.rows > .kv.is-on span:first-child { font-weight: 600; }
.rows > .kv.is-dim { color: var(--subtle); }
.rows .price { color: var(--accent); font-weight: 600; }
.rows .price-dim { color: var(--muted); }
.goal-t { display: flex; justify-content: space-between; margin-bottom: 8px; }
.goal-t span:last-child { color: var(--muted); }
.approve { font-size: 12px; font-weight: 600; background: var(--accent); color: var(--on-accent); padding: 6px 10px; border-radius: 7px; }
.bubbles { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.bub-in { align-self: flex-start; max-width: 80%; background: var(--surface-4); border-radius: 14px 14px 14px 4px; padding: 10px 13px; }
.bub-out { align-self: flex-end; max-width: 80%; background: var(--accent); color: var(--on-accent); border-radius: 14px 14px 4px 14px; padding: 10px 13px; font-weight: 500; }
.msg-photo { position: relative; align-self: flex-end; width: 120px; height: 72px; border-radius: var(--r-md); background: var(--stream-bg); overflow: hidden; }
.msg-photo span { position: absolute; right: 6px; bottom: 6px; font-size: 10px; font-weight: 600; background: var(--glass); color: var(--text); padding: 2px 6px; border-radius: 5px; }
.price-tag { align-self: flex-start; font-size: 11px; color: var(--subtle); border: 1px solid var(--border-3); border-radius: var(--r-pill); padding: 4px 10px; }
.looks { gap: 12px; }
.look { border-radius: var(--r-md); border: 1px solid var(--border-2); overflow: hidden; }
.look-bar { height: 30px; background: var(--pv1-bar); display: flex; align-items: center; padding: 0 10px; font-family: var(--font-display); font-size: 12px; font-weight: 700; }
.look-body { height: 70px; background: var(--pv1-bg); display: flex; gap: 6px; padding: 8px; }
.look-body i { flex: 1; border-radius: 6px; background: var(--pv1-card); }
.look.is-1 .look-bar b { color: var(--pv1-accent); }
.look.is-2 .look-bar b { color: var(--accent); }
.look.is-2 .look-body { background: var(--pv2-bg); }
.look.is-2 .look-body i { background: var(--pv2-card); }
.look.is-3 { border-color: var(--pv3-line); }
.look.is-3 .look-bar { background: var(--pv3-bar); color: var(--pv3-ink); }
.look.is-3 .look-bar b { color: var(--pv3-accent); }
.look.is-3 .look-body { background: var(--pv3-bg); }
.look.is-3 .look-body i { background: var(--pv3-card); }
.look-bar b { font-weight: 700; }

/* checklist */
.checks { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--text-2); margin: 0; padding: 0; list-style: none; }
.checks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.checks svg, .ck { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.checks.is-l { font-size: 15px; }
.checks.is-dim svg { stroke: var(--muted); stroke-width: 2.2; }

/* numbered steps */
.steps { gap: 0; border-top: 1px solid var(--border-2); }
.step { padding: 28px 24px 0 0; display: flex; flex-direction: column; gap: 10px; }
.step i { font-style: normal; font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.step b { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.step span { font-size: 15px; color: var(--muted); line-height: 1.55; }

/* plan cards */
.plans { align-items: stretch; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 32px; display: flex; flex-direction: column; gap: 20px; transition: transform .25s ease; }
.plan:hover { transform: translateY(-4px); }
.plan.is-main { background: var(--surface-2); border-color: var(--accent); box-shadow: 0 30px 80px var(--accent-shadow); }
.plan-badge { position: absolute; top: -12px; left: 32px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; background: var(--accent); color: var(--on-accent); padding: 4px 10px; border-radius: var(--r-pill); text-transform: uppercase; }
.plan-name { font-size: 15px; font-weight: 600; color: var(--text-3); }
.plan.is-main .plan-name { color: var(--text); }
.plan-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-price b { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -0.03em; }
.plan-price s { color: var(--subtle); font-size: 18px; }
.plan-price span { color: var(--subtle); font-size: 14px; }
.plan-sum { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; }
.plan-btn { margin-top: auto; text-align: center; font-size: 15px; font-weight: 600; border: 1px solid var(--border-strong); padding: 14px; border-radius: var(--r-md); }
.plan-btn.is-p { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.plan-btn.is-p:hover { color: var(--on-accent); }
.cost-note { margin: 24px 0 0; font-size: 14px; color: var(--muted); line-height: 1.6; text-align: center; }

/* split panel */
.split { gap: 48px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 56px; }
.split-copy { display: flex; flex-direction: column; gap: 20px; }
.inset { background: var(--bg); border: 1px solid var(--border-2); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.inset-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.inset-head b { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.inset-head span { color: var(--accent); font-weight: 600; }
.inset-small { font-size: 13px; color: var(--subtle); line-height: 1.5; margin: 0; }
.progs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.progs li { padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-3); color: var(--text-3); }
.progs li.is-on { border-color: var(--accent); color: var(--text); font-weight: 600; }
.inset-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--subtle); margin: 0; }

/* calculator */
.calc { gap: 48px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 56px; }
.calc-in { display: flex; flex-direction: column; gap: 22px; }
.calc-row { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; font-size: 15px; color: var(--text-2); }
.calc-row output { font-family: var(--font-mono); font-size: 15px; color: var(--accent); }
.calc-row input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); height: 28px; margin: 0; }
.calc-res { background: var(--bg); border: 1px solid var(--border-2); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 6px; }
.calc-l { margin: 0; font-size: 15px; color: var(--muted); }
.calc-n { margin: 0 0 8px; font-family: var(--font-display); font-size: 28px; font-weight: 700; }
.calc-big { margin: 0 0 4px; font-family: var(--font-display); font-size: 52px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); }
.calc-note { margin: 14px 0 0; font-size: 13px; color: var(--subtle); line-height: 1.5; }

/* reviews */
.review { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.review p { margin: 0; font-size: 15px; color: var(--text-2); line-height: 1.6; }
.review footer { font-size: 13px; color: var(--subtle); }

/* FAQ */
.faq { gap: 0 56px; }
.faq-i { padding: 24px 0; border-top: 1px solid var(--border-2); display: flex; flex-direction: column; gap: 10px; }
.faq-i h3 { margin: 0; font-size: 17px; font-weight: 600; }
.faq-i p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.6; }

/* accent CTA band */
.sec-last { padding-bottom: 120px; }
.cta { position: relative; overflow: hidden; border-radius: var(--r-2xl); background: var(--accent); color: var(--on-accent); padding: 72px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.cta .h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.035em; max-width: 760px; }
.cta p { margin: 0; font-size: 18px; line-height: 1.55; max-width: 520px; color: var(--on-accent-2); }
.cta .btn-row { justify-content: center; }
.cta-dark { font-size: 16px; font-weight: 600; color: var(--text); background: var(--bg); padding: 16px 26px; border-radius: var(--r-md); }
.cta-dark:hover { color: var(--accent); }
.cta-line { font-size: 16px; font-weight: 600; color: var(--on-accent); border: 1.5px solid var(--on-accent); padding: 16px 26px; border-radius: var(--r-md); }
.cta-line:hover { color: var(--on-accent); background: var(--accent-35); }

/* breakpoints of the mockups */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span2 { grid-column: span 2; }
  .split, .calc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: auto; }
  .hide-narrow { display: none !important; } /* beats the components' own display values, as the mockup does */
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room { grid-template-columns: minmax(0, 1fr); }
  .dv { grid-template-columns: minmax(0, 1fr); }
  .dv .span2 { grid-column: auto; }
  .split, .calc { padding: 32px 24px; }
  .cta { padding: 56px 24px; }
  .step { padding-right: 0; padding-bottom: 24px; }
  .btn-p, .btn-s, .plan-btn, .tab { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .bento, .plan { transition: none; }
  .bento:hover, .plan:hover { transform: none; }
}

/* the admin chart's example bars (heights of the mockup) */
.chart i:nth-child(1) { height: 42%; } .chart i:nth-child(2) { height: 55%; } .chart i:nth-child(3) { height: 48%; } .chart i:nth-child(4) { height: 63%; }
.chart i:nth-child(5) { height: 58%; } .chart i:nth-child(6) { height: 71%; } .chart i:nth-child(7) { height: 66%; } .chart i:nth-child(8) { height: 60%; }
.chart i:nth-child(9) { height: 78%; } .chart i:nth-child(10) { height: 74%; } .chart i:nth-child(11) { height: 86%; } .chart i:nth-child(12) { height: 92%; }
.faq-h { margin-bottom: 40px; }
.review blockquote { margin: 0; }
.review > p:first-child { color: var(--accent); letter-spacing: 2px; }
.bt-stream > img { object-position: 50% 22%; }
.mv-search { max-width: 384px; }
.meter b, .meter small { white-space: nowrap; }
@media (max-width: 640px) {
  .hero-facts { gap: 6px 16px; }
  .hero-facts li + li::before { display: none; }
  .meter { left: 14px; gap: 14px; justify-content: space-between; }
  .meter b { font-size: 15px; }
}

/* inline icons (app/components.php icon()) */
.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i .i-fill { fill: currentColor; stroke: none; }

/* the drawn live room (pages/parts/hero-room.php): the script's room, small */
.rm { background: var(--room-bg); }
.rm-bar { height: 40px; display: flex; align-items: center; gap: 14px; padding: 0 12px; border-bottom: 1px solid var(--room-line); font-size: 12px; color: var(--muted); }
.rm-id { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; }
.rm-av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--accent); flex: none; }
.rm-sp { flex: 1; }
.rm-fan { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text); border: 1px solid var(--accent); border-radius: 7px; padding: 4px 8px; }
.rm-fan .i { width: 12px; height: 12px; color: var(--accent); }
.rm-body { display: grid; grid-template-columns: minmax(0, 1fr) 214px; gap: 8px; padding: 8px; }
.rm-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rm-video { position: relative; aspect-ratio: 16 / 11; border-radius: 10px 10px 0 0; overflow: hidden; background: var(--stream-bg); }
.rm-video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-video .live { position: absolute; left: 10px; top: 10px; }
.rm-arts { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
.rm-art { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--shade); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rm-art img { width: 32px; height: 32px; }
.rm-mark { position: absolute; right: 10px; bottom: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text); opacity: .75; }
.rm-mark b { color: var(--accent); }
.rm-ctl { display: flex; align-items: center; gap: 6px; background: var(--room-panel); margin-top: -6px; padding: 7px 8px; border-radius: 0 0 10px 10px; font-size: 11px; }
.rm-seg { display: inline-flex; border: 1px solid var(--room-line); border-radius: 7px; }
.rm-seg > span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; color: var(--text); white-space: nowrap; }
.rm-seg > span + span { border-left: 1px solid var(--room-line); }
.rm-seg .i { width: 12px; height: 12px; color: var(--accent); }
.rm-ib { display: inline-flex; padding: 4px 6px; border: 1px solid var(--room-line); border-radius: 7px; color: var(--text); }
.rm-ib .i { width: 14px; height: 14px; }
.rm-priv { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1.5px solid var(--accent); border-radius: 7px; color: var(--text); white-space: nowrap; }
.rm-priv b { color: var(--accent); }
.rm-priv .i { width: 11px; height: 11px; }
.rm-tip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; background: var(--accent); color: var(--on-accent); border-radius: 7px; font-weight: 700; white-space: nowrap; }
.rm-tip .i { width: 13px; height: 13px; }
.rm-goal { position: relative; height: 24px; border-radius: 6px; background: var(--room-panel); border: 1px solid var(--room-line); overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; font-size: 11px; color: var(--text); }
.rm-goal-fill { position: absolute; inset: 0 auto 0 0; width: 62%; background: var(--accent); opacity: .9; }
.rm-goal-t, .rm-goal-p { position: relative; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rm-goal-t { color: var(--on-accent); }
.rm-goal-t .i { width: 12px; height: 12px; }
.rm-goal-p { font-weight: 700; }
.rm-chat { display: flex; flex-direction: column; background: var(--room-panel); border-radius: 10px; overflow: hidden; min-width: 0; }
.rm-tabs { display: flex; align-items: center; gap: 10px; padding: 0 10px; height: 36px; border-bottom: 1px solid var(--room-line); font-size: 11px; color: var(--muted); white-space: nowrap; }
.rm-tabs > span { display: inline-flex; align-items: center; gap: 5px; height: 100%; }
.rm-tabs > span.is-on { color: var(--text); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }
.rm-tabs .is-on .i { color: var(--accent); }
.rm-tabs .i { width: 14px; height: 14px; }
.rm-tro { color: var(--gold); }
.rm-lines { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; font-size: 11px; color: var(--text-2); }
.rm-l { padding: 7px 10px; border-top: 1px solid var(--room-line); line-height: 1.4; }
.rm-l > .rm-av, .rm-l > .rm-crown, .rm-l > .i { vertical-align: -3px; margin-right: 4px; }
.rm-l b { color: var(--text); font-weight: 700; }
.rm-l b.acc { color: var(--accent); }
.rm-l .rm-av { width: 16px; height: 16px; box-shadow: none; }
.rm-crown { display: inline-flex; vertical-align: -2px; padding: 2px 3px; border-radius: 4px; background: var(--gold); color: var(--on-accent); }
.rm-crown .i { width: 10px; height: 10px; }
.rm-sys { text-align: center; }
.rm-sys .i { width: 12px; height: 12px; color: var(--accent); }
.rm-goalline { display: flex; align-items: center; justify-content: space-between; background: var(--surface-4); box-shadow: inset 2px 0 0 var(--accent); }
.rm-mini { font-weight: 700; background: var(--accent); color: var(--on-accent); padding: 2px 9px; border-radius: var(--r-pill); }
.rm-input { margin: 8px; height: 32px; display: flex; align-items: center; gap: 6px; padding-left: 9px; border: 1.5px solid var(--accent); border-radius: 7px; font-size: 11px; color: var(--faint); }
.rm-input > span:first-child { flex: 1; }
.rm-input > .i { width: 14px; height: 14px; color: var(--text-2); }
.rm-send { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: -1px; background: var(--accent); color: var(--on-accent); border-radius: 0 6px 6px 0; }
.rm-send .i { width: 14px; height: 14px; }

/* the script's model cards (member tab) */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cc { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--stream-bg); }
.cc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-ic, .cc-fav { position: absolute; top: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--card-pill); color: var(--text); display: flex; align-items: center; justify-content: center; }
.cc-ic { left: 8px; }
.cc-fav { right: 8px; }
.cc-ic .i, .cc-fav .i { width: 14px; height: 14px; }
.cc-fav .i { fill: currentColor; stroke: none; }
.cc-low { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 7px; display: flex; flex-direction: column; gap: 5px; background: linear-gradient(transparent, var(--card-shade)); } /* the card's own bottom shade, as in the script */
.cc-info { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--text); white-space: nowrap; }
.cc-sp { flex: 1; }
.cc-hrs, .cc-pill { display: inline-flex; align-items: center; gap: 3px; }
.cc-pill { background: var(--card-pill); padding: 3px 6px; border-radius: var(--r-pill); }
.cc-info .i { width: 11px; height: 11px; }
.cc-pill .i { stroke-width: 2.2; }
.cc-flag { width: 16px; height: 11px; border-radius: 2px; }
.cc-show { display: flex; align-items: center; gap: 6px; background: var(--card-show); color: var(--on-accent); border-radius: 7px; padding: 4px 4px 4px 8px; font-size: 11px; }
.cc-show b { font-weight: 800; }
.cc-show span { margin-left: auto; background: var(--bg); color: var(--accent); font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill); }
.cc-name { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); text-shadow: var(--photo-shadow); }
.cc-name i { width: 9px; height: 9px; border-radius: 50%; background: var(--online); box-shadow: 0 0 0 2px var(--card-pill); flex: none; }
.cc-name span { margin-left: auto; font-size: 10px; font-weight: 700; }

/* the earlier hero made of real screenshots (pages/parts/hero-shots.php) */
.hs .frame > img { width: 100%; height: auto; }
.hs-phone { position: absolute; left: -36px; bottom: -8px; width: 150px; border-radius: 26px; border: 6px solid var(--bezel); background: var(--surface); box-shadow: var(--shadow-phone); overflow: hidden; }
.hs-phone img { width: 100%; height: auto; }
.hs-f2 { top: auto; bottom: 64px; right: -24px; }
.hs-f1 { right: auto; left: 40px; top: -6px; }
.hs-av { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex: none; }

@media (max-width: 980px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-info .cc-hrs, .cc-info .cc-flag { display: none; }
  .rm-body { grid-template-columns: minmax(0, 1fr); }
  .rm-seg > span:last-child, .rm-ib { display: none; }
}
.rm-l > .rm-av { display: inline-block; }
.cc-show { white-space: nowrap; }
@media (max-width: 640px) {
  .cc-show { font-size: 9.5px; gap: 4px; padding: 3px 3px 3px 6px; }
  .cc-show span { padding: 2px 6px; }
  .cc-name { font-size: 12px; }
}

/* the script's own icons (sicon): card icons are filled, room / header icons are lines */
.si { width: 16px; height: 16px; flex: none; }
.si-badge { fill: currentColor; }
.si-room, .si-header { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc .si { width: 13px; height: 13px; }
.cc-info .si { width: 11px; height: 11px; }

/* hero version 2: the video's corner buttons and the floating cards */
.rm-vctl { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; }
.rm-vctl > span { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--shade); color: var(--text); }
.rm-vctl .si { width: 14px; height: 14px; }
.rm .si { width: 13px; height: 13px; }
.rm-tabs .si { width: 14px; height: 14px; }
.rm-l > .si { vertical-align: -2px; margin-right: 4px; color: var(--accent); }
.rm-crown .si { width: 10px; height: 10px; }
.float-ic .si { width: 18px; height: 18px; color: var(--on-accent); stroke-width: 2.2; }
.float-ic.is-gold { background: var(--gold); }
.float-ic.is-dark { background: var(--surface-4); }
.float-ic.is-dark .si { color: var(--accent); }
.fl-av { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex: none; }
.fl-art { width: 36px; height: 36px; flex: none; }
.fl-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-right: 6px; vertical-align: 1px; }
.fl { z-index: 3; animation: fl-drift 7s ease-in-out infinite; }
.hv2 .fl-tip { right: -24px; top: -6px; }
.hv2 .fl-priv { right: auto; left: -56px; top: 34%; animation-delay: -1.5s; }
.hv2 .fl-fan { right: auto; left: -28px; top: auto; bottom: 4px; animation-delay: -3s; }
.hv2 .fl-alert { top: auto; right: -36px; bottom: 96px; animation-delay: -4.5s; }
.hv2 .fl-wheel { right: auto; left: 34%; top: auto; bottom: -2px; animation-delay: -2.2s; }
@keyframes fl-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .fl { animation: none; } }

/* the script's header in the member tab (Live\Chrome for a signed-in member) */
.mh { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 12px; color: var(--text); white-space: nowrap; }
.mh .si { width: 17px; height: 17px; }
.mh-i { position: relative; display: inline-flex; color: var(--text); }
.mh-badge b { position: absolute; top: -6px; right: -7px; min-width: 15px; height: 15px; border-radius: var(--r-pill); background: var(--live); color: var(--on-live); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.mh-live { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.mh-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.mh-link { display: inline-flex; align-items: center; gap: 5px; }
.mh-search { flex: 1; max-width: 300px; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--frame-url); border: 1px solid var(--border-3); color: var(--faint); }
.mh-search .si { width: 14px; height: 14px; }
.mh-tk { font-weight: 700; }
.mh-tk small { color: var(--muted); font-weight: 500; }
.mh-add { display: inline-flex; align-items: center; gap: 5px; background: var(--accent); color: var(--on-accent); font-weight: 700; padding: 7px 11px; border-radius: 8px; }
.mh-add .si { width: 14px; height: 14px; }
.mh-me { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--text); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.mh-strip { display: flex; gap: 22px; padding: 8px 2px 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border-2); font-size: 13px; color: var(--muted); }
.mh-strip .is-on { color: var(--text); font-weight: 600; box-shadow: 0 11px 0 -9px var(--accent); }
.mh-filters span { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; background: var(--surface-3); }
.mh-filters .si { width: 13px; height: 13px; }

/* the real phone screenshot over the member tab */
.mv-phone { position: absolute; right: -28px; bottom: -48px; width: 200px; border-radius: 30px; border: 7px solid var(--bezel); background: var(--surface); box-shadow: var(--shadow-phone); overflow: hidden; z-index: 2; }
.mv-phone img { width: 100%; height: auto; }
@media (max-width: 640px) { .mh { gap: 10px; } .mh-add { padding: 6px 8px; } }
/* hero v2: cards kept off the chat and the goal bar */
.hv2 .fl-alert { right: 24px; bottom: -22px; }
.hv2 .fl-fan { left: -36px; bottom: 40px; }
.hv2 .fl-wheel { left: 56px; top: -10px; bottom: auto; }
.hv2 .fl-fan { left: -40px; bottom: -14px; }
.hv2 .fl-wheel { left: -14px; top: -14px; }

/* the hero lighting (owner 2026-10-28: the earlier site's lime and violet light behind the hero; an owner choice over the design brief's single glow) */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; inset: -10% -30% auto; height: 820px; background: radial-gradient(closest-side, var(--hero-light-1), transparent 70%), radial-gradient(closest-side at 80% 30%, var(--hero-light-2), transparent 70%); pointer-events: none; z-index: -1; }
.hero-grid { position: relative; }


/* buttons are pills, the shape the owner approved on the earlier site (the mockup's 10-12 px corners were not approved) */
.btn-p, .btn-s, .plan-btn, .cta-dark, .cta-line, .tab, .tabs { border-radius: var(--r-pill); }

/* feature pages (design-reference/Feature-Monetization.dc.html) */
.fhero { max-width: var(--wrap); margin: 0 auto; padding: 48px var(--gutter) 96px; }
.frow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 72px; align-items: center; }
.frow.is-flip > .fcopy { order: 2; }
.fcopy { display: flex; flex-direction: column; gap: 18px; }
.fhero .fcopy { gap: 24px; }
.fh1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.03; }
.fhero .lead { font-size: 18px; max-width: 500px; }
.fnum { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--subtle); }
.h2-f { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.03em; }
.jump { border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); background: var(--bg-band); position: sticky; top: 68px; z-index: 10; }
.jump-in { max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gutter); display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.jump a { padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--border-3); color: var(--text-2); }
.jump a:hover { border-color: var(--accent); color: var(--text); }
.fsec { max-width: var(--wrap); margin: 0 auto; padding: 120px var(--gutter) 0; scroll-margin-top: 140px; }
.fmore-h { margin-bottom: 32px; }
.fmore { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.fmore-i { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--border); font-size: 15px; color: var(--text-2); }
.fmore-i .ck { margin-top: 2px; }
.fmore-i b { display: block; font-weight: 600; color: var(--text); }
.fmore-i small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.fmore-a { display: inline-block; margin-top: 28px; }
.fcta { border-radius: var(--r-2xl); background: var(--surface); border: 1px solid var(--border-2); padding: 56px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.fcta > div:first-child { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.fcta p { margin: 0; font-size: 16px; color: var(--muted); }
@media (max-width: 980px) {
  .frow { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .frow.is-flip > .fcopy { order: 0; }
  .fmore { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fmore { grid-template-columns: minmax(0, 1fr); }
  .fsec { padding-top: 80px; }
  .fcta { padding: 32px 24px; }
  .jump { position: static; }
  .jump-in { flex-wrap: nowrap; overflow-x: auto; }
  .jump a { white-space: nowrap; }
}

/* page header (pricing-style, design-reference/Pricing.dc.html) */
.phead { max-width: var(--wrap); margin: 0 auto; padding: 96px var(--gutter) 56px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.phead .lead { max-width: 600px; }
.phead .btn-row { justify-content: center; }

/* features overview: eight equal cards, two per row; the picture box is the same size on every card and its scene is fitted whole (site.js) */
.fcats-sec { padding-top: 0; }
.fcats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fcat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 16px 16px 24px; display: grid; grid-template-rows: auto 1fr auto; gap: 20px; color: var(--text); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.fcat:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-float); color: var(--text); }
.fcat-pic { position: relative; height: 300px; border-radius: 14px; overflow: hidden; background: var(--bg-band); border: 1px solid var(--divider); pointer-events: none; }
.fit-in { position: absolute; left: 50%; top: 50%; width: 640px; transform: translate(-50%, -50%) scale(.5); transform-origin: 50% 50%; }
.fit-in .sc { padding: 0; }
.fit-in .sc .fl, .fit-in .sc .glow, .fit-in .sc .sc-phone, .fit-in .sc .sc-strip { display: none; }
.fcat-t { display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
.fcat-t .body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.55em); }
.fcat .link-acc { padding: 0 8px; }
@media (prefers-reduced-motion: reduce) { .fcat { transition: none; } .fcat:hover { transform: none; } }
@media (max-width: 640px) { .phead { padding-top: 56px; } .fcats { grid-template-columns: minmax(0, 1fr); } .fcat-pic { height: 220px; } .fcat-t .h3 { min-height: calc(2 * 1.25em); line-height: 1.25; } }
.float-ic.is-dark svg { stroke: var(--accent); } /* line icons on the dark tile: lime, never black on black */
@media (max-width: 980px) { .fcat-t .h3 { min-height: calc(2 * 1.25em); line-height: 1.25; } } /* titles that wrap on narrower screens never make one card taller */

/* feature pages: the approved text under the pictures */
.how-h { margin-bottom: 16px; max-width: 900px; }
.how-intro { max-width: 760px; margin-bottom: 40px; }
.how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.how-i { padding: 28px 0; border-top: 1px solid var(--border-2); }
.how-i h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.how-i p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); }
.rel-h { margin-bottom: 24px; font-size: clamp(24px, 2.4vw, 32px); }
.rel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.rel li { border-top: 1px solid var(--border-2); }
.rel a { display: block; padding: 16px 0; font-size: 16px; font-weight: 500; color: var(--text); }
.rel a:hover { color: var(--accent); }
@media (max-width: 640px) { .how, .rel { grid-template-columns: minmax(0, 1fr); } .rel a { min-height: 44px; } }

/* pricing page (design-reference/Pricing.dc.html) */
.pr-sec { padding-top: 0; }
.plan-note { font-size: 13px; color: var(--subtle); margin-top: -10px; }
.plan-sum { font-size: 14px; color: var(--muted); line-height: 1.55; }
.plan-btns { display: flex; flex-direction: column; gap: 10px; }
.plan-btn.is-quiet { font-size: 14px; padding: 12px; }
.plan-list { border-top: 1px solid var(--border); padding-top: 20px; font-size: 14px; }
.plan-list.is-dim .ck { stroke: var(--muted); }
.plans .plan .plan-btn { margin-top: 0; }
.pr-h { margin-bottom: 32px; }
.ctable-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 18px; }
.ctable { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.ctable th, .ctable td { text-align: left; padding: 16px 24px; border-bottom: 1px solid var(--frame-url); color: var(--muted); font-weight: 400; }
.ctable thead th { background: var(--surface); color: var(--text); font-weight: 600; border-bottom-color: var(--border); }
.ctable thead th:first-child { color: var(--subtle); font-weight: 500; }
.ctable tbody th { color: var(--text-2); }
.ctable td.is-main { color: var(--text); font-weight: 500; }
.ctable thead th.is-main { color: var(--accent); }
.ctable tbody tr:last-child th, .ctable tbody tr:last-child td { border-bottom: 0; }
.pr-small { margin: 16px 0 0; font-size: 14px; color: var(--subtle); }
.pr-small a { color: var(--accent); }
/* pricing cards line up row by row (name, text, price, note, buttons, list) whatever each card holds */
.pr-sec .plans { grid-template-rows: repeat(6, auto); }
.pr-sec .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; gap: 14px; }
.pr-sec .plan-note { margin-top: 0; }
.phead .pill-new { align-self: center; }
@media (max-width: 980px) { .pr-sec .plans { grid-template-rows: none; } .pr-sec .plan { grid-row: auto; grid-template-rows: none; } }

/* full feature list */
.fl-sec { padding-top: 0; }
.fl-tools { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.fl-q { width: 100%; max-width: 560px; height: 48px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--text); background: var(--surface); border: 1px solid var(--border-3); border-radius: var(--r-md); }
.fl-q::placeholder { color: var(--subtle); }
.fl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-chip { min-height: 40px; padding: 8px 16px; font: inherit; font-size: 14px; color: var(--text-2); background: transparent; border: 1px solid var(--border-3); border-radius: var(--r-pill); cursor: pointer; }
.fl-chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.fl-group { margin-bottom: 56px; }
.fl-group[hidden], .fl-item[hidden] { display: none; }
.fl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.fl-empty { color: var(--muted); }
.fl-empty a { color: var(--accent); }
@media (max-width: 640px) { .fl-chip { min-height: 44px; } }

/* compare page */
.cmp-t { min-width: 900px; }
.cmp-t td { vertical-align: top; line-height: 1.5; }
.pr-small a { color: var(--accent); }
.cmp-txt .h2-s { margin-bottom: 32px; }
.cmp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.cmp-cols > div { padding: 24px 0; border-top: 1px solid var(--border-2); }
.cmp-cols h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.cmp-cols p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); }
.cmp-classic { margin-top: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 24px 30px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.cmp-classic > div { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 640px) { .cmp-cols { grid-template-columns: minmax(0, 1fr); } }

/* other uses overview */
.uc-cards .fcat { padding: 28px; }
.uc-ic { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent-12); border: 1px solid var(--accent-35); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.uc-ic .si { width: 22px; height: 22px; }
.uc-cards .fcat-t .body { -webkit-line-clamp: 4; min-height: calc(4 * 1.55em); }

/* home: other uses strip */
.uses-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: 28px 32px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.uses-strip .body { margin-top: 6px; }
.uses-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.uses-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--border-3); color: var(--text); font-size: 14px; font-weight: 500; }
.uses-links a:hover { border-color: var(--accent-35); background: var(--accent-12); }
.uses-links a.is-all { color: var(--accent); border-color: var(--accent-35); }
@media (max-width: 900px) { .uses-strip { grid-template-columns: minmax(0, 1fr); padding: 24px; } .uses-links { justify-content: flex-start; } }

/* demo: things to try */
.tries { gap: 16px; }
.try { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--border-2); background: var(--surface); }
.try h3 { margin: 0; font-size: 18px; font-weight: 600; }
.try p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.nf { padding-bottom: 140px; }

/* home: link from a feature tile to its page */
.bento-a { align-self: flex-start; margin-top: 4px; color: var(--accent); font-size: 14px; font-weight: 600; }
.bento-a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tab-more { margin: 0 0 28px; text-align: center; font-size: 15px; }

/* demo page: the four sign-ins */
.dl-cards { gap: 16px; }
.dl-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--border-2); background: var(--surface); }
.dl-card .body { color: var(--muted); font-size: 15px; line-height: 1.55; flex: 1; }
.dl-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 4px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); font-size: 14px; }
.dl-kv dt { color: var(--subtle); }
.dl-kv dd { margin: 0; color: var(--text); font-family: var(--font-mono); overflow-wrap: anywhere; }
.dl-go { justify-content: center; margin-top: 6px; }
.dl-note { margin: 20px 0 0; color: var(--subtle); font-size: 14px; max-width: 760px; line-height: 1.6; }
/* the calculator's split: what goes to the models and to the payment provider, under what members spend */
.calc-split { margin: 0 0 14px; padding: 12px 0; border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); display: grid; gap: 6px; }
.calc-split div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.calc-split dt { color: var(--muted); }
.calc-split dd { margin: 0; font-family: var(--font-mono); color: var(--text-2); }
.calc-how { margin: -4px 0 12px; font-size: 13px; color: var(--subtle); }