:root {
  --bg:#faf8f5;
  --navy:#252743;
  --lavender:#9a8cc8;
  --light:#eeeaf7;
  --gold:#c5a46d;
  --text:#2e2e35;
  --muted:#62626f;
  --line:#e4dfe8
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#eeeae5;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:14px;
  line-height:1.9
}
button,input,select {
  font:inherit
}
button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait
}
a {
  color:inherit
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #7965ac;
  outline-offset:4px
}
[hidden] {
  display:none!important
}
.site-header,main,footer {
  max-width:480px;
  margin:auto;
  background:var(--bg)
}
.site-header {
  padding:20px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e9e4e0
}
.brand {
  font-family:Georgia,"Times New Roman",serif;
  font-size:27px;
  letter-spacing:1px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--navy)
}
.brand-dot {
  font-size:12px;
  color:var(--gold);
  align-self:flex-start
}
.header-note {
  font-size:9px;
  color:var(--muted);
  letter-spacing:.04em
}
.hero {
  padding:30px 28px 0;
  text-align:center;
  background:radial-gradient(ellipse at 60% 20%,#e6dff4aa,transparent 55%),var(--bg);
  overflow:hidden
}
.eyebrow {
  font-size:9px;
  letter-spacing:.18em;
  font-weight:600;
  color:#756a8d;
  line-height:1.6;
  margin:0 0 20px
}
.celestial {
  height:205px;
  position:relative;
  max-width:360px;
  margin:0 auto 9px
}
.celestial svg {
  width:100%;
  height:100%;
  position:relative;
  z-index:2;
  overflow:visible
}
.celestial path {
  stroke:#b8a183;
  stroke-width:.8;
  fill:none;
  opacity:.75
}
.celestial circle {
  fill:#ae925e;
  stroke:#faf8f5;
  stroke-width:2
}
.moon-shape {
  position:absolute;
  left:calc(50% - 40px);
  top:62px;
  width:80px;
  height:80px;
  border-radius:50%;
  background:linear-gradient(125deg,#eee7d8,#cdb588);
  box-shadow:0 0 40px #d8c8a855
}
.moon-shape:after {
  content:"";
  position:absolute;
  left:22px;
  top:-10px;
  width:72px;
  height:72px;
  border-radius:50%;
  background:#ece6f1
}
.orbit {
  position:absolute;
  border:1px solid #c5a46d33;
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-23deg)
}
.orbit-one {
  width:250px;
  height:170px
}
.orbit-two {
  width:310px;
  height:200px;
  transform:translate(-50%,-50%) rotate(32deg)
}
.tiny-star {
  position:absolute;
  color:#b49767;
  font-size:19px
}
.star-one {
  left:32px;
  top:32px
}
.star-two {
  right:46px;
  bottom:16px;
  font-size:12px
}
.hero-label {
  font-size:11px;
  letter-spacing:.16em;
  color:#746680;
  margin:0 0 14px
}
h1,h2 {
  font-family:"Yu Mincho","Hiragino Mincho ProN",Georgia,serif;
  color:var(--navy);
  font-weight:500;
  line-height:1.65;
  letter-spacing:.035em
}
h1 {
  font-size:30px;
  margin:0 0 24px
}
h1 em {
  font-style:normal;
  background:linear-gradient(transparent 72%,#e1d8ed 72%)
}
h2 {
  font-size:23px;
  margin:0 0 22px
}
.hero h1 {
  font-size:34px;
  line-height:1.55;
  margin-bottom:22px
}
.hero-copy {
  font-size:12px;
  line-height:2.2;
  margin:0 0 28px
}
.primary {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:58px;
  padding:16px 18px;
  color:white;
  border:1px solid var(--navy);
  border-radius:5px;
  background:var(--navy);
  text-decoration:none;
  font-size:14px;
  letter-spacing:.035em;
  box-shadow:0 7px 18px #25274312;
  transition:background .2s,transform .2s
}
.primary:hover {
  background:#3b3d5e
}
.primary span {
  margin-left:auto;
  font-size:20px;
  line-height:1
}
.primary:active {
  transform:translateY(1px)
}
.micro {
  font-size:11px;
  color:var(--muted);
  line-height:1.8
}
.trust {
  display:flex;
  justify-content:center;
  gap:12px;
  align-items:center;
  margin:13px 0 28px
}
.trust i {
  height:10px;
  width:1px;
  background:#ccc4d3
}
.hero-bottom {
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  padding:18px 0;
  letter-spacing:.1em
}
.section-pad {
  padding:44px 28px
}
.empathy {
  background:#f4f0ed;
  padding-top:52px
}
.empathy p:not(.eyebrow) {
  font-size:13px;
  line-height:2.3;
  margin:22px 0
}
.fine-star {
  text-align:center;
  color:var(--gold);
  padding-top:12px
}
.section-intro {
  color:var(--muted);
  font-size:12px;
  margin-bottom:28px
}
.axis-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:28px 0
}
.axis-card {
  padding:18px 14px;
  background:#fffdfb;
  border:1px solid var(--line);
  border-radius:6px
}
.axis-icon {
  color:#8e7aad;
  font-size:23px;
  line-height:1.4
}
.axis-card h3 {
  font-size:13px;
  font-weight:500;
  margin:10px 0 5px;
  color:var(--navy)
}
.axis-card p {
  font-size:11px;
  line-height:1.9;
  color:var(--muted);
  margin:0
}
.flow {
  min-height:650px
}
.section-symbol {
  font-size:55px;
  color:#a88f62;
  line-height:1.5;
  margin:10px 0 22px
}
.intro-steps {
  padding:0;
  list-style:none;
  margin:30px 0
}
.intro-steps li {
  border-bottom:1px solid var(--line);
  padding:15px 0
}
.intro-steps span {
  font-family:Georgia,serif;
  margin-right:20px;
  color:#9b895f
}
.notice {
  background:#f0ecf4;
  border-radius:5px;
  padding:18px;
  font-size:11px;
  line-height:2;
  color:#5b5368;
  margin:25px 0
}
.text-button {
  display:block;
  background:none;
  border:0;
  padding:15px;
  color:#5e5374;
  text-decoration:underline;
  text-underline-offset:5px;
  font-size:12px;
  margin:10px auto 0;
  min-height:44px
}
.person-fieldset {
  padding:20px 16px 22px;
  border:1px solid var(--line);
  border-radius:6px;
  margin:28px 0;
  background:#fffdfa;
  min-width:0
}
.person-fieldset legend {
  padding:0 8px;
  color:var(--navy);
  font-weight:600
}
.person-fieldset label {
  display:block;
  font-size:12px;
  margin-bottom:8px
}
.required,.optional {
  font-size:10px;
  margin-left:8px;
  color:#70617e
}
.date-fields {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:8px;
  margin-bottom:22px
}
input,select {
  color:var(--navy);
  background:#fff;
  border:1px solid #bab3c4;
  border-radius:4px;
  min-height:46px;
  padding:9px;
  width:100%;
  min-width:0;
  font-size:16px
}
.date-fields label {
  font-size:10px;
  color:var(--muted)
}
.time-input {
  margin-top:14px
}
.error {
  color:#a02e47;
  font-size:12px
}
.question-progress {
  position:sticky;
  top:0;
  padding:22px 28px 15px;
  background:var(--bg);
  z-index:5;
  border-bottom:1px solid var(--line)
}
.question-progress>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--muted)
}
.question-progress strong {
  color:var(--navy);
  font-weight:500;
  font-size:13px
}
progress {
  width:100%;
  height:4px;
  appearance:none;
  border:0;
  display:block;
  margin-top:14px;
  background:#e7e2ed;
  border-radius:4px
}
progress::-webkit-progress-bar {
  background:#e7e2ed;
  border-radius:4px
}
progress::-webkit-progress-value {
  background:#9a8cc8;
  border-radius:4px
}
progress::-moz-progress-bar {
  background:#9a8cc8
}
.question-body {
  padding-top:30px
}
.question-body h1 {
  font-size:24px;
  min-height:80px;
  margin-bottom:15px
}
.answers {
  display:grid;
  gap:11px;
  margin-top:25px
}
.answer {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:15px 14px;
  min-height:58px;
  border:1px solid #d5cedf;
  border-radius:5px;
  background:#fffdfa;
  color:var(--navy);
  font-size:13px;
  line-height:1.7
}
.answer:hover,.answer[aria-pressed="true"] {
  background:var(--light);
  border-color:#9a8cc8
}
.answer-letter {
  flex:0 0 24px;
  font:13px Georgia,serif;
  color:#7c6a96
}
.answer[aria-pressed="true"] .answer-letter {
  font-weight:bold
}
.loading {
  text-align:center;
  padding-top:120px
}
.loader {
  font-size:62px;
  color:#b29867;
  animation:breathe 1.6s ease-in-out infinite;
  margin-bottom:25px
}
@keyframes breathe {
  50% {
    opacity:.35;
    transform:scale(.9)
  }
  
}
.screen:not([hidden]) {
  animation:enter .22s ease-out
}
@keyframes enter {
  from {
    opacity:.4;
    transform:translateY(5px)
  }
  to {
    opacity:1;
    transform:none
  }
  
}
.result-hero {
  text-align:center;
  background:radial-gradient(ellipse at 50% 35%,#e9e1f3,transparent 75%),var(--bg)
}
.result-hero h1 {
  font-family:inherit;
  font-size:16px
}
.score-ring {
  border:1px solid #bba77f;
  border-radius:50%;
  width:176px;
  height:176px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  margin:28px auto 16px;
  outline:1px solid #c5a46d33;
  outline-offset:8px;
  background:#faf8f555
}
.score-ring span {
  font:68px Georgia,serif;
  color:var(--navy);
  line-height:1.15
}
.score-ring small {
  letter-spacing:.15em;
  color:#7e7390;
  font-size:12px
}
.type-label {
  display:block;
  font-size:11px;
  letter-spacing:.1em;
  color:#71657f;
  margin-top:30px
}
.result-hero h2 {
  font-size:29px;
  margin:10px 0 16px
}
.result-hero>p:last-child {
  font-size:13px;
  line-height:2.2
}
.score-item {
  padding:24px 0;
  border-bottom:1px solid var(--line)
}
.score-heading {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.score-heading h3 {
  margin:0;
  color:var(--navy);
  font-size:14px;
  font-weight:500
}
.score-heading strong {
  font:22px Georgia,serif;
  color:#6e5a95
}
.bar-track {
  height:5px;
  background:#e5dfec;
  margin:13px 0;
  border-radius:5px;
  overflow:hidden
}
.bar-fill {
  height:100%;
  background:linear-gradient(90deg,#c0afd5,#8878ab);
  border-radius:5px
}
.score-item p {
  font-size:12px;
  margin:10px 0 0;
  line-height:2
}
.score-item .method {
  font-size:10px;
  color:var(--muted)
}
.advice {
  border-left:2px solid var(--gold);
  padding:5px 0 5px 20px;
  margin:40px 0
}
.advice h2 {
  font-size:21px
}
.advice p:last-child {
  font-size:13px;
  line-height:2.1
}
.affiliate-section {
  background:#eeebf3
}
.affiliate-section h2 {
  margin-top:28px
}
.affiliate-section>p:not(.micro) {
  font-size:12px;
  line-height:2
}
.pr {
  display:inline-block;
  border:1px solid #8f829f;
  padding:0 8px;
  font-size:10px;
  color:#635373
}
.consult-topics {
  list-style:none;
  padding:0;
  margin:25px 0
}
.consult-topics li {
  font-size:12px;
  padding:8px 0;
  border-bottom:1px solid #dcd6e6
}
.consult-topics li:before {
  content:"✧";
  color:#a38b5d;
  margin-right:9px
}
.affiliate-card {
  border:1px solid #d6ccdf;
  background:var(--bg);
  padding:22px 18px;
  margin:20px 0;
  border-radius:6px
}
.affiliate-card h3 {
  margin:10px 0;
  font-size:17px
}
.affiliate-card p {
  font-size:12px
}
.affiliate-card .primary {
  font-size:12px;
  line-height:1.8
}
.unconfigured {
  font-size:12px;
  padding:20px;
  border:1px dashed #bdb1cc;
  border-radius:5px
}
.secondary {
  width:100%;
  background:transparent;
  border:1px solid #aaa0b9;
  color:var(--navy);
  padding:13px;
  border-radius:5px;
  min-height:48px
}
.restart-area {
  padding-top:28px;
  padding-bottom:28px
}
.faq {
  border-top:1px solid var(--line)
}
.faq h2 {
  font-size:22px
}
.faq details {
  border-bottom:1px solid var(--line);
  padding:18px 0;
  font-size:12px
}
.faq summary {
  cursor:pointer;
  color:var(--navy);
  min-height:28px
}
.faq details p {
  color:var(--muted);
  padding:0 12px
}
footer {
  text-align:center;
  border-top:1px solid var(--line);
  padding:35px 26px;
  color:var(--muted)
}
footer>p {
  font-size:10px
}
footer .brand {
  font-size:29px
}
.skip-link {
  position:fixed;
  top:-100px;
  left:15px;
  background:white;
  padding:10px;
  z-index:100
}
.skip-link:focus {
  top:10px
}
@media(min-width:768px) {
  body {
    padding:28px 0
  }
  .site-header {
    border-radius:12px 12px 0 0
  }
  footer {
    border-radius:0 0 12px 12px
  }
  .site-header,main,footer {
    box-shadow:0 10px 50px #25274308
  }
  
}
@media(max-width:359px) {
  .site-header {
    padding:17px 18px
  }
  .header-note {
    font-size:8px
  }
  .section-pad {
    padding-left:20px;
    padding-right:20px
  }
  .hero {
    padding-left:20px;
    padding-right:20px
  }
  .hero h1 {
    font-size:29px
  }
  .hero-copy {
    font-size:11px
  }
  .celestial {
    height:185px
  }
  .primary {
    font-size:12px
  }
  .axis-grid {
    gap:8px
  }
  .axis-card {
    padding:15px 11px
  }
  .question-body h1 {
    font-size:22px
  }
  .answer {
    font-size:12px
  }
  .date-fields {
    gap:5px
  }
  select {
    padding:8px 4px
  }
  
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  
}
@media(max-width:359px) {
  .axes-section h2 {
    font-size:20px
  }
  
}
@media(max-width:767px) and (max-height:850px) {
  .question-body {
    padding-top:20px;
    padding-bottom:20px
  }
  .question-body h1 {
    font-size:21px;
    min-height:0;
    margin-bottom:10px
  }
  .question-body .eyebrow {
    margin-bottom:12px
  }
  .question-body .answers {
    margin-top:18px;
    gap:8px
  }
  .question-body .answer {
    min-height:48px;
    padding:12px
  }
  .question-body .text-button {
    margin-top:8px;
    padding:10px
  }
  .question-progress {
    padding-top:16px;
    padding-bottom:12px
  }
  
}
:root {
  --bg: #f8f5fc;
  --navy: #38274f;
  --lavender: #9b7bc1;
  --light: #eee5f6;
  --gold: #cbb079;
  --text: #392f46;
  --muted: #70617e;
  --line: #e1d6eb;
}
body { background: #e3dbea; }
.site-header { background: #38274f; border-color: #746081; }
.site-header .brand { color: #f2eafc; }
.header-note { color: #d8cce8; }
.hero {
  background: radial-gradient(ellipse at 50% 15%, #806298 0, #4a345f 38%, #30223f 100%);
  color: #f3ebfa;
  position: relative;
}
.hero h1 { color: #fcf7ff; }
.hero .eyebrow, .hero-label { color: #d7c196; }
.hero-copy { color: #ece0f5; }
.hero h1 em { background: linear-gradient(transparent 80%, #a783b866 80%); }
.hero .micro, .hero-bottom { color: #d6c7e3; }
.hero-bottom { border-color: #aa93bb55; }
.hero .primary { background: linear-gradient(110deg,#ead9af,#c8ac75); color:#35233f; border-color:#ead8b2; }
.hero .trust i { background:#b39cc5; }
.celestial { height: 224px; }
.celestial path { stroke:#e2c894; opacity:1; }
.celestial circle { fill:#f1d9a7; stroke:#796087; }
.moon-shape { background:linear-gradient(135deg,#fff6d8,#c9ad78); box-shadow:0 0 55px #e6d1a547; }
.moon-shape:after { background:#6d5185; }
.orbit { border-color:#c9bfd75c; }
.orbit-two { border-color:#d8ba7f55; }
.tiny-star { color:#efddb9; }
.primary { background:linear-gradient(110deg,#60417e,#3c2855); border-color:#674986; }
.primary:hover { background:#6d4b8d; }
.empathy { background:linear-gradient(#f0e8f6,#e9e0f1); }
.story-illustration { display:block; width:100%; height:auto; margin:24px auto 0; }
.intro-illustration { display:block; width:100%; max-width:320px; height:auto; margin:0 auto 24px; }
.axis-card { background:linear-gradient(150deg,#fffcff,#f0e8f7); border-color:#d4c2e0; text-align:center; box-shadow:0 5px 15px #64498008; }
.axis-illustration { display:block; width:120px; max-width:100%; height:90px; margin:0 auto; }
.axis-card h3 { margin-top:8px; }
.axis-card p { text-align:left; }
.result-hero { background:radial-gradient(ellipse at 50% 35%,#765791,#39274f 75%); color:#eee3f6; position:relative; }
.result-hero h1,.result-hero h2 { color:#fbf4ff; }
.result-hero .eyebrow { color:#dcc89c; }
.result-hero .micro,.result-hero .type-label { color:#d8c9e6; }
.score-ring { background:radial-gradient(circle,#735a8d88,#35234066); border-color:#dfc58f; outline-color:#c2bfd45c; box-shadow:0 0 45px #d3b5f01c; position:relative; }
.score-ring:before,.score-ring:after { content:'✦'; position:absolute; color:#dcc18a; font-size:20px; top:12px; left:-22px; }
.score-ring:after { left:auto; right:-22px; top:auto; bottom:12px; font-size:14px; color:#d0d1e2; }
.score-ring span { color:#fff3d6; }
.score-ring small { color:#d8c9e6; }
.score-emblem { flex:0 0 60px; margin-right:8px; }
.score-heading strong { margin-left:auto; color:#775298; }
.score-heading h3 { font-size:13px; }
.bar-fill { background:linear-gradient(90deg,#bfa2d7,#8560a6,#bba373); }
.advice { border-color:#bca16d; }
.affiliate-section { background:linear-gradient(145deg,#e9dff1,#f3edf7); }
.notice { background:#ece5f3; }
footer { background:#38274f; color:#e0d2ed; border-color:#665079; }
footer .brand { color:#e4cea0; }
footer .micro { color:#cdbddd; }

/* Art Nouveau illustration direction */
.mucha-art { margin: 0 -16px 24px; border: 1px solid #bfa47488; border-radius: 48% 48% 3px 3px / 8% 8% 3px 3px; overflow: hidden; box-shadow: 0 12px 30px #20142944; }
.mucha-art img { display: block; width: 100%; height: auto; }
.hero { background: linear-gradient(#443047, #38274f); }
.axis-card { border-radius: 42px 42px 6px 6px; border-color: #c5ad815e; }
.axis-illustration { height: 94px; }
.empathy, .axes-section { position: relative; }
.empathy:before, .axes-section:before { content: '❦'; display: block; text-align: center; color: #a68a57; font-size: 27px; line-height: 1; margin-bottom: 24px; }
.result-hero { border-bottom: 3px double #c5a46d; }

/* Original illustrated series */
.axis-card { padding: 9px 9px 16px; border-radius: 5px; background: #f3edf8; }
.axis-illustration { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid #b99a6655; border-radius: 3px; }
.axis-card h3 { margin: 12px 3px 7px; }
.axis-card p { margin: 0 4px; }
.story-illustration, .intro-illustration { border: 1px solid #b59c70; border-radius: 4px; box-shadow: 0 8px 24px #38274f16; }
.intro-illustration { max-width: none; }
.score-emblem { width: 64px; height: 64px; flex-basis: 64px; object-fit: cover; border-radius: 50%; border: 1px solid #bfa575; margin-right: 12px; }
/* Make the primary landing action readable on the gold background. */
.hero .primary {
  color: #24152f;
  background: linear-gradient(110deg, #f3e4bf, #ddc18b);
  border-color: #f1dfb4;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  min-height: 60px;
  text-shadow: none;
}
.hero .primary:hover {
  color: #24152f;
  background: linear-gradient(110deg, #f3e4bf, #ddc18b);
}
.hero .primary span {
  font-size: 23px;
  font-weight: 700;
}
@media (max-width: 359px) {
  .hero .primary { font-size: 15px; padding-inline: 14px; gap: 8px; }
}
/* Botanical ornament replaces the landing CTA arrow. */
.hero .primary {
  position: relative;
  justify-content: flex-start;
  padding-left: 22px;
  padding-right: 78px;
  min-height: 64px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 3px #f7eacb, inset 0 0 0 4px #b89a6355, 0 7px 18px #20142922;
}
.cta-flourish {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 42px;
  pointer-events: none;
}
@media (max-width: 359px) {
  .hero .primary { padding-left: 16px; padding-right: 58px; font-size: 14px; }
  .cta-flourish { right: 9px; width: 42px; height: 34px; }
}
/* The gold fill stays constant on hover; only the shadow changes. */
.hero .primary { overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.hero .primary .cta-flourish { right: 0; width: 82px; height: 100%; }
.hero .primary:hover { box-shadow: inset 0 0 0 3px #f7eacb, inset 0 0 0 4px #a8854b88, 0 8px 22px #20142930; }
@media (max-width: 359px) { .hero .primary .cta-flourish { right: 0; width: 62px; height: 100%; } }
/* Result-only affiliate section: one column at every viewport size. */
#affiliate-section #affiliate-title { font-size: 22px; margin-top: 0; }
#affiliate-section > p, #affiliate-section .affiliate-card p,
#affiliate-section .pr, #affiliate-section .unconfigured { font-size: 14px; line-height: 1.9; }
#affiliate-cards { display: flex; flex-direction: column; gap: 18px; }
#affiliate-section .affiliate-card { width: 100%; margin: 0; padding: 24px 18px; }
#affiliate-section .affiliate-card h3 { font-size: 18px; line-height: 1.7; }
#affiliate-section .affiliate-service { color: #6d527f; font-weight: 600; }
#affiliate-section .affiliate-card-phone { border: 1px solid #b59a67; box-shadow: 0 5px 20px #63457712; }
#affiliate-section .primary { width: 100%; min-height: 52px; font-size: 14px; font-weight: 700; margin-top: 20px; }
#affiliate-section .affiliate-card-phone .primary { min-height: 60px; }
#affiliate-section .affiliate-disclosure { margin: 20px 0; color: #61516e; }
#affiliate-section .affiliate-terms { margin-bottom: 0; color: #61516e; }
/* Glossy raised affiliate buttons. Keep the gradient stable on hover. */
#affiliate-section .affiliate-card { position: relative; }
#affiliate-section .affiliate-card .primary {
  position: relative;
  overflow: hidden;
  min-height: 60px;
  padding: 17px 12px;
  border-radius: 13px;
  border: 1px solid #493060;
  color: #fff;
  background: linear-gradient(180deg, #9473b3 0%, #765094 45%, #623b81 49%, #73488f 100%);
  box-shadow: inset 0 2px 1px #ffffff80, inset 0 -2px 3px #35204566, 0 5px 0 #49305e, 0 9px 14px #37234526;
  text-shadow: 0 1px 2px #24133099;
  transition: transform .15s ease, box-shadow .15s ease;
  isolation: isolate;
}
#affiliate-section .affiliate-card .primary::before {
  content: '';
  position: absolute;
  inset: 2px 5px auto;
  height: 43%;
  border-radius: 10px 10px 45% 45%;
  background: linear-gradient(#ffffff30, #ffffff00);
  pointer-events: none;
  z-index: -1;
}
#affiliate-section .affiliate-card-chat .primary {
  border-color: #275743;
  background: linear-gradient(180deg, #5c967b 0%, #3b795c 45%, #286448 49%, #347654 100%);
  box-shadow: inset 0 2px 1px #ffffff80, inset 0 -2px 3px #143c2a66, 0 5px 0 #234d39, 0 9px 14px #20443126;
  text-shadow: 0 1px 2px #153c2a99;
}
#affiliate-section .affiliate-card .primary:hover { transform: translateY(-1px); }
#affiliate-section .affiliate-card .primary:active { transform: translateY(3px); }
#affiliate-section .affiliate-pixel { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; border: 0; }
/* Brighter affiliate actions and clearly framed advertising disclosure. */
#affiliate-section .affiliate-card .primary {
  color: #241133;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #e0c5f4 0%, #c8a2e5 45%, #b78bd9 49%, #c79de6 100%);
  border-color: #9a70bb;
  box-shadow: inset 0 2px 1px #ffffffe0, inset 0 -2px 3px #76459533, 0 5px 0 #9163b0, 0 9px 14px #37234520;
  text-shadow: none;
}
#affiliate-section .affiliate-card-chat .primary {
  color: #123826;
  background: linear-gradient(180deg, #c6efd9 0%, #a0dfbd 45%, #80cba2 49%, #a0dfb9 100%);
  border-color: #5ca87e;
  box-shadow: inset 0 2px 1px #ffffffe0, inset 0 -2px 3px #35734e33, 0 5px 0 #51976c, 0 9px 14px #20443120;
  text-shadow: none;
}
#affiliate-section .affiliate-disclosure {
  color: #513367;
  background: linear-gradient(110deg, #f3e5ce, #eee0f8);
  border: 1px solid #c6ab79;
  border-left: 4px solid #a68146;
  border-radius: 6px;
  padding: 14px 16px;
  font-weight: 600;
}
#affiliate-section .pr {
  color: #513367;
  background: #ecddf5;
  border: 1px solid #bb9acb;
  border-radius: 4px;
  padding: 2px 10px;
  font-weight: 700;
  letter-spacing: .08em;
}
#affiliate-section .affiliate-card-chat .pr {
  color: #24503b;
  background: #e0f1e7;
  border-color: #96bda5;
}
/* Cosmic purple theme: layered nebulae and quiet stars, no external assets. */
:root {
  --bg: #281c3e;
  --navy: #f3e9ff;
  --text: #eee4f6;
  --muted: #d0bddf;
  --line: #80639766;
  --light: #543768;
}
body {
  color: var(--text);
  background-color: #160f26;
  background-image:
    radial-gradient(1px 1px at 28px 44px, #e8dcffbb 95%, transparent),
    radial-gradient(1px 1px at 130px 160px, #d9c392aa 95%, transparent),
    radial-gradient(ellipse at 15% 20%, #68438e55, transparent 55%),
    radial-gradient(ellipse at 90% 65%, #3f356a66, transparent 60%);
  background-size: 187px 241px, 277px 311px, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
main {
  background-color: #2a1b3f;
  background-image:
    radial-gradient(1px 1px at 30px 70px, #f6eaff88 90%, transparent),
    radial-gradient(1px 1px at 190px 170px, #d6bd9277 90%, transparent),
    radial-gradient(ellipse at 0% 20%, #80509844, transparent 50%),
    radial-gradient(ellipse at 100% 75%, #56539344, transparent 55%);
  background-size: 213px 307px, 283px 379px, 100% 1500px, 100% 1800px;
}
.site-header, footer { background: #21152fee; }
.hero, .result-hero { background: radial-gradient(ellipse at 50% 25%, #69478599, transparent 70%), #2b1b4088; }
.empathy, .axes-section, .faq, .flow, .restart-area { background: transparent; }
.eyebrow, .section-intro, .micro, .axis-card p, .faq details p, .score-item .method { color: #d0bddf; }
.axis-card { background: #422952cc; border-color: #a587ad66; }
.axis-card h3, .score-heading h3, .faq summary, .person-fieldset legend { color: #f2e5fa; }
.notice { color: #e4d5ed; background: #62487855; border: 1px solid #a386b344; }
.person-fieldset { background: #392449dd; border-color: #9b7bac77; }
.required, .optional, .date-fields label { color: #d7c0e4; }
input, select { color: #f6ecff; background: #39244d; border-color: #a184b5; color-scheme: dark; }
.question-progress { background: #2a1c3ff5; }
.question-progress strong, .question-progress>div { color: #e7d9f2; }
.answer { color: #f5eafd; background: #422c57; border-color: #90719f; }
.answer-letter { color: #e0c593; }
.answer:hover, .answer[aria-pressed="true"] { background: #684682; border-color: #d4b682; }
.text-button { color: #e0c8f1; }
.secondary { color: #f0e0ff; border-color: #b69ac9; background: #55346b55; }
.error { color: #ffbdcc; }
.score-heading strong { color: #e0bfef; }
.bar-track { background: #6a4d7b77; }
.bar-fill { background: linear-gradient(90deg, #aa85cd, #d9b6ee, #dec38f); }
.affiliate-section { background: radial-gradient(ellipse at 80% 40%, #77508b44, transparent 70%), #34204688; }
#affiliate-section .affiliate-card { background: #39254ee8; border-color: #9473a7; }
#affiliate-section .affiliate-card-phone { border-color: #c2a273; }
#affiliate-section .affiliate-service, #affiliate-section .affiliate-terms { color: #e0cdec; }
#affiliate-section .affiliate-disclosure { color: #f4e4c6; background: linear-gradient(110deg, #65503699, #65457c99); border-color: #c2a273; }
#affiliate-section .pr { color: #f0defa; background: #704c89; border-color: #b393c7; }
#affiliate-section .affiliate-card-chat .pr { color: #dcf4e8; background: #315f50; border-color: #80b39a; }
#affiliate-section .affiliate-card .primary {
  color: #fff;
  background: linear-gradient(180deg, #9362b5, #77429c 45%, #65348c 49%, #7b45a1);
  border-color: #b487d1;
  box-shadow: inset 0 2px 1px #ffffff70, inset 0 -2px 3px #39214655, 0 5px 0 #4f266c, 0 9px 14px #150b252e;
  text-shadow: 0 1px 2px #2c143b;
}
#affiliate-section .affiliate-card-chat .primary {
  color: #fff;
  background: linear-gradient(180deg, #4b9577, #297454 45%, #206444 49%, #2d7955);
  border-color: #78bd9c;
  box-shadow: inset 0 2px 1px #ffffff70, inset 0 -2px 3px #153b2855, 0 5px 0 #17472f, 0 9px 14px #12261c2e;
  text-shadow: 0 1px 2px #123323;
}
.skip-link { background: #352248; color: #fff; }
/* Mobile ergonomics and safe areas. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, summary { touch-action: manipulation; }
@media (max-width: 767px) {
  body { padding: 0; background-attachment: scroll; }
  .site-header { padding-top: max(16px, env(safe-area-inset-top)); }
  footer { padding-bottom: max(30px, env(safe-area-inset-bottom)); }
  .section-pad { padding: 32px 22px; }
  .hero { padding: 22px 22px 0; }
  .hero .eyebrow { font-size: 9px; margin-bottom: 16px; }
  .mucha-art { margin: 0 -8px 20px; }
  .hero h1 { font-size: clamp(28px, 8vw, 34px); margin-bottom: 18px; }
  .hero-copy { font-size: 13px; line-height: 2; margin-bottom: 22px; }
  .hero-label, .trust { font-size: 12px; }
  .header-note { font-size: 10px; }
  .micro, .section-intro, .notice, .faq details, .text-button { font-size: 13px; }
  .axis-card p, .score-item p, .score-item .method { font-size: 13px; line-height: 1.9; }
  .axis-card h3 { font-size: 14px; }
  .axis-grid { gap: 10px; }
  .person-fieldset { padding: 18px 14px; }
  .person-fieldset label, .required, .optional, .date-fields label { font-size: 13px; }
  input, select { font-size: 16px; min-height: 48px; }
  .flow { min-height: calc(100svh - 82px); }
  .question-body { padding: 20px 22px 24px; }
  .question-body h1 { font-size: 22px; min-height: 0; }
  .question-body .answer { font-size: 14px; min-height: 52px; padding: 12px; }
  .question-body .answers { gap: 9px; }
  .question-progress { padding: 16px 22px 12px; padding-top: max(16px, env(safe-area-inset-top)); }
  .question-progress > div { font-size: 12px; }
  .text-button { min-height: 48px; }
  .faq summary { min-height: 44px; display: list-item; align-content: center; }
  .result-hero h2 { font-size: clamp(24px, 7.2vw, 29px); }
  #affiliate-section #affiliate-title { font-size: 20px; text-wrap: pretty; }
  #affiliate-section .affiliate-card h3 { font-size: 16px; }
  #affiliate-section .affiliate-card { padding: 20px 15px 25px; }
  #affiliate-section .affiliate-card .primary { font-size: 15px; min-height: 60px; }
  .score-emblem { width: 52px; height: 52px; flex-basis: 52px; margin-right: 9px; }
  .score-heading h3 { font-size: 14px; }
}
@media (max-width: 359px) {
  .site-header { padding-inline: 18px; }
  .header-note { font-size: 9px; }
  .section-pad, .question-body { padding-inline: 18px; }
  .hero { padding-inline: 18px; }
  .hero-copy { font-size: 12px; }
  .axis-card { padding-inline: 7px; }
  .axis-card p { margin-inline: 2px; }
  .question-body h1 { font-size: 21px; }
  #affiliate-section .affiliate-card .primary { font-size: 14px; }
}
/* Intro action immediately follows the three steps. */
#intro .intro-start-cta {
  position: relative;
  overflow: hidden;
  justify-content: flex-start;
  min-height: 64px;
  padding: 16px 82px 16px 22px;
  color: #24152f;
  background: linear-gradient(110deg, #f3e4bf, #ddc18b);
  border: 1px solid #f1dfb4;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  text-shadow: none;
  box-shadow: inset 0 0 0 3px #f7eacb, inset 0 0 0 4px #b89a6355, 0 7px 18px #20142922;
  transition: box-shadow .2s ease, transform .2s ease;
}
#intro .intro-start-cta:hover {
  background: linear-gradient(110deg, #f3e4bf, #ddc18b);
  box-shadow: inset 0 0 0 3px #f7eacb, inset 0 0 0 4px #a8854b88, 0 8px 22px #20142930;
}
#intro .intro-start-cta .cta-flourish { right: 0; width: 82px; height: 100%; }
@media (max-width: 359px) {
  #intro .intro-start-cta { font-size: 16px; padding-left: 18px; padding-right: 68px; }
  #intro .intro-start-cta .cta-flourish { width: 62px; }
}
.hero-explanation { color: #edddbd; font-size: 12px; line-height: 1.8; text-align: center; margin: -6px 0 20px; letter-spacing: 0; }
#result-oneline { color: #f1dfba; font-size: 16px; font-weight: 600; line-height: 1.9; margin: 12px 0 20px; }
#score-highlights { display: grid; gap: 12px; margin: 24px 0 30px; }
.highlight-panel { padding: 18px; border: 1px solid #b7986855; background: #71518433; border-radius: 6px; }
.highlight-panel h3 { margin: 0 0 10px; font-size: 14px; color: #e8cfa1; }
.highlight-panel ul { margin: 0; padding-left: 20px; }
.highlight-panel p { margin: 0; font-size: 14px; }
.result-summary { padding: 24px 0; border-bottom: 1px solid var(--line); }
.result-summary h2 { font-size: 21px; }
#result-summary-text { white-space: pre-line; font-size: 14px; line-height: 2; }
.affiliate-bridge { margin-bottom: 28px; font-size: 14px; line-height: 2; }
.affiliate-bridge ul { padding-left: 20px; color: #efdcb9; }
#affiliate-section .phone-emphasis { color: #efd6a6; margin: 0 0 14px; font-weight: 600; }
#affiliate-section .affiliate-card-phone .primary { min-height: 66px; }
@media (max-width: 359px) { .hero-explanation { font-size: 10px; line-height: 1.9; } }