/* ==========================================================================
   Application flow, restyled onto the landing page's design system.
   Only presentation changed. Every form name, field name, data- attribute and
   handler on this page is byte-identical to the live page, so the Netlify forms
   and the funnel reporting behind them behave exactly as before.

   The page's JS drives the step machine by toggling seven classes:
     .q-card.is-current   .q-card.invalid   .card-error.visible
     .success-card.visible
     .step-dot.done  .step-dot.current  .step-dot.reachable
   Each one is handled below. Dropping any of them shows every card at once.
   ========================================================================== */
body{
  min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink); font-family:var(--sans);
}

/* progress rail, pinned to the top of the viewport */
.progress-track{ position:fixed; top:0; left:0; right:0; height:3px; background:rgba(31,30,29,.09); z-index:40; }
.progress-fill{ height:100%; width:0; background:var(--accent-bright); transition:width .35s cubic-bezier(.2,.7,.2,1); }

.close-link{
  position:absolute; top:14px; right:18px; z-index:41;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line);
  color:var(--muted); font-size:19px; line-height:1; text-decoration:none;
}
.close-link:hover{ color:var(--ink); background:var(--panel-2); }

/* The old pastel band becomes the contour ground used on the landing page. */
/* Plain ground. The contour texture that used to sit here was distracting. */
.top-band{ display:none; }
/* the landing page's flowing-line pattern, behind the cards, fading out down the page */
.apply-lines{ position:fixed; left:0; top:0; width:100%; height:min(72vh,620px); z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%); }

.funnel-logo{ position:relative; z-index:1; text-align:center; padding:40px 20px 0; }
.funnel-logo img{ height:32px; width:auto; margin:0 auto; }

.wrap{
  position:relative; z-index:1; flex:1; width:100%;
  max-width:700px; margin:0 auto; padding:30px 20px 80px;
  display:flex; flex-direction:column; justify-content:center;
}

/* ---------------- the card stack: one step at a time ---------------- */
.q-card{
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  margin:0; overflow:hidden; scroll-margin-top:26px;
  box-shadow:0 26px 60px -34px rgba(31,30,29,.35);
  display:none;                       /* only .is-current is shown */
}
.q-card.is-current{ display:block; animation:step-in .22s ease both; }
@keyframes step-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.q-card.invalid{ border-color:var(--warn); }

.q-main{ padding:36px 40px 4px; }
.q-card h3{
  font-family:var(--serif); font-weight:500; font-size:27px; line-height:1.22; letter-spacing:-.012em;
  color:var(--ink); margin:0; transition:color .15s ease;
}
.q-card.invalid h3{ color:var(--warn); }
.q-card .req{ color:var(--accent); font-weight:500; margin-left:2px; }
.q-card h3 .nb,.nb{ white-space:nowrap; }
.q-help{ margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--muted); }
.q-body{ margin-top:26px; padding-bottom:4px; }

/* ---------------- the opening panel ---------------- */
/* Given the dark-card treatment the landing page uses for its strongest
   statement, so step 0 reads as the front door rather than as question one. */
.q-card--intro{ border-color:var(--dark); }
.q-card--intro .q-main{ text-align:center; padding:52px 44px 46px; background:var(--dark); }
.q-card--intro h1{
  font-family:var(--serif); font-weight:400; font-size:44px; line-height:1.1; letter-spacing:-.012em; color:#fff; margin:0;
  text-wrap:balance;
}
.q-card--intro p{
  color:rgba(255,255,255,.72); font-size:17px; line-height:1.55;
  margin:18px auto 0; max-width:48ch;
}
.q-card--intro .q-body{ max-width:30rem; margin:26px auto 0; }
.q-card--intro .card-error{ margin-top:12px; }

