/* ============ DONNA - brand tokens ============ */
:root {
  /* palette extracted from logo + product */
  --mauve:      #b85570;
  --mauve-600:  #a04861;
  --mauve-100:  #fae8ee;   /* active pink from product */
  --mauve-50:   #fdf3f6;
  --terra:      #bc7127;   /* the "." accent */
  --terra-strong:#a25f1e;

  /* neutrals - warm, matching product */
  --bg:         #ffffff;
  --bg-warm:    #fbf8f9;
  --cream:      #f7f2ec;   /* editorial variant surface */
  --ink:        #1a1614;   /* near-black, slightly warm */
  --ink-soft:   #3a3330;
  --muted:      #7a716c;
  --hairline:   rgba(26,22,20,.08);
  --hairline-strong: rgba(26,22,20,.14);

  /* type */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', ui-serif, Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

/* small-caps rigor label - echoes the product UI */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.nav-logo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  color: var(--mauve);
  letter-spacing: -0.02em;
  display: inline-flex; align-items: baseline;
}
.nav-logo .dot { color: var(--terra); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 500;
}
.nav-links a:hover { color: var(--mauve); }
.nav-cta {
  background: var(--mauve);
  color: white;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: background .18s;
}
.nav-cta:hover { background: var(--mauve-600); }

/* ============ HERO - shared ============ */
.hero {
  padding: 72px 0 96px;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 24px;
  padding: 6px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: white;
}
.hero-eyebrow .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--terra);
  box-shadow: 0 0 0 0 rgba(188,113,39,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(188,113,39,.55); }
  70% { box-shadow: 0 0 0 8px rgba(188,113,39,0); }
  100% { box-shadow: 0 0 0 0 rgba(188,113,39,0); }
}

.hero-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 6.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 24px;
}
.hero-h1 em {
  font-style: italic;
  color: var(--mauve);
  font-weight: 400;
}
.hero-sub {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
  margin-bottom: 32px;
}

/* waitlist form */
.waitlist {
  display: flex; gap: 8px;
  background: white;
  padding: 6px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  max-width: 460px;
  box-shadow: 0 2px 8px rgba(26,22,20,.03);
}
.waitlist input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 10px 12px;
  font: 15px var(--sans);
  color: var(--ink);
}
.waitlist input::placeholder { color: var(--muted); }
.waitlist button {
  background: var(--mauve);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  transition: background .18s, transform .18s;
}
.waitlist button:hover { background: var(--mauve-600); }
.waitlist button:active { transform: scale(.98); }

.hero-microcopy {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  display: flex; gap: 16px; align-items: center;
}
.hero-microcopy .dot-sep { color: var(--hairline-strong); }

/* ============ HERO V1 mockup wrapper - readable, breathable ============ */
.mockup-wrap {
  position: relative;
  /* wider, shorter - gives space to breathe */
  aspect-ratio: 11 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--hairline-strong);
  box-shadow:
    0 1px 2px rgba(26,22,20,.04),
    0 8px 24px rgba(26,22,20,.06),
    0 40px 80px -20px rgba(184,85,112,.18);
}

/* window chrome */
.mockup-chrome {
  height: 32px;
  background: #f6f2f3;
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center;
  padding: 0 14px; gap: 6px;
  position: relative;
  z-index: 3;
}
.mockup-chrome .light {
  width: 11px; height: 11px; border-radius: 50%;
}
.chrome-url {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; color: #a8a09b;
}

/* the mockup canvas - larger base font so it reads at hero scale */
.mock {
  position: absolute; inset: 32px 0 0 0;
  display: grid;
  grid-template-columns: 180px 1fr;
  background: white;
  overflow: hidden;
}

/* SIDEBAR */
.mock-sidebar {
  background: var(--bg-warm);
  border-right: 1px solid var(--hairline);
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 3px;
  overflow: hidden;
  font-size: 12px;
}
.mock-brand {
  font-weight: 700; color: var(--mauve); font-size: 16px;
  padding: 2px 6px 12px; letter-spacing: -0.02em;
}
.mock-brand .dot { color: var(--terra); }
.mock-search {
  height: 26px;
  background: white;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  margin-bottom: 10px;
  padding: 0 10px;
  display: flex; align-items: center;
  color: var(--muted); font-size: 11px;
}
.mock-nav-item {
  padding: 5px 9px;
  border-radius: 5px;
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: space-between;
  transition: background .2s, color .2s;
  font-size: 12px;
}
.mock-nav-item.active {
  background: var(--mauve-100);
  color: var(--mauve);
  font-weight: 500;
}
.mock-nav-item .count { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.mock-nav-item.active .count { color: var(--mauve); }

.mock-section-label {
  margin-top: 14px;
  padding: 0 6px 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.mock-matter {
  padding: 4px 9px;
  border-radius: 5px;
  color: var(--ink-soft);
  display: flex; align-items: center;
  font-size: 11px;
  gap: 6px;
  transition: background .2s, color .2s;
}
.mock-matter.active { background: var(--mauve-100); color: var(--mauve); font-weight: 500; }
.mock-matter .bullet {
  width: 6px; height: 6px; border-radius: 50%; background: var(--terra);
  flex-shrink: 0;
}
.mock-matter .bullet.grey { background: #cfc7c1; }
.mock-matter .bullet.green { background: #4a9b6e; }
.mock-matter .bullet.terra { background: var(--terra); }
.mock-matter .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-matter .due { font-size: 9px; color: var(--terra); font-family: var(--mono); }
.mock-matter.active .due { color: var(--mauve); }

/* MAIN PANE */
.mock-main {
  padding: 24px 28px 60px;
  overflow: hidden;
  position: relative;
}
.mock-view {
  animation: fadeIn .45s;
}

.mock-h {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.mock-h.matter { font-size: 22px; }
.mock-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.mock-sub b { color: var(--ink); font-weight: 600; }

.mock-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  font-family: var(--mono); font-size: 10px;
  color: var(--muted); letter-spacing: .1em; text-transform: uppercase;
}
.mock-breadcrumb .pill {
  background: var(--mauve-100); color: var(--mauve);
  padding: 2px 7px; border-radius: 4px; font-weight: 500;
}
.mock-meta {
  font-family: var(--mono); font-size: 10px;
  color: var(--muted); letter-spacing: .08em;
  margin-bottom: 18px;
}
.mock-meta .urgent { color: var(--terra); }

.mock-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.mock-eyebrow em { color: var(--mauve); font-style: normal; text-transform: none; letter-spacing: 0; }

.mock-card {
  background: white;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--terra);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: background .5s, border-left-color .5s, transform .5s;
}
.mock-card .body { flex: 1; }
.mock-card .body b { font-weight: 600; }
.mock-card .subtle { color: var(--muted); font-size: 11px; margin-top: 2px; }
.mock-card .due-badge {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--terra);
  letter-spacing: .1em;
  flex-shrink: 0;
  text-transform: uppercase;
  padding-top: 2px;
}
.mock-card.incoming {
  background: var(--mauve-50);
  border-left-color: var(--mauve);
  transform: translateX(-2px);
}

/* chronology rows */
.mock-chron { display: flex; flex-direction: column; gap: 10px; }
.chron-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.chron-date {
  color: var(--muted); font-family: var(--mono); font-size: 10px;
  letter-spacing: .04em;
  padding-top: 3px;
}
.chron-text {
  border-left: 2px solid var(--mauve-100);
  padding-left: 12px; padding-bottom: 4px;
  color: var(--ink);
}

/* COMPOSER */
.mock-composer {
  position: absolute;
  left: 24px; right: 24px; bottom: 16px;
  background: white;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  box-shadow: 0 4px 12px rgba(26,22,20,.04);
}
.mock-composer .composer-send {
  background: var(--mauve-100);
  color: var(--mauve);
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

/* FLOATING EMAIL - scene 1 */
.email-drop {
  position: absolute;
  top: 60px; right: 24px;
  width: 260px;
  background: white;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12px;
  box-shadow: 0 20px 44px rgba(26,22,20,.14);
  z-index: 10;
  opacity: 0;
  transform: translate(40px, -20px) rotate(4deg);
  transition: opacity .35s, transform .55s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.email-drop.show {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}
.email-drop .from {
  font-size: 10px; color: var(--muted); font-family: var(--mono);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px;
}
.email-drop .subj { font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--ink); }
.email-drop .body-t { color: var(--ink-soft); font-size: 12px; line-height: 1.4; }
.email-drop .filed-tag {
  margin-top: 10px;
  padding: 4px 9px;
  background: var(--mauve-100); color: var(--mauve);
  border-radius: 4px; font-size: 10px; font-family: var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
  display: inline-block; font-weight: 500;
}

/* DONNA KNOWS POPOVER - scene 3 */
.knows-pop {
  position: absolute;
  bottom: 76px; left: 208px;
  width: 280px;
  background: white;
  border: 1px solid var(--mauve);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12px;
  box-shadow: 0 20px 44px rgba(184,85,112,.24);
  z-index: 8;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s, transform .4s;
  pointer-events: none;
}
.knows-pop.show { opacity: 1; transform: translateY(0); }
.knows-pop .label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mauve); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
  font-weight: 500;
}
.knows-pop .label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mauve);
  animation: pulse-dot 1.6s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.knows-pop .text { color: var(--ink); line-height: 1.45; font-size: 13px; }
