/* Compact Soma-Q entry pages. Palette follows the Measurement Overview. */
:root {
  color-scheme: light;
  --entry-deep: #123d40;
  --entry-teal: #467b78;
  --entry-mist: #dce8e2;
  --entry-cream: #f5f0e4;
  --entry-paper: #fbf8ef;
  --entry-ink: #193c3d;
  --entry-soft: #55706b;
  --entry-line: #c8d6cd;
  --entry-ochre: #bd8755;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.entry-page {
  min-height: 100svh;
  margin: 0;
  padding: 16px;
  background: var(--entry-cream);
  color: var(--entry-ink);
  font-family: "DM Sans", "Avenir Next", Avenir, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
.entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 390px;
  min-height: min(780px, calc(100svh - 32px));
  margin: 0 auto;
  padding: 22px 24px 18px;
  background: var(--entry-paper);
}
.entry-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--entry-deep); }
.entry-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 45px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--entry-line);
}
.entry-header > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }
.entry-header img { display: block; width: 112px; max-width: 44vw; height: auto; }
.entry-home { display: inline-flex; align-items: center; min-height: 44px; color: var(--entry-deep); font-size: 13px; font-weight: 700; text-decoration: none; }
.entry-home:hover, .entry-download:hover { text-decoration: underline; text-underline-offset: 3px; }
.entry-eyebrow {
  margin: 26px 0 7px;
  color: var(--entry-teal);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.entry-card h1 {
  margin: 0;
  max-width: 12ch;
  color: var(--entry-deep);
  font: 400 clamp(32px, 9vw, 39px)/1.02 Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
}
.entry-intro { margin: 12px 0 19px; color: var(--entry-soft); font-size: 15px; line-height: 1.48; }
.ebook-form { display: grid; gap: 12px; }
.entry-field { display: grid; gap: 5px; }
.entry-field label { color: var(--entry-deep); font-size: 12px; font-weight: 700; }
.entry-field input {
  display: block;
  width: 100%;
  min-height: 48px;
  border: 1px solid #aebfb6;
  border-radius: 3px;
  padding: 10px 12px;
  background: #fffdf7;
  color: var(--entry-ink);
  font: 16px/1.3 "DM Sans", "Avenir Next", Avenir, sans-serif;
}
.entry-field input:focus { outline: 3px solid rgba(70, 123, 120, .32); outline-offset: 2px; border-color: var(--entry-teal); }
.entry-button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  margin-top: 2px;
  border: 1px solid #9bc4bd;
  border-radius: 3px;
  padding: 10px 18px;
  background: #9bc4bd;
  color: #103c41;
  font: 700 15px/1.2 "DM Sans", "Avenir Next", Avenir, sans-serif;
  cursor: pointer;
  transition: background-color .16s ease;
}
.entry-button:hover { background: #c5dfd9; }
.entry-consent { display: flex; align-items: flex-start; gap: 9px; color: var(--entry-soft); font-size: 12px; line-height: 1.4; }
.entry-consent input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--entry-teal); }
.entry-privacy { margin: 16px 0 0; color: var(--entry-soft); font-size: 12px; line-height: 1.5; }
.entry-privacy a, .entry-download { color: var(--entry-deep); text-decoration-color: var(--entry-teal); text-underline-offset: 2px; }
.entry-download { display: inline-flex; align-items: center; min-height: 44px; margin-top: 5px; font-size: 12px; font-weight: 700; }
.entry-status { margin: 0; color: var(--entry-deep); font-size: 13px; line-height: 1.45; }
.entry-status:empty { display: none; }
.entry-page a:focus-visible, .entry-page button:focus-visible, .entry-page input:focus-visible { outline: 3px solid var(--entry-teal); outline-offset: 3px; }

/* Burnout Signal Check: scoped so shared public pages remain unchanged.
   Main markup should put .mobile-assessment on body and the compact .entry-header
   inside .entry-page, before .assess-wrap. */