/* ---------------- inputs ---------------- */
.field-text{
  width:100%; font-family:var(--sans); font-size:16px; line-height:1.4; color:var(--ink);
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  padding:15px 16px; outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.field-text::placeholder{ color:#A5A39C; }
.field-text:focus{ background:var(--panel); border-color:var(--accent-bright); box-shadow:0 0 0 3px rgba(88,166,93,.18); }
.q-card--intro .field-text{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff; }
.q-card--intro .field-text::placeholder{ color:rgba(255,255,255,.45); }
.q-card--intro .field-text:focus{ background:rgba(255,255,255,.1); border-color:var(--accent-light); box-shadow:0 0 0 3px rgba(140,200,145,.22); }
.field-row{ display:flex; gap:12px; }
.field-cell{ flex:1; min-width:0; }
@media (max-width:560px){ .field-row{ flex-direction:column; } }

/* ---------------- choices ---------------- */
.choice-list{ display:grid; gap:10px; }
.choice{
  display:flex; align-items:center; gap:13px; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:15px 17px; font-size:16px; line-height:1.35; color:var(--ink);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.choice:hover{ background:var(--panel); border-color:rgba(31,30,29,.22); }
/* The radio is the input itself, restyled with appearance:none, exactly as the
   original did. There is no separate indicator element in the markup. */
.choice input{
  appearance:none; -webkit-appearance:none; flex:none; margin:0;
  width:21px; height:21px; border-radius:50%;
  border:2px solid rgba(31,30,29,.26); background:var(--panel); cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.choice input:checked{ border-color:var(--accent-bright); box-shadow:inset 0 0 0 5px var(--accent-bright); }
.choice input:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }
.choice:has(input:checked){ background:var(--accent-soft); border-color:rgba(47,113,57,.45); }

.q-reveal{ margin-top:18px; }
.q-reveal-label{
  display:block; margin-bottom:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}

/* ---------------- footer controls ---------------- */
.q-foot{
  display:flex; align-items:center; gap:14px; min-height:64px;
  padding:14px 24px; margin-top:22px;
  background:var(--panel-2); border-top:1px solid var(--line-soft);
}
.q-foot--start{ background:transparent; border-top:0; margin-top:0; padding:0 44px 46px; }
.q-card--intro .q-foot--start{ background:var(--dark); }
.btn-step{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:17px; font-weight:500; line-height:1;
  padding:17px 30px; min-height:54px; border-radius:10px; border:0; cursor:pointer;
  background:transparent; color:var(--body);
  transition:background .15s ease,color .15s ease;
}
.btn-step:hover{ color:var(--ink); background:rgba(31,30,29,.05); }
.btn-step--fwd,.btn-step--go{ margin-left:auto; background:var(--dark); color:#fff; font-weight:600; min-width:150px; }
.btn-step--fwd:hover,.btn-step--go:hover{ background:#33312F; color:#fff; }
.btn-step--start{ width:100%; background:#fff; color:var(--ink); font-size:19px; font-weight:600; padding:22px 24px; min-height:66px; }
.btn-step--start:hover{ background:#EDEBE3; color:var(--ink); }
.btn-step:disabled{ opacity:.45; cursor:not-allowed; }
.btn-step:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; }
.btn-step--start:focus-visible{ outline:2px solid var(--accent-light); outline-offset:-4px; }

.card-error{
  display:none; margin:0; flex:1;
  font-size:13.5px; line-height:1.45; color:var(--warn);
}
.card-error.visible{ display:block; }
.q-body .card-error{ margin-top:12px; }

/* ---------------- step rail ---------------- */
.rail-zone{ margin-top:34px; }
.step-rail{ position:relative; display:flex; align-items:center; justify-content:space-between; max-width:400px; margin:0 auto; }
.step-rail::before{
  content:""; position:absolute; left:5px; right:5px; top:50%; height:2px;
  background:var(--line); transform:translateY(-50%);
}
.step-dot{
  position:relative; flex:none; width:11px; height:11px; padding:0;
  border:none; border-radius:50%; background:#D3D0C7; cursor:default;
  transition:background-color .2s ease,width .2s ease,height .2s ease;
}
.step-dot.done{ background:var(--accent-bright); }
.step-dot.reachable{ cursor:pointer; }
.step-dot.current{ width:19px; height:19px; background:var(--panel); border:2px solid var(--ink); }
.step-dot:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; }

.fine-print{ text-align:center; font-size:12.5px; line-height:1.6; color:var(--muted); margin:22px 0 0; }
.fine-print a{ color:var(--body); text-decoration:underline; text-underline-offset:2px; }

/* ---------------- success ---------------- */
.success-card{
  display:none; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:40px 40px 34px; box-shadow:0 26px 60px -34px rgba(31,30,29,.35);
}
.success-card.visible{ display:block; }
.success-card .check{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:var(--accent-soft); border:1px solid rgba(47,113,57,.3);
  display:flex; align-items:center; justify-content:center;
}
.success-card svg{ width:30px; height:30px; }
.success-card h2{
  font-family:var(--serif); font-weight:500; font-size:34px; line-height:1.12; letter-spacing:-.012em; color:var(--ink); margin:0;
}
.success-card p{ margin:14px 0 24px; font-size:15.5px; line-height:1.6; color:var(--body); }
.calendar-embed{ margin-top:24px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel-2); }
.calendar-embed iframe{ display:block; width:100%; min-height:700px; border:0; }

@media (max-width:640px){
  .funnel-logo{ padding-top:32px; }
  .wrap{ padding:24px 16px 68px; }
  .q-card,.success-card{ border-radius:18px; }
  .q-main{ padding:28px 22px 4px; }
  .q-card h3{ font-size:22px; }
  .q-card--intro .q-main{ padding:34px 22px 30px; }
  .q-card--intro h1{ font-size:31px; }
  .q-card--intro p{ font-size:16px; }
  .q-card--intro .q-foot--start{ padding:0 22px 30px; }
  .q-foot{ padding:12px 18px; gap:8px; }
  .btn-step{ padding:16px 18px; font-size:16px; min-height:52px; }
  .btn-step--fwd,.btn-step--go{ flex:1; margin-left:0; }
  .btn-step--start{ font-size:18px; padding:20px 18px; min-height:62px; }
  .success-card{ padding:30px 22px 26px; }
  .success-card h2{ font-size:27px; }
  .rail-zone{ margin-top:28px; }
}
@media (prefers-reduced-motion:reduce){ .q-card.is-current{ animation:none; } }

/* black banner fixed to the top: the funnel's two promises, a complimentary audience and the guarantee.
   Hidden once a result card is on screen. The progress rail and close button sit just under it. */
:root{ --topbar-h:44px; }
.topbar{ position:fixed; top:0; left:0; right:0; z-index:60; height:var(--topbar-h); display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--dark); color:#fff; font-size:17px; font-weight:500; letter-spacing:.02em; line-height:1; padding:0 16px; white-space:nowrap; }
.topbar-sub{ opacity:.6; }
.topbar-main{ font-family:var(--serif); font-size:1.08em; font-weight:500; letter-spacing:0; color:#fff; }
body{ padding-top:var(--topbar-h); }
.progress-track{ top:var(--topbar-h); }
.close-link{ top:calc(var(--topbar-h) + 14px); }
body:has(.success-card.visible){ padding-top:0; }
body:has(.success-card.visible) .topbar{ display:none; }
body:has(.success-card.visible) .progress-track{ top:0; }
body:has(.success-card.visible) .close-link{ top:14px; }
@media (max-width:760px){ :root{ --topbar-h:40px; } .topbar{ font-size:15px; gap:7px; } }
@media (max-width:380px){ .topbar{ font-size:14px; } }

/* ---- banner details: clock + count, and the close button lives in the banner ---- */
.topbar-main{ display:inline-flex; align-items:center; gap:8px; }
.topbar-main svg{ width:1.15em; height:1.15em; flex:none; }
.topbar-main b{ font-weight:inherit; }
.tb-n{ display:inline-flex; }
.tb-of{ opacity:.6; }
.close-link{
  position:fixed; top:0; right:0; z-index:70; width:60px; height:var(--topbar-h);
  background:transparent; border:0; border-radius:0; color:#fff; font-size:38px; line-height:1;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.close-link:hover{ background:rgba(255,255,255,.1); color:#fff; }
body:has(.success-card.visible) .close-link{ top:10px; right:14px; width:46px; height:46px; border-radius:50%; background:var(--panel); border:1px solid var(--line); color:var(--ink); font-size:30px; }

/* ---- the questions: dark, centred and sized like the opening website card ---- */
.q-card:not(.q-card--intro){ background:var(--dark); border-color:var(--dark); }
.q-card:not(.q-card--intro) .q-main{ text-align:center; padding:52px 44px 14px; }
.q-card:not(.q-card--intro) h3{ color:#fff; font-size:38px; line-height:1.12; letter-spacing:-.012em; text-wrap:balance; }
.q-card:not(.q-card--intro).invalid{ border-color:#FF9C86; }
.q-card:not(.q-card--intro).invalid h3{ color:#FFB7A8; }
.q-card:not(.q-card--intro) .req{ color:var(--accent-light); }
.q-card:not(.q-card--intro) .q-help{ color:rgba(255,255,255,.72); font-size:17px; line-height:1.55; margin:18px auto 0; max-width:52ch; text-wrap:balance; }
.q-card:not(.q-card--intro) .q-body{ max-width:30rem; margin:28px auto 0; text-align:left; }
.q-card:not(.q-card--intro) .field-text{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff; }
.q-card:not(.q-card--intro) .field-text::placeholder{ color:rgba(255,255,255,.45); }
.q-card:not(.q-card--intro) .field-text:focus{ background:rgba(255,255,255,.1); border-color:var(--accent-light); box-shadow:0 0 0 3px rgba(140,200,145,.22); }
.q-card:not(.q-card--intro) .choice{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff; }
.q-card:not(.q-card--intro) .choice:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.38); }
.q-card:not(.q-card--intro) .choice input{ background:transparent; border-color:rgba(255,255,255,.45); }
.q-card:not(.q-card--intro) .choice input:checked{ border-color:var(--accent-light); box-shadow:inset 0 0 0 5px var(--accent-light); }
.q-card:not(.q-card--intro) .choice:has(input:checked){ background:rgba(140,200,145,.16); border-color:rgba(140,200,145,.65); }
.q-card:not(.q-card--intro) .q-reveal-label{ color:rgba(255,255,255,.62); }
.q-card:not(.q-card--intro) .q-foot{ background:transparent; border-top:0; margin-top:0; padding:24px 44px 46px; flex-wrap:wrap; }
.q-card:not(.q-card--intro) .card-error{ order:-1; flex:0 0 100%; text-align:center; margin:0; color:#FF9C86; }
.q-card:not(.q-card--intro) .btn-step{ color:rgba(255,255,255,.75); }
.q-card:not(.q-card--intro) .btn-step:hover{ background:rgba(255,255,255,.1); color:#fff; }
.q-card:not(.q-card--intro) .btn-step--fwd,
.q-card:not(.q-card--intro) .btn-step--go{ flex:1; margin-left:0; background:#fff; color:var(--ink); font-size:19px; font-weight:600; min-height:66px; padding:20px 24px; }
.q-card:not(.q-card--intro) .btn-step--fwd:hover,
.q-card:not(.q-card--intro) .btn-step--go:hover{ background:#EDEBE3; color:var(--ink); }
@media (max-width:640px){
  .q-card:not(.q-card--intro) .q-main{ padding:34px 22px 10px; }
  .q-card:not(.q-card--intro) h3{ font-size:29px; }
  .q-card:not(.q-card--intro) .q-help{ font-size:16px; }
  .q-card:not(.q-card--intro) .q-foot{ padding:20px 22px 30px; }
  .q-card:not(.q-card--intro) .btn-step--fwd,.q-card:not(.q-card--intro) .btn-step--go{ font-size:18px; min-height:62px; padding:18px; }
}
@media (max-width:480px){
  .topbar{ font-size:13px; gap:6px; padding:0 54px 0 10px; }
  .topbar-main{ font-size:1em; gap:5px; }
  .close-link{ width:52px; font-size:34px; }
}
@media (max-width:374px){ .topbar-main svg{ display:none; } }


/* line icon above each question, drawn like the landing page's section icons: light outline, one green shape */
.q-ic{ display:block; margin:0 auto 22px; width:96px; height:72px; }
@media (max-width:640px){ .q-ic{ width:80px; height:60px; margin-bottom:16px; } }


/* ---------------- the result page: black ground, copy on the left, calendar on the right ---------------- */
body:has(.success-card.visible){ background:var(--dark); }
body:has(.success-card.visible) .apply-lines{ display:none; }
body:has(.success-card.visible) .wrap{ max-width:1240px; padding:56px 40px 80px; }
body:has(.success-card.visible) .close-link{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; }
.success-card.visible{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:56px; align-items:center; text-align:left;
  background:transparent; border:0; box-shadow:none; padding:0; border-radius:0;
}
/* same treatment as the booking page's status line: green circle with a white check, white serif text */
.success-card .sc-qualified{ display:flex; align-items:center; gap:12px; margin:0; font-family:var(--serif); font-size:30px; font-weight:500; letter-spacing:-.005em; line-height:1; color:#fff; }
.success-card .sc-qc{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--accent); flex:none; }
.success-card .sc-qc svg{ width:20px; height:20px; color:#fff; stroke-width:3; }
.success-card h2{ color:#fff; font-size:52px; line-height:1.06; margin:20px 0 0; text-wrap:balance; }
.success-card .sc-copy > p{ margin:22px 0 0; font-size:19px; line-height:1.55; color:rgba(255,255,255,.74); max-width:34em; }
.sc-points{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:14px; }
.sc-points li{ display:flex; align-items:center; gap:12px; font-size:18px; font-weight:500; color:#fff; }
.sc-points li svg{ flex:none; width:36px; height:36px; padding:9px; border-radius:11px; background:var(--accent); color:#fff; }
.success-card .calendar-embed{ margin:0; border:0; border-radius:20px; background:#fff; }
@media (max-width:900px){
  body:has(.success-card.visible) .wrap{ padding:30px 18px 60px; }
  .success-card.visible{ grid-template-columns:1fr; gap:30px; }
  .success-card h2{ font-size:36px; }
  .success-card .sc-copy > p{ font-size:17px; }
  .sc-points li{ font-size:16.5px; }
}


/* answer lists with five or six options sit in two columns */
.q-card:not(.q-card--intro) .q-body:has(.choice-list--2){ max-width:100%; }
.choice-list--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:480px){ .choice-list--2{ grid-template-columns:1fr; } }


/* no dot progress rail under the cards */
.rail-zone{ display:none !important; }

/* result page: the calendar is as tall as the window and scrolls inside itself */
body:has(.success-card.visible) .wrap{ padding-top:calc(var(--topbar-h) + 40px); padding-bottom:40px; }
.success-card .calendar-embed{ height:calc(100vh - var(--topbar-h) - 80px); min-height:620px; position:sticky; top:calc(var(--topbar-h) + 40px); }
.success-card .calendar-embed > div{ height:100%; }
.success-card .calendar-embed iframe{ height:100% !important; min-height:0; width:100%; }
@media (max-width:900px){
  .success-card .calendar-embed{ height:82vh; min-height:620px; position:static; }
}


/* opening card: a small green tag above the headline, where the icon used to be */
.q-card--intro .intro-pill{ white-space:nowrap; display:inline-flex; align-items:center; gap:8px; margin:0 0 24px; padding:9px 15px 9px 12px; border-radius:7px; background:#28F0E8; border:1px solid #28F0E8; color:var(--dark); font-size:15px; font-weight:600; line-height:1.2; letter-spacing:.01em; }
.q-card--intro .intro-pill svg{ width:18px; height:18px; flex:none; }
.q-card--intro .intro-pill b{ font-weight:600; }
.q-card--intro .intro-pill span{ opacity:.7; }


/* the reward is the one thing picked out in each question's one-line reason */
.q-card:not(.q-card--intro) .q-help b{ color:#fff; font-weight:600; }

/* thin line under "You Qualified!", as on the booking page */
.success-card .sc-rule{ border:0; border-top:1px solid rgba(255,255,255,.2); margin:24px 0 0; max-width:32em; }
.success-card .sc-qualified + .sc-rule + h2{ margin-top:24px; }

/* result-page headline: two lines only. The text column is a size container, so the type scales to the column and a line never wraps. */
#successCard .sc-copy{ container-type:inline-size; }
#successCard .sc-copy h2{ font-size:min(52px,calc(100cqw / 10.9)); white-space:nowrap; text-wrap:initial; }

/* qualified page: the green "You're qualified!" banner across the top, as on the booking page. The close button shrinks to sit inside it. */
body:has(.success-card.visible) .topbar.qual-bar{ display:flex; background:var(--accent); color:#fff; }
.qual-bar .topbar-main{ font-size:1.12em; }
body:has(.success-card.visible) .close-link{ top:calc((var(--topbar-h) - 34px) / 2); right:10px; width:34px; height:34px; font-size:24px; }

/* the arrow after "Book an intro": the same drawn arrow as the booking page headline, in green, no circle */
.success-card .sc-arr{ display:inline-block; flex:none; width:1em; height:1em; margin-left:-2px; color:#58A65D; }

/* ---------------- under the question: "How it works" cue and a swipeable row of short cards ---------------- */
.q-learn{ margin:38px 0 0; }
.ql-set[hidden]{ display:none; }
.q-learn[hidden]{ display:none; }
.ql-cue{ display:flex; align-items:center; justify-content:center; gap:8px; margin:0; font-family:var(--serif); font-weight:500; font-size:23px; line-height:1; color:var(--ink); }
.ql-arr{ width:.8em; height:.8em; color:var(--accent); flex:none; }
.ql-row{ list-style:none; margin:22px 0 0; padding:2px 4px 44px; display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; }
.ql-row::-webkit-scrollbar{ display:none; }
.ql-card{ flex:0 0 min(310px,84%); scroll-snap-align:start; background:#fff; border-radius:18px; padding:14px 18px 16px; box-shadow:0 10px 28px -20px rgba(31,30,29,.4); }
.ql-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ql-ic{ display:inline-flex; color:var(--accent); opacity:.55; }
.ql-ic svg{ width:28px; height:28px; stroke-width:1.8; }
.ql-card--dark .ql-ic{ color:#58A65D; opacity:.8; }
.ql-n{ font-family:var(--serif); font-size:24px; line-height:1; color:rgba(31,30,29,.22); }
.ql-card b{ display:block; font-family:var(--serif); font-weight:500; font-size:19px; line-height:1.2; color:var(--ink); }
.ql-card p{ margin:6px 0 0; font-size:16px; line-height:1.45; color:var(--muted); text-wrap:pretty; }
.ql-card--dark{ background:var(--dark); }
.ql-card--dark b{ font-size:25px; line-height:1.12; color:#fff; }
.ql-card--dark p{ margin-top:10px; color:rgba(255,255,255,.76); }
@media (max-width:640px){ .q-learn{ margin-top:32px; } .ql-row{ margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; scroll-padding-left:16px; } }
.ql-card--stat b{ font-size:27px; line-height:1.12; }
@media (max-width:480px){ .q-card--intro .intro-pill{ font-size:min(15px,3.6vw); gap:6px; padding:8px 12px 8px 10px; } .q-card--intro .intro-pill svg{ width:16px; height:16px; } }

/* the optional last question: a multi-line box */
.field-area{ display:block; width:100%; min-height:132px; resize:vertical; line-height:1.5; font-family:inherit; }

/* the last step's button reads "See if I qualified" and has to stay on one line next to Previous on a phone */
@media (max-width:480px){
  .q-card:not(.q-card--intro) .btn-step--go{ white-space:nowrap; font-size:16.5px; padding-left:8px; padding-right:8px; }
  .q-card:not(.q-card--intro) .q-foot .btn-step[data-nav]{ padding-left:8px; padding-right:8px; }
  .q-card:not(.q-card--intro) .q-foot{ gap:6px; }
}

/* under the booking calendar: a way to the longer calendar when nothing in the first week suits */
.success-card .calendar-embed{ display:flex; flex-direction:column; }
.success-card .calendar-embed > div:first-child{ flex:1 1 auto; min-height:0; height:auto; }
.success-card .cal-more{ flex:none; margin:0; padding:12px 22px 16px; text-align:center; font-size:16px; line-height:1.45; color:var(--muted); text-wrap:balance; }
.success-card .cal-more a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
/* the calendar frame fills the space above the note instead of the whole card */
.success-card .calendar-embed > div:first-child{ position:relative; }
.success-card .calendar-embed > div:first-child iframe{ position:absolute; inset:0; height:100% !important; }