.knows-pop .cite { color: var(--muted); font-size: 10px; margin-top: 8px; font-family: var(--mono); letter-spacing: .06em; }

/* STAGE DOTS */
.stage-dots {
  position: absolute;
  bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 20;
}
.stage-dots .d {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(26,22,20,.14);
  transition: background .3s, width .3s;
}
.stage-dots .d.active { background: var(--mauve); width: 20px; border-radius: 3px; }

/* mockup keyframes */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ============ SECTIONS ============ */
.section {
  padding: 96px 0;
  border-top: 1px solid var(--hairline);
}
.section-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 20px;
  max-width: 20ch;
}
.section-title em { font-style: italic; color: var(--mauve); }
.section-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
  text-wrap: pretty;
  margin-bottom: 48px;
}

/* ============ DONNA KNOWS ============ */
.knows {
  background: var(--bg-warm);
  border-top: 1px solid var(--hairline);
  padding: 120px 0;
}

/* Intro block: full-width, above the diagram + features grid */
.knows-intro {
  max-width: 760px;
  margin: 0 auto 72px;
  text-align: center;
}
.knows-intro .section-eyebrow { margin-bottom: 14px; }
.knows-intro .section-title {
  max-width: 22ch;
  margin: 0 auto 20px;
  text-wrap: balance;
}
.knows-intro .section-lede {
  max-width: 46ch;
  margin: 0 auto;
}

/* Diagram left, features right */
.knows-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 1000px) {
  .knows-grid { grid-template-columns: 1fr; gap: 56px; }
}

.knows-diagram-wrap {
  position: sticky;
  top: 96px;
  align-self: start;
}
@media (max-width: 1000px) {
  .knows-diagram-wrap { position: static; }
}

.knows-diagram {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

/* Feature list - single column, sits beside the wheel */
.knows-features {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
}
.knows-feature {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: flex-start;
}
.knows-feature:last-child {
  border-bottom: 0;
  padding-bottom: 8px;
}
.knows-feature-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--mauve);
  padding-top: 4px;
  font-weight: 500;
}
.knows-feature-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
  text-wrap: balance;
}
.knows-feature-copy {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.knows-feature-copy p + p {
  margin-top: 10px;
}
.knows-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 180px; height: 180px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--hairline-strong);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  box-shadow:
    0 4px 24px rgba(184,85,112,.1),
    inset 0 0 0 8px rgba(184,85,112,.04);
  z-index: 3;
}
.knows-center .lg {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--mauve);
  letter-spacing: -0.02em;
  font-weight: 500;
}
.knows-center .lg .dot { color: var(--terra); }
.knows-center .sm {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-top: 6px;
}
.knows-orbit {
  position: absolute;
  inset: 0;
  border: 1px dashed var(--hairline-strong);
  border-radius: 50%;
}
.knows-orbit.inner { inset: 22%; opacity: .5; }
.knows-node {
  position: absolute;
  background: white;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 4px 11px 4px 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 3px 10px rgba(26,22,20,.06);
  display: flex; align-items: center; gap: 6px;
  z-index: 4;
  white-space: nowrap;
  opacity: 0;
  animation: node-fade-in .6s ease-out forwards, node-pulse 8s ease-in-out infinite;
}
.knows-node .icn {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--mauve-100);
  color: var(--mauve);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
  font-weight: 600;
}
@keyframes node-fade-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(26,22,20,.06); }
  50%      { box-shadow: 0 6px 18px rgba(184,85,112,.16); }
}

/* connecting lines from centre out to each node */
.knows-line {
  position: absolute; top: 50%; left: 50%;
  width: 44%; height: 1px;
  background: linear-gradient(90deg,
    rgba(184,85,112,.5) 0%,
    rgba(184,85,112,.15) 60%,
    transparent 100%);
  transform-origin: left center;
  z-index: 1;
}

/* right column list */
.knows-copy .row {
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: flex-start;
}
.knows-copy .row:first-of-type { border-top: 0; }
.knows-copy .row .num {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: .1em; padding-top: 4px;
}
.knows-copy .row h4 {
  font-family: var(--serif); font-weight: 500; font-size: 20px;
  color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em;
}
.knows-copy .row p {
  font-size: 15px; color: var(--ink-soft); line-height: 1.55;
}

