/* Fit-Easy public pages;
   colors remain controlled by the shared theme. */
:root {
  --primary:var(--color-primary);
  --primary-dark:var(--color-primary-hover);
  --black:var(--color-text);
  --white:var(--color-bg);
  --gray-bg:var(--color-surface);
  --gray-border:var(--color-border);
  --gray-text:var(--color-text-muted);
  --c-naver:#03a951;
  --c-insta:#d83e79;
  --c-youtube:#d83030;
  --c-tiktok:var(--color-text)}

* {
  margin:0;
  padding:0;
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body {
  overflow-wrap:anywhere;
  font-family:var(--font-base);
  color:var(--black);
  background:var(--white);
  font-size:calc(16px * var(--fe-text-scale,1));
  line-height:1.7}
a {
  color:inherit;
  text-decoration:none}
button,input,textarea {
  font:inherit}
button {
  cursor:pointer}
ul {
  list-style:none}
.hidden {
  display:none!important}
a,button,input,textarea,summary {
  -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid var(--primary);
  outline-offset:4px}
button:disabled {
  cursor:wait;
  opacity:.6}

fe-site-header {
  display:block;
  position:sticky;
  top:0;
  z-index:20;
  background:var(--white);
  border-bottom:1px solid var(--gray-border)}
fe-site-footer {
  display:block}
.container {
  max-width:1160px;
  margin:auto;
  padding-inline:24px}
.landing-preview {
  padding:12px 48px 0}
.channel-strip {
  text-align:center;
  padding:46px 24px 0;
  color:var(--gray-text)}
.channel-strip p {
  font-size:calc(10px * var(--fe-text-scale,1));
  letter-spacing:.12em;
  margin-bottom:18px}
.channels {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:36px;
  font-weight:650;
  font-size:calc(15px * var(--fe-text-scale,1));
  color:var(--black)}
.channels span {
  display:flex;
  align-items:center;
  gap:8px}
.channel-letter {
  color:var(--primary);
  font-weight:800}

.section {
  padding-block:98px}
.eyebrow {
  color:var(--primary);
  font-size:calc(12px * var(--fe-text-scale,1));
  font-weight:700;
  letter-spacing:.08em;
  margin-bottom:18px}
.section h2,.section-title {
  font-size:calc(clamp(28px,3.3vw,40px) * var(--fe-text-scale,1));
  line-height:1.3;
  font-weight:700;
  letter-spacing:-1.2px;
  word-break:keep-all}
.section-intro {
  max-width:570px;
  margin-top:15px;
  color:var(--gray-text);
  font-size:calc(16px * var(--fe-text-scale,1))}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:22px;
  margin-bottom:32px}
.text-link {
  font-size:calc(13px * var(--fe-text-scale,1));
  color:var(--primary);
  font-weight:650;
  white-space:nowrap}
.steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  margin-top:40px}
.step {
  padding:28px;
  border-top:1px solid var(--gray-border)}
.step .number {
  display:block;
  color:var(--primary);
  font-size:calc(12px * var(--fe-text-scale,1));
  font-weight:700;
  margin-bottom:20px}
.step h3 {
  font-size:calc(21px * var(--fe-text-scale,1));
  line-height:1.5;
  letter-spacing:-.5px;
  margin-bottom:12px}
.step p {
  color:var(--gray-text);
  font-size:calc(14px * var(--fe-text-scale,1));
  line-height:1.8}
.soft-section {
  background:var(--gray-bg)}
.cta-section {
  text-align:center;
  padding:68px 24px 78px}
.cta-section p {
  color:var(--gray-text);
  margin:18px 0 24px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:48px;
  border:1px solid var(--gray-border);
  border-radius:999px;
  padding:12px 24px;
  font-size:calc(14px * var(--fe-text-scale,1));
  font-weight:650;
  background:var(--white)}
.button.primary {
  background:var(--primary);
  border-color:var(--primary);
  color:var(--color-on-primary)}
.button:hover {
  border-color:var(--primary)}

.form-panel {
  max-width:840px;
  margin:auto;
  padding:60px 24px 96px}
.diagnosis-wrap {
  border-top:1px solid var(--gray-border);
  background:var(--gray-bg);
  scroll-margin-top:90px}
.form-header {
  margin-bottom:32px}
.section-subtitle {
  color:var(--gray-text);
  margin:16px 0 20px;
  max-width:670px;
  line-height:1.8}
.secure-badge {
  font-size:calc(12px * var(--fe-text-scale,1));
  color:var(--gray-text);
  display:flex;
  align-items:center;
  gap:8px}
.secure-badge i {
  color:var(--primary)}
.solid-form {
  background:var(--white);
  padding:32px;
  border:1px solid var(--gray-border);
  border-radius:20px}
