/* Shared components. Inventory and usage: docs/WAVE1-PHASE-A-REPORT.md.
   Rules: glass only on .site-header, .mobile-cta, .mobile-nav, .dd-panel and .dialog (owner item 12);
   at most two card variants (.card, .card-plain); hover motion only for real pointers;
   UI transitions 160 to 220 ms; transform and opacity only. */

/* ============================================================ Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 22px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-16); line-height: 1.2; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition-property: transform, background-color, border-color, color; transition-duration: var(--t-press); transition-timing-function: var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn-primary { color: var(--on-brand); background-color: var(--brand); background-image: linear-gradient(180deg, #D9BD80 0%, var(--brand) 55%, #B58F42 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.12); }
.btn-primary::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 10px 30px var(--brand-glow); opacity: 0; transition: opacity var(--t-ui) var(--ease-out); pointer-events: none; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; color: var(--text); padding-inline: 14px; min-height: 44px; border: 0; }
.btn-sm { min-height: 44px; padding: 9px 18px; font-size: var(--fs-14); }
.btn-block { width: 100%; }
.btn .ic { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-1px); }
  .btn-primary:hover::after { opacity: 1; }
  .btn-secondary:hover { border-color: var(--text-3); transform: translateY(-1px); }
  .btn-ghost:hover { color: var(--brand-ink); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479px) { .btn-row > .btn { width: 100%; } }
.btn-note { margin-top: var(--s-3); font-size: var(--fs-14); color: var(--text-2); max-width: 54ch; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand-ink); text-decoration: none; font-size: var(--fs-16); }
.link .ic { transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link:hover .ic { transform: translateX(3px); } .link:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ============================================================ Small labels */
.icon-tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--brand-ink); background: linear-gradient(160deg, var(--surface), var(--brand-soft)); border: 1px solid var(--brand-line); box-shadow: var(--glass-hi); flex: none; margin: 0; font-size: inherit; }
.demo-tag, .soon-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 600; line-height: 1.5; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; }
.demo-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.soon-tag { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.tag { display: inline-flex; font-size: var(--fs-12); font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
.tag.gold { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.tag.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 600; background: var(--ok-soft); color: var(--ok); width: fit-content; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-14); font-weight: 700; background: var(--brand-soft); color: var(--brand-ink); flex: none; border: 1px solid var(--brand-line); }

/* ============================================================ Header (glass) */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--glass-strong); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border-bottom: 1px solid var(--border); box-shadow: var(--glass-hi); transition: transform 250ms var(--ease-out); }
@media (min-width: 1024px) { .site-header { -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); } }
.site-header::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 20px; transform: translateY(100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), transparent); opacity: 0; transition: opacity var(--t-ui) var(--ease-out); pointer-events: none; }
.site-header.is-scrolled::after { opacity: 1; }
/* Phone: the header steps aside while reading down and returns on the way up (design finding 14). */
@media (max-width: 767px) { .site-header.is-tucked { transform: translateY(-100%); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--page); } }
.site-header .container { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; white-space: nowrap; flex: none; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-21); letter-spacing: -0.01em; color: var(--text); min-height: 44px; }
.brand span { color: var(--brand-ink); margin-left: 0.28em; }
.nav { display: none; align-items: center; gap: 2px; margin-left: 12px; }
.nav > a, .nav-dd > button { text-decoration: none; color: var(--text-2); font-size: var(--fs-16); font-weight: 500; padding: 9px 14px; border-radius: var(--r-pill); border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; transition-property: background-color, color; transition-duration: 180ms; transition-timing-function: ease; }
.nav > a:hover, .nav-dd > button:hover, .nav-dd > button[aria-expanded="true"] { color: var(--text); background: var(--surface-2); }
.nav > a[aria-current="page"] { color: var(--text); }
.nav-dd { position: relative; }
.nav-dd > button .ic { transition: transform var(--t-ui) var(--ease-out); }
.nav-dd > button[aria-expanded="true"] .ic { transform: rotate(180deg); }
.dd-panel { position: absolute; top: calc(100% + 10px); left: -12px; width: 430px; padding: 10px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top left; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms; }
.dd-panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd-panel a { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border-radius: var(--r); text-decoration: none; transition: background-color 160ms ease; }
.dd-panel .dd-soon { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border-radius: var(--r); }
.dd-panel a:hover { background: var(--surface-2); }
.dd-panel .icon-tile { width: 38px; height: 38px; border-radius: 10px; }
/* Specific selectors: the old ".dd-panel span" rule also hit .icon-tile and pinned the icon (design finding 5). */
.dd-panel .dd-text b { display: block; font-size: var(--fs-16); font-weight: 600; color: var(--text); line-height: 1.3; }
.dd-panel .dd-text small { display: block; font-size: var(--fs-14); color: var(--text-2); line-height: 1.45; margin-top: 2px; }
.dd-panel .dd-text .soon-tag { margin-top: 6px; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.menu-btn .ic-close { display: none; }
.menu-btn[aria-expanded="true"] .ic-open { display: none; }
.menu-btn[aria-expanded="true"] .ic-close { display: block; }
.mobile-nav { position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; padding: 8px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transform-origin: top right; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms; max-height: calc(100dvh - var(--header-h) - 24px); overflow: auto; overscroll-behavior: contain; }
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; min-height: 48px; text-decoration: none; border-radius: var(--r); font-weight: 500; }
.mobile-nav a:hover { background: var(--surface-2); }
.mobile-nav .group { padding: 12px 14px 4px; font-size: var(--fs-14); font-weight: 600; color: var(--text-2); }
.mobile-nav .sub a { padding-left: 26px; }
.mobile-nav .btn { margin: 8px 6px 4px; width: calc(100% - 12px); }
@media (max-width: 519px) { .header-actions .btn-primary { display: none; } }
@media (min-width: 1024px) {
  .nav { display: flex; }
  .menu-btn, .mobile-nav { display: none; }
}

