/* /free-lesson/ chooser — split screen: dark story panel + light step panel. Standalone page
   (no wp_head), so it also carries the theme switch styles it needs. */

.fl-body { min-height: 100vh; }
.fl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; }

.fl-side { position: relative; display: flex; flex-direction: column; padding: 34px clamp(24px, 4vw, 64px) 0; overflow: hidden; }
.fl-logo img { height: 32px; width: auto; filter: brightness(0) invert(1); }
.fl-side__copy { margin: auto 0 0; padding: 60px 0 40px; position: relative; z-index: 1; }
.fl-side .h2-eyebrow { margin-bottom: 18px; }
.fl-side .fl-title { font-size: clamp(40px, 5vw, 84px); line-height: .98; letter-spacing: -.035em; max-width: 11ch; }
.fl-title em { font-style: italic; color: var(--h2-blue); }
.fl-side .fl-side__sub { margin-top: 22px; color: var(--h2-on-night-2); font-size: 16px; max-width: 34ch; }
.fl-photo { margin: 0 0 0 auto; width: min(100%, 520px); aspect-ratio: 4 / 3; border-radius: 26px 26px 0 0; overflow: hidden; }
.fl-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 40%; }

.fl-main { display: flex; flex-direction: column; padding: 30px clamp(24px, 5vw, 80px) 40px; }
.fl-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.fl-back-home { font-size: 14px; font-weight: 600; color: var(--h2-ink-2); }
.fl-back-home:hover { color: var(--h2-ink); }
.fl-card { width: 100%; max-width: 520px; margin: auto; padding: 50px 0; }
.fl-card .fl-step { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--h2-label); margin-bottom: 14px; }
.fl-card .fl-q { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -.025em; color: var(--h2-ink); }
.fl-card .fl-sub { margin: 12px 0 28px; font-size: 16px; line-height: 1.55; color: var(--h2-ink-2); }
.fl-opts { display: flex; flex-direction: column; gap: 12px; }
.fl-opts--age { flex-direction: row; }
.fl-opts--age .gp-choose-btn { flex: 1; }
.fl-body .gp-choose-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 22px; border-radius: 22px; background: var(--h2-card); border: 1px solid var(--h2-line);
  color: var(--h2-ink); box-shadow: var(--gp-shadow-sm, 0 1px 3px rgba(20, 30, 50, .06));
  transition: border-color .25s, transform .3s var(--h2-ease), box-shadow .3s var(--h2-ease);
}
.fl-body .gp-choose-btn:hover { border-color: #2563EB; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(20, 30, 50, .10); }
.fl-body .gp-choose-btn b { display: block; font: 400 clamp(21px, 1.8vw, 26px)/1.2 var(--h2-serif); color: var(--h2-ink); }
.fl-body .gp-choose-btn b + span { display: block; margin-top: 4px; font-size: 14px; color: var(--h2-ink-2); }
.fl-body .gp-choose-arrow { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #2563EB; color: #fff; font-size: 18px; transition: transform .3s var(--h2-ease); }
.fl-body .gp-choose-btn:hover .gp-choose-arrow { transform: translateX(3px); }
.fl-body .gp-c-back { display: block; margin: 18px auto 0; padding: 8px; background: none; border: 0; cursor: pointer; font: 600 14px var(--h2-sans); color: var(--h2-ink-2); }
.fl-body .gp-c-back:hover { color: var(--h2-ink); }
.fl-body .gp-c-quiz { display: block; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--h2-line); text-align: center; font-size: 15px; font-weight: 700; color: var(--h2-label); }
.fl-body .gp-c-quiz:hover { text-decoration: underline; text-underline-offset: 3px; }
.fl-body [hidden] { display: none !important; }

.fl-body .gph-theme-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--h2-card); border: 1px solid var(--h2-line); }
.fl-body .gph-theme-toggle button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--h2-ink-2); cursor: pointer; padding: 0; }
.fl-body .gph-theme-toggle button.is-active { background: var(--h2-paper-2); color: var(--h2-ink); }
.fl-body .gph-theme-toggle svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .fl { grid-template-columns: minmax(0, 1fr); }
  .fl-side { padding-top: 22px; }
  .fl-side__copy { margin: 0; padding: 44px 0 30px; }
  .fl-photo { display: none; }
  .fl-main { padding-top: 22px; }
  .fl-card { padding: 30px 0 20px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .fl-opts--age { flex-direction: column; }
}