@font-face {
  font-family: Inter;
  src: url('/assets/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  font-family: Inter, system-ui, sans-serif;
  color: #172a44;
  background: #f2f6fb;
  color-scheme: light;
  --ink: #172a44;
  --muted: #536b89;
  --line: #d8e3f0;
  --blue: #174dbb;
  --surface: #ffffff;
  --radius: 16px;
}
* { box-sizing: border-box; }
body { min-width: 300px; margin: 0; }
body, input, select, button { font-family: Inter, system-ui, sans-serif; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid #4989e2; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.025em; }
p { line-height: 1.65; }
.container { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.topbar { background: #fff; border-bottom: 1px solid var(--line); }
.top-inner { width: min(1280px, calc(100% - 64px)); min-height: 76px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 24px; font-weight: 540; letter-spacing: -.055em; white-space: nowrap; }
.brand b { font-weight: 750; }
.brand img { object-fit: contain; }
.brand:hover { text-decoration: none; }
nav, .actions, .booking-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.nav-link, .nav-email { font-size: 14px; }
.nav-email { color: var(--muted); overflow-wrap: anywhere; }
.button {
  border: 1px solid transparent; border-radius: 10px; min-height: 43px; padding: 10px 16px; font-weight: 650; font-size: 14px;
  display: inline-flex; justify-content: center; align-items: center; gap: 10px; cursor: pointer; text-align: center;
}
.button:hover { text-decoration: none; filter: brightness(1.06); }
.primary { background: linear-gradient(120deg, #1d52c4, #08738e); color: #fff; }
.quiet { color: var(--ink); background: #fff; border-color: var(--line); }
.compact { min-height: 39px; padding: 8px 12px; font-size: 13px; }
.eyebrow { color: #1955bd; font-size: 11px; font-weight: 740; letter-spacing: .14em; line-height: 1.5; }
.public .topbar { background: #0d1a30; border-color: #273d5a; }
.public .topbar .brand, .public .topbar .nav-link { color: #f2f8ff; }
.public .topbar .quiet, .hero .quiet { color: #e4efff; background: #172e4b; border-color: #38546f; }
.hero {
  color: #f3f8ff; background-color: #101f38;
  background-image: radial-gradient(ellipse at 75% 28%, #17476b 0%, transparent 54%),
    linear-gradient(to right, #28476442 1px, transparent 1px), linear-gradient(to bottom, #28476442 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  border-bottom: 1px solid #263e5b;
}
.hero-inner { display: grid; grid-template-columns: 1.13fr .87fr; align-items: center; gap: 52px; min-height: 515px; padding-block: 76px; }
.hero .eyebrow { color: #96d7f5; }
.signal, .demo-head i { display: inline-block; width: 7px; height: 7px; background: #7de4e2; border-radius: 50%; margin-right: 7px; }
.hero h1 { margin: 19px 0 22px; font-size: clamp(38px, 4.5vw, 67px); font-weight: 780; line-height: 1.06; letter-spacing: -.066em; }
.hero h1 span { color: #9edbff; }
.hero p { max-width: 490px; color: #bfd1e8; font-size: 17px; }
.hero .actions { margin-top: 28px; }
.hero .primary, .public .topbar .primary { background: linear-gradient(112deg, #adefff, #8eb9ff); color: #0b2343; }
.demo { border: 1px solid #517390; border-radius: 20px; padding: 17px; background: #152c47; box-shadow: 0 25px 70px #050e2280; }
.demo-head { display: flex; justify-content: space-between; align-items: center; color: #b6d2ea; font-size: 10px; font-weight: 700; letter-spacing: .11em; padding: 1px 2px 14px; gap: 8px; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tile { min-height: 93px; border: 1px solid #4b698c; border-radius: 12px; background: #1c3c5f; position: relative; display: grid; place-items: center; }
.tile-0 { border-color: #8ed3ec; background: #205074; }
.tile-1 { background: #2b365d; }
.tile-2 { background: #234b62; }
.tile-3 { background: #30375d; }
.avatar { border-radius: 50%; display: grid; place-items: center; width: 47px; aspect-ratio: 1; background: #aecff0; color: #183559; font-weight: 750; }
.wave { display: flex; gap: 3px; align-items: end; height: 15px; position: absolute; right: 10px; bottom: 10px; }
.wave b { width: 3px; height: 4px; border-radius: 3px; background: #9edfff; }
.wave b:nth-child(2) { height: 9px; }
.wave b:nth-child(3) { height: 6px; }
.demo-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; gap: 10px; }
.demo-foot small { display: block; color: #b9cfe8; margin-top: 5px; }
.landing-section { padding-block: 54px 64px; }
.section-head h2, .workspace-head h1 { font-size: clamp(29px, 3.2vw, 44px); margin: 8px 0 10px; }
.section-head p, .workspace-head p, .muted, .hint { color: var(--muted); }
.tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; margin: 23px 0 32px; }
.tier, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tier { padding: 18px; }
.tier strong { display: block; font-size: 30px; line-height: 1; margin-bottom: 9px; letter-spacing: -.04em; }
.tier span { color: var(--muted); font-size: 13px; }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line); padding-top: 26px; }
.how span { color: #2457b0; font-weight: 700; font-size: 12px; }
.how h3 { margin: 8px 0 5px; font-size: 18px; }
.how p { color: var(--muted); font-size: 14px; }
.workspace, .auth-wrap { padding-block: 48px 65px; min-height: calc(100vh - 153px); }
.workspace-head { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 25px; }
.dashboard { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: 21px; align-items: start; }
.card { padding: 23px; box-shadow: 0 7px 22px #1b41680a; min-width: 0; }
.card h2 { font-size: 22px; margin-bottom: 7px; }
.card > .muted { font-size: 14px; }
.auth-wrap { width: min(450px, calc(100% - 36px)); margin: auto; }
.auth-card { padding: 29px; }
.auth-card h1 { font-size: clamp(24px, 4vw, 32px); margin: 8px 0 10px; }
.auth-card > .button { margin-top: 18px; }
.auth-switch { font-size: 14px; margin-top: 17px; }
.stack { display: grid; gap: 13px; margin-top: 18px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 650; min-width: 0; }
input, select { color: var(--ink); width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid #bfcfe2; border-radius: 9px; background: #fbfdff; font-size: 14px; min-width: 0; }
input::placeholder { color: #617894; }
input:focus, select:focus { border-color: #4684d5; }
.hint, .schedule { color: var(--muted); font-size: 13px; margin-top: 9px; }
.inline { display: inline; margin: 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 19px; }
.metric { padding: 16px 18px; }
.metric span { color: var(--muted); display: block; font-size: 13px; margin-bottom: 6px; }
.metric strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.pill { border-radius: 999px; display: inline-flex; font-size: 12px; font-weight: 650; padding: 6px 10px; align-items: center; flex-shrink: 0; line-height: 1.35; }
.green { color: #075a42; background: #def4e9; }
.blue { color: #164589; background: #e4edff; }
.amber { color: #805308; background: #fff1d6; }
.gray { color: #49586d; background: #edf1f5; }
.empty { margin-top: 17px; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; padding: 18px; font-size: 14px; }
.booking { border-top: 1px solid var(--line); padding-block: 16px 4px; margin-top: 14px; }
.booking-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.booking h3 { font-size: 17px; overflow-wrap: anywhere; }
.booking-head p { color: var(--muted); font-size: 13px; margin-top: 4px; overflow-wrap: anywhere; }
.link-box { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 9px; border: 1px solid #cedef4; background: #f1f6ff; border-radius: 10px; }
.link-box a { overflow-wrap: anywhere; font-size: 13px; flex: 1; min-width: 0; }
.booking-actions { margin-top: 10px; font-size: 13px; }
.text-button { background: none; border: 0; padding: 4px 0; cursor: pointer; font-weight: 650; }
.danger { color: #a32a39; }
.inline-fields { display: flex; align-items: end; gap: 8px; margin-top: 12px; }
.grow { flex: 1; }
.node-list { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.node-list h3 { font-size: 15px; margin-bottom: 7px; }
.node-list a { display: block; overflow-wrap: anywhere; font-size: 13px; margin: 4px 0; }
.footer { border-top: 1px solid var(--line); color: var(--muted); background: #fff; }
.footer-inner { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; padding-block: 12px; }
.footer-inner span:first-child { font-weight: 700; color: var(--ink); }
@media (max-width: 850px) {
  .hero-inner, .dashboard { grid-template-columns: 1fr; }
  .hero-inner { gap: 30px; padding-block: 48px; }
  .demo { max-width: 540px; }
  .container, .top-inner { width: calc(100% - 36px); }
  .workspace, .auth-wrap { padding-block: 32px 46px; }
}
@media (max-width: 560px) {
  .top-inner { gap: 10px; min-height: 65px; }
  .brand { font-size: 21px; gap: 6px; }
  .brand img { width: 34px; height: 34px; }
  nav { gap: 7px; justify-content: flex-end; }
  .public .nav-link, .nav-email, .nav-cta { display: none; }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .how { grid-template-columns: 1fr; gap: 17px; }
  .stats { gap: 7px; }
  .metric { padding: 11px; }
  .metric span { font-size: 11px; }
  .workspace-head { flex-wrap: wrap; }
  .card { padding: 17px; }
  .inline-fields, .link-box { flex-wrap: wrap; }
  .inline-fields label, .link-box a { flex-basis: 100%; }
  .demo-foot { align-items: start; flex-wrap: wrap; }
}