/* The ELI Lens Assessment's page (public/assessment.js): the OLODESK quiz template's layout in the look of
   emotionallensinstitute.com. Its colours are the website's (navy #031a45 for headings and buttons, gold #c3954d for the
   small capitals and rules, the warm paper white of its sections), its headings Times-style and its text Arial-style, as
   the website sets them; Liberation Serif and Liberation Sans are those faces' open copies (the same letter widths), kept
   here so every phone shows the same letters.
   Phone: the assessment fills the screen. Tablet: a card on the paper background. Laptop (the owner's mockup,
   2026-10-27): a header across the page (the logo; the assessment's name, the number and the bar), the website's figure
   in a card on the left with a short gold rule and a line under it, a thin line, the assessment on the right. */

@font-face { font-family: 'Liberation Serif'; src: url('fonts/LiberationSerif-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Liberation Serif'; src: url('fonts/LiberationSerif-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Liberation Serif'; src: url('fonts/LiberationSerif-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Liberation Sans'; src: url('fonts/LiberationSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Liberation Sans'; src: url('fonts/LiberationSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --navy: #031a45;
  --navy-2: #0b2b66;
  --navy-tint: #f1f3f9;
  --gold: #c3954d;
  --gold-deep: #a87b35;
  --gold-soft: rgba(195, 149, 77, 0.14);
  --paper: #fbf8f4;
  --paper-2: #f4efe7;
  --white: #fff;
  --ink: #1b2233;
  --muted: #5d6476;
  --line: #e6dfd3;
  --line-strong: #d2bf9c;
  --danger: #b3261e;
  --radius: 14px;
  --pad: 22px;
  --serif: 'Liberation Serif', 'Times New Roman', Times, serif;
  --sans: 'Liberation Sans', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(195, 149, 77, 0.3); }
h1:focus { outline: none; }

/* ---------- layout ---------- */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background: var(--paper);
}
.brand-panel { display: none; }
.quiz-shell {
  width: 100%;
  max-width: 560px;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.quiz-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

@media (min-width: 640px) and (max-width: 959px) {
  .page { align-items: center; padding: 28px; background: var(--paper-2); }
  .quiz-shell {
    height: min(900px, calc(100dvh - 56px));
    border-radius: 24px;
    border: 1px solid var(--line);
    box-shadow: 0 30px 80px -40px rgba(3, 26, 69, 0.45);
  }
}

/* ---------- the bar at the top ---------- */
.topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  justify-items: center;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 8px;
  flex: none;
}
/* The logo in the middle column whether the back button shows or not; the right column stays empty to keep it centred
   (the question's own "Question 11 of 74" line says where you are). */
.topbar-logo { grid-column: 2; height: 34px; width: auto; }
.nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--navy);
  transition: border-color 0.2s, transform 0.15s;
}
.nav-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn:hover { border-color: var(--line-strong); }
.nav-btn:active { transform: scale(0.94); }
.nav-btn[hidden] { display: block !important; visibility: hidden; }

/* The bar on its own row under the back button and the logo; its name and number show on a laptop only. */
.progress-box { grid-column: 1 / -1; justify-self: stretch; margin: 4px calc(var(--pad) - 14px) -6px; }
.progress-meta { display: none; }
.progress {
  height: 4px;
  border-radius: 4px;
  background: rgba(3, 26, 69, 0.08);
  overflow: hidden;
  flex: none;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 60%, #ddb979);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.5s var(--ease);
}

/* ---------- screens ---------- */
.screens {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.screen-wrap { flex: 1 0 auto; display: flex; flex-direction: column; }
.screen-wrap.forward { animation: inForward 0.45s var(--ease) both; }
.screen-wrap.back { animation: inBack 0.45s var(--ease) both; }
.screen { flex: 1 0 auto; display: flex; flex-direction: column; padding: 10px var(--pad) 0; }
@keyframes inForward { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes inBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .screen-wrap.forward, .screen-wrap.back, .opt { animation: none !important; }
  .progress-fill { transition: none; }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 700;
  margin: 16px 0 10px;
}
.eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--gold); flex: none; }
h1.qtitle {
  font-family: var(--serif);
  font-size: clamp(23px, 6.1vw, 30px);
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--navy);
  font-weight: 700;
  text-wrap: balance;
}
p.qsub { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }
.req { color: var(--gold-deep); font-family: var(--sans); font-size: 0.7em; vertical-align: super; }
.q-head { margin-bottom: 14px; }

