/* Variant: Browser — the hero inside a large browser window, focus areas as tabs. Light. */
:root {
  --bg: #f7f2fb; --surface: #ffffff; --muted: #efe7f6; --ink: #1e1530; --ink-2: #5f5672; --line: #e6dcef;
  --accent: #a020c8; --accent-ink: #ffffff; --accent-soft: #f6e2fd; --green-soft: #e4e7ff; --amber-soft: #ffeedd;
  --night: #1e1530; --night-2: #2d2245;
  --ui-accent: #a020c8; --ui-img: #f6e8fd;
  color-scheme: light;
}
.br-hero { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem); }
.br { overflow: hidden; border-radius: 18px; background: #ffffff; box-shadow: 0 50px 100px -50px rgba(60, 20, 90, 0.45), 0 0 0 1px rgba(30, 21, 48, 0.08); }
.br-chrome { display: flex; align-items: flex-end; gap: 4px; padding: 10px 12px 0; background: #ece4f3; overflow: hidden; }
.br-dots { display: flex; gap: 6px; align-self: center; margin-right: 12px; }
.br-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .br-dots i:nth-child(2) { background: #febc2e; } .br-dots i:nth-child(3) { background: #28c840; }
.br-tab { padding: 0.55rem 1.1rem; border-radius: 10px 10px 0 0; font-size: 0.8125rem; color: var(--ink-2); white-space: nowrap; }
.br-tab.is-on { background: #ffffff; color: var(--ink); font-weight: 600; }
.br-plus { padding: 0.4rem 0.6rem; color: var(--ink-2); }
.br-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.br-nav { color: var(--ink-2); letter-spacing: 0.3em; }
.br-url { flex: 1; padding: 0.4rem 0.9rem; border-radius: 999px; background: #f4eff8; font-size: 0.8125rem; color: var(--ink-2); }
.br-url::before { content: ""; display: inline-block; width: 0.55rem; height: 0.65rem; margin-right: 0.5rem; border-radius: 2px 2px 3px 3px; background: #9b8fb0; vertical-align: -0.05em; }
.br-page { display: grid; gap: 2rem; align-items: center; padding: clamp(24px, 5vw, 64px); background: radial-gradient(40rem 20rem at 90% 10%, #fbe8ff, transparent 70%); }
@media (min-width: 64em) { .br-page { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.br-side { display: grid; gap: 14px; }
.br-side .ui { box-shadow: 0 20px 40px -24px rgba(60, 20, 90, 0.4); border: 1px solid var(--line); }
.br-side .ui:last-child { margin-left: 18%; margin-top: -18%; }
.tile--dark .focus strong { color: #e6a8ff; }
.product__visual--water { background: #e4e7ff; } .product__visual--jobs { background: #f6e2fd; } .product__visual--food { background: #ffeedd; }