/* ============================================================ Footer */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding-block: var(--s-8) var(--s-6); font-size: var(--fs-14); position: relative; z-index: var(--z-content); }
.foot { display: grid; gap: var(--s-5); }
.foot-intro p { margin-top: var(--s-3); max-width: 34ch; color: var(--text-2); }
.foot-group { border-top: 1px solid var(--border); }
.foot-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 600; font-size: var(--fs-16); }
.foot-group summary::-webkit-details-marker { display: none; }
.foot-group summary .ic { color: var(--text-2); transition: transform var(--t-ui) var(--ease-out); }
.foot-group[open] summary .ic { transform: rotate(180deg); }
.foot-group ul { display: grid; gap: 4px; padding-bottom: var(--s-4); }
.foot-group li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; color: var(--text-2); }
.foot-group a { text-decoration: none; color: var(--text-2); }
.foot-group a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 720px) {
  .foot { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
  .foot-group { border-top: 0; }
  .foot-group summary { pointer-events: none; min-height: 0; margin-bottom: var(--s-3); font-size: var(--fs-14); }
  .foot-group summary .ic { display: none; }
}
.legal { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--border); display: grid; gap: 6px; color: var(--text-2); }
.legal b { color: var(--text); font-weight: 600; }
.legal .foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: var(--s-2); }
.legal .foot-links a { color: var(--text); font-weight: 500; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.legal .foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================ Cards: two variants only */
/* .card: solid surface with the gold gradient edge. .card-plain: quiet tinted panel, no edge. */
.card { position: relative; border-radius: var(--r-lg); padding: var(--s-5); border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(140deg, var(--brand-line), var(--border) 36%, var(--border) 64%, var(--brand-line)) border-box; box-shadow: var(--shadow-sm); }
.card--featured { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(150deg, var(--brand), var(--brand-line) 45%, var(--brand)) border-box; box-shadow: var(--shadow); }
/* Plan names in their own colours (tokens --plan-*), wherever a plan is named: cards, the comparison
   header, the calculator's plan picker, the founder prices. */
.plan-c-basic { color: var(--plan-basic); }
.plan-c-premium { color: var(--plan-premium); }
.plan-c-enterprise { color: var(--plan-enterprise); }
.card-plain { border-radius: var(--r-lg); padding: var(--s-5); background: var(--surface-2); border: 1px solid var(--border); }
.card h3, .card-plain h3 { font-size: var(--fs-18); line-height: 1.3; }
.card p, .card-plain p { color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .card.is-lift { transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
  .card.is-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
}

/* ============================================================ Editorial list */
/* Rows of title plus text, hairline separators, one or two columns. No icons, no cards. */
.elist { display: grid; column-gap: var(--s-7); }
.elist > li { padding-block: var(--s-4); border-top: 1px solid var(--border); display: grid; gap: 4px; align-content: start; }
.elist > li > b, .elist .elist-title { font-weight: 600; font-size: var(--fs-16); line-height: 1.4; color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.elist > li > span, .elist .elist-text { color: var(--text-2); }
@media (min-width: 900px) { .elist.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.elist.lg > li { padding-block: var(--s-5); }
.elist.lg .elist-title { font-family: var(--font-display); font-size: var(--fs-21); letter-spacing: -0.01em; }

/* ============================================================ Receipt strip */
/* One continuous strip of short promises, separated by gold dots, like a printed receipt. */
.receipt { position: relative; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: grid; }
.receipt::before, .receipt::after { content: ""; position: absolute; left: 18px; right: 18px; height: 6px; background-image: radial-gradient(circle, var(--page-2) 2.5px, transparent 3px); background-size: 12px 6px; background-repeat: repeat-x; }
.receipt::before { top: -3px; } .receipt::after { bottom: -3px; }
.receipt-item { padding: var(--s-5); display: grid; gap: 6px; align-content: start; position: relative; }
.receipt-item + .receipt-item::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
/* Separators are rows of dots, never dashes (owner rule). */
.receipt-item + .receipt-item { background-image: radial-gradient(circle, var(--border-strong) 1px, transparent 1.4px); background-size: 8px 2px; background-repeat: repeat-x; background-position: 0 0; }
.receipt-item b { font-family: var(--font-display); font-size: var(--fs-18); line-height: 1.3; }
.receipt-item p { color: var(--text-2); font-size: var(--fs-16); }
.receipt-item .link { margin-top: 4px; font-size: var(--fs-14); }
@media (min-width: 900px) {
  .receipt { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  .receipt-item + .receipt-item { background-image: radial-gradient(circle, var(--border-strong) 1px, transparent 1.4px); background-size: 2px 8px; background-repeat: repeat-y; }
  .receipt-item + .receipt-item::before { top: 50%; left: -4px; margin: -3.5px 0 0; }
}

/* ============================================================ Business-type strip */
/* Still on desktop (wraps); on the phone a row the person drags (scroll-snap). Never auto-moving. */
.strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 10px; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
.strip::-webkit-scrollbar { display: none; }
.strip > li { scroll-snap-align: start; flex: none; }
.strip-item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-14); font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text); }
a.strip-item { border-color: var(--brand-line); }
a.strip-item .ic { color: var(--brand-ink); }
.strip-item--all { color: var(--brand-ink); background: var(--brand-soft); border-color: var(--brand-line); font-weight: 600; }
.strip { scroll-padding-inline: var(--gutter); }
.strip:focus-visible { outline-offset: -2px; border-radius: var(--r); }
@media (min-width: 900px) { .strip { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-inline: 0; margin-inline: 0; } }

/* ============================================================ Device: the 3D phone */
/* Real 6.1 inch proportion (1 : 2.06), corners 12% of the width, thickness 10% of the width built
   from 14 tinted layers. Size it with --pw on the .device or a parent. */
.device { --pw: 304px; --ph: calc(var(--pw) * 2.0615); --pr: calc(var(--pw) * 0.12); --pt: calc(var(--pw) * 0.1); position: relative; width: var(--pw); height: var(--ph); flex: none; transform-style: preserve-3d; }
.device-body { position: absolute; inset: 0; transform-style: preserve-3d; }
.device-body i { position: absolute; inset: 0; border-radius: var(--pr); background: hsl(30 3% var(--l)); transform: translateZ(calc(var(--pt) * var(--z))); }
.device-body i:nth-child(1) { --z: -0.500; --l: 22%; background: #1B1C1F; }
.device-body i:nth-child(2) { --z: -0.426; --l: 37%; }
.device-body i:nth-child(3) { --z: -0.352; --l: 45%; }
.device-body i:nth-child(4) { --z: -0.278; --l: 52%; }
.device-body i:nth-child(5) { --z: -0.205; --l: 57%; }
.device-body i:nth-child(6) { --z: -0.131; --l: 60%; }
.device-body i:nth-child(7) { --z: -0.057; --l: 62%; }
.device-body i:nth-child(8) { --z: 0.017; --l: 62%; }
.device-body i:nth-child(9) { --z: 0.091; --l: 60%; }
.device-body i:nth-child(10) { --z: 0.165; --l: 57%; }
.device-body i:nth-child(11) { --z: 0.238; --l: 52%; }
.device-body i:nth-child(12) { --z: 0.312; --l: 45%; }
.device-body i:nth-child(13) { --z: 0.386; --l: 37%; }
.device-body i:nth-child(14) { --z: 0.460; --l: 22%; }
.device-shade { position: absolute; inset: 6% 8% 0; border-radius: var(--pr); background: rgba(30, 22, 10, 0.34); filter: blur(18px); transform: translateZ(calc(var(--pt) * -0.5 - 2px)) translateY(14px); }
.device-floor { position: absolute; left: 4%; right: 4%; top: calc(100% - var(--pw) * 0.35); height: calc(var(--pw) * 0.7); border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 20, 8, 0.38), rgba(30, 20, 8, 0.12) 55%, transparent); filter: blur(5px); transform: translateY(2px) rotateX(90deg); }
.key { position: absolute; width: calc(var(--pt) * 0.36); left: calc(var(--pw) * 1.005 - var(--pt) * 0.18); border-radius: 3px; background: linear-gradient(90deg, #3A3C41, #9A9DA3 50%, #3A3C41); transform: rotateY(90deg); }
.key-l { left: calc(var(--pw) * -0.005 - var(--pt) * 0.18); transform: rotateY(-90deg); }
.key-power { top: 25%; height: 10%; } .key-action { top: 17%; height: 4%; } .key-up { top: 25%; height: 6%; } .key-down { top: 33%; height: 6%; }
.phone { position: absolute; inset: 0; padding: calc(var(--pw) * 0.026); border: calc(var(--pw) * 0.006) solid transparent; border-radius: var(--pr); background: linear-gradient(#050506, #050506) padding-box, linear-gradient(145deg, #A4A7AD, #3C3E43 28%, #26272B 62%, #8E9197) border-box; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); transform: translateZ(calc(var(--pt) * 0.5)); }
.screen { position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column; border-radius: calc(var(--pr) - var(--pw) * 0.032); background: var(--chat-bg); }
.island { position: absolute; top: calc(var(--pw) * 0.026); left: 50%; width: calc(var(--pw) * 0.3); height: calc(var(--pw) * 0.088); margin-left: calc(var(--pw) * -0.15); border-radius: 20px; background: #000; z-index: 3; }
.status { height: calc(var(--pw) * 0.142); flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--pw) * 0.085); font-size: var(--fs-12); font-weight: 600; background: var(--wa-head); color: var(--bubble-text); }
.status .sig { display: flex; gap: 3px; align-items: flex-end; height: 11px; }
.status .sig i { display: block; width: 3px; border-radius: 1px; background: currentColor; }
.status .sig i:nth-child(1) { height: 5px; } .status .sig i:nth-child(2) { height: 7px; } .status .sig i:nth-child(3) { height: 9px; } .status .sig i:nth-child(4) { height: 11px; }
.glare { position: absolute; top: -10%; bottom: -10%; left: -100%; width: 300%; z-index: 4; pointer-events: none; background: linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, 0.08) 46.5%, rgba(255, 255, 255, 0.03) 51%, transparent 57%); transform: translateX(-4%); }
.rim { position: absolute; inset: 0; border-radius: calc(var(--pr) - var(--pw) * 0.006); overflow: hidden; pointer-events: none; }
.rim .glare { z-index: 0; background: linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, 0.3) 46.5%, rgba(255, 255, 255, 0.1) 51%, transparent 57%); }
@media (prefers-reduced-motion: reduce) { .device { transform: rotateX(5deg) rotateY(-14deg); } }