/* ---------- the choices ---------- */
.options { display: flex; flex-direction: column; gap: 9px; padding-bottom: 12px; }
.opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 10px 16px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 2px rgba(3, 26, 69, 0.04);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.12s;
  animation: rise 0.45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms + 80ms);
}
.opt:active { transform: scale(0.985); }
.opt:focus-visible, .btn:focus-visible, .nav-btn:focus-visible, .terms input:focus-visible + .tick {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
@media (hover: hover) { .opt:hover { border-color: var(--line-strong); } }
.opt .label { flex: 1; font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.opt .mark {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.opt .mark svg, .check svg, .tick svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.opt .dot { display: none; }
.opt[aria-checked='true'] {
  border-color: var(--navy);
  background: var(--navy-tint);
  box-shadow: inset 0 0 0 1px var(--navy), 0 6px 18px -10px rgba(3, 26, 69, 0.5);
}
.opt[aria-checked='true'] .mark { background: var(--navy); border-color: var(--navy); color: var(--white); }
/* The five steps from Never to Always, filled up to the answer. */
.scale { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; width: 38px; flex: none; }
.scale i { display: block; width: 5px; border-radius: 2px; background: rgba(3, 26, 69, 0.1); }
.scale i:nth-child(1) { height: 30%; }
.scale i:nth-child(2) { height: 47%; }
.scale i:nth-child(3) { height: 64%; }
.scale i:nth-child(4) { height: 82%; }
.scale i:nth-child(5) { height: 100%; }
.scale i.on { background: var(--gold); }
.opt[aria-checked='true'] .scale i.on { background: var(--navy); }
.other-box:focus { outline: none; box-shadow: 0 0 0 3px rgba(3, 26, 69, 0.12); }
.other-box {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 16px;
}
.options.has-error .opt { border-color: rgba(179, 38, 30, 0.45); }

/* ---------- boxes ---------- */
.fields { display: flex; flex-direction: column; gap: 18px; padding-bottom: 12px; }
.field label { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.field input[type='text'], .field input[type='email'] {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(3, 26, 69, 0.1); }
.field input[aria-invalid='true'] { border-color: var(--danger); }
.hint { margin: 6px 2px 0; font-size: 13px; color: var(--muted); }
.err, .page-err { margin: 6px 2px 0; font-size: 13.5px; font-weight: 700; color: var(--danger); }
.err:empty, .page-err:empty { display: none; }
.page-err { margin: 0 0 8px; }
.terms { display: flex !important; gap: 12px; align-items: flex-start; font-weight: 400 !important; color: var(--ink) !important; font-size: 14.5px !important; line-height: 1.5; cursor: pointer; }
.terms input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.terms .tick {
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 1px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--white);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background 0.2s, border-color 0.2s;
}
.terms input:checked + .tick { background: var(--navy); border-color: var(--navy); color: var(--white); }
.terms a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; }
.field-terms.has-error .tick { border-color: var(--danger); }

/* ---------- buttons ---------- */
.footer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(rgba(251, 248, 244, 0), var(--paper) 28%);
  z-index: 2;
}
.btn {
  width: 100%;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 0 22px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s, box-shadow 0.2s;
}
.btn .arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:active { transform: scale(0.985); }
.btn:disabled { opacity: 0.7; cursor: wait; }
.btn-primary { background: var(--navy); color: var(--white); box-shadow: 0 10px 24px -14px rgba(3, 26, 69, 0.7), inset 0 -2px 0 var(--gold); }
@media (hover: hover) { .btn-primary:hover { background: var(--navy-2); } .btn-quiet:hover { border-color: var(--gold); } }
.btn-quiet { background: transparent; color: var(--navy); border-color: var(--line-strong); min-height: 48px; }
.question .footer:empty { display: none; }

/* ---------- five statements to a screen (the client, 2026-10-26) ---------- */
/* Each statement over its five answers in one row, Never to Always, the steps above each word. */
.is-group h1.eyebrow { font-family: var(--sans); margin-bottom: 4px; }
.items { display: flex; flex-direction: column; padding-bottom: 8px; }
.item { padding: 18px 0 16px; border-bottom: 1px solid var(--line); scroll-margin-top: 10px; }
.item:last-child { border-bottom: 0; }
.item-text {
  display: flex;
  gap: 10px;
  font-family: var(--serif);
  font-size: clamp(19px, 5.2vw, 22px);
  line-height: 1.28;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
}
.item-num { flex: none; min-width: 1.4em; font-family: var(--sans); font-size: 13px; color: var(--gold-deep); padding-top: 5px; }
.options.row { flex-direction: row; gap: 3px; padding: 0; }
.options.row .opt {
  flex: 1 1 0;
  min-width: 0;
  min-height: 64px;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 9px 0 8px;
  text-align: center;
  border-radius: 10px;
  animation: none;
}
/* "Sometimes" sets the size: the word fits its button from 360 pixels wide, as wide as most phones or more. */
.options.row .opt .label { flex: none; font-size: 11px; letter-spacing: -0.01em; line-height: 1.1; white-space: nowrap; }
.options.row .scale { width: auto; height: 16px; gap: 2px; }
.options.row .scale i { width: 4px; }
.item .err:not(:empty) { margin-top: 8px; }
@media (min-width: 400px) { .options.row { gap: 4px; } .options.row .opt .label { font-size: 11.5px; } }
@media (min-width: 440px) { .options.row { gap: 6px; } .options.row .opt .label { font-size: 12.5px; } }
@media (min-width: 480px) { .options.row { gap: 7px; } .options.row .opt .label { font-size: 13px; letter-spacing: 0; } }
/* Narrower than that, the answers one under another, as on a screen of one, a little shorter. */
@media (max-width: 359px) {
  .options.row { flex-direction: column; gap: 6px; }
  .options.row .opt { flex-direction: row; justify-content: flex-start; min-height: 46px; gap: 12px; padding: 8px 14px; text-align: left; }
  .options.row .opt .label { font-size: 15px; }
  .options.row .scale { width: 30px; }
}
@media (min-width: 960px) {
  .is-group .q-head { margin-top: 3vh; }
  .item-text { font-size: 23px; }
  .options.row .opt { min-height: 70px; }
  .options.row .opt .label { font-size: 14px; }
}

/* ---------- the cover ---------- */
.cover { padding: 0; }
.cover-hero {
  position: relative;
  height: 34vh;
  min-height: 210px;
  max-height: 330px;
  overflow: hidden;
  background: #f6f3ee;
}
.cover-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 32%; display: block; }
.cover-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(rgba(251, 248, 244, 0), var(--paper) 92%); }
.cover-body { padding: 0 var(--pad); text-align: left; animation: rise 0.7s var(--ease) both; }
/* The cover logo centred, below the picture (on a phone) or at the top of the column (on a laptop). */
.cover-logo { display: block; width: 150px; height: auto; margin: 18px auto 18px; }
/* The logo, a short gold rule, the title on two lines and the line under it, all centred (the client's reference,
   2026-10-26); the paragraphs and the list below stay left-aligned to read. */
