:root {
  --radius: 0.75rem;
  --background: oklch(0.985 0.005 250);
  --foreground: oklch(0.26 0.065 264);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.26 0.15 264);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.955 0.012 250);
  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.9 0.018 255);
  --input: oklch(0.86 0.025 255);
  --ring: oklch(0.665 0.121 243.9);
  --navy-deep: oklch(0.246 0.099 264.1);
  --blue-bright: oklch(0.665 0.121 243.9);
  --green-ciaf: oklch(0.563 0.122 146.5);
  --lime-ciaf: oklch(0.715 0.135 126.5);
  --mist: oklch(0.978 0.005 258.3);
  --overlay: oklch(0.14 0.06 264 / .62);
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  letter-spacing: 0;
}
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.bg-gradient-brand { background-image: linear-gradient(115deg, oklch(0.246 0.099 264.1), oklch(0.43 0.16 255), oklch(0.665 0.121 243.9)); }
.bg-gradient-fresh { background-image: linear-gradient(110deg, oklch(0.563 0.122 146.5), oklch(0.715 0.135 126.5)); }
.bg-gradient-full { background-image: linear-gradient(90deg, oklch(0.246 0.099 264.1), oklch(0.665 0.121 243.9), oklch(0.563 0.122 146.5), oklch(0.715 0.135 126.5)); }
.text-gradient-light {
  color: transparent;
  background-image: linear-gradient(90deg, var(--blue-bright), oklch(0.82 0.11 193), var(--lime-ciaf));
  background-clip: text;
  -webkit-background-clip: text;
}
.bg-hero-ciaf {
  background:
    linear-gradient(90deg, oklch(0.19 0.1 264 / .98) 0%, oklch(0.246 0.12 264 / .92) 34%, oklch(0.38 0.13 248 / .62) 62%, oklch(0.563 0.122 146.5 / .18) 100%),
    linear-gradient(0deg, oklch(0.16 0.08 264 / .5) 0%, transparent 45%);
}
.shadow-soft { box-shadow: 0 8px 28px oklch(0.246 0.099 264.1 / .09); }
.shadow-float { box-shadow: 0 22px 60px oklch(0.246 0.099 264.1 / .18); }