/* ============ CASE MANAGEMENT DEEP-DIVE - HTML recreation ============ */
.cm-shell {
  margin-top: 40px;
  background: white;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(26,22,20,.14);
}
.cm-chrome {
  height: 32px;
  background: #f6f2f3;
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center;
  padding: 0 14px; gap: 6px;
}
.cm-chrome .light { width: 11px; height: 11px; border-radius: 50%; }
.cm-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 620px;
}
.cm-side {
  background: var(--bg-warm);
  border-right: 1px solid var(--hairline);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.cm-brand {
  font-weight: 700; color: var(--mauve); font-size: 20px;
  padding: 4px 8px 16px; letter-spacing: -0.02em;
}
.cm-brand .dot { color: var(--terra); }
.cm-nav-item {
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
}
.cm-nav-item span {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.cm-nav-item.active {
  background: var(--mauve-100);
  color: var(--mauve); font-weight: 500;
}
.cm-nav-item.active span { color: var(--mauve); }
.cm-side-label {
  margin: 18px 8px 6px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.cm-matter {
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: 12px;
  display: flex; align-items: center; gap: 8px;
}
.cm-matter.active { background: var(--mauve-100); color: var(--mauve); font-weight: 500; }
.cm-matter .bullet {
  width: 7px; height: 7px; border-radius: 50%; background: var(--terra);
  flex-shrink: 0;
}
.cm-matter .bullet.green { background: #4a9b6e; }

.cm-main {
  padding: 28px 32px;
  overflow: hidden;
}
.cm-breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px;
  color: var(--muted); letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 8px;
}
.cm-breadcrumb .pill {
  background: var(--mauve-100); color: var(--mauve);
  padding: 3px 8px; border-radius: 4px; font-weight: 500;
}
.cm-h {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.cm-meta {
  font-family: var(--mono); font-size: 11px;
  color: var(--muted); letter-spacing: .08em;
  margin-bottom: 24px;
}
.cm-meta .urgent { color: var(--terra); font-weight: 500; }

.cm-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cm-tabs::-webkit-scrollbar { display: none; }
.cm-tab {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s, border-color .2s;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
  font-weight: 500;
}
.cm-tab .count {
  background: var(--hairline);
  color: var(--muted);
  padding: 1px 6px; border-radius: 10px;
  font-size: 10px;
  font-family: var(--mono);
}
.cm-tab:hover { color: var(--ink-soft); }
.cm-tab.active {
  color: var(--mauve);
  border-bottom-color: var(--mauve);
}
.cm-tab.active .count { background: var(--mauve-100); color: var(--mauve); }

.cm-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 12px;
}
.cm-callout {
  background: var(--mauve);
  color: white;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: .1em;
  font-weight: 500;
}
.cm-callout.auto-callout { background: var(--terra); }

.cm-task {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: flex-start;
}
.cm-task.waiting { grid-template-columns: 1fr auto; }
.cm-check {
  width: 15px; height: 15px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: 3px;
  margin-top: 2px;
}
.cm-task-body { min-width: 0; }
.cm-task-title {
  font-size: 14px; color: var(--ink);
  line-height: 1.4;
  margin-bottom: 4px;
}
.cm-task-meta {
  font-size: 11px; color: var(--muted);
  font-family: var(--mono);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: .04em;
}
.cm-tag {
  background: var(--bg-warm);
  color: var(--mauve);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}
.cm-due {
  font-family: var(--mono); font-size: 11px;
  color: var(--terra);
  padding-top: 3px;
  letter-spacing: .06em;
  font-weight: 500;
}
.cm-add-btn {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  transition: background .2s, border-color .2s;
}
.cm-add-btn:hover {
  background: var(--mauve);
  color: white;
  border-color: var(--mauve);
}

/* ============ HOW IT WORKS ============ */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 48px;
}
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 32px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: white;
  display: flex; flex-direction: column;
  min-height: 320px;
}
.step .n {
  font-family: var(--serif);
  font-size: 44px;
  color: var(--mauve);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 24px;
}
.step h3 {
  font-family: var(--serif); font-weight: 500; font-size: 22px;
  color: var(--ink); margin-bottom: 10px; letter-spacing: -0.01em;
}
.step p { color: var(--ink-soft); font-size: 15px; }
.step .visual { margin-top: auto; padding-top: 24px; }

/* ============ MANIFESTO ============ */
.manifesto {
  background: var(--ink);
  color: white;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.manifesto::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 30%, rgba(184,85,112,.14), transparent 60%);
  pointer-events: none;
}
.manifesto-inner { position: relative; }
.manifesto .eyebrow { color: rgba(255,255,255,.5); margin-bottom: 24px; }
.manifesto h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-bottom: 40px;
}
.manifesto h2 em {
  font-style: italic;
  color: #e8a4b6;
}
.manifesto-body {
  max-width: 55ch;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
}
.manifesto-body p + p { margin-top: 20px; }
.manifesto-sig {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; gap: 16px;
}
.manifesto-sig .who {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: white;
}
.manifesto-sig .role {
  font-size: 13px; color: rgba(255,255,255,.5);
  font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase;
}

/* ============ FEATURE GRID ============ */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 48px;
}
@media (max-width: 800px) { .feat-grid { grid-template-columns: 1fr; } }
.feat {
  padding: 32px 28px;
  background: white;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 200px;
  transition: background .2s;
}
.feat:hover { background: var(--mauve-50); }
.feat .icn {
  width: 32px; height: 32px;
  color: var(--mauve);
}
.feat h4 {
  font-family: var(--serif); font-weight: 500; font-size: 20px;
  color: var(--ink); letter-spacing: -0.01em;
}
.feat p { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }

/* ============ FOUNDER STORY - centered, no portrait ============ */
.founder {
  background: var(--cream);
  padding: 120px 0;
}
.founder-inner-centered {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.founder-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 16px 0 40px;
  text-wrap: balance;
}
.founder-h em { font-style: italic; color: var(--mauve); }
.founder-quote {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
  margin-bottom: 40px;
  text-wrap: pretty;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.founder-body {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.7;
  text-align: left;
  max-width: 580px;
  margin: 0 auto;
}
.founder-body p + p { margin-top: 18px; }
.founder-signoff {
  margin-top: 48px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 16px;
}
.sig-line {
  width: 48px; height: 1px; background: var(--muted); opacity: .4;
}
.founder-signoff .n {
  font-family: var(--serif); font-weight: 500; font-size: 20px;
  color: var(--ink);
}
.founder-signoff .r {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ============ TESTIMONIALS ============ */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 900px) { .testimonials { grid-template-columns: 1fr; } }
.testi {
  padding: 32px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: white;
  display: flex; flex-direction: column; gap: 20px;
}
.testi-quote {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
  flex: 1;
}
.testi-who {
  display: flex; align-items: center; gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.testi-avi {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--mauve-100);
  color: var(--mauve);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.testi-who .n { font-weight: 500; font-size: 14px; }
.testi-who .r { font-size: 12px; color: var(--muted); }

/* ============ INTEGRATIONS ============ */
.integr-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 48px;
}
@media (max-width: 800px) { .integr-list { grid-template-columns: repeat(3, 1fr); } }
.integr {
  aspect-ratio: 2/1;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: white;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  transition: background .2s, border-color .2s;
}
.integr:hover { background: var(--bg-warm); border-color: var(--hairline-strong); }

/* ============ WAITLIST ============ */
.waitlist-cta {
  background: var(--mauve);
  color: white;
  padding: 120px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.waitlist-cta::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(188,113,39,.24), transparent 55%);
  pointer-events: none;
}
.waitlist-cta-inner { position: relative; max-width: 640px; margin: 0 auto; }
.waitlist-cta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  text-wrap: balance;
}
.waitlist-cta p {
  font-size: 18px; color: rgba(255,255,255,.82);
  margin-bottom: 32px;
  max-width: 46ch; margin-left: auto; margin-right: auto;
}
.waitlist-cta .waitlist {
  margin: 0 auto;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
}
.waitlist-cta .waitlist input { color: white; }
.waitlist-cta .waitlist input::placeholder { color: rgba(255,255,255,.55); }
.waitlist-cta .waitlist button {
  background: white; color: var(--mauve);
}
.waitlist-cta .waitlist button:hover { background: rgba(255,255,255,.9); }

