*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
--bg: #0e0e0e;
--text: #d4d0c8;
--text-dim: #7a7670;
--text-muted: #4a4744;
--border: #2a2825;
--button-bg: #1c1b19;
--button-hover: #252320;
--button-border: #3a3733;
--button-active: #2e2c29;
}

/* ── Base link style ── */
a {
color: #BA7517;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s;
}
a:hover { color: #d4a040; }

html, body { height: 100%; }

body {
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
min-height: 100vh;
}

.column {
width: 100%;
max-width: 680px;
margin: 0 auto;
padding: 64px 24px 180px;
}

/* ── Nav ── */
nav {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg);
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
height: 56px;
padding: 0 32px;
}

nav a {
font-family: 'Jost', sans-serif;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
/* color, font-weight, text-decoration inherited from base a */
}

nav a:hover { color: #d4a040; }

.orient-nudge {
text-align: center;
padding: 10px 24px;
border-bottom: 1px solid var(--border);
}

.orient-nudge a {
font-family: 'Jost', sans-serif;
font-size: 11px;
font-weight: 300;
letter-spacing: 0.08em;
color: var(--text-dim);
text-decoration: none;
transition: color 0.15s;
}

.orient-nudge a:hover { color: var(--text); text-decoration: none; }

@media (max-width: 480px) {
nav { padding: 0 20px; }
nav a { font-size: 11px; letter-spacing: 0.06em; }
.column { padding: 48px 20px 140px; }
}

/* ── Entry flow dots ── */
.dots {
display: flex;
gap: 7px;
align-items: center;
margin-bottom: 56px;
}

.dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--text-muted);
}

.dot.current { background: var(--text-dim); }

/* ── Territory dots ── */
.territory-dots {
display: flex;
gap: 7px;
align-items: center;
margin-bottom: 48px;
}

.tdot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--text-muted);
}

.tdot.current { background: var(--text-dim); }
.tdot.done    { background: var(--text-muted); }

/* ── Panels ── */
.panel { display: none; }

.panel.active {
display: block;
animation: fadeIn 0.2s ease forwards;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(7px); }
to   { opacity: 1; transform: translateY(0); }
}

/* ── Typography ── */
h1.headline {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
font-size: clamp(28px, 4vw, 42px);
line-height: 1.25;
color: var(--text);
margin-bottom: 24px;
letter-spacing: -0.01em;
}

h2.subhead {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
font-size: clamp(18px, 2.5vw, 22px);
line-height: 1.5;
color: var(--text-dim);
margin-bottom: 56px;
font-style: italic;
}

.body-text {
font-size: 15px;
line-height: 1.85;
color: var(--text);
margin-bottom: 48px;
max-width: 600px;
}

.label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-muted);
margin-bottom: 20px;
}

.prompt {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 400;
font-size: clamp(20px, 3vw, 28px);
line-height: 1.35;
color: var(--text);
margin-bottom: 32px;
}

.acknowledgment-text {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
font-size: clamp(18px, 2.5vw, 24px);
line-height: 1.65;
color: var(--text);
margin-bottom: 48px;
font-style: italic;
}

.reason-heading {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
font-size: clamp(18px, 2.5vw, 24px);
line-height: 1.4;
color: var(--text);
margin-bottom: 36px;
}

/* ── Buttons ── */
.btn {
display: inline-block;
padding: 11px 28px;
font-family: inherit;
font-size: 14px;
letter-spacing: 0.04em;
color: var(--text);
background: var(--button-bg);
border: 1px solid var(--button-border);
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
text-align: center;
-webkit-appearance: none;
appearance: none;
}

.btn:hover { background: var(--button-hover); border-color: #4a4744; }
.btn:active { background: var(--button-active); }

.btn-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
margin-top: 8px;
}

.btn-skip {
color: var(--text-muted);
background: transparent;
border-color: transparent;
padding-left: 0;
}

.btn-skip:hover { color: var(--text-dim); background: transparent; border-color: transparent; }