.field-label { display: block; color: var(--primary); font-size: .875rem; line-height: 1.35rem; font-weight: 700; }
.field-help { margin-top: .35rem; color: var(--muted-foreground); font-size: .8rem; line-height: 1.3rem; }
.field-input {
  margin-top: .75rem; width: 100%; min-height: 2.9rem; border: 1px solid var(--input);
  border-radius: .65rem; background: var(--card); padding: .75rem 1rem; color: var(--foreground);
  outline: none; transition: box-shadow .2s, border-color .2s;
}
.field-input:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 3px oklch(0.665 0.121 243.9 / .17); }
.field-input.is-bad { border-color: var(--destructive); box-shadow: 0 0 0 2px color-mix(in oklch, var(--destructive) 15%, transparent); }
.matrix-row.is-invalid { border-color: var(--destructive); background: color-mix(in oklch, var(--destructive) 5%, transparent); }
textarea.field-input { min-height: 7rem; resize: vertical; }
.option-control {
  display: flex; min-height: 3rem; align-items: center; gap: .75rem; border: 1px solid var(--border);
  border-radius: .65rem; background: var(--card); padding: .7rem .85rem; font-size: .875rem; font-weight: 600;
  transition: border-color .2s, background-color .2s; cursor: pointer;
}
.option-control:hover { border-color: var(--blue-bright); }
.option-selected { border-color: var(--primary); background: var(--secondary); color: var(--primary); }
.option-other { flex-wrap: wrap; }
.other-check { display: flex; align-items: center; gap: .75rem; cursor: pointer; }
.other-input {
  flex: 1; min-width: 12rem; min-height: 2rem; border: 0; border-bottom: 1px solid var(--input);
  background: transparent; padding: .2rem 0; font-size: .875rem; font-weight: 600; color: var(--primary); outline: none;
}
.other-input:focus { border-bottom-color: var(--blue-bright); }
.other-placeholder { color: var(--muted-foreground); font-weight: 500; letter-spacing: .04em; }
.principle-card {
  position: relative; overflow: hidden; min-height: 13rem; border: 1px solid var(--border);
  border-radius: 1rem; background: var(--card); padding: 1.35rem;
  box-shadow: 0 8px 28px oklch(0.246 0.099 264.1 / .07); transition: transform .25s, box-shadow .25s;
}
.principle-card::after {
  content: ""; position: absolute; inset: auto 0 0; height: .25rem;
  background: linear-gradient(90deg, var(--blue-bright), var(--green-ciaf), var(--lime-ciaf));
}
.principle-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px oklch(0.246 0.099 264.1 / .12); }
.matrix-grid { display: none; grid-template-columns: repeat(var(--matrix-columns), minmax(0, 1fr)); gap: .5rem; }
.matrix-heading { color: var(--primary); font-size: .75rem; font-weight: 700; }
.matrix-row {
  display: grid; grid-template-columns: repeat(var(--matrix-columns), minmax(0, 1fr));
  gap: .5rem; border: 1px solid var(--border); border-radius: .7rem; padding: .6rem;
}
.matrix-key { display: flex; align-items: center; padding: .55rem; color: var(--primary); font-size: .8rem; font-weight: 700; }
@media (max-width: 767px) {
  .matrix-row { display: block; }
  .matrix-row > * + * { margin-top: .55rem; }
  .matrix-mobile-label { display: block; }
}
@media (min-width: 768px) {
  .matrix-grid { display: grid; }
  .matrix-mobile-label { display: none; }
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.animate-rise { animation: rise .55s cubic-bezier(.22,1,.36,1) both; }
.ciaf-traits-stage {
  border-color: color-mix(in oklch, var(--green-ciaf) 38%, var(--border));
  background: linear-gradient(145deg, var(--card), color-mix(in oklch, var(--mist) 82%, var(--green-ciaf)));
  box-shadow: inset 4px 0 0 var(--green-ciaf), 0 8px 28px oklch(0.246 0.099 264.1 / .09);
}
.route-node { transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, background-color .3s; }
.route-node-active { transform: translateY(-2px); box-shadow: 0 8px 24px oklch(0.246 0.099 264.1 / .24); }
.route-reveal { animation: route-reveal .5s cubic-bezier(.22,1,.36,1) both; }
.section-intro { position: relative; margin-top: .85rem; max-width: 44rem; padding-left: 1rem; color: var(--muted-foreground); font-size: .9rem; line-height: 1.6rem; }
.section-intro::before { content: ""; position: absolute; left: 0; top: 1px; height: 2rem; width: .25rem; border-radius: 999px; background-image: linear-gradient(90deg, oklch(0.246 0.099 264.1), oklch(0.665 0.121 243.9), oklch(0.563 0.122 146.5), oklch(0.715 0.135 126.5)); }
.manifesto-glow { background: linear-gradient(90deg, color-mix(in oklch, var(--blue-bright) 35%, transparent), color-mix(in oklch, var(--green-ciaf) 30%, transparent), transparent); }
@keyframes route-reveal { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.icon-md { width: 1.25rem; height: 1.25rem; }
.icon-lg { width: 1.25rem; height: 1.25rem; }

.btn {
  display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .5rem; padding: 0 1.25rem; font-size: .875rem; font-weight: 600;
  border: 0; transition: all .3s; color: inherit;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px oklch(0.665 0.121 243.9 / .4); }
.btn svg { width: 1rem; height: 1rem; }
.btn-primary { background-image: linear-gradient(115deg, oklch(0.246 0.099 264.1), oklch(0.43 0.16 255), oklch(0.665 0.121 243.9)); color: var(--primary-foreground); box-shadow: 0 8px 28px oklch(0.246 0.099 264.1 / .09); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 60px oklch(0.246 0.099 264.1 / .18); }
.btn-fresh { background-image: linear-gradient(110deg, oklch(0.563 0.122 146.5), oklch(0.715 0.135 126.5)); color: var(--navy-deep); box-shadow: 0 8px 28px oklch(0.246 0.099 264.1 / .09); }
.btn-fresh:hover { transform: translateY(-2px); }
.btn-secondary { border: 1px solid var(--border); background: var(--card); color: var(--primary); }
.btn-secondary:hover { border-color: color-mix(in oklch, var(--primary) 30%, var(--border)); background: var(--secondary); }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-ghost:hover { background: var(--secondary); }
.btn-ghost-light { background: transparent; color: var(--primary-foreground); }
.btn-ghost-light:hover { background: transparent; color: var(--primary-foreground); }
.btn-glass { border: 1px solid color-mix(in oklch, var(--primary-foreground) 35%, transparent); background: color-mix(in oklch, var(--primary-foreground) 10%, transparent); color: var(--primary-foreground); box-shadow: none; }
.btn-glass:hover { background: color-mix(in oklch, var(--primary-foreground) 15%, transparent); }
.btn-lg { height: 3rem; min-height: 3rem; padding: 0 1.75rem; }
.btn-sm { height: 2.25rem; min-height: 2.25rem; padding: 0 .75rem; font-size: .75rem; }
.btn-icon { width: 2.75rem; min-height: 2.75rem; padding: 0; }
.btn-group-hover:hover .icon-shift { transform: translateX(.25rem); }
.icon-shift { transition: transform .3s; }

.cover { min-height: 100vh; background: var(--background); }
.hero {
  position: relative; isolation: isolate; min-height: 680px; overflow: hidden;
  background: var(--navy-deep); color: var(--primary-foreground);
}
.hero-photo { position: absolute; inset: 0; z-index: -20; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.hero-overlay { position: absolute; inset: 0; z-index: -10; }
.hero-inner {
  margin: 0 auto; display: flex; min-height: 680px; max-width: 1500px;
  flex-direction: column; padding: 1.75rem 1.25rem;
}
.hero-header {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid color-mix(in oklch, var(--primary-foreground) 20%, transparent); padding-bottom: 1.25rem;
}
.hero-logo { height: 3rem; width: auto; }
.hero-kicker { font-size: .875rem; font-weight: 700; color: var(--lime-ciaf); margin: 0; }
.hero-title { margin: 1.25rem 0 0; font-size: 2.25rem; font-weight: 800; line-height: 1.06; }
.hero-sub { margin: 1.5rem 0 0; font-size: 1.125rem; font-weight: 600; }
.hero-box { margin-top: 2.25rem; max-width: 42rem; border-left: 2px solid var(--lime-ciaf); padding-left: 1.25rem; }
.hero-box h2 { margin: 0; font-size: 1.5rem; font-weight: 700; }
.hero-box p { margin: .75rem 0 0; max-width: 36rem; font-size: .875rem; line-height: 1.5rem; color: color-mix(in oklch, var(--primary-foreground) 80%, transparent); }
.example-link {
  display: inline-flex; min-height: 2.75rem; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 600; color: color-mix(in oklch, var(--primary-foreground) 85%, transparent);
  background: none; border: 0; text-decoration: none; padding: 0;
}
.example-link:hover { color: var(--primary-foreground); text-decoration: underline; text-underline-offset: 4px; }
.cover-date {
  margin-top: auto; display: grid; gap: .75rem;
  border-top: 1px solid color-mix(in oklch, var(--primary-foreground) 20%, transparent);
  padding-top: 1.25rem; font-size: .75rem;
}
.date-card {
  border-radius: .5rem; border: 1px solid color-mix(in oklch, var(--primary-foreground) 25%, transparent);
  background: color-mix(in oklch, var(--primary-foreground) 10%, transparent); padding: .75rem; backdrop-filter: blur(8px);
  position: relative;
}
.date-card p { margin: 0; font-weight: 600; color: color-mix(in oklch, var(--primary-foreground) 75%, transparent); }
.date-trigger {
  margin-top: .25rem; height: auto; width: 100%; justify-content: flex-start; padding: .5rem 0;
  text-align: left; font-size: .875rem; font-weight: 600; color: var(--primary-foreground);
  background: transparent; border: 0; display: inline-flex; align-items: center; gap: .5rem;
}
.date-hint { margin-top: .25rem; font-size: 10px; color: color-mix(in oklch, var(--primary-foreground) 50%, transparent); }
.calendar-pop {
  position: absolute; left: 0; top: calc(100% + .5rem); z-index: 20;
  background: var(--card); color: var(--foreground); border-radius: .75rem; padding: .75rem;
  box-shadow: 0 22px 60px oklch(0.246 0.099 264.1 / .18); min-width: 280px;
}
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; font-weight: 700; color: var(--primary); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; text-align: center; }
.calendar-grid span { font-size: .7rem; font-weight: 700; color: var(--muted-foreground); padding: .35rem 0; }
.calendar-grid button {
  border: 0; background: transparent; border-radius: .5rem; min-height: 2rem; font-size: .8rem; color: var(--primary);
}
.calendar-grid button:hover { background: var(--secondary); }
.calendar-grid button.is-selected { background: var(--primary); color: var(--primary-foreground); }
.calendar-grid button.is-muted { color: var(--muted-foreground); }

.identity {
  margin-top: 1.25rem; border-radius: .5rem; border: 1px solid color-mix(in oklch, var(--primary-foreground) 20%, transparent);
  background: color-mix(in oklch, var(--navy-deep) 40%, transparent); padding: 1.25rem; backdrop-filter: blur(6px);
}
.identity.is-invalid { border-color: var(--destructive); }
.identity legend { padding: 0 .5rem; font-size: 1.25rem; font-weight: 800; color: var(--primary-foreground); }
.identity-help { margin: .25rem 0 1.25rem; max-width: 42rem; font-size: .875rem; line-height: 1.5rem; color: color-mix(in oklch, var(--primary-foreground) 70%, transparent); }
.identity-grid { display: grid; gap: 1.25rem; }
.cover-field span { font-weight: 600; color: color-mix(in oklch, var(--primary-foreground) 75%, transparent); }
.cover-field.is-invalid span { color: var(--destructive); }
.cover-field input {
  margin-top: .5rem; width: 100%; border: 0; border-bottom: 1px solid color-mix(in oklch, var(--primary-foreground) 35%, transparent);
  background: transparent; padding: .5rem 0; font-size: .875rem; font-weight: 600; color: var(--primary-foreground); outline: none;
}
.cover-field input::placeholder { font-weight: 400; color: color-mix(in oklch, var(--primary-foreground) 55%, transparent); }
.cover-field input:focus { border-bottom-color: var(--lime-ciaf); }
.cover-field.is-invalid input { border-bottom-color: var(--destructive); }
.identity-error { margin: 1rem 0 0; font-size: .75rem; font-weight: 600; color: var(--primary-foreground); }

.cover-body { margin: 0 auto; max-width: 80rem; padding: 3rem 1.25rem; }
.cover-body .kicker { font-size: .75rem; font-weight: 700; color: var(--blue-bright); margin: 0; }
.cover-body h3 { margin: .75rem 0 0; max-width: 48rem; font-size: 1.875rem; font-weight: 800; color: var(--primary); }
.principles { margin-top: 2rem; display: grid; gap: 1rem; }
.principle-icon { display: flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: .5rem; color: var(--primary-foreground); }
.principle-card h4 { margin: 1.25rem 0 0; font-size: 1.25rem; font-weight: 800; color: var(--primary); }
.principle-card p { margin: .5rem 0 0; font-size: .875rem; line-height: 1.5rem; color: var(--muted-foreground); }
.cta-banner {
  margin-top: 3rem; overflow: hidden; border-radius: 1rem; padding: 1.75rem; color: var(--primary-foreground);
}
.cta-banner .row { display: flex; align-items: center; gap: .75rem; color: var(--lime-ciaf); font-size: .75rem; font-weight: 700; }
.cta-banner h3 { margin: 1.25rem 0 0; font-size: 1.875rem; font-weight: 900; line-height: 1.15; }
.cta-banner p { margin: 1.5rem 0 0; max-width: 48rem; font-size: 1.125rem; line-height: 2rem; color: color-mix(in oklch, var(--primary-foreground) 85%, transparent); }
.cta-banner .quote { margin-top: 1.5rem; border-left: 2px solid var(--lime-ciaf); padding-left: 1rem; font-weight: 700; color: var(--primary-foreground); }
.cta-actions { margin-top: 2rem; display: flex; justify-content: flex-end; }
.btn-start { width: 100%; }

.app { min-height: 100vh; background: var(--background); }
.app-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
  background: color-mix(in oklch, var(--background) 90%, transparent); backdrop-filter: blur(24px);
}
.app-header-inner {
  margin: 0 auto; display: flex; height: 4rem; max-width: 1500px;
  align-items: center; justify-content: space-between; padding: 0 1rem;
}
.brand-logo { height: 2.25rem; width: auto; }
.header-meta { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; color: var(--muted-foreground); }
.status-pill { border-radius: 999px; background: var(--secondary); padding: .375rem .75rem; color: var(--primary); }
.save-state { display: none; align-items: center; gap: .375rem; }
.save-state svg { color: var(--green-ciaf); }
.progress-line { height: .25rem; background: var(--secondary); }
.progress-line span { display: block; height: 100%; transition: width .7s; }

.layout { margin: 0 auto; max-width: 1500px; display: grid; grid-template-columns: 1fr; }
.sidebar {
  display: none; min-height: calc(100vh - 68px); border-right: 1px solid var(--border);
  background: var(--card); padding: 2rem 1.25rem;
}
.progress-title { margin: 0; font-size: .875rem; font-weight: 800; color: var(--primary); }
.progress-pct { margin: .25rem 0 0; font-size: 1.5rem; font-weight: 900; color: var(--primary); }
.progress-pct span { font-size: .875rem; font-weight: 500; color: var(--muted-foreground); }
.progress-bar { margin-top: .75rem; height: .5rem; border-radius: 999px; background: var(--secondary); overflow: hidden; }
.progress-bar span { display: block; height: 100%; border-radius: 999px; transition: width .7s; }
.nav-sections { margin-top: 1.75rem; }
.nav-item {
  display: flex; width: 100%; align-items: center; gap: .75rem; border-radius: .5rem;
  padding: .625rem .75rem; text-align: left; font-size: .75rem; font-weight: 600;
  background: transparent; border: 0; color: var(--muted-foreground); transition: background .2s, color .2s;
}
.nav-item:hover { background: var(--secondary); color: var(--primary); }
.nav-item.is-active { background: var(--primary); color: var(--primary-foreground); }
.nav-dot {
  display: flex; width: 1.25rem; height: 1.25rem; flex-shrink: 0; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid currentColor;
}
.nav-dot.is-complete { border-color: var(--green-ciaf); background: var(--green-ciaf); color: var(--primary-foreground); }
.nav-dot.is-started { border-color: var(--blue-bright); }
.nav-dot .dot { width: .375rem; height: .375rem; border-radius: 999px; background: currentColor; }

.main { min-width: 0; padding: 1.5rem 1rem; }
.mobile-bar { margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: space-between; }
.mobile-bar p { margin: 0; }
.mobile-step { font-size: .75rem; font-weight: 700; color: var(--blue-bright); }
.mobile-copy { font-size: .875rem; font-weight: 600; color: var(--primary); }
.form-stage {
  margin: 0 auto; max-width: 56rem; border-radius: 1rem; border: 1px solid var(--border);
  background: var(--card); padding: 1.25rem; box-shadow: 0 8px 28px oklch(0.246 0.099 264.1 / .09);
}
.form-head { margin-bottom: 2rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }
.form-step { margin: 0 0 .5rem; font-size: .875rem; font-weight: 700; color: var(--blue-bright); }
.form-stage h1 { margin: 0; font-size: 1.875rem; font-weight: 800; color: var(--primary); }
.official-intro { margin-top: 1rem; border-left: 2px solid var(--blue-bright); padding-left: 1rem; font-size: .875rem; font-weight: 600; line-height: 1.5rem; color: var(--primary); }
.form-icon {
  display: none; width: 3rem; height: 3rem; flex-shrink: 0; align-items: center; justify-content: center;
  border-radius: .75rem; color: var(--primary-foreground);
}
.fields { display: grid; gap: 1.75rem; }
.field-wrap.is-invalid { background: color-mix(in oklch, var(--destructive) 5%, transparent); padding: .75rem; border-radius: .5rem; box-shadow: 0 0 0 1px color-mix(in oklch, var(--destructive) 30%, transparent); }
.choice-grid { margin-top: .75rem; display: grid; gap: .5rem; }
.check-box {
  display: flex; width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; border: 1px solid var(--input);
}
.check-box.round { border-radius: 999px; }
.check-box.square { border-radius: .375rem; }
.check-box.is-on { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.currency-wrap { position: relative; margin-top: .75rem; }
.currency-prefix { pointer-events: none; position: absolute; left: 1rem; top: .875rem; font-weight: 700; color: var(--primary); }
.field-suffix { pointer-events: none; position: absolute; right: 1rem; top: .875rem; font-size: .875rem; color: var(--muted-foreground); }
.note { border-radius: .5rem; border-left: 4px solid var(--lime-ciaf); background: var(--secondary); padding: 1rem; font-size: .875rem; font-style: italic; color: var(--muted-foreground); }
.missing { margin-top: 2rem; border-radius: .5rem; border: 1px solid color-mix(in oklch, var(--destructive) 25%, transparent); background: color-mix(in oklch, var(--destructive) 5%, transparent); padding: 1rem; font-size: .875rem; font-weight: 600; color: var(--destructive); }
.form-nav {
  margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  border-top: 1px solid var(--border); padding-top: 1.5rem;
}
.form-nav-right { display: flex; flex-wrap: wrap; gap: .5rem; }
.route-block { border-top: 1px solid var(--border); padding-top: 1.75rem; display: grid; gap: 1.75rem; }
.route-block h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--primary); }
.route-block > div > p { margin: .5rem 0 0; font-size: .875rem; color: var(--muted-foreground); }
.route-visual { border-radius: .75rem; background: var(--navy-deep); padding: 1.25rem; color: var(--primary-foreground); }
.route-visual-title { margin-bottom: 1.25rem; display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--lime-ciaf); }
.route-nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.route-node { position: relative; border-radius: .5rem; border: 1px solid color-mix(in oklch, var(--primary-foreground) 20%, transparent); background: color-mix(in oklch, var(--primary-foreground) 5%, transparent); padding: .75rem; font-size: .875rem; }
.route-node span { font-size: .75rem; color: color-mix(in oklch, var(--primary-foreground) 70%, transparent); }
.route-node p { margin: .25rem 0 0; font-weight: 600; }
.route-node.is-on { border-color: var(--lime-ciaf); }

