/* Matarot's retirement-planner demo page. One deliberate visual world, the brand's own navy
   (kits/matarot/KIT.json brand.colors: bg #0D192C, accent #F09536, text #FFFFFF, muted #D0CCE0, alert #E7635A),
   so it is painted explicitly and does not follow the viewer's light/dark setting.
   Type: Heebo, until the brand face (Simpler Pro) is licensed for the web. */
:root {
  --navy: #0D192C;
  --navy-2: #14253F;
  --navy-3: #1B3050;
  --line: rgba(208, 204, 224, 0.16);
  --orange: #F09536;
  --orange-deep: #E07B2A;
  --text: #FFFFFF;
  --muted: #D0CCE0;
  --alert: #E7635A;
  --ok: #7FD1A8;
  --radius: 14px;
  --font: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--navy);
  color: var(--text);
  font: 400 17px/1.65 var(--font);
  display: flex;
  flex-direction: column;
}
[hidden] { display: none !important; }
a { color: var(--orange); }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ── header and footer ───────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.logo { height: 44px; width: auto; display: block; }
.chip {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
}
main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(20px, 4vw, 48px) 16px; }
.foot { padding: 18px 16px 28px; border-top: 1px solid var(--line); }
.foot p { max-width: 1180px; margin: 0 auto; color: var(--muted); font-size: 13px; text-align: center; }

/* ── shared pieces ───────────────────────────────────── */
.card {
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
}
.card.narrow { max-width: 440px; margin: 6vh auto 0; text-align: center; }
.h-card { font-size: 22px; font-weight: 700; margin: 0 0 8px; text-wrap: balance; }
.dim { color: var(--muted); margin: 0 0 20px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
.msg { color: var(--alert); margin: 0; min-height: 1.4em; font-size: 15px; }
.notice { color: var(--muted); font-size: 14px; margin: 4px 0 0; line-height: 1.55; }
/* The client's privacy policy, under the notice (index.html .privacy, app.js showPrivacy) */
.privacy { font-size: 14px; margin: 0; line-height: 1.55; }
.privacy a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.privacy a:hover { color: var(--orange); }
.tip { color: var(--muted); font-size: 15px; margin: 0; }
.eyebrow { color: var(--orange); font-size: 14px; font-weight: 500; letter-spacing: 0.06em; margin: 0 0 10px; }

.field { display: flex; flex-direction: column; gap: 8px; text-align: start; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field > legend { font-weight: 500; padding: 0; }
.field input[type="text"], .field input[type="password"], .field input[type="tel"], .field input[type="email"], .field textarea {
  background: var(--navy);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 48px;
}
.field input::placeholder { color: rgba(208, 204, 224, 0.55); }
.field input:focus { border-color: var(--orange); outline: none; }

/* a single choice: real radio buttons, drawn as a segmented row */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { position: relative; }
.choices input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choices span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--navy);
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.choices input:hover + span { border-color: rgba(240, 149, 54, 0.6); }
.choices input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--navy); font-weight: 700; }
.choices input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }

.btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  min-height: 48px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
  background: var(--navy-3);
  transition: background 0.15s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.primary { background: var(--orange); color: var(--navy); }
.btn.primary:hover:not(:disabled) { background: var(--orange-deep); }
.btn.big { font-size: 18px; padding: 14px 32px; align-self: flex-start; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.btn.danger { background: var(--alert); color: var(--text); }

/* ── the landing page ────────────────────────────────── */
.landing { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.landing .copy { grid-column: 1; grid-row: 1; }
.landing .portrait { grid-column: 2; grid-row: 1; position: sticky; top: 24px; }
.hero { font-size: clamp(32px, 5vw, 52px); line-height: 1.12; font-weight: 800; margin: 0 0 16px; text-wrap: balance; }
.hero em { font-style: normal; color: var(--orange); }
.lead { font-size: 19px; color: var(--muted); margin: 0 0 24px; max-width: 60ch; }
.facts { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 10px; }
.facts li { padding-inline-start: 18px; position: relative; color: var(--muted); max-width: 60ch; }
.facts li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.facts strong { color: var(--text); font-weight: 700; }
.quiz .stack { margin: 16px 0 8px; }
.quiz .btn.big { margin-top: 16px; }

.portrait { margin: 0; position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--navy-2); }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 13; object-fit: cover; object-position: 50% 22%; }
.portrait figcaption {
  position: absolute;
  inset-inline: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(13, 25, 44, 0.82);
  font-size: 14px;
  font-weight: 500;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); display: inline-block; }