.cover-rule { display: block; width: 64px; height: 2px; margin: 0 auto 22px; background: var(--gold); }
.cover-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 8.6vw, 46px);
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 16px;
  text-align: center;
}
.cover-title .line { display: block; }
.cover-title .accent { color: var(--gold); }
.cover-lead { font-size: 18px; line-height: 1.55; color: #3a4153; margin: 0 auto 20px; max-width: 30em; font-weight: 400; text-align: center; text-wrap: balance; }
.cover-copy p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 12px; }
.cover-copy strong { color: var(--ink); }
.checks { list-style: none; margin: 20px 0; padding: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.checks li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.checks li + li { border-top: 1px dashed var(--line); }
.check { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--gold); margin-top: -1px; }
.closing { margin: 22px 0 8px; padding: 0; text-align: center; }
.closing p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; color: var(--navy); }
.cover .footer { padding-left: var(--pad); padding-right: var(--pad); }
/* A phone's cover has no header: the picture runs to the top. */
@media (max-width: 959.98px) { .page[data-screen="cover"] .topbar { display: none; } }

/* ---------- the result ---------- */
.result { padding-bottom: 24px; }
.result-card {
  margin-top: 12px;
  padding: 28px 22px 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 60px -40px rgba(3, 26, 69, 0.45);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
  animation: rise 0.6s var(--ease) both;
}
/* The result, laid out in one style by the server (server/results.js): title, introduction, the place ("Your Primary
   Lens"), the lens's name and picture, each part's heading and its text or list, the Core Reminder set apart. */