.proposal {
  display: none; border-left: 1px solid var(--border); background: var(--mist); padding: 2rem 1.25rem;
}
.proposal-sticky { position: sticky; top: 6rem; }
.proposal-title { margin-bottom: 1.25rem; display: flex; align-items: center; gap: .5rem; }
.proposal-title h2 { margin: 0; font-weight: 800; color: var(--primary); }
.proposal-empty { border-radius: .5rem; border: 1px dashed var(--border); background: var(--card); padding: 1rem; font-size: .875rem; line-height: 1.5rem; color: var(--muted-foreground); }
.proposal-row { border-bottom: 1px solid var(--border); padding-bottom: .75rem; margin-bottom: 1rem; }
.proposal-row p { margin: 0; }
.proposal-row .lbl { font-size: 11px; font-weight: 700; color: var(--muted-foreground); }
.proposal-row .val { margin-top: .25rem; font-size: .875rem; font-weight: 600; color: var(--primary); }
.proposal-status { margin-top: 1.25rem; border-radius: .5rem; border: 1px solid color-mix(in oklch, var(--green-ciaf) 20%, transparent); background: var(--card); padding: .75rem; font-size: .75rem; }
.proposal-status span { font-weight: 700; color: var(--green-ciaf); }
.proposal-status p { margin: .25rem 0 0; font-weight: 600; color: var(--primary); }