/* ============ FAQ ============ */
.faq { max-width: 800px; margin: 48px auto 0; }
.faq-item {
  border-top: 1px solid var(--hairline);
  padding: 24px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  font-family: var(--serif); font-weight: 500; font-size: 20px;
  color: var(--ink);
  gap: 32px;
  width: 100%;
  text-align: left;
}
.faq-q .plus {
  width: 24px; height: 24px; flex-shrink: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--muted);
  transition: transform .3s;
}
.faq-item.open .plus { transform: rotate(45deg); background: var(--mauve); color: white; border-color: var(--mauve); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s, margin-top .35s;
  color: var(--ink-soft); font-size: 16px; line-height: 1.6;
}
.faq-item.open .faq-a { max-height: 400px; margin-top: 14px; }

/* ============ FOOTER ============ */
.footer {
  padding: 72px 0 40px;
  border-top: 1px solid var(--hairline);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand .nav-logo { font-size: 26px; }
.footer-brand p {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
  max-width: 32ch;
}
.footer-col h5 {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px;
  font-weight: 500;
}
.footer-col a {
  display: block; padding: 6px 0;
  color: var(--ink-soft); font-size: 14px;
}
.footer-col a:hover { color: var(--mauve); }
.footer-bar {
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--muted);
}
@media (max-width: 600px) { .footer-bar { flex-direction: column; gap: 12px; } }

/* ============ HERO V2 - DONNA, ALIVE (video + glass holograms) ============ */
.hero-v2 {
  padding: 0;
  position: relative;
  overflow: hidden;
}
/* Kill the container constraint inside the hero so video runs edge-to-edge */
.hero-v2 > .container {
  max-width: none;
  padding: 0;
}

/* Split-column composition - full-bleed on desktop, video overlaps under copy */
.hero-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0;
  align-items: stretch;
  min-height: min(88vh, 820px);
  max-height: 900px;
  position: relative;
}
/* Side-by-side + left-fade preserved at all widths.
   The 5fr/7fr split just tightens naturally on narrower screens. */
@media (max-width: 720px) {
  .hero-v2-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 440px; }
}
@media (max-width: 520px) {
  .hero-v2-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); min-height: 380px; }
}

/* COPY column - full-bleed hero, so pad to align with the 1200px
   container edge on wide screens, keep readable width on inner children */
.hero-v2-copy {
  max-width: none;
  position: relative;
  z-index: 2;
  padding: 48px 32px 48px max(48px, calc((100vw - 1200px) / 2 + 48px));
  align-self: center;
}
.hero-v2-copy > * {
  max-width: 520px;
}
.hero-v2-copy .hero-eyebrow { margin-bottom: 24px; }
.hero-v2-h1 {
  /* Stacked on two lines via <br>: "Less admin." over "More Lawyering." */
  /* max-width was too tight; italic "More Lawyering." was wrapping mid-line */
  max-width: none;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.02;
  margin-bottom: 22px;
}
.hero-v2-h1 br + em { white-space: nowrap; }
.hero-v2-sub {
  max-width: 44ch;
  margin-bottom: 32px;
}

/* VIDEO stage - extends leftward under the copy, fades out on that edge */
.hero-v2-stage {
  position: relative;
  align-self: stretch;
  /* pull left so the video underlaps the copy column */
  margin-left: -180px;
  z-index: 1;
}
@media (max-width: 720px) {
  .hero-v2-stage { margin-left: -100px; }
}
@media (max-width: 520px) {
  .hero-v2-stage { margin-left: -60px; }
}

.hero-v2-video {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
  /* Fade-out mask on the LEFT edge so the video dissolves into the copy */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.35) 12%,
    black 32%,
    black 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.35) 12%,
    black 32%,
    black 100%
  );
}
@media (max-width: 720px) {
  .hero-v2-video { min-height: 380px; }
}
@media (max-width: 520px) {
  .hero-v2-video { min-height: 340px; border-radius: 12px; }
}
.hero-v2-video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.hero-v2-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 60% 45%, transparent 45%, rgba(26,22,20,.32) 100%);
  pointer-events: none;
  z-index: 2;
}
/* an extra warm color-wash so the video ties to the mauve/cream palette */
.hero-v2-fade-mask {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.5) 0%, transparent 30%);
  pointer-events: none;
  mix-blend-mode: soft-light;
  z-index: 2;
}

/* Timeline pips */
.hero-v2-pips {
  position: absolute;
  bottom: 20px; right: 24px;
  display: flex; gap: 6px;
  z-index: 6;
}
.hero-v2-pips .pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: background .3s, width .3s;
  backdrop-filter: blur(4px);
}
.hero-v2-pips .pip.on { background: white; width: 22px; border-radius: 3px; }

/* ============ GLASS HOLOGRAMS - proper glassmorphism + 3D tilt ============ */

/* Outer wrapper carries the 3D transform */
.holo {
  position: absolute;
  width: 300px;
  max-width: 46%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* Establish 3D space and tilt slightly toward the viewer */
  perspective: 1000px;
  transform-style: preserve-3d;
  transition:
    opacity .45s cubic-bezier(.2,.7,.2,1),
    transform .55s cubic-bezier(.2,.7,.2,1),
    visibility 0s linear .45s;
}
.holo.show {
  visibility: visible;
  transition:
    opacity .45s cubic-bezier(.2,.7,.2,1),
    transform .55s cubic-bezier(.2,.7,.2,1),
    visibility 0s linear 0s;
}
.holo.wide { width: 340px; }

/* Inner element does the actual glass rendering + tilt */
.holo-glass-inner {
  position: relative;
  padding: 16px 18px;
  border-radius: 14px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  /* THE GLASS */
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,253,251,.28) 45%,
      rgba(255,255,255,.42) 100%);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  /* Multi-layer border to fake refracted edge lighting */
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    /* inner top highlight */
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.15),
    inset 1px 0 0 rgba(255,255,255,.35),
    /* soft outer glow */
    0 1px 2px rgba(255,255,255,.4),
    /* main depth shadow */
    0 20px 50px rgba(26,22,20,.35),
    0 8px 16px rgba(26,22,20,.18),
    /* colored ground shadow */
    0 40px 80px -20px rgba(184,85,112,.35);
}
.holo.accent-terra .holo-glass-inner {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.15),
    inset 1px 0 0 rgba(255,255,255,.35),
    0 1px 2px rgba(255,255,255,.4),
    0 20px 50px rgba(26,22,20,.35),
    0 8px 16px rgba(26,22,20,.18),
    0 40px 80px -20px rgba(188,113,39,.4);
}

/* Subtle colored inner glow at the bottom edge - reinforces the accent
   without the ugly white streak. */
.holo-glass-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .3;
  z-index: 0;
}
.holo.accent-mauve .holo-glass-inner::after {
  background: radial-gradient(ellipse at 30% 110%, rgba(184,85,112,.35), transparent 55%);
}
.holo.accent-terra .holo-glass-inner::after {
  background: radial-gradient(ellipse at 70% 110%, rgba(188,113,39,.35), transparent 55%);
}

/* ENTRY & DRIFT ANIMATION
   holos come in slightly rotated in 3D, then gently drift while visible */
