/* PIVT marketing site.
 *
 * Tokens are lifted from the product's own design system
 * (frontend/src/design-system/tokens.css) rather than invented, so the
 * site and the thing it sells look like one company. The contrast notes
 * there apply here too and are the reason there are two teals: #00CFC4
 * measures ~1.7:1 on white and may only carry meaning as a fill or a
 * rule, never as text. #007D77 is its readable partner.
 *
 * Deliberately one theme. The product follows the viewer's light/dark
 * setting because people live in it for weeks; a marketing page is read
 * once, and committing to the warm ground the brand actually uses beats
 * maintaining two palettes nobody compares.
 *
 * No build step, no framework. Four pages do not justify either, and a
 * static file is the fastest thing a crawler or a phone can be handed.
 */

:root {
  --warm-white: #FAF8F5;
  --surface: #FFFFFF;
  --sunken: #F2EFEA;

  --ink: #141A20;
  --ink-2: #4A5159;
  --muted: #767E88;

  --rule: #E4E0D9;
  --rule-strong: #CFC9C0;

  --teal: #00CFC4;        /* fills and rules only */
  --teal-text: #007D77;   /* the readable partner */
  --teal-wash: rgba(0, 191, 175, 0.11);
  --blue: #2563FF;
  --blue-wash: rgba(37, 99, 255, 0.09);
  --amber-wash: rgba(217, 164, 65, 0.14);
  --amber-text: #8A6616;
  --rose-wash: rgba(190, 110, 110, 0.13);
  --rose-text: #9A4B4B;

  --font: Inter, "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --page: 68rem;
  --reading: 40rem;
  --radius: 10px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute only sets `display: none` in the user-agent
 * stylesheet, so any author rule with a display beats it -- and both
 * `.form` and `.thanks` below set `display: grid`. Without this, hidden
 * elements render anyway: the waitlist confirmation sat visible above the
 * empty form from page load, and the form never disappeared on success.
 * Toggle visibility with el.hidden and let this rule mean it. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--warm-white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.15; text-wrap: balance; letter-spacing: -0.021em; }
h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 650; }
h3 { font-size: 1.16rem; font-weight: 640; letter-spacing: -0.01em; }
h4 { font-size: 0.97rem; font-weight: 620; letter-spacing: 0; }
p { margin: 0; }
a { color: inherit; }

/* ── Shell ─────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding-inline: 20px; }
.reading { max-width: var(--reading); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.eyebrow.accent { color: var(--teal-text); }

section { padding-block: clamp(3.2rem, 7vw, 5.6rem); }
section + section { border-top: 1px solid var(--rule); }
.section-head { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 2.4rem; }
.section-head p.lede { color: var(--ink-2); max-width: var(--reading); font-size: 1.07rem; }

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

.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner { display: flex; align-items: center; gap: 1.5rem; height: 60px; }
.brand { font-weight: 700; letter-spacing: -0.03em; font-size: 1.22rem; text-decoration: none; }
.brand .dot { color: var(--teal-text); }
.nav-links { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.nav-links a { color: var(--ink-2); text-decoration: none; font-size: 0.93rem; font-weight: 500; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }
@media (max-width: 640px) {
  .nav-inner { height: auto; padding-block: 10px; flex-wrap: wrap; gap: 0.6rem 1rem; }
  .nav-links { margin-left: 0; width: 100%; gap: 1rem; flex-wrap: wrap; }
  .nav-links .btn { margin-left: auto; }
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0 1.15rem;
  border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-size: 0.95rem; font-weight: 580;
  text-decoration: none; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.btn-primary { background: var(--ink); color: var(--warm-white); }
.btn-primary:hover { background: #000; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-secondary:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

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

.hero { padding-block: clamp(3.4rem, 9vw, 7rem) clamp(2.6rem, 6vw, 4.4rem); }
.hero h1 { max-width: 16ch; }
.hero .sub { font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--ink-2); max-width: 46ch; margin-top: 1.3rem; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.1rem; }
.hero .meaning {
  margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* The journey spine, used as a motif across pages. */
