/* EICCIO Advisors readiness page. Palette from EICCIO Advisors Brand Guidelines (Purple #7D168E,
   Fuchsia #C022A1, Indigo Core #0D043F, Anchor Black #0A0A0A). System fonts only (UX-GDB-356). */

:root {
  --indigo: #0D043F;
  --purple: #7D168E;
  --fuchsia: #C022A1;
  --ink: #16121c;
  --muted: #4a4453;
  --paper: #FBF8F4;
  --white: #ffffff;
  --line: #ddd5e2;
  --tint: #f5ecf7;
  --on-dark: #ffffff;
  --on-dark-muted: #ddd6ec;
  --error: #a4153b;
  --focus: #C022A1;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
a { color: var(--purple); text-underline-offset: .18em; }
a:hover { color: var(--indigo); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .6em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 5.2vw, 3rem); letter-spacing: -.01em; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--white); color: var(--indigo); padding: .75rem 1rem; font-weight: 700;
}
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
.measure { max-width: 40rem; }

/* Beats: one idea per beat, white space is the cut. */
.beat { padding: clamp(4.5rem, 14vw, 9rem) 0; }
.beat--paper { background: var(--paper); }
.beat--white { background: var(--white); }
.beat--purple { background: var(--purple); color: var(--on-dark); }
.beat--indigo { background: var(--indigo); color: var(--on-dark); }
.beat--purple a, .beat--indigo a { color: var(--on-dark); }

.source { font-size: .875rem; color: var(--muted); margin-top: 1.5rem; }
.source--dark { color: var(--on-dark-muted); }
.note { font-size: .9375rem; color: var(--muted); }

/* Beat 1: the scene. A typographic first screen on an early-light ground (UX-GDB-347). */
.scene {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  background: var(--indigo);
  color: var(--on-dark);
  padding: 3.5rem 0 3rem;
  overflow: hidden;
}
.scene__sky {
  position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(180deg, rgba(13,4,63,0) 0%, rgba(125,22,142,.55) 62%, rgba(192,34,161,.75) 100%);
  pointer-events: none;
}
.scene__band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: var(--fuchsia);
  transform-origin: left center;
}
.scene__inner { position: relative; }
@media (max-width: 40rem) { .kicker { display: block; } .kicker > span { display: block; } .kicker__dot { display: none !important; } }
.scene a { color: var(--on-dark); }
.kicker {
  display: inline-flex; flex-wrap: wrap; gap: .35em;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-dark-muted);
  border-top: 2px solid var(--fuchsia);
  padding-top: .75rem; margin-bottom: 1.25rem;
}
.scene h1 {
  font-size: clamp(2.25rem, 8.6vw, 5.6rem);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.02;
  max-width: 14ch; margin-bottom: 1.25rem;
}
.scene__lede { font-size: clamp(1.125rem, 3.4vw, 1.5rem); max-width: 34rem; color: var(--on-dark); }
.scene__call { margin: .9rem 0 1.25rem; }
.nonaff { font-size: .9375rem; font-weight: 600; border-left: 4px solid var(--fuchsia); padding-left: .75rem; max-width: 40rem; }
.nonaff--dark { color: var(--on-dark); }

/* Buttons: primary actions at least 44 by 44 CSS pixels (UX-GDB-358). */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .7rem 1.25rem;
  font: inherit; font-weight: 700; text-decoration: none; line-height: 1.25;
  border-radius: .5rem; border: 2px solid transparent; cursor: pointer;
  transition: transform .15s var(--ease), background-color .15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--fuchsia); color: var(--white); }
.btn--primary:hover { background: var(--purple); color: var(--white); }
.btn--ghost { border-color: var(--on-dark); color: var(--on-dark); background: transparent; }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: var(--on-dark); }
.btn--ghost-dark { border-color: var(--purple); color: var(--purple); background: var(--white); }
.btn--ghost-dark:hover { background: var(--tint); color: var(--indigo); }

