/* Herbstify marketing — tokens mirror herbstified/frontend/src/index.css @theme */

@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url("fonts/DMSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url("fonts/DMSans-Medium.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-weight: 600; font-display: swap; src: url("fonts/DMSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("fonts/DMSans-Bold.ttf") format("truetype"); }

:root {
  --color-primary: #0E1A2B;
  --color-accent: #01B4BA;
  --color-orange: #FF7A0F;
  --color-cream: #F6F6F6;
  --color-border: #E5E7EB;
  --color-text-secondary: #57534e;
  --color-text-muted: #a8a29e;

  /* Verdict register (status) and rank (priority) — dashboard only */
  --color-status-good: #66BF36;
  --color-status-good-ink: #3E7A1F;
  --color-status-warn: #FFB900;
  --color-status-warn-ink-lg: #C68A00;
  --color-status-bad: #B91C1C;
  --color-priority-high: #DC2626;
  --color-priority-medium: #FBBF24;

  --gradient-navy-spotlight:
    radial-gradient(120% 85% at 85% -10%, rgba(1, 180, 186, 0.22) 0%, rgba(1, 180, 186, 0) 55%),
    radial-gradient(110% 80% at 5% 112%, rgba(255, 122, 15, 0.16) 0%, rgba(255, 122, 15, 0) 55%),
    linear-gradient(155deg, #15293f 0%, #0e1a2b 52%, #0a1521 100%);

  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
h1, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  color: #fff;
  background-color: var(--color-primary);
  background-image: var(--gradient-navy-spotlight);
  -webkit-font-smoothing: antialiased;
}

.ic {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.ic.fill { fill: currentColor; stroke: none; }
.icon { width: 18px; height: 18px; }

/* One screen: nav / hero / footer, never taller than the viewport */
.page {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Nav ───────────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.wordmark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* ── Buttons ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: 600 15px/1 var(--font-sans);
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.btn-light { background: #fff; color: var(--color-primary); }
.btn-light:hover { background: var(--color-cream); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.24); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.5); }

/* ── Hero ──────────────────────────────────────────────── */

.hero {
  display: grid;
  align-content: start;
  gap: 40px;
  padding-top: 24px;
  min-height: 0;
  overflow: hidden;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}

h1 {
  font-size: clamp(32px, min(3.6vw, 7vh), 52px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 15ch;
  text-wrap: balance;
}

.lede {
  margin: 20px 0 32px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  max-width: 44ch;
}

/* ── Footer ────────────────────────────────────────────── */

.foot {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.features { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ── Dashboard mockup ──────────────────────────────────────
   A redraw of DashboardPage.tsx on a 1100px virtual canvas.
   --u is one virtual pixel, scaled to the wrapper's width,
   so every size below is calc(<px> * var(--u)). */

.mock-wrap {
  container-type: inline-size;
  width: 190%;               /* phones: bleed off the right and bottom edges */
}

.mock {
  --u: calc(100cqw / 1100);
  font-size: calc(13 * var(--u));
  line-height: 1.3;
  color: var(--color-primary);
  background: #fff;
  border-radius: calc(14 * var(--u));
  overflow: hidden;
  box-shadow: 0 calc(40 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.mock b { font-weight: 600; }
.mock i { font-style: normal; }
.mock small { font-size: inherit; }

/* Browser chrome */
.m-bar {
  display: flex;
  align-items: center;
  height: calc(36 * var(--u));
  padding: 0 calc(14 * var(--u));
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-border);
}
.m-dots { display: flex; gap: calc(6 * var(--u)); }
.m-dots i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: #D6D3D1; }
.m-url {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  margin: 0 auto;
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  border-radius: calc(7 * var(--u));
  background: #fff;
  border: 1px solid var(--color-border);
  font-size: calc(11 * var(--u));
  color: var(--color-text-secondary);
}
.m-url svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }

.m-app {
  display: grid;
  grid-template-columns: calc(210 * var(--u)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: calc(860 * var(--u));
}

/* Sidebar */
.m-side {
  display: flex;
  flex-direction: column;
  background: #0e1a2b;
  min-height: 0;
}
.m-side-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(64 * var(--u));
  padding: 0 calc(20 * var(--u));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.m-side-head b { font-size: calc(16 * var(--u)); font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.m-side-head span { font-size: calc(10.5 * var(--u)); color: rgba(255, 255, 255, 0.5); margin-top: calc(2 * var(--u)); }

.m-nav { flex: 1; padding: calc(10 * var(--u)); }
.m-nav li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(11 * var(--u));
  margin-bottom: calc(2 * var(--u));
  border-radius: calc(8 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.m-nav svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.5; }
.m-nav li.on { background: var(--color-orange); color: #fff; }
.m-nav .m-section {
  margin-top: calc(10 * var(--u));
  padding-top: calc(12 * var(--u));
  padding-bottom: calc(4 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  font-size: calc(10 * var(--u));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.m-profile {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin: calc(10 * var(--u));
  padding: calc(9 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.05);
}
.m-avatar {
  display: grid;
  place-items: center;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 50%;
  background: #2D7DD2;          /* avatar fill — data colour, per avatarColors.ts */
  color: #fff;
  font-size: calc(11 * var(--u));
  font-weight: 700;
}
.m-profile b { display: block; font-size: calc(12 * var(--u)); color: #fff; }
.m-profile span { font-size: calc(10.5 * var(--u)); color: rgba(255, 255, 255, 0.5); }

/* Main canvas */
.m-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: calc(26 * var(--u)) calc(28 * var(--u));
  background: var(--color-cream);
}

.m-head { margin-bottom: calc(18 * var(--u)); }
.m-head b { display: block; font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: -0.01em; }
.m-head span { display: block; margin-top: calc(3 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--color-text-muted); }

.m-eyebrow {
  font-size: calc(10 * var(--u));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Start meeting card */
.m-meet {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  margin-bottom: calc(16 * var(--u));
  padding: calc(20 * var(--u)) calc(22 * var(--u));
  border-radius: calc(16 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--gradient-navy-spotlight);
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) calc(-12 * var(--u)) rgba(14, 26, 43, 0.45);
  overflow: hidden;
  color: #fff;
}
.m-wave {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  padding-right: calc(200 * var(--u));
  opacity: 0.14;
}
.m-wave i { width: calc(4 * var(--u)); height: calc(var(--h) * var(--u)); border-radius: 99px; background: #fff; }
.m-meet-copy { position: relative; flex: 1; min-width: 0; }
.m-meet .m-eyebrow { display: block; margin-bottom: calc(4 * var(--u)); color: rgba(255, 255, 255, 0.45); }
.m-meet b { display: block; font-size: calc(17 * var(--u)); font-weight: 700; }
.m-meet p { margin-top: calc(4 * var(--u)); max-width: calc(470 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.m-start {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(46 * var(--u));
  padding: 0 calc(22 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--color-orange);
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) rgba(0, 0, 0, 0.5);
  font-size: calc(14 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}
.m-start svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

/* Desk verdict card */
.m-verdict {
  margin-bottom: calc(16 * var(--u));
  padding: calc(20 * var(--u)) calc(22 * var(--u));
  border: calc(3 * var(--u)) solid var(--color-status-good);
  border-radius: calc(12 * var(--u));
  background: #fff;
}
.m-band {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-status-good-ink);
}
.m-band i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--color-status-good); }

.m-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto minmax(0, 1fr);
  gap: calc(24 * var(--u));
  margin-top: calc(18 * var(--u));
}
.m-figs b {
  display: block;
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.m-figs b.warn { color: var(--color-status-warn-ink-lg); }
.m-figs b.bad { color: var(--color-status-bad); }
.m-figs span {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  margin-top: calc(10 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: 600;
}
.m-figs small { display: block; margin-top: calc(3 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--color-text-muted); }
.m-figs .sw { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2 * var(--u)); }
.m-rule { width: 1px; background: var(--color-border); }

.m-meter {
  display: flex;
  height: calc(8 * var(--u));
  margin-top: calc(20 * var(--u));
  border-radius: 99px;
  overflow: hidden;
  background: var(--color-border);
}
.good { background: var(--color-status-good); }
.sw.warn, .m-meter .warn { background: var(--color-status-warn); }
.sw.bad, .m-meter .bad { background: var(--color-status-bad); }

.m-foot {
  margin-top: calc(16 * var(--u));
  padding-top: calc(14 * var(--u));
  border-top: 1px solid var(--color-border);
  font-size: calc(11.5 * var(--u));
  color: var(--color-text-secondary);
}
.m-foot b { color: var(--color-primary); }

/* Tasks + quick actions */
.m-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: calc(18 * var(--u));
}

.m-tasks {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  border-radius: calc(16 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--gradient-navy-spotlight);
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) calc(-12 * var(--u)) rgba(14, 26, 43, 0.45);
  color: #fff;
}
.m-tasks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(10 * var(--u));
}
.m-tasks-head .m-eyebrow { color: rgba(255, 255, 255, 0.4); }
.m-add {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
  color: var(--color-accent);
}
.m-add svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); stroke-width: 2.5; }

.m-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(12 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}
.m-tabs {
  display: flex;
  gap: calc(2 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.m-tabs span {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(10 * var(--u)) calc(9 * var(--u));
  margin-bottom: -1px;
  border-bottom: calc(2 * var(--u)) solid transparent;
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
.m-tabs span.on { color: #fff; border-color: #fff; }
.m-tabs i {
  padding: calc(1 * var(--u)) calc(6 * var(--u));
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.m-tabs .on i { background: rgba(1, 180, 186, 0.2); color: var(--color-accent); }

.m-list li {
  display: flex;
  align-items: center;
  gap: calc(11 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.m-list li div { flex: 1; min-width: 0; }
.m-list li b {
  display: block;
  font-size: calc(12.5 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-list li span {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  margin-top: calc(2 * var(--u));
  font-size: calc(10.5 * var(--u));
  color: rgba(255, 255, 255, 0.5);
}
.m-list li span svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); opacity: 0.6; stroke-width: 2.5; }
.m-list time {
  min-width: calc(44 * var(--u));
  text-align: right;
  font-size: calc(10.5 * var(--u));
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.5);
}
.m-check {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  border-radius: calc(5 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.m-pri { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; flex-shrink: 0; }
.m-pri.high { background: var(--color-priority-high); }
.m-pri.med { background: var(--color-priority-medium); }
.m-pri.low { background: #7B90A4; }

.m-quick { display: flex; flex-direction: column; min-height: 0; }
.m-quick > .m-eyebrow { margin-bottom: calc(8 * var(--u)); color: var(--color-text-muted); }
.m-tiles {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);   /* rows size to content, then share the slack */
  gap: calc(10 * var(--u));
}
.m-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  min-width: 0;
  padding: calc(11 * var(--u));
  border-radius: calc(12 * var(--u));
  border: 1px solid var(--color-border);
  background: #fff;
}
.m-tile-top { display: flex; align-items: flex-start; justify-content: space-between; }
.m-tile-text { margin-top: calc(8 * var(--u)); min-width: 0; }
.m-tile-top > span {
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--a);
  color: #fff;
}
.m-tile-top > span svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.m-out { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #D6D3D1; stroke-width: 2.5; }
.m-tile b { display: block; font-size: calc(12 * var(--u)); line-height: 1.2; }
.m-tile small {
  display: block;
  margin-top: calc(3 * var(--u));
  line-height: 1.3;
  font-size: calc(10 * var(--u));
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Desktop: side by side, mockup sized to fit the height ── */

@media (min-width: 960px) {
  .container { padding: 0 48px; }

  .hero {
    grid-template-columns: minmax(0, 4.75fr) minmax(0, 7.25fr);
    align-items: center;
    align-content: center;
    gap: 56px;
    padding-top: 0;
    overflow: visible;
  }

  /* 1.22 = mockup width / height (1100 / 896); 200px = nav + footer + breathing room */
  .mock-wrap {
    width: min(100%, calc((100dvh - 200px) * 1.22));
    justify-self: end;
  }

  .foot { display: flex; border-top: 1px solid rgba(255, 255, 255, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}