/* ============================================================
   Aeterna — Soft Gate skin
   Loaded AFTER aeterna-gate.css, which already carries the design
   tokens, the blurred backdrop, the card chrome, the buttons and
   the form fields. Only what the soft gate adds lives here.
   Values are lifted from the design reference and are the source
   of truth.
   ============================================================ */

/* ---- centred header block ---- */
.gate-center{text-align:center}
.gate-logo{height:36px;width:auto;margin:0 auto 22px;display:block}
.gate-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0}
.gate-card--soft h2{margin-top:14px}
.gate-card--soft .lede{margin-left:auto;margin-right:auto;max-width:52ch}

/* ---- the two statements ---- */
.ae-soft-form{margin:0}
.consent-list{display:flex;flex-direction:column;gap:12px;margin:28px 0 22px}
.consent-box{display:flex;gap:13px;align-items:flex-start;padding:16px 17px;border:1px solid var(--line-2);
  border-radius:12px;background:var(--bg);cursor:pointer;transition:.15s;font-size:14px;color:var(--ink-2);
  line-height:1.5;text-align:left}
.consent-box:hover{border-color:var(--primary)}
.consent-box:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.consent-box input{accent-color:var(--primary);width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.consent-box strong{color:var(--ink);font-weight:600}

/* The research-use statement carries the five policy links. They have to read as
   links inside a checkbox label without turning the sentence into a rainbow. */
.consent-box a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.consent-box a:hover{color:var(--primary-2)}

/* ---- the CTA, locked until both boxes are ticked ---- */
.btn-block{width:100%;justify-content:center;padding:16px}
.btn-primary:disabled{background:var(--line-2);color:var(--ink-4);cursor:not-allowed}
.btn-primary:disabled:hover{background:var(--line-2)}

/* ---- exit, disclaimer, terms ---- */
.exit-link{display:block;margin-top:18px;font-size:13.5px;color:var(--ink-3)}
.exit-link:hover{color:var(--ink)}
.gate-ruo.gate-center{margin-top:20px}
.gate-terms{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-4);text-align:center}
.gate-terms a{color:var(--primary)}
.gate-terms a:hover{text-decoration:underline}

/* ---- view toggle (consent / sign in / apply), driven by body.ae-soft-view-*
        aeterna-gate.css already hides #view-register for its own toggle, so
        only the show rule is needed for that one. ---- */
#view-consent,#view-account{display:none}
body.ae-soft-view-consent #view-consent{display:block}
body.ae-soft-view-account #view-account{display:block}
body.ae-soft-view-register #view-register{display:block}

/* the secondary way out of a view, under the primary one */
.gate-alt{margin:10px 0 0;text-align:center;font-size:13px}
.gate-alt a{color:var(--ink-3)}
.gate-alt a:hover{color:var(--ink)}

/* The pill and the logo are centred in this card; aeterna-gate.css left-aligns
   them for the hard gate, so restate rather than fight it there. */
.gate-card--soft .pill{margin-top:0}

/* ---- fit-to-viewport, matching the step-downs in aeterna-gate.css so a 13"
        laptop never has to scroll the card ---- */
@media (max-height:860px){
  .gate-logo{height:32px;margin-bottom:16px}
  .consent-list{margin:20px 0 16px;gap:10px}
  .consent-box{padding:13px 14px;font-size:13.5px}
  .btn-block{padding:14px}
  .exit-link{margin-top:14px}
  .gate-ruo.gate-center{margin-top:14px}
  .gate-terms{margin-top:16px;padding-top:14px}
}
@media (max-height:720px){
  .gate-logo{height:28px;margin-bottom:12px}
  .gate-eyebrow{font-size:10px}
  .consent-list{margin:15px 0 13px;gap:8px}
  .consent-box{padding:11px 12px;font-size:12.5px;line-height:1.45;border-radius:10px}
  .consent-box input{width:16px;height:16px}
  .btn-block{padding:12px}
  .exit-link{margin-top:11px;font-size:12.5px}
  .gate-ruo.gate-center{margin-top:11px}
  .gate-terms{margin-top:12px;padding-top:11px;font-size:11px}
}

@media (max-width:520px){
  .consent-box{padding:14px 14px;font-size:13.5px}
}

/* ---- reCAPTCHA badge ----
   aeterna-gate.css hides the floating badge, which Google permits only where
   the "protected by reCAPTCHA" attribution appears in the flow instead. That
   sentence is gone from this gate, so the badge comes back — one of the two has
   to be visible, and on a card this dense the badge is the quieter of them. */
.ae-soft-gate .grecaptcha-badge{visibility:visible!important}