/* Beat 2: large numerals on a plain ground. */
.numerals { font-size: clamp(2.5rem, 10vw, 6.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; margin-bottom: 2.5rem; color: var(--indigo); }
.numerals__line { display: block; }
.numerals__line:first-child { color: var(--purple); }

/* Beat 3: the list with ticks. */
.ticks { list-style: none; counter-reset: t; padding: 0; margin: 0 0 2rem; max-width: 44rem; }
.ticks li {
  counter-increment: t;
  display: grid; grid-template-columns: 2rem 1.75rem 1fr; align-items: start; gap: .5rem;
  padding: .9rem 0; border-bottom: 1px solid var(--line);
  font-size: clamp(1.0625rem, 2.6vw, 1.3125rem);
}
.ticks li::before { content: counter(t); font-weight: 800; color: var(--purple); font-variant-numeric: tabular-nums; }
.tick { width: 1.5rem; height: 1.5rem; margin-top: .15rem; }
.tick path { fill: none; stroke: var(--fuchsia); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 0; }
.lead-out { font-size: 1.25rem; font-weight: 600; }

/* Beat 4: a held frame. */
.quote { margin: 2rem 0 0; max-width: 46rem; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--serif); font-size: clamp(1.5rem, 4.6vw, 2.5rem); line-height: 1.3; }
.quote figcaption { font-size: .9375rem; color: var(--on-dark-muted); }
.quote figcaption a { color: var(--on-dark); }

/* Beat 5: ours, then yours. */
.split { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 48rem) { .split { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.split__col { background: var(--white); border: 1px solid var(--line); border-radius: .75rem; padding: 1.5rem; }
.split__col--you { background: var(--indigo); color: var(--on-dark); border-color: var(--indigo); }
.plain { margin: 0; padding-left: 1.2rem; }
.plain li { margin: .45rem 0; }

.big { font-size: clamp(2.5rem, 9vw, 5rem); color: var(--purple); }
.emph { font-size: 1.25rem; font-weight: 700; border-left: 4px solid var(--fuchsia); padding-left: 1rem; }

/* Applicant service (eiccio.app): a compact bar and opening, then the check. */
.appbar { background: var(--indigo); color: var(--on-dark); border-bottom: 4px solid var(--fuchsia); }
.appbar__inner { display: flex; align-items: center; min-height: 3.5rem; }
.appbar__brand { color: var(--on-dark); font-weight: 800; text-decoration: none; letter-spacing: .02em; padding: .6rem 0; }
.appbar__brand:hover { color: var(--on-dark); text-decoration: underline; }
.app-intro { background: var(--indigo); color: var(--on-dark); padding: 2.5rem 0 2.25rem; }
.app-intro h1 { font-size: clamp(1.75rem, 6.4vw, 3rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.08; }
.app-intro a { color: var(--on-dark); }
.app-intro__note { color: var(--on-dark-muted); font-size: .9375rem; }
.app-intro__alt { font-size: .9375rem; margin: 1rem 0 0; }
.app-body { background: var(--white); padding: 1rem 0 4rem; }
.app-body .check { margin-top: 1.5rem; }

/* Beat 9: the ask, the check and the enquiry. */
.alt-routes { font-size: .9375rem; }
.check { max-width: 44rem; margin-top: 2.5rem; }
.q, .group, .sub { border: 0; margin: 0; padding: 0; min-width: 0; }
.q { margin-bottom: 2.25rem; }
.q legend, .sub legend { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; padding: 0; margin-bottom: .5rem; }
.q__n { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); margin-bottom: .25rem; }
.help { font-size: .9375rem; color: var(--muted); margin: 0 0 .75rem; }
.optional { font-weight: 400; color: var(--muted); font-size: .9375rem; }
.opts { display: grid; gap: .5rem; }
.opts--row { grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr)); }
.opt {
  position: relative; display: flex; align-items: center; gap: .75rem;
  min-height: 3.25rem; padding: .7rem .95rem;
  background: var(--white); border: 2px solid var(--line); border-radius: .6rem;
  cursor: pointer; line-height: 1.35;
}
.opt:hover { border-color: var(--purple); }
.opt input { width: 1.35rem; height: 1.35rem; margin: 0; flex: none; accent-color: var(--purple); }
.opt:has(input:checked) { border-color: var(--purple); background: var(--tint); font-weight: 600; }
.opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.opt input:focus-visible { outline: none; }

