/* Lead capture pages (/guide/, /guide/thanks/, /quiz/, /links/): one card on one screen, the /apply/ and /refer/
   recipe (refer/refer.css carries the tokens, shell, card, stickers, fields and button). What is added here: the quiz
   progress bar and choices, numbered rows, the link list and the wordmark. No scrolling at phone size. */
@layer components {
  .card--lead .body{ gap:clamp(14px, 2.4svh, 22px) }
  .disclose{ font-size:13px; line-height:1.45; font-weight:var(--w-text); color:var(--ink-64) }
  .disclose a{ color:var(--ink); text-underline-offset:3px }
  .form-msg{ font-size:var(--fs-small); font-weight:var(--w-ui) }
  .form-msg:empty{ display:none }
  .body .btn--block{ width:100% }
  .kicker{ font-size:var(--fs-small); font-weight:var(--w-ui); color:var(--ink-64) }

  /* the quiz */
  .bar{ height:10px; margin:clamp(16px, 2.6svh, 24px) var(--pad) 0; background:var(--ink-08) }
  .bar span{ display:block; height:100%; background:var(--pop-pink); box-shadow:inset 0 0 0 2px var(--ink); transform-origin:0 50%; transform:scaleX(var(--p, 0)); transition:transform .5s var(--ease-expo) }
  .step{ display:grid; gap:clamp(14px, 2.4svh, 22px); align-content:start }
  .step.is-entering{ animation:step-in .45s var(--ease-expo) both }
  @keyframes step-in{ from{ opacity:0; transform:translateX(18px) } to{ opacity:1; transform:none } }
  .step .title:focus{ outline:none }
  .choices{ display:grid; gap:10px }
  .choice{
    display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:52px; padding:10px 16px;
    font-size:16px; font-weight:var(--w-ui); line-height:1.25; text-align:left;
    background:#fff; color:var(--ink); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); touch-action:manipulation;
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  }
  .choice::after{ content:''; flex:none; width:12px; height:12px; border:2px solid currentColor }
  .choice:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--ink) }
  .choice[aria-pressed="true"]{ background:var(--ink); color:#fff }
  .choice[aria-pressed="true"]::after{ background:var(--pop-pink); border-color:#fff }
  .gaps{ display:grid; border-top:1px solid var(--ink-24) }
  .gaps li{ display:grid; grid-template-columns:14px minmax(0, 1fr); gap:14px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--ink-24); font-size:15px; line-height:1.4; font-weight:var(--w-text) }
  .gaps li::before{ content:''; width:10px; height:10px; background:var(--pop-pink); border:2px solid var(--ink); transform:translateY(-1px) }
  .tip{ font-size:var(--fs-small); line-height:1.45; font-weight:var(--w-text); color:var(--ink-64) }
  .tip a{ color:var(--ink) }

  /* numbered rows (the thanks page's three steps) */
  .rows{ display:grid; border-top:1px solid var(--ink-24); counter-reset:row }
  .rows li{
    display:grid; grid-template-columns:40px minmax(0, 1fr); gap:12px; align-items:baseline;
    padding:11px 0; border-bottom:1px solid var(--ink-24); font-size:15px; line-height:1.4; font-weight:var(--w-text); counter-increment:row;
  }
  .rows li::before{ content:counter(row, decimal-leading-zero); font-family:var(--font-display); font-size:20px; letter-spacing:-.04em; line-height:1 }

  /* links: the wordmark, one line, then the ways in */
  .wordmark{ font-family:'Playball', cursive; font-size:clamp(56px, 9vw, 76px); line-height:.9; letter-spacing:-.03em; text-decoration:none; justify-self:center }
  .wordmark span{ font-size:1.06em }
  .links-head{ display:grid; gap:10px; justify-items:center; text-align:center }
  .links-list{ display:grid; gap:10px }
  .links-list .pick__opt{ padding:12px 12px 12px 18px; gap:12px }
  .links-list .pick__q{ font-size:clamp(19px, 2.2vw, 22px) }
  .links-list .pick__opt{ align-items:center }
  .links-list .pick__go{ grid-row:auto; width:40px; height:40px }
  .links-list .pick__opt--ink{ background:var(--ink); color:#fff }
  .links-list .pick__opt--ink .pick__go{ background:#fff; color:var(--ink) }

  @media (hover: hover) and (pointer: fine){
    .choice:not([aria-pressed="true"]):hover{ background:var(--pop-pink); transform:translate(-1px, -1px); box-shadow:5px 5px 0 var(--ink) }
    .links-list .pick__opt--ink:hover{ color:var(--ink) }
  }
  @media (max-height: 740px){
    .card--lead .body{ gap:12px; padding-top:20px; padding-bottom:18px }
    .choice{ min-height:46px }
    .links-list .pick__opt{ padding-top:9px; padding-bottom:9px }
    .wordmark{ font-size:52px }
  }
  @media (max-height: 700px){
    :root{ --gap-top:20px; --gap-bottom:24px }
    .card--lead .body{ gap:10px; padding-top:16px; padding-bottom:14px }
    .card--lead .input{ min-height:46px; padding-top:9px; padding-bottom:9px }
    .card--lead .field{ gap:6px }
    .disclose{ font-size:12px }
    .rows li{ padding:8px 0 }
  }
  @media (prefers-reduced-motion: reduce){
    .step.is-entering{ animation:none }
    .choice, .bar span{ transition:none }
  }
}