/* The title, the introduction, each place and each lens's name centred, the title as a small gold line ("Your Lens
   Assessment") over a large "Results" and a short gold rule (the client's reference, 2026-10-26); the parts' text stays
   left-aligned to read. */
.eli-result .r-title { margin: 0 0 18px; text-align: center; font-family: var(--serif); font-weight: 700; color: var(--navy); }
.eli-result .r-kicker { display: block; margin: 0 0 10px; font-family: var(--sans); font-size: 13px; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.eli-result .r-main { display: block; font-size: clamp(40px, 11vw, 52px); line-height: 1.05; }
.eli-result .r-main::after { content: ''; display: block; width: 64px; height: 2px; margin: 18px auto 0; background: var(--gold); }
.eli-result p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--ink); }
.eli-result p strong { color: var(--navy); }
.eli-result .r-intro { color: var(--muted); text-align: center; text-wrap: pretty; }
.eli-result .r-role {
  margin: 28px 0 8px;
  text-align: center;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.eli-result .r-intro + .r-lens { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.eli-result .r-lens { margin: 4px 0 18px; text-align: center; font-family: var(--serif); font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: 0.01em; color: var(--navy); }
.eli-result .r-list { margin: 0 0 12px; padding: 0; list-style: none; }
.eli-result .r-list li { position: relative; margin: 0 0 6px; padding-left: 18px; font-size: 16px; line-height: 1.55; color: var(--ink); }
.eli-result .r-list li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.eli-result .r-picture { margin: 0 0 18px; }
.eli-result .r-picture img { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; border-radius: 12px; }
/* The parts' headings in capitals: the result pages write them in sentence case for some lenses and title case for
   others, and capitals show them all alike without changing a word. */
.eli-result .r-label { margin: 24px 0 6px; font-family: var(--sans); font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.eli-result .r-picture + .r-label { margin-top: 4px; }
.eli-result .r-core { margin: 4px 0 8px; padding: 16px 18px 4px; border-left: 3px solid var(--gold); background: var(--paper); border-radius: 0 12px 12px 0; }
.eli-result .r-core p { font-family: var(--serif); font-size: 17.5px; line-height: 1.55; color: var(--navy); }
/* Tied lenses (server/results.js): one closed box each under the shared heading, its name and a button. */
.eli-result details.eli-tied { border: 1px solid var(--line); border-radius: 14px; margin: 12px 0; background: var(--white); overflow: hidden; }
.eli-result details.eli-tied > summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}
.eli-result details.eli-tied > summary::-webkit-details-marker { display: none; }
.eli-result details.eli-tied > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 14px; }
.eli-result details.eli-tied[open] > summary { background: var(--paper); }
.eli-result .eli-tied-name { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.eli-result .eli-tied-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--gold-deep); white-space: nowrap; letter-spacing: 0.02em; }
.eli-tied-toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
}
details.eli-tied[open] .eli-tied-toggle::after { transform: translateY(2px) rotate(-135deg); }
.eli-tied-hide, details.eli-tied[open] .eli-tied-show { display: none; }
details.eli-tied[open] .eli-tied-hide { display: inline; }
.eli-result .eli-tied-body { padding: 4px 18px 8px; border-top: 1px solid var(--line); }
.eli-result .eli-tied-body > :first-child { margin-top: 16px; }
@media (min-width: 640px) { .result-card { padding: 36px 34px 40px; } }