.spine { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.spine span {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase;
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: 999px; padding: 0.34rem 0.75rem; color: var(--ink-2); white-space: nowrap;
}
.spine i { color: var(--teal-text); font-style: normal; font-size: 0.85rem; }

/* ── Cards and grids ───────────────────────────────────────────────── */

.grid { display: grid; gap: 1.1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* The six surfaces. Explicit counts rather than auto-fit: auto-fit fitted
   five across at desktop width and left Journey stranded on its own row,
   which read as a layout accident rather than as six equal things. */
.grid.six { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 34rem) { .grid.six { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60rem) { .grid.six { grid-template-columns: repeat(6, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.3rem 1.35rem; display: flex; flex-direction: column; gap: 0.55rem;
}
.card p { color: var(--ink-2); font-size: 0.95rem; }
.card .num {
  font-family: var(--mono); font-size: 0.72rem; color: var(--teal-text); letter-spacing: 0.08em;
}

/* A card that is a step in a numbered sequence. */
.step { border-top: 3px solid var(--teal); }

/* ── Comparison table ──────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
/* Scroll rather than crush. Three columns inside a 350px phone wraps
   every cell to two or three words, which is harder to read than a
   sideways nudge. */
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.94rem; }
th {
  text-align: left; font-family: var(--mono); font-weight: 500; font-size: 0.66rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted);
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--rule); background: var(--sunken); white-space: nowrap;
}
td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--rule); color: var(--ink-2); vertical-align: top; }
td:first-child { color: var(--ink); font-weight: 550; }
tr:last-child td { border-bottom: none; }

/* ── Move card: the proof moment ───────────────────────────────────── */

.move {
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); overflow: hidden;
}
.move-head {
  padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
}
.move-head h3 { font-size: 1.22rem; }
.dims { display: grid; }
.dim {
  display: grid; grid-template-columns: 11rem 9rem 1fr; gap: 0 1rem;
  padding: 0.78rem 1.35rem; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.dim:last-child { border-bottom: none; }
.dim-name { font-weight: 580; font-size: 0.93rem; }
.dim-why { color: var(--ink-2); font-size: 0.91rem; }
@media (max-width: 680px) {
  .dim { grid-template-columns: 1fr; gap: 0.3rem; padding-block: 0.85rem; }
}

.pill {
  display: inline-block; font-family: var(--mono); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0.22rem 0.5rem;
  border-radius: 4px; white-space: nowrap;
}
.pill-strong { background: var(--teal-wash); color: var(--teal-text); }
.pill-workable { background: var(--blue-wash); color: var(--blue); }
.pill-constrained { background: var(--rose-wash); color: var(--rose-text); }
.pill-unknown { background: var(--sunken); color: var(--muted); }
.pill-testing { background: var(--amber-wash); color: var(--amber-text); }

/* ── Quiet emphasis ────────────────────────────────────────────────── */

.pull {
  border-left: 3px solid var(--teal); padding-left: 1.1rem;
  font-size: 1.12rem; color: var(--ink); max-width: var(--reading);
}
.note {
  background: var(--sunken); border-radius: var(--radius); padding: 1.1rem 1.25rem;
  font-size: 0.95rem; color: var(--ink-2);
}

ul.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
ul.ticks li { padding-left: 1.5rem; position: relative; color: var(--ink-2); font-size: 0.95rem; }
ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.58em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--teal);
}
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
ul.plain li { color: var(--ink-2); font-size: 0.94rem; }

/* ── Closing call to action ────────────────────────────────────────── */

.cta-band { background: var(--ink); color: var(--warm-white); }
.cta-band h2 { color: var(--warm-white); }
.cta-band p { color: #C9CDD2; }
.cta-band .btn-primary { background: var(--teal); color: #06231F; }
.cta-band .btn-primary:hover { background: #2BE0D6; }
.cta-band .btn-secondary { color: var(--warm-white); border-color: #434B54; }
.cta-band .btn-secondary:hover { border-color: var(--warm-white); }

/* ── Form ──────────────────────────────────────────────────────────── */

.form { display: grid; gap: 1.05rem; max-width: 32rem; }
.field { display: grid; gap: 0.34rem; }
.field label { font-size: 0.89rem; font-weight: 560; }
.field .hint { font-size: 0.82rem; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.97rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); padding: 0.7rem 0.8rem; min-height: 44px; width: 100%;
}
.field textarea { min-height: 5.5rem; resize: vertical; }
.consent { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.89rem; color: var(--ink-2); }
.consent input { margin-top: 0.25rem; width: 18px; height: 18px; min-height: 0; flex: none; }
.form-status { font-size: 0.93rem; min-height: 1.4rem; }
.form-status.error { color: var(--rose-text); }
.form-status.ok { color: var(--teal-text); }

.thanks {
  background: var(--surface); border: 1px solid var(--teal); border-radius: var(--radius);
  padding: 1.6rem; display: grid; gap: 0.6rem; max-width: 32rem;
}

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

footer { border-top: 1px solid var(--rule); padding-block: 2.4rem 3rem; color: var(--muted); font-size: 0.88rem; }
footer .foot-inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--ink); }
footer .attribution { max-width: var(--reading); font-size: 0.8rem; line-height: 1.5; }