/* StudioHawk pre-discovery: shared styles.
   Brand: deep black, Bright Aqua #01FFFF, Picton Blue #3DB7E9, pale violet,
   circles/rings/dots devices, Archivo. */

:root {
  --black: #0a0a0b;
  --surface: #131317;
  --surface-2: #1a1a20;
  --ink: #f5f7f8;
  --muted: rgba(245, 247, 248, 0.64);
  --faint: rgba(245, 247, 248, 0.4);
  --line: rgba(245, 247, 248, 0.13);
  --aqua: #01ffff;
  --blue: #3db7e9;
  --violet: #c6b9ff;
  --yellow: #ffd84d;
  --danger: #ff7a7a;
  --radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

.wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }
.wrap-wide { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 4px; }

/* Header */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0 10px;
}
.site-header img { height: 30px; display: block; }
.site-header .tagline { color: var(--faint); font-size: 13.5px; letter-spacing: 0.02em; }

/* Hero */
.hero { position: relative; padding: 54px 0 14px; }
.hero h1 {
  font-size: clamp(30px, 5.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0 0 18px;
  max-width: 15ch;
}
.hero h1 .accent { color: var(--aqua); }
.hero p.lede { color: var(--muted); max-width: 52ch; margin: 0 0 8px; font-size: 18px; }
.hero .ring {
  position: absolute; top: 6px; right: -40px;
  width: 190px; height: 190px; border-radius: 50%;
  border: 2px solid rgba(1, 255, 255, 0.35);
  pointer-events: none;
}
.hero .ring::after {
  content: ""; position: absolute; inset: 34px;
  border-radius: 50%; border: 2px solid rgba(61, 183, 233, 0.25);
}
.hero .dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--violet); right: 130px; top: 10px; pointer-events: none;
}
@media (max-width: 820px) { .hero .ring, .hero .dot { display: none; } }

.meta-strip { display: flex; gap: 22px; flex-wrap: wrap; color: var(--faint); font-size: 14px; padding: 10px 0 6px; }
.meta-strip span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); margin-right: 9px; vertical-align: 1px; }

/* Progress dots */
.progress { display: flex; align-items: center; gap: 10px; margin: 34px 0 14px; }
.progress .p-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: transparent; border: 2px solid var(--line);
  transition: all 0.25s ease;
}
.progress .p-dot.done { background: var(--blue); border-color: var(--blue); }
.progress .p-dot.now { background: var(--aqua); border-color: var(--aqua); box-shadow: 0 0 0 5px rgba(1, 255, 255, 0.12); }
.progress .p-label { margin-left: 8px; color: var(--muted); font-size: 14px; }

/* Form card */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 26px;
  margin-bottom: 80px;
}
@media (max-width: 560px) { .card { padding: 22px 16px; } }

fieldset { border: 0; margin: 0; padding: 0; }
fieldset[hidden] { display: none; }
legend {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  padding: 0; margin: 0 0 4px;
}
.step-sub { color: var(--muted); margin: 0 0 24px; font-size: 15.5px; }

.field { margin-bottom: 22px; }
.field > label, .field > .group-label {
  display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px;
}
.field .hint { color: var(--faint); font-weight: 400; font-size: 13.5px; margin-left: 6px; }
.field .optional { color: var(--faint); font-weight: 400; font-size: 13px; }

input[type="text"], input[type="email"], input[type="url"], textarea, select {
  width: 100%;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  transition: border-color 0.15s ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--aqua); outline: none; }
textarea { min-height: 96px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }

/* Choice chips (radio + checkbox) */
.choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.choices.stack { grid-template-columns: 1fr; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 15px;
  font-size: 15.5px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.choice span kbd {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--faint);
}
.choice input:checked + span kbd { border-color: var(--aqua); color: var(--aqua); }
.choice input:hover + span { transform: translateX(2px); }
.choice input:hover + span { border-color: rgba(1, 255, 255, 0.4); }
.choice input:checked + span {
  border-color: var(--aqua);
  background: rgba(1, 255, 255, 0.07);
}
.choice input:focus-visible + span { outline: 2px solid var(--aqua); outline-offset: 2px; }
.choice input:disabled + span { opacity: 0.4; cursor: not-allowed; }

.check-inline { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--muted); font-size: 14.5px; }
.check-inline input { width: 17px; height: 17px; accent-color: var(--aqua); }

/* Buttons */
.btn-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 30px; }
button.btn {
  font: inherit; font-weight: 700; font-size: 16px;
  border-radius: 100px; cursor: pointer;
  padding: 13px 30px; border: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
button.btn-primary { background: var(--aqua); color: #041012; }
button.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(1, 255, 255, 0.25); }
button.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button.btn-ghost:hover { color: var(--ink); border-color: var(--muted); }
button.btn[disabled] { opacity: 0.55; cursor: wait; transform: none; box-shadow: none; }

.error-msg { color: var(--danger); font-size: 14px; margin-top: 8px; display: none; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--danger); }
.field.invalid .error-msg { display: block; }
.form-error { color: var(--danger); font-size: 14.5px; margin-top: 14px; text-align: right; display: none; }