body.mobile-assessment {
  min-height: 100svh;
  margin: 0;
  padding: 0;
  display: block;
  overflow-wrap: anywhere;
  background: var(--entry-cream);
  color: var(--entry-ink);
  font-family: "DM Sans", "Avenir Next", Avenir, sans-serif;
}
body.mobile-assessment .entry-page {
  min-height: 100svh;
  padding: 0 16px 18px;
  background: var(--entry-cream);
}
body.mobile-assessment .entry-header {
  max-width: 620px;
  min-height: 58px;
  margin: 0 auto;
  padding: 0 2px;
}
body.mobile-assessment .entry-header img { width: 112px; }
body.mobile-assessment h1.entry-context {
  max-width: 620px;
  margin: 10px auto 0;
  padding: 0 20px;
  color: var(--entry-deep);
  font: 400 14px/1.3 "DM Sans", "Avenir Next", Avenir, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.mobile-assessment .entry-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
  padding: 10px 2px 0;
  border-top: 1px solid var(--entry-line);
  color: var(--entry-soft);
  font-size: 10px;
  line-height: 1.4;
}
body.mobile-assessment .entry-footer a { min-height: 44px; display: inline-flex; align-items: center; color: var(--entry-deep); text-decoration-color: var(--entry-teal); text-underline-offset: 2px; }
body.mobile-assessment .assess-wrap {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 13px 20px 20px;
  background: var(--entry-paper);
  color: var(--entry-ink);
}
body.mobile-assessment .axis {
  justify-content: center;
  margin: 0 auto 15px;
  max-width: 300px;
}
body.mobile-assessment .axis-node {
  width: 11px;
  height: 11px;
  border: 2px solid #9eb8ae;
  background: transparent;
}
body.mobile-assessment .axis-node.done { border-color: var(--entry-teal); background: var(--entry-teal); }
body.mobile-assessment .axis-node.current { border-color: var(--entry-deep); background: var(--entry-mist); }
body.mobile-assessment .axis-line { width: min(11vw, 42px); height: 2px; background: var(--entry-line); }
body.mobile-assessment .axis-line.done { background: var(--entry-teal); }
body.mobile-assessment .screen { display: none; animation: entry-screen-in .2s ease both; }
body.mobile-assessment .screen.active { display: block; }
@keyframes entry-screen-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
body.mobile-assessment .eyebrow {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 7px;
  color: var(--entry-teal);
  font-size: 10px;
  line-height: 1.35;
  font-weight: 750;
  letter-spacing: .13em;
}
body.mobile-assessment .eyebrow::before {
  content: "";
  flex: none;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--entry-ochre);
}
body.mobile-assessment #screen-intro .eyebrow { margin-bottom: 8px; font-size: 10px; letter-spacing: .13em; }
body.mobile-assessment .eyebrow .gap-name { color: var(--entry-teal); }
body.mobile-assessment h1, body.mobile-assessment h2 {
  color: var(--entry-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.07;
}
body.mobile-assessment h1 { margin: 0 0 9px; font-size: clamp(27px, 7vw, 35px); }
body.mobile-assessment h2 { margin: 0 0 8px; font-size: clamp(24px, 6.2vw, 30px); }
body.mobile-assessment h1 em { color: var(--entry-teal); }
body.mobile-assessment .lede { margin: 0 0 12px; color: var(--entry-soft); font-size: 14px; line-height: 1.48; }
body.mobile-assessment .hint { margin: 0 0 12px; color: var(--entry-soft); font-size: 13px; line-height: 1.4; }
body.mobile-assessment .triad-visual { margin: 5px auto 8px; text-align: center; }
body.mobile-assessment .triad-visual svg { width: min(35vw, 145px); max-width: 145px; height: auto; }
body.mobile-assessment .orb1, body.mobile-assessment .orb2, body.mobile-assessment .orb3 { animation: none; }
body.mobile-assessment .opts { display: grid; gap: 7px; }
body.mobile-assessment .opt, body.mobile-assessment .chip {
  width: 100%;
  min-height: 48px;
  border: 1px solid #a8beb4;
  border-radius: 3px;
  padding: 10px 13px;
  background: #f4f5ed;
  color: var(--entry-deep);
  font: 500 14px/1.35 "DM Sans", "Avenir Next", Avenir, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
body.mobile-assessment .opt:hover, body.mobile-assessment .chip:hover,
body.mobile-assessment .opt:focus-visible, body.mobile-assessment .chip:focus-visible { border-color: var(--entry-teal); background: #e9f0e9; }
body.mobile-assessment .opt.picked, body.mobile-assessment .chip.on { border-color: var(--entry-teal); background: var(--entry-mist); }
body.mobile-assessment .chips { display: grid; gap: 7px; margin: 0 0 12px; }
body.mobile-assessment .chip { display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
body.mobile-assessment .chip .box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid #91aaa0;
  border-radius: 2px;
  color: transparent;
  font-size: 12px;
}
body.mobile-assessment .chip.on .box { border-color: var(--entry-teal); background: var(--entry-teal); color: var(--entry-paper); }
body.mobile-assessment .btn-row { margin-top: 8px; }
body.mobile-assessment .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  border: 1px solid #9bc4bd;
  border-radius: 3px;
  padding: 10px 22px;
  background: #9bc4bd;
  color: var(--entry-deep);
  font: 700 14px/1.2 "DM Sans", "Avenir Next", Avenir, sans-serif;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
body.mobile-assessment .btn:hover { background: #c5dfd9; }
body.mobile-assessment .btn:disabled { opacity: .5; cursor: not-allowed; }
body.mobile-assessment .back-link {
  min-height: 44px;
  margin: 5px 0 0 -4px;
  padding: 7px 4px;
  border: 0;
  background: transparent;
  color: var(--entry-soft);
  font: 600 12px "DM Sans", sans-serif;
  cursor: pointer;
}
body.mobile-assessment .field { margin: 0 0 10px; }
body.mobile-assessment .field label {
  display: block;
  margin-bottom: 4px;
  color: var(--entry-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.mobile-assessment .field input {
  width: 100%;
  min-height: 48px;
  border: 1px solid #a8beb4;
  border-radius: 3px;
  padding: 9px 12px;
  background: #fffdf7;
  color: var(--entry-ink);
  font: 16px/1.3 "DM Sans", "Avenir Next", Avenir, sans-serif;
}
body.mobile-assessment .field input:focus { outline: 3px solid rgba(70, 123, 120, .3); outline-offset: 2px; border-color: var(--entry-teal); }
body.mobile-assessment .field-error { display: none; margin: 4px 0 0; color: #8b3e31; font-size: 12px; font-weight: 650; }
body.mobile-assessment .field.invalid input { border-color: #9a5447; }
body.mobile-assessment .field.invalid .field-error { display: block; }
body.mobile-assessment .privacy-note { margin: 10px 0 0; color: var(--entry-soft); font-size: 11px; line-height: 1.45; }
body.mobile-assessment .privacy-note a { color: var(--entry-deep); text-decoration-color: var(--entry-teal); text-underline-offset: 2px; }
body.mobile-assessment .entry-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 8px 0;
  color: var(--entry-soft);
  font-size: 12px;
  line-height: 1.45;
}
body.mobile-assessment .entry-consent input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--entry-teal); }
body.mobile-assessment .entry-consent a { color: var(--entry-deep); text-decoration-color: var(--entry-teal); text-underline-offset: 2px; }
body.mobile-assessment .tier-badge {
  display: inline-block;
  margin: 0 0 10px;
  border-radius: 2px;
  padding: 6px 10px;
  background: var(--entry-mist);
  color: var(--entry-deep);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.mobile-assessment .ecj {
  margin: 13px 0;
  border: 1px solid var(--entry-line);
  border-left: 3px solid var(--entry-teal);
  border-radius: 3px;
  background: #f2f2e9;
}
body.mobile-assessment .ecj-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 12px; }
body.mobile-assessment .ecj-row + .ecj-row { border-top: 1px solid var(--entry-line); }
body.mobile-assessment .ecj-label { color: var(--entry-teal); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
body.mobile-assessment .ecj-state { color: var(--entry-deep); font: 400 17px/1.2 Georgia, serif; text-align: right; }
body.mobile-assessment .result-body { margin: 0 0 10px; color: var(--entry-soft); font-size: 14px; line-height: 1.52; }
body.mobile-assessment .inbox-note {
  margin: 14px 0;
  border-left: 3px solid var(--entry-ochre);
  padding: 11px 12px;
  background: #f1eee2;
  color: var(--entry-soft);
  font-size: 12px;
  line-height: 1.5;
}
body.mobile-assessment .inbox-note strong { color: var(--entry-deep); }
body.mobile-assessment .cta-sub { margin: 8px 0 0; color: var(--entry-soft); font-size: 12px; line-height: 1.45; }
body.mobile-assessment :focus-visible { outline: 3px solid var(--entry-teal); outline-offset: 3px; }
body.mobile-assessment #submit-error { display: block; margin: 9px 0; }
@media (max-width: 380px) {
  .entry-page { padding-right: 12px; padding-left: 12px; }
  .entry-card { padding-right: 20px; padding-left: 20px; }
  body.mobile-assessment .entry-page { padding-right: 10px; padding-left: 10px; }
  body.mobile-assessment .assess-wrap { padding-right: 14px; padding-left: 14px; }
  body.mobile-assessment .opt, body.mobile-assessment .chip { min-height: 46px; padding: 8px 10px; font-size: 13px; }
  body.mobile-assessment .triad-visual svg { width: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .entry-button { transition: none; }
  body.mobile-assessment .screen { animation: none; }
  body.mobile-assessment .axis-node, body.mobile-assessment .axis-line, body.mobile-assessment .opt, body.mobile-assessment .chip { transition: none; }
}
