/* Dailyz pre-registration page.
 *
 * One stylesheet, no framework, no external origin. The typeface is the
 * product's own (Bricolage Grotesque for display, Instrument Sans for text),
 * self-hosted in fonts.css so the page can run under a strict CSP.
 *
 * Motion rule, from the house style: hover moves things, it never recolours
 * them. Every transition below is transform or opacity only. */

:root {
  --shell-wide: 1360px;
  --bg: #0A0B10;
  --panel: #12141C;
  --panel-2: #171A24;
  --ink: #EDEEF4;
  --muted: #9AA0B4;
  --faint: #6B7186;
  --accent: #6C8CFF;
  --accent-strong: #4A63F0;
  --warn: #F0B429;
  --good: #37B87C;
  --line: rgba(255, 255, 255, .09);
  --radius: 16px;
  --shell: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The one ambient flourish: a cold wash behind the fold, no animation. */
body::before {
  content: '';
  position: fixed;
  inset: -20% -20% auto -20%;
  height: 70vh;
  background: radial-gradient(60% 60% at 50% 0%, rgba(108, 140, 255, .16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.shell { width: min(var(--shell), calc(100% - 44px)); margin: 0 auto; position: relative; z-index: 1; }
/* The screenshots are whole application windows. Shown in a 613px grid column
   they were being scaled to 43% and every label in them turned to mush, so the
   section that carries them gets its own wider measure and the images run the
   full width of it at close to 1:1. */
.shell.wide { width: min(var(--shell-wide), calc(100% - 44px)); }

h1, h2, h3, .display {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
  margin: 0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- header ------------------------------------------------------------ */

header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(10, 11, 16, .82);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; gap: 16px; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand svg { width: 30px; height: 26px; display: block; }
.brand span { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.navnote { color: var(--faint); font-size: 14px; }
.navlink { color: var(--muted); font-size: 15px; font-weight: 600; }
.navlink:hover { color: var(--ink); text-decoration: none; }

/* ---- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
  background: var(--accent-strong); color: #fff;
  transition: transform .16s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }

/* ---- hero -------------------------------------------------------------- */

.hero { padding: 92px 0 64px; }
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(108, 140, 255, .3);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 26px;
}
.kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: block; }

h1 { font-size: clamp(40px, 6.6vw, 74px); max-width: 15ch; }
.lede { font-size: clamp(18px, 2.1vw, 21px); color: var(--muted); max-width: 60ch; margin: 26px 0 0; }
.lede strong { color: var(--ink); font-weight: 600; }
/* One sentence that makes the name explain itself, so nobody has to ask. */
.namenote { color: var(--faint); font-size: 15.5px; max-width: 62ch; margin: 22px 0 0;
  padding-left: 16px; border-left: 2px solid rgba(108, 140, 255, .35); }

/* ---- the form ---------------------------------------------------------- */

.signup { margin-top: 36px; max-width: 620px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.field {
  flex: 1 1 240px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  padding: 13px 16px; border-radius: 12px; font: inherit; font-size: 16px;
}
.field::placeholder { color: var(--faint); }
.field:focus { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
select.field { appearance: none; cursor: pointer; }
/* Kept out of a style attribute so the page satisfies style-src 'self' with
   no 'unsafe-inline'. */
.field.narrow { flex: 0 1 210px; }
.formnote { color: var(--faint); font-size: 14px; margin-top: 12px; }
.formmsg { margin-top: 14px; font-size: 15px; display: none; }
.formmsg.show { display: block; }
.formmsg.ok { color: var(--good); }
.formmsg.bad { color: var(--warn); }

/* ---- sections ---------------------------------------------------------- */

section { padding: 72px 0; position: relative; z-index: 1; }
.sechead { max-width: 62ch; margin-bottom: 40px; }
.sechead h2 { font-size: clamp(28px, 4vw, 42px); }
.sechead p { color: var(--muted); margin: 16px 0 0; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 14px;
}

/* ---- the four feature blocks ------------------------------------------- */

.feat { margin-bottom: 96px; }
.feat:last-child { margin-bottom: 0; }
.feat .copy { max-width: 62ch; margin-bottom: 32px; }
.feat h3 { font-size: clamp(24px, 3vw, 32px); }
.feat p { color: var(--muted); margin: 14px 0 0; max-width: 58ch; }
.feat .num {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 13px; letter-spacing: .12em; color: var(--accent);
}

figure { margin: 0; }
.shot {
  width: 100%; display: block; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel);
  /* Dark UI on a dark page needs a lift, or the screenshot dissolves into it. */
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
figcaption { color: var(--faint); font-size: 14px; margin-top: 12px; }

/* ---- pull quote / stat strip ------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--panel); padding: 26px 24px; }
.stat b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 34px; letter-spacing: -.03em; }
.stat span { color: var(--muted); font-size: 15px; }

/* ---- comparison -------------------------------------------------------- */

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px;
}
.card h3 { font-size: 19px; }
.card p { color: var(--muted); font-size: 15.5px; margin: 12px 0 0; }
.card.lit { background: var(--panel-2); border-color: rgba(108, 140, 255, .34); }
.card.lit h3 { color: var(--accent); }

/* ---- honest block ------------------------------------------------------ */

.honest { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.honest ul { margin: 20px 0 0; padding: 0; list-style: none; }
.honest li { color: var(--muted); padding: 11px 0 11px 28px; position: relative; border-top: 1px solid var(--line); }
.honest li:first-child { border-top: 0; }
.honest li::before { content: '·'; position: absolute; left: 8px; color: var(--accent); font-weight: 700; }

/* ---- closing ----------------------------------------------------------- */

.close { text-align: center; padding: 96px 0 110px; }
.close h2 { font-size: clamp(30px, 5vw, 52px); max-width: 18ch; margin: 0 auto; }
.close .signup { margin: 32px auto 0; }
.close .formnote { text-align: center; }

footer { border-top: 1px solid var(--line); padding: 30px 0 46px; color: var(--faint); font-size: 14px; }
.footrow { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* ---- wider screens ----------------------------------------------------- */

@media (min-width: 900px) {
  .feat { margin-bottom: 120px; }
  .feat .copy { margin-bottom: 40px; }
}

/* Small screens: the header has three things and room for two. The beta note
   is the one nobody needs, and dropping it stops the Pre-register pill wrapping
   onto a second line. */
@media (max-width: 560px) {
  .navnote, .navlink { display: none; }
  .hero { padding: 56px 0 40px; }
  section { padding: 56px 0; }
  .feat { margin-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ---- pricing preview --------------------------------------------------- */

.pricehead { padding: 92px 0 40px; }
.pricehead h1 { font-size: clamp(36px, 5.6vw, 64px); }
.pricehead .lede { margin-top: 20px; }
.preview {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--warn); border: 1px solid rgba(240, 180, 41, .35); padding: 7px 14px; border-radius: 999px;
}
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; margin-top: 8px; }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; display: flex; flex-direction: column; }
.plan.lit { background: var(--panel-2); border-color: rgba(108, 140, 255, .34); }
.plan h3 { font-size: 20px; }
.plan .for { color: var(--muted); font-size: 15px; margin: 8px 0 0; min-height: 48px; }
.price { display: flex; align-items: baseline; gap: 6px; margin: 22px 0 6px; }
.price b { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 46px; letter-spacing: -.03em; line-height: 1; }
.price span { color: var(--faint); font-size: 15px; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 0; }
.plan li { color: var(--muted); font-size: 15px; padding: 9px 0 9px 24px; position: relative; border-top: 1px solid var(--line); }
.plan li:first-child { border-top: 0; }
.plan li::before { content: '·'; position: absolute; left: 6px; color: var(--accent); font-weight: 700; }
.plan li b { color: var(--ink); font-weight: 600; }
.plan .tag { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.compare { margin-top: 56px; }
.compare table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.compare th, .compare td { text-align: left; padding: 14px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.compare th { color: var(--faint); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; border-top: 0; }
.compare td:first-child { color: var(--ink); font-weight: 600; }
.compare td { color: var(--muted); }
.compare td.you { color: var(--accent); font-weight: 600; }
.tablewrap { overflow-x: auto; }