.holo.holo-tr { transform: translate(20px, -10px) rotateY(-14deg) rotateX(4deg) scale(.94); }
.holo.holo-tl { transform: translate(-20px, -10px) rotateY(14deg) rotateX(4deg) scale(.94); }
.holo.holo-br { transform: translate(20px, 10px) rotateY(-14deg) rotateX(-3deg) scale(.94); }
.holo.holo-bl { transform: translate(-20px, 10px) rotateY(14deg) rotateX(-3deg) scale(.94); }

.holo.holo-tr.show { transform: translate(0, 0) rotateY(-8deg) rotateX(2deg) scale(1); opacity: 1; }
.holo.holo-tl.show { transform: translate(0, 0) rotateY(8deg) rotateX(2deg) scale(1); opacity: 1; }
.holo.holo-br.show { transform: translate(0, 0) rotateY(-8deg) rotateX(-2deg) scale(1); opacity: 1; }
.holo.holo-bl.show { transform: translate(0, 0) rotateY(8deg) rotateX(-2deg) scale(1); opacity: 1; }
/* Holograms hold still while visible. Only motion is the entry/exit fade. */

/* LABEL & CONTENT STYLES */
.holo-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
}
.holo.accent-mauve .holo-label { color: var(--mauve); }
.holo.accent-terra .holo-label { color: var(--terra); }

.holo-dot {
  width: 7px; height: 7px; border-radius: 50%;
  animation: pulse-dot 1.6s infinite;
  box-shadow: 0 0 8px currentColor;
}
.holo.accent-mauve .holo-dot { background: var(--mauve); color: var(--mauve); }
.holo.accent-terra .holo-dot { background: var(--terra); color: var(--terra); }

.holo-body { color: var(--ink); position: relative; z-index: 1; }
.holo-body b { font-weight: 600; }

/* content types */
.holo-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 10px;
  border-left: 2px solid var(--mauve);
}
.holo-sub {
  color: var(--ink-soft);
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.45;
}
.holo-cite {
  color: var(--muted);
  font-size: 10px;
  margin-top: 10px;
  font-family: var(--mono);
  letter-spacing: .06em;
}
.holo-tag {
  margin-top: 10px;
  padding: 4px 10px;
  background: rgba(184,85,112,.16);
  color: var(--mauve);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
}
.holo-tag.terra {
  background: rgba(188,113,39,.18);
  color: var(--terra);
}

/* 1. "Everything, one file" - chips */
.holo-inputs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.holo-inputs .chip {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(184,85,112,.2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
  font-weight: 500;
}

/* 2. "Donna's already done it" - tasklist that ticks itself off */
.holo-tasklist {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 2px;
}
.tl-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  transition: color .3s;
}
.tl-check {
  width: 14px; height: 14px;
  border: 1.5px solid var(--muted);
  border-radius: 3px;
  flex-shrink: 0;
  transition: background .35s, border-color .35s;
  position: relative;
}
.tl-item.done { color: var(--ink); }
.tl-item.done .tl-check {
  background: var(--mauve);
  border-color: var(--mauve);
}
.tl-item.done .tl-check::after {
  content: '';
  position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 8px;
  border: solid white;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
  animation: check-in .3s;
}
.tl-item.and-more {
  font-style: italic;
  color: var(--muted);
  font-size: 12px;
  padding-top: 2px;
}
.tl-item.and-more .tl-check.faint {
  border-style: dashed;
  border-color: var(--muted);
  opacity: .6;
}
.tl-item.and-more.done .tl-check.faint {
  background: transparent;
  border-color: var(--muted);
}
.tl-item.and-more.done .tl-check.faint::after {
  display: none;
}
@keyframes check-in {
  from { opacity: 0; transform: rotate(45deg) scale(.5); }
  to { opacity: 1; transform: rotate(45deg) scale(1); }
}

/* 3. "You do the lawyering" - substantive work grid */
.holo-substantive {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 10px;
}
.sub-item {
  padding: 8px 10px;
  background: rgba(188,113,39,.1);
  border: 1px solid rgba(188,113,39,.22);
  border-radius: 6px;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  text-align: center;
  font-weight: 500;
}

/* 4. "Nothing to hold in your head" - mental load list */
.holo-mental {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  margin-bottom: 8px;
}
.mental-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px;
  background: rgba(255,255,255,.4);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink);
}
.mental-ok {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mauve);
  letter-spacing: .04em;
  font-weight: 600;
}

.tabular { font-variant-numeric: tabular-nums; }

/* CORNER POSITIONS - inside video stage, well clear of Donna's face */
.holo-tl { top: 32px; left: 32px; }
.holo-tr { top: 32px; right: 32px; }
.holo-bl { bottom: 56px; left: 32px; }
.holo-br { bottom: 56px; right: 32px; }

@media (max-width: 1200px) {
  .holo { width: 260px; }
  .holo.wide { width: 300px; }
}
@media (max-width: 960px) {
  .hero-v2-copy { max-width: 100%; }
  .holo { width: 240px; font-size: 12px; }
  .holo.wide { width: 280px; }
  .holo-glass-inner { padding: 12px 14px; }
  .holo-tl, .holo-tr { top: 18px; }
  .holo-bl, .holo-br { bottom: 32px; }
  .holo-tl, .holo-bl { left: 18px; }
  .holo-tr, .holo-br { right: 18px; }
}
@media (max-width: 600px) {
  .holo { width: 200px; max-width: 60%; }
  .holo.wide { width: 220px; }
}

/* ============ HERO V3 - EDITORIAL ============ */
.hero-v3 {
  background: var(--cream);
  padding: 120px 0 100px;
}
.hero-v3 .hero-grid { grid-template-columns: 1fr; text-align: left; gap: 48px; }
.hero-v3 .hero-h1 {
  font-size: clamp(60px, 9vw, 128px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.hero-v3 .hero-sub {
  font-size: 22px;
  max-width: 52ch;
}
.hero-v3 .hero-inline {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: end;
}
@media (max-width: 900px) { .hero-v3 .hero-inline { grid-template-columns: 1fr; } }
.hero-v3 .mockup-wrap {
  aspect-ratio: 5/4;
  transform: rotate(-1.5deg);
}

/* ============ CPR 2.8 SECTION ============ */
.cpr-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 24px;
}
@media (max-width: 960px) {
  .cpr-grid { grid-template-columns: 1fr; gap: 48px; }
}
.cpr-prose p {
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink-soft);
}
.cpr-prose p + p { margin-top: 16px; }
.cpr-prose em {
  font-style: italic;
  color: var(--mauve);
  font-weight: 500;
}
.cpr-rules {
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: #fff;
  padding: 20px 22px 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(26,22,20,.02);
}
.cpr-rules-cap {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--hairline-strong);
  font-weight: 500;
}
.cpr-rules-head {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr auto;
  gap: 16px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 8px;
}
.cpr-rules-row {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr auto;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.cpr-rules-row:last-of-type { border-bottom: 0; }
.cpr-rules-name {
  color: var(--ink);
  font-weight: 500;
}
.cpr-rules-auth {
  color: var(--mauve);
  font-size: 12px;
}
.cpr-rules-days {
  color: var(--ink-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cpr-rules-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline-strong);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.cpr-rules-foot span {
  color: var(--terra);
  font-family: var(--mono);
  margin-right: 4px;
  font-weight: 500;
}

/* ============ REFUSE / HONEST LIMITS LIST ============ */
.refuse-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  margin-top: 8px;
}
@media (max-width: 780px) {
  .refuse-list { grid-template-columns: 1fr; border-left: 0; }
}
.refuse-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding: 24px 28px 26px 20px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  align-items: flex-start;
}
@media (max-width: 780px) {
  .refuse-item { border-right: 0; padding: 22px 4px; }
}
.refuse-mark {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--mauve);
  font-weight: 400;
  padding-top: 2px;
  text-align: center;
}
.refuse-mark.limits-mark {
  color: var(--terra);
  font-size: 26px;
  padding-top: 0;
}
.refuse-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.refuse-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.limits-list .refuse-title { color: var(--ink); }