.input-block {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:32px}
.input-group {
  min-width:0}
.input-group:has(textarea) {
  grid-column:1/-1}
.input-group label {
  display:block;
  font-size:calc(13px * var(--fe-text-scale,1));
  font-weight:650;
  margin-bottom:9px}
.required {
  color:var(--primary)}
.input-wrapper {
  position:relative;
  display:flex;
  align-items:center}
.input-icon {
  position:absolute;
  left:16px;
  color:var(--gray-text);
  font-size:calc(14px * var(--fe-text-scale,1))}
.input-wrapper input,.input-wrapper textarea {
  width:100%;
  min-width:0;
  border:1px solid var(--gray-border);
  border-radius:10px;
  background:var(--white);
  color:var(--black);
  padding:14px 16px 14px 40px;
  font-size:calc(14px * var(--fe-text-scale,1))}
.input-wrapper textarea {
  padding:14px 16px;
  resize:vertical;
  min-height:140px}
.input-wrapper input:focus,.input-wrapper textarea:focus {
  border-color:var(--primary);
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}
.selection-block {
  margin-bottom:30px}
.block-title-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px}
.block-title {
  font-size:calc(16px * var(--fe-text-scale,1));
  font-weight:650}
.block-badge {
  font-size:calc(10px * var(--fe-text-scale,1));
  background:var(--gray-bg);
  color:var(--gray-text);
  padding:4px 9px;
  border-radius:6px}
.block-hint {
  color:var(--gray-text);
  font-size:calc(12px * var(--fe-text-scale,1));
  margin-bottom:16px}
.tile-grid-2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px}
.tile-grid-3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px}
.solid-tile {
  display:block;
  position:relative;
  cursor:pointer}
.solid-tile input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px}
.tile-content {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:80px;
  border:1px solid var(--gray-border);
  border-radius:12px;
  background:var(--white);
  padding:18px 12px;
  transition:border-color .2s,background .2s}
.tile-content i {
  font-size:calc(20px * var(--fe-text-scale,1));
  color:var(--gray-text)}
.tile-text {
  font-size:calc(13px * var(--fe-text-scale,1));
  font-weight:600;
  text-align:center}
.solid-tile.small .tile-content {
  flex-direction:column;
  gap:10px;
  min-height:96px}
.solid-tile input:checked+.tile-content {
  border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 7%,var(--white));
  color:var(--primary)}
.solid-tile input:checked+.tile-content i {
  color:var(--primary)}
.solid-tile input:focus-visible+.tile-content {
  outline:2px solid var(--primary);
  outline-offset:-5px}
.solid-tile:hover .tile-content {
  border-color:var(--primary)}
.cta-wrapper {
  margin-top:28px}
.btn-solid-submit {
  width:100%;
  border:0;
  border-radius:10px;
  min-height:56px;
  padding:16px 22px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  background:var(--primary);
  color:var(--color-on-primary);
  font-size:calc(16px * var(--fe-text-scale,1));
  font-weight:650}
.btn-solid-submit:hover {
  background:var(--primary-dark)}
.diagnosis-note {
  color:var(--gray-text);
  font-size:calc(12px * var(--fe-text-scale,1));
  line-height:1.8;
  margin-top:20px}

.result-section {
  background:var(--white);
  border:1px solid var(--gray-border);
  border-radius:20px;
  padding:34px}
.result-header {
  margin-bottom:28px}
.status-badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--primary);
  font-size:calc(12px * var(--fe-text-scale,1));
  font-weight:650;
  margin-bottom:14px}
.result-title {
  font-size:calc(32px * var(--fe-text-scale,1));
  line-height:1.3;
  letter-spacing:-1px}
.solid-score-box {
  padding:28px;
  border-radius:14px;
  background:var(--gray-bg);
  text-align:center;
  margin-bottom:28px}
.score-display {
  display:flex;
  flex-direction:column;
  align-items:center}
.score-value {
  font-size:calc(76px * var(--fe-text-scale,1));
  font-weight:750;
  line-height:1.3;
  letter-spacing:-3px;
  color:var(--primary)}
.score-label {
  font-size:calc(10px * var(--fe-text-scale,1));
  color:var(--gray-text);
  letter-spacing:.12em}
.details-block {
  margin-bottom:30px}
.mb-4 {
  margin-bottom:20px}
.solid-metric {
  margin-bottom:22px}
.metric-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px}
.metric-name {
  font-size:calc(13px * var(--fe-text-scale,1))}
.metric-name i {
  margin-right:6px;
  color:var(--primary)}
.metric-score {
  font-size:calc(15px * var(--fe-text-scale,1));
  font-weight:650}
.solid-bar-bg {
  height:8px;
  border-radius:6px;
  overflow:hidden;
  background:var(--gray-bg)}