/* ── Textarea ── */
textarea {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
color: var(--text);
font-family: inherit;
font-size: 15px;
line-height: 1.7;
padding: 8px 0 12px;
resize: none;
outline: none;
min-height: 72px;
margin-bottom: 36px;
transition: border-color 0.2s;
}

textarea:focus { border-bottom-color: #5a5653; }
textarea::placeholder { color: var(--text-muted); }

/* ── Checkboxes ── */
.checkbox-list {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 40px;
}

.checkbox-item {
display: flex;
align-items: flex-start;
gap: 14px;
cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
min-width: 16px;
border: 1px solid var(--button-border);
background: var(--button-bg);
cursor: pointer;
margin-top: 2px;
position: relative;
transition: background 0.15s, border-color 0.15s;
flex-shrink: 0;
}

.checkbox-item input[type="checkbox"]:checked {
background: var(--text-dim);
border-color: var(--text-dim);
}

.checkbox-item input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border: 1.5px solid var(--bg);
border-top: none;
border-left: none;
transform: rotate(45deg);
}

.checkbox-item label {
font-size: 15px;
line-height: 1.55;
color: var(--text);
cursor: pointer;
user-select: none;
}

/* ── Word chips ── */
.territory-instruction {
font-size: 12px;
letter-spacing: 0.05em;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 24px;
}

.chip-field {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}

.chip {
padding: 6px 14px;
font-family: inherit;
font-size: 13px;
letter-spacing: 0.02em;
color: var(--text-dim);
background: transparent;
border: 1px solid var(--button-border);
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
-webkit-appearance: none;
appearance: none;
user-select: none;
}

.chip:hover { border-color: var(--text-muted); color: var(--text); }

.chip.selected {
background: #2a2825;
border-color: #7a7670;
color: var(--text);
}

.chip-limit-note {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 28px;
min-height: 18px;
opacity: 0;
transition: opacity 0.2s;
}

.chip-limit-note.visible { opacity: 1; }

/* ── Open keyword ── */
.open-field-wrap { margin-bottom: 28px; }

.open-field-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-muted);
margin-bottom: 10px;
}

.open-field-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
color: var(--text);
font-family: inherit;
font-size: 15px;
line-height: 1.7;
padding: 6px 0 10px;
outline: none;
transition: border-color 0.2s;
}

.open-field-input:focus { border-bottom-color: #5a5653; }
.open-field-input::placeholder { color: var(--text-muted); }

/* Honeypot (TOI-012): kept in the layout but off-screen and inert to humans.
   Not display:none — some bots skip hidden fields; this stays "fillable". */
.toi-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.open-field-note {
font-size: 12px;
color: var(--text-muted);
margin-top: 7px;
min-height: 16px;
}

/* ── Territory action row (Too Complex + Continue side by side) ── */
.territory-action-row {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 12px;
}

/* ── Too Complex ── */
.too-complex-wrap { margin-bottom: 36px; }

.btn-too-complex {
display: inline-block;
padding: 9px 20px;
font-family: inherit;
font-size: 13px;
letter-spacing: 0.03em;
color: var(--text-muted);
background: transparent;
border: 1px dashed var(--text-muted);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
-webkit-appearance: none;
appearance: none;
}

.btn-too-complex:hover { color: var(--text-dim); border-color: var(--text-dim); }

.btn-too-complex.selected {
color: var(--text);
border-color: var(--text-dim);
border-style: solid;
background: var(--button-bg);
}

.too-complex-note {
font-size: 12px;
color: var(--text-muted);
margin-top: 10px;
font-style: italic;
min-height: 16px;
}

/* ── Validation error ── */
.field-error {
font-size: 13px;
color: #8a6a4a;
margin-bottom: 16px;
min-height: 18px;
}

/* ── Map SVG container ── */
.map-svg-container {
width: 100%;
margin-bottom: 48px;
}

.map-svg-container svg {
width: 100%;
height: auto;
display: block;
}

/* ── Email link ── */
.map-email-link {
display: inline-block;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--text-muted);
cursor: default;
margin-bottom: 28px;
}