/* ============ THESIS CODA ============ */
.thesis {
  padding: 120px 0 100px;
  background: var(--ink);
  color: #f7f2ec;
  position: relative;
  overflow: hidden;
}
.thesis::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(184,85,112,.18), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(188,113,39,.10), transparent 60%);
  pointer-events: none;
}
.thesis-inner {
  position: relative;
  max-width: 880px;
  text-align: left;
}
.thesis-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247,242,236,.5);
  margin-bottom: 28px;
}
.thesis-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #f7f2ec;
  text-wrap: balance;
  margin-bottom: 36px;
  max-width: 24ch;
}
.thesis-lede em {
  font-style: italic;
  color: #e8a4b8;
  font-weight: 400;
}
.thesis-sub {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(247,242,236,.78);
  max-width: 58ch;
}
.thesis-sub + .thesis-sub { margin-top: 14px; }
.thesis-sub-2 {
  color: rgba(247,242,236,.6);
  font-style: italic;
  font-family: var(--serif);
  font-size: 19px;
  padding-top: 14px;
  border-top: 1px solid rgba(247,242,236,.15);
  margin-top: 24px !important;
  max-width: 52ch;
}

/* Notices/Precedents lean on .knows-features (already styled).
   Give them a slightly narrower feature-copy column so the paragraphs
   don't stretch full-width when there's no diagram beside them. */
.notices .knows-features,
.precedents .knows-features {
  max-width: 820px;
}
.notices .knows-feature-copy,
.precedents .knows-feature-copy {
  max-width: 64ch;
}


/* Hero copy tightens on narrower screens; layout stays side-by-side */
@media (max-width: 720px) {
  .hero-v2-copy { padding-right: 6px; }
  .hero-v2-h1 { font-size: clamp(30px, 6.4vw, 44px); }
  .hero-v2-sub { font-size: 15px; margin-bottom: 20px; }
  .hero-v2-copy .hero-eyebrow { margin-bottom: 16px; font-size: 10px; }
  .hero-v2-copy .waitlist { flex-direction: column; align-items: stretch; }
  .hero-v2-copy .waitlist input,
  .hero-v2-copy .waitlist button { width: 100%; }
  .hero-microcopy { font-size: 11px; gap: 6px 10px; flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .hero-v2-h1 { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.02; }
  .hero-v2-sub { font-size: 14px; }
}

/* ============ COMPRESSED HOME SECTIONS ============ */
/* Wrapper for compact sections. Same rhythm as .section, tighter padding. */
.section.short { padding: 88px 0; }
.short-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .short-list { grid-template-columns: 1fr; gap: 24px; }
}
.short-item {
  padding: 0;
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
}
.short-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}
.short-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* Compact "does not" list for Refuses summary */
.refuse-short {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
}
@media (max-width: 780px) {
  .refuse-short { grid-template-columns: 1fr; }
}
.refuse-short li {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 12px;
  letter-spacing: -0.005em;
}
.refuse-x {
  color: var(--mauve);
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}

/* See-more link - pulls the eye without shouting */
.see-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mauve);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--mauve);
  transition: gap .2s, color .2s;
}
.see-more:hover { gap: 14px; color: var(--mauve-600); border-color: var(--mauve-600); }
.see-more span { font-family: var(--serif); font-size: 16px; line-height: 1; }

/* Detail-page back-link (rendered on Full sections when routed to) */
.back-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 32px;
  padding: 8px 0;
}
.back-home:hover { color: var(--mauve); }
.back-home span { font-family: var(--serif); font-size: 16px; }

/* ============================================================
   LONGFORM DETAIL PAGES
   A magazine-style essay layout used by every detail route.
   Deliberately NOT a feature grid - reads top to bottom.
   ============================================================ */
.longform {
  padding: 40px 0 120px;
  background: var(--bg);
}
.longform-inner {
  max-width: 780px;
}
.longform-inner .back-home { margin-bottom: 48px; }

/* --- HERO --- */
.longform-hero {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 44px;
  margin-bottom: 44px;
}
.longform-hero .section-eyebrow {
  margin-bottom: 22px;
  font-size: 11px;
}
.longform-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 28px;
  max-width: 20ch;
}
.longform-title em {
  font-style: italic;
  color: var(--mauve);
  font-weight: 400;
}
.longform-standfirst {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 40ch;
  margin: 0;
  text-wrap: pretty;
}

/* --- BODY --- */
.longform-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 640px;
}
.longform-body p { margin: 0 0 22px; }
.longform-body p em { color: var(--mauve); font-style: italic; }
.longform-body strong,
.longform-body b { font-weight: 600; color: var(--ink); }

.longform-h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 44px 0 16px;
  text-wrap: balance;
  position: relative;
  padding-left: 0;
}
.longform-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--mauve);
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* First H3 after standfirst has more air above */
.longform-body > .longform-h3:first-child { margin-top: 8px; }

/* --- CALLOUT (pull quote) --- */
.longform-callout {
  border-top: 1px solid var(--mauve);
  border-bottom: 1px solid var(--mauve);
  padding: 32px 0;
  margin: 56px 0;
  max-width: 640px;
}
.longform-callout-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--mauve);
  margin: 0 0 12px;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
.longform-callout-sub {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}

/* --- VISUAL MOCK (an aside - email, deadline chain, etc.) --- */
.longform-mock {
  margin: 56px 0;
  padding: 0;
  max-width: 640px;
}
.longform-mock-cap {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* Morning email mock */
.mail {
  background: #fff;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px -20px rgba(26,22,20,.18);
}
.mail-head {
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  align-items: baseline;
}
.mail-from {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mauve);
}
.mail-when {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}
.mail-subj {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 500;
  grid-column: 1;
}
.mail-body {
  padding: 20px 22px 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.mail-body p { margin: 0 0 14px; }
.mail-body p:last-child { margin: 0; }
.mail-body b {
  color: var(--mauve);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}
.mail-body em { font-style: italic; color: var(--ink); font-weight: 500; }
.mail-quiet {
  color: var(--muted);
  font-style: italic;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline-strong);
}

/* Deadline chain mock (CPR) */
.chain {
  background: var(--bg-warm);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 24px 26px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
}
.chain-head {
  color: var(--mauve);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--hairline-strong);
}
.chain-line { display: block; padding: 3px 0; color: var(--ink-soft); }
.chain-line .k { color: var(--mauve); margin-right: 8px; }
.chain-line b { color: var(--ink); font-weight: 500; }

