/* ============================================================
   NODAVIO — SIGNUP
   Its own stylesheet, not the admin panel's style.css, for the same
   reason signup.php lives in its own directory: this page has to be
   deployable on its own and shouldn't inherit the private panel's
   dark, utilitarian palette. It mirrors the marketing site's tokens
   instead, so arriving here from nodavio.dk doesn't feel like being
   handed off to a different product.
   ============================================================ */

* { box-sizing: border-box; }

:root {
  --ink: 15 17 18;
  --ink-2: 43 48 51;
  --ink-muted: 100 106 110;
  --ink-faint: 150 155 158;
  --paper: 255 255 255;
  --paper-2: 247 246 244;
  --paper-3: 240 239 236;
  --border: 226 224 219;
  --border-strong: 200 197 190;
  --teal: 15 111 122;
  --teal-ink: 10 89 99;
  --critical: 176 45 38;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow-sm: 0 14px 30px -20px rgb(0 0 0 / 0.22);
  --shadow-lg: 0 40px 90px -40px rgb(0 0 0 / 0.28);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: rgb(var(--ink));
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* The marketing site's page field, same two periodic layers, so the
     background reads as one continuous surface with the site it came
     from rather than a flat panel. */
  background:
    radial-gradient(900px circle at 12% -10%, rgb(var(--teal) / 0.16), rgb(var(--teal) / 0) 60%),
    repeating-linear-gradient(to bottom,
      rgb(200 230 230 / 0) 0, rgb(200 230 230 / 0.5) 100vh, rgb(200 230 230 / 0) 200vh),
    repeating-linear-gradient(to bottom,
      rgb(var(--paper-3) / 0) 40vh, rgb(var(--paper-3) / 0.85) 190vh, rgb(var(--paper-3) / 0) 340vh),
    rgb(var(--paper));
}

h1, h2, h3, p, ol, ul { margin: 0; }

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 28px 56px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Top bar ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(32px, 6vw, 72px); }
.top-logo { display: inline-flex; }
.top-logo img { height: 22px; width: auto; display: block; }
/* ---------- Layout ---------- */
.grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}

/* ---------- Pitch ---------- */
.eyebrow {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--teal-ink)); margin-bottom: 14px;
}
.pitch h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.06;
  text-wrap: balance; max-width: 15ch;
}
.lead { margin-top: 20px; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.08rem); color: rgb(var(--ink-muted)); line-height: 1.6; max-width: 46ch; }

/* Numbered because the signup really is a fixed sequence - the number
   carries the order, it isn't decoration. */
.steps { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-direction: column; gap: 22px; max-width: 42ch; }
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.steps .n {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600;
  background: rgb(var(--paper)); border: 1.5px solid rgb(var(--border-strong)); color: rgb(var(--ink-2));
  transition: border-color 240ms var(--ease), color 240ms var(--ease), background 240ms var(--ease);
}
.steps li:first-child .n { border-color: rgb(var(--teal)); background: rgb(var(--teal)); color: rgb(var(--paper)); }
.steps strong { display: block; font-size: 14.5px; font-weight: 600; }
.steps span { display: block; margin-top: 3px; font-size: 13.5px; color: rgb(var(--ink-muted)); line-height: 1.55; }

.assurances { list-style: none; padding: 0; margin: 38px 0 0; display: flex; flex-direction: column; gap: 11px; }
.assurances li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: rgb(var(--ink-2)); }
.assurances svg { width: 15px; height: 15px; margin-top: 3px; flex-shrink: 0; color: rgb(var(--teal-ink)); }

/* ---------- The card ---------- */
.card {
  background: rgb(var(--paper));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-lg);
}
.card-head { margin-bottom: 22px; }
.card-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.card-head p { margin-top: 5px; font-size: 13px; color: rgb(var(--ink-muted)); line-height: 1.5; }

/* Price, straight from the Stripe Price object - the figure a card is
   about to be charged is the thing worth showing largest here. */
.price { padding: 18px 20px; border-radius: var(--radius-md); background: rgb(var(--paper-2)); border: 1px solid rgb(var(--border)); margin-bottom: 22px; }
.price-label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(var(--ink-faint)); }
.price-text { margin-top: 8px; font-size: 14px; line-height: 1.6; color: rgb(var(--ink-2)); }
.price-text strong { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: rgb(var(--ink)); }
.price-vat { margin-top: 10px; font-size: 11.5px; color: rgb(var(--ink-faint)); line-height: 1.5; }

label.field { display: block; font-size: 13px; font-weight: 500; color: rgb(var(--ink-2)); }
label.field input {
  display: block; width: 100%; margin-top: 8px;
  padding: 13px 15px; font: inherit; font-size: 15px;
  color: rgb(var(--ink));
  background: rgb(var(--paper));
  border: 1.5px solid rgb(var(--border-strong)); border-radius: var(--radius-sm);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
label.field input::placeholder { color: rgb(var(--ink-faint)); }
label.field input:focus {
  outline: none;
  border-color: rgb(var(--teal));
  box-shadow: 0 0 0 4px rgb(var(--teal) / 0.13);
}

.submit {
  width: 100%; margin-top: 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 15px 24px; border: none; border-radius: 999px; cursor: pointer;
  background: rgb(var(--ink)); color: rgb(var(--paper));
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
}
.submit svg { width: 15px; height: 15px; transition: transform 220ms var(--ease); }
.submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgb(0 0 0 / 0.4); }
.submit:hover:not(:disabled) svg { transform: translateX(3px); }
.submit:active:not(:disabled) { transform: translateY(0); }
.submit:disabled { background: rgb(var(--border-strong)); color: rgb(var(--paper)); cursor: not-allowed; }
.submit:focus-visible { outline: 3px solid rgb(var(--teal) / 0.45); outline-offset: 3px; }

.card-foot { margin-top: 16px; font-size: 12px; color: rgb(var(--ink-faint)); line-height: 1.55; text-align: center; }
.signin-hint { margin-top: 20px; text-align: center; font-size: 13px; color: rgb(var(--ink-muted)); }
.signin-hint a { color: rgb(var(--teal-ink)); font-weight: 600; text-decoration: none; }
.signin-hint a:hover { text-decoration: underline; }

.error {
  margin-bottom: 20px; padding: 12px 14px;
  background: rgb(var(--critical) / 0.07); border: 1px solid rgb(var(--critical) / 0.28);
  border-radius: var(--radius-sm); color: rgb(var(--critical)); font-size: 13px; line-height: 1.5;
}

/* ---------- Entrance
   One short staged reveal on load, so the page assembles rather than
   appearing all at once. Deliberately not tied to scroll: everything
   here is above the fold and needs to be readable immediately.
   ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.rise { animation: rise 620ms var(--ease) both; }
.rise-1 { animation-delay: 60ms; }
.rise-2 { animation-delay: 130ms; }
.rise-3 { animation-delay: 200ms; }
.rise-4 { animation-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; gap: 36px; }
  .pitch h1 { max-width: none; }
  /* The form comes first on a phone - the pitch is reassurance you read
     after seeing what's being asked of you, not a gate in front of it. */
  .card-col { order: -1; }
  .steps, .lead { max-width: none; }
}
@media (max-width: 520px) {
  .page { padding: 20px 20px 40px; }
  .card { padding: 24px 20px; }
}

/* ---------- 404 ---------- */
.grid-single { grid-template-columns: minmax(0, 640px); }
.submit-inline { width: auto; margin-top: 0; text-decoration: none; padding: 14px 26px; }