/* Bookedly brand for the Visibility Audit app. Tokens, type and controls copied from bookedly.co (site/src/base.css,
   2026-10) so the landing page, the snapshot page and the team page read as the same company as the website. */
@import url("fonts/fonts.css");
:root {
  --bg: #F3F6F4; --surface: #FFFFFF; --ink: #0B1F17; --muted: #4F6159; --faint: #B9C6BF; --line: #D8E1DC;
  --accent: #0E5A39; --accent-2: #1B7A4B; --accent-ink: #FFFFFF; --hi: #C4EED6; --hi-ink: #0B3D27;
  --band: #0B2A1D; --band-2: #103626; --band-ink: #E9F3EE; --band-muted: #9DB8AA;
  --bad: #C8372D; --warn: #A45F00; --ok: #1B7A4B;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --radius: 14px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--bg); }
a { color: inherit; }
p, h1, h2, h3, ul, ol, figure, blockquote { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
@media (max-width: 520px) { .wrap { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); } }
.d { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; }
.d em { font-style: normal; color: var(--accent); }
.kicker { font: 600 0.82rem/1.2 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.kline { display: inline-flex; align-items: center; gap: 12px; }
.kline::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* logo: calendar-check mark + Inter Black wordmark, as on bookedly.co */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo span { font: 900 1.4rem/1 'Bookedly Logo', var(--display); letter-spacing: -0.025em; }
.logo .mk-bg { fill: var(--accent); } .logo .mk-fg { stroke: var(--accent-ink); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--accent); color: var(--accent-ink); font: 600 1rem/1 var(--body); padding: 16px 22px; border-radius: var(--radius); text-decoration: none; border: 0; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-2px); background: var(--accent-2); }
.btn:disabled { opacity: .65; cursor: progress; transform: none; }
.btn svg { width: 16px; height: 16px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }
.btn.sm { padding: 10px 14px; font-size: .9rem; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

/* form fields */
.f { display: grid; gap: 6px; min-width: 0; }
.f > span { font-size: .88rem; font-weight: 600; }
.f > span small { font-weight: 400; color: var(--muted); }
.f input, .f select { width: 100%; font: 500 1rem/1.3 var(--body); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; transition: border-color .15s; }
.f input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.f input[aria-invalid="true"] { border-color: var(--bad); }
.err { color: var(--bad); font-size: .85rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* dark green band (same as bookedly.co .theme-green) */
.theme-green { --bg: #0B2A1D; --surface: #113524; --ink: #E9F3EE; --muted: #A9C4B6; --faint: #3B6550; --line: #24503B;
  --accent: #5BD39A; --accent-2: #7FE0B1; --accent-ink: #052014; --hi: #1C4A33; --hi-ink: #C4EED6; --bad: #FF8A7A; --warn: #F5B041; --ok: #5BD39A;
  background: var(--bg); color: var(--ink); }

/* score ring */
.ring { position: relative; width: var(--d, 160px); height: var(--d, 160px); flex: none; }
.ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.ring .tr { fill: none; stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: 9; }
.ring .vl { fill: none; stroke-width: 9; stroke: var(--bad); }
.ring.risk .vl { stroke: var(--warn); } .ring.strong .vl { stroke: var(--ok); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 calc(var(--d, 160px) * .3)/1 var(--display); letter-spacing: -.05em; color: var(--bad); }
.ring.risk b { color: var(--warn); } .ring.strong b { color: var(--ok); }
.ring small { position: absolute; left: 0; right: 0; bottom: 24%; text-align: center; font: 500 calc(var(--d, 160px) * .07)/1 var(--mono); color: var(--muted); }