/* Sihebs Onboard: the sihebs.co.tz look (deep navy, sky-to-violet gradient, glass panels, gold accents). */
:root {
  --bg-deep: #060b14; --bg-dark: #0a1020; --bg-card: rgba(15, 25, 41, 0.72); --bg-card2: #111e32; --bg-input: rgba(6, 11, 20, 0.7);
  --line: rgba(255, 255, 255, 0.08); --line-hi: rgba(14, 165, 233, 0.45);
  --blue: #0ea5e9; --blue-mid: #3b82f6; --purple: #8b5cf6; --gold: #f59e0b; --gold-light: #fbbf24; --teal: #14b8a6; --green: #10b981; --red: #f87171;
  --ink: #f0f6ff; --ink-2: #94a3b8; --ink-3: #64748b;
  --grad: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #8b5cf6 100%);
  --grad-wa: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
  --glow: 0 0 0 1px rgba(14, 165, 233, 0.25), 0 10px 40px rgba(14, 165, 233, 0.18);
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px;
  --head: "Space Grotesk", "Inter", system-ui, sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-deep); color: var(--ink);
  font: 15px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--blue); }
::selection { background: rgba(14, 165, 233, 0.35); }

/* ---------- living background: glows, grid, particle network (fx.js) */
.fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 70% 0%, rgba(59, 130, 246, 0.20), transparent 60%),
              radial-gradient(ellipse 60% 50% at 0% 90%, rgba(139, 92, 246, 0.16), transparent 60%),
              radial-gradient(ellipse 45% 40% at 100% 70%, rgba(14, 165, 233, 0.10), transparent 60%); }
.fx::after { content: ""; position: absolute; inset: -50%; opacity: 0.35;
  background-image: linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
  background-size: 56px 56px; transform: perspective(900px) rotateX(60deg) translateY(-10%); transform-origin: 50% 0;
  mask-image: linear-gradient(to bottom, transparent, #000 40%, transparent 85%); animation: drift 30s linear infinite; }
.fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes drift { to { background-position: 0 56px, 56px 0; } }
@media (prefers-reduced-motion: reduce) { .fx::after { animation: none; } }

/* ---------- layout */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
main.wrap { flex: 1; padding-top: 28px; padding-bottom: 48px; }
.top { position: sticky; top: 0; z-index: 50; background: rgba(6, 11, 20, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 600 18px var(--head); letter-spacing: -0.01em; }
.brand img { border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 0 24px rgba(14, 165, 233, 0.25); }
.brand small { display: block; font: 500 11px var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-top: 2px; }
.brand b { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }
.pill { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.who { display: flex; gap: 14px; align-items: center; color: var(--ink-2); font-size: 14px; }
.link { background: none; border: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
@media (max-width: 640px) { .top .pill { display: none; } }

h1 { margin: 0 0 8px; font: 700 clamp(26px, 4vw, 34px)/1.15 var(--head); letter-spacing: -0.02em; }
h2 { margin: 0 0 6px; font: 600 19px/1.3 var(--head); letter-spacing: -0.01em; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.muted { color: var(--ink-2); margin: 0 0 16px; }

/* ---------- glass cards */
.card { position: relative; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px;
  margin-bottom: 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); transition: border-color var(--ease), box-shadow var(--ease); }
.card:hover { border-color: rgba(14, 165, 233, 0.22); }
.card::before { content: ""; position: absolute; inset: 0 22px auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.6), rgba(139, 92, 246, 0.6), transparent); opacity: 0.7; }

/* ---------- sign-in hero */
.auth { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; min-height: calc(100vh - 220px); }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; gap: 24px; } }
.hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; margin-bottom: 16px; }
.hero p.lead { color: var(--ink-2); font-size: 17px; max-width: 540px; margin: 0 0 24px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 600px; }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; }
.step i { display: block; font: normal 700 12px var(--head); color: var(--blue); letter-spacing: 0.08em; margin-bottom: 4px; }
.step b { display: block; font: 600 14px var(--head); } .step small { color: var(--ink-3); font-size: 12px; }
.auth .narrow { max-width: 440px; width: 100%; margin: 0 auto; }