.solid-bar-fill {
  height:100%;
  background:var(--primary);
  transition:width 1s}
.prescription-block {
  padding:22px;
  border:1px solid var(--gray-border);
  border-radius:12px;
  margin-bottom:28px}
.prescription-header {
  color:var(--primary);
  font-size:calc(14px * var(--fe-text-scale,1));
  font-weight:650;
  margin-bottom:15px}
.prescription-content {
  font-size:calc(14px * var(--fe-text-scale,1));
  line-height:1.9;
  color:var(--gray-text)}
.result-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap}
.btn-solid-secondary,.btn-solid-primary {
  flex:1;
  text-align:center;
  padding:14px 18px;
  font-size:calc(14px * var(--fe-text-scale,1));
  font-weight:650;
  border:1px solid var(--gray-border);
  border-radius:10px;
  background:var(--gray-bg);
  color:var(--black)}
.btn-solid-primary {
  background:var(--primary);
  color:var(--color-on-primary);
  border-color:var(--primary)}
.form-status-message {
  font-size:calc(13px * var(--fe-text-scale,1));
  padding:16px;
  border-radius:10px;
  background:var(--gray-bg);
  color:var(--black);
  margin:20px 0}
.form-status-message.error {
  color:var(--color-danger)}
.mobile-sticky-cta {
  display:none}

.page-intro {
  max-width:850px;
  padding:64px 24px 40px;
  margin:auto;
  text-align:center}
.page-intro h1 {
  font-size:calc(clamp(34px,4.5vw,52px) * var(--fe-text-scale,1));
  line-height:1.25;
  letter-spacing:-2px;
  white-space:pre-line}
.page-intro p:not(.eyebrow) {
  max-width:560px;
  margin:22px auto 0;
  color:var(--gray-text);
  font-size:calc(16px * var(--fe-text-scale,1))}
.content-section {
  padding-bottom:50px}
.content-section .section-title {
  font-size:calc(28px * var(--fe-text-scale,1))}
.feature-blocks {
  display:grid;
  gap:18px;
  margin-top:34px}
.solid-feature-block {
  display:flex;
  gap:22px;
  align-items:start;
  padding:30px;
  border:1px solid var(--gray-border);
  border-radius:16px}
.feature-icon {
  width:48px;
  height:48px;
  flex-shrink:0;
  background:var(--gray-bg);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  font-size:calc(20px * var(--fe-text-scale,1))}
.feature-text h4,.step-content h4 {
  font-size:calc(20px * var(--fe-text-scale,1));
  font-weight:650;
  margin-bottom:10px;
  line-height:1.5}
.feature-text p,.step-content p {
  color:var(--gray-text);
  font-size:calc(14px * var(--fe-text-scale,1));
  line-height:1.9}
.step-blocks {
  display:grid;
  gap:18px;
  margin-top:30px}
.solid-step-block {
  display:flex;
  align-items:start;
  gap:24px;
  padding:28px;
  border:1px solid var(--gray-border);
  border-radius:16px}
.step-number {
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  white-space:nowrap;
  border-radius:50%;
  background:color-mix(in srgb,var(--primary) 5%,transparent);
  color:var(--primary);
  font-size:calc(18px * var(--fe-text-scale,1));
  line-height:1.5;
  font-weight:650}
.step-content {
  min-width:0}
.faq-section {
  padding-top:40px}
.faq-section h2 {
  font-size:calc(28px * var(--fe-text-scale,1));
  margin-bottom:16px}
.contact-layout {
  background:var(--gray-bg)}
.contact-layout .form-panel {
  padding-top:24px}

@media(max-width:700px) {
  html {
  scroll-padding-top:80px}
.container {
  padding-inline:20px}
.landing-preview {
  padding:10px 20px 0}
.channel-strip {
  padding-top:32px}
.channels {
  gap:16px 24px;
  font-size:calc(13px * var(--fe-text-scale,1))}
.section {
  padding-block:64px}
.steps {
  grid-template-columns:1fr;
  gap:12px;
  margin-top:25px}
.step {
  padding:22px 0}
.step .number {
  margin-bottom:10px}
.section-head {
  align-items:start;
  flex-direction:column}
.section-intro {
  font-size:calc(14px * var(--fe-text-scale,1))}
.form-panel {
  padding:40px 20px 70px}
.solid-form {
  padding:22px 18px}
.input-block {
  grid-template-columns:1fr}
.tile-grid-3 {
  grid-template-columns:1fr 1fr}
.tile-content {
  gap:8px;
  padding:14px 10px}
.tile-text {
  font-size:calc(12px * var(--fe-text-scale,1))}
.section-title {
  font-size:calc(28px * var(--fe-text-scale,1))}
.result-section {
  padding:24px 18px}
.result-title {
  font-size:calc(28px * var(--fe-text-scale,1))}
.result-actions {
  flex-direction:column}
.page-intro {
  padding:42px 20px 30px}
.page-intro h1 {
  font-size:calc(35px * var(--fe-text-scale,1));
  letter-spacing:-1.2px}
.page-intro p:not(.eyebrow) {
  font-size:calc(14px * var(--fe-text-scale,1))}
.solid-feature-block {
  padding:22px;
  gap:16px}
.feature-text h4,.step-content h4 {
  font-size:calc(18px * var(--fe-text-scale,1))}
.solid-step-block {
  padding:22px;
  gap:18px}
.mobile-sticky-cta:not(.hidden) {
  display:block;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:var(--white);
  border-top:1px solid var(--gray-border);
  padding:12px 20px;
  z-index:10}
.mobile-sticky-cta button {
  font-size:calc(14px * var(--fe-text-scale,1));
  min-height:46px;
  padding:10px}
.cta-section {
  padding:56px 20px}
.diagnosis-wrap {
  scroll-margin-top:80px}
}

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

