/* Eligibility check (src/components/QuizSheet.astro): the sheet over the homepage and the
   page at /am-i-a-candidate/. A plain file linked by the component, not a component style:
   Astro bundled the component's global CSS into a stylesheet every page linked, because the
   shortcut block that renders the sheet is part of every page's module graph. The answer
   buttons are created by script, so these selectors are unscoped; every class is qs__-prefixed. */
  .qs {
    --qs-px: 2.5rem; --qs-pt: 1.9rem; --qs-pb: 1.75rem;
    position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.5rem;
  }
  .qs[hidden], .qs [hidden] { display: none !important; }
  .qs [tabindex="-1"]:focus { outline: none !important; box-shadow: none !important; }
  .qs__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .qs__scrim { position: absolute; inset: 0; background: rgba(10,10,11,.62); backdrop-filter: blur(8px); animation: qsFade .3s var(--e-out) both; }

  .qs__panel {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
    width: min(680px, 100%); height: min(760px, calc(100dvh - 3rem));
    background: var(--bone); color: var(--ink); border-radius: 20px; overflow: hidden;
    box-shadow: 0 1px 0 rgba(10,10,11,.04), 0 40px 120px -40px rgba(10,10,11,.6);
    animation: qsGrow .42s var(--e-out) both;
  }
  .qs__aside { display: none; }
  .qs__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

  /* top bar: back, where you are, close — on the same edges as the content */
  .qs__top {
    flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    height: 3.9rem; padding-inline: var(--qs-px);
  }
  .qs__back {
    justify-self: start; display: inline-flex; align-items: center; gap: .2rem; height: 2.5rem;
    margin-left: -.7rem; padding: 0 .85rem 0 .45rem; border: 0; border-radius: 999px; background: none; cursor: pointer;
    font: inherit; font-size: .875rem; font-weight: 600; color: var(--ink); transition: background .2s;
  }
  .qs__back:hover { background: rgba(10,10,11,.06); }
  .qs__count { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-ink); white-space: nowrap; }
  .qs__x {
    justify-self: end; width: 2.5rem; height: 2.5rem; margin-right: -.35rem; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 50%; background: rgba(10,10,11,.06); color: var(--ink); cursor: pointer; transition: background .2s;
  }
  .qs__x:hover { background: rgba(10,10,11,.12); }
  .qs__back:focus-visible, .qs__x:focus-visible { outline: 2px solid var(--bronze-ink); outline-offset: 2px; }
  .qs__progress { flex: none; height: 2px; background: rgba(10,10,11,.08); }
  .qs__progress span { display: block; width: 0; height: 100%; background: var(--ink); transition: width .5s var(--e-out); }

  .qs__body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--qs-pt) var(--qs-px) var(--qs-pb); }
  .qs__view { animation: qsIn .36s var(--e-out) both; }
  .qs .eyebrow { margin: 0 0 .7rem; }
  .qs__h {
    margin: 0; font-family: var(--display); font-weight: 500; letter-spacing: -.015em; color: var(--ink);
    font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem); line-height: 1.12; text-wrap: balance;
  }
  .qs__h--match { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem); line-height: 1.05; }
  .qs__hint { margin: .55rem 0 0; max-width: 52ch; font-size: .9375rem; line-height: 1.55; color: var(--muted-dark); }

  /* answers: the hairline panel the homepage shortcuts use */
  .qs__opts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 1.4rem;
    background: rgba(10,10,11,.08); border: 1px solid rgba(10,10,11,.1); border-radius: 14px; overflow: hidden;
    box-shadow: 0 18px 40px -30px rgba(10,10,11,.3);
  }
  .qs__opts--list { grid-template-columns: minmax(0, 1fr); }
  .qs__opt {
    position: relative; display: grid; align-content: center; gap: .1rem; min-width: 0; min-height: 3.45rem;
    padding: .62rem 2.5rem .62rem 1.15rem; border: 0; background: #FFFDF9; color: #0A0A0B; text-align: left; cursor: pointer;
    font: inherit; transition: background-color .2s ease, color .2s ease;
  }
  .qs__opts--list .qs__opt { min-height: 4.1rem; padding-left: 1.3rem; }
  .qs__opt:hover { background: #F7F1E6; }
  .qs__opt:focus-visible { outline: 2px solid var(--bronze-ink); outline-offset: -3px; }
  .qs__ol { font-size: .9375rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
  .qs__os { font-size: .8125rem; line-height: 1.35; color: var(--muted-dark); }
  .qs__opt::after {
    content: "\203A"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
    font-size: 1.15rem; line-height: 1; color: var(--bronze-ink); opacity: .45; transition: transform .25s ease, opacity .25s ease;
  }
  .qs__opt:hover::after { opacity: 1; transform: translate(3px, -50%); }
  .qs__opt[aria-pressed="true"] { background: #0A0A0B; color: var(--bone); }
  .qs__opt[aria-pressed="true"] .qs__os { color: rgba(247,243,236,.66); }
  .qs__opt[aria-pressed="true"]::after {
    content: ""; opacity: 1; width: .42rem; height: .8rem; margin-top: -.5rem; right: 1.25rem; top: 50%;
    border: solid var(--bronze); border-width: 0 2px 2px 0; transform: rotate(45deg);
  }

  /* contact — the shared booking form carries its own card padding and grid; here it sits on the sheet's edges */
  .qs .qs__form.book__form { display: block; padding: 0; max-width: none; background: none; border: 0; box-shadow: none; }
  .qs__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; margin-top: 1.4rem; }
  .qs__fields .field { margin: 0 0 .9rem; }
  .qs__wide { grid-column: 1 / -1; }
  .qs__consent { display: flex; gap: .7rem; align-items: flex-start; margin: .2rem 0 .9rem; font-size: .78rem; line-height: 1.55; color: var(--muted-dark); }
  .qs__consent input { margin-top: .18rem; flex: none; width: 16px; height: 16px; accent-color: var(--bronze-ink); }
  .qs__private { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .8125rem; color: var(--muted-dark); }
  .qs__private svg { flex: none; color: var(--bronze-ink); }
  .qs__private a { color: var(--bronze-ink); font-weight: 600; }

  /* the action bar stays in reach at the foot of the sheet */
  .qs__bar {
    position: sticky; bottom: calc(-1 * var(--qs-pb)); z-index: 2; display: flex; align-items: center; gap: .75rem;
    margin: 1.4rem calc(-1 * var(--qs-px)) calc(-1 * var(--qs-pb)); padding: 1rem var(--qs-px);
    background: rgba(247,243,236,.94); backdrop-filter: blur(10px); border-top: 1px solid rgba(10,10,11,.08);
  }
  .qs__bar .btn { justify-content: center; white-space: nowrap; flex: 0 0 auto; }
  .qs__link {
    margin-left: auto; padding: .5rem .25rem; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: .9375rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  }
  .qs__link:hover, .qs__inline:hover { color: var(--bronze-ink); }

  /* best match */
  .qs__sent {
    display: flex; gap: .65rem; align-items: flex-start; margin: 0 0 1.4rem; padding: .85rem 1rem;
    background: #FFFDF9; border: 1px solid rgba(142,105,44,.3); border-radius: 12px; font-size: .9375rem; line-height: 1.45;
  }
  .qs__sent svg { flex: none; margin-top: .1rem; color: var(--bronze-ink); }
  .qs__note { margin: .7rem 0 0; max-width: 54ch; font-size: .9375rem; line-height: 1.55; color: var(--muted-dark); }
  .qs__stats {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 1.6rem;
    border-block: 1px solid rgba(10,10,11,.1);
  }
  .qs__stat { display: grid; align-content: start; gap: .3rem; min-width: 0; padding: 1.05rem 1.1rem 1.1rem; color: inherit; text-decoration: none; transition: background-color .2s; }
  .qs__stat:first-child { padding-left: 0; }
  .qs__stat + .qs__stat { border-left: 1px solid rgba(10,10,11,.1); }
  .qs__stat--link:hover .qs__n--go { text-decoration: underline; text-underline-offset: 2px; }
  .qs__k { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-ink); }
  .qs__v { font-family: var(--display); font-size: 1.55rem; line-height: 1.1; letter-spacing: -.01em; }
  .qs__n { font-size: .75rem; line-height: 1.4; color: var(--muted-dark); }
  .qs__n--go { color: var(--bronze-ink); font-weight: 600; }
  .qs__shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; max-width: 27rem; margin-top: 1.5rem; }
  .qs__shots img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--bone-2); }
  .qs__disc { margin: .8rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--muted-dark); }
  .qs__inline { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .qs__bar--result { display: grid; gap: .55rem; margin-top: 1.6rem; }
  .qs__cta { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .6rem; }
  .qs__cta .btn { width: 100%; }
  .qs__subcta { display: flex; justify-content: center; align-items: center; gap: .6rem; margin: 0; font-size: .8125rem; color: var(--muted-dark); }
  .qs__subcta a { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink); font-weight: 600; text-decoration: none; }
  .qs__subcta a svg { color: var(--bronze-ink); }
  .qs__subcta a:hover, .qs__subcta .qs__inline:hover { color: var(--bronze-ink); }
  .qs__subcta .qs__inline { font-size: .8125rem; text-decoration: none; }

  /* desktops: the side panel — the hero image fills it, the words sit on a cream fade at the foot */
  @media (min-width: 960px) {
    .qs__panel { grid-template-columns: 340px minmax(0, 1fr); width: min(1020px, 100%); height: min(720px, calc(100dvh - 3rem)); }
    .qs__aside { position: relative; display: block; min-height: 0; overflow: hidden; background: var(--bone-2); border-right: 1px solid rgba(10,10,11,.08); }
    .qs__aimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; mix-blend-mode: multiply; }
    .qs__atext {
      position: absolute; inset: auto 0 0 0; padding: 7rem 2.1rem 2.2rem;
      background: linear-gradient(180deg, rgba(239,233,223,0) 0%, rgba(239,233,223,.9) 42%, #EFE9DF 64%);
    }
    .qs__atext .eyebrow { margin-bottom: .6rem; }
    .qs__ah { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.95rem; line-height: 1.08; letter-spacing: -.015em; color: var(--ink); }
    .qs__trust { list-style: none; display: grid; gap: .5rem; margin: 1.1rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid rgba(10,10,11,.12); font-size: .875rem; color: var(--ink); }
    .qs__trust li { display: flex; align-items: center; gap: .55rem; }
    .qs__trust svg { flex: none; color: var(--bronze-ink); }
  }
  /* phones: a full-screen sheet */
  @media (max-width: 640px) {
    .qs { --qs-px: 1.1rem; --qs-pt: 1.35rem; --qs-pb: 1.25rem; padding: 0; place-items: stretch; }
    .qs__panel { width: 100%; height: 100dvh; border-radius: 0; animation: qsSheet .38s var(--e-out) both; }
    .qs__top { height: 3.5rem; }
    .qs__opts { margin-top: 1.15rem; }
    .qs__opt { min-height: 3.6rem; padding: .6rem .8rem; }
    .qs__opts:not(.qs__opts--list) .qs__opt::after { display: none; }
    .qs__opts--list .qs__opt { min-height: 3.9rem; padding: .65rem 2.4rem .65rem 1rem; }
    .qs__ol { font-size: .875rem; }
    .qs__os { font-size: .75rem; }
    .qs__fields { grid-template-columns: minmax(0, 1fr); }
    .qs__stats { grid-auto-flow: row; margin-top: 1.3rem; }
    .qs__stat { grid-template-columns: 5.25rem minmax(0, 1fr); align-items: baseline; column-gap: .9rem; row-gap: .15rem; padding: .8rem 0; }
    .qs__stat + .qs__stat { border-left: 0; border-top: 1px solid rgba(10,10,11,.1); }
    .qs__stat .qs__n { grid-column: 2; }
    .qs__v { font-size: 1.3rem; }
    .qs__shots { max-width: none; margin-top: 1.2rem; }
    .qs__cta { grid-template-columns: minmax(0, 1fr); }
    .qs__bar--result { gap: .45rem; }
    .qs__consent { font-size: .8125rem; }
    .qs__bar { flex-direction: column; align-items: stretch; gap: .35rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
    .qs__bar .btn { width: 100%; }
    .qs__link { margin: 0 auto; }
  }
  @media (max-width: 359px) { .qs__opts { grid-template-columns: minmax(0, 1fr); } }

  @keyframes qsFade { from { opacity: 0 } to { opacity: 1 } }
  @keyframes qsGrow { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }
  @keyframes qsSheet { from { transform: translateY(100%) } to { transform: none } }
  @keyframes qsIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
  @media (prefers-reduced-motion: reduce) { .qs__scrim, .qs__panel, .qs__view { animation: none; } }

  /* ---- page mode: /am-i-a-candidate/ ------------------------------------ */
  .qs.qs--page { position: static; inset: auto; z-index: auto; display: block; padding: clamp(6.25rem, 10vw, 8.5rem) var(--gut, 1rem) clamp(3rem, 6vw, 5rem); background: var(--bone); }
  .qs--page .qs__panel {
    display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 1160px; height: auto; margin-inline: auto;
    background: none; border-radius: 0; box-shadow: none; overflow: visible; animation: none;
  }
  .qs--page .qs__main { min-height: 0; }
  .qs--page .qs__top { display: flex; justify-content: space-between; height: 3.25rem; padding-inline: 0; }
  .qs--page .qs__back { order: 1; }
  .qs--page .qs__count { order: 2; }
  .qs--page .qs__body { overflow: visible; padding: 1.75rem 0 0; }
  .qs--page .qs__bar { bottom: 0; margin: 1.5rem 0 0; padding: 1rem 0; background: rgba(247,243,236,.95); }
  .qs--page .qs__aside { display: block; position: static; margin-bottom: 1.75rem; background: none; border: 0; }
  .qs--page .qs__aimg { display: none; }
  .qs--page .qs__atext { position: static; padding: 0; background: none; }
  .qs--page .qs__ah { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
  .qs__alead { margin: .8rem 0 0; max-width: 46ch; font-size: 1rem; line-height: 1.55; color: var(--muted-dark); }
  .qs--page .qs__trust { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; margin: 1rem 0 0; padding: 0; font-size: .875rem; color: var(--ink); border: 0; }
  .qs--page .qs__trust li { display: flex; align-items: center; gap: .45rem; }
  .qs--page .qs__trust svg { flex: none; color: var(--bronze-ink); }
  .qs__noscript { max-width: 60ch; margin: 1rem auto 0; color: var(--muted-dark); }
  .qs__noscript a { color: var(--bronze-ink); font-weight: 600; }
  @media (min-width: 960px) {
    .qs--page .qs__panel { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; width: 100%; height: auto; }
    .qs--page .qs__aside {
      position: sticky; top: 6.5rem; height: min(640px, calc(100vh - 8.5rem)); margin: 0; overflow: hidden;
      background: var(--bone-2); border: 1px solid rgba(10,10,11,.08); border-radius: 20px;
    }
    .qs--page .qs__aimg { display: block; }
    .qs--page .qs__atext { position: absolute; inset: auto 0 0 0; padding: 7rem 2.2rem 2.2rem; background: linear-gradient(180deg, rgba(239,233,223,0) 0%, rgba(239,233,223,.9) 40%, #EFE9DF 62%); }
    .qs--page .qs__ah { font-size: 2.6rem; }
    .qs--page .qs__alead { font-size: .9375rem; }
    .qs--page .qs__trust { display: grid; gap: .5rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(10,10,11,.12); }
    .qs--page .qs__body { padding-top: 2rem; }
  }
  @media (max-width: 640px) {
    .qs.qs--page { padding: 5.75rem var(--gut, 1rem) 2.5rem; place-items: initial; }
    .qs--page .qs__panel { height: auto; border-radius: 0; animation: none; }
    .qs--page .qs__bar { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  }