.overlay { position: fixed; inset: 0; z-index: 50; background: var(--overlay); }
.drawer {
  margin-left: auto; height: 100%; width: min(90vw, 380px); overflow-y: auto; background: var(--card);
  padding: 1.25rem; box-shadow: 0 22px 60px oklch(0.246 0.099 264.1 / .18);
}
.example-wrap { padding: .75rem; }
.example-panel {
  margin-left: auto; height: 100%; width: 100%; max-width: 48rem; overflow-y: auto;
  border-radius: 1rem; background: var(--card); box-shadow: 0 22px 60px oklch(0.246 0.099 264.1 / .18);
}
.example-head {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--card) 95%, transparent);
  padding: 1.25rem; backdrop-filter: blur(8px);
}
.example-head p { margin: 0; font-size: .75rem; font-weight: 700; color: var(--blue-bright); }
.example-head h2 { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.example-body { padding: 1.25rem; }
.example-body > p { margin: 0 0 1.75rem; line-height: 1.75rem; color: var(--muted-foreground); }
.example-row { border-radius: .5rem; border: 1px solid var(--border); padding: 1rem; margin-bottom: .75rem; }
.example-row .lbl { margin: 0; font-size: .75rem; font-weight: 700; color: var(--blue-bright); }
.example-row .val { margin: .5rem 0 0; line-height: 1.5rem; }
.example-body h3 { margin: 2.25rem 0 0; font-size: 1.25rem; font-weight: 800; color: var(--primary); }
.route-ex { margin-top: 1rem; display: grid; gap: .5rem; }
.route-ex-item {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: .75rem;
  border-radius: .5rem; background: var(--secondary); padding: .75rem;
}
.route-ex-num { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--primary); font-weight: 700; color: var(--primary-foreground); }
.criterion-box { margin-top: 2.25rem; border-radius: .75rem; padding: 1.5rem; color: var(--primary-foreground); }
.criterion-box p { margin: 0; }
.criterion-box .k { font-size: .75rem; font-weight: 700; color: var(--lime-ciaf); }
.criterion-box .t { margin-top: .75rem; font-size: 1.125rem; font-weight: 700; line-height: 1.75rem; }