/* ============================================================ Chat (inside .screen, or flat as .chat-card) */
.wa-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 6px 8px 12px; background: var(--wa-head); color: var(--bubble-text); border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.wa-head .avatar { width: 34px; height: 34px; font-size: var(--fs-12); }
.wa-head > div { min-width: 0; flex: 1; }
.wa-head b { display: block; font-size: var(--fs-14); font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-head small { font-size: var(--fs-12); color: var(--bubble-meta); }
/* Pause is a 44 px target (design finding 15); the drawn circle stays small. */
.chat-pause { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--bubble-meta); display: grid; place-items: center; cursor: pointer; }
.chat-pause:hover { background: rgba(0, 0, 0, 0.06); }
.chat-pause .ic-play { display: none; }
.chat-pause[aria-pressed="true"] .ic-play { display: block; }
.chat-pause[aria-pressed="true"] .ic-pause { display: none; }
.wa-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 9px 8px; background-image: radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(transparent, #000 24px); mask-image: linear-gradient(transparent, #000 24px); }
.m { max-width: 86%; padding: 6px 9px 4px; border-radius: 10px; font-size: var(--fs-14); line-height: 1.38; color: var(--bubble-text); box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13); }
.m small { display: block; font-size: var(--fs-12); color: var(--bubble-meta); text-align: right; margin-top: 1px; line-height: 1.3; }
.m.in { align-self: flex-start; background: var(--bubble-in); border-top-left-radius: 3px; }
.m.out { align-self: flex-end; background: var(--bubble-out); border-top-right-radius: 3px; }
.m.out small, .m.out .by { color: var(--bubble-meta-out); }
.m .by { display: block; font-size: var(--fs-12); font-weight: 600; color: var(--bubble-meta); margin-bottom: 1px; }
.sys { align-self: center; font-size: var(--fs-12); font-weight: 600; color: var(--bubble-meta); background: var(--bubble-in); border-radius: 8px; padding: 4px 10px; text-align: center; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13); max-width: 90%; }
.why { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 94%; }
/* What the assistant did. Solid tinted chip: no blur inside the chat (design finding 3). */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 600; line-height: 1.35; color: var(--brand-ink); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.chip .ic { width: 13px; height: 13px; }
.typing { align-self: flex-end; display: none; gap: 4px; padding: 10px 12px; background: var(--bubble-out); border-radius: 10px; }
.typing.is-on { display: inline-flex; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--bubble-meta); }
@keyframes bd-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .typing i { animation: bd-blink 1.2s infinite; }
  .typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
}
.wa-input { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px 14px; background: var(--chat-bg); }
.wa-input span { flex: 1; height: 36px; border-radius: 20px; background: var(--bubble-in); display: flex; align-items: center; padding: 0 14px; font-size: var(--fs-14); color: var(--bubble-meta); }
.wa-input i { width: 36px; height: 36px; border-radius: 50%; background: var(--wa-send); display: grid; place-items: center; color: #fff; }
/* Loop states, set by site.js. Content stays visible without JS (first frame is complete). */
/* A step not shown yet takes no space, so the chat stays anchored at the bottom like a real one. */
.chat.is-playing .step:not(.is-shown) { display: none; }
@keyframes bd-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bd-msg-fade { from { opacity: 0; } to { opacity: 1; } }
.chat.is-playing .step.is-shown { animation: bd-msg-in 320ms var(--ease-out) both; }
.chat .wa-body > * { transition: opacity 400ms var(--ease-out); }
.chat.is-leaving .wa-body > * { opacity: 0; }
/* Reduced motion keeps the conversation as content: opacity only, no rise (design, effects table row 1). */
@media (prefers-reduced-motion: reduce) {
  .chat.is-playing .step.is-shown { animation: bd-msg-fade 250ms linear both; }
}

/* ============================================================ CRM: browser frame and the compact card */
.browser { border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.browser-bar { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.browser-bar .dots { display: flex; gap: 7px; }
.browser-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.browser-bar .url { flex: 1; max-width: 340px; margin-inline: auto; height: 26px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-12); color: var(--text-2); display: flex; align-items: center; justify-content: center; gap: 6px; }
.crm { display: grid; grid-template-columns: 52px 180px minmax(0, 1fr); min-height: 460px; font-size: var(--fs-14); }
.crm-rail { background: var(--page-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 16px; color: var(--text-3); }
.crm-rail span { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
.crm-rail span.on { background: var(--brand-soft); color: var(--brand-ink); }
.crm-list { border-right: 1px solid var(--border); padding: 14px 10px; display: grid; align-content: start; gap: 8px; }
.sk { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; }
.sk.on { background: var(--surface-2); }
.sk i { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); flex: none; }
.sk.on i { background: var(--brand-soft); }
.sk span { flex: 1; display: grid; gap: 6px; }
.sk b, .sk s { display: block; height: 7px; border-radius: 4px; background: var(--border); }
.sk b { width: 70%; } .sk s { width: 92%; opacity: 0.6; }
.crm-detail { padding: 22px 24px; display: grid; align-content: start; gap: 14px; min-width: 0; }
.who { display: flex; align-items: center; gap: 12px; }
.who > div { min-width: 0; }
.who b { display: block; font-size: var(--fs-16); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.who small { display: block; font-size: var(--fs-12); color: var(--text-2); overflow-wrap: anywhere; }
.kv { display: grid; gap: 8px; }
.kv div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
.kv dt { color: var(--text-2); }
.kv dd { font-weight: 500; overflow-wrap: anywhere; }
.note { padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); }
.note b { display: block; font-size: var(--fs-12); color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.note p { line-height: 1.5; }
.crm-detail .btn { min-height: 40px; font-size: var(--fs-14); width: fit-content; }
/* Compact card docked under the phone (phone and tablet, design effects table row 2). */
.crm-card { position: relative; z-index: 2; width: min(330px, 100%); padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); display: grid; gap: 8px; font-size: var(--fs-14); }
.crm-card .who .avatar { width: 34px; height: 34px; font-size: var(--fs-12); }
.crm-card .kv div { grid-template-columns: 76px minmax(0, 1fr); }
.crm-card .sum { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swap { transition: opacity 300ms var(--ease-out); }
.swap.is-fading { opacity: 0; }

/* ============================================================ Segmented toggle */
.seg-toggle { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); max-width: 100%; }
.seg-toggle__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 2)); border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transform: translateX(calc(100% * var(--i, 0))); transition: transform var(--t-ui) var(--ease-out); }
.seg-toggle[data-index="1"] .seg-toggle__thumb { --i: 1; }
.seg-toggle[data-index="2"] .seg-toggle__thumb { --i: 2; }
.seg-toggle button { position: relative; z-index: 1; border: 0; background: transparent; padding: 9px 16px; min-height: 44px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-14); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.seg-toggle button[aria-pressed="true"] { color: var(--text); }
@media (min-width: 480px) { .seg-toggle button { font-size: var(--fs-16); padding-inline: 20px; } }