/* Success panel */
.success { text-align: center; padding: 46px 20px 40px; }
.success .big-ring {
  width: 88px; height: 88px; margin: 0 auto 24px; border-radius: 50%;
  border: 3px solid var(--aqua); display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: var(--aqua);
}
.success h2 { font-size: 28px; margin: 0 0 10px; letter-spacing: -0.01em; }
.success p { color: var(--muted); max-width: 46ch; margin: 0 auto 6px; }

.site-footer { color: var(--faint); font-size: 13.5px; padding: 26px 0 42px; border-top: 1px solid var(--line); }

/* ---------- Login ---------- */
.login-box { max-width: 400px; margin: 12vh auto 0; }
.login-box .card { margin-bottom: 20px; }
.login-box h1 { font-size: 24px; margin: 0 0 18px; }
.login-error { color: var(--danger); font-size: 14.5px; margin-top: 12px; }

/* ---------- Team view ---------- */
.team-layout { display: grid; grid-template-columns: 330px 1fr; gap: 26px; align-items: start; padding-bottom: 70px; }
@media (max-width: 900px) { .team-layout { grid-template-columns: 1fr; } }

.sub-list { display: flex; flex-direction: column; gap: 10px; }
.sub-item {
  text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; cursor: pointer; color: var(--ink); font: inherit;
  transition: border-color 0.15s ease;
}
.sub-item:hover { border-color: rgba(1, 255, 255, 0.4); }
.sub-item.active { border-color: var(--aqua); background: rgba(1, 255, 255, 0.05); }
.sub-item .who { font-weight: 700; font-size: 15.5px; }
.sub-item .co { color: var(--muted); font-size: 14px; }
.sub-item .when { color: var(--faint); font-size: 12.5px; margin-top: 4px; }

.detail { min-height: 300px; }
.detail .card { margin-bottom: 22px; }
.detail h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -0.01em; }
.detail h3 { margin: 26px 0 12px; font-size: 17px; color: var(--aqua); font-weight: 700; }
.detail h3:first-of-type { margin-top: 18px; }
.detail .sub-meta { color: var(--faint); font-size: 13.5px; margin-bottom: 4px; }

.pill { display: inline-block; border: 1px solid var(--line); border-radius: 100px; padding: 3px 12px; font-size: 12.5px; color: var(--muted); margin: 0 6px 6px 0; }
.pill.hi { border-color: var(--aqua); color: var(--aqua); }
.pill.med { border-color: var(--blue); color: var(--blue); }
.pill.lane { border-color: var(--violet); color: var(--violet); font-weight: 600; }

.q-item { border-left: 2px solid var(--line); padding: 2px 0 2px 16px; margin-bottom: 18px; }
.q-item .q-text { font-weight: 600; font-size: 15.5px; }
.q-item .q-why { color: var(--muted); font-size: 14px; margin-top: 4px; }
.q-item .q-listen { color: var(--faint); font-size: 13.5px; margin-top: 3px; }
.q-item .q-pillar { color: var(--blue); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }

.covered-item { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; font-size: 14.5px; }
.covered-item .c-topic { font-weight: 600; }
.covered-item .c-ans { color: var(--muted); margin-top: 2px; }
.covered-item .c-confirm { color: var(--faint); font-size: 13px; margin-top: 4px; font-style: italic; }