/* ---------- the copyright line and the rest ---------- */
.eli-copyright {
  padding: 18px var(--pad) calc(18px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #7a7f8c;
}
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.noscript { padding: 24px; text-align: center; }

/* ---------- laptop: the owner's mockup (2026-10-27); after the rules it widens ---------- */
@media (min-width: 960px) {
  :root { --pad: clamp(32px, 4vw, 64px); --cols: minmax(0, 1fr) minmax(480px, min(720px, 52%)); }
  /* One grid for the page: the header across both columns, then the figure and the assessment. The header and the
     assessment are the shell's children, laid in the page's grid. */
  .page {
    display: grid;
    grid-template-columns: var(--cols);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 var(--pad);
  }
  .quiz-shell { display: contents; }
  .topbar {
    grid-row: 1;
    grid-column: 1 / -1;
    grid-template-columns: var(--cols);
    justify-items: start;
    padding: 22px 0 20px;
    border-bottom: 1px solid var(--line);
  }
  .topbar-logo { grid-column: 1; grid-row: 1; height: 56px; }
  .nav-btn { grid-column: 2; grid-row: 1; margin-left: var(--pad); }
  .progress-box { grid-column: 2; grid-row: 1; margin: 0 0 0 calc(var(--pad) + 58px); }
  .progress-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
  .progress-name { font-size: 12.5px; letter-spacing: 0.24em; text-transform: uppercase; color: #4a5266; }
  .progress-count { font-size: 15px; color: #4a5266; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .progress { height: 6px; border-radius: 6px; }

  /* The figure no wider than about 380 pixels (the picture's own size on a sharp screen), with room around it. */
  .brand-panel {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    margin: 36px 0;
    padding: 24px var(--pad) 24px 0;
    border-right: 1px solid var(--line);
  }
  .brand-figure {
    display: block;
    width: clamp(200px, min(28vw, 100dvh - 480px), 400px);
    height: auto;
    aspect-ratio: 718 / 715;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(3, 26, 69, 0.05), 0 24px 48px -30px rgba(3, 26, 69, 0.4);
  }
  .brand-rule { display: block; flex: none; width: 56px; height: 2px; margin: 30px 0 16px; background: var(--gold); }
  .brand-line {
    margin: 0;
    max-width: 460px;
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;
    text-wrap: balance;
    color: #4a5266;
  }
  /* Two lines as the mockup has them, each wrapping only where the column is too narrow for it. */
  .brand-line span { display: inline-block; }
  .quiz-main { grid-row: 2; grid-column: 2; }

  /* The cover (the owner's mockup, 2026-10-28): the header with the bar at its start; on the left a gold rule, the title
     on two lines ("Discover How" navy, "You See The World" gold), the figure, the gold rule and the line (on every page,
     owner 2026-10-29); on the right the logo, a gold rule, the first line large in the serif, the words, the list and
     Start, all left-aligned. */
  .brand-top { display: block; flex: none; width: 56px; height: 2px; margin: 0 0 22px; background: var(--gold); }
  .brand-title {
    display: block;
    margin: 0 0 28px;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(32px, min(3.5vw, 5.6vh), 52px);
    line-height: 1.14;
    text-align: center;
    color: var(--navy);
  }
  .brand-title .line { display: block; white-space: nowrap; }
  .brand-title .accent { color: var(--gold); }
  .cover .cover-body { padding: 3vh 0 0 var(--pad); }
  .cover-logo { width: clamp(120px, 15vh, 150px); margin: 0 auto 12px; }
  .cover-rule { width: 56px; margin: 0 auto 22px; }
  .cover .cover-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .cover-lead { margin: 0 0 18px; max-width: none; font-family: var(--serif); font-size: clamp(21px, min(1.9vw, 3.3vh), 27px); line-height: 1.3; color: var(--navy); text-align: left; text-wrap: pretty; }
  .cover-copy p { font-size: 15px; line-height: 1.65; }
  .checks { margin: 18px 0 4px; padding: 10px 0 0; border-bottom: 0; }
  .checks li { padding: 7px 0; font-size: 16px; }
  .checks li + li { border-top: 0; }
  .check { width: 30px; height: 30px; color: var(--white); }
  .closing { margin: 14px 0 0; }
  .closing p { font-size: 17px; }
  .screen:not(.cover) { padding: 10px 0 0 var(--pad); }
  .cover-hero { display: none; }
  .cover .cover-body { padding: 9vh 0 0 var(--pad); }
  .cover .footer, .eli-copyright { padding-right: 0; padding-left: var(--pad); }
  .question .q-head, .contact .q-head { margin-top: 5vh; }
  h1.qtitle { font-size: 34px; }
  .result-card { padding: 40px 44px 44px; }
}