/* ============================================================================
   anket.css — anket.oneteamglobal.ai
   İki katman:
   ① TABAN (bu blok): referans sitedeki tailwind/shadcn bileşenlerinin (düğme,
      giriş alanı, sekme, onay kutusu, radyo, ilerleme, OTP) aynı görünümü
      veren el yazımı karşılığı + tarayıcı sıfırlaması (preflight).
   ② ÖZEL: referans sitenin kendi stil dosyası (renk, ölçü, kırılımlar) —
      birebir alındı; sınıf adları anket.js'teki DOM ile aynı.
   ========================================================================== */

/* ---- sıfırlama (tailwind preflight'ın burada gereken kısmı) ---- */
*, ::before, ::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
ol, ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; border-radius: 0; letter-spacing: inherit; }
button { cursor: pointer; appearance: none; }
textarea { resize: vertical; }
::placeholder { color: var(--muted-foreground); opacity: 1; }
fieldset { min-width: 0; }
legend { padding: 0; }
summary { display: list-item; }
[hidden] { display: none !important; }
svg.lucide { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- düğme (shadcn Button: default / outline / ghost) ---- */
.btn {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 8px 16px; border-radius: calc(var(--radius) - 2px);
  font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap;
  background: var(--primary); color: var(--primary-foreground);
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, opacity .15s;
  outline: none;
}
.btn:has(> svg) { padding-inline: 12px; }
.btn:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.btn:disabled { pointer-events: none; opacity: .5; }
.btn:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.btn svg { pointer-events: none; flex-shrink: 0; width: 16px; height: 16px; }
/* Tailwind v4'te `border` sınıfının rengi currentColor'dır (referansta çerçeve koyu görünür). */
.btn-outline { border: 1px solid currentColor; background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }

/* ---- giriş alanı / metin alanı ---- */
.inp {
  display: block; height: 36px; width: 100%; min-width: 0; padding: 4px 12px;
  border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
  font-size: 16px; line-height: 24px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  transition: color .15s, box-shadow .15s; outline: none;
}
.ta {
  display: flex; min-height: 64px; width: 100%; padding: 8px 12px;
  border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
  font-size: 16px; line-height: 24px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  transition: color .15s, box-shadow .15s; outline: none; field-sizing: content;
}
.inp:focus-visible, .ta:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.inp:disabled, .ta:disabled { cursor: not-allowed; opacity: .5; }
@media (min-width: 768px) { .inp, .ta { font-size: 14px; line-height: 20px; } }

/* ---- onay kutusu (button[role=checkbox]) ---- */
.cb {
  display: grid; place-content: center; width: 16px; height: 16px; flex-shrink: 0;
  border: 1px solid var(--input); border-radius: 4px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  transition: box-shadow .15s; outline: none; color: inherit;
}
.cb:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.cb:disabled { cursor: not-allowed; opacity: .5; }
.cb[data-state="checked"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.cb > svg { width: 14px; height: 14px; display: none; pointer-events: none; }
.cb[data-state="checked"] > svg { display: block; }

/* ---- radyo (button[role=radio]) ---- */
.rd {
  position: relative; display: grid; place-content: center; width: 16px; height: 16px; flex-shrink: 0; aspect-ratio: 1;
  border: 1px solid var(--input); border-radius: 50%; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  color: var(--primary); transition: color .15s, box-shadow .15s; outline: none;
}
.rd:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.rd > svg { width: 8px; height: 8px; fill: var(--primary); stroke: none; display: none; pointer-events: none; }
.rd[data-state="checked"] > svg { display: block; }

/* ---- ilerleme çubuğu ---- */
.prog { position: relative; display: block; width: 100%; height: 8px; overflow: hidden; border-radius: 9999px; background: color-mix(in oklab, var(--primary) 20%, transparent); }
.prog > span { display: block; width: 100%; height: 100%; background: var(--primary); transition: transform .3s; }

/* ---- sekmeler ---- */
[data-slot="tabs"] { display: flex; flex-direction: column; gap: 8px; }
[data-slot="tabs-list"] {
  display: inline-flex; width: fit-content; height: 36px; align-items: center; justify-content: center;
  padding: 3px; border-radius: var(--radius); background: var(--muted); color: var(--muted-foreground);
}
[data-slot="tabs-trigger"] {
  position: relative; display: inline-flex; flex: 1; height: calc(100% - 1px); align-items: center; justify-content: center; gap: 6px;
  padding: 4px 8px; border: 1px solid transparent; border-radius: calc(var(--radius) - 2px);
  font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap;
  color: color-mix(in oklab, var(--foreground) 60%, transparent); transition: color .15s, background-color .15s, box-shadow .15s;
}
[data-slot="tabs-trigger"]:hover { color: var(--foreground); }
[data-slot="tabs-trigger"][data-state="active"] { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
[data-slot="tabs-trigger"] svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
[data-slot="tabs-content"] { flex: 1; outline: none; }

/* ---- tek kullanımlık kod (OTP) ---- */
[data-slot="input-otp"] { position: relative; display: flex; align-items: center; gap: 8px; cursor: text; user-select: none; }
[data-slot="input-otp-group"] { display: flex; align-items: center; }
[data-slot="input-otp-slot"] {
  position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-top: 1px solid var(--input); border-bottom: 1px solid var(--input); border-right: 1px solid var(--input);
  font-size: 14px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); transition: box-shadow .15s, border-color .15s; outline: none;
}
[data-slot="input-otp-slot"]:first-child { border-left: 1px solid var(--input); border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); }
[data-slot="input-otp-slot"]:last-child { border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); }
[data-slot="input-otp-slot"][data-active="true"] { z-index: 10; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.otp-caret { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.otp-caret > i { display: block; width: 1px; height: 16px; background: var(--foreground); animation: caret-blink 1s ease-out infinite; }
.otp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-family: monospace; }
@keyframes caret-blink { 0%, 70%, to { opacity: 1; } 20%, 50% { opacity: 0; } }

/* ============================================================================
   ② ÖZEL — referans sitenin stil dosyası
   ========================================================================== */
:root {
  --background: #fcfcfd;
  --foreground: #182f3c;
  --card: #fff;
  --card-foreground: #182f3c;
  --popover: #fff;
  --popover-foreground: #182f3c;
  --primary: #174656;
  --primary-foreground: #fff;
  --secondary: #eef3f5;
  --secondary-foreground: #183a47;
  --muted: #f2f5f7;
  --muted-foreground: #5c6c76;
  --accent: #e9f1f3;
  --accent-foreground: #174656;
  --destructive: #b62c37;
  --border: #d8e0e5;
  --input: #bbc9d0;
  --ring: #43899a;
  --chart-1: #174656;
  --chart-2: #347b8d;
  --chart-3: #bf9953;
  --radius: 0.75rem;
}
* {
  box-sizing: border-box;
}
body {
  background: var(--background);
  color: var(--foreground);
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
button,
a,
input,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}
button,
summary {
  cursor: pointer;
}
h1,
h2,
h3,
p {
  margin: 0;
}
a {
  color: inherit;
}
:is(button:focus-visible, a:focus-visible, summary:focus-visible) {
  outline-offset: 5px;
  outline: 3px solid #5197aa;
}
h1:focus {
  outline: none;
}
.app-shell {
  grid-template-columns: minmax(285px, 31%) minmax(0, 1fr);
  min-height: 100vh;
  display: grid;
}
.journey-panel {
  color: #fff;
  background: #000;
  flex-direction: column;
  height: 100vh;
  min-height: 700px;
  padding: 44px clamp(28px, 3.6vw, 65px);
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.brand-logo {
  background: #000;
  border-radius: 8px;
  flex-shrink: 0;
  display: block;
  position: relative;
  overflow: hidden;
}
.brand-logo img {
  width: 140%;
  max-width: none;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.desktop-logo {
  width: 190px;
  height: 136px;
}
.mobile-logo {
  width: 108px;
  height: 76px;
}
.admin-logo {
  width: 120px;
  height: 84px;
}
.eyebrow {
  letter-spacing: 0.15em;
  color: #376575;
  margin-bottom: 22px;
  font-size: 0.75rem;
  font-weight: 700;
  display: block;
}
em {
  font-family:
    Georgia,
    Times New Roman,
    serif;
  font-weight: 400;
}
.journey-heading {
  margin-top: 42px;
}
.journey-heading .eyebrow {
  color: #bacbd3;
  margin-bottom: 0;
  font-size: 12px;
}
.journey-nav {
  gap: 18px;
  margin-top: 32px;
  display: grid;
}
.journey-step {
  color: #b0c2cc;
  align-items: center;
  gap: 15px;
  display: flex;
}
.journey-step > span {
  border: 1px solid #49606d;
  border-radius: 50%;
  place-items: center;
  width: 35px;
  height: 35px;
  font-size: 12px;
  display: grid;
}
.journey-step strong {
  font-size: 14px;
  font-weight: 400;
}
.journey-step.current {
  color: #fff;
}
.journey-step.current > span {
  color: #112c3a;
  background: #e0c78b;
  border-color: #e0c78b;
  font-weight: 700;
}
.journey-step.current strong {
  font-weight: 700;
}
.journey-step.complete > span {
  color: #e0c78b;
}
.journey-bottom {
  margin-top: auto;
  padding-top: 44px;
}
.journey-bottom span {
  color: #b4c5cf;
  letter-spacing: 0.12em;
  font-size: 12px;
}
.journey-bottom p {
  color: #b4c5cf;
  margin-top: 8px;
  font-size: 14px;
}
.main-panel {
  min-width: 0;
  padding: 35px clamp(24px, 5.2vw, 90px) 22px;
}
.mobile-brand {
  display: none;
}
.topbar {
  color: #5d6d76;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  display: flex;
}
.topbar > span:last-child {
  align-items: center;
  gap: 7px;
  display: flex;
}
.step-progress {
  background: #e1e8eb;
  border-radius: 0;
  height: 3px;
  margin-top: 18px;
}
.content {
  max-width: 710px;
  margin: 62px auto 0;
  animation: 0.35s both appear;
}
.content.wide {
  max-width: 800px;
  margin-top: 44px;
}
h1 {
  letter-spacing: -0.045em;
  margin-bottom: 28px;
  font-size: clamp(36px, 3.9vw, 59px);
  font-weight: 500;
  line-height: 1.1;
}
h1 em {
  color: #2c6976;
  letter-spacing: -0.04em;
}
.lead {
  color: #405865;
  margin-bottom: 21px;
  font-size: 18px;
  line-height: 1.8;
}
.welcome > p:not(.lead) {
  color: #566a75;
  font-size: 16px;
}
.welcome > p strong {
  color: #243f4e;
  font-weight: 500;
}
.welcome h1 {
  letter-spacing: -0.035em;
  font-size: clamp(35px, 3.3vw, 51px);
  font-weight: 500;
  line-height: 1.19;
}
.welcome-closing {
  margin-top: 22px;
}
.welcome .authority-note {
  border-top: 1px solid #e0e7eb;
  padding-top: 23px;
}
.authority-note {
  color: #5d707c;
  gap: 12px;
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.7;
  display: flex;
}
.authority-note svg {
  flex-shrink: 0;
  margin-top: 3px;
}
.authority-note strong {
  color: #314e5c;
  font-weight: 600;
}
.actions {
  border-top: 1px solid #e4eaee;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding-top: 24px;
  display: flex;
}
.primary-button {
  white-space: normal;
  border-radius: 10px;
  gap: 18px;
  height: auto;
  min-height: 52px;
  padding: 15px 23px;
  font-size: 16px;
  font-weight: 600;
}
.primary-button svg {
  width: 18px;
  height: 18px;
}
.back-button {
  color: #576d79;
  height: 48px;
  padding: 14px 6px;
  font-size: 15px;
}
.secondary-button {
  height: 49px;
  margin-top: 25px;
  padding: 0 22px;
  font-size: 16px;
}
.first-step-note {
  color: #6c7f89;
  font-size: 13px;
}
.content-footer {
  letter-spacing: 0.04em;
  color: #6a7b85;
  justify-content: space-between;
  gap: 15px;
  margin-top: 44px;
  padding-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}
.content-footer span {
  letter-spacing: 0;
  font-weight: 400;
}
.roadmap {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 30px 0 48px;
  display: grid;
}
.roadmap > div {
  background: #f5f8fa;
  border: 1px solid #d9e3e8;
  border-left: 3px solid #cadbe1;
  border-radius: 12px;
  padding: 24px 28px;
}
.roadmap > div:first-child {
  border-left-color: #b89a52;
}
.roadmap span {
  color: #5e808e;
  margin-bottom: 8px;
  font-size: 14px;
  display: block;
}
.roadmap strong {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  display: block;
}
.roadmap p {
  color: #5c707b;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}
.roadmap + .section-title {
  color: #566d79;
  border-top: 1px solid #e2e9ed;
  padding-top: 30px;
  font-size: 19px;
}
.section-title {
  letter-spacing: -0.02em;
  margin-bottom: 17px;
  font-size: 22px;
  font-weight: 600;
}
.definitions > div {
  border-bottom: 1px solid #e2e9ed;
  gap: 17px;
  padding: 19px 0;
  display: flex;
}
.definitions > div > svg {
  color: #3d6d7c;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 3px;
}
.definitions h3 {
  font-size: 17px;
  font-weight: 600;
}
.definitions p {
  color: #5a6f7b;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.65;
}
.definitions details {
  margin-top: 9px;
}
.definitions summary {
  color: #2f6274;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  list-style: none;
  display: flex;
}
.definitions summary::-webkit-details-marker {
  display: none;
}
.intro {
  color: #5a707e;
  margin-bottom: 26px;
  font-size: 16px;
}
.model-list {
  gap: 16px;
}
.model-card {
  background: #fff;
  border: 1px solid #d6e1e6;
  border-radius: 16px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  overflow: hidden;
}
.model-card:hover {
  border-color: #789faa;
}
.model-card.selected {
  border: 2px solid #2b6b7d;
  box-shadow: 0 4px 18px #1746560a;
}
.model-choice {
  cursor: pointer;
  align-items: flex-start;
  gap: 16px;
  padding: 23px 23px 12px;
  display: flex;
}
.option-letter {
  color: #4d6e7c;
  background: #edf2f5;
  border-radius: 9px;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 17px;
  font-weight: 700;
  display: grid;
}
.selected .option-letter {
  color: #fff;
  background: #174656;
}
.model-choice h2 {
  letter-spacing: -0.025em;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
.model-choice p {
  color: #5e737f;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.65;
}
.choice-radio {
  width: 22px;
  height: 22px;
  margin-top: 5px;
  margin-left: auto;
}
.model-details {
  padding: 0 25px 22px 75px;
}
.role-line {
  color: #376778;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
}
.schedule-line {
  color: #405e6d;
  border-top: 1px solid #e4ebef;
  align-items: flex-start;
  gap: 9px;
  padding-top: 13px;
  font-size: 14px;
  display: flex;
}
.schedule-line svg {
  flex-shrink: 0;
  margin-top: 3px;
}
.threshold {
  color: #566f7d;
  margin-top: 11px;
  font-size: 14px;
  line-height: 1.6;
}
.model-foot {
  color: #677e8c;
  margin-top: 11px;
  font-size: 13px;
}
.schedule-options {
  background: #f0f6f7;
  border-top: 1px solid #cddde2;
  padding: 21px 25px;
}
.schedule-options h3 {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 600;
}
.schedule-choice {
  cursor: pointer;
  background: #fff;
  border: 1px solid #d4e0e5;
  border-radius: 10px;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  display: flex;
}
.schedule-choice.chosen {
  border-color: #35768a;
}
.schedule-choice > button {
  margin-top: 5px;
}
.schedule-choice strong {
  font-size: 14px;
  font-weight: 600;
}
.schedule-choice p {
  color: #627783;
  margin-top: 4px;
  font-size: 14px;
}
.muted {
  color: #617582;
  margin-top: 21px;
}
.small {
  font-size: 14px;
}
.review-card {
  background: #f1f6f7;
  border: 1px solid #cddde3;
  border-radius: 14px;
  margin-bottom: 29px;
  padding: 22px 24px;
}
.mini-label {
  color: #3f6b7a;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
}
.review-card h3 {
  margin: 10px 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
.review-card p {
  color: #4a6877;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  display: flex;
}
.review-card svg {
  flex-shrink: 0;
  margin-top: 3px;
}
.review-top {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}
.review-top button {
  color: #2b687b;
  text-underline-offset: 3px;
  font-size: 14px;
  text-decoration: underline;
}
.field-row {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  display: grid;
}
.field label {
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 600;
  display: block;
}
.field input {
  background: #fff;
  border-radius: 9px;
  height: 50px;
  font-size: 16px;
}
.field textarea {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  font-size: 16px;
  line-height: 1.6;
}
.field-hint {
  color: #6a7f8b;
  margin-top: 10px;
  font-size: 13px;
}
.comment-field {
  margin-top: 28px;
}
.comment-field label span {
  color: #6b808b;
  margin-left: 5px;
  font-size: 13px;
  font-weight: 400;
}
.counter {
  text-align: right;
  color: #758895;
  margin-top: 4px;
  font-size: 12px;
  display: block;
}
.eligibility {
  cursor: pointer;
  color: #466270;
  align-items: flex-start;
  gap: 12px;
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.7;
  display: flex;
}
.eligibility > button {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 4px;
}
.error-message {
  color: #9b2e3c;
  background: #fff0f0;
  border: 1px solid #ebc5c8;
  border-radius: 9px;
  margin-top: 22px;
  padding: 14px 17px;
  font-size: 15px;
}
.success-symbol {
  color: #31745d;
  background: #e8f3ef;
  border-radius: 50%;
  place-items: center;
  width: 78px;
  height: 78px;
  margin-bottom: 28px;
  display: grid;
}
.success-screen h1 {
  font-size: 46px;
}
.receipt {
  color: #70848e;
  margin-top: 24px;
  font-size: 12px;
}
.admin-page {
  max-width: 1200px;
  margin: auto;
  padding: 26px 35px 70px;
}
.admin-header {
  border-bottom: 1px solid #dce4e8;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 28px;
  display: flex;
}
.admin-brand {
  letter-spacing: 0.06em;
  font-size: 23px;
  text-decoration: none;
}
.admin-header > span {
  color: #5f7785;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  display: flex;
}
.admin-title {
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin: 42px 0 30px;
  display: flex;
}
.admin-title h1 {
  margin-bottom: 10px;
  font-size: 40px;
}
.admin-title .eyebrow {
  margin-bottom: 13px;
}
.admin-title p {
  color: #647c88;
}
.admin-tools {
  gap: 10px;
  display: flex;
}
.admin-tools button {
  height: 43px;
  font-size: 14px;
}
.admin-login {
  background: #fff;
  border: 1px solid #d9e4e8;
  border-radius: 16px;
  gap: 17px;
  max-width: 500px;
  padding: 28px;
  display: grid;
}
.admin-login h2 {
  font-size: 23px;
}
.admin-login p {
  color: #657b87;
}
.admin-login input,
.admin-login button {
  min-height: 46px;
}
.stats-head {
  align-items: center;
  gap: 24px;
  margin: 32px 0;
  display: flex;
}
.stats-head > strong {
  color: #245f72;
  font-size: 64px;
  font-weight: 500;
}
.stats-head h2 {
  font-size: 22px;
}
.stats-head p {
  color: #617785;
  font-size: 14px;
}
.model-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  display: grid;
}
.model-stats section {
  background: #fff;
  border: 1px solid #dce5e9;
  border-radius: 14px;
  padding: 24px;
}
.stat-letter {
  color: #316c7e;
  font-size: 16px;
  font-weight: 700;
}
.model-stats h2 {
  min-height: 55px;
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.5;
}
.stat-number {
  justify-content: space-between;
  align-items: center;
  margin: 18px 0;
  display: flex;
}
.stat-number b {
  font-size: 35px;
  font-weight: 500;
}
.stat-number span {
  color: #627e8b;
}
.schedule-stats {
  background: #edf3f5;
  border-radius: 14px;
  margin: 30px 0;
  padding: 25px;
}
.schedule-stats h2 {
  margin-bottom: 18px;
  font-size: 20px;
}
.schedule-stats > div {
  border-top: 1px solid #d5e1e6;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  font-size: 15px;
  display: flex;
}
.schedule-stats strong {
  white-space: nowrap;
}
.response-heading {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 36px 0 20px;
  display: flex;
}
.response-heading h2 {
  font-size: 22px;
}
.response-heading input {
  max-width: 320px;
  height: 45px;
  font-size: 16px;
}
.responses-list {
  gap: 15px;
  display: grid;
}
.responses-list article {
  background: #fff;
  border: 1px solid #dbe5e9;
  border-radius: 14px;
  padding: 25px;
}
.response-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 15px;
  display: flex;
}
.response-header h3 {
  font-size: 18px;
  font-weight: 600;
}
.response-header span,
.response-header time {
  color: #68818e;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.response-model {
  font-size: 16px;
}
.responses-list article > p {
  color: #587480;
  margin-top: 6px;
  font-size: 15px;
}
.responses-list blockquote {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #f3f6f8;
  border-left: 3px solid #b59b63;
  margin: 18px 0 0;
  padding: 16px 20px;
  font-size: 16px;
}
.empty-responses {
  text-align: center;
  color: #587481;
  border: 1px dashed #bfcfd7;
  border-radius: 14px;
  padding: 40px;
}
@keyframes appear {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 1600px) {
  .content {
    margin-top: 85px;
  }
}
@media (max-width: 1000px) {
  .journey-panel {
    padding: 32px 26px;
  }
  .main-panel {
    padding: 30px;
  }
  .content {
    margin-top: 43px;
  }
  .role-line {
    font-size: 12px;
  }
  .field-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .app-shell {
    display: block;
  }
  .journey-panel {
    display: none;
  }
  .main-panel {
    padding: 0 22px 22px;
  }
  .mobile-brand {
    color: #fff;
    background: #000;
    justify-content: space-between;
    align-items: center;
    height: 104px;
    margin: 0 -22px 24px;
    padding: 0 22px;
    display: flex;
  }
  .mobile-brand > span:first-child {
    letter-spacing: 0.06em;
    font-size: 22px;
  }
  .mobile-brand > span:last-child {
    color: #dac68e;
    font-size: 12px;
  }
  .topbar {
    gap: 8px;
    font-size: 12px;
  }
  .topbar > span:last-child {
    gap: 5px;
  }
  .content,
  .content.wide {
    margin-top: 34px;
  }
  h1 {
    font-size: 42px;
    line-height: 1.13;
  }
  .lead {
    font-size: 17px;
    line-height: 1.75;
  }
  .eyebrow {
    margin-bottom: 17px;
    font-size: 12px;
  }
  .welcome h1 {
    font-size: 36px;
    line-height: 1.2;
  }
  .authority-note {
    margin-top: 24px;
    font-size: 13px;
  }
  .actions {
    margin-top: 27px;
    padding-top: 21px;
  }
  .first-step-note {
    max-width: 115px;
    font-size: 12px;
  }
  .primary-button {
    gap: 12px;
    padding: 14px 19px;
    font-size: 15px;
  }
  .content-footer {
    margin-top: 35px;
    font-size: 11px;
  }
  .content-footer span {
    text-align: right;
    max-width: 190px;
  }
  .roadmap {
    gap: 14px;
    margin: 27px 0 38px;
  }
  .roadmap > div {
    padding: 20px;
  }
  .roadmap strong {
    font-size: 21px;
  }
  .roadmap p {
    font-size: 15px;
  }
  .model-choice {
    gap: 11px;
    padding: 18px 16px 12px;
  }
  .option-letter {
    width: 29px;
    height: 29px;
    font-size: 14px;
  }
  .model-choice h2 {
    font-size: 18px;
  }
  .model-choice p {
    font-size: 14px;
  }
  .choice-radio {
    width: 20px;
    height: 20px;
    margin-top: 4px;
  }
  .model-details {
    padding: 0 17px 19px 56px;
  }
  .role-line {
    font-size: 12px;
    line-height: 1.65;
  }
  .schedule-line {
    font-size: 14px;
  }
  .model-foot {
    font-size: 12px;
  }
  .threshold {
    font-size: 13px;
  }
  .schedule-options {
    padding: 19px 16px;
  }
  .schedule-options h3 {
    font-size: 15px;
  }
  .schedule-choice {
    gap: 10px;
    padding: 13px 11px;
  }
  .review-card {
    padding: 19px;
  }
  .review-card h3 {
    font-size: 19px;
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .success-screen h1 {
    font-size: 37px;
  }
  .admin-page {
    padding: 20px;
  }
  .admin-title {
    flex-direction: column;
    align-items: flex-start;
  }
  .admin-title h1 {
    font-size: 35px;
  }
  .model-stats {
    grid-template-columns: 1fr;
  }
  .model-stats h2 {
    min-height: 0;
  }
  .stat-number {
    margin: 12px 0;
  }
  .response-heading {
    flex-direction: column;
    align-items: flex-start;
  }
  .response-heading input {
    max-width: none;
  }
  .response-header {
    flex-direction: column;
    gap: 4px;
  }
  .stats-head {
    gap: 17px;
  }
  .stats-head h2 {
    font-size: 18px;
  }
  .stats-head > strong {
    font-size: 55px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
.amare-council-note {
  border-top: 1px solid #dce5e9;
  margin-top: 16px;
  padding-top: 16px;
}
.amare-council-note strong {
  color: #243f4e;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
  display: block;
}
.amare-council-note p {
  color: #566d79;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}
.rejection-screen > .eyebrow,
.rejection-screen > h1 {
  color: #a82932;
}
.rejection-instruction {
  color: #922632;
  background: #fff1f2;
  border: 1px solid #e9b6bc;
  border-radius: 12px;
  gap: 12px;
  margin: 24px 0;
  padding: 18px 20px;
  font-size: 16px;
  display: flex;
}
.rejection-instruction svg {
  flex-shrink: 0;
  margin-top: 3px;
}
.rejection-instruction strong {
  margin-bottom: 4px;
  display: block;
}
.rejection-screen .model-card.rejected {
  background: #fff4f4;
  border: 2px solid #b62e3c;
}
.rejected .option-letter {
  color: #fff;
  background: #ad2836;
}
.rejected .choice-radio {
  color: #b62e3c;
  background: #ffe4e7;
  border-color: #b62e3c;
}
.rejection-badge {
  color: #fff;
  background: #a82932;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
}
.rejection-reason {
  margin-top: 28px;
}
.rejection-reason > label {
  color: #a82932;
}
.rejection-model-name {
  color: #8e3540;
  margin: 0 0 10px;
  font-size: 14px;
}
.voting-purpose {
  color: #596f7b;
  border-top: 1px solid #dde5e9;
  margin-top: 28px;
  padding-top: 22px;
  font-size: 14px;
}
.voting-purpose p {
  margin-top: 9px;
}
.eliminated-summary,
.review-rejection {
  color: #94333d;
  background: #fff4f4;
  border: 1px solid #e8c2c7;
  border-radius: 12px;
  margin: 20px 0;
  padding: 18px 22px;
}
.eliminated-summary > span {
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  font-size: 12px;
  display: block;
}
.eliminated-summary > strong {
  font-size: 15px;
  display: block;
}
.eliminated-summary > button {
  cursor: pointer;
  margin-top: 9px;
  font-size: 14px;
  text-decoration: underline;
}
.review-rejection h3 {
  margin: 10px 0;
  font-size: 18px;
  font-weight: 600;
}
.review-rejection p,
.response-rejection p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
}
.review-rejection .mini-label {
  color: #94333d;
}
.rejection-stat {
  color: #a82932;
  border-top: 1px solid #e7d3d5;
  gap: 4px;
  margin-top: 16px;
  padding-top: 14px;
  font-size: 14px;
  display: grid;
}
.rejection-stat span {
  color: #765761;
  font-size: 12px;
}
.response-rejection {
  color: #94333d;
  background: #fff4f4;
  border-left: 3px solid #b62e3c;
  margin: 16px 0;
  padding: 10px 15px;
}
.response-rejection strong {
  font-size: 14px;
}
.roadmap p.roadmap-voting {
  margin-top: 10px;
  font-size: 14px;
}
.rejected .choice-radio svg {
  fill: #b62e3c;
}
.rejection-badge {
  padding: 10px 14px;
  font-size: 18px;
  font-weight: 800;
}
.survey-status {
  color: #3b5968;
  background: #f2f6f8;
  border-left: 3px solid #b79c61;
  border-radius: 8px;
  gap: 5px;
  margin: 18px 0;
  padding: 13px 16px;
  font-size: 13px;
  display: grid;
}
.survey-status strong {
  color: #253f4c;
}
.survey-utility {
  color: #33677a;
  justify-content: flex-end;
  gap: 20px;
  margin: 14px 0;
  font-size: 14px;
  display: flex;
}
.survey-utility a,
.survey-utility button {
  cursor: pointer;
  text-decoration: underline;
}
.journey-bottom a {
  color: #e1ca96;
  margin-bottom: 14px;
  display: block;
}
.welcome-actions {
  border-top: 1px solid #dce5e9;
  flex-direction: column;
  gap: 24px;
  margin-top: 30px;
  padding-top: 28px;
  display: flex;
}
.welcome-edit-note {
  color: #405c69;
  gap: 12px;
  font-size: 14px;
  line-height: 1.65;
  display: flex;
}
.welcome-edit-note > svg {
  color: #517784;
  flex-shrink: 0;
  margin-top: 3px;
}
.welcome-edit-note > div > strong {
  color: #233f4e;
  margin-bottom: 5px;
  font-size: 16px;
  display: block;
}
.welcome-edit-note p strong {
  font-weight: 600;
}
.welcome-start > .primary-button {
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
}
.welcome-start > p {
  text-align: center;
  color: #5c717b;
  max-width: 540px;
  margin: 10px auto 0;
  font-size: 14px;
  line-height: 1.65;
}
.welcome-return {
  border-top: 1px solid #e1e8eb;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 22px;
  display: flex;
}
.welcome-return > p {
  color: #5c717b;
  font-size: 14px;
}
.welcome-return > button {
  color: #315a6a;
  border-color: #bfced5;
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 18px;
}
@media (max-width: 480px) {
  .welcome-return {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .welcome-return > p {
    text-align: center;
  }
}
.public-intro-note {
  background: #f3f7f8;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px !important;
}
.saved-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  display: flex;
}
.saved-actions > a {
  color: #2f687b;
  text-decoration: underline;
}
.legacy-consent {
  background: #faf7ee;
  border: 1px solid #d4c6a8;
  border-radius: 12px;
  margin: 22px 0;
  padding: 20px;
}
.legacy-consent > p {
  color: #5c6b73;
  margin-top: 10px;
}
.public-consent {
  background: #f1f6f7;
  border-radius: 8px;
  padding: 16px;
}
.email-verification .field {
  margin-bottom: 22px;
}
.otp-field {
  margin-top: 26px;
}
.otp-field [data-slot="input-otp-slot"] {
  width: 44px;
  height: 52px;
  font-size: 24px;
}
.verification-links {
  color: #276276;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 14px;
  font-size: 14px;
  display: flex;
}
.verification-links button {
  cursor: pointer;
  text-decoration: underline;
}
.public-results {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 28px 30px 60px;
}
.public-header {
  color: #ead79e;
  background: #000;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding: 14px 24px;
  display: flex;
}
.public-results h1 {
  font-size: 42px;
}
.public-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 26px 0;
  display: flex;
}
.public-models {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}
.public-models article {
  background: #fff;
  border: 1px solid #d3e0e6;
  border-radius: 14px;
  padding: 22px;
}
.public-models h2 {
  min-height: 105px;
  margin: 12px 0 18px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}
.public-models article > div {
  color: #225d69;
  align-items: baseline;
  gap: 10px;
  display: flex;
}
.public-models article > div strong {
  font-size: 30px;
}
.public-models article > div span {
  font-size: 13px;
}
.public-models article > .public-rejected {
  color: #a82932;
}
.public-list-heading {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 38px 0 18px;
  display: flex;
}
.public-list-heading h2 {
  font-size: 22px;
  font-weight: 600;
}
.public-list-heading input {
  max-width: 260px;
}
.public-table-head,
.public-person summary {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  display: grid;
}
.public-table-head {
  color: #5c7785;
  border-bottom: 1px solid #d6e0e5;
  font-size: 13px;
}
.public-person {
  background: #fff;
  border-bottom: 1px solid #dce5e9;
}
.public-person summary {
  cursor: pointer;
  font-size: 15px;
  list-style: none;
}
.public-person summary::-webkit-details-marker {
  display: none;
}
.public-person summary small {
  color: #6e818b;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  display: block;
}
.public-person summary strong {
  overflow-wrap: anywhere;
}
.vote-tag {
  border-radius: 7px;
  justify-self: start;
  padding: 6px 10px;
  font-size: 13px;
}
.vote-tag.positive {
  color: #22634e;
  background: #e7f3ef;
}
.vote-tag.negative {
  color: #9d3440;
  background: #fff0f0;
}
.public-reasons {
  color: #536b77;
  border-top: 1px solid #edf1f3;
  padding: 10px 20px 22px;
  font-size: 14px;
}
.public-reasons p {
  margin: 9px 0;
}
.public-quote {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #f7f9fa;
  border-left: 3px solid #c3d1d8;
  padding: 12px 16px;
}
.public-bottom-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 35px;
  display: flex;
}
.public-primary-link {
  color: #fff;
  background: #174656;
  border-radius: 9px;
  padding: 13px 23px;
}
.mail-setup {
  background: #f7f9fa;
  border: 1px solid #cfdae0;
  border-radius: 14px;
  margin: 30px 0;
  padding: 25px;
}
.mail-setup h2 {
  font-size: 21px;
  font-weight: 600;
}
.mail-setup summary {
  cursor: pointer;
  color: #2b6274;
  margin: 16px 0;
  font-weight: 600;
}
.mail-setup .field {
  margin: 18px 0;
}
.mail-setup form {
  max-width: 520px;
}
.mail-setup form > .muted {
  margin-bottom: 20px;
}
.mail-provider {
  gap: 24px;
  display: flex;
}
.mail-provider label {
  align-items: center;
  gap: 8px;
  display: flex;
}
.admin-public-link {
  color: #296579;
  text-decoration: underline;
}
@media (max-width: 760px) {
  .public-results {
    padding: 20px 18px 40px;
  }
  .public-header {
    margin-bottom: 28px;
    padding: 10px 15px;
  }
  .public-results h1 {
    font-size: 34px;
  }
  .public-models {
    grid-template-columns: 1fr;
  }
  .public-models h2 {
    min-height: 0;
  }
  .public-list-heading {
    display: block;
  }
  .public-list-heading input {
    max-width: none;
    margin-top: 14px;
  }
  .public-table-head,
  .public-person summary {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 13px 10px;
  }
  .vote-tag {
    padding: 5px 6px;
    font-size: 12px;
  }
  .public-person summary {
    font-size: 14px;
  }
  .rejection-badge {
    font-size: 16px;
  }
  .rejection-screen > h1 {
    font-size: 34px;
  }
  .mail-setup {
    padding: 18px;
  }
}
.results-next-note {
  color: #335968;
  background: #edf5f6;
  border-left: 3px solid #347182;
  border-radius: 10px;
  margin: 22px 0;
  padding: 18px 20px;
  font-size: 15px;
}
.results-next-note p {
  margin-top: 6px;
}
.results-in-flow .public-models h2 {
  min-height: 126px;
  font-size: 15px;
}
.results-in-flow .public-models article {
  padding: 18px;
}
.results-in-flow .public-models article > div {
  flex-wrap: wrap;
  gap: 0 8px;
}
.results-in-flow .public-models article > div span {
  font-size: 12px;
}
.journey-bottom > button {
  color: #e1ca96;
  cursor: pointer;
  margin-bottom: 14px;
  display: block;
}
@media (max-width: 760px) {
  .results-in-flow .public-models h2 {
    min-height: 0;
  }
}
.phase-scope {
  color: #254858;
  background: #eaf2f5;
  border: 1px solid #c8d9df;
  border-left: 5px solid #356575;
  border-radius: 12px;
  margin: 24px 0;
  padding: 24px;
}
.phase-scope > strong {
  margin-bottom: 10px;
  font-size: 21px;
  line-height: 1.4;
  display: block;
}
.phase-scope p {
  font-size: 16px;
  line-height: 1.7;
}
.roadmap > div.phase-current {
  background: #fffaf0;
  border-color: #ddc992;
  border-left-width: 5px;
}
.roadmap .phase-badge {
  color: #49606c;
  letter-spacing: 0.025em;
  background: #e4ebef;
  border-radius: 5px;
  margin: 16px 0 0;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}
.roadmap .phase-current .phase-badge {
  color: #51411c;
  background: #e9d8a7;
}
@media (max-width: 480px) {
  .phase-scope {
    padding: 20px;
  }
  .phase-scope > strong {
    font-size: 19px;
  }
}
.preference-badge {
  color: #175b33;
  background: #e4f5e9;
  border: 1px solid #84c6a1;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  display: inline-flex;
}
.preference-badge svg {
  flex-shrink: 0;
}
.preference-screen .model-card.selected {
  background: #f2fbf5;
  border-color: #38945c;
}
.preference-screen .model-card.selected .option-letter {
  color: #fff;
  background: #267b49;
}
@media (max-width: 480px) {
  .preference-badge {
    font-size: 16px;
  }
}
.tradeoff-intro {
  color: #3c5967;
  background: #f2f6f8;
  border: 1px solid #d6e1e6;
  border-radius: 12px;
  margin: 22px 0;
  padding: 20px;
}
.tradeoff-intro > strong {
  color: #263f4c;
  font-size: 17px;
  display: block;
}
.tradeoff-intro > p {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.65;
}
.tradeoff-intro > button {
  color: #315f71;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 14px;
  text-decoration: underline;
  display: inline-flex;
}
.model-tradeoffs {
  border: 1px solid #e1e6e8;
  border-radius: 10px;
  margin: 0 0 20px;
  overflow: hidden;
}
.model-tradeoffs strong {
  color: #344f5d;
  margin-bottom: 7px;
  font-size: 14px;
  display: block;
}
.tradeoff-benefit {
  background: #f1f6f5;
  padding: 15px 17px;
}
.tradeoff-benefit p {
  color: #425f65;
  font-size: 14px;
  line-height: 1.65;
}
.tradeoff-costs {
  background: #fcfaf5;
  border-top: 1px solid #e1e6e8;
  padding: 15px 17px;
}
.tradeoff-costs ul {
  color: #625a49;
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.65;
}
.tradeoff-costs li + li {
  margin-top: 9px;
}
.tradeoff-comment {
  background: #f4f7f8;
  border: 1px solid #dce5e9;
  border-radius: 12px;
  margin-top: 26px;
  padding: 22px;
}
.tradeoff-comment .field-hint {
  margin: 8px 0 14px;
}
.model-feedback {
  margin: 30px 0;
}
.model-feedback h2 {
  margin-bottom: 8px;
  font-size: 22px;
  line-height: 1.4;
}
.model-feedback > p {
  color: #5b707b;
  margin-bottom: 16px;
  font-size: 14px;
}
.model-feedback > details {
  background: #fff;
  border: 1px solid #d9e3e7;
  border-radius: 10px;
  margin-top: 10px;
}
.model-feedback summary {
  color: #304f5f;
  padding: 16px;
  font-size: 14px;
}
.model-feedback summary > span {
  font-weight: 600;
}
.model-feedback summary > small {
  color: #627c86;
  margin-top: 5px;
  display: block;
}
.model-feedback-body {
  padding: 0 18px 18px;
}
.model-feedback-body article {
  border-top: 1px solid #e0e8eb;
  padding: 16px 0;
}
.model-feedback-body article > strong {
  font-size: 14px;
  display: block;
}
.model-feedback-body article > span {
  color: #627784;
  margin: 3px 0 8px;
  font-size: 12px;
  display: block;
}
.model-feedback-body p {
  color: #455c68;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
}
@media (max-width: 480px) {
  .tradeoff-comment {
    padding: 16px;
  }
  .tradeoff-intro {
    padding: 17px;
  }
}
.amare-followup {
  color: #405d6b;
  background: #f5f8fa;
  border: 1px solid #dce5e9;
  border-radius: 10px;
  margin: 0 0 32px;
  padding: 20px;
}
.amare-followup > strong {
  margin-bottom: 8px;
  font-size: 16px;
  display: block;
}
.amare-followup > p,
.naming-note > p {
  font-size: 14px;
  line-height: 1.7;
}
.amare-followup + .section-title {
  border-top: 1px solid #e2e9ed;
  padding-top: 28px;
}
.naming-note {
  color: #5b5749;
  background: #fcfaf4;
  border-left: 3px solid #b89a52;
  border-radius: 6px;
  margin: 16px 0 22px;
  padding: 16px 18px;
}
.naming-note > strong {
  margin-bottom: 6px;
  font-size: 15px;
  display: block;
}
.definitions .name-proposals {
  background: #f3f6f8;
  border-radius: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.65;
}
.example-banner {
  color: #6a501b;
  background: #fff7e4;
  border: 1px solid #ddbb62;
  border-left: 5px solid #b58a2d;
  border-radius: 12px;
  margin: 22px 0;
  padding: 20px 22px;
}
.example-banner > strong {
  font-size: 17px;
  line-height: 1.5;
  display: block;
}
.example-banner > p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
}
.example-badge {
  vertical-align: middle;
  color: #765519;
  letter-spacing: 0.04em;
  background: #fff5da;
  border: 1px solid #dec785;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  display: inline-block;
}
.public-models article > .example-badge {
  width: fit-content;
  margin-bottom: 12px;
  display: block;
}
.public-person summary > strong > .example-badge {
  width: fit-content;
  margin-top: 5px;
  display: block;
}
.example-inline-note {
  color: #765519;
  background: #fff7e5;
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 13px;
}
.results-mode-actions {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}
@media (max-width: 600px) {
  .public-toolbar {
    flex-wrap: wrap;
    gap: 14px;
  }
  .results-mode-actions {
    width: 100%;
  }
}
.member-portal {
  max-width: 1240px;
  min-height: 100vh;
  margin: auto;
  padding: 24px 40px 70px;
}
.portal-header {
  color: #e4d19b;
  background: #000;
  border-radius: 14px;
  align-items: center;
  gap: 25px;
  padding: 14px 24px;
  display: flex;
}
.portal-logo {
  border: 0;
  width: 135px;
  height: 90px;
}
.portal-header > span {
  letter-spacing: 0.015em;
  font-size: 15px;
}
.portal-exit {
  color: #eadcba;
  margin-left: auto;
  font-size: 13px;
  text-decoration: underline;
}
.portal-review-banner {
  color: #705824;
  background: #fff9eb;
  border: 1px solid #e3d5ad;
  border-radius: 9px;
  flex-wrap: wrap;
  gap: 5px 18px;
  margin: 18px 0 35px;
  padding: 13px 18px;
  font-size: 13px;
  display: flex;
}
.portal-review-banner > strong {
  letter-spacing: 0.035em;
  font-size: 12px;
}
.portal-entry-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  max-width: 620px;
  margin: 35px auto 0;
  padding: 10px 0;
  display: grid;
}
.portal-intro {
  text-align: center;
}
.portal-intro h1 {
  margin-bottom: 16px;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.18;
}
.portal-intro > p {
  color: #536a77;
  max-width: 440px;
  margin: auto;
  font-size: 16px;
  line-height: 1.7;
}
.portal-login-card {
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 0;
}
.portal-login-card .portal-email-button {
  background: #fff;
  gap: 10px;
  width: 100%;
  min-height: 48px;
}
.portal-login-card .portal-entry-caption {
  text-align: center;
  margin: 10px 0 24px;
  font-size: 13px;
}
.portal-login-card .portal-access-note {
  text-align: center;
  border-top: 1px solid #dce5e9;
  margin: 24px 0 0;
  padding-top: 18px;
  font-size: 12px;
  line-height: 1.7;
}
.portal-login-card h2 {
  margin: 12px 0;
  font-size: 26px;
  font-weight: 600;
}
.portal-login-card p {
  color: #526c79;
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.7;
}
.portal-login-card .primary-button {
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
}
.portal-login-card small {
  text-align: center;
  color: #6d7f86;
  margin: 10px 0 18px;
  font-size: 12px;
  display: block;
}
.portal-login-card .portal-text-link {
  text-align: center;
  color: #376779;
  width: 100%;
  margin-top: 17px;
  font-size: 13px;
  text-decoration: underline;
  display: block;
}
.portal-login-card label {
  margin-bottom: 8px;
  font-size: 14px;
  display: block;
}
.portal-login-card label > span {
  color: #71858f;
  font-size: 12px;
}
.portal-login-card form > .primary-button {
  margin-top: 20px;
}
.portal-dashboard {
  max-width: 1020px;
  margin: auto;
}
.portal-dashboard-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin: 35px 0;
  display: flex;
}
.portal-dashboard-heading h1 {
  margin-bottom: 10px;
  font-size: 38px;
}
.portal-dashboard-heading .eyebrow {
  margin-bottom: 12px;
}
.portal-dashboard-heading p,
.portal-tab-intro {
  color: #5d7581;
  font-size: 14px;
}
.portal-tabs [data-slot="tabs-list"] {
  background: #eaf0f3;
  border-radius: 10px;
  width: 100%;
  height: auto;
  margin-bottom: 25px;
  padding: 5px;
  display: flex;
}
.portal-tabs [data-slot="tabs-trigger"] {
  padding: 13px 16px;
  font-size: 15px;
}
.portal-tabs [data-slot="tabs-trigger"][data-state="active"] {
  color: #254f60;
  background: #fff;
}
.portal-survey-card {
  background: #fff;
  border: 1px solid #dce5e9;
  border-radius: 13px;
  margin-bottom: 20px;
  padding: 26px;
}
.portal-survey-card.current {
  background: #edf5f5;
  border: 1px solid #adc7ca;
  border-top: 4px solid #265969;
  margin-bottom: 36px;
  padding: 30px;
}
.portal-survey-card.current h2 {
  color: #193f4b;
  font-size: 29px;
}
.portal-survey-card.current .portal-tag {
  color: #fff;
  background: #265969;
}
.portal-survey-card.current .portal-current-scope {
  max-width: 680px;
  margin-top: 10px;
  font-size: 14px;
}
.portal-survey-card.current .portal-card-actions .primary-button {
  min-height: 48px;
}
.portal-card-top {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  display: flex;
}
.portal-card-top > span:last-child {
  color: #677b86;
  font-size: 12px;
}
.portal-tag {
  color: #326175;
  letter-spacing: 0.03em;
  background: #e7f1f3;
  border-radius: 5px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
}
.portal-tag.muted {
  color: #687c87;
  background: #eef2f4;
}
.portal-survey-card h2 {
  margin: 12px 0;
  font-size: 23px;
  line-height: 1.4;
}
.portal-survey-card p {
  color: #526a77;
  font-size: 15px;
  line-height: 1.7;
}
.portal-survey-card small {
  color: #71848d;
  margin-top: 15px;
  font-size: 12px;
  display: block;
}
.portal-card-actions {
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 22px;
  display: flex;
}
.portal-planned {
  display: block;
}
.portal-planned > h2 {
  margin-bottom: 8px;
  font-size: 20px;
}
.portal-planned > p {
  color: #657b85;
  margin-bottom: 24px;
  font-size: 14px;
}
.portal-survey-sequence {
  margin: 0;
  padding: 0;
  list-style: none;
}
.portal-survey-sequence > li {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 25px;
  display: grid;
  position: relative;
}
.portal-survey-sequence > li:not(:last-child):before {
  content: "";
  background: #d5e0e5;
  width: 1px;
  position: absolute;
  top: 38px;
  bottom: 0;
  left: 18px;
}
.portal-sequence-number {
  color: #526b76;
  background: #f1f5f7;
  border: 1px solid #ccdce2;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 15px;
  font-weight: 600;
  display: grid;
}
.portal-survey-sequence article {
  border-bottom: 1px solid #e0e7eb;
  padding: 2px 0 22px;
}
.portal-survey-sequence > li:last-child article {
  border-bottom: 0;
}
.portal-sequence-label {
  color: #6b808b;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: 600;
}
.portal-survey-sequence h3 {
  color: #364f5c;
  margin: 7px 0;
  font-size: 19px;
  line-height: 1.4;
}
.portal-survey-sequence p {
  color: #596f7b;
  max-width: 740px;
  font-size: 14px;
  line-height: 1.7;
}
.portal-survey-sequence small {
  color: #6a808b;
  margin-top: 9px;
  font-size: 12px;
  display: block;
}
.portal-bottom-note {
  color: #6b7e88;
  margin: 18px 0;
  font-size: 13px;
}
.portal-tab-title {
  margin-bottom: 10px;
  font-size: 24px;
}
.portal-tab-intro {
  margin-bottom: 22px;
}
.portal-empty {
  color: #58717d;
  background: #f2f6f8;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 22px;
  font-size: 14px;
}
.portal-history-example {
  background: #fff;
  border: 1px solid #dce5e9;
  border-radius: 12px;
  margin: 18px 0;
}
.portal-history-example summary {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 21px;
  display: flex;
}
.portal-history-example summary strong {
  font-size: 15px;
}
.portal-history-example summary small {
  color: #6a808b;
  margin-top: 4px;
  font-size: 12px;
  display: block;
}
.portal-history-example > div {
  color: #536d7b;
  border-top: 1px solid #e2e9ec;
  padding: 20px;
  font-size: 14px;
}
.portal-history-example p + p {
  margin-top: 10px;
}
.portal-survey-card > .portal-demo-saved {
  color: #287048;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  font-size: 13px;
  display: flex;
}
.portal-survey-card > button {
  margin-top: 18px;
}
.portal-survey-bar {
  color: #866522;
  border-bottom: 1px solid #dee6eb;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
  padding-bottom: 18px;
  font-size: 12px;
  display: flex;
}
.portal-survey-bar button,
.portal-back {
  color: #34677b;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  display: flex;
}
.portal-results-wrap {
  max-width: 1100px;
  margin: auto;
  padding: 20px;
}
.portal-results-wrap > .portal-back {
  margin-bottom: 15px;
}
@media (max-width: 800px) {
  .member-portal {
    padding: 16px 18px 45px;
  }
  .portal-entry-grid {
    gap: 24px;
    margin-top: 24px;
  }
  .portal-intro h1 {
    font-size: 34px;
  }
  .portal-header {
    gap: 15px;
    padding: 12px 17px;
  }
  .portal-header > span {
    font-size: 12px;
  }
  .portal-login-card {
    padding: 0;
  }
}
@media (max-width: 480px) {
  .portal-logo {
    width: 100px;
    height: 72px;
  }
  .portal-dashboard-heading {
    flex-wrap: wrap;
  }
  .portal-tabs [data-slot="tabs-trigger"] {
    gap: 5px;
    padding: 12px 6px;
    font-size: 12px;
  }
  .portal-tabs [data-slot="tabs-trigger"] svg {
    display: none;
  }
  .portal-survey-card {
    padding: 20px;
  }
  .portal-card-actions {
    flex-direction: column;
  }
  .portal-card-actions button {
    justify-content: center;
    width: 100%;
  }
  .portal-review-banner {
    margin-bottom: 24px;
  }
  .portal-history-example summary {
    gap: 10px;
    padding: 17px;
  }
}
.no-opposition {
  cursor: pointer;
  background: #f4f8fa;
  border: 1px solid #cbd9e0;
  border-radius: 13px;
  align-items: flex-start;
  gap: 15px;
  padding: 24px;
  display: flex;
}
.no-opposition.chosen {
  background: #eaf4f7;
  border: 2px solid #3f788d;
}
.no-opposition > button {
  flex-shrink: 0;
  margin-top: 5px;
}
.no-opposition strong {
  color: #2e5364;
  font-size: 18px;
}
.no-opposition p {
  color: #5b7480;
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.65;
}
.no-opposition div > span {
  color: #34677a;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}
.review-neutral,
.no-opposition-count {
  color: #3c5e6e;
  background: #edf5f7;
  border: 1px solid #d8e5ea;
  border-radius: 9px;
  margin: 18px 0;
  padding: 17px;
  font-size: 14px;
}
.vote-tag.neutral {
  color: #4c6878;
  background: #edf3f6;
}
@media (max-width: 480px) {
  .portal-survey-card.current {
    padding: 22px 20px;
  }
  .portal-survey-card.current h2 {
    font-size: 25px;
  }
  .portal-survey-sequence > li {
    gap: 13px;
  }
  .portal-survey-sequence h3 {
    font-size: 18px;
  }
  .portal-intro h1 {
    font-size: 32px;
  }
}
.results-in-flow .results-title,
.public-results .results-title {
  margin-bottom: 18px;
  font-size: clamp(28px, 3.4vw, 39px);
  line-height: 1.2;
}
.results-example-notice {
  border-left-width: 3px;
  border-radius: 8px;
  margin: 16px 0;
  padding: 12px 16px;
}
.results-example-notice > strong {
  font-size: 12px;
}
.results-example-notice > p {
  margin-top: 4px;
  font-size: 13px;
}
.results-in-flow .public-toolbar,
.public-results .public-toolbar {
  margin: 20px 0 16px;
  font-size: 14px;
}
.results-overview {
  background: #fff;
  border: 1px solid #d2e0e5;
  border-radius: 14px;
  overflow: hidden;
}
.results-overview-heading {
  background: #edf5f5;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 20px;
  display: flex;
}
.results-overview-heading h2 {
  color: #214e5b;
  margin: 0 0 5px;
  font-size: 20px;
  font-weight: 600;
}
.results-overview-heading p {
  color: #47636f;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.results-comparison {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
.results-comparison th:first-child {
  width: 54%;
}
.results-comparison thead th {
  color: #59717d;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #dce6ea;
  padding: 13px 18px;
  font-size: 12px;
  font-weight: 500;
}
.results-comparison thead th:last-child {
  text-align: center;
}
.results-comparison tbody th,
.results-comparison td {
  vertical-align: middle;
  border-bottom: 1px solid #e3eaee;
  padding: 18px;
}
.results-comparison tbody th {
  text-align: left;
  color: #324e5c;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.summary-model-label {
  align-items: center;
  gap: 12px;
  display: flex;
}
.summary-letter {
  color: #466977;
  background: #edf2f5;
  border-radius: 7px;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 700;
  display: grid;
}
.summary-vote {
  color: #246252;
  align-items: baseline;
  gap: 7px;
  display: flex;
}
.summary-vote strong {
  font-size: 23px;
  font-weight: 650;
}
.summary-vote > span {
  color: #5e7780;
  font-size: 12px;
}
.summary-bar {
  background: #e6efed;
  border-radius: 4px;
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
}
.summary-bar > span {
  background: #398775;
  border-radius: 4px;
  height: 100%;
  display: block;
}
.summary-rejection {
  text-align: center;
  color: #a13b45;
  font-size: 22px;
  font-weight: 600;
  display: block;
}
.results-overview-footer {
  background: #fafcfc;
  padding: 14px 20px;
}
.results-overview-footer p {
  color: #49636e;
  margin: 0 0 7px;
  font-size: 13px;
  line-height: 1.6;
}
.results-overview-footer small {
  color: #617985;
  font-size: 12px;
  line-height: 1.6;
  display: block;
}
.results-decision-note,
.results-privacy-note {
  color: #647882;
  margin: 12px 0;
  font-size: 12px;
  line-height: 1.7;
}
.results-flow-hint {
  color: #335d6c;
  margin: 16px 0 0;
  font-size: 13px;
}
.results-in-flow .public-list-heading,
.public-results .public-list-heading {
  margin: 28px 0 8px;
}
.results-list-help {
  color: #607782;
  margin-bottom: 15px;
  font-size: 13px;
}
.results-in-flow .public-person summary,
.public-results .public-person summary {
  padding-top: 12px;
  padding-bottom: 12px;
}
.public-person summary:hover {
  background: #f2f7f8;
}
.public-person summary:focus-visible {
  outline-offset: -2px;
  outline: 2px solid #387b8b;
}
.public-person[open] summary {
  background: #edf5f6;
}
.public-person summary > strong > .example-badge {
  margin: 0 0 0 7px;
  display: inline-block;
}
.results-grouped-feedback {
  background: #f6f9fa;
  border: 1px solid #dae4e9;
  border-radius: 10px;
  margin-top: 28px;
}
.results-grouped-feedback > summary {
  cursor: pointer;
  color: #355b6b;
  padding: 17px 20px;
  font-size: 14px;
  font-weight: 600;
}
.results-grouped-feedback > .model-feedback {
  margin: 0;
  padding: 0 18px 18px;
}
@media (max-width: 600px) {
  .results-comparison th:first-child {
    width: 49%;
  }
  .results-comparison thead th {
    padding: 10px 8px;
    font-size: 11px;
  }
  .results-comparison tbody th,
  .results-comparison td {
    padding: 14px 8px;
  }
  .results-comparison tbody th {
    font-size: 12px;
  }
  .summary-model-label {
    align-items: flex-start;
    gap: 7px;
  }
  .summary-letter {
    width: 23px;
    height: 25px;
    font-size: 12px;
  }
  .summary-vote {
    flex-wrap: wrap;
    gap: 4px;
  }
  .summary-vote strong,
  .summary-rejection {
    font-size: 20px;
  }
  .summary-vote > span {
    font-size: 11px;
  }
  .results-overview-heading {
    padding: 16px;
  }
  .results-overview-heading h2 {
    font-size: 18px;
  }
  .results-overview-footer {
    padding: 13px 14px;
  }
  .results-in-flow .public-list-heading input,
  .public-results .public-list-heading input {
    margin-top: 10px;
  }
}
.expectation-options {
  border: 0;
  margin: 24px 0 12px;
  padding: 0;
}
.expectation-options legend {
  color: #526e7b;
  margin-bottom: 16px;
  font-size: 14px;
}
.expectation-option {
  cursor: pointer;
  background: #fff;
  border: 1px solid #d8e3e8;
  border-radius: 10px;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
  padding: 17px 18px;
  display: flex;
}
.expectation-option.selected {
  background: #f0f8f4;
  border-color: #438d78;
}
.expectation-option > button {
  flex-shrink: 0;
  margin-top: 3px;
}
.expectation-option > span {
  min-width: 0;
}
.expectation-option strong {
  color: #2d505d;
  font-size: 16px;
  display: block;
}
.expectation-option > span > span {
  color: #5a707c;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  display: block;
}
.expectation-option:has(button:disabled) {
  opacity: 0.65;
  cursor: default;
}
.expectation-counter {
  color: #436b5c;
  margin-bottom: 20px;
  font-size: 13px;
}
.expectation-answer ul {
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.expectation-answer li {
  color: #315f54;
  background: #eef6f2;
  border: 1px solid #cce0d6;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}
.expectation-answer .public-quote {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.expectation-summary {
  background: #f7faf9;
  border: 1px solid #d8e3e8;
  border-radius: 12px;
  margin: 26px 0;
  padding: 20px;
}
.expectation-summary > div {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}
.expectation-summary h2 {
  color: #2b535f;
  font-size: 20px;
  line-height: 1.4;
}
.expectation-summary > p {
  color: #607882;
  margin: 8px 0 12px;
  font-size: 12px;
  line-height: 1.7;
}
.expectation-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.expectation-summary li {
  color: #46646e;
  border-top: 1px solid #e0e9e6;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 0;
  font-size: 14px;
  display: flex;
}
.expectation-summary li strong {
  color: #305f52;
  flex-shrink: 0;
  font-weight: 600;
}
@media (max-width: 480px) {
  .expectation-summary {
    padding: 16px;
  }
  .expectation-summary h2 {
    font-size: 18px;
  }
  .expectation-option {
    padding: 15px;
  }
}
.model-choice .decision-authority {
  background: #faf5e8;
  border-left: 4px solid #826a35;
  border-radius: 7px;
  margin-top: 14px;
  padding: 14px 16px;
}
.decision-authority-label {
  letter-spacing: 0.04em;
  color: #71613c;
  font-size: 11px;
  font-weight: 650;
  display: block;
}
.model-choice .decision-authority p {
  color: #293f4b;
  margin-top: 7px;
  font-size: 17px;
  line-height: 1.55;
}
.model-choice .decision-authority strong {
  font-weight: 750;
}
.amare-council-note p strong {
  font-weight: 750;
  font-size: inherit;
  color: #293f4b;
  display: inline;
}
@media (max-width: 600px) {
  .model-choice .decision-authority {
    padding: 12px;
  }
  .model-choice .decision-authority p {
    font-size: 16px;
  }
}
.graphical-overview {
  border-color: #c9dcdf;
  border-radius: 18px;
  box-shadow: 0 8px 28px #244e5d06;
}
.results-visual-header {
  color: #fff;
  background: #173f4b;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 25px 28px;
  display: flex;
}
.results-kicker {
  letter-spacing: 0.16em;
  color: #c6d8dc;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  display: block;
}
.results-visual-header h2 {
  color: #fff;
  margin: 0 0 7px;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.25;
}
.results-visual-header p {
  color: #d5e4e6;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.results-visual-header .example-badge {
  margin-top: 12px;
}
.results-total {
  text-align: center;
  border-left: 1px solid #51717a;
  flex-shrink: 0;
  min-width: 112px;
  padding-left: 24px;
}
.results-total strong {
  color: #ead398;
  font-variant-numeric: tabular-nums;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.1;
  display: block;
}
.results-total > span {
  color: #d5e4e6;
  margin-top: 7px;
  font-size: 11px;
  display: block;
}
.model-chart {
  margin: 0;
  padding: 22px 26px 18px;
}
.model-chart figcaption {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}
.model-chart figcaption > span {
  color: #46616e;
  font-size: 13px;
  font-weight: 600;
}
.chart-legend {
  color: #526e79;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 11px;
  display: flex;
}
.chart-legend > span {
  align-items: center;
  gap: 6px;
  display: flex;
}
.chart-legend i {
  border-radius: 3px;
  width: 9px;
  height: 9px;
  display: block;
}
.preference-dot {
  background: #348c7c;
}
.rejection-dot {
  background: #bd6270;
}
.chart-scale {
  color: #748991;
  justify-content: space-between;
  margin-left: calc(33.3333% + 82px);
  margin-right: 82px;
  font-size: 10px;
  display: flex;
}
.model-chart-row {
  border-bottom: 1px solid #e5ecee;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: 18px;
  padding: 21px 0;
  display: grid;
}
.chart-model-heading {
  align-items: flex-start;
  gap: 11px;
  display: flex;
}
.chart-model-letter {
  color: #315965;
  background: #edf3f5;
  border: 1px solid #d8e5e8;
  border-radius: 10px;
  flex-shrink: 0;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 16px;
  font-weight: 700;
  display: grid;
}
.chart-model-heading h3 {
  color: #2c4b59;
  overflow-wrap: anywhere;
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.55;
}
.chart-bar-pair {
  gap: 11px;
  display: grid;
}
.chart-value-row {
  grid-template-columns: 60px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 10px;
  display: grid;
}
.chart-series-label {
  color: #647985;
  font-size: 11px;
}
.chart-track {
  background: repeating-linear-gradient(
    90deg,
    #edf2f3 0 calc(25% - 1px),
    #dbe5e8 calc(25% - 1px) 25%
  );
  border-radius: 4px;
  height: 15px;
  overflow: hidden;
}
.chart-track > span {
  border-radius: 4px;
  height: 100%;
  display: block;
}
.preference .chart-track > span {
  background: #348c7c;
}
.rejection .chart-track > span {
  background: #bd6270;
}
.chart-value {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  align-items: baseline;
  gap: 4px;
  display: flex;
}
.chart-value strong {
  font-size: 19px;
  font-weight: 650;
}
.preference .chart-value strong {
  color: #236557;
}
.rejection .chart-value strong {
  color: #9b4252;
}
.chart-value small {
  color: #607681;
  font-size: 10px;
}
.chart-footnote {
  color: #6c8089;
  margin: 15px 0 0;
  font-size: 11px;
  line-height: 1.7;
}
.results-neutral-stat {
  background: #f1f5f8;
  border-radius: 10px;
  align-items: center;
  gap: 14px;
  margin: 0 26px;
  padding: 16px 18px;
  display: flex;
}
.neutral-stat-number {
  color: #38576c;
  background: #e0e9f0;
  border-radius: 9px;
  place-items: center;
  min-width: 41px;
  height: 41px;
  padding: 0 6px;
  font-size: 24px;
  font-weight: 600;
  display: grid;
}
.results-neutral-stat strong {
  color: #3d5e6d;
  font-size: 13px;
}
.results-neutral-stat p {
  color: #6a808b;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
}
.results-neutral-stat > .example-badge {
  margin-left: auto;
}
.results-common-model-note {
  text-align: center;
  color: #70848b;
  margin: 13px 20px 18px;
  font-size: 11px;
}
.expectation-summary {
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
}
.expectation-summary ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px 25px;
  margin-top: 18px;
  display: grid;
}
.expectation-summary li {
  border: 0;
  padding: 0;
  font-size: 13px;
  display: block;
}
.expectation-stat-label {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  display: flex;
}
.expectation-stat-track {
  background: #f0eee7;
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}
.expectation-stat-track > span {
  background: #b69b5e;
  border-radius: 4px;
  height: 100%;
  display: block;
}
@media (max-width: 640px) {
  .results-visual-header {
    gap: 15px;
    padding: 21px 19px;
  }
  .results-visual-header h2 {
    font-size: 22px;
  }
  .results-total {
    min-width: 80px;
    padding-left: 14px;
  }
  .results-total strong {
    font-size: 39px;
  }
  .results-total > span {
    font-size: 10px;
  }
  .model-chart {
    padding: 18px;
  }
  .model-chart-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
  }
  .chart-model-heading {
    align-items: center;
  }
  .chart-model-heading h3 {
    margin: 0;
    font-size: 14px;
  }
  .chart-scale {
    margin-left: 70px;
    margin-right: 82px;
  }
  .chart-model-letter {
    border-radius: 8px;
    width: 29px;
    height: 29px;
    font-size: 14px;
  }
  .results-neutral-stat {
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 18px;
    padding: 13px;
  }
  .results-neutral-stat > .example-badge {
    margin-left: 0;
  }
  .expectation-summary {
    padding: 18px;
  }
  .expectation-summary ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }
}