/* The host owns navigation; standalone and hideGlobalNav pages keep theirs. */
html[data-host-navigation="true"] fe-site-header { display:none; }
html[data-host-navigation="true"] { scroll-padding-top:24px; }
html[data-host-navigation="true"] .diagnosis-wrap { scroll-margin-top:24px; }

/* The same contact page supplies both the standalone form and modal content. */
html[data-contact-view="dialog"] fe-site-header,
html[data-contact-view="dialog"] fe-site-footer,
html[data-contact-view="dialog"] .page-intro { display:none; }
html[data-contact-view="dialog"], html[data-contact-view="dialog"] body,
html[data-contact-view="dialog"] .contact-layout { background:var(--color-bg); margin:0; padding:0; }
html[data-contact-view="dialog"] .form-panel { max-width:none; margin:0; padding:20px 32px 24px; border:0; border-radius:0; box-shadow:none; }
html[data-contact-view="dialog"] .content-section { margin:0; padding:0; }
html[data-contact-view="dialog"] .form-header { margin-bottom:24px; }
html[data-contact-view="dialog"] .section-title { font-size:calc(20px * var(--fe-text-scale,1)); }
html[data-contact-view="dialog"] .section-subtitle { font-size:calc(13px * var(--fe-text-scale,1)); }
html[data-contact-view="dialog"] .input-block { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
html[data-contact-view="dialog"] .input-group:last-child { grid-column:1 / -1; }
html[data-contact-view="dialog"] .input-wrapper input { min-height:44px; }
html[data-contact-view="dialog"] .input-wrapper textarea { min-height:90px; }
html[data-contact-view="dialog"] .cta-wrapper { margin-top:20px; }
html[data-contact-view="dialog"] .solid-form { padding:0; border:0; background:transparent; }
@media(max-width:600px){html[data-contact-view="dialog"] .form-panel{padding:16px 24px 24px;}}
@media(max-width:460px){html[data-contact-view="dialog"] .input-block{grid-template-columns:1fr;}}

.service-visual { margin:0 auto 32px; }
.service-visual img { display:block; width:100%; height:360px; object-fit:cover; object-position:50% 55%; border-radius:20px; }
.service-visual { overflow:hidden; }
.service-visual img { animation:fe-image-breathe 22s ease-in-out infinite; animation-play-state:var(--fe-motion-play-state,running); }
.feature-icon, .step .number { animation:fe-soft-float 14s ease-in-out infinite; animation-play-state:var(--fe-motion-play-state,running); }
.solid-feature-block:nth-child(2) .feature-icon, .step:nth-child(2) .number { animation-delay:-5s; }
.solid-feature-block:nth-child(3) .feature-icon, .step:nth-child(3) .number { animation-delay:-9s; }
.contact-confirmation { padding:38px 12px; text-align:center; }
.contact-confirmation[hidden], #contact-form[hidden], .form-header[hidden] { display:none!important; }
.confirmation-symbol { display:grid; place-items:center; width:96px; height:96px; margin:0 auto 28px; border:1px solid var(--color-border); border-radius:28px; background:linear-gradient(135deg,var(--color-bg),var(--color-surface)); color:var(--color-primary); box-shadow:0 16px 40px #17213b0a; animation:fe-soft-float 12s ease-in-out infinite; animation-play-state:var(--fe-motion-play-state,running); }
.confirmation-symbol svg { width:54px; height:54px; }
.contact-confirmation h2 { font-size:calc(28px * var(--fe-text-scale,1)); line-height:1.35; letter-spacing:-.8px; margin:16px 0; overflow-wrap:anywhere; outline:none; }
.contact-confirmation p:not(.eyebrow) { max-width:400px; margin:20px auto 0; font-size:calc(15px * var(--fe-text-scale,1)); line-height:1.9; color:var(--color-text-muted); }
#contact-confirmation:not([hidden]) + #contact-status { text-align:center; font-size:calc(12px * var(--fe-text-scale,1)); }
@keyframes fe-soft-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)} }
@keyframes fe-image-breathe { 0%,100%{transform:scale(1)}50%{transform:scale(1.025)} }
@media(max-width:700px){.service-visual img{height:230px;border-radius:14px;}}