/* ============================================================ Accordion (details/summary) */
.acc > details { border-bottom: 1px solid var(--border); }
.acc > details:first-child { border-top: 1px solid var(--border); }
.acc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-weight: 600; font-size: var(--fs-16); min-height: 56px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ic { color: var(--text-2); transition: transform var(--t-ui) var(--ease-out); }
.acc details[open] > summary .ic { transform: rotate(45deg); }
.acc .acc-body { padding: 0 0 20px; color: var(--text-2); max-width: 66ch; display: grid; gap: 10px; }
@media (min-width: 1024px) { .acc summary { font-size: var(--fs-18); padding-block: 18px; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes bd-fade { from { opacity: 0; } to { opacity: 1; } }
  .acc details[open] .acc-body { animation: bd-fade 200ms var(--ease-out); }
}
/* A bigger disclosure used for "see the other N" lists. */
.more { margin-top: var(--s-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; font-weight: 600; min-height: 56px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary .ic { transition: transform var(--t-ui) var(--ease-out); color: var(--text-2); flex: none; }
.more[open] > summary .ic { transform: rotate(180deg); }
.more > .more-body { padding: 0 20px 12px; }

/* ============================================================ Dialog (glass) */
.dialog { border: 1px solid var(--border); border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); color: var(--text); padding: 0; width: min(460px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); }
.dialog[open] { opacity: 1; transform: none; transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); }
@starting-style { .dialog[open] { opacity: 0; transform: scale(0.96) translateY(6px); } }
@media (prefers-reduced-motion: reduce) { @starting-style { .dialog[open] { transform: none; } } }
.dialog::backdrop { background: rgba(10, 10, 12, 0.5); }
.dlg { padding: 28px; display: grid; gap: 16px; }
.dlg h2 { font-size: var(--fs-26); letter-spacing: -0.015em; line-height: 1.2; }
.dlg p { color: var(--text-2); }
.dlg label { font-size: var(--fs-14); font-weight: 600; display: grid; gap: 6px; }
.dlg input[type="email"] { font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--page); color: var(--text); min-height: 48px; }
.dlg .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--text-2); }
.dlg .check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--brand-ink); flex: none; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dlg .status-msg { padding: 12px 14px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.dlg .status-msg[hidden] { display: none; }

/* ============================================================ "Sem letra miúda" guarantee block */
.nofine { display: grid; gap: var(--s-5); padding: var(--s-6) var(--s-5); }
.nofine-head h3 { font-family: var(--font-display); font-size: var(--fs-26); line-height: 1.15; letter-spacing: -0.02em; }
.nofine-head p { margin-top: 6px; font-size: var(--fs-18); color: var(--text-2); }
.nofine ul { display: grid; gap: var(--s-3); }
.nofine li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.nofine li .ok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.nofine li .ok .ic { width: 15px; height: 15px; stroke-width: 2.2; }
@media (min-width: 900px) {
  .nofine { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; padding: var(--s-7); gap: var(--s-7); }
  .nofine-head h3 { font-size: var(--fs-34); }
}
.nofine-line { display: inline-flex; align-items: flex-start; gap: 10px; font-weight: 600; color: var(--text); }
.nofine-line::before { content: ""; width: 7px; height: 7px; margin-top: 0.62em; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); flex: none; }

