/* Celestine Builder — styles (2026-10-25). Site tokens and components mirror celestine-ai.com. */
:root {
  --cream-warm: #F7F3EB;
  --ivory: #FCFAF6;
  --mist: #DDEAF2;
  --dusty: #C8DCE8;
  --pale-bg: #E9F0F2;
  --clay: #A86A63;
  --clay-btn: #A2615A;
  --clay-btn-hover: #8B4F49;
  --clay-text: #8B4F49;
  --clay-soft: #F1E7E4;
  --ink-warm: #302D2A;
  --slate-warm: #5A554F;
  --muted-warm: #6B6560;
  --line-warm: #E7E0D6;
  --danger: #8C3A3F;
  --danger-bg: #F6EDEA;
  --display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --display-w: 500;
  --display-track: -0.032em;
  --display-track-sm: -0.016em;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--cream-warm); color: var(--ink-warm); line-height: 1.5; overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--clay-btn); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ivory); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-warm); }
.skip-link:focus { top: 12px; }

/* Nav — same as celestine-ai.com */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 40px);
  padding: 12px clamp(16px, 4vw, 56px);
  background: rgba(252,250,246,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-warm);
}
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo-full { height: 40px; width: auto; max-width: 240px; object-fit: contain; display: block; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); color: var(--slate-warm); font-size: 14.5px; font-weight: 500; }
.nav-links a:hover { color: var(--clay-btn); }
.nav-links a[aria-current="page"] { color: var(--clay-text); font-weight: 600; }
.nav-ctas { display: flex; gap: 10px; }
.nav-ctas { align-items: center; }
.nav-find { font-size: 13.5px; font-weight: 500; color: var(--slate-warm); text-decoration: underline; text-decoration-color: rgba(48,45,42,.22); text-underline-offset: 3px; padding: 8px 4px; white-space: nowrap; }
.nav-find:hover { color: var(--clay-btn); text-decoration-color: currentColor; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-align: center;
  transition: transform .2s cubic-bezier(.22,.61,.36,1), background .18s ease, border-color .18s ease, box-shadow .24s ease;
}
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.btn-clay { background: var(--clay-btn); color: #FFFFFF; box-shadow: 0 8px 22px rgba(138,79,73,.20); }
.btn-clay:hover { background: var(--clay-btn-hover); }
.btn-quiet { background: transparent; color: var(--ink-warm); border-color: rgba(48,45,42,.18); font-weight: 500; }
.btn-quiet:hover { border-color: rgba(169,101,89,.45); background: rgba(252,250,246,.7); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }
.link-btn { background: none; border: 0; color: var(--clay-text); font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 4px 0; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 9vh, 96px) clamp(18px, 4vw, 56px) clamp(40px, 7vh, 72px); }
/* Same hero wash as celestine-ai.com */
.hero::before {
  content: ""; position: absolute; inset: -16%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(104% 100% at 16% 46%, #FBF7F0 0%, rgba(250,246,239,.62) 32%, rgba(248,244,237,.19) 60%, rgba(247,243,235,0) 85%),
    radial-gradient(70% 58% at 3% 93%, rgba(168,106,99,.17) 0%, rgba(168,106,99,.06) 44%, rgba(247,243,235,0) 76%),
    radial-gradient(86% 84% at 85% 14%, #C8DCE8 0%, rgba(200,220,232,.88) 24%, rgba(221,234,242,.55) 50%, rgba(233,240,242,.24) 72%, rgba(247,243,235,0) 89%),
    radial-gradient(68% 74% at 103% 76%, rgba(200,220,232,.72) 0%, rgba(221,234,242,.32) 46%, rgba(247,243,235,0) 81%),
    radial-gradient(96% 64% at 56% 104%, rgba(233,240,242,.69) 0%, rgba(233,240,242,.25) 44%, rgba(247,243,235,0) 76%);
  filter: blur(66px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 89%);
  mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 89%);
  animation: hero-drift 44s ease-in-out infinite alternate;
}
.hero::after, .sec-wash::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes hero-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.5%, 1%, 0) scale(1.03); }
  100% { transform: translate3d(1.3%, -0.8%, 0) scale(1.012); }
}