/* One-time section entrances and tactile interaction complement the ambient loops. */
.landing-preview, .section, .page-intro, .content-section, .faq-section {
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1);
}
.reveal-pending { opacity:0; transform:translateY(18px); }
.reveal-pending:focus-within { opacity:1; transform:none; }
.button, .btn-solid-submit, .btn-solid-primary, .btn-solid-secondary {
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.solid-feature-block, .solid-step-block { transition:border-color .25s ease, box-shadow .25s ease; }
@media (hover:hover) {
  .button:hover, .btn-solid-submit:hover, .btn-solid-primary:hover { transform:translateY(-2px); box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 15%,transparent); }
  .solid-feature-block:hover, .solid-step-block:hover { border-color:color-mix(in srgb,var(--primary) 35%,var(--gray-border)); box-shadow:0 8px 28px #17213b06; }
}
@media (prefers-reduced-motion:reduce) {
  .reveal-pending { opacity:1; transform:none; }
  .button:hover, .btn-solid-submit:hover, .btn-solid-primary:hover { transform:none; }
}

/* Compact spacing is a presentation choice, independent of the color theme. */
html[data-fe-spacing="compact"] .section{padding-block:48px}
html[data-fe-spacing="compact"] .page-intro{padding-block:40px}
html[data-fe-motion="off"] *,html[data-fe-motion="off"] *::before,html[data-fe-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
[data-fe-section][hidden]{display:none!important}

/* A large monochrome channel ribbon. Both copies have exactly the same width. */
/* Embedded routes have no new curtain. Keep the static channel list concealed
   until the hero, configured section order and marquee structure are ready. */
html:not([data-fe-page-ready=true]) .channel-strip{visibility:hidden}
.channel-strip{padding:60px 0 8px;overflow:hidden;overflow:clip;color:var(--color-text-muted)}
.channel-strip>p{font-size:calc(10px * var(--fe-text-scale,1));letter-spacing:.17em;padding-inline:24px;margin-bottom:26px}
.channels{display:block;overflow:hidden;overflow:clip;max-width:100%;border-block:1px solid var(--color-border);padding:30px 0;color:var(--color-text);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.channel-track{display:flex;width:max-content;max-width:none}
.channel-set{display:flex;align-items:center;gap:76px;padding-inline:38px;flex-shrink:0}
.channels .channel-item{display:flex;flex:none;align-items:center;gap:18px;font-size:calc(30px * var(--fe-text-scale,1));font-weight:550;letter-spacing:-.04em;line-height:1.3;white-space:nowrap}
.channels .channel-icon{display:grid;place-items:center;width:56px;height:56px;flex:none;border:1px solid var(--color-border);border-radius:16px;background:var(--color-bg)}
.channel-icon svg{width:33px;height:33px}
.channels[data-fe-travel=marquee] .channel-track{animation:fe-channel-travel 48s linear infinite;animation-play-state:var(--fe-motion-play-state,running)}
.channels[data-motion-visible=false] .channel-track{animation-play-state:paused}
@keyframes fe-channel-travel{to{transform:translateX(-50%)}}
@media(hover:hover){.channels:hover .channel-track{animation-play-state:paused}.channel-item:hover{color:var(--color-primary)}}
.channels:not([data-fe-travel=marquee]) .channel-track{width:100%}
.channels:not([data-fe-travel=marquee]) .channel-set{flex:1;justify-content:center;flex-wrap:wrap;gap:28px 40px}
.channels:not([data-fe-travel=marquee]) .channel-set[data-channel-copy]{display:none}
.channels[data-fe-effect=wave] .channel-icon{animation:fe-channel-wave 12s ease-in-out infinite;animation-delay:calc(var(--channel-index)*-2s);animation-play-state:var(--fe-motion-play-state,running)}
@keyframes fe-channel-wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:700px){.channel-strip{padding-top:42px}.channels{padding-block:26px}.channel-set{gap:42px;padding-inline:21px}.channels .channel-item{font-size:calc(24px * var(--fe-text-scale,1));gap:14px}.channels .channel-icon{width:48px;height:48px;border-radius:14px}.channel-icon svg{width:29px;height:29px}.channels[data-fe-travel=marquee] .channel-track{animation-duration:40s}.channels:not([data-fe-travel=marquee]) .channel-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;padding-inline:24px}.channels:not([data-fe-travel=marquee]) .channel-item{font-size:calc(14px * var(--fe-text-scale,1));gap:10px}.channels:not([data-fe-travel=marquee]) .channel-icon{width:36px;height:36px;border-radius:10px}}
@media(prefers-reduced-motion:reduce){
 .channels *, .channels *::after{animation:none!important;transition:none!important}
 .channels[data-fe-travel] .channel-track{width:100%;transform:none}
 .channels[data-fe-travel] .channel-set{flex:1;justify-content:center;flex-wrap:wrap;gap:28px 40px}
 .channels[data-fe-travel] .channel-set[data-channel-copy]{display:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:700px){.channels[data-fe-travel] .channel-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;padding-inline:24px}.channels[data-fe-travel] .channel-item{font-size:calc(14px * var(--fe-text-scale,1));gap:10px}.channels[data-fe-travel] .channel-icon{width:36px;height:36px;border-radius:10px}}

/* Permanent editorial structure complements the moving details. */
.soft-section{border-block:1px solid var(--color-border)}
.section-head{padding-bottom:26px;border-bottom:1px solid var(--color-border);margin-bottom:36px}
.step{padding-top:32px}.step h3{font-weight:600}.section h2{font-weight:650;letter-spacing:-.045em;text-wrap:balance}
.landing-preview{position:relative}.landing-preview:after{content:'';display:block;width:1px;height:42px;background:var(--color-border);margin:28px auto 0}
html[data-fe-section-scroll=snap]{scroll-snap-type:y proximity}
html[data-fe-section-scroll=snap] [data-fe-section]:not([hidden]){scroll-snap-align:start;scroll-snap-stop:normal}
/* A continuation hint, not a control. Never covers a focused field or catches taps. */
.fe-scroll-cue{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;padding:4px 10px;color:var(--color-text-muted);filter:drop-shadow(0 1px 3px var(--color-bg))}
.fe-scroll-cue[hidden],body:has(dialog[open]) .fe-scroll-cue{display:none}
.fe-scroll-label{display:none}
.fe-scroll-arrow{position:relative;display:block;width:1px;height:20px;background:linear-gradient(transparent,currentColor);animation:fe-scroll-hint 3.2s ease-in-out infinite;animation-play-state:var(--fe-motion-play-state,running)}
.fe-scroll-arrow:after{content:'';position:absolute;bottom:0;left:-3px;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}
@keyframes fe-scroll-hint{0%,100%{opacity:.35;transform:translateY(-3px)}50%{opacity:1;transform:translateY(3px)}}
body:has(#sloppy-preview-banner) .fe-scroll-cue{bottom:60px}
@media(max-width:700px){.fe-scroll-cue{padding:4px 10px;gap:8px;bottom:max(14px,env(safe-area-inset-bottom))}.fe-scroll-label{font-size:calc(7px * var(--fe-text-scale,1))}.fe-scroll-arrow{height:23px}body:has(.mobile-sticky-cta:not(.hidden)) .fe-scroll-cue{bottom:88px}}
@media(prefers-reduced-motion:reduce){.fe-scroll-arrow{animation:none}html[data-fe-section-scroll=snap]{scroll-snap-type:none}}

/* Named section tones follow sections when the dashboard reorders them. */
html[data-fe-brand=true] [data-fe-background=cream]{--fe-section-bg:var(--color-surface);background:var(--fe-section-bg)}
html[data-fe-brand=true] [data-fe-background=white]{--fe-section-bg:var(--color-bg);background:var(--fe-section-bg)}
html[data-fe-brand=true] .landing-preview{padding-block:32px}
html[data-fe-brand=true] .section{border-radius:24px}
html[data-fe-brand=true] .page-intro{background:var(--color-surface);padding:52px 24px;margin-bottom:32px}
html[data-fe-brand=true] .page-intro h1{font-weight:700}
html[data-fe-brand=true] .form-panel{border-color:var(--color-border);border-radius:24px;box-shadow:0 12px 40px #26221f05}
html[data-fe-brand=true] .diagnosis-wrap{padding-block:48px}
img[data-fe-brand-image=true]{object-fit:contain!important;padding:24px;background:var(--color-surface)}
html[data-fe-brand=true] .channel-icon{color:var(--color-text)}
@media(max-width:760px){html[data-fe-brand=true] .page-intro{padding:36px 24px}html[data-fe-brand=true] .section{border-radius:0}html[data-fe-brand=true] .landing-preview{padding:28px 20px}html[data-fe-brand=true] .diagnosis-wrap{padding-block:32px}}

/* Readability and touch controls: no zoom transform and no nested scroll area. */
input:not([type=checkbox]):not([type=radio]),textarea,select{min-height:48px;font-size:max(16px,1em)}
/* Selection changes paint only; keep the border box and content flow stable. */
.solid-tile input:checked + .tile-content{box-shadow:inset 0 0 0 1px var(--color-primary)}
@media(max-width:700px){
 html[data-fe-mobile-actions=true] body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
 html[data-fe-mobile-actions=true] .mobile-sticky-cta{display:none!important}
 html[data-fe-mobile-actions=true] .fe-scroll-cue{bottom:calc(90px + env(safe-area-inset-bottom))}
 html[data-fe-large-text=true] .tile-grid-3{grid-template-columns:1fr}
 html[data-fe-large-text=true] .channels:not([data-fe-travel=marquee]) .channel-item{white-space:normal}
}

html[data-fe-brand=true] .contact-confirmation .confirmation-symbol{display:none}html[data-fe-brand=false] fe-brand-figure{display:none}
.channels .channel-icon{color:var(--color-primary)}
@media(hover:hover){.channel-item:nth-child(1):hover .channel-icon,.channel-item:nth-child(2):hover .channel-icon{color:#03a951}.channel-item:nth-child(3):hover .channel-icon{color:#d83e79}.channel-item:nth-child(4):hover .channel-icon{color:#d83030}.channel-item:nth-child(5):hover .channel-icon{color:var(--color-text)}}

/* One semantic score palette across reports, preview and exports. */
#diagnosis-form-section[hidden]{display:none!important}
#total-score{color:var(--score-total,#2F56D6)}
[data-tone=good]{--score-tone:var(--score-good,#38845B)}
[data-tone=mid]{--score-tone:var(--score-mid,#9B7100)}
[data-tone=low]{--score-tone:var(--score-low,#C45E22)}
.metric-score[data-tone]{color:var(--score-tone)}
.solid-bar-fill[data-tone]{background:var(--score-tone);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.report-guides{margin:32px 0}.report-guides[hidden]{display:none}.report-guides h3{font-size:calc(20px * var(--fe-text-scale,1));margin-bottom:20px}
.report-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.report-guide-grid a{display:flex;flex-direction:column;gap:12px;border:1px solid var(--color-border);border-radius:16px;padding:24px;background:var(--color-bg);text-decoration:none;color:var(--color-text);overflow-wrap:anywhere}
.report-guide-grid span{color:var(--color-text-muted);font-size:calc(14px * var(--fe-text-scale,1));line-height:1.8}
.report-guide-grid small{margin-top:auto;color:var(--color-primary)}
@media(max-width:600px){.report-guide-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.solid-bar-fill[data-tone]{transition:none}}
.report-keywords{display:grid;grid-template-columns:1fr;gap:28px;margin:36px 0;padding:32px 0;border-block:1px solid var(--color-border)}.report-keywords.has-ideas{grid-template-columns:minmax(0,1.35fr) minmax(200px,1fr)}.report-keywords h3{font-size:calc(clamp(22px,2.5vw,28px) * var(--fe-text-scale,1));line-height:1.5;letter-spacing:-.03em;margin-bottom:16px}.report-keywords p{font-size:calc(17px * var(--fe-text-scale,1));color:var(--color-text-muted);line-height:1.85}.report-keywords .report-kicker{font-size:calc(14px * var(--fe-text-scale,1));color:var(--color-primary);font-weight:650;margin-bottom:12px}.report-keywords .keyword-examples{padding-left:28px;border-left:1px solid var(--color-border)}.report-keywords .keyword-examples>p{font-size:calc(14px * var(--fe-text-scale,1));margin-bottom:12px}.report-keywords ul{list-style:none;margin:0;padding:0}.report-keywords li{padding:14px 0;border-bottom:1px solid var(--color-border);font-size:calc(18px * var(--fe-text-scale,1));font-weight:600;line-height:1.7;overflow-wrap:anywhere}.report-keywords li:last-child{border:0}.report-keywords a{display:inline-flex;margin-top:24px;min-height:52px}.report-keywords .keyword-limit{grid-column:1/-1;font-size:calc(13px * var(--fe-text-scale,1));margin:0}@media(max-width:700px){.report-keywords,.report-keywords.has-ideas{grid-template-columns:1fr;gap:24px;padding-block:28px}.report-keywords .keyword-examples{padding:20px 0 0;border-left:0;border-top:1px solid var(--color-border)}.report-keywords a{width:100%}}
/* Focus scrolling inside the embedded form must finish before the next click.
   Decorative page scrolling and motion remain outside editable form controls. */
html[data-contact-view="dialog"] { scroll-behavior:auto; }
form .btn-solid-submit { transform:none; translate:none; rotate:none; }

html:has(form:focus-within) { scroll-behavior:auto; }
/* Embedded forms become editable only after their document and configuration
   are ready, including browsers that restore form state during initial load. */
html:not([data-fe-page-ready=true]) #contact-form,
html:not([data-fe-page-ready=true]) #diagnosis-form { visibility:hidden; }

/* The authored report owns the channel scene; saved visibility/order still wins. */
html[data-fe-scroll-story=true][data-fe-brand=true] .landing-preview:has(fe-score-preview[story]){padding:0;background:var(--fe-section-bg,var(--color-bg))}
html[data-fe-scroll-story=true][data-fe-brand=true] .landing-preview:has(fe-score-preview[story]):after{display:none}
html[data-fe-scroll-story=true][data-fe-brand=true] body:has(.landing-preview:not([hidden]) fe-score-preview[story])>.channel-strip{display:none}
html[data-fe-scroll-story=true]:has(fe-score-preview[story]){scroll-snap-type:none!important}

/* Shared public-page grid. Shadow components inherit the same measurements. */
:root{--fe-page-width:1160px;--fe-page-gutter:32px;--fe-page-top:64px;--fe-page-bottom:80px;--fe-section-space:64px;--fe-reading-width:820px;--fe-page-title:clamp(34px,4.5vw,52px)}
html[data-fe-brand] .page-intro{max-width:var(--fe-page-width);padding:var(--fe-page-top) var(--fe-page-gutter) 40px;margin:0 auto;text-align:left;background:transparent;border-bottom:1px solid var(--color-border)}
.page-intro .eyebrow,.fe-page-heading .eyebrow{font-size:calc(15px * var(--fe-text-scale,1));line-height:1.7;letter-spacing:.04em;margin:0 0 16px;color:var(--color-primary);font-weight:650}
.page-intro h1,.fe-page-heading h1{font-size:calc(var(--fe-page-title) * var(--fe-text-scale,1));font-weight:700;line-height:1.25;letter-spacing:-.045em;margin:0;max-width:1000px}
.page-intro p:not(.eyebrow),.fe-page-heading .section-intro{font-size:calc(18px * var(--fe-text-scale,1));line-height:1.85;max-width:740px;margin:20px 0 0;color:var(--color-text-muted)}
.page-intro p.contact-hours{font-size:calc(14px * var(--fe-text-scale,1));margin-top:14px}
html[data-fe-brand] body>.form-panel,html[data-fe-brand] .contact-layout>.form-panel{max-width:var(--fe-page-width);padding:40px var(--fe-page-gutter) var(--fe-page-bottom);box-shadow:none;border:0;border-radius:0}
body>.form-panel>.content-section{padding-bottom:0}.contact-layout{background:var(--color-bg)}.contact-layout>.form-panel{padding-top:40px}
.contact-layout .solid-form{max-width:var(--fe-reading-width)}
.service-visual.container{max-width:var(--fe-page-width);padding-inline:var(--fe-page-gutter);margin:40px auto 0}
html[data-fe-spacing] .fe-page.container{max-width:var(--fe-page-width);padding:var(--fe-page-top) var(--fe-page-gutter) var(--fe-page-bottom);border-radius:0}
.fe-page-heading.section-head{padding-bottom:40px;margin-bottom:40px;align-items:start}
.container{padding-inline:var(--fe-page-gutter)}
fe-page-cta{padding-block:var(--fe-section-space) 0}
.published-article{max-width:var(--fe-page-width);padding:var(--fe-page-top) var(--fe-page-gutter) var(--fe-page-bottom)}
.published-article>h1{font-size:calc(var(--fe-page-title) * var(--fe-text-scale,1))}.published-article>.editorial-body{max-width:var(--fe-reading-width)}
@media(max-width:760px){:root{--fe-page-gutter:20px;--fe-page-top:40px;--fe-page-bottom:56px;--fe-section-space:48px;--fe-page-title:clamp(30px,8vw,38px)}html[data-fe-brand] .page-intro{padding-bottom:32px}.fe-page-heading.section-head{padding-bottom:32px;margin-bottom:32px}.page-intro p:not(.eyebrow),.fe-page-heading .section-intro{font-size:calc(18px * var(--fe-text-scale,1))}body>.form-panel,.contact-layout>.form-panel{padding-top:32px}.service-visual.container{margin-top:32px}fe-page-cta{padding-top:56px}}

/* Native anchors/touch remain available; Lenis owns only desktop wheel easing. */
html[data-fe-smooth-scroll=true]{scroll-behavior:auto!important;scroll-snap-type:none!important}

/* Match anchor clearance to the enlarged sticky navigation. */
html{scroll-padding-top:116px}
@media(max-width:900px){html{scroll-padding-top:104px}}