/* ============================================================ Meta cost calculator */
.calc { display: grid; gap: var(--s-5); }
.calc-head h3 { font-family: var(--font-display); font-size: var(--fs-26); line-height: 1.15; letter-spacing: -0.02em; }
.calc-head p { margin-top: 6px; color: var(--text-2); }
.calc-fields { display: grid; gap: var(--s-4); }
.calc-field { display: grid; gap: 6px; align-content: start; }
.calc-field label { font-weight: 600; font-size: var(--fs-14); }
.calc-field small { color: var(--text-2); font-size: var(--fs-14); }
.calc-field input { font: inherit; font-variant-numeric: tabular-nums; width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.calc-out { border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); padding: var(--s-5); display: grid; gap: 8px; align-content: start; }
.calc-out .calc-total { font-family: var(--font-display); font-size: var(--fs-34); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.calc-out ul { display: grid; gap: 4px; font-size: var(--fs-14); color: var(--text-2); }
.calc-out li { display: flex; justify-content: space-between; gap: 12px; }
.calc-out li span:last-child { font-variant-numeric: tabular-nums; color: var(--text); }
.calc-src { font-size: var(--fs-14); color: var(--text-2); }
.calc-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.calc-help { font-size: var(--fs-14); color: var(--text-2); margin-bottom: calc(-1 * var(--s-3)); }
.calc-field input { padding-inline: 10px; }
/* Phone: one helper line for the group instead of one per field (calm design). */
@media (max-width: 639px) { .calc-field small { display: none; } .calc { gap: var(--s-4); } }
@media (min-width: 640px) { .calc-help { display: none; } }
@media (min-width: 1024px) { .calc { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); column-gap: var(--s-7); } .calc-head { grid-column: 1 / -1; } }
@media (max-width: 767px) { .section { --section-y: 56px; } }