/* ── Profile text ── */
.map-rule {
border: none;
border-top: 1px solid var(--border);
margin: 0 0 0;
}

.map-profile {
padding-top: 3rem;
padding-bottom: 2rem;
max-width: 600px;
}

.map-profile p {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 18px;
line-height: 1.85;
color: rgba(212, 208, 200, 0.88);
margin-bottom: 1.5em;
font-weight: 300;
}

.map-profile p:last-child {
margin-bottom: 0;
}

/* ── Score display ── */
.map-score-row {
display: flex;
gap: 48px;
margin-bottom: 40px;
flex-wrap: wrap;
}

.map-score-item { flex: 0 0 auto; }

.map-score-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-muted);
margin-bottom: 8px;
}

.map-score-value {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(32px, 5vw, 48px);
font-weight: 300;
color: var(--text);
line-height: 1;
margin-bottom: 8px;
letter-spacing: -0.02em;
}

.map-score-axis {
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.04em;
}

.map-quadrant-desc {
font-size: 12px;
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 56px;
}

/* ── Email capture moments ── */
.capture-wrap { margin-top: 1.5rem; }

.capture-prompt {
font-size: 14px;
opacity: 0.6;
cursor: pointer;
transition: opacity 0.3s;
display: inline-block;
color: var(--text);
}

.capture-prompt.triggered {
opacity: 0.3;
cursor: default;
pointer-events: none;
}

/* ── Capture-1: styled as a button ── */
.capture-prompt-btn {
display: inline-block;
padding: 11px 28px;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--text);
background: var(--button-bg);
border: 1px solid var(--button-border);
cursor: pointer;
opacity: 1;
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
-webkit-appearance: none;
}
.capture-prompt-btn:hover { background: var(--button-hover); border-color: var(--text-muted); }
.capture-prompt-btn.triggered { opacity: 0.4; cursor: default; pointer-events: none; }

/* ── Capture-2: styled as a link ── */
#capture-2-prompt {
color: #BA7517;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
opacity: 1;
}
#capture-2-prompt:hover { color: #d4a040; }

.capture-iframe {
width: 100%;
height: 380px;
border: none;
margin-top: 1rem;
display: block;
opacity: 0;
transition: opacity 0.4s;
}

.capture-iframe.visible { opacity: 1; }

/* ── PDF / print button ── */
.btn-print {
display: inline-block;
margin-top: 16px;
padding: 11px 24px;
font-family: inherit;
font-size: 15px;
letter-spacing: 0.04em;
color: var(--text);
background: transparent;
border: 1px solid var(--button-border);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
-webkit-appearance: none;
appearance: none;
}

.btn-print:hover { border-color: var(--text-dim); background: var(--button-bg); }
.btn-print:disabled { opacity: 0.5; cursor: default; }

/* ── Print footer (screen: hidden; print: visible) ── */
.print-footer { display: none; }

/* ── Print styles ── */
@media print {
nav,
.capture-wrap,
.btn-print,
button { display: none !important; }

body { background: white !important; }

.column { padding: 24px !important; }

.headline,
.map-score-value { color: #1a1a17 !important; }

.label,
.map-quadrant-desc,
.map-score-label,
.map-score-axis { color: #666 !important; }

.map-profile p { color: #2a2a27 !important; }

.map-rule { border-top-color: #ccc !important; }

.print-footer {
  display: block !important;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid #ccc;
}

.print-footer p {
  font-size: 11px;
  color: #888;
  letter-spacing: 0.06em;
  line-height: 1.8;
}
}

/* Map loading / error state (server round-trip) */
.map-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 200px;
  padding: 40px 20px;
  text-align: center;
  color: #666;
  font-style: italic;
}

/* Capture-form fallback when a third-party iframe won't load (TOI-005) */
.capture-fallback {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.capture-fallback a { color: var(--text); text-decoration: underline; }