/* Precedent example */
.pre-mock {
  background: #fff;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 26px 28px;
}
.pre-mock-cap {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 14px;
}
.pre-mock-name {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 6px;
}
.pre-mock-cite {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 18px;
}
.pre-mock-field {
  border-top: 1px dashed var(--hairline-strong);
  padding-top: 14px;
  margin-top: 14px;
}
.pre-mock-field-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.pre-mock-field-body {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.pre-mock-field-body em { color: var(--mauve); font-style: italic; }

/* --- RELATED READS --- */
.longform-related {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
  max-width: 640px;
}
.longform-related-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.longform-related-link {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  transition: color .2s, padding-left .2s;
}
.longform-related-link:last-child { border-bottom: 0; }
.longform-related-link:hover {
  color: var(--mauve);
  padding-left: 6px;
}
.longform-related-link .arr {
  font-family: var(--mono);
  color: var(--mauve);
  margin-right: 14px;
  font-size: 16px;
}

/* Refuses/Limits full: 12 items as case studies, not a grid */
.cases {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.case-item {
  padding: 32px 0;
  border-top: 1px solid var(--hairline);
}
.case-item:last-child { border-bottom: 1px solid var(--hairline); }
.case-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--mauve);
  margin-bottom: 10px;
  display: block;
}
.case-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.case-body {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 60ch;
}
.case-body p { margin: 0 0 12px; }
.case-body p:last-child { margin: 0; }
.case-body em { color: var(--mauve); font-style: italic; }

/* Full-page rules table */
.rules-full {
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 24px 26px;
  background: #fff;
  margin: 32px 0;
  font-family: var(--mono);
  font-size: 13px;
}
.rules-full-cap {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--hairline-strong);
  font-weight: 500;
}
.rules-full-row {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr auto;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.rules-full-row:last-child { border-bottom: 0; }
.rules-full-row .r-name { color: var(--ink); font-weight: 500; }
.rules-full-row .r-auth { color: var(--mauve); font-size: 12px; }
.rules-full-row .r-days { color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.rules-full-note {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline-strong);
}

/* ============ INTEGRATIONS: real logos in a contain grid ============ */
.integrations .section-title { max-width: 22ch; }
.integ-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 44px 24px;
  margin-top: 24px;
  align-items: start;
}
@media (max-width: 1080px) { .integ-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .integ-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 440px)  { .integ-grid { grid-template-columns: repeat(2, 1fr); } }

.integ {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  transition: transform .2s;
}
.integ:hover { transform: translateY(-2px); }
.integ-dim   { opacity: .55; }
.integ-dim:hover { opacity: .8; }

/* Fixed-height contain box lets a mix of square icons and wide wordmarks
   sit in the same grid without any one logo swallowing the row. */