/* Same section washes as celestine-ai.com (blue mist + warm clay) */
.sec-wash { position: relative; overflow-x: clip; }
.sec-wash::before { content: ""; position: absolute; inset: -10% -12%; z-index: 0; pointer-events: none; }
.sec-wash > * { position: relative; z-index: 1; }
.sec-mist::before {
  background:
    radial-gradient(118% 46% at 84% 40%, rgba(200,220,232,.86) 0%, rgba(206,225,235,.66) 20%, rgba(221,234,242,.46) 40%, rgba(228,237,241,.28) 58%, rgba(238,241,239,.13) 76%, rgba(247,243,235,0) 96%),
    radial-gradient(128% 44% at 8% 64%, rgba(233,240,242,.68) 0%, rgba(234,240,242,.40) 28%, rgba(239,242,240,.20) 52%, rgba(244,243,238,.07) 74%, rgba(247,243,235,0) 94%);
}
.sec-warm::before {
  background:
    radial-gradient(108% 42% at 4% 38%, rgba(168,106,99,.14) 0%, rgba(180,127,120,.08) 30%, rgba(205,175,167,.035) 56%, rgba(230,215,208,.012) 76%, rgba(247,243,235,0) 94%),
    radial-gradient(120% 46% at 93% 62%, rgba(200,220,232,.68) 0%, rgba(208,226,236,.48) 20%, rgba(219,233,241,.30) 42%, rgba(230,238,241,.16) 62%, rgba(240,242,238,.06) 80%, rgba(247,243,235,0) 98%);
}
/* Workspace: soft mist on both sides so the long editor isn't flat beige */
.sec-work.sec-wash::before {
  inset: 0 -6%;
  background:
    radial-gradient(520px 420px at 88% 260px, rgba(200,220,232,.85) 0%, rgba(221,234,242,.42) 48%, rgba(247,243,235,0) 100%),
    radial-gradient(460px 380px at 6% 760px, rgba(168,106,99,.12) 0%, rgba(205,175,167,.05) 50%, rgba(247,243,235,0) 100%),
    radial-gradient(560px 460px at 12% 1250px, rgba(200,220,232,.70) 0%, rgba(221,234,242,.32) 50%, rgba(247,243,235,0) 100%),
    radial-gradient(520px 420px at 92% 1500px, rgba(233,240,242,.85) 0%, rgba(233,240,242,.30) 50%, rgba(247,243,235,0) 100%);
  background-size: 100% 1700px;
  background-repeat: repeat-y;
}
.hero-inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }
.hero h1 { font-family: var(--display); font-weight: var(--display-w); font-size: clamp(30px, 3.8vw, 50px); line-height: 1.08; letter-spacing: var(--display-track); max-width: 22ch; margin-bottom: 20px; }
.hline { display: block; }
.hline-2 { color: var(--muted-warm); }
.hero-copy { max-width: 60ch; color: var(--slate-warm); font-size: 17px; line-height: 1.65; margin-bottom: 28px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hero-points li { font-size: 12.5px; font-weight: 600; color: var(--slate-warm); background: rgba(252,250,246,.75); border: 1px solid var(--line-warm); border-radius: 999px; padding: 6px 12px; }

/* Resume banner */
.resume { padding: 0 clamp(16px, 4vw, 56px); }
.resume-inner { max-width: 1120px; margin: 0 auto 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ivory); border: 1px solid var(--line-warm); border-radius: 16px; padding: 14px 18px; }
.resume-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Sections */
.sec { padding: clamp(48px, 8vh, 88px) clamp(16px, 4vw, 56px); }
.sec-inner { max-width: 1120px; margin: 0 auto; }
.sec-label { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--clay-text); margin-bottom: 12px; }
.sec-label-gap { margin-top: 48px; }
.sec-title { font-family: var(--display); font-weight: var(--display-w); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: var(--display-track-sm); margin-bottom: 20px; }
.card { background: var(--ivory); border: 1px solid rgba(255,255,255,.8); border-radius: 22px; box-shadow: 0 18px 44px rgba(48,45,42,.07), 0 2px 6px rgba(48,45,42,.03); }