.modal-center { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--overlay); padding: 1rem; }
.modal-card { width: 100%; max-width: 32rem; border-radius: .75rem; background: var(--card); padding: 1.5rem; }
.modal-card h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--primary); }
.modal-card p { margin: .75rem 0 0; line-height: 1.75rem; color: var(--muted-foreground); }
.modal-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; z-index: 50; width: min(92vw, 680px);
  transform: translateX(-50%); border-left: 4px solid var(--lime-ciaf); background: var(--primary);
  padding: 1rem 1.5rem; font-size: .875rem; font-weight: 600; line-height: 1.5rem; color: var(--primary-foreground);
}
.toast-milestone {
  position: fixed; bottom: 1.5rem; left: 50%; z-index: 50; transform: translateX(-50%);
  border-radius: .75rem; padding: 1rem 1.5rem; font-weight: 700; color: var(--primary-foreground);
}

.complete { min-height: 100vh; background: var(--navy-deep); }
.complete-wrap { position: relative; isolation: isolate; min-height: 100vh; overflow: hidden; }
.complete-photo { position: absolute; inset: 0; z-index: -20; width: 100%; height: 100%; object-fit: cover; }
.complete-inner {
  margin: 0 auto; display: flex; min-height: 100vh; max-width: 1500px; align-items: center;
  padding: 4rem 1.25rem; color: var(--primary-foreground);
}
.complete-logo { height: 3.5rem; width: auto; }
.complete h1 { margin: 1.25rem 0 0; font-size: 2.25rem; font-weight: 900; line-height: 1.08; }
.complete-crit { margin: 2rem 0 0; max-width: 48rem; font-size: 1.25rem; font-weight: 600; line-height: 2.25rem; }
.complete-traits { margin: 2rem 0 0; font-size: .875rem; font-weight: 700; color: color-mix(in oklch, var(--primary-foreground) 80%, transparent); }
.complete-box { margin-top: 2.5rem; border-top: 1px solid color-mix(in oklch, var(--primary-foreground) 25%, transparent); padding-top: 1.75rem; }
.complete-box h2 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.complete-box > p { margin: .75rem 0 0; max-width: 42rem; font-size: 1rem; color: color-mix(in oklch, var(--primary-foreground) 80%, transparent); }
.complete-meta { margin-top: 1.5rem; display: grid; gap: .75rem; border-left: 2px solid var(--lime-ciaf); padding-left: 1.25rem; font-size: .875rem; }
.complete-meta p { margin: 0; }
.complete-meta .lbl { color: color-mix(in oklch, var(--primary-foreground) 60%, transparent); }
.complete-meta .val { margin-top: .25rem; font-weight: 700; }
.pct-100 { margin: 1.75rem 0 0; font-size: 3rem; font-weight: 900; }
.pct-100 span { font-size: 1.125rem; color: var(--primary-foreground); }
.checks { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.checks p { margin: 0; display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.checks svg { color: var(--lime-ciaf); }
.complete-actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.summary { min-height: 100vh; background: var(--background); padding: 1.25rem; }
.summary-inner { margin: 0 auto; max-width: 64rem; }
.summary-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.summary-logo { height: 3rem; width: auto; }
.summary-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.summary-kicker { margin: 3rem 0 0; font-size: .875rem; font-weight: 700; color: var(--blue-bright); }
.summary h1 { margin: .5rem 0 0; font-size: 2.25rem; font-weight: 900; color: var(--primary); }
.summary-grid { margin-top: 2rem; display: grid; gap: 1rem; }
.summary-card { border-radius: .75rem; border: 1px solid var(--border); background: var(--card); padding: 1.25rem; }
.summary-card .lbl { margin: 0; font-size: .75rem; font-weight: 700; color: var(--blue-bright); }
.summary-card .val { margin: .5rem 0 0; line-height: 1.5rem; }
.summary-banner {
  position: relative; isolation: isolate; margin-top: 2.5rem; min-height: 480px; overflow: hidden;
  padding: 1.75rem; color: var(--primary-foreground);
}
.summary-banner img { position: absolute; inset: 0; z-index: -20; width: 100%; height: 100%; object-fit: cover; }
.summary-banner .ov { position: absolute; inset: 0; z-index: -10; }
.summary-banner h2 { margin: 1.5rem 0 0; font-size: 2.25rem; font-weight: 900; line-height: 1.15; }
.summary-banner .crit { margin: 1.75rem 0 0; max-width: 48rem; font-size: 1.25rem; font-weight: 700; line-height: 2rem; }
.summary-banner .traits { margin: 2rem 0 0; font-weight: 700; color: color-mix(in oklch, var(--primary-foreground) 80%, transparent); }

.hidden-sm { display: none; }
.draft-btn { display: none; }

@media (min-width: 640px) {
  .hero { min-height: 760px; }
  .hero-inner { min-height: 760px; padding-left: 2.5rem; padding-right: 2.5rem; }
  .hero-logo { height: 3.5rem; }
  .hero-brand { display: block; font-size: .875rem; font-weight: 600; }
  .hero-title { font-size: 3.75rem; }
  .hero-sub { font-size: 1.25rem; }
  .hero-box h2 { font-size: 1.875rem; }
  .hero-box p { font-size: 1rem; }
  .cover-date { max-width: 28rem; }
  .identity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cover-body { padding-left: 2.5rem; padding-right: 2.5rem; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-banner { padding: 2.5rem; }
  .cta-banner h3 { font-size: 3rem; }
  .btn-start { width: auto; }
  .app-header-inner { padding: 0 2rem; }
  .header-meta .draft-btn { display: inline-flex; }
  .save-state { display: flex; }
  .main { padding: 2.5rem 2rem; }
  .form-stage { padding: 2rem; }
  .form-stage h1 { font-size: 2.25rem; }
  .form-icon { display: flex; }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .example-wrap { padding: 1.5rem; }
  .example-body { padding: 2rem; }
  .complete h1 { font-size: 3.75rem; }
  .complete-crit { font-size: 1.5rem; }
  .complete-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary { padding: 2.5rem; }
  .summary h1 { font-size: 2.25rem; }
  .summary-banner { padding: 3rem; }
  .summary-banner h2 { font-size: 3.75rem; }
  .hidden-sm { display: block; }
}

@media (min-width: 1024px) {
  .hero-inner { padding-left: 4rem; padding-right: 4rem; }
  .hero-title { font-size: 4.5rem; }
  .cover-body { padding-top: 4rem; padding-bottom: 4rem; }
  .principles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .layout { grid-template-columns: 280px minmax(0, 1fr); }
  .sidebar { display: block; }
  .mobile-bar { display: none; }
  .complete-inner { padding-left: 2.5rem; padding-right: 5rem; }
  .complete h1 { font-size: 4.5rem; }
}

@media (min-width: 1280px) {
  .hero-inner { padding-left: 5rem; padding-right: 5rem; }
  .layout { grid-template-columns: 280px minmax(0, 1fr) 280px; }
  .proposal { display: block; }
  .form-stage { padding: 2.5rem; }
}

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