.preview-notice { display:flex; gap:15px; align-items:center; background:#fff8e4; border:1px solid #e5d8ad; border-radius:8px; margin-top:24px; padding:12px 18px; font-size:12px; color:#65552e; }
.preview-notice strong { white-space:nowrap; }
.signup-layout { display:grid; grid-template-columns:.8fr 1fr; gap:90px; padding-block:58px 65px; align-items:start; }
.signup-intro { padding-top:30px; }
.signup-intro h1 { font-size:52px; color:var(--navy); font-weight:300; margin-block:18px!important; }
.signup-intro>p:not(.eyebrow) { color:var(--muted); max-width:380px; font-size:18px; }
.signup-trust { margin-top:30px; max-width:400px; padding:22px 24px; border:1px solid #d5e4dc; border-top:3px solid #bd8a34; border-radius:12px; background:#f2f8f5; font-size:14px; line-height:1.55; color:var(--muted); }
.signup-trust p:first-child { font-size:17px; font-weight:650; color:var(--navy); margin-bottom:8px!important; }
.signup-trust a { display:inline-flex; align-items:center; justify-content:space-between; gap:20px; min-height:46px; margin-top:18px; padding:10px 15px; border:1px solid #bad3c6; border-bottom:3px solid #bd8a34; border-radius:9px; background:white; color:var(--navy); font-size:14px; font-weight:650; text-decoration:none; }
.signup-trust a:hover { background:#e8f3ed; }
.signup-card { background:white; border:1px solid var(--line); border-top:4px solid #bd8a34; border-radius:18px; padding:32px; box-shadow:0 18px 45px -35px #173f6b55; min-width:0; }
.signup-progress { display:flex; align-items:center; gap:8px; color:#7d8b8d; font-size:11px; margin-bottom:34px; }
.signup-progress span { display:flex; gap:6px; align-items:center; white-space:nowrap; }
.signup-progress b { font-weight:500; }
.signup-progress i { height:1px; background:var(--line); flex:1; }
.signup-progress .active { color:var(--cll-signal-teal); font-weight:750; }
.signup-progress .active b { font-weight:750; }
.signup-step h2 { font-size:31px; color:var(--navy); font-weight:300; margin:12px 0 16px!important; }
.signup-step h2:focus { outline:none; }
.signup-step>p:not(.eyebrow) { color:var(--muted); font-size:15px; margin-bottom:18px; }
.role-options { display:grid; gap:15px; margin-block:28px; }
.role-options button { display:flex; align-items:center; gap:18px; padding:21px; text-align:left; width:100%; border:1px solid #c5d9d0; border-radius:12px; background:#f5f9f6; color:var(--navy); cursor:pointer; }
.role-options button:hover { background:#e8f3ed; border-color:var(--cll-signal-teal); }
.role-options button>span:last-child { margin-left:auto; color:var(--cll-signal-teal); font-size:23px; }
.role-options strong { display:block; font-size:17px; }
.role-options small { display:block; margin-top:5px; color:var(--muted); font-size:13px; }
.role-symbol { font-size:25px; color:var(--cll-signal-teal); }
.signup-small { color:var(--muted); font-size:12px!important; }
.signup-page label { display:block; font-size:14px; font-weight:650; color:var(--navy); margin-top:19px; margin-bottom:7px; }
.signup-page input,.signup-page select { width:100%; box-sizing:border-box; min-height:48px; border:1px solid #b6cbbf; border-radius:8px; background:#fff; padding:11px 12px; font:inherit; color:var(--ink); }
.signup-page input[readonly] { background:#f2f5f3; color:var(--muted); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.field-help { font-size:12px; color:var(--muted); margin-top:6px!important; }
.signup-actions { display:flex; justify-content:space-between; align-items:center; gap:15px; border-top:1px solid var(--line); margin-top:28px; padding-top:24px; flex-wrap:wrap; }
.signup-actions .button { gap:12px; font-size:14px; padding:13px 17px; cursor:pointer; }
.plain-back { border:0; background:none; color:var(--cll-signal-teal); cursor:pointer; text-align:left; padding:10px 0; font-size:13px!important; font-weight:650!important; }
.plain-back:hover { text-decoration:underline; }
.signup-error { margin-top:17px!important; background:#fff3ed; border-left:3px solid #a44224; padding:12px; color:#84361e!important; font-size:14px; }
.recipient-card { margin-block:22px; padding:17px 20px; background:#edf5ef; border:1px solid #d2e2d8; border-radius:10px; }
.recipient-card span { display:block; font-size:12px; color:var(--muted); }
.recipient-card strong { display:block; margin-top:4px; color:var(--navy); overflow-wrap:anywhere; }
.sample-notice { margin-top:22px; border:1px solid #e9dcae; border-radius:9px; padding:15px; background:#fffbef; font-size:12px; color:#685c3b; }
.sample-notice p { margin-top:6px!important; }
.sample-email { border:1px solid var(--line); border-radius:11px; padding:22px; margin-top:18px; }
.sample-email>p { font-size:14px; margin-bottom:15px!important; color:var(--muted); overflow-wrap:anywhere; }
.sample-email h2 { border-top:1px solid var(--line); padding-top:20px; font-size:25px; }
.sample-email .button { font-size:14px; margin-bottom:18px; cursor:pointer; }
.family-summary { padding:19px; background:#edf5ef; border-radius:10px; margin-block:22px; }
.family-summary h3 { color:var(--navy); font-size:18px; }
.family-summary ul { padding-left:18px; margin:15px 0 0; }
.family-summary li { font-size:13px; margin-block:9px; color:var(--muted); }
.signup-card .founder-letter summary { padding:18px; font-size:16px; }
.signup-card .letter-body { padding:0 18px 18px; }
.completion-symbol { display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:#edf5ef; color:var(--cll-signal-teal); font-size:26px; margin-bottom:20px; }
.signup-footer { display:flex; justify-content:space-between; gap:20px; padding-block:20px 35px; border-top:1px solid var(--line); font-size:13px; color:var(--cll-signal-teal); }
@media(max-width:1000px) { .signup-layout { gap:35px; grid-template-columns:.75fr 1fr; } .signup-intro h1 { font-size:40px; } .signup-card { padding:24px; } .signup-progress { font-size:9px; gap:5px; } }
@media(max-width:700px) { .preview-notice { flex-direction:column; align-items:flex-start; gap:4px; } .signup-layout { grid-template-columns:1fr; padding-top:25px; gap:25px; } .signup-intro { padding-top:0; } .signup-intro h1 { font-size:37px; } .signup-intro h1 br { display:none; } .signup-intro>p:not(.eyebrow) { font-size:15px; } .signup-trust { display:none; } .signup-card { padding:24px 20px; } .signup-progress { font-size:10px; margin-bottom:25px; } .signup-step h2 { font-size:27px; } .role-options button { padding:17px 13px; gap:13px; } .role-options strong { font-size:16px; } .role-options small { font-size:12px; } .signup-actions .button { min-height:47px; } }
@media(max-width:370px) { .signup-card { padding:20px 15px; } .signup-progress { font-size:8px; } .field-row { grid-template-columns:1fr; gap:0; } .signup-actions { align-items:stretch; } .signup-actions .button { width:100%; } }

.welcome-award { margin-block:22px; padding:23px; background:#edf5ef; border:1px solid #bcd8c9; border-top:3px solid #bd8a34; border-radius:12px; }
.welcome-award h3 { color:var(--navy); font-size:23px; line-height:1.3; }
.welcome-award p { color:var(--muted); font-size:15px; margin-top:12px!important; }
.welcome-preview-controls { margin-top:22px; color:var(--muted); font-size:12px; }
.welcome-preview-controls summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* A legible, consistent signup card from the first choice to the welcome. */
.signup-progress { gap:10px; color:var(--muted); }
.signup-progress span { flex:1; gap:8px; }
.signup-progress b { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none; border:1px solid #cbdad1; border-radius:50%; font-size:12px; }
.signup-progress .active b { background:var(--cll-signal-teal); border-color:var(--cll-signal-teal); color:white; font-weight:600; }
.signup-progress i { flex:0 1 18px; }
.role-options button { transition:background .18s,border-color .18s,box-shadow .18s; }
.role-options button:hover { box-shadow:0 5px 18px -12px #173f6b55; }
.role-symbol { display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; background:white; border:1px solid #d6e4db; border-radius:12px; }
.signup-page input:focus-visible,.signup-page select:focus-visible { outline:2px solid var(--cll-signal-teal); outline-offset:2px; border-color:var(--cll-signal-teal); }
.signup-card .founder-letter summary { display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; min-height:56px; color:var(--navy); }
.signup-card .founder-letter summary::-webkit-details-marker { display:none; }
.signup-card .founder-letter summary>span:last-child { transition:transform .18s; }
.signup-card .founder-letter[open] summary>span:last-child { transform:rotate(45deg); }
.signup-actions+.signup-small { margin-top:18px!important; }
.signup-step form+.signup-small { margin-top:18px!important; }
.signup-footer a { display:inline-flex; align-items:center; min-height:44px; }
@media(max-width:1000px) {
  .signup-progress { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); font-size:11px; gap:8px; }
  .signup-progress span { flex-direction:column; text-align:center; white-space:normal; line-height:1.4; }
  .signup-progress i { display:none; }
}
@media(max-width:700px) {
  .signup-trust { display:block; margin-top:22px; padding:19px 20px; }
  .signup-trust a { margin-top:14px; }
  .signup-layout { gap:30px; }
  .signup-intro h1 { font-size:clamp(32px,8.5vw,40px); }
  .signup-progress { font-size:11px; }
  .signup-page input,.signup-page select { font-size:16px; }
  .signup-actions .button { max-width:100%; text-align:center; }
  .sample-email { padding:18px; }
  .welcome-award { padding:19px; }
  .signup-footer { flex-wrap:wrap; gap:4px 20px; }
}
@media(max-width:420px) {
  .field-row { grid-template-columns:1fr; gap:0; }
  .signup-actions { align-items:stretch; }
  .signup-actions .button { width:100%; }
}

.signup-pricing { margin-top:25px; padding-block:5px 18px; border-block:1px solid var(--line); max-width:390px; }
.signup-pricing>p:not(.course-price) { font-size:13px; color:var(--muted); line-height:1.65; }

/* Keep the approved subscription terms available without lengthening signup. */
.subscription-review { margin-top:20px; border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:#f2f7f5; }
.subscription-review summary { cursor:pointer; color:var(--navy); font-weight:600; }
.subscription-review summary:focus-visible { outline:3px solid var(--cll-signal-teal); outline-offset:5px; }
.subscription-review p { margin-top:14px; font-size:14px; line-height:1.6; }
.subscription-review a { color:var(--cll-signal-teal); overflow-wrap:anywhere; }

/* On phones, reach the form directly while keeping family and offer details available. */
.signup-intro .signup-jump { display:none; }
#account-setup { scroll-margin-top:24px; }
@media(max-width:700px) {
  .signup-intro .signup-jump { display:inline-flex; width:100%; min-height:48px; justify-content:center; margin-block:10px 16px; }
}