.group-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.choice {
  text-align: left; background: var(--ivory); border: 1.5px solid var(--line-warm); border-radius: 18px; padding: 18px 18px 16px;
  cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; width: 100%;
}
.choice:hover { border-color: rgba(168,106,99,.5); }
.choice[aria-checked="true"] { border-color: var(--clay-btn); background: #FFFFFF; box-shadow: 0 0 0 3px rgba(168,106,99,.14); }
.choice h3 { font-family: var(--display); font-size: 16.5px; font-weight: 600; letter-spacing: var(--display-track-sm); margin-bottom: 4px; }
.choice p { font-size: 13.5px; color: var(--slate-warm); }
.choice .tick { float: right; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-warm); margin-left: 8px; }
.choice[aria-checked="true"] .tick { background: var(--clay-btn); border-color: var(--clay-btn); box-shadow: inset 0 0 0 4px #FFFFFF; }

.start-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.start-tabs button, .pv-tabs button {
  border: 1px solid var(--line-warm); background: transparent; border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600;
  color: var(--slate-warm); cursor: pointer;
}
.start-tabs button[aria-selected="true"], .pv-tabs button[aria-selected="true"] { background: var(--ink-warm); color: #FFFFFF; border-color: var(--ink-warm); }
.start-card { padding: clamp(20px, 2.6vw, 30px); }
.field-label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.field-label:first-child { margin-top: 0; }
.opt { font-weight: 500; color: var(--muted-warm); font-size: 12.5px; margin-left: 4px; }
.field-hint { font-size: 13px; color: var(--muted-warm); margin-top: 6px; line-height: 1.5; }
.field-hint-top { margin: 0 0 10px; }
input[type="text"], input[type="email"], textarea, select {
  width: 100%; background: #FFFFFF; border: 1px solid var(--line-warm); border-radius: 12px; padding: 11px 14px; font-size: 15px; line-height: 1.45;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(168,106,99,.6); box-shadow: 0 0 0 3px rgba(168,106,99,.14); }
.start-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.privacy-line { font-size: 12.5px; color: var(--muted-warm); }
.privacy-line a { color: var(--clay-text); text-decoration: underline; text-underline-offset: 2px; }
.form-error { margin-top: 12px; font-size: 13.5px; color: var(--danger); background: var(--danger-bg); border-radius: 10px; padding: 10px 12px; }

.tpl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tpl-grid .choice h3 { font-size: 15px; }
.tpl-grid .choice p { font-size: 13px; }

/* Workspace */
.sec-work { padding-top: 40px; }
.ws-head { max-width: 1320px; margin: 0 auto 16px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ws-head .sec-title { margin-bottom: 4px; }
.ws-status { font-size: 13px; color: var(--muted-warm); }
.ws-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 24px; align-items: start; }
.editor { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.understood { padding: 18px 20px; }
.understood-head { display: flex; justify-content: space-between; align-items: center; }
.understood h3 { font-family: var(--display); font-size: 16px; font-weight: 600; }
.understood-sub { font-size: 12.5px; color: var(--muted-warm); margin: 2px 0 10px; }
.understood dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 13.5px; }
.understood dt { font-weight: 600; color: var(--slate-warm); }
.understood dd.missing { color: var(--clay-text); }

.ed-sec { background: var(--ivory); border: 1px solid var(--line-warm); border-radius: 16px; }
.ed-sec summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.ed-sec summary::-webkit-details-marker { display: none; }
.ed-sec summary::after { content: "▾"; margin-left: auto; color: var(--muted-warm); font-size: 12px; }
.ed-sec:not([open]) summary::after { content: "▸"; }
.ed-n { width: 24px; height: 24px; border-radius: 50%; background: var(--clay-soft); color: var(--clay-text); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ed-body { padding: 0 18px 18px; }
fieldset { border: 0; }
.add-row { display: flex; gap: 8px; }
.add-row select, .add-row input { flex: 1; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: #FFFFFF; border: 1px solid var(--line-warm); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; }
.chip button { border: 0; background: var(--clay-soft); color: var(--clay-text); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.check-list { display: flex; flex-direction: column; gap: 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; font-size: 14px; border-radius: 8px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--clay-btn); flex: none; }
.check small { display: block; color: var(--muted-warm); font-size: 12.5px; }
.check.is-locked { cursor: default; }
.check.is-off { opacity: .62; cursor: default; }
.badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 1px; }
.b-addon { background: var(--mist); color: #3E5466; }
.b-std { background: #EEF0EC; color: #4A5A52; }
.b-cond { background: var(--mist); color: #3E5466; }
.b-mod { background: var(--clay-soft); color: var(--clay-text); }
.b-lock { background: #EEF0EC; color: #4A5A52; }
.b-off { background: #EFEDEA; color: var(--muted-warm); }
.b-ready { background: #F6EDDA; color: #6C470C; }
.modules { margin-bottom: 12px; }
.q-list { border-top: 1px solid var(--line-warm); padding-top: 10px; }
.q-step { margin-top: 10px; }
.q-step h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-warm); margin-bottom: 4px; }
.q-item { font-size: 13.5px; padding: 6px 0; border-bottom: 1px dashed var(--line-warm); }
.q-item.is-off { color: var(--muted-warm); text-decoration: line-through; text-decoration-color: rgba(107,101,96,.4); }
.q-item small { display: block; color: var(--muted-warm); font-size: 12px; }
.logo-row { display: flex; gap: 12px; align-items: center; }
.logo-thumb { width: 64px; height: 64px; border-radius: 12px; border: 1px dashed var(--line-warm); background: #FFFFFF center/contain no-repeat; flex: none; }
.logo-row input[type="file"] { font-size: 13px; max-width: 100%; }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.theme { border: 1.5px solid var(--line-warm); background: #FFFFFF; border-radius: 12px; padding: 8px; cursor: pointer; text-align: left; font-size: 12.5px; font-weight: 600; }
.theme[aria-checked="true"] { border-color: var(--ink-warm); box-shadow: 0 0 0 2px rgba(48,45,42,.12); }
.theme .sw { display: flex; height: 22px; border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
.theme .sw i { flex: 1; }

/* Preview column */
.preview { position: sticky; top: 80px; min-width: 0; }
.pv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pv-banner { font-size: 12.5px; color: #3E5466; background: rgba(200,220,232,.45); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }

/* Navigator preview (themed by --p etc. set inline) */
.phone { max-width: 390px; margin: 0 auto; border-radius: 34px; padding: 10px; background: #2D2B29; box-shadow: 0 30px 60px rgba(48,45,42,.18); }
.nv { --p: #A2615A; --ph: #8B4F49; --ps: #F1E7E4; --pg: #F7F3EB; --pi: #302D2A;
  background: var(--pg); color: var(--pi); border-radius: 26px; height: min(720px, 78vh); overflow-y: auto; display: flex; flex-direction: column; }
.nv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; background: #FFFFFFcc; border-bottom: 1px solid rgba(0,0,0,.06); position: sticky; top: 0; z-index: 2; }
.nv-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nv-brand img { height: 30px; max-width: 150px; object-fit: contain; }
.nv-brand b { font-family: var(--display); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-pill { font-size: 10.5px; font-weight: 700; color: var(--p); background: var(--ps); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.nv-body { padding: 18px 16px 20px; flex: 1; }
.nv h2 { font-family: var(--display); font-weight: 600; font-size: 23px; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 8px; }
.nv p { font-size: 14px; line-height: 1.5; }
.nv .muted { color: color-mix(in srgb, var(--pi) 70%, white); }
.nv-btn { display: block; width: 100%; border: 0; border-radius: 999px; background: var(--p); color: #FFFFFF; font-weight: 600; font-size: 15px; padding: 13px 16px; margin-top: 16px; cursor: pointer; }
.nv-btn:hover { background: var(--ph); }
.nv-btn.ghost { background: transparent; color: var(--pi); border: 1px solid rgba(0,0,0,.14); }
.nv-nav { display: flex; gap: 8px; margin-top: 16px; }
.nv-nav .nv-btn { margin-top: 0; }
.nv-nav .ghost { flex: 0 0 34%; }
.nv-step { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--p); margin-bottom: 6px; }
.nv-prog { height: 4px; background: rgba(0,0,0,.07); border-radius: 999px; margin-bottom: 14px; overflow: hidden; }
.nv-prog i { display: block; height: 100%; background: var(--p); border-radius: 999px; }
.nv-q { margin-top: 16px; }
.nv-q > .lbl { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.nv-q > .hint { font-size: 12.5px; margin-bottom: 8px; }
.nv-opts { display: flex; flex-direction: column; gap: 6px; }
.nv-opt { text-align: left; background: #FFFFFF; border: 1.5px solid rgba(0,0,0,.08); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; cursor: pointer; line-height: 1.35; }
.nv-opt[aria-pressed="true"] { border-color: var(--p); background: var(--ps); }
.nv input[type="text"], .nv select { font-size: 14px; padding: 9px 12px; border-radius: 10px; }
.nv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nv-two label { font-size: 12px; font-weight: 600; display: block; margin-bottom: 4px; }
.nv-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13px; background: #FFFFFF; border-radius: 12px; padding: 12px; border: 1px solid rgba(0,0,0,.08); }
.nv-consent input { width: 18px; height: 18px; accent-color: var(--p); margin-top: 1px; flex: none; }
.nv-note { font-size: 11.5px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.035); }
.nv-safety { font-size: 12px; padding: 10px 16px 14px; border-top: 1px solid rgba(0,0,0,.06); }
.nv-card { background: #FFFFFF; border-radius: 16px; padding: 14px; margin-top: 10px; border: 1px solid rgba(0,0,0,.07); }
.nv-card .tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #3E5466; background: #E3ECF4; border-radius: 999px; padding: 3px 8px; margin-bottom: 6px; }
.nv-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.nv-card .fake-btns { display: flex; gap: 6px; margin-top: 10px; }
.nv-card .fake-btns span { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 6px 10px; background: var(--ps); color: var(--ph); }

/* Dashboard preview — follows the Partner Dashboard's light layout */
.db { --acc: #A2615A; --acc-soft: #F1E7E4; display: grid; grid-template-columns: 200px minmax(0, 1fr); background: #F3F7FB; border: 1px solid #D9E4EE; border-radius: 18px; overflow: hidden; min-height: 620px; box-shadow: 0 24px 54px rgba(48,45,42,.10); color: #302D2A; }
.db-side { background: #E9F1F8; border-right: 1px solid #D9E4EE; padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; }
.db-logo { height: 54px; display: flex; align-items: center; padding: 0 6px 8px; border-bottom: 1px solid #D9E4EE; margin-bottom: 4px; }
.db-logo img { max-height: 38px; max-width: 160px; object-fit: contain; }
.db-org { font-size: 12px; color: #6B6560; padding: 2px 6px 6px; }
.db-org b { display: block; color: #302D2A; font-size: 13px; }
.db-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: #8A837C; padding: 4px 6px; }
.db-nav { display: flex; flex-direction: column; gap: 6px; }
.db-nav button { text-align: left; border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); background: #FCF9F9; border-radius: 10px; padding: 9px 10px; font-size: 13px; cursor: pointer; color: #5A554F; }
.db-nav button[aria-current="true"] { background: var(--acc-soft); color: color-mix(in srgb, var(--acc) 80%, black); font-weight: 600; border-color: var(--acc); }
.db-main { padding: 16px 18px 20px; min-width: 0; }
.db-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.db-top h3 { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.db-top .sub { font-size: 12px; color: #6B6560; }
.db-badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #3E5466; background: rgba(200,220,232,.7); border-radius: 999px; padding: 4px 9px; }
.db-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.db-kpi { background: #FFFFFF; border: 1px solid #E1E8EF; border-radius: 12px; padding: 12px; }
.db-kpi .k { font-size: 11.5px; color: #6B6560; }
.db-kpi .v { font-family: var(--display); font-size: 22px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.db-kpi .v.sm { font-size: 15px; }
.db-card { background: #FFFFFF; border: 1px solid #E1E8EF; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.db-card h4 { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; gap: 8px; }
.db-card h4 em { font-style: normal; font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #3E5466; }
.db-card p { font-size: 13px; color: #5A554F; line-height: 1.5; }
.db-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.bar-row .bar { height: 6px; background: #E9F1F8; border-radius: 999px; overflow: hidden; }
.bar-row .bar i { display: block; height: 100%; background: #8FB4CD; border-radius: 999px; }
.bar-row:first-of-type .bar i { background: var(--acc); }
.bar-row .n { text-align: right; font-variant-numeric: tabular-nums; color: #5A554F; }
.db table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.db th { text-align: left; font-weight: 600; color: #6B6560; font-size: 11.5px; padding: 6px 6px; border-bottom: 1px solid #E1E8EF; }
.db td { padding: 7px 6px; border-bottom: 1px solid #F0F3F6; font-variant-numeric: tabular-nums; }
.db td.r, .db th.r { text-align: right; }
.db-trend svg { width: 100%; height: 90px; display: block; }
.db-chat { display: flex; flex-direction: column; gap: 8px; }
.db-chat .me { align-self: flex-end; background: var(--acc-soft); border-radius: 12px 12px 2px 12px; padding: 8px 12px; font-size: 13px; max-width: 85%; }
.db-chat .ai { align-self: flex-start; background: #F3F7FB; border: 1px solid #E1E8EF; border-radius: 12px 12px 12px 2px; padding: 10px 12px; font-size: 13px; max-width: 92%; }
.db-chat .ai small { display: block; color: #6B6560; margin-top: 6px; font-size: 11.5px; }
.db-ask { display: flex; gap: 8px; margin-top: 12px; }
.db-ask input { font-size: 13px; }
.db-ask button { border: 0; border-radius: 10px; background: #D9E4EE; color: #6B6560; padding: 0 14px; font-size: 13px; font-weight: 600; }
.db ol { padding-left: 20px; font-size: 13px; color: #5A554F; }
.db ol li { padding: 3px 0; }
.db ul.plain { list-style: none; font-size: 13px; color: #5A554F; }
.db ul.plain li { padding: 4px 0 4px 16px; position: relative; }
.db ul.plain li::before { content: "•"; position: absolute; left: 2px; color: var(--acc); }
.db select { font-size: 13px; padding: 6px 10px; width: auto; }

/* Next section */
.sec-next { }
.next-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: stretch; }
.sec-next .sec-title { margin-bottom: 8px; }
.sec-sub { font-size: 16px; line-height: 1.55; color: var(--slate-warm); max-width: 680px; margin-bottom: 24px; }
.next-card { padding: 22px; }
.next-card h3 { font-family: var(--display); font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.next-card > p { font-size: 14px; color: var(--slate-warm); margin-bottom: 14px; }
.stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.file-btn { cursor: pointer; }
.send-preview { margin: 14px 0; font-size: 13px; }
.send-preview summary { cursor: pointer; color: var(--clay-text); font-weight: 600; }
.send-preview pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 12.5px; background: #FFFFFF; border: 1px solid var(--line-warm); border-radius: 10px; padding: 10px 12px; margin-top: 8px; color: var(--slate-warm); }
#activate-form .btn { margin: 4px 0 10px; }
.success-msg { font-size: 15px; background: rgba(200,220,232,.4); border-radius: 14px; padding: 16px 18px; }
.coming ul { list-style: none; font-size: 14px; color: var(--slate-warm); display: flex; flex-direction: column; gap: 10px; }
.tag-plan { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6C470C; background: #F6EDDA; border-radius: 999px; padding: 2px 8px; margin-right: 8px; }

.site-footer { border-top: 1px solid var(--line-warm); padding: 28px clamp(16px, 4vw, 56px) 32px; }
.footer-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 12.5px; color: var(--muted-warm); }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer a { color: var(--clay-text); }
.footer-copy { width: 100%; font-size: 11.5px; }

/* Responsive */
@media (max-width: 1100px) {
  .ws-grid { grid-template-columns: minmax(0, 1fr); }
  .preview { position: static; }
}
@media (max-width: 860px) {
  .hero::before { opacity: .86; animation-duration: 62s; }
  .group-grid { grid-template-columns: 1fr 1fr; }
  .nav { flex-wrap: wrap; row-gap: 8px; }
  .nav-links { order: 3; width: 100%; justify-content: center; font-size: 13.5px; }
  .db { grid-template-columns: minmax(0, 1fr); }
  .db-side { border-right: 0; border-bottom: 1px solid #D9E4EE; }
  .db-nav { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .db-nav button { white-space: nowrap; flex: none; }
  .db-kpis { grid-template-columns: 1fr 1fr; }
}
.nav-links a { white-space: nowrap; }
@media (max-width: 640px) {
  .brand-logo-full { height: 34px; }
  .nav-links { justify-content: space-between; gap: 8px; font-size: 13px; }
  .nl-long { display: none; }
  .group-grid, .tpl-grid, .next-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-ctas .btn, .start-foot .btn { width: 100%; }
  .check-grid { grid-template-columns: minmax(0, 1fr); }
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .understood dl { grid-template-columns: minmax(0, 1fr); }
  .understood dd { margin-bottom: 6px; }
  .db-two { grid-template-columns: minmax(0, 1fr); }
  .bar-row { grid-template-columns: minmax(0, 1fr) 60px 40px; }
  .phone { padding: 6px; border-radius: 28px; }
  .nv { height: 640px; border-radius: 22px; }
  .db-main { padding: 12px; }
  .db-scroll { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before { animation: none; filter: blur(38px); }
  .btn, .choice { transition: none; }
  .btn:hover { transform: none; }
}

/* Question library (Phase 2) */
.lib { margin-top: 16px; border-top: 1px solid var(--line-warm); padding-top: 14px; }
.lib-head { display: flex; align-items: center; gap: 8px; }
.lib-head h4 { font-family: var(--display); font-size: 15.5px; font-weight: 600; }
.lib-banner { font-size: 13px; line-height: 1.55; color: var(--slate-warm); background: #F6EDDA; border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.lib-count { font-size: 13px; font-weight: 600; color: var(--ink-warm); }
.lib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 6px; }
.lib-warn { list-style: none; font-size: 12.5px; color: var(--danger); background: var(--danger-bg); border-radius: 10px; padding: 8px 12px; margin: 6px 0; }
.lib-msg { font-size: 12.5px; color: var(--clay-text); min-height: 1em; margin: 4px 0; }
.lib-cat { border: 1px solid var(--line-warm); border-radius: 12px; background: #FFFFFF; margin-top: 8px; }
.lib-cat summary { list-style: none; cursor: pointer; padding: 10px 12px; font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.lib-cat summary::-webkit-details-marker { display: none; }
.lib-cat summary::after { content: "▾"; color: var(--muted-warm); font-size: 11px; }
.lib-cat:not([open]) summary::after { content: "▸"; }
.lib-n { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--muted-warm); }
.lib-trigger { font-size: 12px; color: var(--muted-warm); padding: 0 12px 4px; }
.lib-q { border-top: 1px dashed var(--line-warm); margin: 0 8px; padding: 9px 4px; }
.lib-q.is-existing { padding: 9px 4px 9px 32px; font-size: 13.5px; }
.lib-q.is-existing small { display: block; color: var(--muted-warm); font-size: 12px; margin-top: 2px; }
.lib-q-text { display: block; font-size: 13.5px; line-height: 1.45; }
.lib-q small { margin-top: 3px; }
.lib-when { color: #3E5466 !important; }
.lib-purpose b { font-weight: 600; color: var(--slate-warm); }
.lib-inactive { color: var(--clay-text) !important; font-style: italic; }
.lib-new { margin-top: 14px; font-size: 12.5px; color: var(--slate-warm); }
.lib-new h5 { font-size: 13px; font-weight: 600; color: var(--ink-warm); margin-bottom: 2px; }
.lib-new ul { list-style: none; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.nv-tag-proposed { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6C470C; background: #F6EDDA; border-radius: 999px; padding: 2px 7px; vertical-align: 2px; }
.nv-proposed-note { font-size: 12px; color: #6C470C; background: #F6EDDA; border-radius: 8px; padding: 6px 10px; margin-top: 4px; }
.db-proposed { border-style: dashed !important; }

/* Desktop: the preview follows the editor. Both frames fit the screen below the header and
   scroll inside themselves (as the phone frame already did), so nothing is cut off. */
@media (min-width: 1101px) {
  .nv { height: min(720px, calc(100vh - 250px)); min-height: 400px; }
  .db { height: calc(100vh - 200px); min-height: 420px; max-height: 760px; }
  .db-side { overflow-y: auto; }
  .db-main { overflow-y: auto; overscroll-behavior: contain; }
}
/* Very short screens: let the preview scroll with the page instead of sticking. */
@media (min-width: 1101px) and (max-height: 620px) {
  .preview { position: static; }
}