/* ============================================================ Phone bottom bar (glass) */
/* Hidden until the hero buttons leave the screen; hidden again at the final call to action or footer. */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); display: flex; gap: 8px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--glass-strong); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border-top: 1px solid var(--border); transform: translateY(110%); visibility: hidden; transition: transform 250ms var(--ease-out), visibility 0s linear 250ms; }
.mobile-cta.is-shown { transform: none; visibility: visible; transition-delay: 0s; }
.mobile-cta .btn { flex: 1; min-height: 48px; font-size: var(--fs-16); padding-inline: 12px; }
@media (min-width: 768px) { .mobile-cta { display: none; } }

/* ============================================================ Light mesh (aurora) */
/* Static by default. One moving mesh per screen at most (.aurora.is-drifting, paused off screen). */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora i { position: absolute; border-radius: 50%; }
.aurora .a1 { width: 780px; height: 780px; right: -180px; top: -260px; background: radial-gradient(closest-side, var(--brand-glow), transparent); }
.aurora .a2 { width: 640px; height: 640px; left: -240px; top: 120px; background: radial-gradient(closest-side, var(--sand-glow), transparent); }
@media (max-width: 767px) { .aurora .a2 { display: none; } .aurora .a1 { width: 520px; height: 520px; right: -220px; top: -160px; } }
@keyframes bd-float1 { to { transform: translate3d(-60px, 50px, 0) scale(1.08); } }
@keyframes bd-float2 { to { transform: translate3d(70px, -40px, 0) scale(0.94); } }
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .aurora.is-drifting .a1 { animation: bd-float1 22s var(--ease-in-out) infinite alternate; }
  .aurora.is-drifting .a2 { animation: bd-float2 26s var(--ease-in-out) infinite alternate; }
  .aurora.is-offscreen i, .tab-hidden .aurora i { animation-play-state: paused; }
}
.mobile-nav .group-note { font-weight: 400; padding-top: 4px; padding-bottom: 8px; }