/* ── the transition screen ───────────────────────────── */
.ready { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(24px, 5vw, 56px); align-items: center; max-width: 920px; margin: 4vh auto 0; }
.ready .copy { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 16px; }
.ready .portrait { grid-column: 2; grid-row: 1; }
.ready .hero { font-size: clamp(30px, 4.4vw, 44px); margin: 0; }
.ready .copy > .btn { align-self: flex-start; }
.ready .lead { margin: 0; }
.fallback { background: var(--navy-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.fallback p { margin: 0 0 12px; }

/* ── door 2 (an embed page): the bot check, the outage form; the demo's own labels are hidden ── */
body.door2 [data-door1] { display: none !important; }
.turnstile { min-height: 65px; }

/* ── a section of the client's own page (Hub 20 §7): our page inside a frame keeps only the questionnaire, the ready
   screen and the call. The client's page carries its own header, hero text and footer. The height is the content's, so
   the frame can grow and shrink with it (app.js tells the loader). ── */
body.framed { min-height: 0; }
body.framed .top, body.framed .foot, body.framed #landing .eyebrow, body.framed #landing .hero,
body.framed #landing .lead, body.framed #landing .facts { display: none !important; }
body.framed main { padding: 16px; }
body.framed .landing .portrait { position: static; }
#outage .btn { align-self: flex-start; }

/* ── the call ────────────────────────────────────────── */
.stage { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.call-row { display: flex; gap: 20px; align-items: flex-start; justify-content: center; width: 100%; }
.frame { position: relative; width: min(420px, 100%); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: var(--navy-2); border: 1px solid var(--line); }
.frame .poster, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame video { opacity: 0; transition: opacity 0.4s; }
.frame.on video { opacity: 1; }
.connecting { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(13, 25, 44, 0.55); font-weight: 500; }
.frame.on .connecting { display: none; }
.pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--orange); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; transform: scale(0.8); } }
.hud { position: absolute; top: 12px; inset-inline: 12px; display: flex; justify-content: space-between; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(13, 25, 44, 0.8); font-size: 14px; }
.pill .dot { background: var(--muted); }
.pill .dot.live { background: var(--ok); }
.mono { font-variant-numeric: tabular-nums; }
.ai-label { position: absolute; bottom: 12px; inset-inline: 12px; text-align: center; font-size: 13px; color: var(--muted); background: rgba(13, 25, 44, 0.75); border-radius: 999px; padding: 4px 10px; width: fit-content; margin-inline: auto; }
.cards { display: flex; flex-direction: column; gap: 12px; width: 340px; max-width: 100%; }
.cards:empty { display: none; }
.tool-card { background: var(--navy-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; animation: rise 0.25s ease-out; }
.tool-card h2 { font-size: 17px; margin: 0 0 8px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tool-card h2 small { font-size: 12px; font-weight: 500; color: var(--navy); background: var(--muted); border-radius: 999px; padding: 1px 8px; }
.tool-card p { margin: 0 0 6px; color: var(--muted); }
.tool-card .slot { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; color: var(--text); }
.tool-card.ok { border-color: rgba(127, 209, 168, 0.5); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.controls { display: flex; justify-content: center; }

.toast { position: fixed; bottom: 20px; inset-inline: 16px; margin: 0 auto; width: fit-content; max-width: calc(100% - 32px); background: var(--navy-3); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; }

/* ── phones ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .landing { grid-template-columns: 1fr; }
  .landing .copy, .landing .portrait { grid-column: 1; grid-row: auto; }
  .landing .portrait { position: relative; top: auto; order: -1; max-width: 240px; } /* relative, not static: the caption hangs on it */
  .landing .portrait img { aspect-ratio: 1 / 1; object-position: 50% 18%; }
  /* one short line at the photo's foot, so it never covers the mouth */
  .portrait figcaption { font-size: 12px; white-space: nowrap; bottom: 8px; inset-inline: 8px; padding: 4px 10px; }
  .ready { grid-template-columns: 1fr; }
  .ready .copy, .ready .portrait { grid-column: 1; grid-row: auto; }
  .ready .portrait { max-width: 200px; order: -1; }
  .ready .portrait img { aspect-ratio: 1 / 1; object-position: 50% 18%; }
  .call-row { flex-direction: column; align-items: center; }
  .frame { width: min(300px, 100%); }
  .cards { width: 100%; }
  .btn.big { align-self: stretch; }
  .logo { height: 36px; }
}

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