.integ-badge {
  width: 96px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.integ-badge img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.integ-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.integ-use {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .04em;
  line-height: 1.4;
  max-width: 18ch;
}

.integ-note {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  color: var(--muted);
  max-width: 60ch;
  font-style: italic;
}

/* ============ WAITLIST FORM: two-stage expand ============ */
/* Stage 2: notes panel (light context, e.g. hero) */
.waitlist-panel {
  max-width: 480px;
  padding: 22px 22px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 32px -18px rgba(26,22,20,.16);
  animation: waitlist-in .22s ease-out both;
}
.waitlist-panel-head { margin-bottom: 14px; }
.waitlist-panel-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
  text-wrap: balance;
}
.waitlist-panel-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 42ch;
}
.waitlist-notes-field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: #fff;
  resize: vertical;
  min-height: 96px;
  transition: border-color .15s;
}
.waitlist-notes-field:focus {
  outline: none;
  border-color: var(--mauve);
  box-shadow: 0 0 0 3px rgba(184, 85, 112, 0.14);
}
.waitlist-notes-field::placeholder { color: var(--muted); opacity: .75; }
.waitlist-panel-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}
.waitlist-skip {
  background: transparent;
  color: var(--muted);
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 12px;
  cursor: pointer;
  border-radius: 6px;
}
.waitlist-skip:hover { color: var(--ink); background: rgba(26,22,20,.04); }
.waitlist-send {
  background: var(--mauve);
  color: #fff;
  border: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  margin-left: auto;
  transition: background .15s;
}
.waitlist-send:hover { background: var(--mauve-600); }
.waitlist-panel-email {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.waitlist-panel-email b { color: var(--ink); font-weight: 500; }

/* Dark context (bottom CTA on ink background) */
.waitlist-panel.on-dark {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  box-shadow: none;
}
.waitlist-panel.on-dark .waitlist-panel-title { color: #f7f2ec; }
.waitlist-panel.on-dark .waitlist-panel-sub { color: rgba(247,242,236,0.6); }
.waitlist-panel.on-dark .waitlist-notes-field {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  color: #f7f2ec;
}
.waitlist-panel.on-dark .waitlist-notes-field::placeholder { color: rgba(247,242,236,0.4); }
.waitlist-panel.on-dark .waitlist-notes-field:focus {
  border-color: #e8a4b8;
  box-shadow: 0 0 0 3px rgba(232, 164, 184, 0.18);
}
.waitlist-panel.on-dark .waitlist-skip { color: rgba(247,242,236,0.55); }
.waitlist-panel.on-dark .waitlist-skip:hover { color: #f7f2ec; background: rgba(255,255,255,0.06); }
.waitlist-panel.on-dark .waitlist-panel-email { color: rgba(247,242,236,0.5); border-top-color: rgba(255,255,255,0.1); }
.waitlist-panel.on-dark .waitlist-panel-email b { color: #f7f2ec; }

/* Stage 3: done confirmation */
.waitlist-done {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(184, 85, 112, 0.08);
  border: 1px solid rgba(184, 85, 112, 0.25);
  border-radius: 10px;
  max-width: 420px;
  animation: waitlist-in .22s ease-out both;
}
.waitlist-check {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--mauve);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.waitlist-done-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.waitlist-done-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.waitlist-done.on-dark {
  background: rgba(232, 164, 184, 0.1);
  border-color: rgba(232, 164, 184, 0.24);
}
.waitlist-done.on-dark .waitlist-done-title { color: #f7f2ec; }
.waitlist-done.on-dark .waitlist-done-sub { color: rgba(247,242,236,0.65); }
.waitlist-done.on-dark .waitlist-check { background: #e8a4b8; color: var(--ink); }

@keyframes waitlist-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ MOBILE OVERRIDES ============
   Below 600px: video fills the whole hero and copy sits over it.
   Everything in one composed box, closer to the desktop feel than the
   stacked v3. Dark gradient at the bottom keeps text legible. Nav
   floats transparent on top. Holograms live in the top corners so
   they never fight the copy. Body sections and nav collapse as before. */

@media (max-width: 600px) {

  /* --- HERO SHELL: full-bleed video-backed box --- */
  .hero-v2 {
    padding: 0;
    overflow: hidden;
    position: relative;
    background: var(--ink);
  }
  .hero-v2 .container {
    padding: 0;
    max-width: 100%;
  }
  .hero-v2-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    min-height: 100dvh;
    max-height: 820px;
    position: relative;
  }

  /* Glass nav bar. Frosted rather than fully transparent so holograms
     don't clash with the logo on scroll-in / video motion. */
  .nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    background: rgba(26, 22, 20, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 12px 0;
  }
  .nav-links { display: none; } /* full menu moves into the overlay */
  .nav-logo { color: #fff; font-size: 20px; }
  .nav-logo .dot { color: var(--terra); }
  .nav-cta {
    padding: 8px 14px;
    font-size: 13px;
    background: rgba(255,255,255,0.14);
    color: #fff;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
  }
  .nav-cta:hover { background: var(--mauve); border-color: var(--mauve); }

  /* Video: absolute, fills the whole hero.
     Bias upward and scale down slightly so more of Donna fits in-frame. */
  .hero-v2-stage {
    order: unset;
    margin-left: 0;
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .hero-v2-video {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* cover so the video fills the whole hero and copy sits over it
     (v5 layout). Video is 16:9 landscape and the phone is portrait,
     so sides get cropped by cover. Transform biases upward toward
     Donna's face - object-position Y is a no-op here because there
     is no vertical overflow to bias into. */
  .hero-v2-video > video {
    object-fit: cover;
    object-position: center;
    /* Zoom in and pull up so the face is centered in the visible band.
       Cover crops the sides (16:9 in portrait) - that's unavoidable
       without a portrait source. The zoom + translate creates vertical
       overflow so we can bias toward the face. */
    transform: scale(1.22) translateY(-11%);
    transform-origin: center top;
  }

  /* Gradient darkens the bottom half so the copy overlay reads
     against the video. Top stays light so Donna is clearly visible. */
  .hero-v2-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0.25) 0%,
        rgba(0,0,0,0.08) 22%,
        rgba(0,0,0,0.08) 42%,
        rgba(0,0,0,0.55) 68%,
        rgba(26,22,20,0.88) 92%,
        rgba(26,22,20,0.96) 100%);
    z-index: 5;
    pointer-events: none;
  }
  /* Kill the existing vignette on mobile, gradient handles it */
  .hero-v2-vignette, .hero-v2-fade-mask { display: none; }

  /* Copy: bottom-anchored, white on dark */
  .hero-v2-copy {
    order: unset;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 24px 22px 28px;
    z-index: 8;
    max-width: 100%;
    align-self: stretch;
    margin-top: 0;
  }
  /* Eyebrow becomes a legible glass pill on video */
  .hero-v2-copy .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f7f2ec;
    background: rgba(26,22,20,0.5);
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 16px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }
  .hero-v2-copy .hero-eyebrow .pulse { background: #e8a4b8; }
  .hero-v2-h1 {
    color: #f7f2ec;
    font-size: clamp(30px, 8.4vw, 44px);
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
  }
  .hero-v2-h1 em { color: #e8a4b8; }
  .hero-v2-sub {
    color: rgba(247,242,236,0.9);
    font-size: 15px;
    margin-bottom: 18px;
    text-shadow: 0 1px 12px rgba(0,0,0,0.5);
  }

  /* Waitlist form: darker glass so placeholder + text are properly legible */
  .hero-v2-copy .waitlist {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .hero-v2-copy .waitlist input {
    width: 100%;
    background: rgba(26,22,20,0.55);
    border-color: rgba(255,255,255,0.3);
    color: #f7f2ec;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 15px;
    padding: 13px 16px;
  }
  .hero-v2-copy .waitlist input::placeholder {
    color: rgba(247,242,236,0.78);
  }
  .hero-v2-copy .waitlist button { width: 100%; }

  .hero-v2-copy .hero-microcopy {
    color: rgba(247,242,236,0.72);
    font-size: 11px;
    gap: 6px 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  }
  .hero-v2-copy .hero-microcopy .dot-sep { color: rgba(247,242,236,0.35); }

  /* Holograms: keep visible, top corners only (bottom would fight copy) */
  .holo, .hero-v2-pips { display: block; z-index: 6; }
  .holo {
    min-width: 0;
    max-width: 168px;
    padding: 8px 10px;
    font-size: 10.5px;
    line-height: 1.35;
  }
  .holo.wide { width: 168px; }
  .holo-label {
    font-size: 8.5px;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
  }
  .holo-body { font-size: 10.5px; }
  .holo-sub { font-size: 9.5px; margin-top: 4px; }
  .holo-inputs .chip { font-size: 9px; padding: 2px 6px; }

  /* Top corners tucked into the video band, clear of the glass nav */
  .holo-tl { top: 88px; left: 8px; }
  .holo-tr { top: 88px; right: 8px; }
  .holo-bl { display: none; }
  .holo-br { display: none; }
  .hero-v2-pips { bottom: 14px; right: 14px; top: auto; z-index: 9; }

  /* --- BELOW-THE-FOLD SECTIONS: same as before --- */
  .container { padding: 0 20px; }
  .section, .section.short { padding: 56px 0; }
  .section-title { font-size: clamp(28px, 7vw, 38px); max-width: 100%; }
  .section-lede { font-size: 16px; }

  .cm-side { display: none; }
  .cm-body { grid-template-columns: 1fr; }

  .integ-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }

  .cpr-grid { grid-template-columns: 1fr; gap: 32px; }
  .refuse-list { grid-template-columns: 1fr; border-left: 0; }
  .refuse-item { border-right: 0; padding: 22px 4px; }
}

/* Extra-narrow (iPhone SE and similar, 375px and below): shrink type,
   tighten holograms, ensure copy still breathes at the bottom. */
@media (max-width: 400px) {
  .container { padding: 0 16px; }
  .hero-v2-grid { min-height: 100dvh; max-height: 720px; }
  .holo { max-width: 148px; padding: 7px 9px; font-size: 10px; }
  .holo.wide { width: 148px; }
  .hero-v2-h1 { font-size: clamp(26px, 8vw, 34px); }
  .hero-v2-sub { font-size: 14px; margin-bottom: 14px; }
  .hero-v2-copy { padding: 20px 18px 24px; }
  .section-title { font-size: clamp(24px, 7vw, 32px); }
  .integ-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .integ-badge { width: 76px; height: 52px; }
  .knows-features .knows-feature { grid-template-columns: 28px 1fr; gap: 14px; }
}

/* ============ MOBILE MENU: hamburger + fullscreen overlay ============ */

/* Hamburger button - hidden on desktop, shown at <=600px */
.nav-menu-btn {
  display: none;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  transition: background .15s;
}
.nav-menu-btn:hover { background: rgba(255,255,255,0.22); }
.nav-menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: #f7f2ec;
  border-radius: 2px;
}
@media (max-width: 600px) {
  .nav-menu-btn { display: inline-flex; }
}

/* Fullscreen overlay menu */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(26, 22, 20, 0.97);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: flex;
  flex-direction: column;
  padding: 22px 24px 28px;
  animation: nav-overlay-in .22s ease-out both;
}
@keyframes nav-overlay-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-overlay-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: #f7f2ec;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background .15s;
}
.nav-overlay-close:hover { background: rgba(255,255,255,0.08); }
.nav-overlay-brand {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: #f7f2ec;
  letter-spacing: -0.01em;
}
.nav-overlay-brand .dot { color: var(--terra); }
.nav-overlay-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-bottom: 24px;
}
.nav-overlay-links a {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 8vw, 40px);
  color: #f7f2ec;
  text-decoration: none;
  padding: 14px 0;
  letter-spacing: -0.015em;
  line-height: 1.15;
  border-bottom: 1px solid rgba(247,242,236,0.08);
  transition: color .15s, padding-left .15s;
}
.nav-overlay-links a:hover,
.nav-overlay-links a:active { color: #e8a4b8; padding-left: 6px; }
.nav-overlay-cta {
  background: var(--mauve);
  color: #fff;
  padding: 16px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  transition: background .15s;
}
.nav-overlay-cta:hover { background: var(--mauve-600); }