/* Theme switch: a small pill with two segments, sun and moon (owner, 2026-10-04: "only with a sun and a
   moon on it"), in the Liquid Glass language of the buttons (glass.css, tokens --g-* in tokens.css):
   the track is clear glass like .btn-secondary (translucent tint, faint line, hairline top highlight,
   soft sheen, light blur on desktop), the thumb is the gold glass of .btn-primary.
   The visible pill is 78 x 33 (segments 35 x 25, thumb 37 x 27 with its 1 px gold line); each segment reaches 44 x 44 through an invisible hit area that grows
   outwards (top, bottom and its outer side), so the pill stays small and the target comfortable. The
   thumb slides 200 ms on the strong ease-out and is instant under reduced motion. State comes from
   :root[data-theme], so it is right before any script runs. */
.theme-switch { --seg: 35px; --pad: 3px; position: relative; display: inline-grid; grid-template-columns: var(--seg) var(--seg); height: 33px; padding: var(--pad); border-radius: var(--r-pill); background-color: var(--g-sec); border: 1px solid var(--g-sec-line); box-shadow: var(--g-sec-edge), var(--g-sec-drop); flex: none; isolation: isolate; margin-top: 1px; }
.theme-switch::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, var(--g-sec-sheen) 0%, rgba(255, 255, 255, 0) 56%); opacity: 0.85; transition: opacity 220ms var(--g-ease); }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .theme-switch { -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); }
  .theme-switch:hover::before { opacity: 1; }
}
.theme-switch__thumb { position: absolute; z-index: 0; top: calc(var(--pad) - 1px); bottom: calc(var(--pad) - 1px); left: calc(var(--pad) - 1px); width: calc(var(--seg) + 2px); border-radius: var(--r-pill); border: 1px solid var(--g-pri-line); background-color: var(--g-pri-mid); background-image: linear-gradient(180deg, var(--g-pri-top) 0%, var(--g-pri-mid) 55%, var(--g-pri-bot) 100%); box-shadow: var(--g-pri-edge), var(--g-pri-drop); transform: translateX(0); transition: transform 200ms var(--g-ease); will-change: transform; }
.theme-switch__thumb::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--g-pri-sheen) 0%, rgba(255, 255, 255, 0) 56%); opacity: 0.85; }
:root[data-theme="dark"] .theme-switch__thumb { transform: translateX(var(--seg)); }
.theme-switch button { position: relative; z-index: 1; display: grid; place-items: center; width: var(--seg); height: 100%; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--switch-icon); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 160ms ease; }
.theme-switch button::before { content: ""; position: absolute; top: -10px; bottom: -9px; }
.theme-switch button:first-of-type::before { left: -9px; right: 0; }
.theme-switch button:last-of-type::before { left: 0; right: -9px; }
.theme-switch .ic { width: 17px; height: 17px; stroke-width: 1.9; transition: transform 140ms var(--ease-out); }
.theme-switch button:active .ic { transform: scale(0.88); }
:root:not([data-theme="dark"]) .theme-switch [data-theme-set="light"],
:root[data-theme="dark"] .theme-switch [data-theme-set="dark"] { color: var(--on-brand); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  :root:not([data-theme="dark"]) .theme-switch [data-theme-set="dark"]:hover,
  :root[data-theme="dark"] .theme-switch [data-theme-set="light"]:hover { color: var(--text); }
}
.theme-switch button:focus-visible { outline: none; }
.theme-switch:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
@supports not selector(:has(*)) { .theme-switch button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } }
@media (prefers-reduced-motion: reduce) { .theme-switch__thumb, .theme-switch .ic { transition: none; } }
/* While the theme flips, nothing else may animate its colours (a storm of 200 ms colour fades
   across the page); the thumb is the one thing that moves. site.js sets the class for two frames. */