.flag { border-radius: 10px; padding: 11px 14px; margin-bottom: 9px; font-size: 14.5px; border: 1px solid var(--line); }
.flag.red_flag { border-color: rgba(255, 122, 122, 0.5); }
.flag.opportunity { border-color: rgba(1, 255, 255, 0.4); }
.flag.sensitivity { border-color: rgba(255, 216, 77, 0.4); }
.flag .f-type { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

.answers-grid { display: grid; grid-template-columns: 1fr; gap: 7px; font-size: 14.5px; }
.answers-grid .a-row { display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.answers-grid .a-key { color: var(--faint); }
@media (max-width: 560px) { .answers-grid .a-row { grid-template-columns: 1fr; gap: 2px; } }

.gen-note { color: var(--faint); font-size: 13px; margin: 6px 0 14px; }

.research-block { border-top: 1px solid var(--line); margin-top: 28px; }
.research-body { font-size: 14.5px; }
.research-body h3 { margin: 22px 0 10px; }
.research-body h4 { margin: 16px 0 8px; font-size: 14.5px; color: var(--violet); }
.research-body ul { margin: 0 0 12px; padding-left: 20px; }
.research-body li { margin-bottom: 6px; color: var(--muted); }
.research-body li strong { color: var(--ink); }
.research-body a { color: var(--blue); }
.research-body p { color: var(--muted); margin: 0 0 10px; }
.gen-note.warn { color: var(--yellow); }

.spinner-line { display: flex; align-items: center; gap: 12px; color: var(--muted); padding: 18px 0; }
.spinner-line .ring-spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--aqua);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { color: var(--faint); padding: 40px 10px; text-align: center; }

/* ---------- Typeform-style flow ---------- */
body.flow-body { overflow-x: hidden; min-height: 100vh; }

.ring-field {
  position: fixed; inset: -60px; z-index: 0; pointer-events: none;
  --rfx: 0; --rfy: 0;
}
.rf-layer { position: absolute; inset: 0; background-repeat: repeat; }
.rf-rings {
  opacity: 0.055;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480"><g fill="none"><circle cx="120" cy="150" r="92" stroke="%2301FFFF" stroke-width="1.5"/><circle cx="120" cy="150" r="60" stroke="%2301FFFF" stroke-width="1"/><circle cx="392" cy="70" r="46" stroke="%233DB7E9" stroke-width="1.5"/><circle cx="320" cy="368" r="24" stroke="%23C6B9FF" stroke-width="1.5"/><circle cx="440" cy="270" r="10" stroke="%2301FFFF" stroke-width="1.5"/></g></svg>');
  background-size: 480px 480px;
  transform: translate(calc(var(--rfx) * 18px), calc(var(--rfy) * 18px));
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
  animation: rf-drift 160s linear infinite;
}
.rf-dots {
  opacity: 0.08;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="260" height="260" viewBox="0 0 260 260"><g fill="%23F5F7F8"><circle cx="30" cy="44" r="2"/><circle cx="150" cy="20" r="1.6"/><circle cx="228" cy="92" r="2"/><circle cx="86" cy="140" r="1.6"/><circle cx="196" cy="196" r="2"/><circle cx="40" cy="228" r="1.6"/><circle cx="130" cy="250" r="1.4"/></g></svg>');
  background-size: 260px 260px;
  transform: translate(calc(var(--rfx) * 34px), calc(var(--rfy) * 34px));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  animation: rf-drift 90s linear infinite reverse;
}
@keyframes rf-drift {
  from { background-position: 0 0; }
  to { background-position: 480px 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-layer { animation: none; transition: none; }
}

.flow-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 5;
  background: rgba(245, 247, 248, 0.08);
}
.flow-progress-fill {
  height: 100%; width: 0; background: var(--aqua);
  transition: width 0.35s ease;
}

.flow-wrap { position: relative; z-index: 1; max-width: 820px; }
#flow { min-height: 62vh; padding: 5vh 0 40px; }

.screen {
  max-width: 700px;
  transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.38s ease;
  outline: none;
}
.screen.enter-up { transform: translateY(36px); opacity: 0; }
.screen.enter-down { transform: translateY(-36px); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .screen { transition: none; }
}

.intro-screen h1 {
  font-size: clamp(34px, 6.4vw, 56px);
  font-weight: 800; letter-spacing: -0.018em; line-height: 1.06;
  margin: 8vh 0 20px; max-width: 14ch;
}
.intro-screen h1 .accent { color: var(--aqua); }
.intro-screen .lede { color: var(--muted); max-width: 52ch; font-size: 18.5px; margin: 0 0 10px; }
.intro-cta { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.btn-big { padding: 16px 40px; font-size: 17.5px; }
.key-hint-inline { color: var(--faint); font-size: 13.5px; }
.key-hint-inline strong { color: var(--muted); }

.q-title {
  font-size: clamp(24px, 4.4vw, 37px);
  font-weight: 800; letter-spacing: -0.015em; line-height: 1.14;
  margin: 4vh 0 10px;
}
.q-sub { color: var(--muted); font-size: 16px; margin: 0 0 24px; max-width: 56ch; }
.screen .q-fields { margin-top: 24px; }
.screen .field { margin-bottom: 20px; max-width: 560px; }
.screen .choices-field { max-width: 640px; margin-top: 26px; }
.screen .choices.stack { max-width: 560px; }
.screen textarea, .screen input[type="text"], .screen input[type="email"] { font-size: 17px; }
.screen textarea { min-height: 110px; }

.flow-nav {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 700px; margin-top: 30px; gap: 14px;
}
.flow-nav-right { display: flex; align-items: center; gap: 16px; }
.q-count { color: var(--faint); font-size: 13.5px; }
.key-hint { color: var(--faint); font-size: 13px; margin-top: 14px; }
.key-hint strong { color: var(--muted); }

.success-screen { text-align: left; padding: 10vh 0 40px; }
.success-screen .big-ring { margin: 0 0 26px; }
.success-screen h2 { font-size: clamp(26px, 4.6vw, 38px); margin: 0 0 12px; letter-spacing: -0.01em; }
.success-screen p { color: var(--muted); max-width: 50ch; }

@media print {
  body { background: #fff; color: #111; }
  .site-header, .sub-list-col, .btn, .btn-row, .site-footer { display: none !important; }
  .team-layout { grid-template-columns: 1fr; }
  .card { border: 0; padding: 0; background: #fff; }
  .detail h3 { color: #0a7c8a; }
  .q-item .q-pillar { color: #1b6ea8; }
  .pill { color: #333; border-color: #bbb; }
}