/* ---------- forms */
label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); margin: 0 0 14px; }
label.inline { display: flex; gap: 10px; align-items: center; margin: 0; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 11px;
  font: 15px var(--body); color: var(--ink); background: var(--bg-input); transition: border-color var(--ease), box-shadow var(--ease); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
select option { background: var(--bg-card2); color: var(--ink); }
input[type=checkbox] { accent-color: var(--blue); }
input[type=file] { padding: 9px; } input[type=file]::file-selector-button { margin-right: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--ink); border-radius: 8px; padding: 6px 12px; font: 600 13px var(--body); cursor: pointer; }
label.inline select { width: auto; margin: 0; min-width: 220px; }
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18); }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06); color: var(--ink); font: 600 14px/1.2 var(--body); cursor: pointer; transition: all var(--ease); white-space: nowrap; }
.btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
.btn.primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 6px 22px rgba(14, 165, 233, 0.3); }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.45); }
.btn.wa { background: var(--grad-wa); border-color: transparent; color: #fff; padding: 13px 22px; font-size: 15px; box-shadow: 0 6px 24px rgba(16, 185, 129, 0.3); }
.btn.wa:hover { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(16, 185, 129, 0.45); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.mini { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; }
.actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }

/* ---------- tabs: a glowing step rail */
.tabs { display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; padding: 6px; background: rgba(15, 25, 41, 0.6); border: 1px solid var(--line);
  border-radius: 16px; backdrop-filter: blur(12px); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 0 0 auto; padding: 10px 16px; border-radius: 11px; border: 1px solid transparent; background: transparent; color: var(--ink-2);
  font: 600 14px var(--body); cursor: pointer; transition: all var(--ease); }
.tabs button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.tabs button.on { color: #fff; background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(139, 92, 246, 0.25)); border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 0 22px rgba(14, 165, 233, 0.25), inset 0 0 12px rgba(139, 92, 246, 0.15); }

/* ---------- lists, badges, tables */
.row-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.list { margin-top: 14px; }
.item { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.item .grow { min-width: 0; flex: 1; }
.item b { font-family: var(--head); font-weight: 600; }
.item small { display: block; color: var(--ink-2); overflow-wrap: anywhere; }
.badge { display: inline-block; border-radius: 999px; padding: 3px 11px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; background: rgba(148, 163, 184, 0.12);
  color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; height: fit-content; }
.badge.ok { background: rgba(16, 185, 129, 0.12); color: #34d399; border-color: rgba(16, 185, 129, 0.35); box-shadow: 0 0 14px rgba(16, 185, 129, 0.2); }
.badge.wait { background: rgba(245, 158, 11, 0.12); color: var(--gold-light); border-color: rgba(245, 158, 11, 0.35); }
.badge.bad { background: rgba(248, 113, 113, 0.12); color: var(--red); border-color: rgba(248, 113, 113, 0.35); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; border-top: 0; }
.table small { display: block; color: var(--ink-2); }
.scroll { overflow-x: auto; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice .card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.choice .card .btn { align-self: flex-start; }
@media (max-width: 760px) { .grid, .two, .choice { grid-template-columns: 1fr; } }

.label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.big { font: 700 34px/1.1 var(--head); margin: 4px 0 6px; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.chips .btn.on { background: var(--grad); color: #fff; border-color: transparent; }
.tips { color: var(--ink-2); font-size: 13px; padding-left: 18px; margin: 4px 0 12px; }
.error { color: var(--red); min-height: 1em; margin: 6px 0; }
.ok { color: #34d399; font-weight: 600; min-height: 1em; margin: 6px 0; }
.warn { display: block; color: var(--gold-light); font-weight: 600; } .warn a { color: var(--gold-light); }
.status { margin: 12px 0 0; font-weight: 600; }
.empty { color: var(--ink-2); padding: 8px 0; }
.switch { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: 14px; }
.switch button { background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- WhatsApp-style previews and chats (WhatsApp dark palette) */
.phone { background: #0b141a; border: 1px solid var(--line); border-radius: 18px; padding: 14px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 14px 14px; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5); }
.bubble { background: #202c33; color: #e9edef; border-radius: 10px 10px 10px 3px; padding: 10px 12px; max-width: 340px; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 40px; }
.bubble b { display: block; margin-bottom: 4px; } .bubble small { display: block; color: #8696a0; margin-top: 6px; }
.chat { display: flex; flex-direction: column; gap: 6px; min-height: 140px; max-height: 440px; overflow-y: auto; padding: 4px; }
.msg { max-width: 82%; padding: 7px 11px; border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; color: #e9edef; animation: pop 0.25s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(0.98); } }
.msg.customer { align-self: flex-start; background: #202c33; border-top-left-radius: 3px; }
.msg.bot { align-self: flex-end; background: #005c4b; border-top-right-radius: 3px; }
.msg.owner { align-self: flex-end; background: #1d3f73; border-top-right-radius: 3px; }
.msg small { display: block; color: rgba(233, 237, 239, 0.6); font-size: 11px; margin-top: 3px; }
.msg.flag { box-shadow: 0 0 0 1.5px var(--gold); }

/* ---------- inbox */
.inbox { display: grid; grid-template-columns: 280px 1fr; gap: 16px; margin-top: 14px; }
@media (max-width: 760px) { .inbox { grid-template-columns: 1fr; } }
.ib-list { border: 1px solid var(--line); border-radius: 14px; max-height: 540px; overflow-y: auto; background: rgba(6, 11, 20, 0.5); }
.ib-list button { display: block; width: 100%; text-align: left; background: transparent; color: var(--ink); border: 0; border-top: 1px solid var(--line); padding: 11px 12px; cursor: pointer; font: inherit; transition: background var(--ease); }
.ib-list button:first-child { border-top: 0; }
.ib-list button:hover { background: rgba(255, 255, 255, 0.04); }
.ib-list button.on { background: linear-gradient(90deg, rgba(14, 165, 233, 0.16), transparent); box-shadow: inset 2px 0 0 var(--blue); }
.ib-list b { display: block; font-size: 14px; } .ib-list small { color: var(--ink-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); margin-right: 7px; vertical-align: middle; }
.ib-thread { min-width: 0; }
.ib-head { font: 600 15px var(--head); margin-bottom: 8px; }
.ib-thread .chat { background: #0b141a; border: 1px solid var(--line); border-radius: 14px; padding: 12px; max-height: 440px; }

.bottom { color: var(--ink-3); font-size: 13px; padding: 18px 0 26px; border-top: 1px solid var(--line); }
.bottom a { color: var(--ink-2); }
[hidden] { display: none !important; }
@media (max-width: 900px) { .auth { min-height: 0; padding-top: 8px; } .hero h1 { font-size: clamp(28px, 8vw, 40px); } }
.auth > *, .grid > *, .two > *, .choice > *, .inbox > * { min-width: 0; }

/* Connect: Sihebs is the main path, paying Meta directly is a small alternative */
.card.feature { border-color: rgba(14, 165, 233, 0.35); box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.12), 0 18px 60px rgba(14, 165, 233, 0.16); }
.card.feature h2 { font-size: 24px; margin-top: 12px; }
.pill.rec { color: #7dd3fc; border-color: rgba(14, 165, 233, 0.4); background: rgba(14, 165, 233, 0.1); }
.perks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.perks li { position: relative; padding: 9px 12px 9px 32px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, 0.03); font-size: 13.5px; }
.perks li::before { content: "✓"; position: absolute; left: 12px; top: 8px; color: #34d399; font-weight: 700; }
@media (max-width: 640px) { .perks { grid-template-columns: 1fr; } }
#hosted-form, #hosted-verify { max-width: 620px; }
details.card.alt { padding: 14px 22px; }
details.card.alt summary { cursor: pointer; color: var(--ink-2); font-size: 14px; list-style: none; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
details.card.alt summary::-webkit-details-marker { display: none; }
details.card.alt summary span { color: var(--blue); font-weight: 600; }
details.card.alt[open] summary { margin-bottom: 12px; }

/* minimal sign-in */
.btn.block { width: 100%; padding: 15px 20px; font-size: 16px; }
.hint { color: var(--ink-3); font-size: 13px; margin: 10px 0 0; text-align: center; }
#hosted-form .hint { text-align: left; margin: -6px 0 10px; }
.wa-wait { text-align: center; margin-top: 16px; padding: 16px; border: 1px dashed rgba(16, 185, 129, 0.45); border-radius: 14px; background: rgba(16, 185, 129, 0.06); }
.wa-wait p { margin: 0 0 6px; }
.wa-wait .code { font: 700 26px var(--head); letter-spacing: 0.12em; color: #34d399; }
.wa-wait small { color: var(--ink-3); }
.pulse { color: var(--ink-2); animation: blink 1.4s ease-in-out infinite; margin-top: 8px !important; }
details.email-way { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
details.email-way summary, details.mini-opt summary { cursor: pointer; color: var(--ink-2); font-size: 14px; list-style: none; text-align: center; }
details.mini-opt summary { text-align: left; font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
details.email-way summary::-webkit-details-marker, details.mini-opt summary::-webkit-details-marker { display: none; }
details.email-way[open] summary { margin-bottom: 14px; }
.narrow-card { max-width: 560px; }
.step { padding: 10px 12px; } .step b { font-size: 15px; }

.link.small { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

/* ---------- calm, human look (2026-10-19): no particles, glow, glass or gradient text */
:root { --head: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --accent: #38bdf8; --wa: #1fa855;
  --grad: var(--accent); --grad-wa: var(--wa); --glow: none; --bg-card: #101a2b; }
body { background: #0b1220; }
.fx { display: none; }
.top { background: #0b1220; backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand img { box-shadow: none; }
.grad, .brand b { background: none; -webkit-text-fill-color: currentColor; color: var(--accent); }
.card { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.card::before { display: none; }
.card:hover { border-color: var(--line); }
.btn.primary { background: var(--accent); color: #062033; box-shadow: none; }
.btn.wa { background: var(--wa); box-shadow: none; }
.btn.primary:hover, .btn.wa:hover { transform: none; box-shadow: none; filter: brightness(1.06); }
.chips .btn.on { background: var(--accent); color: #062033; }
.hero h1 { font-weight: 700; letter-spacing: -0.025em; }
.step { background: transparent; }
.step i { color: var(--ink-3); }

/* example chat in the hero */
.demo { max-width: 420px; margin: 0 0 24px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #0e1726; }
.demo p { margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; max-width: 85%; width: fit-content; }
.demo .in { background: #1b2638; }
.demo .out { background: #134e3a; margin-left: auto; }
.demo small { display: block; color: var(--ink-3); font-size: 12px; text-align: center; }

/* pricing */
.pricing { grid-column: 1 / -1; padding: 8px 0 12px; }
.pricing h2 { font-size: 24px; margin-bottom: 14px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.plan { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--bg-card); }
.plan.hot { border-color: var(--accent); }
.plan i { position: absolute; top: -10px; right: 14px; font: normal 600 11px var(--body); background: var(--accent); color: #062033; padding: 2px 8px; border-radius: 999px; }
.plan b { font-size: 16px; }
.plan .price { margin: 8px 0 0; color: var(--ink-2); } .plan .price span { font-size: 24px; font-weight: 700; color: var(--ink); }
.plan .per { margin: 0 0 8px; color: var(--accent); font-size: 13px; font-weight: 600; }
.plan p:last-child { margin: 0; color: var(--ink-2); font-size: 14px; }
.pricing .fine { color: var(--ink-2); margin: 14px 0 0; font-size: 14px; }

/* ---------- light theme (2026-10-19): white cards on a soft grey page, dark text, one blue accent */
:root { --bg-deep: #f5f7fa; --bg-dark: #eef2f6; --bg-card: #ffffff; --bg-card2: #f6f8fb; --bg-input: #ffffff;
  --line: #e2e8f0; --line-hi: #93c5fd; --ink: #0f172a; --ink-2: #475569; --ink-3: #64748b;
  --accent: #0b6bcb; --blue: #0b6bcb; --wa: #16a34a; --green: #16a34a; --red: #dc2626; --gold: #b45309; --gold-light: #b45309; }
html { color-scheme: light; }
body { background: var(--bg-deep); color: var(--ink); }
a { color: var(--accent); }
.top { background: #ffffff; }
.card, .plan, .step { background: var(--bg-card); border-color: var(--line); }
.card { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.step { background: #ffffff; }
.btn { background: #ffffff; color: var(--ink); border-color: #cbd5e1; }
.btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.btn.primary, .chips .btn.on { background: var(--accent); color: #ffffff; border-color: transparent; }
.btn.wa { background: var(--wa); color: #ffffff; border-color: transparent; }
.plan i { color: #ffffff; }
input, select, textarea { border-color: #cbd5e1; color: var(--ink); background: #ffffff; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11, 107, 203, 0.15); outline: none; }
.tabs { background: #ffffff; backdrop-filter: none; }
.tabs button:hover { background: #f1f5f9; }
.tabs button.on { color: var(--accent); background: #e8f1fb; border-color: #bfdbfe; box-shadow: none; }
.badge { color: var(--ink-2); background: #f1f5f9; border-color: var(--line); box-shadow: none; }
.badge.ok { background: #dcfce7; color: #166534; border-color: #bbf7d0; box-shadow: none; }
.badge.wait { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.badge.bad { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.ok { color: #15803d; }
.ib-list { background: #ffffff; }
.ib-list button:hover { background: #f8fafc; }
.ib-list button.on { background: #e8f1fb; }
.dot { box-shadow: none; }
.demo { background: #ffffff; }
.demo .in { background: #f1f5f9; color: var(--ink); }
.demo .out { background: #dcf8c6; color: var(--ink); }
/* WhatsApp previews keep WhatsApp's light chat look */
.phone { background: #efeae2; background-image: none; box-shadow: none; }
.bubble, .msg.customer { background: #ffffff; color: #111b21; }
.bubble small, .msg small { color: #667781; }
.msg { color: #111b21; }
.msg.bot { background: #d9fdd3; } .msg.owner { background: #dbeafe; }
.plan[role="button"] { cursor: pointer; transition: border-color var(--ease), transform var(--ease); }
.plan[role="button"]:hover, .plan[role="button"]:focus-visible { border-color: var(--accent); transform: translateY(-2px); outline: none; }
/* web sign-up form */
.wz-step { color: var(--ink-3); font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.wz h1 { font-size: 26px; margin-bottom: 14px; }
.hint.left { text-align: left; margin: -8px 0 12px; }
textarea { resize: vertical; font: 15px/1.5 var(--body); }
.wz-has { border: 0; padding: 0; margin: 4px 0 12px; }
.wz-has legend { font-weight: 600; margin-bottom: 6px; }
.wz-has .opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 10px; margin-bottom: 6px; font-weight: 500; cursor: pointer; }
.wz-has .opt input { width: auto; margin: 0; }
.wz-has .opt:has(input:checked) { border-color: var(--accent); background: rgba(11, 107, 203, .06); }
ol.hint.left { padding-left: 20px; line-height: 1.6; }
#wz-coex { margin-top: 4px; }
/* landing: conversion */
.eyebrow { display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: #e8f7ee; color: #166534; font-size: 13px; font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.btn.ghost { background: #ffffff; color: var(--ink); border: 1px solid #cbd5e1; padding: 13px 22px; font-size: 15px; text-decoration: none; }
.btn.ghost:hover { border-color: var(--wa); color: #166534; }
.ticks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; max-width: 560px; }
.ticks li { position: relative; padding-left: 24px; color: var(--ink-2); font-size: 15px; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--wa); font-weight: 700; }
.ticks.small { grid-template-columns: 1fr; margin: 0 0 16px; }
.ticks.small li { font-size: 14px; }
.from { margin: -6px 0 12px; color: var(--ink-2); font-size: 15px; } .from b { color: var(--ink); font-size: 20px; }
@media (max-width: 560px) { .ticks { grid-template-columns: 1fr; } .cta-row .btn { flex: 1 1 100%; } }
.faq, .closer { grid-column: 1 / -1; }
.faq { padding: 8px 0 4px; max-width: 760px; }
.faq h2 { font-size: 24px; margin-bottom: 12px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: #ffffff; padding: 12px 16px; margin-bottom: 8px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.closer { text-align: center; padding: 36px 16px; margin: 12px 0 8px; border-radius: 16px; background: #0f172a; color: #ffffff; }
.closer h2 { color: #ffffff; font-size: clamp(22px, 4vw, 30px); margin-bottom: 6px; }
.closer p { color: #cbd5e1; margin: 0 0 18px; }
.sticky-cta { display: none; }
@media (max-width: 900px) {
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); }
  .auth { padding-bottom: 72px; }
  body.signing-up .sticky-cta { display: none; }
}
.auth { align-content: start; }
/* problem-first landing */
.reassure { color: var(--ink-2); font-size: 14px; margin: 0 0 22px; }
.hero .from { margin: 0 0 16px; font-size: 16px; } .hero .from b { font-size: 18px; }
.muted { color: var(--ink-2); } .center { text-align: center; }
.card-h { font-size: 24px; line-height: 1.2; margin-bottom: 8px; }
.convo { grid-column: 1 / -1; padding: 8px 0 4px; }
.convo h2 { font-size: 24px; margin-bottom: 14px; }
.phone { max-width: 460px; margin: 0 auto 12px; padding: 0 0 14px; border: 1px solid var(--line); border-radius: 18px; background: #efeae2; overflow: hidden; }
.phone-top { display: flex; flex-direction: column; padding: 10px 16px; background: #075e54; color: #fff; margin-bottom: 10px; }
.phone-top small { color: #d1e7dd; font-size: 12px; }
.phone p { margin: 0 12px 8px; padding: 8px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; max-width: 80%; width: fit-content; color: #111b21; }
.phone .in { background: #ffffff; }
.phone .out { background: #d9fdd3; margin-left: auto; }
.phone .note { max-width: none; margin: 12px 12px 0; background: #fff7d6; border: 1px dashed #e0c25a; font-size: 13px; }
/* full logo + language switch */
.brand img { width: auto; height: 64px; border-radius: 0; background: transparent; box-shadow: none; }
.brand .brand-sub { padding-left: 14px; border-left: 1px solid var(--line); font: 600 12px var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.lang { display: inline-flex; margin-left: auto; border: 1px solid #cbd5e1; border-radius: 999px; overflow: hidden; }
.lang button { border: 0; background: #ffffff; color: var(--ink-2); font: 600 13px var(--body); padding: 6px 12px; cursor: pointer; }
.lang button.on { background: var(--ink); color: #ffffff; }
.top .who { margin-left: 16px; }
.proof { max-width: 560px; margin: 0 0 22px; padding: 12px 14px; border-left: 3px solid var(--wa); background: #ffffff; border-radius: 0 10px 10px 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.price em { font-style: normal; }
@media (max-width: 560px) { .brand img { height: 48px; } .brand .brand-sub { display: none; } }

/* ===== v3: classy, light, quietly futuristic (glass, soft glows, a fading grid) ===== */
:root { --page: #f5f7fb; --navy: #0b1220; --edge: linear-gradient(135deg, #93c5fd, #a7f3d0 50%, #c4b5fd); --lift: 0 30px 80px -24px rgba(15, 23, 42, 0.28); }
html, body { background: var(--page); }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(55% 45% at 88% -8%, rgba(59, 130, 246, 0.20), transparent 60%),
              radial-gradient(45% 40% at -8% 28%, rgba(16, 185, 129, 0.16), transparent 62%),
              radial-gradient(40% 40% at 55% 115%, rgba(139, 92, 246, 0.12), transparent 60%); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 52px 52px; -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 25%, transparent 72%); }
.top { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid rgba(15, 23, 42, 0.06); }

.hero h1 { font-family: var(--head); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02;
  background: linear-gradient(180deg, var(--navy) 0%, #13306e 60%, #1d4ed8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(22, 163, 74, 0.25); color: #15803d; backdrop-filter: blur(8px); box-shadow: 0 6px 20px -10px rgba(22, 163, 74, 0.5); }
.eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #22c55e; animation: ping 2.2s infinite; vertical-align: 1px; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } }

.btn { border-radius: 14px; transition: transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease); }
.btn.wa { background: linear-gradient(135deg, #16a34a, #0d9488); box-shadow: 0 12px 30px -10px rgba(22, 163, 74, 0.55); }
.btn.wa:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(22, 163, 74, 0.6); filter: none; }
.go-signup::after { content: "→"; margin-left: 8px; transition: transform var(--ease); }
.go-signup:hover::after { transform: translateX(4px); }
.btn.ghost { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); border-color: rgba(15, 23, 42, 0.12); }
.btn.ghost:hover { border-color: #16a34a; transform: translateY(-2px); }
.btn.primary { background: linear-gradient(135deg, #1d4ed8, #0b6bcb); border-color: transparent; box-shadow: 0 12px 28px -12px rgba(29, 78, 216, 0.55); }

/* glass panels with a thin gradient edge */
#login.card, .phone, .plan.hot, .proof { border: 1px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)) padding-box, var(--edge) border-box; }
#login.card { border-radius: 26px; box-shadow: var(--lift); backdrop-filter: blur(12px); }
.card-h { font-family: var(--head); letter-spacing: -0.02em; }
.proof { border-radius: 16px; padding: 14px 16px; box-shadow: 0 14px 40px -24px rgba(15, 23, 42, 0.35); }
.step { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(15, 23, 42, 0.07); backdrop-filter: blur(8px); border-radius: 16px; transition: transform var(--ease), box-shadow var(--ease); }
.step:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(15, 23, 42, 0.35); }
.step i { font-family: var(--head); font-size: 13px; background: linear-gradient(135deg, #2563eb, #10b981); -webkit-background-clip: text; background-clip: text; color: transparent; }

.convo h2, .pricing h2, .faq h2 { font-family: var(--head); letter-spacing: -0.025em; font-size: clamp(24px, 3vw, 32px); }
.phone { border-radius: 28px; box-shadow: var(--lift); animation: float 7s ease-in-out infinite; }
.phone-top { background: linear-gradient(135deg, #075e54, #0f766e); }
.phone p.in, .phone p.out, .phone p.note { position: relative; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.plan { border-radius: 20px; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(15, 23, 42, 0.08); backdrop-filter: blur(8px); }
.plan[role="button"]:hover, .plan[role="button"]:focus-visible { transform: translateY(-4px); box-shadow: var(--lift); border-color: #93c5fd; }
.plan.hot { box-shadow: 0 24px 60px -30px rgba(37, 99, 235, 0.5); }
.plan i { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.plan .price span { font-family: var(--head); letter-spacing: -0.02em; }
.faq details { background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(15, 23, 42, 0.07); border-radius: 14px; backdrop-filter: blur(8px); transition: box-shadow var(--ease); }
.faq details[open] { box-shadow: 0 16px 40px -26px rgba(15, 23, 42, 0.4); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 500 20px var(--head); color: #2563eb; transition: transform var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.closer { position: relative; overflow: hidden; border-radius: 28px; background: var(--navy); }
.closer::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 70% at 15% 0%, rgba(16, 185, 129, 0.35), transparent 70%), radial-gradient(45% 80% at 90% 100%, rgba(59, 130, 246, 0.35), transparent 70%),
              linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px; }
.closer > * { position: relative; }
.closer h2 { font-family: var(--head); letter-spacing: -0.025em; }
.sticky-cta { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lang { background: rgba(255, 255, 255, 0.7); }

/* scroll reveal (only when JS runs) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ===== sign-up window ===== */
body.wz-open { overflow: hidden; }
body.wz-open #login { position: fixed; inset: 0; z-index: 200; max-width: none; width: auto; margin: 0; padding: 24px; border: 0; border-radius: 0;
  background: rgba(11, 18, 32, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: none;
  display: flex; align-items: center; justify-content: center; overflow-y: auto; }
body.wz-open #login [data-auth="wizard"] { width: min(520px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 22px 28px 28px; border-radius: 26px;
  border: 1px solid transparent; background: linear-gradient(#ffffff, #ffffff) padding-box, var(--edge) border-box; box-shadow: 0 40px 120px -30px rgba(2, 6, 23, 0.55);
  animation: pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.wz-head { display: flex; align-items: center; justify-content: space-between; }
.wz-close { display: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, 0.1); background: #f8fafc; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.wz-close:hover { background: #eef2f7; }
body.wz-open .wz-close { display: inline-flex; align-items: center; justify-content: center; }
.wz-progress { height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; margin: 10px 0 16px; }
.wz-progress i { display: block; height: 100%; width: 25%; border-radius: inherit; background: linear-gradient(90deg, #16a34a, #2563eb); transition: width 0.45s ease; }
.wz-title { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: #f0fdf4; color: #166534; font-size: 14px; font-weight: 600; }
.wz h1 { font-family: var(--head); letter-spacing: -0.02em; }
.wz input, .wz textarea { border-radius: 12px; transition: border-color var(--ease), box-shadow var(--ease); }
.wz input:focus, .wz textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); }
@media (max-width: 560px) {
  body.wz-open #login { padding: 0; align-items: stretch; }
  body.wz-open #login [data-auth="wizard"] { width: 100%; max-height: none; min-height: 100%; border-radius: 0; padding: 16px 18px 28px; animation: none; }
}
@media (prefers-reduced-motion: reduce) { .phone, .eyebrow::before { animation: none; } .js .reveal { opacity: 1; transform: none; transition: none; } }

/* photo section: "Smart conversations, human support" */
.people { grid-column: 1 / -1; padding: 8px 0; }
.people figure { position: relative; margin: 0; border-radius: 28px; overflow: hidden; box-shadow: var(--lift); border: 1px solid rgba(255, 255, 255, 0.8); }
.people img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.people figcaption { position: absolute; left: 24px; bottom: 24px; max-width: 420px; padding: 18px 20px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 20px 50px -24px rgba(15, 23, 42, 0.45); }
.people h2 { font-family: var(--head); letter-spacing: -0.025em; font-size: clamp(20px, 2.4vw, 28px); margin: 0 0 6px; color: var(--navy); }
.people p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
@media (max-width: 760px) {
  .people figure { border-radius: 20px; }
  .people figcaption { position: static; max-width: none; border-radius: 0; box-shadow: none; border: 0; background: #ffffff; }
}

/* hero photo on the right; the card becomes a benefits band under the hero */
.auth { grid-template-columns: 1.05fr 1fr; align-items: center; }
.hero-art { align-self: center; }
.hero-art figure { position: relative; margin: 0; border-radius: 28px; overflow: hidden; box-shadow: var(--lift); border: 1px solid rgba(255, 255, 255, 0.85); }
.hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hero-art figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 2px; max-width: 360px; padding: 12px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.84); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 40px -22px rgba(15, 23, 42, 0.45); }
.hero-art figcaption b { font: 700 16px/1.25 var(--head); letter-spacing: -0.015em; color: var(--navy); }
.hero-art figcaption span { color: var(--ink-2); font-size: 13px; line-height: 1.45; }
#login.band { grid-column: 1 / -1; max-width: none; width: 100%; margin: 4px 0 8px; padding: 26px 28px; }
#login.band [data-auth="signin"] { display: grid; grid-template-columns: 1.15fr 1fr minmax(240px, 0.8fr); gap: 28px; align-items: center; }
#login.band [data-auth="signin"] > .wa-wait, #login.band [data-auth="signin"] > .email-way { grid-column: 1 / -1; }
#login.band .card-h { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 8px; }
#login.band .band-a p { margin: 0; }
#login.band .ticks.small { margin: 0; }
#login.band .band-c .hint { margin: 8px 0 0; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .hero-art figcaption { position: static; max-width: none; border-radius: 0; border: 0; box-shadow: none; background: #ffffff; }
  #login.band [data-auth="signin"] { grid-template-columns: 1fr; gap: 16px; }
}
/* hero photo: bigger, caption kept small so the photo speaks */
.hero-art img { aspect-ratio: 5 / 4; object-position: 52% 50%; }
.hero-art figcaption { left: auto; right: 16px; bottom: 16px; max-width: 280px; padding: 10px 12px; }
.hero-art figcaption span { display: none; }
.hero-art figcaption b { font-size: 15px; }
@media (min-width: 1200px) { .auth { grid-template-columns: 1.1fr 1fr; } }
@media (max-width: 900px) { .hero-art img { aspect-ratio: 3 / 2; } .hero-art figcaption span { display: block; } .hero-art figcaption { max-width: none; } }

/* photo without the chat overlay: it starts level with the headline, and the caption sits on the plain wall */
@media (min-width: 901px) {
  .hero-art { align-self: start; margin-top: 12px; }
  .hero-art img { aspect-ratio: 1 / 1; object-position: 82% 50%; }
  .hero-art figcaption { left: 16px; right: auto; top: 16px; bottom: auto; max-width: 196px; }
  .hero-art figcaption b { font-size: 15px; }
}

/* code step countdown */
.wz-timer { margin: 4px 0 0; min-height: 20px; color: var(--ink-3); font-size: 14px; font-variant-numeric: tabular-nums; text-align: center; }
.link:disabled { opacity: 0.45; cursor: not-allowed; text-decoration: none; }
/* admin: WhatsApp clients dashboard */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 14px; }
.kpi { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg-card2); }
.kpi small { display: block; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.kpi b { display: block; font: 700 24px/1.2 var(--head); color: var(--ink); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.kpi span { display: block; color: var(--ink-3); font-size: 12px; }
#a-clients .line + .line { margin-top: 6px; }
#a-clients tr.internal td { color: var(--ink-3); }
#a-clients .badge { display: inline-block; }
/* business desk: team, inbox tools, bookings */
.row-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-tools label.inline select { min-width: 160px; }
.ib-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.ib-tools select { width: auto; margin: 0; padding: 6px 10px; font-size: 13px; }
.muted-sm { color: var(--ink-2); font-size: 13px; margin-right: 4px; }
[data-panel="inbox"] .hint, [data-panel="team"] .hint { text-align: left; }
.warn-box { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: 14px; }
.item.off b, .item.off small { color: var(--ink-3); }
.dot.soft { background: #94a3b8; box-shadow: none; }
label.check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink); font-weight: 500; }
label.check input { width: auto; margin: 0; }
h3.sub { margin: 18px 0 10px; font: 600 15px var(--head); }
#bk-list td { max-width: 360px; overflow-wrap: anywhere; }
#tm-log small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
@media (max-width: 640px) { .row-tools { width: 100%; } .row-tools label.inline { flex-wrap: wrap; } .row-tools label.inline select { min-width: 0; width: 100%; } }

/* ===== sign in: a clear button in the header and one simple sheet (2026-10-21) ===== */
.signin-btn { margin-left: 12px; padding: 9px 20px; border-radius: 999px; background: #0b1220; color: #fff; border: 0; font: 600 14px var(--body); box-shadow: 0 10px 24px -12px rgba(11, 18, 32, 0.6); }
.signin-btn:hover { background: #1d4ed8; transform: translateY(-1px); }
.signin-btn[hidden] { display: none; }
body.sheet-open { overflow: hidden; }
.sheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(8, 12, 24, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade 0.2s ease-out; }
.sheet[hidden] { display: none; }
.sheet-card { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px 26px 22px; border-radius: 26px; text-align: center;
  border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #93c5fd, #a7f3d0 50%, #c4b5fd) border-box; box-shadow: 0 40px 90px -30px rgba(15, 23, 42, 0.5); animation: rise 0.25s ease-out; }
.sheet-card h2 { font: 700 26px/1.15 var(--head); letter-spacing: -0.02em; margin: 6px 0 6px; }
.sheet-logo { height: 48px; width: auto; }
.sheet-x { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f1f5f9; color: #334155; font-size: 20px; cursor: pointer; }
.btn.big { padding: 16px 22px; font-size: 17px; border-radius: 16px; margin: 8px 0 14px; }
.si-steps { text-align: left; margin: 0 0 6px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.si-steps li { counter-increment: s; display: flex; gap: 10px; align-items: center; color: var(--ink-2); font-size: 14px; }
.si-steps li::before { content: counter(s); flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #e8f7ee; color: #15803d; font: 700 12px var(--head); }
.si-or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; margin: 14px 0 8px; }
.si-or::before, .si-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sheet .email-way { text-align: left; } .sheet .email-way summary { cursor: pointer; font-weight: 600; text-align: center; color: var(--accent); }
.sheet .wa-wait { margin: 6px 0 4px; }
@keyframes fade { from { opacity: 0; } } @keyframes rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@media (max-width: 560px) { .signin-btn { padding: 8px 14px; margin-left: 8px; } }

/* ===== portal v4: futuristic control room (signed in) ===== */
html:has(body.portal-on) { background: #060914; }
body.portal-on {
  --bg-deep: #060914; --page: #060914; --bg-card: rgba(15, 22, 42, 0.68); --bg-card2: rgba(255, 255, 255, 0.035); --bg-input: rgba(3, 7, 18, 0.72);
  --line: rgba(148, 163, 255, 0.13); --line-hi: rgba(34, 211, 238, 0.5); --ink: #eaeeff; --ink-2: #a6afd4; --ink-3: #6f79a6; --navy: #eaeeff;
  --accent: #22d3ee; --blue: #38bdf8; --green: #34d399; --wa: #22c55e; --red: #fb7185; --gold: #fbbf24; --gold-light: #fcd34d;
  --neo: linear-gradient(120deg, #22d3ee 0%, #818cf8 55%, #c084fc 100%); --glass-edge: linear-gradient(135deg, rgba(34, 211, 238, 0.55), rgba(129, 140, 248, 0.25) 45%, rgba(192, 132, 252, 0.5));
  background: #060914; color: var(--ink); color-scheme: dark;
}
body.portal-on::before { background: radial-gradient(50% 40% at 85% -5%, rgba(34, 211, 238, 0.16), transparent 62%), radial-gradient(45% 45% at -5% 35%, rgba(129, 140, 248, 0.16), transparent 62%),
  radial-gradient(40% 40% at 60% 110%, rgba(192, 132, 252, 0.13), transparent 60%); }
body.portal-on::after { background-image: linear-gradient(rgba(148, 163, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 255, 0.06) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%); }
body.portal-on a { color: var(--accent); }
body.portal-on .top { background: rgba(6, 9, 20, 0.72); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
body.portal-on .top .wrap, body.portal-on main.wrap, body.portal-on footer .wrap { max-width: 1480px; }
body.portal-on .brand img { height: 46px; background: #fff; border-radius: 12px; padding: 3px 8px; box-shadow: 0 0 0 1px var(--line), 0 0 30px -6px rgba(34, 211, 238, 0.45); }
body.portal-on .brand .brand-sub { color: var(--ink-2); border-left-color: var(--line); }
body.portal-on .lang { border-color: var(--line); } body.portal-on .lang button { background: transparent; color: var(--ink-2); } body.portal-on .lang button.on { background: var(--neo); color: #061019; }
body.portal-on .who { color: var(--ink-2); } body.portal-on .link { color: var(--ink); }
body.portal-on .bottom { color: var(--ink-3); border-top-color: var(--line); background: transparent; }
body.portal-on main.wrap { padding-top: 22px; }

/* layout: sidebar + stage */
body.portal-on #app { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 22px; align-items: start; }
body.portal-on #app[hidden] { display: none; }
.side { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 14px 12px; border-radius: 22px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 22, 42, 0.85), rgba(10, 15, 30, 0.75)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); scrollbar-width: none; }
.side::-webkit-scrollbar { display: none; }
.biz { padding: 8px 8px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.biz-l { font: 600 10.5px var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
body.portal-on .biz select { width: 100%; margin: 0; padding: 10px 12px; border-radius: 12px; font: 600 14px var(--body); }
.g-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font: 600 12px var(--body); color: var(--ink-2); }
.g-status:empty { display: none; }
.g-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.g-status.live { color: #6ee7b7; } .g-status.live::before { background: #34d399; animation: beacon 2s infinite; }
.g-status.test { color: #fcd34d; } .g-status.test::before { background: #fbbf24; animation: beacon 2s infinite; }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } }
body.portal-on .tabs { flex-direction: column; gap: 2px; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; }
body.portal-on .tabs button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: transparent;
  color: var(--ink-2); font: 500 14.5px var(--body); text-align: left; position: relative; box-shadow: none; transition: background var(--ease), color var(--ease); }
body.portal-on .tabs button[hidden] { display: none; }
body.portal-on .tabs button svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
body.portal-on .tabs button span { flex: 1; }
body.portal-on .tabs button i { font: 700 11px var(--body); font-style: normal; min-width: 20px; padding: 2px 7px; border-radius: 999px; background: rgba(251, 191, 36, 0.16); color: #fcd34d; text-align: center; }
body.portal-on .tabs button i:empty { display: none; }
body.portal-on .tabs button:hover { color: var(--ink); background: rgba(148, 163, 255, 0.07); }
body.portal-on .tabs button.on { color: #fff; background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(129, 140, 248, 0.06)); border-color: rgba(34, 211, 238, 0.22); }
body.portal-on .tabs button.on::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--neo); box-shadow: 0 0 14px #22d3ee; }
body.portal-on .tabs button.on svg { stroke: #67e8f9; opacity: 1; }
.nav-h { margin: 14px 12px 4px; font: 600 10.5px var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.stage { min-width: 0; }
body.portal-on .per-acc { display: none !important; }
body.portal-on.no-biz .biz { display: none; }

/* surfaces */
body.portal-on .card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.portal-on .card:hover { border-color: rgba(148, 163, 255, 0.22); }
body.portal-on .card.glow { border: 1px solid transparent; background: linear-gradient(rgba(13, 19, 37, 0.92), rgba(13, 19, 37, 0.92)) padding-box, var(--glass-edge) border-box; }
body.portal-on h1, body.portal-on h2, body.portal-on h3 { color: var(--ink); }
body.portal-on h2 { font: 600 17px var(--head); letter-spacing: -0.01em; }
body.portal-on .muted, body.portal-on label { color: var(--ink-2); }
body.portal-on .hint { color: var(--ink-3); }
body.portal-on input, body.portal-on select, body.portal-on textarea { background: var(--bg-input); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; }
body.portal-on input::placeholder, body.portal-on textarea::placeholder { color: #4d5680; }
body.portal-on input:focus, body.portal-on select:focus, body.portal-on textarea:focus { border-color: rgba(34, 211, 238, 0.7); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15), 0 0 24px -6px rgba(34, 211, 238, 0.5); outline: none; }
body.portal-on select option { background: #0d1326; color: var(--ink); }
body.portal-on .btn { background: rgba(148, 163, 255, 0.06); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
body.portal-on .btn:hover { background: rgba(148, 163, 255, 0.12); border-color: rgba(148, 163, 255, 0.3); transform: translateY(-1px); }
body.portal-on .btn.primary, body.portal-on .chips .btn.on { background: var(--neo); color: #061019; border-color: transparent; font-weight: 700; box-shadow: 0 10px 30px -12px rgba(34, 211, 238, 0.7); }
body.portal-on .btn.primary:hover { filter: brightness(1.08); }
body.portal-on .btn.wa { background: linear-gradient(135deg, #22c55e, #14b8a6); color: #04130b; border-color: transparent; }
body.portal-on .btn:disabled { opacity: 0.45; transform: none; }
body.portal-on .badge { background: rgba(148, 163, 255, 0.1); color: var(--ink-2); border: 1px solid var(--line); box-shadow: none; }
body.portal-on .badge.ok { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.3); }
body.portal-on .badge.wait { background: rgba(251, 191, 36, 0.12); color: #fcd34d; border-color: rgba(251, 191, 36, 0.3); }
body.portal-on .badge.bad { background: rgba(251, 113, 133, 0.12); color: #fda4af; border-color: rgba(251, 113, 133, 0.3); }
body.portal-on .ok { color: #6ee7b7; } body.portal-on .error { color: #fda4af; } body.portal-on .warn { color: #fcd34d; }
body.portal-on .warn-box { background: rgba(251, 191, 36, 0.1); color: #fde68a; border-color: rgba(251, 191, 36, 0.3); }
body.portal-on .table th { color: var(--ink-3); } body.portal-on .table td { border-top-color: var(--line); }
body.portal-on .table tr.click { cursor: pointer; transition: background var(--ease); }
body.portal-on .table tr.click:hover td { background: rgba(34, 211, 238, 0.05); }
body.portal-on .table tr.click:focus-visible td { background: rgba(34, 211, 238, 0.09); outline: none; }
body.portal-on .item { border-top-color: var(--line); }
body.portal-on .item.click { cursor: pointer; border-radius: 12px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; transition: background var(--ease); }
body.portal-on .item.click:hover { background: rgba(148, 163, 255, 0.07); }
body.portal-on .step-ok b { color: #6ee7b7; } body.portal-on .step-todo b { color: var(--ink); }
body.portal-on .kpi { background: var(--bg-card2); border-color: var(--line); }
body.portal-on .kpi b { color: var(--ink); }

/* inbox in the dark */
body.portal-on .ib-list { background: rgba(3, 7, 18, 0.5); border-color: var(--line); }
body.portal-on .ib-list button { color: var(--ink); border-top-color: var(--line); }
body.portal-on .ib-list button:hover { background: rgba(148, 163, 255, 0.06); }
body.portal-on .ib-list button.on { background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), transparent); box-shadow: inset 2px 0 0 #22d3ee; }
body.portal-on .ib-thread .chat { background: #070d1a; border-color: var(--line); }
body.portal-on .msg, body.portal-on .msg.customer { background: #1b2433; color: #e9edef; }
body.portal-on .msg.bot { background: linear-gradient(135deg, #064e3b, #0f5f55); color: #ecfdf5; }
body.portal-on .msg.owner { background: linear-gradient(135deg, #1e3a8a, #312e81); color: #eef2ff; }
body.portal-on .msg small { color: rgba(233, 237, 239, 0.55); }
body.portal-on .dot { background: #fbbf24; box-shadow: 0 0 10px #fbbf24; }

/* home */
.hero-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 26px 28px; margin-bottom: 18px; border-radius: 26px; overflow: hidden;
  border: 1px solid transparent; background: linear-gradient(120deg, rgba(14, 22, 44, 0.95), rgba(19, 18, 48, 0.92)) padding-box, var(--glass-edge) border-box; }
.hero-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 120% at 100% 0%, rgba(129, 140, 248, 0.2), transparent 70%), radial-gradient(30% 90% at 0% 100%, rgba(34, 211, 238, 0.14), transparent 70%); }
.hero-txt h1 { margin: 2px 0 6px; font: 700 clamp(22px, 2.6vw, 32px)/1.12 var(--head); letter-spacing: -0.025em; background: linear-gradient(90deg, #fff, #c7d2fe); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-txt .muted { margin: 0; }
.kicker { margin: 0; font: 600 11.5px var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: #67e8f9; }
.hero-act { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 1; }
.orb { position: relative; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; }
.orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #22d3ee, #818cf8, #c084fc, #22d3ee); animation: spin 6s linear infinite; box-shadow: 0 0 40px rgba(34, 211, 238, 0.45); }
.orb span { position: relative; z-index: 1; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1e2a52, #090f22 70%); box-shadow: inset 0 0 18px rgba(34, 211, 238, 0.35); }
.orb span::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; background: #34d399; box-shadow: 0 0 18px #34d399; animation: breathe 2.4s ease-in-out infinite; }
.orb.test::before { background: conic-gradient(from 0deg, #fbbf24, #f472b6, #fbbf24); box-shadow: 0 0 40px rgba(251, 191, 36, 0.4); } .orb.test span::after { background: #fbbf24; box-shadow: 0 0 18px #fbbf24; }
.orb.off::before { background: conic-gradient(#334155, #475569, #334155); animation: none; box-shadow: none; } .orb.off span::after { background: #64748b; box-shadow: none; animation: none; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes breathe { 50% { transform: scale(0.75); opacity: 0.7; } }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-row.small { grid-template-columns: repeat(3, 1fr); margin: 12px 0; }
.kpi-tile { position: relative; padding: 16px 16px 14px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--line); overflow: hidden; }
.kpi-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--neo); opacity: 0.7; }
.kpi-tile.cyan::before { background: #22d3ee; box-shadow: 0 0 16px #22d3ee; } .kpi-tile.violet::before { background: #a78bfa; box-shadow: 0 0 16px #a78bfa; }
.kpi-tile.lime::before { background: #a3e635; box-shadow: 0 0 16px #a3e635; } .kpi-tile.warn::before { background: #fbbf24; box-shadow: 0 0 16px #fbbf24; } .kpi-tile.pink::before { background: #f472b6; box-shadow: 0 0 16px #f472b6; }
.kpi-tile small { display: block; color: var(--ink-2); font: 600 12px var(--body); }
.kpi-tile b { display: block; margin: 6px 0 2px; font: 700 32px/1.05 var(--head); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-tile span { display: block; color: var(--ink-3); font-size: 12.5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid2 > .card { margin-bottom: 16px; }
.spark svg { width: 100%; height: auto; display: block; }
.spark .bar { fill: rgba(34, 211, 238, 0.45); transition: fill var(--ease); } .spark .bar:hover { fill: #67e8f9; } .spark .bar.now { fill: #a78bfa; }
.spark text { fill: var(--ink-3); font: 10px var(--body); }

/* the client drawer (Customers) */
.drawer { position: fixed; inset: 0; z-index: 70; background: rgba(2, 4, 12, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade 0.2s ease-out; }
.drawer[hidden] { display: none; }
.drawer-card { position: absolute; top: 0; right: 0; bottom: 0; width: min(500px, 100%); overflow-y: auto; padding: 28px 24px; background: linear-gradient(180deg, #0e1530, #0a0f22);
  border-left: 1px solid var(--line); box-shadow: -40px 0 80px -30px rgba(0, 0, 0, 0.9); animation: slide 0.25s ease-out; }
.drawer-card h2 { font: 700 24px/1.15 var(--head); margin: 4px 0 4px; }
body.portal-on .sheet-x { background: rgba(148, 163, 255, 0.1); color: var(--ink); }
.actions.left { justify-content: flex-start; flex-wrap: wrap; }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }

/* mobile: the sidebar becomes a top bar with a sliding row of sections */
@media (max-width: 900px) {
  body.portal-on #app { grid-template-columns: 1fr; gap: 14px; }
  .side { position: static; max-height: none; padding: 10px; border-radius: 18px; }
  .biz { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding: 4px 4px 10px; }
  .biz-l { grid-column: 1 / -1; margin: 0; } .g-status { margin: 0; }
  body.portal-on .tabs { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  body.portal-on .tabs::-webkit-scrollbar { display: none; }
  body.portal-on .tabs button { width: auto; flex: 0 0 auto; padding: 9px 12px; gap: 8px; }
  body.portal-on .tabs button.on::before { left: 10px; right: 10px; top: auto; bottom: -1px; width: auto; height: 2px; }
  .nav-h { display: none; }
  .hero-card { grid-template-columns: auto 1fr; padding: 20px; } .hero-act { grid-column: 1 / -1; justify-content: flex-start; }
  .orb { width: 64px; height: 64px; } .orb span { width: 52px; height: 52px; } .orb span::after { inset: 19px; }
  .grid2 { grid-template-columns: 1fr; gap: 0; }
  .kpi-tile b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .orb::before, .orb span::after, .g-status::before { animation: none !important; } }
.sheet, .sheet * { -webkit-text-fill-color: currentColor; }
body.portal-on .lang { background: rgba(148, 163, 255, 0.06); }
body.portal-on .lang button { color: var(--ink-2) !important; -webkit-text-fill-color: currentColor; }
body.portal-on .lang button.on { color: #061019 !important; }
@media (max-width: 640px) { body.portal-on #who-name { display: none; } body.portal-on .brand img { height: 38px; } }

/* ===== phones: the landing and sign-up behave like an app ===== */
html { -webkit-tap-highlight-color: transparent; }
.btn, .appbar a, .appbar button, .plan[role="button"], .faq summary, .lang button, .opt { touch-action: manipulation; }
.wz-group { margin: 0 0 18px; padding: 14px 14px 2px; border-radius: 18px; background: #f8fafc; border: 1px solid rgba(15, 23, 42, 0.06); }
.wz-g { margin: 0 0 10px; font: 700 13px var(--head); letter-spacing: 0.02em; color: var(--ink); }
.why { display: block; margin: 2px 0 0; font-weight: 500; font-size: 12.5px; letter-spacing: 0; color: var(--ink-3); line-height: 1.4; }
.wz-group label.check { margin: 0 0 14px; }
.wz.enter { animation: wzin 0.32s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes wzin { from { opacity: 0; transform: translateX(22px); } }
.appbar, .install { display: none; }
.install[hidden] { display: none !important; }
@media (max-width: 760px) {
  body:not(.portal-on) .top { padding-top: env(safe-area-inset-top); }
  body:not(.portal-on) .top .wrap { min-height: 56px; }
  body:not(.portal-on) .brand img { height: 40px; width: auto; }
  body:not(.portal-on) #top-signin { display: none; }
  input, select, textarea { font-size: 16px; }                         /* iPhone zooms into smaller text */
  .btn:active, .appbar a:active, .appbar button:active, .plan[role="button"]:active { transform: scale(0.97); }
  .btn, .appbar, .plan, .step, summary { -webkit-user-select: none; user-select: none; }
  main.wrap { padding-top: 14px; }
  .sticky-cta { display: none !important; }
  .auth { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .hero h1 { font-size: clamp(30px, 8.6vw, 38px); }
  .hero p.lead { font-size: 16px; }
  .reassure, .proof { font-size: 13.5px; }
  /* swipe rows instead of long stacks */
  .steps { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .steps::-webkit-scrollbar, .plans::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 62%; scroll-snap-align: start; }
  .plans { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 14px 16px 8px; scrollbar-width: none; }
  .plan { flex: 0 0 78%; scroll-snap-align: center; }
  .hero-art figure { border-radius: 22px; }
  .hero-art img { aspect-ratio: 4 / 3 !important; }
  .faq details { border-radius: 16px; padding: 14px 16px; }
  .closer { border-radius: 22px; }
  footer.bottom { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.portal-on footer.bottom { padding-bottom: 16px; }
  /* bottom tab bar */
  body:not(.portal-on) .appbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
    border-top: 1px solid rgba(15, 23, 42, 0.08); }
  body.wz-open .appbar, body.sheet-open .appbar { display: none !important; }
  .appbar a, .appbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border: 0; background: none; color: #64748b;
    font: 600 11px var(--body); text-decoration: none; cursor: pointer; transition: color 0.2s, transform 0.12s; }
  .appbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .appbar a.on { color: #1d4ed8; }
  .appbar a.on svg { stroke-width: 2.2; }
  .appbar .ab-go { color: #15803d; }
  .appbar .ab-go i { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; border-radius: 18px; background: var(--grad-wa); color: #fff;
    box-shadow: 0 10px 26px -8px rgba(16, 163, 74, 0.7), 0 0 0 4px #fff; }
  .appbar .ab-go svg { stroke-width: 2.6; }
  .appbar .ab-go::after { content: none; }
  /* install offer above the tab bar */
  body:not(.portal-on) .install { display: flex; align-items: center; gap: 10px; position: fixed; left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 61;
    padding: 10px 12px; border-radius: 18px; background: #0b1220; color: #fff; box-shadow: 0 20px 50px -18px rgba(2, 6, 23, 0.7); animation: rise 0.3s ease-out; }
  .install img { border-radius: 12px; background: #fff; flex: 0 0 auto; }
  .install div { flex: 1; min-width: 0; } .install b { display: block; font-size: 14px; } .install small { display: block; color: #cbd5e1; font-size: 12.5px; line-height: 1.35; }
  .install .btn { flex: 0 0 auto; }
  .in-x { flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 17px; cursor: pointer; }
  /* sign-in: a bottom sheet you can pull down */
  .sheet { place-items: end stretch; padding: 0; }
  .sheet-card { max-width: none; max-height: 92vh; border-radius: 26px 26px 0 0; padding: 26px 20px calc(20px + env(safe-area-inset-bottom)); animation: slideup 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
    transition: transform 0.25s ease; overscroll-behavior: contain; }
  .grab { display: block; width: 42px; height: 5px; border-radius: 99px; background: #cbd5e1; margin: -14px auto 12px; }
  /* sign-up: a full-screen flow, its main button always within thumb reach */
  body.wz-open #login { padding: 0; align-items: stretch; background: #fff; }
  body.wz-open #login [data-auth="wizard"] { width: 100%; max-height: none; min-height: 100%; border: 0; border-radius: 0; box-shadow: none; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); animation: slideup 0.3s cubic-bezier(0.2, 0.8, 0.3, 1); }
  .wz-head { position: sticky; top: 0; z-index: 2; margin: 0 -16px; padding: calc(10px + env(safe-area-inset-top)) 16px 6px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .wz-progress { position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 2; margin: 0 0 14px; }
  .wz h1 { font-size: 24px; }
  .wz button[type="submit"], #wz-coex, #wz-dash { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 2; box-shadow: 0 -12px 24px 6px #fff, 0 10px 24px -10px rgba(15, 23, 42, 0.4); }
}
@keyframes slideup { from { transform: translateY(100%); } }
.standalone .eyebrow { display: none; }
@media (prefers-reduced-motion: reduce) { .wz.enter, .sheet-card, body.wz-open #login [data-auth="wizard"] { animation: none !important; } }

/* ===== sign-in with a WhatsApp code ===== */
.otp { text-align: left; margin: 14px 0 0; }
.otp-l { margin: 0 0 12px; }
.otp-l input { font-size: 17px; padding: 13px 14px; border-radius: 14px; }
.otp .btn.big { margin: 4px 0 10px; }
.otp .link.small { display: block; margin: 0 auto; font-size: 14px; color: var(--accent); text-decoration: none; font-weight: 600; }
.otp-sent { margin: 0 0 12px; color: var(--ink-2); font-size: 14.5px; text-align: center; }
input.otp-code { text-align: center; font: 700 28px/1.2 var(--head); letter-spacing: 0.45em; padding: 12px 10px 12px calc(10px + 0.45em); border-radius: 16px; }
.otp .hint { text-align: center; margin: 4px 0 0; }
.otp .hint .link:disabled { color: var(--ink-3); cursor: default; text-decoration: none; }
.otp .error:empty, .otp .ok:empty { display: none; }
.si-new { margin: 16px 0 8px; padding: 14px; border-radius: 18px; background: #f0fdf4; border: 1px solid #bbf7d0; }
.si-new p { margin: 0 0 8px; font-weight: 600; color: #166534; }
.si-new .btn { background: #ffffff; border-color: #86efac; color: #166534; font-weight: 700; }
#wz1b .hint { text-align: center; }
body.portal-on #pw-sheet .sheet-card { text-align: left; }