.field { margin: 0 0 1.5rem; }
.field--tight { margin: 1rem 0 0; }
.field label { display: block; font-weight: 700; font-size: 1.0625rem; margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 3rem;
  font: inherit; color: var(--ink); background: var(--white);
  border: 2px solid #8a8294; border-radius: .5rem; padding: .6rem .75rem;
}
.field textarea { min-height: 5.5rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--purple); }
#group_size { max-width: 8rem; }
.group { margin: 2rem 0 0; }
.group > legend { font-size: 1.375rem; font-weight: 800; color: var(--indigo); padding: 0; margin-bottom: 1rem; }
.sub { margin: 0 0 1.75rem; }

.field-error { color: var(--error); font-weight: 700; font-size: .9375rem; margin: .5rem 0 0; }
[aria-invalid="true"] { border-color: var(--error) !important; }
.errors { border: 3px solid var(--error); border-radius: .6rem; padding: 1rem 1.25rem; margin-bottom: 2rem; background: #fff5f7; }
.errors h2 { font-size: 1.25rem; }
.errors h2 { color: var(--error); margin-bottom: .5rem; }
.errors ul { margin: 0; padding-left: 1.2rem; }
.errors a { color: var(--error); font-weight: 700; }

/* The result: fixed text per answer. No score, no percentage, no traffic light. */
.result { margin: 1rem 0 3rem; padding: 1.5rem; border-radius: .75rem; background: var(--paper); border: 2px solid var(--line); }
.result > h2 { font-size: 1.5rem; color: var(--indigo); }
.result__lists { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
@media (min-width: 40rem) { .result__lists { grid-template-columns: 1fr 1fr; } }
.rlist { background: var(--white); border-radius: .6rem; padding: 1rem 1.25rem; border-top: 5px solid var(--purple); }
.rlist--start { border-top-color: var(--fuchsia); }
.rlist h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.rlist ul { margin: 0; padding-left: 1.2rem; }
.rlist li { margin: .4rem 0; }
.rl { display: none; }
.rl-empty { color: var(--muted); list-style: none; margin-left: -1.2rem !important; }
.rl-note { font-weight: 600; }
.result__status { font-weight: 600; margin: 0 0 1rem; }
.result__status:empty { display: none; }
.result__prompt { color: var(--muted); }

/* No-JavaScript result, driven by the checked answers alone (UX-GDB-353). site.js mirrors the same state
   into data attributes, so browsers without :has() get the same result when scripts run. */
.check:has(#q1-more:checked) .r-q1-more,
.check:has(#q1-less:checked) .r-q1-less,
.check:has(#q1-plan:checked) .r-q1-plan,
.check:has(#q2-yes:checked) .r-q2-yes,
.check:has(#q2-notyet:checked) .r-q2-no,
.check:has(#q2-notsure:checked) .r-q2-no,
.check:has(#q3-both:checked) .r-q3-both,
.check:has(#q3-one:checked) .r-q3-no,
.check:has(#q3-neither:checked) .r-q3-no,
.check:has(#q4-current:checked) .r-q4-current,
.check:has(#q4-behind:checked) .r-q4-behind,
.check:has(#q4-never:checked) .r-q4-never,
.check:has(#q5-prices:checked) .r-q5-prices,
.check:has(#q5-noprices:checked) .r-q5-noprices,
.check:has(#q5-notsure:checked) .r-q5-notsure { display: list-item; }
.check[data-q1="running_over_1y"] .r-q1-more,
.check[data-q1="running_under_1y"] .r-q1-less,
.check[data-q1="plan"] .r-q1-plan,
.check[data-q2="yes"] .r-q2-yes,
.check[data-q2="not_yet"] .r-q2-no,
.check[data-q2="not_sure"] .r-q2-no,
.check[data-q3="both"] .r-q3-both,
.check[data-q3="one"] .r-q3-no,
.check[data-q3="neither_or_not_sure"] .r-q3-no,
.check[data-q4="up_to_date"] .r-q4-current,
.check[data-q4="behind"] .r-q4-behind,
.check[data-q4="never"] .r-q4-never,
.check[data-q5="with_written_prices"] .r-q5-prices,
.check[data-q5="no_prices_yet"] .r-q5-noprices,
.check[data-q5="not_sure"] .r-q5-notsure { display: list-item; }
.check:has(#q4-talk:checked) .r-q4-talk { display: block; }
.check[data-q4="rather_talk"] .r-q4-talk { display: block; }
.check:has(.q input:checked) .result__prompt { display: none; }
.check[data-answered] .result__prompt { display: none; }
.rl-empty { display: none; }
.check[data-js] .rlist[data-empty] .rl-empty { display: list-item; }
/* No-JavaScript empty state (QA gate L5): answered, but nothing belongs in this list. */
.check:has(.q input:checked):not(:has(#q1-more:checked, #q1-less:checked, #q2-yes:checked, #q3-both:checked, #q4-current:checked, #q5-prices:checked)) .rlist--in .rl-empty { display: list-item; }
.check:has(.q input:checked):not(:has(#q1-plan:checked, #q2-notyet:checked, #q2-notsure:checked, #q3-one:checked, #q3-neither:checked, #q4-behind:checked, #q4-never:checked, #q5-noprices:checked, #q5-notsure:checked)) .rlist--start .rl-empty { display: list-item; }

.enquiry { border-top: 1px solid var(--line); padding-top: 2.5rem; }
.enquiry > h2 { font-size: clamp(1.5rem, 4vw, 2rem); color: var(--indigo); }
.consent { margin: 1rem 0 1.5rem; }
.privacy-line { font-size: .9375rem; }
.opt--consent { max-width: 16rem; }
.turnstile-slot { min-height: 0; margin: 0 0 1rem; }
.btn--submit { width: 100%; max-width: 22rem; min-height: 3.5rem; font-size: 1.125rem; margin-top: .5rem; }
.btn[disabled] { opacity: 1; background: #6b6474; cursor: progress; }
.form-status { font-weight: 600; margin-top: 1rem; }
.received { max-width: 44rem; margin: 1rem 0 2rem; padding: 1.5rem; border-radius: .75rem; background: var(--tint); border: 2px solid var(--purple); }
.received h2 { font-size: 1.75rem; color: var(--indigo); }
.after-ask { margin-top: 2.5rem; }

.js-only { display: none; }
.js .js-only { display: inline-flex; }

/* Honeypot: off-screen, unreachable by keyboard, hidden from assistive technology. */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Beat 10: questions. Native disclosure (UX-GDB-362). */
.answer { background: var(--white); border-left: 5px solid var(--purple); border-radius: .5rem; padding: 1.5rem; margin: 1.5rem 0 2rem; }
.answer h3 { font-size: 1.375rem; color: var(--indigo); }
details { border-bottom: 1px solid var(--line); }
details > p { margin: 0 0 1rem; }
details > .source { margin-top: -.25rem; }
summary { cursor: pointer; padding: 1rem 2.25rem 1rem 0; position: relative; list-style: none; min-height: 3rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: .25rem; top: .8rem; font-size: 1.5rem; font-weight: 400; color: var(--purple); line-height: 1; }
details[open] > summary::after { content: "\2212"; }
summary h3 { display: inline; font-size: 1.125rem; margin: 0; }
.sources-h { margin-top: 3rem; }
.sources { padding-left: 1.2rem; font-size: .9375rem; }
.sources li { margin: .5rem 0; }

.footer { background: var(--indigo); color: var(--on-dark); padding: 3rem 0; font-size: .9375rem; }
.footer a { color: var(--on-dark); }
.footer__inner { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 40rem) { .footer__inner { grid-template-columns: auto 1fr; gap: 2rem; } }
.footer__mark { background: var(--white); border-radius: .5rem; padding: .35rem; box-sizing: content-box; }
.footer__name { font-weight: 800; font-size: 1.125rem; }
.footer p { margin: 0 0 .5rem; }
.footer .nonaff { margin-top: 1rem; }

/* Motion reveals content and never rests text at partial opacity (UX-GDB-351, 352). Hidden states exist only
   when boot.js has confirmed motion is allowed; reduced motion never gets the .motion class. */
.motion [data-reveal="rise"]:not(.is-in) { clip-path: inset(0 0 100% 0); transform: translateY(.6em); }
.motion [data-reveal="rise"].is-in { clip-path: inset(0 0 0 0); transform: none; transition: clip-path .7s var(--ease), transform .7s var(--ease); }
.motion [data-delay="1"].is-in { transition-delay: .18s; }
.motion [data-delay="2"].is-in { transition-delay: .36s; }
.motion [data-delay="3"].is-in { transition-delay: .7s; }
.motion [data-delay="5"].is-in { transition-delay: 1.1s; }
.motion [data-reveal="rule"]:not(.is-in) { border-top-color: transparent; }
.motion .scene__band { transform: scaleX(0); }
.motion .is-scene-in .scene__band { transform: scaleX(1); transition: transform 1s var(--ease); }
.motion [data-reveal="ticks"]:not(.is-in) .tick path { stroke-dashoffset: 26; }
.motion [data-reveal="ticks"].is-in .tick path { stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--ease); }
.motion [data-reveal="ticks"].is-in li:nth-child(2) .tick path { transition-delay: .12s; }
.motion [data-reveal="ticks"].is-in li:nth-child(3) .tick path { transition-delay: .24s; }
.motion [data-reveal="ticks"].is-in li:nth-child(4) .tick path { transition-delay: .36s; }
.motion [data-reveal="ticks"].is-in li:nth-child(5) .tick path { transition-delay: .48s; }
.motion [data-reveal="ticks"].is-in li:nth-child(6) .tick path { transition-delay: .6s; }
.motion [data-reveal="ticks"].is-in li:nth-child(7) .tick path { transition-delay: .72s; }

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

/* Printable leaflet (UX-GDB-365): the seven items, the lists if answered, contact, non-affiliation. */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .skip, .actions, .scene__sky, .appbar, .app-intro__alt, .app-intro__note, .scene__call, .alt-routes, .q, .enquiry, .received, .after-ask,
  .print-hide, .faq, .footer__mark, .note, .errors, .result__status, .result__prompt, .rl-empty, .source { display: none !important; }
  p, li { margin: 0 0 4pt !important; }
  h1, h2, h3, h4 { margin: 0 0 5pt !important; }
  .wrap { padding: 0; max-width: none; }
  .kicker { padding-top: 0; margin-bottom: 4pt; border: 0; }
  .result { padding: 8pt; margin: 6pt 0; }
  .rlist { padding: 4pt 8pt; }
  .check { margin-top: 4pt; }
  .app-intro, .app-body { padding: 0 0 8pt !important; background: #fff !important; color: #000 !important; }
  .app-intro .nonaff { color: #000 !important; }
  .beat, .scene { padding: 0 0 8pt !important; min-height: 0; background: #fff !important; color: #000 !important; display: block; }
  .scene h1 { font-size: 22pt; max-width: none; color: #000; }
  .kicker, .scene__lede, .nonaff--dark, .source--dark { color: #000 !important; }
  .numerals { font-size: 15pt; margin-bottom: 4pt !important; }
  .numerals__line { display: inline; }
  .numerals__line + .numerals__line::before { content: ' '; }
  .ticks li { font-size: 11pt; padding: 3pt 0; }
  h2 { font-size: 15pt; }
  .result { border: 1px solid #000; background: #fff; page-break-inside: avoid; }
  .check:not([data-answered]) .result { display: none; }
  a { color: #000; text-decoration: none; }
  .footer { background: #fff; color: #000; padding: 0; }
  .footer a { color: #000; }
  .motion [data-reveal] { clip-path: none !important; transform: none !important; }
}