:root.theme-switching *:not(.theme-switch__thumb), :root.theme-switching *::before, :root.theme-switching *::after { transition: none !important; }
/* Placement: in the header from 768 px, at the right end (after the main button, before the menu
   button on tablets); on phones it lives in the menu, beside the word "Tema". The right end is a
   whole-pixel edge, and the 1 px top margin makes the vertical centring land on a whole pixel too
   (an even row height minus 34), so the 17 px icons on their 35 x 25 segments draw their straight
   strokes on pixel centres and stay sharp on 1x screens. */
.header-actions .theme-switch { display: none; margin-left: 8px; }
@media (min-width: 768px) { .header-actions .theme-switch { display: inline-grid; } .mobile-theme { display: none; } }
.mobile-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: 4px 0; padding: 4px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mobile-theme__label { font-weight: 500; color: var(--text); }
.mobile-nav a.btn { justify-content: center; }

/* The menu (.mobile-nav) and the dropdown (.dd-panel) are solid here; glass.css gives them glass,
   which works because it moves the header's blur to a ::before layer (the header is no longer a
   backdrop root, so the panels blur the page itself). */
/* Dark theme: surfaces written as literal light colours above */
:root[data-theme="dark"] .dialog { background: rgba(26, 27, 30, 0.98); }
:root[data-theme="dark"] .menu-btn { color: var(--text); }
:root[data-theme="dark"] .chat-pause:hover { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .device-shade { background: rgba(0, 0, 0, 0.7); }