/*
Theme Name: TooTii
Author: TooTii
Version: 0.1.0
Description: Light, warm, playful marketing theme for TooTii (redesign, 2026-09-28). Portable to tootii.com/.cn:
  all colors/fonts as CSS variables below, all copy lives in page content/fields, never hardcoded in templates.
Requires at least: 6.7
Requires PHP: 7.2
Text Domain: tootii
*/

:root {
  /* --- New design system (2026-09-28 redesign) --- */
  --bg-cream: #fdfcf9;
  --text-navy: #0d1433;
  --text-secondary: #5F5E5A;
  --border-soft: #D3D1C7;
  --accent-green: #0F6E56;
  --accent-green-soft: #E1F5EE;
  --btn-orange: #e9a03a;
  --btn-text-dark: #412402;
  --btn-orange-soft: #FAEEDA;
  --accent-coral: #e24b4a;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-card: 20px;
  --radius-pill: 999px;

  /* --- Legacy tokens (pre-redesign pages still use these; untouched pages are unaffected) --- */
  --brand: #ff385c;
  --brand-dark: #d91d49;
  --ink: #151a2d;
  --muted: #68708a;
  --line: #e7eaf1;
  --surface: #f6f8fb;
  --white: #ffffff;
  --navy: #11182f;
  --green: #28b96f;
  --amber: #f6b73c;
  --cyan: #2aa8d8;
  --radius: 8px;
  --shadow: 0 18px 46px rgba(17, 24, 47, 0.12);
  --shell: 1140px;
}

/* Self-hosted Nunito (Cyrillic + Latin), variable-weight file per subset, no external font requests. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

* {
  box-sizing: border-box;
}

html {
  margin: 0 !important;
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}

body.funlingua-net {
  margin: 0 !important;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--text-navy);
  background: var(--bg-cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fl-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--paper, #FBF8F3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s ease, visibility .4s ease;
}

.fl-loading-screen.fl-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fl-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.fl-loading-mascot {
  width: 64px;
  height: auto;
  animation: fl-bounce 1.2s ease-in-out infinite;
}

@keyframes fl-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.fl-loading-bar {
  position: relative;
  width: 120px;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.fl-loading-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, transparent 0 35%, var(--teal, #1F8A83) 35% 65%, transparent 65% 100%);
  background-size: 240px 100%;
  border-radius: 2px;
  animation: fl-slide 1.1s ease-in-out infinite;
}

@keyframes fl-slide {
  0% { background-position: 120px 0; }
  100% { background-position: -120px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-loading-mascot,
  .fl-loading-bar-fill {
    animation: none;
  }
}

body.admin-bar .site-header {
  top: 32px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 3px solid rgba(246, 183, 60, 0.8);
  outline-offset: 4px;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

.site-frame {
  width: 100%;
  min-height: 100vh;
  background: var(--white);
}

.shell {
  width: min(calc(100% - 48px), var(--shell));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: -120px;
  left: 16px;
  z-index: 10000;
  padding: 12px 16px;
  color: var(--white);
  background: var(--navy);
  border-radius: var(--radius);
  font-weight: 800;
}

.skip-link:focus {
  top: 16px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(17, 24, 47, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.header-inner {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
}

.brand img {
  width: auto;
  height: 38px;
}

.nav {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.nav a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 750;
}

.nav a:hover {
  color: var(--white);
}

.header-cta,
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.header-cta,
.button-primary {
  color: var(--white);
  background: linear-gradient(120deg, var(--brand), var(--brand-dark));
  box-shadow: 0 16px 34px rgba(255, 56, 92, 0.26);
}

.button-secondary {
  color: var(--ink);
  background: var(--white);
  border-color: var(--line);
}

.button-white {
  color: var(--brand-dark);
  background: var(--white);
}

.header-cta:hover,
.button:hover {
  transform: translateY(-2px);
}

.hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 82% 20%, rgba(42, 168, 216, 0.24), transparent 28%),
    linear-gradient(145deg, #121a33, #1b2443 56%, #080d1d);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(390px, 1.02fr);
  align-items: center;
  gap: 58px;
}

.hero h1,
.subhero h1 {
  margin: 0;
  max-width: 760px;
  font-size: 60px;
  line-height: 1.02;
  letter-spacing: 0;
}

.hero-lead,
.subhero p {
  margin: 22px 0 0;
  max-width: 690px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 20px;
  line-height: 1.6;
}

.actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.trust-row {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.trust-row span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 750;
}

.lesson-preview {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
}

.preview-top,
.preview-steps {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 800;
}

.preview-top strong {
  color: var(--white);
}

.video-panel {
  min-height: 330px;
  margin: 16px 0;
  position: relative;
  display: grid;
  align-items: end;
  padding: 22px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(17, 24, 47, 0.06), rgba(17, 24, 47, 0.9)),
    linear-gradient(135deg, #0d1433, #0d1433);
}

.play-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  transform: translate(-50%, -50%);
}

.play-mark::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 28px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 19px solid var(--brand);
}

.subtitle-card {
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

.subtitle-card small,
.subtitle-card span {
  display: block;
  color: var(--muted);
}

.subtitle-card b {
  display: block;
  margin: 4px 0;
  font-size: 20px;
}

.language-band,
.method-band {
  padding: 78px 0;
  background: var(--surface);
}

.section-head {
  max-width: 680px;
  margin-bottom: 28px;
}

.section-head p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.section-head h2,
.split-section h2,
.locale-method-grid h2,
.final-inner h2,
.audience-grid h2 {
  margin: 0;
  font-size: 40px;
  line-height: 1.14;
  letter-spacing: 0;
}

.language-grid,
.audience-grid,
.page-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.language-card,
.audience-grid article,
.page-card-grid article,
.feature-list article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 34px rgba(17, 24, 47, 0.06);
}

.language-card span,
.page-card-grid article span,
.feature-list span {
  display: inline-flex;
  min-width: 42px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding: 0 10px;
  border-radius: var(--radius);
  color: var(--brand-dark);
  background: #fff0f3;
  font-size: 12px;
  font-weight: 900;
}

.language-card h3,
.audience-grid h2,
.page-card-grid h2,
.feature-list h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.language-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.language-card p,
.audience-grid p,
.page-card-grid p,
.feature-list p,
.locale-method-grid p,
.final-inner p {
  margin: 12px 0 0;
  color: var(--muted);
}

.language-acquisition-grid {
  align-items: stretch;
}

.language-acquisition-card {
  display: flex;
  min-height: 430px;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.language-card-main {
  display: flex;
  min-height: 330px;
  flex: 1;
  flex-direction: column;
}

.language-visual {
  min-height: 166px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 22px;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(17, 24, 47, 0.06), rgba(17, 24, 47, 0.74)),
    linear-gradient(135deg, #0d1433, #0d1433);
}

.tone-blue .language-visual {
  background:
    linear-gradient(180deg, rgba(17, 24, 47, 0.06), rgba(17, 24, 47, 0.74)),
    linear-gradient(135deg, #2aa8d8, #11182f);
}

.tone-green .language-visual {
  background:
    linear-gradient(180deg, rgba(17, 24, 47, 0.06), rgba(17, 24, 47, 0.74)),
    linear-gradient(135deg, #28b96f, #2aa8d8);
}

.language-visual span {
  width: fit-content;
  min-width: 46px;
  min-height: 34px;
  margin: 0 0 26px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
}

.language-visual strong {
  font-size: 24px;
  line-height: 1.12;
}

.language-visual small {
  max-width: 240px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
}

.language-card-copy {
  padding: 24px 24px 18px;
}

.language-card-copy h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
}

.language-card-copy small {
  margin-top: 6px;
}

.language-card-copy p {
  font-size: 16px;
}

.language-goals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 24px 18px;
}

.language-goals span {
  min-width: 0;
  min-height: 30px;
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-size: 12px;
}

.language-card-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.language-card-links a {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-right: 1px solid var(--line);
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.language-card-links a:last-child {
  border-right: 0;
}

.split-section {
  padding: 86px 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 54px;
}

.proof-strip {
  margin-bottom: 86px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 12px 34px rgba(17, 24, 47, 0.06);
}

.proof-strip div {
  min-height: 116px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 20px;
  border-right: 1px solid var(--line);
}

.proof-strip div:last-child {
  border-right: 0;
}

.proof-strip strong {
  font-size: 28px;
  line-height: 1;
}

.proof-strip span {
  color: var(--muted);
  font-weight: 750;
}

.feature-list {
  display: grid;
  gap: 14px;
}

.locale-method-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: 46px;
  align-items: center;
}

.locale-panel {
  display: grid;
  gap: 10px;
}

.locale-panel span {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--white);
  font-weight: 850;
}

.locale-panel .active {
  color: var(--white);
  border-color: transparent;
  background: var(--navy);
}

.audience-grid {
  padding: 86px 0;
}

.audience-grid a {
  display: inline-flex;
  margin-top: 18px;
  color: var(--brand-dark);
  font-weight: 900;
}

.final-cta {
  padding: 74px 0;
  color: var(--white);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}

.final-cta p {
  color: rgba(255, 255, 255, 0.82);
}

.final-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}

.site-footer {
  padding: 32px 0;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.footer-brand {
  margin-right: auto;
}

.footer-brand img {
  height: 29px;
  width: auto;
}

.subhero {
  padding: 92px 0 74px;
  color: var(--white);
  background:
    radial-gradient(circle at 82% 20%, rgba(40, 185, 111, 0.22), transparent 26%),
    linear-gradient(145deg, #121a33, #1b2443 56%, #080d1d);
}

.subhero-inner {
  max-width: 850px;
}

.page-card-grid {
  padding: 74px 0;
}

.detail-section {
  padding: 0 0 78px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.detail-section article {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 34px;
  align-items: start;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.detail-section h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.16;
}

.detail-section p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}

.faq-band {
  padding: 76px 0;
  background: var(--surface);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.faq-grid article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.faq-grid h3 {
  margin: 0;
  font-size: 20px;
}

.faq-grid p {
  margin: 10px 0 0;
  color: var(--muted);
}

.path-section {
  padding: 76px 0;
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.path-grid a {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 34px rgba(17, 24, 47, 0.06);
}

.path-grid h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.16;
}

.path-grid p {
  margin: 16px 0 0;
  color: var(--muted);
}

.method-loop-band {
  padding: 76px 0;
  background: var(--surface);
}

.method-loop {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.method-loop article {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.method-loop span {
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 11px;
  border-radius: var(--radius);
  color: var(--brand-dark);
  background: #fff0f3;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.method-loop h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.16;
}

.method-loop p {
  margin: auto 0 0;
  padding-top: 18px;
  color: var(--muted);
}

.comparison-section {
  padding: 82px 0;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 46px;
  align-items: start;
}

.comparison-copy h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.14;
}

.comparison-copy p:not(.eyebrow) {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.comparison-list {
  display: grid;
  gap: 12px;
}

.comparison-list article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.comparison-list div {
  padding: 18px;
  background: var(--white);
}

.comparison-list span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.comparison-list div:nth-child(2) span {
  color: var(--brand-dark);
}

.comparison-list p {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

.teacher-role-band {
  padding: 76px 0;
  background: var(--surface);
}

.teacher-role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.teacher-role-grid article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.teacher-role-grid h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.18;
}

.teacher-role-grid p {
  margin: 12px 0 0;
  color: var(--muted);
}

.use-case-section,
.language-note-section {
  padding: 82px 0;
}

.use-case-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.use-case-grid article,
.language-note-list article,
.learning-path-grid article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 34px rgba(17, 24, 47, 0.06);
}

.use-case-grid h3,
.language-note-list h3,
.learning-path-grid h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.18;
}

.use-case-grid p,
.language-note-list p,
.learning-path-grid p {
  margin: 12px 0 0;
  color: var(--muted);
}

.language-note-section {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 42px;
  align-items: start;
}

.language-note-copy h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.14;
}

.language-note-copy p:not(.eyebrow) {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.language-note-list {
  display: grid;
  gap: 14px;
}

.learning-path-band {
  padding: 76px 0;
  background: var(--surface);
}

.learning-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.learning-path-grid span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  color: var(--white);
  background: var(--brand);
  font-weight: 900;
}

.demo-section {
  padding: 82px 0;
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
}

.demo-device {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.demo-video {
  min-height: 360px;
  position: relative;
  display: grid;
  align-items: end;
  padding: 22px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(17, 24, 47, 0.04), rgba(17, 24, 47, 0.92)),
    linear-gradient(135deg, #0d1433, #0d1433);
}

.demo-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  transform: translate(-50%, -50%);
}

.demo-play::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 27px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 19px solid var(--brand);
}

.demo-caption {
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
}

.demo-caption small {
  display: block;
  color: var(--muted);
  font-weight: 850;
}

.demo-caption strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
}

.demo-caption p {
  margin: 6px 0 0;
  color: var(--muted);
}

.demo-copy h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.14;
}

.demo-copy p:not(.eyebrow) {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.demo-copy ol {
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
  counter-reset: demo-steps;
}

.demo-copy li {
  position: relative;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
  counter-increment: demo-steps;
}

.demo-copy li::before {
  content: counter(demo-steps);
  position: absolute;
  left: 16px;
  top: 13px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

.tutor-directory,
.testimonial-section {
  padding: 78px 0;
}

.tutor-profile-grid,
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.tutor-profile-grid article,
.testimonial-grid article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 34px rgba(17, 24, 47, 0.06);
}

.tutor-profile-grid span {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--brand-dark);
  background: #fff0f3;
  font-size: 12px;
  font-weight: 900;
}

.tutor-profile-grid h3 {
  margin: 0;
  font-size: 22px;
}

.tutor-profile-grid p {
  margin: 6px 0 14px;
  color: var(--muted);
  font-weight: 850;
}

.tutor-profile-grid strong {
  display: block;
  color: var(--ink);
  line-height: 1.45;
}

.testimonial-grid article {
  display: flex;
  flex-direction: column;
  min-height: 230px;
}

.testimonial-grid article > p {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 750;
}

.testimonial-grid footer {
  margin-top: auto;
  padding-top: 22px;
}

.testimonial-grid strong,
.testimonial-grid span {
  display: block;
}

.testimonial-grid span {
  color: var(--muted);
}

.lesson-flow-band {
  padding: 76px 0;
  background: var(--surface);
}

.lesson-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.lesson-flow-grid article {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.lesson-flow-grid span {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 11px;
  border-radius: var(--radius);
  color: var(--white);
  background: var(--navy);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lesson-flow-grid h3 {
  margin: 0;
  font-size: 24px;
}

.lesson-flow-grid p {
  margin: 10px 0 0;
  color: var(--muted);
}

.intake-section {
  padding: 78px 0;
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  gap: 42px;
  align-items: start;
}

.intake-copy {
  position: sticky;
  top: 106px;
}

.intake-copy h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.14;
}

.intake-copy p:not(.eyebrow) {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.intake-list {
  display: grid;
  gap: 14px;
}

.intake-list article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 34px rgba(17, 24, 47, 0.06);
}

.intake-list h3 {
  margin: 0;
  font-size: 20px;
}

.intake-list p {
  margin: 8px 0 0;
  color: var(--muted);
}

.related-band {
  padding: 42px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.related-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
}


.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.related-links a {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--surface);
  font-size: 14px;
  font-weight: 850;
}

.method-band.compact {
  padding: 64px 0;
}

.legacy-redirect {
  min-height: 620px;
  display: grid;
  align-items: center;
  padding: 86px 0;
  color: var(--white);
  background:
    radial-gradient(circle at 82% 20%, rgba(42, 168, 216, 0.22), transparent 28%),
    linear-gradient(145deg, #121a33, #1b2443 56%, #080d1d);
}

.legacy-redirect-inner {
  max-width: 820px;
}

.legacy-redirect h1 {
  margin: 0;
  font-size: 54px;
  line-height: 1.05;
}

.moved-404 { background: var(--ink); color: #fff; min-height: 68vh; display: flex; align-items: center; padding: 88px 0; }
.moved-404-inner { text-align: center; }
.moved-404-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(31, 138, 131, .18); border: 1px solid rgba(127, 212, 203, .28); margin: 0 auto 22px; position: relative; }
.moved-404-icon::before { content: ""; position: absolute; inset: 17px; border-radius: 50%; border: 2px solid var(--amber); border-left-color: transparent; }
.moved-404 h1 { color: #fff; font-size: clamp(30px, 4vw, 54px); margin: 0 0 16px; }
.moved-404 p { color: rgba(255, 255, 255, .62); font-size: 16px; line-height: 1.7; max-width: 660px; margin: 0 auto 24px; }
.moved-404-link-box { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 18px 20px; margin: 28px auto 20px; max-width: 720px; overflow-wrap: anywhere; }
.moved-404-link-box .link-label { font-family: var(--font-body); font-size: 10px; letter-spacing: .08em; color: rgba(255, 255, 255, .38); margin-bottom: 8px; }
.moved-404-link-box a { color: #7FD4CB; font-family: var(--font-body); font-size: 13px; }
.moved-404-countdown span { color: var(--amber); font-weight: 700; }
.moved-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

.legacy-lead {
  margin: 22px 0 0;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 20px;
}

.legacy-link-box {
  margin: 28px 0 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.09);
}

.legacy-link-box span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.legacy-link-box a {
  display: block;
  margin-top: 6px;
  color: var(--white);
  font-size: 18px;
  font-weight: 850;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.legacy-timer {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 940px) {
  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 14px;
  }

  .hero-grid,
  .split-section,
  .method-grid,
  .final-inner,
  .intake-section,
  .demo-section,
  .language-note-section {
    grid-template-columns: 1fr;
  }

  .intake-copy {
    position: static;
  }

  .hero h1,
  .subhero h1,
  .legacy-redirect h1 {
    font-size: 44px;
  }

  .language-grid,
  .audience-grid,
  .page-card-grid,
  .proof-strip,
  .faq-grid,
  .path-grid,
  .lesson-flow-grid,
  .method-loop,
  .teacher-role-grid,
  .tutor-profile-grid,
  .testimonial-grid,
  .use-case-grid,
  .learning-path-grid {
    grid-template-columns: 1fr;
  }

  .comparison-section,
  .comparison-list article,
  .related-inner {
    grid-template-columns: 1fr;
  }

  .proof-strip div,
  .proof-strip div:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .proof-strip div:last-child {
    border-bottom: 0;
  }

  .detail-section article {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lesson-preview {
    max-width: 620px;
  }
}

@media (max-width: 640px) {
  .shell {
    width: min(calc(100% - 32px), var(--shell));
  }

  .subhero {
    padding: 64px 0 54px;
  }

  .hero h1,
  .subhero h1,
  .legacy-redirect h1 {
    font-size: 36px;
  }

  .hero-lead,
  .subhero p,
  .legacy-lead {
    font-size: 18px;
  }

  .section-head h2,
  .split-section h2,
  .method-grid h2,
  .final-inner h2 {
    font-size: 31px;
  }

  .video-panel {
    min-height: 260px;
  }

  .button,
  .header-cta {
    width: 100%;
  }

  .brand img {
    height: 34px;
  }
}

/* ==========================================================================
   TooTii 2.0 — approved marketing redesign design system
   Scoped under body.fl2 so legacy programmatic SEO pages (learn-english,
   persian-online, etc.) keep working on the old .shell/.button system while
   picking up the refreshed ink/amber/teal palette and Fraunces/JetBrains
   Mono type via the shared CSS custom properties below.
   ========================================================================== */
body.fl2 {
  --ink: #14191F;
  --ink-soft: #2A323C;
  --paper: #FBF8F3;
  --paper-2: #F1EBDF;
  --teal: #1F8A83;
  --teal-dark: #124F4B;
  --teal-light: #E4F2F0;
  --amber: #E08A3E;
  --amber-dark: #B96B27;
  --line: #E1D9C9;
  --muted: #5B6570;
  --shadow: 0 24px 56px -20px rgba(20, 25, 31, .28);
  --shadow-sm: 0 4px 18px -6px rgba(20, 25, 31, .12);
}

.fl2 h1, .fl2 h2, .fl2 h3, .fl2 h4 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.08;
}

.fl2 .wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.fl2 .wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }


.fl2 .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.fl2 .btn-primary { background: var(--btn-orange); color: var(--btn-text-dark); }
.fl2 .btn-primary:hover { background: var(--accent-coral); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(216, 90, 48, .35); }
.fl2 .btn-disabled, .fl2 .btn-disabled:hover { cursor: default; pointer-events: none; transform: none; box-shadow: none; background: var(--amber); }
.fl2 .btn-ghost { border-color: rgba(255, 255, 255, .3); color: #fff; background: transparent; }
.fl2 .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); transform: translateY(-2px); }
.fl2 .btn-ghost-ink { border-color: var(--ink); color: var(--ink); background: transparent; }
.fl2 .btn-ghost-ink:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.fl2 .booking-strip .btn-ghost-ink { color: var(--paper); }
.fl2 .btn-telegram { background: #229ED9; color: #fff; }
.fl2 .btn-telegram:hover { background: #1b8ec4; transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(34, 158, 217, .5); }
.fl2 .btn-telegram svg { width: 16px; height: 16px; fill: currentColor; }

/* ── NAV — dark on the homepage, light on every inner page ── */
.fl2 header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); }
.fl2.is-home header { background: rgba(253, 252, 249, .93); border-bottom: 1px solid var(--border-soft); }
.fl2:not(.is-home) header { background: rgba(253, 252, 249, .93); border-bottom: 1px solid var(--border-soft); }
.fl2 nav.site-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.fl2 .logo img { height: 34px; width: auto; }
.fl2 .nav-links { display: flex; gap: 28px; }
.fl2 .nav-links a { font-size: 13.5px; font-weight: 500; transition: color .15s; }
.fl2.is-home .nav-links a { color: var(--text-secondary); }
.fl2.is-home .nav-links a:hover { color: var(--text-navy); }
.fl2:not(.is-home) .nav-links a { color: var(--muted); }
.fl2:not(.is-home) .nav-links a:hover { color: var(--ink); }
.fl2 .nav-cta { display: flex; align-items: center; gap: 12px; }
.fl2 .nav-cta-persistent { display: none; }
.fl2 .nav-cta-mobile { display: none; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 4px; padding-top: 16px; }
.fl2.is-home .nav-cta-mobile { border-top: 1px solid rgba(255, 255, 255, .08); }
.fl2:not(.is-home) .nav-cta-mobile { border-top: 1px solid var(--line); }
.fl2 .nav-signin { font-size: 13.5px; font-weight: 500; cursor: pointer; }
.fl2.is-home .nav-signin { color: var(--text-secondary); }
.fl2.is-home .nav-signin:hover { color: var(--text-navy); }
.fl2:not(.is-home) .nav-signin { color: var(--muted); }
.fl2:not(.is-home) .nav-signin:hover { color: var(--ink); }
.fl2 .menu-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; }
.fl2.is-home .menu-toggle { color: var(--text-navy); }
.fl2:not(.is-home) .menu-toggle { color: var(--ink); }

/* Cross-domain language switcher (2026-09-18) -- deliberately a single
   compact "RU ▾" toggle, not three inline text links, so it doesn't crowd
   the mobile-persistent CTA row. Lives next to Sign in in both the desktop
   .nav-cta and the mobile hamburger panel's .nav-cta-mobile -- NOT in
   .nav-cta-persistent, which stays exactly as minimal as the existing
   redesign intended (see that block's own comment above). */
.fl2 .lang-switch { position: relative; }
/* 2026-09-28 round 3: the header on the tootii theme is always a light cream bar (never the
   old theme's dark hero-overlay header .is-home used to sit on), so the old white-on-white
   ".is-home" toggle color was invisible. One dark, always-visible style for both states, plus
   a highlighted pill so the current language reads as "selected", not just a plain link. */
.fl2 .lang-switch-toggle { display: flex; align-items: center; gap: 5px; background: var(--accent-green-soft); border: none; border-radius: var(--radius-pill); padding: 6px 12px; font-size: 14px; font-weight: 700; color: var(--accent-green); cursor: pointer; font-family: inherit; }
.fl2 .lang-switch-toggle:hover { background: var(--accent-green); color: #fff; }
.fl2 .lang-switch-caret { transition: transform .15s ease; }
.fl2 .lang-switch.open .lang-switch-caret { transform: rotate(180deg); }
.fl2 .lang-switch-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 6px; min-width: 68px; z-index: 60; }
.fl2 .lang-switch.open .lang-switch-menu { display: block; }
.fl2 .lang-switch-menu a { display: block; padding: 6px 10px; font-size: 14px; color: var(--ink); border-radius: 6px; text-decoration: none; white-space: nowrap; }
.fl2 .lang-switch-menu a:hover { background: var(--surface); }

.fl2 .nav-links.open {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  padding: 20px 32px;
  gap: 16px;
  z-index: 99;
}
.fl2.is-home .nav-links.open { background: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.fl2:not(.is-home) .nav-links.open { background: var(--paper); border-bottom: 1px solid var(--line); }

/* ── HOMEPAGE HERO — cinematic dark photo with UI overlay ── */
.fl2 .hero { background: var(--ink); min-height: 540px; max-height: 68svh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.fl2 .hero::before { content: ""; position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(31, 138, 131, .18) 0%, transparent 70%); top: -100px; left: -100px; pointer-events: none; }
.fl2 .hero::after { content: ""; position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(224, 138, 62, .1) 0%, transparent 70%); bottom: 50px; right: 80px; pointer-events: none; }
.fl2 .hero-body { flex: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0; position: relative; z-index: 1; }
.fl2 .hero-visual { display: block; position: relative; overflow: hidden; background: #070e0d; color: inherit; text-decoration: none; cursor: pointer; }
.fl2 .hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--ink) 100%); }
.fl2 .hero-ui { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; }
.fl2 .hero-badges { display: flex; gap: 8px; }
.fl2 .hbadge { font-family: var(--font-body); font-size: 9.5px; padding: 4px 10px; border-radius: var(--radius-pill); letter-spacing: .04em; font-weight: 600; }
.fl2 .hbadge.teal { background: rgba(31, 138, 131, .85); color: #fff; border: 1px solid rgba(255, 255, 255, .15); }
.fl2 .hbadge.amber { background: rgba(224, 138, 62, .85); color: #fff; }
.fl2 .cartoon-label { position: static; width: fit-content; max-width: 100%; margin: 10px auto 0; background: rgba(10, 15, 12, .75); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-pill); padding: 4px 10px; font-family: var(--font-body); font-size: 9px; color: rgba(255, 255, 255, .6); letter-spacing: .05em; white-space: nowrap; }
.fl2 .hero-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; }
.fl2 .play-ring { position: relative; width: 64px; height: 64px; border-radius: 50%; background: rgba(224, 138, 62, .9); border: 1px solid rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 14px rgba(224, 138, 62, .1), 0 0 0 28px rgba(224, 138, 62, .05); cursor: pointer; transition: transform .2s; }
.fl2 .play-ring:hover { transform: scale(1.08); }
.fl2 .play-ring svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; position: relative; z-index: 1; }
.fl2 .play-ring::before, .fl2 .play-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(224, 138, 62, .7); animation: fl2-play-ripple 2.4s ease-out infinite; }
.fl2 .play-ring::after { animation-delay: 1.2s; }
@keyframes fl2-play-ripple { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.fl2 .hero-sub { background: rgba(10, 15, 12, .88); border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px; padding: 10px 14px; }
.fl2 .hero-sub .tc { color: #7FD4CB; font-family: var(--font-body); font-size: 9px; letter-spacing: .06em; display: block; margin-bottom: 4px; }
.fl2 .sub-phrase { position: relative; height: 16px; overflow: hidden; }
.fl2 .sub-phrase span { position: absolute; left: 0; top: 0; opacity: 0; font-family: var(--font-body); font-size: 11.5px; color: #fff; animation: fl2-morph 6s infinite; }
.fl2 .sub-phrase span:nth-child(1) { animation-delay: 0s; }
.fl2 .sub-phrase span:nth-child(2) { animation-delay: 2s; }
.fl2 .sub-phrase span:nth-child(3) { animation-delay: 4s; }
@keyframes fl2-morph { 0% { opacity: 0; transform: translateY(5px); } 5% { opacity: 1; transform: translateY(0); } 28% { opacity: 1; } 33% { opacity: 0; transform: translateY(-5px); } 100% { opacity: 0; } }
.fl2 .watching-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fl2 .w-avatars { display: flex; }
.fl2 .w-av { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff; font-weight: 700; margin-left: -6px; }
.fl2 .w-av:first-child { margin-left: 0; }
.fl2 .w-text { font-family: var(--font-body); font-size: 9.5px; color: rgba(255, 255, 255, .45); }
.fl2 .w-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: fl2-pulse 1.8s infinite; flex-shrink: 0; }
@keyframes fl2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.fl2 .hero-text { padding: 76px 52px 56px; display: flex; flex-direction: column; justify-content: flex-start; }
.fl2 .hero-text h1 { font-size: clamp(21px, 2.4vw, 36px); color: #fff; margin-bottom: 18px; }
.fl2 .hero-text h1 em { font-style: italic; color: #7FD4CB; font-weight: 300; }
.fl2 .hero-text .lede { font-size: 16px; color: rgba(255, 255, 255, .5); max-width: 420px; margin-bottom: 24px; line-height: 1.7; }
.fl2 .hero-text .lede strong { color: rgba(255, 255, 255, .85); font-weight: 500; }
.fl2 .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.fl2 .proof-row { display: flex; gap: 0; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 20px; }
.fl2 .proof-stat { flex: 1; padding-right: 20px; position: relative; }
.fl2 .proof-stat + .proof-stat { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .08); }
.fl2 .proof-stat .num { font-family: var(--font-body); font-size: 34px; color: #fff; font-style: italic; line-height: 1; display: block; }
.fl2 .proof-stat .lbl { font-family: var(--font-body); font-size: 9.5px; color: rgba(255, 255, 255, .5); letter-spacing: .06em; text-transform: uppercase; margin-top: 5px; display: block; line-height: 1.4; }

.fl2 .fl2-section { padding: 96px 0; }
.fl2 .fl2-section-alt { background: var(--paper-2); }

.fl2 .problem-band { background: var(--paper-2); padding: 72px 0; }
.fl2 .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fl2 .problem-card { border: 1px solid rgba(255, 255, 255, .07); border-radius: 8px; padding: 26px; }
.fl2 .problem-card.wrong { background: var(--ink); }
.fl2 .problem-card.right { background: linear-gradient(rgba(31, 138, 131, .12), rgba(31, 138, 131, .12)), var(--ink); border-color: rgba(31, 138, 131, .35); }
.fl2 .problem-card .pc-label { font-family: var(--font-body); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 7px; }
.fl2 .problem-card.wrong .pc-label { color: rgba(255, 255, 255, .6); }
.fl2 .problem-card.right .pc-label { color: #7FD4CB; }
.fl2 .problem-card h3 { font-size: 18px; margin-bottom: 12px; }
.fl2 .problem-card.wrong h3 { color: rgba(255, 255, 255, .6); }
.fl2 .problem-card.right h3 { color: #fff; }
.fl2 .pc-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.fl2 .pc-list li { font-size: 16px; display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.fl2 .pc-list li .ic { flex-shrink: 0; margin-top: 1px; font-size: 12px; }
.fl2 .problem-card.wrong .pc-list li { color: rgba(255, 255, 255, .6); }
.fl2 .problem-card.right .pc-list li { color: rgba(255, 255, 255, .75); }

.fl2 .method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fl2 .method-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 0; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.fl2 .method-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.fl2 .mc-top { background: var(--ink); padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; }
.fl2 .mc-step { font-family: var(--font-body); font-size: 10.5px; color: #7FD4CB; font-weight: 600; }
.fl2 .mc-label { font-family: var(--font-body); font-size: 10px; color: rgba(255, 255, 255, .6); letter-spacing: .07em; }
.fl2 .mc-body { padding: 22px; }
.fl2 .mc-icon { font-size: 26px; margin-bottom: 12px; }
.fl2 .method-card h3 { font-size: 19px; margin-bottom: 9px; }
.fl2 .method-card p { font-size: 16px; color: var(--muted); line-height: 1.65; }
.fl2 .mc-detail { margin-top: 14px; padding: 10px 12px; background: var(--teal-light); border-radius: 4px; font-family: var(--font-body); font-size: 11px; color: var(--teal-dark); }
.fl2 .method-link { display: inline-block; margin-top: 28px; font-family: var(--font-body); font-size: 12px; color: var(--teal-dark); font-weight: 600; }
.fl2 .method-link:hover { color: var(--amber-dark); }

.fl2 .story-band { background: var(--ink); padding: 0; display: grid; grid-template-columns: 0.9fr 1.1fr; }
.fl2 .story-photo-col { position: relative; overflow: hidden; min-height: 560px; }
.fl2 .story-photo-col img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.75); }
.fl2 .story-photo-col::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, var(--ink) 100%); }
.fl2 .story-text-col { padding: 72px 52px; display: flex; flex-direction: column; justify-content: center; }
.fl2 .story-text-col h2 { font-size: clamp(22px, 2.6vw, 34px); color: #fff; margin-bottom: 18px; }
.fl2 .story-text-col p { font-size: 16px; color: rgba(255, 255, 255, .55); margin-bottom: 12px; line-height: 1.7; }
.fl2 .story-text-col p.highlight { color: rgba(255, 255, 255, .85); font-size: 16px; }
.fl2 .story-more { display: none; }
.fl2 .story-show-btn { background: none; border: none; font-family: var(--font-body); font-size: 11.5px; color: #7FD4CB; cursor: pointer; padding: 6px 0; margin-bottom: 20px; display: block; text-align: left; }
.fl2 .story-show-btn:hover { color: var(--amber); }
.fl2 .story-pull { border-left: 2px solid var(--amber); padding: 14px 18px; margin-top: 8px; }
.fl2 .story-pull q { font-family: var(--font-body); font-style: italic; font-size: 17px; color: #fff; display: block; margin-bottom: 5px; }
.fl2 .story-pull cite { font-style: normal; font-family: var(--font-body); font-size: 10.5px; color: rgba(255, 255, 255, .6); }
.fl2 .story-pull-byline { display: flex; align-items: center; gap: 9px; }
.fl2 .story-pull-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.fl2 .story-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.fl2 .story-chip { font-family: var(--font-body); font-size: 10.5px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); padding: 5px 11px; border-radius: 20px; color: rgba(255, 255, 255, .7); }
.fl2 .story-chip b { color: var(--amber); }

.fl2 .learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px; }
.fl2 .learn-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 28px; transition: transform .2s, border-color .2s; }
.fl2 .learn-card:hover { transform: translateY(-5px); border-color: var(--teal); }
.fl2 .learn-card .lc-icon { font-size: 28px; margin-bottom: 14px; }
.fl2 .learn-card h3 { font-size: 18px; margin-bottom: 8px; }
.fl2 .learn-card p { font-size: 16px; color: var(--muted); margin-bottom: 14px; line-height: 1.6; }
.fl2 .learn-card .lc-price { font-family: var(--font-body); font-size: 11.5px; color: var(--teal-dark); border-top: 1px solid var(--line); padding-top: 12px; }
.fl2 .learn-card .lc-price-note { color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.fl2 .fee-transparency-note { display: flex; align-items: flex-start; gap: 12px; background: var(--paper-2); border: 1px solid var(--line); border-left: 3px solid var(--teal-dark); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; }
.fl2 .fee-transparency-note .ft-icon { color: var(--teal-dark); font-weight: 700; font-size: 14px; margin-top: 1px; flex-shrink: 0; }
.fl2 .fee-transparency-note p { font-size: 16px; color: var(--muted); line-height: 1.6; margin: 0; }
.fl2 .fee-transparency-note p strong { color: var(--ink); }
.fl2 .fee-transparency-note .ft-prices { font-family: var(--font-body); font-size: 12.5px; color: var(--teal-dark); font-weight: 600; letter-spacing: .01em; margin-top: 8px; }
.fl2 .fee-transparency-note .ft-prices-note { color: var(--muted); font-weight: 400; text-transform: uppercase; font-size: 9.5px; letter-spacing: .04em; }
.fl2 .path-selector { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 28px 32px; margin-bottom: 28px; position: relative; overflow: hidden; }
.fl2 .ps-progress { height: 3px; background: var(--line); border-radius: 2px; margin-bottom: 22px; overflow: hidden; }
.fl2 .ps-progress-fill { display: block; height: 100%; width: 33.33%; background: var(--teal); transition: width .3s ease; }
.fl2 .ps-step { display: none; }
.fl2 .ps-step.active { display: block; animation: fl2-ps-fade .25s ease; }
.fl2 .ps-question { font-family: var(--font-body); font-size: 19px; font-weight: 500; color: var(--ink); margin-bottom: 16px; }
.fl2 .ps-qnum { font-family: var(--font-body); font-size: 11px; color: var(--teal-dark); letter-spacing: .06em; margin-right: 8px; }
.fl2 .ps-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fl2 .ps-opt { text-align: left; padding: 14px 16px; border-radius: 6px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-family: var(--font-body); font-size: 13.5px; font-weight: 500; line-height: 1.4; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.fl2 .ps-opt:hover { border-color: var(--teal); background: var(--teal-light); transform: translateY(-2px); }
.fl2 .ps-opt:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.fl2 .ps-result { display: none; }
.fl2 .ps-result.active { display: block; animation: fl2-ps-fade .25s ease; }
.fl2 .ps-result-label { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 6px; }
.fl2 .ps-result h4 { font-size: 22px; margin-bottom: 8px; }
.fl2 .ps-result p { font-size: 16px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; max-width: 480px; }
.fl2 .ps-restart { display: block; margin-top: 12px; background: none; border: none; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0; font-family: var(--font-body); }
.fl2 .ps-restart:hover { color: var(--ink); }
@keyframes fl2-ps-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 780px) {
  .fl2 .ps-options { grid-template-columns: 1fr; }
  .fl2 .path-selector { padding: 22px 20px; }
}

.fl2 .booking-strip { background: var(--ink); border-radius: 8px; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fl2 .booking-strip p { font-size: 16px; color: rgba(255, 255, 255, .6); max-width: 580px; }
.fl2 .booking-strip p strong { color: #fff; }
.fl2 .booking-strip p em { color: #7FD4CB; font-style: normal; }

/* fl-ru-specific: Free Group Trial Workshop section (ported from the old fl-ru theme, no equivalent in fl-net) */
.fl2 .workshop-band { background: var(--teal-dark); color: #fff; padding: 82px 0; }
.fl2 .workshop-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .72fr); gap: 52px; align-items: start; }
.fl2 .workshop-band h2 { margin: 0 0 16px; color: #fff; font-size: clamp(25px, 3vw, 42px); line-height: 1.08; letter-spacing: -.01em; }
.fl2 .workshop-band p { margin: 0 0 22px; color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.75; max-width: 680px; }
.fl2 .workshop-features { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.fl2 .workshop-features li { color: rgba(255, 255, 255, .86); font-size: 14.5px; line-height: 1.5; }
.fl2 .ws-label { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.fl2 .ws-slot { background: #fff; color: var(--ink); border-radius: 8px; padding: 18px; display: grid; gap: 8px; }
.fl2 .ws-slot + .ws-slot { margin-top: 14px; }
.fl2 .ws-date { font-weight: 800; font-size: 15px; line-height: 1.35; }
.fl2 .ws-lang { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.fl2 .ws-spots { color: var(--teal-dark); font-family: var(--font-body); font-size: 11px; font-weight: 700; }
.fl2 .ws-btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; justify-self: start; padding: 0 14px; border-radius: 5px; background: var(--amber); color: #fff; font-weight: 800; font-size: 13px; transition: transform .18s ease, background .18s ease; }
.fl2 .ws-btn:hover { background: var(--amber-dark); transform: translateY(-1px); }
@media (max-width: 780px) {
  .fl2 .workshop-band { padding: 64px 0; }
}

/* fl-ru-specific: compact homepage trial band (schedule cards moved to /trial) */
.fl2 .workshop-band-compact { padding: 56px 0; }
.fl2 .workshop-grid-compact { display: block; max-width: 700px; }
.fl2 .workshop-grid-compact p { max-width: none; }

/* fl-ru-specific: mid-page trial CTA, placed right after the language cards */
.fl2 .mid-page-cta-band { background: var(--teal-dark); color: #fff; padding: 44px 0; text-align: center; }

/* fl-ru homepage redesign (2026-09-07): two-stage model section */
.fl2 .stage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 780px) {
  .fl2 .stage-grid { grid-template-columns: 1fr; }
}

/* fl-ru homepage redesign (2026-09-07): "who it's for" chip row */
.fl2 .who-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fl2 .who-chip { font-family: var(--font-body); font-size: 12.5px; padding: 9px 18px; border-radius: 20px; background: var(--paper-2); color: var(--ink-soft); border: 1px solid var(--line); }

/* fl-ru homepage redesign (2026-09-07): "why live matters" pull statement */
.fl2 .why-live { max-width: 760px; margin: 0 auto; text-align: center; }
.fl2 .why-live p { font-family: var(--font-body); font-size: clamp(19px, 2.1vw, 25px); font-style: italic; color: var(--ink); line-height: 1.55; }
.fl2 .why-live p em { color: var(--teal-dark); font-style: italic; }

/* fl-ru homepage redesign (2026-09-07): pricing (group + 1-on-1) */
.fl2 .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; }
.fl2 .learn-card.lc-cta { background: var(--teal); border-color: var(--teal); display: flex; flex-direction: column; justify-content: center; }
.fl2 .learn-card.lc-cta h3 { color: #fff; }
.fl2 .learn-card.lc-cta p { color: rgba(255, 255, 255, .8); }
.fl2 .learn-card.lc-cta .btn { align-self: flex-start; margin-top: 4px; }
.fl2 .learn-card.lc-cta:hover { border-color: var(--teal); box-shadow: 0 14px 28px -12px rgba(31, 138, 131, .5); }
@media (max-width: 900px) {
  .fl2 .pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 660px; }
  .fl2 .learn-card.lc-cta { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .fl2 .pricing-grid { grid-template-columns: 1fr; }
  .fl2 .learn-card.lc-cta { grid-column: auto; }
}

/* fl-ru-specific: homepage featured-teachers section */
.fl2 .featured-teachers { padding: 72px 0; background: var(--paper-2); }
.fl2 .featured-teachers .section-head { max-width: 700px; margin-bottom: 32px; }
.fl2 .ft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fl2 .ft-card { background: #fff; border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-sm); }
.fl2 .ft-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; background: var(--paper); }
.fl2 .ft-photo-placeholder { width: 84px; height: 84px; border-radius: 50%; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; background: var(--teal-light); color: var(--teal-dark); font-family: var(--font-body); font-size: 11px; text-align: center; }
.fl2 .ft-name { font-family: var(--font-body); font-weight: 600; font-size: 18px; color: var(--ink); }
.fl2 .ft-lang { font-family: var(--font-body); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-dark); margin: 2px 0 4px; }
.fl2 .ft-tagline { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 780px) {
  .fl2 .ft-grid { grid-template-columns: 1fr; }
}

/* fl-ru-specific: /trial page */
.fl2 .trial-hero { background: var(--teal-dark); color: #fff; padding: 72px 0 56px; }
.fl2 .trial-hero h1 { color: #fff; font-size: clamp(28px, 3.6vw, 46px); margin: 0 0 14px; }
.fl2 .trial-hero p { color: rgba(255,255,255,.8); font-size: 16.5px; max-width: 680px; margin: 0; }
.fl2 .trial-section { padding: 64px 0; }
.fl2 .trial-section-alt { background: var(--paper-2); }
.fl2 .trial-section-head { max-width: 700px; margin-bottom: 30px; }
.fl2 .trial-layout { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.75fr); gap: 48px; align-items: start; }
.fl2 .trial-optin-note { display: flex; gap: 10px; align-items: flex-start; background: var(--teal-light); border-radius: 8px; padding: 14px 16px; margin: 18px 0 26px; }
.fl2 .trial-optin-note .icon { flex-shrink: 0; font-size: 18px; }
.fl2 .trial-optin-note p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--teal-dark); }
.fl2 .webinar-cards { display: grid; gap: 16px; }
.fl2 .webinar-card { background: #fff; border-radius: 8px; padding: 18px; box-shadow: var(--shadow-sm); }
.fl2 .webinar-card .wc-lang { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-dark); margin-bottom: 6px; }
.fl2 .webinar-card .wc-schedule { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.fl2 .webinar-card .wc-level { color: var(--muted); font-size: 13.5px; }
.fl2 .trial-form { background: #fff; border-radius: 8px; padding: 22px; box-shadow: var(--shadow-sm); }
.fl2 .trial-form h3 { margin: 0 0 14px; font-size: 18px; }
.fl2 .tf-group { margin-bottom: 14px; }
.fl2 .tf-group label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.fl2 .tf-group input, .fl2 .tf-group select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; font-size: 14px; font-family: var(--font-body); background: #fff; }
.fl2 .tf-note { font-size: 12px; color: var(--muted); margin: 6px 0 16px; }
.fl2 .tf-submit { width: 100%; justify-content: center; border: none; }
.fl2 .trial-1on1-card { background: var(--ink); color: #fff; border-radius: 10px; padding: 40px; text-align: center; }
.fl2 .trial-1on1-card h2 { color: #fff; margin: 0 0 14px; }
.fl2 .trial-1on1-card p { color: rgba(255,255,255,.75); max-width: 560px; margin: 0 auto 22px; }
.fl2 .tf-success { display: none; background: var(--teal-light); color: var(--teal-dark); border-radius: 8px; padding: 14px 16px; font-size: 14px; margin-bottom: 14px; }
@media (max-width: 900px) {
  .fl2 .trial-layout { grid-template-columns: 1fr; }
}

.fl2 .milestone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.fl2 .milestone-copy h2 { font-size: clamp(22px, 2.5vw, 34px); margin-bottom: 14px; }
.fl2 .milestone-copy p { font-size: 16px; color: var(--muted); margin-bottom: 12px; line-height: 1.7; }
.fl2 .milestone-copy a { font-family: var(--font-body); font-size: 12px; color: var(--teal-dark); font-weight: 600; }
.fl2 .ms-card { background: var(--ink); border-radius: 10px; padding: 24px; box-shadow: var(--shadow); }
.fl2 .ms-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.fl2 .ms-logo img { height: 20px; width: auto; filter: brightness(0) invert(1); opacity: .6; }
.fl2 .ms-badge { font-family: var(--font-body); font-size: 9px; background: var(--teal-dark); color: #fff; padding: 3px 8px; border-radius: 20px; letter-spacing: .05em; }
.fl2 .ms-milestone { font-family: var(--font-body); font-style: italic; font-size: 17px; color: #fff; line-height: 1.45; margin-bottom: 18px; }
.fl2 .ms-milestone span { color: #7FD4CB; }
.fl2 .ms-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 14px; }
.fl2 .ms-student { display: flex; align-items: center; gap: 10px; }
.fl2 .ms-av { width: 32px; height: 32px; border-radius: 50%; background: var(--amber); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 14px; color: var(--ink); }
.fl2 .ms-name { font-size: 13px; color: #fff; font-weight: 600; }
.fl2 .ms-meta { font-family: var(--font-body); font-size: 9.5px; color: rgba(255, 255, 255, .6); }
.fl2 .ms-share { display: flex; gap: 6px; }
.fl2 .ms-btn { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-pill); padding: 5px 9px; font-family: var(--font-body); font-size: 9.5px; color: rgba(255, 255, 255, .6); cursor: pointer; }
.fl2 .ms-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Milestone is fabricated example content — kept visually smaller than the real
   proof sections above it. ms-badge ("EXAMPLE MILESTONE") is intentionally left
   at full size/contrast so shrinking the card never makes the label harder to spot. */
.fl2 .milestone-section-compact { padding: 56px 0; }
.fl2 .milestone-grid-compact { grid-template-columns: 1.4fr 1fr; gap: 36px; }
.fl2 .milestone-card-col { max-width: 300px; margin-left: auto; }
.fl2 .ms-card-compact { padding: 16px; border-radius: 8px; }
.fl2 .ms-card-compact .ms-header { margin-bottom: 10px; }
.fl2 .ms-card-compact .ms-milestone { font-size: 13.5px; margin-bottom: 12px; }
.fl2 .ms-card-compact .ms-footer { padding-top: 10px; }
.fl2 .ms-card-compact .ms-av { width: 24px; height: 24px; font-size: 11px; }
.fl2 .ms-card-compact .ms-name { font-size: 12px; }
@media (max-width: 780px) {
  .fl2 .milestone-grid-compact { grid-template-columns: 1fr; }
  .fl2 .milestone-card-col { max-width: 100%; margin-left: 0; }
}

.fl2 .lang-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fl2 .ls-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; transition: transform .2s, border-color .2s; display: flex; flex-direction: column; gap: 5px; }
.fl2 .ls-card:hover { transform: translateY(-4px); border-color: var(--teal); }
.fl2 .ls-flag { font-size: 22px; }
.fl2 .ls-name { font-family: var(--font-body); font-size: 17px; }
.fl2 .ls-hook { font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; }
.fl2 .ls-link { font-family: var(--font-body); font-size: 11px; color: var(--teal-dark); font-weight: 600; margin-top: 4px; }
.fl2 .ls-card:hover .ls-link { color: var(--amber-dark); }
.fl2 .ls-soon { background: var(--paper-2); border-style: dashed; }
.fl2 .ls-soon-tag { font-family: var(--font-body); font-size: 9.5px; color: var(--muted); }

.fl2 .final-cta { background: var(--teal-dark); padding: 96px 0; text-align: center; }
.fl2 .final-cta h2 { font-size: clamp(28px, 3.8vw, 48px); color: #fff; max-width: 680px; margin: 0 auto 10px; }
.fl2 .final-cta p { font-size: 16px; color: rgba(255, 255, 255, .65); margin-bottom: 32px; }
.fl2 .final-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.fl2 .cta-mascot { position: relative; margin-bottom: -12px; }
.fl2 .cta-mascot img { height: 80px; width: auto; margin: 0 auto 20px; opacity: .85; }

/* Closing-CTA direct-contact row — icon + text links (not buttons), sits on
   the dark teal .final-cta band. Shared by fl-net/fl-cn (social-only there). */
.fl2 .cta-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 28px; }
.fl2 .cta-contacts .cc-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .18s; }
.fl2 .cta-contacts .cc-item:hover { color: #fff; }
.fl2 .cta-contacts .cc-ico { width: 17px; height: 17px; flex-shrink: 0; fill: #7FD4CB; }
.fl2 .cta-contacts .cc-item:hover .cc-ico { fill: #fff; }
.fl2 .cta-contacts .cc-k { color: rgba(255, 255, 255, .55); font-family: var(--font-body); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.fl2 .cta-contacts .cc-v { font-weight: 500; }
@media (max-width: 600px) {
  .fl2 .cta-contacts { flex-direction: column; align-items: center; gap: 12px; }
}

.fl2 footer.site-footer-fl2 { background: var(--accent-green-soft); color: var(--text-secondary); padding: 52px 0 96px; }
.fl2 .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 40px; }
.fl2 .footer-logo img { height: 30px; width: auto; margin-bottom: 12px; }
.fl2 .footer-grid > div:first-child p { font-size: 16px; line-height: 1.7; max-width: 280px; }
.fl2 .footer-social { display: flex; gap: 12px; margin-top: 16px; }
.fl2 .footer-social a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--text-secondary); transition: background .15s, color .15s; }
.fl2 .footer-social a:hover { background: var(--btn-orange); color: var(--btn-text-dark); }
.fl2 .footer-col h4 { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-navy); margin-bottom: 13px; font-weight: 700; }
.fl2 .footer-col a { display: block; font-size: 14px; margin-bottom: 9px; color: var(--text-secondary); transition: color .15s; }
.fl2 .footer-col a:hover { color: var(--accent-green); }
.fl2 .domain-tag { font-family: var(--font-body); font-size: 14px; background: #fff; padding: 2px 6px; border-radius: var(--radius-pill); margin-left: 4px; display: inline-block; }
.fl2 .footer-trust-strip { border-top: 1px solid var(--border-soft); padding-top: 20px; margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.fl2 .footer-trust-strip strong { color: var(--text-navy); font-weight: 700; }
.fl2 .footer-trust-strip a { color: var(--text-secondary); text-decoration: underline; }
.fl2 .footer-trust-strip a:hover { color: var(--accent-green); }
.fl2 .footer-trust-strip .fts-sep { color: var(--border-soft); }
.fl2 .footer-brand-note { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 24px; }
.fl2 .footer-legal-note { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px; }
.fl2 .footer-legal-note a { color: var(--text-secondary); text-decoration: underline; }
.fl2 .footer-legal-note a:hover { color: var(--accent-green); }
.fl2 .footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 14px; flex-wrap: wrap; gap: 10px; }
.fl2 .mascot-footer { height: 48px; width: auto; opacity: .55; }

@media (max-width: 960px) {
  .fl2 .nav-links { display: none; }
  .fl2 .menu-toggle { display: block; }
  .fl2 .nav-cta { display: none; }
  .fl2 .nav-cta-mobile { display: flex; }
  .fl2 .nav-cta-persistent { display: flex; margin-left: auto; margin-right: 12px; }
  .fl2 .nav-cta-persistent .btn { padding: 7px 14px; font-size: 12.5px; white-space: nowrap; }
  .fl2 .hero { min-height: 0; max-height: none; }
  .fl2 .hero-body { grid-template-columns: 1fr; min-height: auto; }
  .fl2 .hero-visual { height: 200px; min-height: 0; order: -1; }
  .fl2 .hero-visual::after { background: linear-gradient(0deg, var(--ink) 0%, transparent 60%); }
  .fl2 .hero-text { padding: 28px 24px 40px; }
  .fl2 .story-band { grid-template-columns: 1fr; }
  .fl2 .story-photo-col { min-height: 260px; }
  .fl2 .story-photo-col::after { background: linear-gradient(0deg, var(--ink) 0%, transparent 60%); }
  .fl2 .problem-grid, .fl2 .milestone-grid, .fl2 .workshop-grid { grid-template-columns: 1fr; }
  .fl2 .method-grid, .fl2 .learn-grid { grid-template-columns: 1fr; }
  .fl2 .lang-strip { grid-template-columns: 1fr 1fr; }
  .fl2 .footer-grid { grid-template-columns: 1fr 1fr; }
  .fl2 .fl2-section { padding: 64px 0; }
  .fl2 .problem-band, .fl2 .story-band { padding: 64px 0; }
}
@media (max-width: 600px) {
  .fl2 .proof-row { gap: 0; flex-wrap: wrap; }
  .fl2 .proof-stat { flex: 0 0 50%; padding: 0 8px 16px; }
  .fl2 .footer-grid { grid-template-columns: 1fr; }
}

/* ── nav active state (shared header, all inner pages) ── */
.fl2 .nav-links a.active { border-bottom: 1.5px solid var(--teal); }
.fl2.is-home .nav-links a.active { color: #fff; }
.fl2:not(.is-home) .nav-links a.active { color: var(--teal-dark); }

/* ==========================================================================
   Inner-page components — shared across Method / Languages / Teachers / etc.
   ========================================================================== */
.fl2 .fl2-section-dark { background: var(--ink); color: #fff; }
.fl2 .fl2-section-head { max-width: 600px; margin-bottom: 42px; }
.fl2 .fl2-section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.fl2 .fl2-section-head h2 { font-size: clamp(24px, 2.8vw, 38px); }
.fl2 .fl2-section-head p { color: var(--muted); font-size: 16px; margin-top: 11px; }
.fl2 .fl2-section-dark .fl2-section-head p { color: rgba(255, 255, 255, .55); }
.fl2 .fl2-section-dark .fl2-section-head h2 { color: #fff; }

/* PAGE HERO (inner pages — light nav, dark hero band) */
.fl2 .page-hero { background: var(--ink); padding: 80px 0 0; overflow: hidden; position: relative; }
.fl2 .page-hero-inner { display: grid; grid-template-columns: 1fr 0.9fr; gap: 52px; align-items: end; }
.fl2 .page-hero-text { padding-bottom: 64px; }
.fl2 .page-hero-text h1 { font-size: clamp(32px, 4vw, 54px); color: #fff; margin-bottom: 18px; }
.fl2 .page-hero-text h1 em { font-style: italic; color: #7FD4CB; }
.fl2 .page-hero-text p.lede { font-size: 16.5px; color: rgba(255, 255, 255, .6); max-width: 480px; margin-bottom: 28px; line-height: 1.65; }
.fl2 .btn-ghost-white { border: 1.5px solid rgba(255, 255, 255, .28); color: #fff; background: transparent; display: inline-flex; align-items: center; gap: 7px; padding: 12px 22px; font-family: var(--font-body); font-weight: 600; font-size: 14px; border-radius: var(--radius-pill); cursor: pointer; transition: all .18s; }
.fl2 .btn-ghost-white:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }

/* UI MOCKUP placeholder (hero) */
.fl2 .ui-mockup { background: #0d1a18; border-radius: 10px 10px 0 0; padding: 10px 10px 0; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .5); min-height: 300px; position: relative; overflow: hidden; }
.fl2 .ui-mockup-bar { background: #1a2e2b; border-radius: 6px 6px 0 0; padding: 8px 14px; display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.fl2 .ui-dot { width: 8px; height: 8px; border-radius: 50%; }
.fl2 .ui-mockup-screen { background: #0a1512; border-radius: 0; padding: 0; min-height: 260px; position: relative; display: flex; overflow: hidden; }
.fl2 .ui-video-panel { flex: 0 0 62%; background: #050e0c; position: relative; display: flex; align-items: center; justify-content: center; }
.fl2 .ui-video-inner { width: 90%; height: 160px; background: linear-gradient(135deg, #0d2019, #0a1a30); border-radius: 4px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fl2 .ui-video-inner::before { content: "▶"; font-size: 28px; color: rgba(255, 255, 255, .2); }
.fl2 .ui-video-inner.has-video { width: 100%; height: 100%; border-radius: 0; }
.fl2 .ui-video-inner.has-video::before { display: none; }
.fl2 .ui-demo-video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.fl2 .ui-demo-badge { position: absolute; bottom: 34px; left: 6px; right: 6px; z-index: 2; background: rgba(0, 0, 0, .65); border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--radius-pill); padding: 3px 6px; font-family: var(--font-body); font-size: 7px; letter-spacing: .02em; color: rgba(255, 255, 255, .75); pointer-events: none; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl2 .ui-sub-modes { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; gap: 3px; }
.fl2 .ui-sub-mode { font-family: var(--font-body); font-size: 7px; letter-spacing: .02em; padding: 3px 5px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .6); color: rgba(255, 255, 255, .65); cursor: pointer; line-height: 1.4; }
.fl2 .ui-sub-mode:hover { color: #fff; }
.fl2 .ui-sub-mode.active { background: rgba(31, 138, 131, .85); border-color: rgba(31, 138, 131, .85); color: #fff; }
.fl2 .ui-sub { position: absolute; bottom: 8px; left: 8px; right: 8px; z-index: 2; background: rgba(0, 0, 0, .8); border-radius: var(--radius-pill); padding: 5px 8px; font-family: var(--font-body); font-size: 9px; color: #fff; text-align: center; }
.fl2 .ui-sub span { color: #7FD4CB; }
.fl2 .ui-sub .ui-sub-text { color: #fff; }
.fl2 .ui-script-panel { flex: 1; padding: 12px; overflow: hidden; }
.fl2 .ui-script-title { font-family: var(--font-body); font-size: 8.5px; letter-spacing: .08em; color: rgba(255, 255, 255, .6); margin-bottom: 8px; text-transform: uppercase; }
.fl2 .ui-line { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; padding: 5px 6px; border-radius: var(--radius-pill); cursor: pointer; transition: background .15s; }
.fl2 .ui-line:hover, .fl2 .ui-line.active { background: rgba(31, 138, 131, .15); }
.fl2 .ui-play-btn { width: 16px; height: 16px; border-radius: 50%; background: rgba(31, 138, 131, .6); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 6px; color: #fff; margin-top: 1px; cursor: pointer; }
.fl2 .ui-play-btn:hover { background: rgba(31, 138, 131, .9); }
.fl2 .ui-line-body { flex: 1; min-width: 0; }
.fl2 .ui-line-text { font-size: 9px; color: rgba(255, 255, 255, .7); line-height: 1.4; }
.fl2 .ui-line-trans { font-size: 8px; color: rgba(255, 255, 255, .6); margin-top: 2px; }
.fl2 .ui-recycled-tag { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-family: var(--font-body); font-size: 7px; letter-spacing: .02em; color: var(--amber); background: rgba(224, 138, 62, .15); border: 1px solid rgba(224, 138, 62, .35); border-radius: var(--radius-pill); padding: 2px 5px; }
.fl2 .ui-ab-btn { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; color: rgba(255, 255, 255, .45); margin-top: 1px; cursor: pointer; }
.fl2 .ui-ab-btn:hover { color: rgba(255, 255, 255, .8); }
.fl2 .ui-ab-btn.active { color: #7FD4CB; background: rgba(31, 138, 131, .2); }
.fl2 .ui-shadow-btn { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; color: rgba(255, 255, 255, .45); margin-top: 1px; cursor: pointer; }
.fl2 .ui-shadow-btn:hover { color: rgba(255, 255, 255, .8); }
.fl2 .ui-shadow-btn.recording { color: #fff; background: rgba(224, 74, 74, .85); animation: fl2-pulse 1s infinite; }
.fl2 .ui-shadow-btn.has-recording { color: #7FD4CB; background: rgba(31, 138, 131, .2); }
.fl2 .ui-shadow-btn.disabled { opacity: .3; cursor: default; }
.fl2 .ui-shadow-status { font-family: var(--font-body); font-size: 8px; color: rgba(255, 255, 255, .5); margin-top: 6px; min-height: 11px; }
.fl2 .ui-play-btn:focus-visible, .fl2 .ui-ab-btn:focus-visible, .fl2 .ui-shadow-btn:focus-visible, .fl2 .ui-sub-mode:focus-visible { outline: 1px solid #7FD4CB; outline-offset: 1px; }
.fl2 .ui-tabs { display: flex; gap: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.fl2 .ui-tab { flex: 1; text-align: center; padding: 7px 4px; font-family: var(--font-body); font-size: 8px; color: rgba(255, 255, 255, .6); border-top: 2px solid transparent; cursor: pointer; letter-spacing: .04em; }
.fl2 .ui-tab.active { color: #7FD4CB; border-top-color: #7FD4CB; }
.fl2 .ui-demo-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: rgba(0, 0, 0, .25); border-top: 1px solid rgba(255, 255, 255, .08); flex-wrap: wrap; }
.fl2 .ui-demo-cta-text { font-family: var(--font-body); font-size: 9px; color: rgba(255, 255, 255, .55); letter-spacing: .02em; }
.fl2 .ui-demo-cta-btn { font-family: var(--font-body); font-size: 11px; font-weight: 700; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--amber); color: var(--ink); text-decoration: none; white-space: nowrap; transition: transform .15s, background .15s; }
.fl2 .ui-demo-cta-btn:hover { background: var(--amber-dark); transform: translateY(-1px); }
.fl2 .ui-demo-cta-btn:focus-visible { outline: 1px solid #7FD4CB; outline-offset: 1px; }

@media (max-width: 640px) {
  .fl2 .ui-mockup-screen { flex-direction: column; }
  .fl2 .ui-video-panel { flex: 0 0 220px; }
  .fl2 .ui-script-panel { flex: 1; }
}

/* BRAIN VS DLI comparison */
.fl2 .brain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fl2 .brain-card { border-radius: 8px; padding: 32px; }
.fl2 .brain-card.old { background: #fff; border: 1px solid var(--line); }
.fl2 .brain-card.new { background: var(--teal-dark); color: #fff; }
.fl2 .brain-card h3 { font-size: 20px; margin-bottom: 18px; }
.fl2 .brain-card.new h3 { color: #fff; }
.fl2 .brain-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.fl2 .brain-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; }
.fl2 .brain-list li .icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; margin-top: 1px; }
.fl2 .brain-card.old .icon { background: rgba(224, 138, 62, .15); color: var(--amber-dark); }
.fl2 .brain-card.new .icon { background: rgba(255, 255, 255, .15); color: #7FD4CB; }
.fl2 .brain-card.old li { color: var(--muted); }
.fl2 .brain-card.new li { color: rgba(255, 255, 255, .8); }

/* PILLARS */
.fl2 .pillar { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 80px; }
.fl2 .pillar:last-child { margin-bottom: 0; }
.fl2 .pillar.reverse .pillar-visual { order: -1; }
.fl2 .pillar-num { font-family: var(--font-body); font-size: 80px; font-weight: 700; color: var(--teal-light); line-height: 1; margin-bottom: -10px; display: block; }
.fl2 .pillar h2 { font-size: clamp(24px, 2.8vw, 36px); margin-bottom: 16px; }
.fl2 .pillar p { color: var(--muted); font-size: 16px; margin-bottom: 14px; }
.fl2 .pillar p:last-of-type { margin-bottom: 0; }
.fl2 .pillar-visual { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 28px; box-shadow: var(--shadow); min-height: 240px; display: flex; flex-direction: column; justify-content: center; }
.fl2 .pillar-visual.dark { background: var(--ink); border-color: transparent; }
.fl2 .pillar-corner-icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(224, 138, 62, .15); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; }

/* SHADOWING DEMO */
.fl2 .shadow-demo { display: flex; flex-direction: column; gap: 12px; }
.fl2 .shadow-step { display: flex; align-items: center; gap: 14px; }
.fl2 .shadow-step .ss-num { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--font-body); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fl2 .shadow-step .ss-bar { flex: 1; height: 32px; border-radius: 4px; background: var(--teal-light); position: relative; overflow: hidden; }
.fl2 .shadow-step .ss-bar.native { background: rgba(31, 138, 131, .15); }
.fl2 .shadow-step .ss-bar.student { background: rgba(224, 138, 62, .12); }
.fl2 .shadow-step .ss-wave { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; padding-left: 10px; gap: 3px; }
.fl2 .ss-wave span { display: inline-block; width: 3px; border-radius: 2px; background: var(--teal); animation: fl2-wave 1s ease-in-out infinite; }
.fl2 .shadow-step.student-step .ss-wave span { background: var(--amber); }
.fl2 .ss-wave span:nth-child(1) { height: 60%; animation-delay: 0s; }
.fl2 .ss-wave span:nth-child(2) { height: 90%; animation-delay: .1s; }
.fl2 .ss-wave span:nth-child(3) { height: 50%; animation-delay: .2s; }
.fl2 .ss-wave span:nth-child(4) { height: 80%; animation-delay: .3s; }
.fl2 .ss-wave span:nth-child(5) { height: 40%; animation-delay: .4s; }
.fl2 .ss-wave span:nth-child(6) { height: 70%; animation-delay: .5s; }
.fl2 .ss-wave span:nth-child(7) { height: 55%; animation-delay: .6s; }
.fl2 .ss-wave span:nth-child(8) { height: 85%; animation-delay: .7s; }
@keyframes fl2-wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.5); } }
.fl2 .shadow-step .ss-label { font-family: var(--font-body); font-size: 10px; color: var(--muted); white-space: nowrap; }
.fl2 .shadow-step.student-step .ss-label { color: var(--amber-dark); }
.fl2 .shadow-arrow { text-align: center; font-size: 18px; color: var(--muted); margin: 4px 0; }

/* EBBINGHAUS CURVE */
.fl2 .curve-wrap { position: relative; padding: 20px 0 10px; }
.fl2 .curve-svg { width: 100%; max-width: 340px; }
.fl2 .curve-labels { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.fl2 .curve-label { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.fl2 .curve-label .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fl2 .curve-label .dot.forget { background: #E57373; }
.fl2 .curve-label .dot.dli { background: var(--teal); }
.fl2 .formula-block { background: var(--ink); border-radius: 6px; padding: 14px 18px; margin-top: 16px; }
.fl2 .formula-block .formula-text { font-family: var(--font-body); font-size: 13px; color: #7FD4CB; margin-bottom: 6px; }
.fl2 .formula-block .formula-exp { font-size: 11.5px; color: rgba(255, 255, 255, .6); }

/* ACTIVE LISTENING (group class method) */
.fl2 .active-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fl2 .active-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; padding: 26px; }
.fl2 .active-card h3 { font-size: 18px; color: #fff; margin-bottom: 12px; }
.fl2 .active-card p { font-size: 16px; color: rgba(255, 255, 255, .6); line-height: 1.65; }
.fl2 .group-visual { display: flex; gap: 0; justify-content: center; align-items: flex-end; margin-top: 20px; }
.fl2 .student-bubble { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.fl2 .student-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 16px; color: #fff; font-weight: 600; }
.fl2 .student-avatar.speaking { background: var(--amber); box-shadow: 0 0 0 4px rgba(224, 138, 62, .25); }
.fl2 .student-avatar.listening { background: var(--teal); }
.fl2 .student-role { font-family: var(--font-body); font-size: 8.5px; color: rgba(255, 255, 255, .6); letter-spacing: .05em; }
.fl2 .teacher-center { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.fl2 .teacher-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--teal-dark); border: 2px solid var(--teal); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.fl2 .group-connector { display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.fl2 .group-connector span { width: 28px; height: 1px; background: rgba(255, 255, 255, .15); display: block; }

/* PROOF cards */
.fl2 .proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fl2 .uliana-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.fl2 .proof-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.fl2 .proof-card-video { background: var(--ink); height: 180px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.fl2 .proof-card-video:hover .proof-play { transform: scale(1.08); }
.fl2 .proof-play { width: 52px; height: 52px; border-radius: 50%; background: rgba(224, 138, 62, .85); display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.fl2 .proof-play svg { width: 16px; height: 16px; fill: #fff; margin-left: 2px; }
.fl2 .proof-tag { position: absolute; top: 12px; left: 12px; font-family: var(--font-body); font-size: 9.5px; background: rgba(31, 138, 131, .85); color: #fff; padding: 3px 8px; border-radius: var(--radius-pill); }
.fl2 .proof-card-body { padding: 20px; }
.fl2 .proof-card-body h3 { font-size: 17px; margin-bottom: 8px; }
.fl2 .proof-card-body p { font-size: 16px; color: var(--muted); margin-bottom: 12px; }
.fl2 .proof-card-body .proof-meta { font-family: var(--font-body); font-size: 11px; color: var(--teal-dark); }

/* LEARNING PATH timeline */
.fl2 .path-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin-top: 8px; }
.fl2 .path-steps::before { content: ""; position: absolute; top: 28px; left: 10%; right: 10%; height: 1px; background: var(--line); }
.fl2 .path-step { text-align: center; padding-top: 0; position: relative; }
.fl2 .path-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--teal); border: 3px solid var(--paper-2); margin: 20px auto 14px; position: relative; z-index: 1; }
.fl2 .path-step.milestone .path-dot { background: var(--amber); width: 20px; height: 20px; }
.fl2 .path-month { font-family: var(--font-body); font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.fl2 .path-label { font-family: var(--font-body); font-size: 15px; margin-bottom: 6px; }
.fl2 .path-desc { font-size: 12.5px; color: var(--muted); padding: 0 8px; }

/* Progress timeline — 5th "finish line" endpoint. Deliberately NOT a 5th
   .path-step (keeps the shared 4-col .path-steps grid, also used on
   page-method.php, untouched): it's a separate bordered callout below the
   stepper, so it reads as an arrival, not another tick. */
.fl2 .path-finish { display: flex; gap: 16px; align-items: flex-start; max-width: 600px; margin: 30px auto 0; padding: 22px 24px; border: 1px solid var(--teal); border-radius: 14px; background: var(--teal-light); }
.fl2 .path-finish-flag { font-size: 26px; line-height: 1; flex-shrink: 0; }
.fl2 .path-finish-when { font-family: var(--font-body); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 6px; }
.fl2 .path-finish-lead { font-family: var(--font-body); font-size: 17px; color: var(--ink); line-height: 1.45; margin: 0 0 10px; }
.fl2 .path-finish-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.fl2 .path-finish-list li { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* Contrast statement under the timeline — quiet, non-marketing register. */
.fl2 .belief-contrast { max-width: 600px; margin: 26px auto 0; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; }
.fl2 .belief-contrast p { font-size: 15.5px; color: var(--muted); line-height: 1.75; margin: 0; }
.fl2 .belief-contrast p span { color: var(--ink); font-weight: 500; }

/* FAQ accordion */
.fl2 .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 760px; margin: 0 auto; }
.fl2 .home-faq .faq-list { margin: 0; }
.fl2 .faq-item { border-bottom: 1px solid var(--line); }
.fl2 .faq-item:first-child { border-top: 1px solid var(--line); }
.fl2 .faq-q { width: 100%; background: none; border: none; padding: 20px 0; text-align: left; font-family: var(--font-body); font-size: 17px; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.fl2 .faq-q:hover { color: var(--teal-dark); }
.fl2 .faq-icon { font-size: 20px; color: var(--muted); transition: transform .25s; flex-shrink: 0; font-family: var(--font-body); }
.fl2 .faq-a { display: none; padding: 0 0 20px; font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 640px; }
.fl2 .faq-item.open .faq-a { display: block; }
.fl2 .faq-item.open .faq-icon { transform: rotate(45deg); color: var(--teal); }

/* FINAL CTA (inner pages) */
.fl2 .page-cta { background: var(--accent-green-soft); color: var(--text-navy); text-align: center; padding: 64px 0; }
.fl2 .page-cta h2 { font-family: var(--font-body); font-size: clamp(26px, 3.3vw, 40px); max-width: 600px; margin: 0 auto 10px; color: var(--text-navy); }
.fl2 .page-cta p { color: var(--text-secondary); font-size: 16px; margin-bottom: 28px; }
.fl2 .page-cta-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 960px) {
  .fl2 .page-hero-inner, .fl2 .brain-grid, .fl2 .pillar, .fl2 .active-grid, .fl2 .proof-grid { grid-template-columns: 1fr; }
  .fl2 .uliana-grid { grid-template-columns: 1fr; gap: 28px; }
  .fl2 .uliana-grid .uliana-video { order: -1; }
  .fl2 .pillar.reverse .pillar-visual { order: 0; }
  .fl2 .path-steps { grid-template-columns: 1fr 1fr; gap: 20px; }
  .fl2 .path-steps::before { display: none; }
}
@media (max-width: 600px) {
  .fl2 .path-steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Languages page
   ========================================================================== */
body.fl2 {
  --en: #2563EB; --en-light: #EFF6FF;
  --en-kids: #F59E0B; --en-kids-light: #FFFBEB;
  --tr: #C42020; --tr-light: #FEF2F2;
  --fa: #7C3AED; --fa-light: #F5F3FF;
}

.fl2 .page-hero.page-hero-simple { background: var(--bg-cream); }
.fl2 .page-hero-simple { padding: 72px 0 64px; text-align: center; }
.fl2 .page-hero-simple h1 { font-family: var(--font-body); color: var(--text-navy); }
.fl2 .page-hero-simple h1 em { font-style: italic; color: var(--accent-green); }
.fl2 .page-hero-simple p { font-size: 16.5px; color: var(--text-secondary); max-width: 560px; margin: 0 auto 36px; }
.fl2 .lang-jump { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fl2 .lang-jump a { font-family: var(--font-body); font-size: 12px; padding: 8px 18px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .7); transition: all .18s; display: flex; align-items: center; gap: 7px; }
.fl2 .lang-jump a:hover { border-color: rgba(255, 255, 255, .5); color: #fff; background: rgba(255, 255, 255, .06); }
.fl2 .lang-jump a .flag { font-size: 16px; }
.fl2 .languages-hero-image { margin: 32px auto 0; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .75); }
.fl2 .languages-hero-image img { aspect-ratio: 16 / 7; object-fit: cover; }

.fl2 .shared-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fl2 .shared-card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 24px; }
.fl2 .shared-card .sc-icon { font-size: 24px; margin-bottom: 12px; }
.fl2 .shared-card h3 { font-size: 17px; margin-bottom: 8px; }
.fl2 .shared-card p { font-size: 16px; color: var(--muted); }

.fl2 .lang-block { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.fl2 .lang-block.reverse .lang-visual { order: -1; }
.fl2 .lang-flag-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fl2 .lang-flag { font-size: 36px; line-height: 1; }
.fl2 .lang-tag { font-family: var(--font-body); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; font-weight: 600; }
.fl2 .lang-block h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 16px; }
.fl2 .lang-block .lang-hook { font-size: 16.5px; color: var(--ink-soft); margin-bottom: 20px; line-height: 1.65; }
.fl2 .lang-block .lang-hook strong { color: var(--ink); font-weight: 600; }
.fl2 .lang-insight { border-left: 3px solid var(--amber); padding: 14px 18px; background: rgba(224, 138, 62, .06); border-radius: 0 6px 6px 0; margin-bottom: 22px; }
.fl2 .lang-insight p { font-size: 16px; color: var(--ink-soft); line-height: 1.65; }
.fl2 .lang-insight p strong { color: var(--ink); }
.fl2 .lang-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.fl2 .lang-pill { font-family: var(--font-body); font-size: 11px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line); color: var(--ink-soft); }
.fl2 .lang-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

.fl2 .lang-visual { position: relative; }
.fl2 .lang-card { border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); background: #fff; border: 1px solid var(--line); }
.fl2 .lang-card-img { height: 240px; background: var(--paper-2); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.fl2 .lang-card-img .img-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-family: var(--font-body); font-size: 10.5px; text-align: center; }
.fl2 .lang-card-img img { width: 100%; height: 100%; object-fit: cover; }
.fl2 .lang-card-body { padding: 20px 22px; }
.fl2 .sample-scene { font-family: var(--font-body); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.fl2 .sample-lines { display: flex; flex-direction: column; gap: 8px; }
.fl2 .sample-line { display: flex; gap: 10px; align-items: flex-start; }
.fl2 .sample-line .speaker { font-family: var(--font-body); font-size: 10px; color: var(--teal-dark); font-weight: 600; flex-shrink: 0; margin-top: 2px; }
.fl2 .sample-line .text { font-size: 13.5px; color: var(--ink-soft); }
.fl2 .sample-line .trans { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.fl2 .drill-strip { margin-top: 14px; padding: 10px 12px; background: var(--ink); border-radius: 4px; display: flex; align-items: center; gap: 10px; }
.fl2 .drill-strip .drill-icon { font-size: 14px; }
.fl2 .drill-strip span { font-family: var(--font-body); font-size: 10px; color: rgba(255, 255, 255, .55); flex: 1; }
.fl2 .drill-strip .drill-badge { font-family: var(--font-body); font-size: 9px; background: var(--teal-dark); color: #fff; padding: 3px 8px; border-radius: 20px; }

.fl2 .levels-row { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.fl2 .level-badge { font-family: var(--font-body); font-size: 11px; padding: 5px 11px; border-radius: var(--radius-pill); font-weight: 600; }
.fl2 .level-badge.a1 { background: #DCFCE7; color: #166534; }
.fl2 .level-badge.a2 { background: #FEF9C3; color: #854D0E; }
.fl2 .level-badge.b1 { background: #DBEAFE; color: #1E40AF; }
.fl2 .level-badge.soon { background: var(--paper-2); color: var(--muted); border: 1px solid var(--line); }

.fl2 .kids-band { background: var(--en-kids-light); border: 1px solid rgba(245, 158, 11, .2); border-radius: 10px; padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 48px; }
.fl2 .kids-band h3 { font-size: clamp(20px, 2.5vw, 28px); margin-bottom: 12px; }
.fl2 .kids-band .lang-hook { font-size: 16px; color: var(--ink-soft); }
.fl2 .kids-hook-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--en-kids); color: var(--ink); font-family: var(--font-body); font-size: 10px; padding: 4px 10px; border-radius: 20px; margin-bottom: 14px; font-weight: 600; }
.fl2 .kids-cartoons { display: flex; flex-direction: column; gap: 10px; }
.fl2 .cartoon-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border-radius: 6px; border: 1px solid rgba(245, 158, 11, .15); }
.fl2 .cartoon-row .c-icon { font-size: 22px; flex-shrink: 0; }
.fl2 .cartoon-row .c-text { font-size: 13.5px; color: var(--ink-soft); }
.fl2 .cartoon-row .c-sub { font-family: var(--font-body); font-size: 10px; color: var(--muted); margin-top: 2px; }

.fl2 .coming-grid { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.fl2 .coming-card { border: 1px dashed var(--line); border-radius: 6px; padding: 18px 26px; display: flex; align-items: center; gap: 12px; background: transparent; transition: border-color .2s; }
.fl2 .coming-card:hover { border-color: var(--teal); }
.fl2 .coming-card .c-flag { font-size: 28px; }
.fl2 .coming-card .c-lang { font-family: var(--font-body); font-size: 17px; }
.fl2 .coming-card .c-tag { font-family: var(--font-body); font-size: 10px; color: var(--muted); margin-top: 2px; }
.fl2 .notify-form { display: flex; gap: 8px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.fl2 .notify-form input { padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 14px; background: #fff; width: 340px; max-width: 100%; font-family: var(--font-body); }
.fl2 .notify-form input:focus { outline: none; border-color: var(--teal); }

@media (max-width: 960px) {
  .fl2 .lang-block, .fl2 .kids-band { grid-template-columns: 1fr; }
  .fl2 .lang-block.reverse .lang-visual { order: 0; }
  .fl2 .shared-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .fl2 .languages-hero-image img { aspect-ratio: 4 / 3; object-position: center; }
  .fl2 .shared-grid { grid-template-columns: 1fr; }
  .fl2 .kids-band { padding: 24px; }
}

/* ==========================================================================
   Teachers page
   ========================================================================== */
.fl2 .page-hero-teachers { padding: 64px 0 0; overflow: hidden; }
.fl2 .page-hero-teachers .page-hero-inner { grid-template-columns: 1fr 1fr; gap: 48px; }
.fl2 .page-hero-teachers .page-hero-text { padding-bottom: 48px; }
.fl2 .page-hero-teachers .page-hero-text h1 { font-size: clamp(28px, 3.5vw, 46px); margin-bottom: 14px; }
.fl2 .page-hero-teachers .page-hero-text p { font-size: 16px; color: rgba(255, 255, 255, .55); max-width: 440px; line-height: 1.65; }

.fl2 .trust-row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 28px; }
.fl2 .trust-item { display: flex; align-items: center; gap: 9px; }
.fl2 .trust-icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .07); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.fl2 .trust-item span { font-family: var(--font-body); font-size: 11px; color: rgba(255, 255, 255, .55); line-height: 1.4; }
.fl2 .trust-item b { color: rgba(255, 255, 255, .9); font-family: var(--font-body); }

.fl2 .hero-stats { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px 10px 0 0; padding: 28px; display: flex; gap: 0; align-self: end; }
.fl2 .stat-item { flex: 1; text-align: center; padding: 8px 0; }
.fl2 .stat-item + .stat-item { border-left: 1px solid rgba(255, 255, 255, .08); }
.fl2 .stat-num { font-family: var(--font-body); font-size: 36px; color: #fff; font-style: italic; display: block; line-height: 1; }
.fl2 .stat-lbl { font-family: var(--font-body); font-size: 9.5px; color: rgba(255, 255, 255, .6); letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; display: block; }

.fl2 .filter-bar { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 62px; z-index: 90; }
.fl2 .filter-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; flex-wrap: wrap; }
.fl2 .lang-tabs { display: flex; gap: 4px; }
.fl2 .lang-tab { font-family: var(--font-body); font-size: 12px; padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--muted); cursor: pointer; background: #fff; transition: all .18s; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.fl2 .lang-tab:hover { border-color: var(--teal); color: var(--teal-dark); }
.fl2 .lang-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.fl2 .lang-tab .flag { font-size: 14px; }
.fl2 .type-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.fl2 .type-pill { font-family: var(--font-body); font-size: 11px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); cursor: pointer; background: #fff; transition: all .15s; }
.fl2 .type-pill:hover { border-color: var(--teal); color: var(--teal-dark); }
.fl2 .type-pill.active { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); font-weight: 600; }
.fl2 .filter-count { font-family: var(--font-body); font-size: 11px; color: var(--muted); white-space: nowrap; }

.fl2 .teachers-section { padding: 48px 0 88px; }
.fl2 .teachers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.fl2 .teacher-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.fl2 .teacher-card:hover { transform: translateY(-5px); box-shadow: 0 4px 24px -8px rgba(20, 25, 31, .12); }
.fl2 .tc-top { position: relative; height: 200px; background: var(--paper-2); overflow: hidden; }
.fl2 .tc-top img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.fl2 .tc-photo-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.fl2 .tc-avatar { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 28px; font-weight: 600; color: #fff; }
.fl2 .tc-name-init { font-family: var(--font-body); font-size: 10px; color: var(--muted); }
.fl2 .tc-dli { position: absolute; top: 12px; left: 12px; background: var(--teal-dark); color: #fff; font-family: var(--font-body); font-size: 9px; padding: 3px 8px; border-radius: var(--radius-pill); letter-spacing: .04em; font-weight: 600; }
.fl2 .tc-body { padding: 18px 18px 0; flex: 1; }
.fl2 .tc-name { font-family: var(--font-body); font-size: 18px; margin-bottom: 2px; }
.fl2 .tc-tagline { font-size: 13px; color: var(--muted); margin-bottom: 12px; font-style: italic; }
.fl2 .tc-langs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.fl2 .tc-lang-badge { font-family: var(--font-body); font-size: 10px; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--line); color: var(--ink-soft); display: flex; align-items: center; gap: 4px; }
.fl2 .tc-types { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.fl2 .tc-type { font-family: var(--font-body); font-size: 9.5px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--teal-light); color: var(--teal-dark); }
.fl2 .tc-type.group { background: var(--paper-2); color: var(--ink-soft); }
.fl2 .tc-quote { font-size: 13px; color: var(--ink-soft); font-style: italic; line-height: 1.55; border-left: 2px solid var(--line); padding-left: 10px; margin-bottom: 14px; }
.fl2 .tc-footer { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fl2 .tc-price { display: flex; flex-direction: column; }
.fl2 .tc-price .from { font-family: var(--font-body); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fl2 .tc-price .amount { font-family: var(--font-body); font-size: 20px; color: var(--ink); }
.fl2 .tc-price .per { font-size: 11px; color: var(--muted); }
.fl2 .tc-btns { display: flex; gap: 7px; }
.fl2 .tc-btns .btn { padding: 8px 13px; font-size: 12.5px; }
.fl2 .btn-ghost-card { border-color: var(--line); color: var(--ink-soft); background: #fff; }
.fl2 .btn-ghost-card:hover { border-color: var(--teal); color: var(--teal-dark); }

.fl2 .teacher-card[data-hidden="true"] { display: none !important; }

.fl2 .become-nudge { background: var(--ink); border-radius: 8px; padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 48px; }
.fl2 .become-nudge p { font-size: 16px; color: rgba(255, 255, 255, .65); max-width: 520px; }
.fl2 .become-nudge p strong { color: #fff; }
.fl2 .become-nudge p em { color: var(--amber); font-style: normal; }

@media (max-width: 960px) {
  .fl2 .page-hero-teachers .page-hero-inner { grid-template-columns: 1fr; }
  .fl2 .hero-stats { display: none; }
  .fl2 .teachers-grid { grid-template-columns: 1fr 1fr; }
  .fl2 .filter-inner { gap: 10px; }
}
@media (max-width: 640px) {
  .fl2 .teachers-grid { grid-template-columns: 1fr; }
  .fl2 .lang-tabs { flex-wrap: wrap; }
}

/* ==========================================================================
   Become a Teacher page
   ========================================================================== */
.fl2 .page-hero-recruit { padding: 80px 0 72px; text-align: center; }
.fl2 .page-hero-recruit h1 { font-size: clamp(30px, 4vw, 52px); color: #fff; margin-bottom: 16px; max-width: 720px; margin-left: auto; margin-right: auto; }
.fl2 .page-hero-recruit h1 em { font-style: italic; color: #7FD4CB; }
.fl2 .page-hero-recruit p.lede { font-size: 16px; color: rgba(255, 255, 255, .55); max-width: 540px; margin: 0 auto 32px; line-height: 1.65; }
.fl2 .commission-box { display: inline-flex; align-items: center; gap: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 18px 28px; flex-wrap: wrap; justify-content: center; }
.fl2 .commission-item { text-align: center; }
.fl2 .commission-item .big { font-family: var(--font-body); font-size: 38px; color: var(--amber); font-style: italic; line-height: 1; }
.fl2 .commission-item .lbl { font-family: var(--font-body); font-size: 9.5px; color: rgba(255, 255, 255, .6); letter-spacing: .07em; text-transform: uppercase; margin-top: 5px; }
.fl2 .commission-divider { width: 1px; height: 50px; background: rgba(255, 255, 255, .1); }
.fl2 .commission-note { font-size: 13px; color: rgba(255, 255, 255, .5); max-width: 280px; text-align: left; line-height: 1.55; }
.fl2 .commission-note strong { color: rgba(255, 255, 255, .9); }

.fl2 .vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fl2 .vs-card { border-radius: 8px; padding: 28px; }
.fl2 .vs-card.them { background: #fff; border: 1px solid var(--line); }
.fl2 .vs-card.us { background: var(--teal-dark); color: #fff; }
.fl2 .vs-card h3 { font-size: 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.fl2 .vs-card.them h3 { color: var(--muted); }
.fl2 .vs-card.us h3 { color: #fff; }
.fl2 .vs-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fl2 .vs-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; }
.fl2 .vs-list .icon { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; margin-top: 2px; }
.fl2 .vs-card.them .icon { background: rgba(224, 138, 62, .12); color: var(--amber-dark); }
.fl2 .vs-card.them li { color: var(--muted); }
.fl2 .vs-card.us .icon { background: rgba(255, 255, 255, .15); color: #7FD4CB; }
.fl2 .vs-card.us li { color: rgba(255, 255, 255, .8); }

.fl2 .calc-wrap { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 36px; box-shadow: var(--shadow); }
.fl2 .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.fl2 .calc-inputs { display: flex; flex-direction: column; gap: 20px; }
.fl2 .calc-field label { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }
.fl2 .calc-field input[type=range] { width: 100%; accent-color: var(--teal); cursor: pointer; }
.fl2 .calc-field .val { font-family: var(--font-body); font-size: 22px; color: var(--ink); margin-top: 4px; }
.fl2 .calc-result { background: var(--ink); border-radius: 8px; padding: 28px; }
.fl2 .calc-result .cr-label { font-family: var(--font-body); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 6px; }
.fl2 .calc-result .cr-amount { font-family: var(--font-body); font-size: 44px; color: var(--amber); font-style: italic; line-height: 1; margin-bottom: 4px; }
.fl2 .calc-result .cr-sub { font-size: 12.5px; color: rgba(255, 255, 255, .6); margin-bottom: 20px; }
.fl2 .calc-breakdown { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 16px; }
.fl2 .cb-row { display: flex; justify-content: space-between; font-size: 12.5px; }
.fl2 .cb-row .cb-label { color: rgba(255, 255, 255, .6); }
.fl2 .cb-row .cb-val { font-family: var(--font-body); color: rgba(255, 255, 255, .7); }
.fl2 .cb-row.total .cb-label { color: #fff; font-weight: 600; }
.fl2 .cb-row.total .cb-val { color: var(--amber); font-weight: 600; }

.fl2 .cert-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.fl2 .cert-steps::before { content: ""; position: absolute; top: 28px; left: 12%; right: 12%; height: 1px; background: var(--line); z-index: 0; }
.fl2 .cert-step { text-align: center; position: relative; z-index: 1; }
.fl2 .cert-num { width: 18px; height: 18px; border-radius: 50%; background: var(--teal); border: 2px solid var(--paper-2); margin: 20px auto 14px; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 9px; color: #fff; font-weight: 600; }
.fl2 .cert-step.highlight .cert-num { width: 22px; height: 22px; background: var(--amber); border-color: var(--paper-2); }
.fl2 .cert-icon { font-size: 22px; display: block; margin-bottom: 6px; }
.fl2 .cert-title { font-family: var(--font-body); font-size: 15px; margin-bottom: 6px; }
.fl2 .cert-desc { font-size: 12.5px; color: var(--muted); padding: 0 8px; line-height: 1.5; }
.fl2 .cert-price-tag { display: inline-block; background: var(--amber); color: #fff; font-family: var(--font-body); font-size: 11px; padding: 4px 10px; border-radius: var(--radius-pill); margin-top: 8px; font-weight: 600; }

.fl2 .loyalty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.fl2 .loyalty-copy h2 { font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 14px; }
.fl2 .loyalty-copy p { color: var(--muted); font-size: 16px; margin-bottom: 14px; }
.fl2 .fl2-section-dark .loyalty-copy p { color: rgba(255, 255, 255, .55); }
.fl2 .loyalty-benefits { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.fl2 .loyalty-benefit { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; }
.fl2 .lb-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.fl2 .lb-text h4 { font-size: 14px; color: #fff; margin-bottom: 3px; }
.fl2 .lb-text p { font-size: 16px; color: rgba(255, 255, 255, .5); line-height: 1.5; }
.fl2 .loyalty-timeline { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; padding: 24px; }
.fl2 .lt-title { font-family: var(--font-body); font-size: 10px; color: rgba(255, 255, 255, .6); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 16px; }
.fl2 .lt-step { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; position: relative; }
.fl2 .lt-step:last-child { margin-bottom: 0; }
.fl2 .lt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); flex-shrink: 0; margin-top: 4px; }
.fl2 .lt-dot.amber { background: var(--amber); }
.fl2 .lt-dot.muted { background: rgba(255, 255, 255, .2); }
.fl2 .loyalty-timeline .lt-content h4 { font-size: 13.5px; color: #fff; margin-bottom: 2px; }
.fl2 .loyalty-timeline .lt-content p { font-size: 16px; color: rgba(255, 255, 255, .6); line-height: 1.5; }

.fl2 .creator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.fl2 .creator-card { border: 1px solid var(--line); border-radius: 8px; padding: 26px; background: #fff; }
.fl2 .creator-card h3 { font-size: 18px; margin-bottom: 10px; }
.fl2 .creator-card p { color: var(--muted); font-size: 16px; margin-bottom: 16px; line-height: 1.6; }
.fl2 .split-visual { display: flex; gap: 4px; height: 36px; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.fl2 .split-seg { display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 10px; font-weight: 600; color: #fff; transition: flex .3s; }
.fl2 .split-seg.creator { background: var(--teal-dark); }
.fl2 .split-seg.teacher { background: var(--amber); color: var(--ink); }
.fl2 .split-seg.platform { background: var(--ink-soft); }
.fl2 .split-labels { display: flex; gap: 10px; flex-wrap: wrap; }
.fl2 .split-label { font-family: var(--font-body); font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.fl2 .split-label .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fl2 .creator-note { font-size: 12.5px; color: var(--muted); font-style: italic; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }

.fl2 .booking-teaser { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 32px 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.fl2 .booking-teaser h3 { font-size: 22px; margin-bottom: 10px; }
.fl2 .booking-teaser p { font-size: 16px; color: var(--muted); margin-bottom: 16px; }
.fl2 .booking-steps { display: flex; flex-direction: column; gap: 10px; }
.fl2 .booking-step { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-soft); }
.fl2 .bs-num { width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--font-body); font-size: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 600; }

.fl2 .apply-wrap { background: var(--ink); border-radius: 12px; padding: 48px; max-width: 680px; margin: 0 auto; }
.fl2 .apply-wrap h2 { font-size: clamp(22px, 2.5vw, 30px); color: #fff; margin-bottom: 8px; }
.fl2 .apply-wrap .apply-sub { font-size: 16px; color: rgba(255, 255, 255, .45); margin-bottom: 28px; }
.fl2 .form-group { margin-bottom: 18px; }
.fl2 .form-group label { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .45); display: block; margin-bottom: 7px; }
.fl2 .form-group input, .fl2 .form-group select, .fl2 .form-group textarea { width: 100%; padding: 11px 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 4px; font-family: var(--font-body); font-size: 14px; color: #fff; transition: border-color .18s; }
.fl2 .form-group input:focus, .fl2 .form-group select:focus, .fl2 .form-group textarea:focus { outline: none; border-color: var(--teal); }
.fl2 .form-group input::placeholder, .fl2 .form-group textarea::placeholder { color: rgba(255, 255, 255, .25); }
.fl2 .form-group select { appearance: none; cursor: pointer; color: #fff; }
.fl2 .form-group select option { background: var(--ink); color: #fff; }
.fl2 .form-group textarea { resize: vertical; min-height: 90px; }
.fl2 .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fl2 .form-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.fl2 .form-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--teal); flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.fl2 .form-check label { font-size: 13.5px; color: rgba(255, 255, 255, .55); line-height: 1.5; cursor: pointer; }
.fl2 .form-check label a { color: #7FD4CB; }
.fl2 .apply-price { background: rgba(224, 138, 62, .1); border: 1px solid rgba(224, 138, 62, .25); border-radius: 6px; padding: 14px 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; }
.fl2 .apply-price .price-num { font-family: var(--font-body); font-size: 30px; color: var(--amber); font-style: italic; flex-shrink: 0; }
.fl2 .apply-price .price-desc { font-size: 13px; color: rgba(255, 255, 255, .55); line-height: 1.5; }
.fl2 .apply-price .price-desc strong { color: rgba(255, 255, 255, .85); }

@media (max-width: 960px) {
  .fl2 .vs-grid, .fl2 .calc-grid, .fl2 .loyalty-grid, .fl2 .creator-grid, .fl2 .booking-teaser { grid-template-columns: 1fr; }
  .fl2 .cert-steps { grid-template-columns: 1fr 1fr; gap: 20px; }
  .fl2 .cert-steps::before { display: none; }
  .fl2 .form-row { grid-template-columns: 1fr; }
  .fl2 .commission-box { flex-direction: column; gap: 12px; }
  .fl2 .commission-divider { width: 100%; height: 1px; }
}
@media (max-width: 600px) {
  .fl2 .cert-steps { grid-template-columns: 1fr; }
  .fl2 .apply-wrap { padding: 28px 20px; }
}

/* ==========================================================================
   Founder's Story page
   ========================================================================== */
.fl2 .opening { background: var(--ink); padding: 96px 0 80px; position: relative; overflow: hidden; }
.fl2 .opening::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(31, 138, 131, .12) 0%, transparent 60%); }
.fl2 .opening-inner { position: relative; z-index: 1; }
.fl2 .scene-label { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .3); margin-bottom: 32px; display: flex; align-items: center; gap: 10px; }
.fl2 .scene-label::before { content: ""; width: 24px; height: 1px; background: var(--amber); display: inline-block; }
.fl2 .opening h1 { font-size: clamp(15px, 2vw, 21px); color: rgba(255, 255, 255, .35); font-family: var(--font-body); font-weight: 400; letter-spacing: .04em; line-height: 2; max-width: 680px; margin-bottom: 0; }
.fl2 .opening h1 em { font-family: var(--font-body); font-style: italic; font-size: clamp(32px, 5vw, 64px); color: #fff; display: block; line-height: 1.05; letter-spacing: -.02em; margin: 12px 0; }
.fl2 .opening h1 em span { color: #7FD4CB; }
.fl2 .opening-caption { margin-top: 36px; font-size: 16px; color: rgba(255, 255, 255, .45); max-width: 520px; line-height: 1.7; font-style: italic; }

.fl2 .story-layout { display: grid; grid-template-columns: 1fr 240px; gap: 72px; padding: 72px 0 96px; align-items: start; }
.fl2 .narrative p { font-size: 17.5px; color: var(--ink-soft); margin-bottom: 24px; line-height: 1.8; }
.fl2 .narrative p.lead { font-size: 19px; color: var(--ink); font-weight: 500; line-height: 1.7; margin-bottom: 28px; }
.fl2 .narrative h2 { font-family: var(--font-body); font-size: clamp(22px, 2.6vw, 32px); color: var(--ink); margin: 52px 0 18px; }
.fl2 .narrative h2:first-of-type { margin-top: 0; }

.fl2 .pq { border-left: 3px solid var(--amber); padding: 18px 24px; margin: 36px 0; background: rgba(224, 138, 62, .05); border-radius: 0 6px 6px 0; }
.fl2 .pq p { font-family: var(--font-body); font-style: italic; font-size: 21px; color: var(--ink); line-height: 1.5; margin: 0; }
.fl2 .pq cite { display: block; margin-top: 10px; font-family: var(--font-body); font-size: 11px; color: var(--muted); font-style: normal; }

.fl2 .interlude { background: var(--ink); border-radius: 8px; padding: 28px 30px; margin: 40px 0; }
.fl2 .interlude p { font-family: var(--font-body); font-style: italic; font-size: 18px; color: rgba(255, 255, 255, .8); line-height: 1.6; margin: 0; }
.fl2 .interlude p span { color: #7FD4CB; }

.fl2 .story-photo { border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); margin: 44px 0; }
.fl2 .story-photo img { width: 100%; display: block; }
.fl2 .story-photo figcaption { padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-top: none; border-radius: 0 0 8px 8px; font-family: var(--font-body); font-size: 11px; color: var(--muted); }

.fl2 .lang-timeline { display: flex; flex-direction: column; gap: 0; margin: 32px 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.fl2 .lt-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); transition: background .15s; }
.fl2 .lt-row:last-child { border-bottom: none; }
.fl2 .lt-row:hover { background: rgba(31, 138, 131, .04); }
.fl2 .lt-age { font-family: var(--font-body); font-size: 10.5px; color: var(--teal-dark); background: var(--teal-light); padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; margin-top: 2px; font-weight: 600; }
.fl2 .lang-timeline .lt-content h4 { font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.fl2 .lang-timeline .lt-content p { font-size: 16px; color: var(--muted); line-height: 1.5; margin: 0; }

.fl2 .story-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 18px; }
.fl2 .sidebar-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.fl2 .sidebar-card h4 { font-size: 14px; margin-bottom: 8px; font-family: var(--font-body); }
.fl2 .sidebar-card p { font-size: 16px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.fl2 .sidebar-stat { display: flex; flex-direction: column; gap: 12px; }
.fl2 .ss-item { display: flex; flex-direction: column; }
.fl2 .ss-num { font-family: var(--font-body); font-size: 28px; color: var(--teal-dark); font-style: italic; line-height: 1; }
.fl2 .ss-lbl { font-family: var(--font-body); font-size: 9.5px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }
.fl2 .ss-divider { width: 100%; height: 1px; background: var(--line); }
.fl2 .sidebar-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fl2 .sidebar-chip { font-family: var(--font-body); font-size: 10px; padding: 4px 9px; border-radius: 20px; background: var(--paper-2); color: var(--ink-soft); border: 1px solid var(--line); }

.fl2 .proof-band { background: var(--teal-dark); padding: 72px 0; }
.fl2 .proof-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.fl2 .proof-copy h2 { font-size: clamp(22px, 2.6vw, 34px); color: #fff; margin-bottom: 16px; }
.fl2 .proof-copy p { font-size: 16px; color: rgba(255, 255, 255, .6); margin-bottom: 14px; line-height: 1.7; }
.fl2 .proof-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.fl2 .proof-chip { font-family: var(--font-body); font-size: 11px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); padding: 6px 12px; border-radius: 20px; color: #fff; }
.fl2 .proof-chip b { color: #F8C68C; }
.fl2 .proof-photo img { border-radius: 8px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); width: 100%; }

.fl2 .means-section { padding: 88px 0; text-align: center; }
.fl2 .means-section h2 { font-size: clamp(24px, 3vw, 40px); max-width: 640px; margin: 0 auto 14px; }
.fl2 .means-section p { font-size: 16px; color: var(--muted); max-width: 520px; margin: 0 auto 32px; line-height: 1.7; }
.fl2 .means-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 960px) {
  .fl2 .story-layout { grid-template-columns: 1fr; }
  .fl2 .story-sidebar { display: none; }
  .fl2 .proof-inner { grid-template-columns: 1fr; }
  .fl2 .proof-photo { display: none; }
}
@media (max-width: 600px) {
  .fl2 .narrative p { font-size: 16px; }
  .fl2 .narrative p.lead { font-size: 17.5px; }
}

/* ==========================================================================
   Booking page — app-like grey background, distinct from the paper theme
   ========================================================================== */
body.fl2.page-booking { background: #F4F6F8; }
.fl2 .page-hero-booking { background: #fff; border-bottom: 1px solid #E5E9ED; padding: 52px 0 44px; }
.fl2 .page-hero-booking .page-hero-inner { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.fl2 .page-hero-booking .page-hero-text h1 { font-size: clamp(26px, 3.2vw, 42px); margin-bottom: 12px; color: var(--ink); }
.fl2 .page-hero-booking .page-hero-text h1 em { font-style: italic; color: var(--teal-dark); }
.fl2 .page-hero-booking .page-hero-text p { font-size: 16px; color: var(--muted); max-width: 420px; margin-bottom: 24px; }

.fl2 .how-section { background: #fff; border-radius: 12px; padding: 36px; margin-bottom: 52px; border: 1px solid #E5E9ED; }
.fl2 .how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.fl2 .how-grid::before { content: ""; position: absolute; top: 20px; left: 8%; right: 8%; height: 1px; background: #E5E9ED; z-index: 0; }
.fl2 .how-step { text-align: center; position: relative; z-index: 1; padding: 0 8px; }
.fl2 .how-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--teal); border: 2px solid #fff; margin: 14px auto 14px; box-shadow: 0 0 0 2px var(--teal); }
.fl2 .how-step.amber .how-dot { background: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.fl2 .how-icon { font-size: 20px; display: block; margin-bottom: 6px; }
.fl2 .how-title { font-family: var(--font-body); font-size: 14.5px; margin-bottom: 5px; }
.fl2 .how-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }

.fl2 .paths-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fl2 .path-card { background: #fff; border: 1px solid #E5E9ED; border-radius: 10px; padding: 0; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.fl2 .path-card:hover { box-shadow: 0 4px 16px -6px rgba(20, 25, 31, .14); transform: translateY(-3px); }
.fl2 .path-card-top { padding: 28px 28px 20px; }
.fl2 .path-num { font-family: var(--font-body); font-size: 10px; letter-spacing: .1em; color: #9A5A1E; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.fl2 .path-num::before { content: ""; width: 16px; height: 1px; background: var(--amber); }
.fl2 .path-card h2 { font-size: clamp(18px, 2.2vw, 26px); margin-bottom: 10px; }
.fl2 .path-card p { font-size: 16px; color: var(--muted); line-height: 1.65; }
.fl2 .path-card-steps { border-top: 1px solid #F0F2F4; padding: 20px 28px; display: flex; flex-direction: column; gap: 12px; background: #FAFBFC; }
.fl2 .path-card-steps .path-step { display: flex; align-items: flex-start; gap: 12px; }
.fl2 .ps-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--font-body); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.fl2 .path-card-steps .path-step.amber .ps-dot { background: var(--amber); }
.fl2 .ps-text h4 { font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.fl2 .ps-text p { font-size: 16px; color: var(--muted); line-height: 1.5; margin: 0; }
.fl2 .path-card-cta { padding: 16px 28px; border-top: 1px solid #F0F2F4; }

.fl2 .calendar-wrap { background: #fff; border: 1px solid #E5E9ED; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px -6px rgba(20, 25, 31, .14); }
.fl2 .cal-toolbar { background: #fff; border-bottom: 1px solid #F0F2F4; padding: 14px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fl2 .cal-toolbar-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; }
.fl2 .cal-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.fl2 .cal-pill { font-family: var(--font-body); font-size: 11px; padding: 5px 12px; border-radius: 20px; border: 1px solid #E5E9ED; color: var(--muted); background: #fff; cursor: pointer; }
.fl2 .cal-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.fl2 .cal-days-header { display: grid; grid-template-columns: repeat(7, 1fr); background: #FAFBFC; border-bottom: 1px solid #F0F2F4; }
.fl2 .cal-day-hdr { text-align: center; padding: 8px 4px; font-family: var(--font-body); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.fl2 .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.fl2 .cal-cell { border-right: 1px solid #F0F2F4; border-bottom: 1px solid #F0F2F4; padding: 8px 6px; min-height: 88px; position: relative; }
.fl2 .cal-cell:nth-child(7n) { border-right: none; }
.fl2 .cal-cell.empty { background: #FAFBFC; }
.fl2 .cal-cell.today { background: #F0FAF9; }
.fl2 .cal-date { font-family: var(--font-body); font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.fl2 .cal-cell.today .cal-date { color: var(--teal-dark); font-weight: 700; }
.fl2 .slot { border-radius: var(--radius-pill); padding: 3px 6px; margin-bottom: 3px; font-size: 10.5px; cursor: pointer; transition: opacity .15s; line-height: 1.3; }
.fl2 .slot:hover { opacity: .8; }
.fl2 .slot.private { background: #DBEAFE; color: #1E40AF; }
.fl2 .slot.group { background: #D1FAE5; color: #065F46; }
.fl2 .slot.pair { background: #FEF3C7; color: #92400E; }
.fl2 .slot.request { background: #F3E8FF; color: #6B21A8; border: 1px dashed #C4B5FD; }
.fl2 .slot .slot-time { font-weight: 600; }
.fl2 .cal-legend { padding: 12px 20px; border-top: 1px solid #F0F2F4; display: flex; gap: 16px; flex-wrap: wrap; background: #FAFBFC; }
.fl2 .legend-item { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 10.5px; color: var(--muted); }
.fl2 .legend-dot { width: 10px; height: 10px; border-radius: 2px; }

.fl2 .group-info { background: var(--teal-dark); border-radius: 10px; padding: 28px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin-bottom: 52px; }
.fl2 .gi-copy h3 { font-size: 20px; color: #fff; margin-bottom: 10px; }
.fl2 .gi-copy p { font-size: 16px; color: rgba(255, 255, 255, .6); line-height: 1.65; }
.fl2 .gi-steps { display: flex; flex-direction: column; gap: 10px; }
.fl2 .gi-step { display: flex; align-items: flex-start; gap: 10px; }
.fl2 .gi-dot { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #7FD4CB; font-family: var(--font-body); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.fl2 .gi-text { font-size: 13px; color: rgba(255, 255, 255, .65); line-height: 1.5; }

.fl2 .request-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.fl2 .request-form { background: #fff; border: 1px solid #E5E9ED; border-radius: 10px; padding: 24px; box-shadow: 0 4px 16px -6px rgba(20, 25, 31, .14); }
.fl2 .rf-title { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid #F0F2F4; }
.fl2 .rf-group { margin-bottom: 14px; }
.fl2 .rf-group label { font-family: var(--font-body); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; }
.fl2 .rf-group select, .fl2 .rf-group input { width: 100%; padding: 9px 12px; border: 1px solid #E5E9ED; border-radius: 4px; font-family: var(--font-body); font-size: 13.5px; color: var(--ink); background: #fff; }
.fl2 .rf-group select:focus, .fl2 .rf-group input:focus { outline: none; border-color: var(--teal); }
.fl2 .rf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fl2 .teacher-toggle { display: flex; gap: 8px; margin-top: 4px; }
.fl2 .teacher-toggle-btn { flex: 1; padding: 8px 10px; border: 1px solid #E5E9ED; border-radius: 4px; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; background: #fff; text-align: center; transition: all .15s; }
.fl2 .teacher-toggle-btn.active { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); }
.fl2 .rf-submit { width: 100%; padding: 12px; background: var(--amber); color: var(--ink); border: none; border-radius: 4px; font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 8px; transition: background .18s; }
.fl2 .rf-submit:hover { background: var(--amber-dark); }
.fl2 .applications-mock { background: #fff; border: 1px solid #E5E9ED; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px -6px rgba(20, 25, 31, .14); }
.fl2 .app-header { padding: 14px 18px; border-bottom: 1px solid #F0F2F4; background: #FAFBFC; }
.fl2 .app-header-title { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.fl2 .app-header-req { font-size: 13px; color: var(--ink); margin-top: 4px; font-weight: 500; }
.fl2 .app-list { display: flex; flex-direction: column; }
.fl2 .app-item { padding: 14px 18px; border-bottom: 1px solid #F0F2F4; display: flex; align-items: center; gap: 12px; transition: background .15s; }
.fl2 .app-item:last-child { border-bottom: none; }
.fl2 .app-item:hover { background: #FAFBFC; }
.fl2 .app-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 15px; color: #fff; font-weight: 600; flex-shrink: 0; }
.fl2 .app-info { flex: 1; }
.fl2 .app-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.fl2 .app-meta { font-family: var(--font-body); font-size: 10.5px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.fl2 .app-meta .star { color: var(--amber); }
.fl2 .app-time { font-family: var(--font-body); font-size: 10.5px; color: var(--teal-dark); text-align: right; flex-shrink: 0; }
.fl2 .app-confirm { background: var(--teal-dark); color: #fff; border: none; border-radius: var(--radius-pill); padding: 6px 12px; font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s; margin-left: 8px; flex-shrink: 0; }
.fl2 .app-confirm:hover { background: var(--teal); }

.fl2 .page-cta-booking { background: var(--ink); border-radius: 12px; padding: 44px 48px; text-align: center; margin-bottom: 52px; }
.fl2 .page-cta-booking h2 { font-size: clamp(22px, 2.8vw, 34px); color: #fff; margin-bottom: 10px; }
.fl2 .page-cta-booking p { color: rgba(255, 255, 255, .5); font-size: 16px; margin-bottom: 24px; }

@media (max-width: 960px) {
  .fl2 .page-hero-booking .page-hero-inner, .fl2 .paths-grid, .fl2 .request-layout, .fl2 .group-info { grid-template-columns: 1fr; }
  .fl2 .how-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .fl2 .how-grid::before { display: none; }
  .fl2 .page-cta-booking { padding: 32px 24px; }
}
@media (max-width: 600px) {
  .fl2 .cal-cell { min-height: 64px; }
  .fl2 .rf-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Insights index page
   ========================================================================== */
.fl2 .page-hero-insights { padding: 64px 0 56px; }
.fl2 .page-hero-insights h1 { font-size: clamp(30px, 4vw, 50px); color: #fff; margin-bottom: 12px; }
.fl2 .page-hero-insights h1 em { font-style: italic; color: #7FD4CB; }
.fl2 .page-hero-insights p { font-size: 16px; color: rgba(255, 255, 255, .5); max-width: 480px; }

.fl2 .filter-bar-insights { background: #fff; border-bottom: 1px solid var(--line); padding: 0; }
.fl2 .filter-bar-insights .filter-inner { display: flex; align-items: center; gap: 4px; padding: 12px 0; overflow-x: auto; }
.fl2 .cat-tab { font-family: var(--font-body); font-size: 11.5px; padding: 7px 16px; border-radius: var(--radius-pill); border: 1px solid transparent; color: var(--muted); cursor: pointer; background: none; transition: all .15s; white-space: nowrap; font-weight: 500; }
.fl2 .cat-tab:hover { color: var(--teal-dark); }
.fl2 .cat-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.fl2 .featured { padding: 56px 0 0; }
.fl2 .featured-card { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.fl2 .featured-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -20px rgba(20, 25, 31, .2); }
.fl2 .featured-img { background: var(--ink); min-height: 380px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fl2 .featured-img-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px; }
.fl2 .feat-icon { font-size: 64px; opacity: .6; }
.fl2 .feat-quote { font-family: var(--font-body); font-style: italic; font-size: 20px; color: rgba(255, 255, 255, .7); text-align: center; max-width: 260px; line-height: 1.4; }
.fl2 .feat-quote span { color: #7FD4CB; }
.fl2 .featured-body { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.fl2 .article-cat { font-family: var(--font-body); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; display: inline-block; margin-bottom: 14px; font-weight: 600; }
.fl2 .cat-insights { background: var(--teal-light); color: var(--teal-dark); }
.fl2 .cat-stories { background: rgba(224, 138, 62, .12); color: var(--amber-dark); }
.fl2 .cat-resources { background: var(--paper-2); color: var(--ink-soft); }
.fl2 .featured-body h2 { font-size: clamp(22px, 2.5vw, 30px); margin-bottom: 14px; }
.fl2 .featured-body .excerpt { font-size: 16px; color: var(--muted); margin-bottom: 22px; line-height: 1.65; }
.fl2 .article-meta { display: flex; align-items: center; gap: 14px; font-family: var(--font-body); font-size: 11px; color: var(--muted); }
.fl2 .article-meta .sep { color: var(--line); }

.fl2 .articles-section { padding: 48px 0 88px; }
.fl2 .section-label { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fl2 .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 48px; }
.fl2 .article-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.fl2 .article-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -16px rgba(20, 25, 31, .18); }
.fl2 .article-card[data-hidden="true"] { display: none !important; }
.fl2 .ac-img { height: 160px; background: var(--paper-2); display: flex; align-items: center; justify-content: center; font-size: 40px; position: relative; }
.fl2 .ac-img.dark { background: var(--ink); }
.fl2 .ac-img.teal { background: var(--teal-dark); }
.fl2 .ac-img.amber { background: rgba(224, 138, 62, .15); }
.fl2 .ac-body { padding: 18px 18px 0; flex: 1; }
.fl2 .ac-body .article-cat { margin-bottom: 10px; }
.fl2 .ac-body h3 { font-size: 17px; margin-bottom: 8px; line-height: 1.25; }
.fl2 .ac-body .excerpt { font-size: 16px; color: var(--muted); margin-bottom: 14px; line-height: 1.6; }
.fl2 .ac-footer { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.fl2 .ac-footer .article-meta { font-family: var(--font-body); font-size: 10.5px; color: var(--muted); }
.fl2 .ac-footer .read-link { font-family: var(--font-body); font-size: 11px; color: var(--teal-dark); font-weight: 600; }
.fl2 .ac-footer .read-link:hover { color: var(--amber-dark); }

.fl2 .newsletter { background: var(--teal-dark); border-radius: 10px; padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-top: 16px; }
.fl2 .newsletter h3 { font-size: 22px; color: #fff; margin-bottom: 6px; }
.fl2 .newsletter p { font-size: 16px; color: rgba(255, 255, 255, .65); }
.fl2 .nl-form { display: flex; gap: 8px; flex-wrap: wrap; }
.fl2 .nl-form input { padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 14px; color: #fff; background: rgba(255, 255, 255, .06); width: 260px; }
.fl2 .nl-form input::placeholder { color: rgba(255, 255, 255, .3); }
.fl2 .nl-form input:focus { outline: none; border-color: rgba(255, 255, 255, .4); }

@media (max-width: 960px) {
  .fl2 .featured-card { grid-template-columns: 1fr; }
  .fl2 .featured-img { min-height: 220px; }
  .fl2 .articles-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .fl2 .articles-grid { grid-template-columns: 1fr; }
  .fl2 .newsletter { padding: 28px 24px; }
}

/* Fallback so any custom insight_category term (beyond insights/stories/resources) still renders a readable badge */
.fl2 .article-cat { background: var(--paper-2); color: var(--ink-soft); }

/* ==========================================================================
   Single Insight article
   ========================================================================== */
.fl2 .article-hero { background: var(--ink); padding: 64px 0 56px; }
.fl2 .article-hero .back { font-family: var(--font-body); font-size: 11px; color: rgba(255, 255, 255, .4); display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.fl2 .article-hero .back:hover { color: rgba(255, 255, 255, .7); }
.fl2 .article-hero h1 { font-size: clamp(26px, 3.8vw, 48px); color: #fff; max-width: 720px; margin-bottom: 18px; line-height: 1.1; }
.fl2 .article-hero h1 em { font-style: italic; color: #7FD4CB; }
.fl2 .article-meta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fl2 .author-chip { display: flex; align-items: center; gap: 9px; }
.fl2 .author-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--teal); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 13px; color: #fff; font-weight: 600; }
.fl2 .author-name { font-size: 13.5px; color: rgba(255, 255, 255, .8); font-weight: 500; }
.fl2 .meta-sep { color: rgba(255, 255, 255, .2); }
.fl2 .meta-item { font-family: var(--font-body); font-size: 11px; color: rgba(255, 255, 255, .4); }

.fl2 .article-layout { display: grid; grid-template-columns: 1fr 280px; gap: 64px; padding: 64px 0 88px; align-items: start; }
.fl2 .article-body p { font-size: 17px; color: var(--ink-soft); margin-bottom: 22px; line-height: 1.75; }
.fl2 .article-body p:first-child { font-size: 18.5px; color: var(--ink); font-weight: 500; line-height: 1.65; }
.fl2 .article-body h2 { font-size: clamp(20px, 2.4vw, 28px); margin: 40px 0 16px; color: var(--ink); }
.fl2 .article-body h3 { font-size: 20px; margin: 30px 0 12px; color: var(--ink); }
.fl2 .article-body ul, .fl2 .article-body ol { padding-left: 22px; margin-bottom: 22px; }
.fl2 .article-body li { font-size: 16.5px; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.65; }
.fl2 .article-body strong { color: var(--ink); font-weight: 600; }
.fl2 .article-body a { color: var(--teal-dark); text-decoration: underline; text-decoration-color: var(--teal-light); }
.fl2 .article-body a:hover { color: var(--teal); }

.fl2 .pull-quote { border-left: 3px solid var(--amber); padding: 18px 22px; background: rgba(224, 138, 62, .06); border-radius: 0 6px 6px 0; margin: 28px 0; }
.fl2 .pull-quote p { font-family: var(--font-body); font-style: italic; font-size: 20px; color: var(--ink); line-height: 1.5; margin: 0; }

.fl2 .callout { background: var(--teal-light); border-radius: 6px; padding: 20px 22px; margin: 28px 0; }
.fl2 .callout .callout-label { font-family: var(--font-body); font-size: 10px; letter-spacing: .08em; color: var(--teal-dark); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; }
.fl2 .callout p { font-size: 15px; color: var(--teal-dark); margin: 0; line-height: 1.6; }

.fl2 .brain-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0; }
.fl2 .bc-card { border-radius: 6px; padding: 18px; }
.fl2 .bc-card.old { background: #fff; border: 1px solid var(--line); }
.fl2 .bc-card.new { background: var(--teal-dark); color: #fff; }
.fl2 .bc-card h4 { font-size: 14px; margin-bottom: 10px; }
.fl2 .bc-card.old h4 { color: var(--muted); }
.fl2 .bc-card.new h4 { color: #7FD4CB; }
.fl2 .bc-card ul { padding-left: 16px; }
.fl2 .bc-card li { font-size: 13px; margin-bottom: 5px; line-height: 1.5; }
.fl2 .bc-card.old li { color: var(--muted); }
.fl2 .bc-card.new li { color: rgba(255, 255, 255, .7); }

.fl2 .article-sidebar { position: sticky; top: 80px; }
.fl2 .article-sidebar .sidebar-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px; margin-bottom: 18px; }
.fl2 .article-sidebar .sidebar-card h4 { font-size: 15px; margin-bottom: 10px; }
.fl2 .article-sidebar .sidebar-card p { font-size: 16px; color: var(--muted); margin-bottom: 14px; line-height: 1.55; }
.fl2 .sidebar-toc { display: flex; flex-direction: column; gap: 0; }
.fl2 .toc-item { font-size: 13px; color: var(--muted); padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; transition: color .15s; }
.fl2 .toc-item:last-child { border-bottom: none; }
.fl2 .toc-item:hover { color: var(--teal-dark); }
.fl2 .toc-item::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.fl2 .sidebar-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fl2 .sidebar-tag { font-family: var(--font-body); font-size: 10.5px; padding: 4px 10px; border-radius: 20px; background: var(--paper-2); color: var(--muted); border: 1px solid var(--line); }

.fl2 .related-section { background: var(--paper-2); padding: 64px 0; }
.fl2 .related-section h2 { font-size: clamp(20px, 2.4vw, 28px); margin-bottom: 28px; }
.fl2 .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fl2 .related-card { background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: transform .2s; }
.fl2 .related-card:hover { transform: translateY(-3px); }
.fl2 .rc-img { height: 120px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.fl2 .rc-img.dark { background: var(--ink); }
.fl2 .rc-img.teal { background: var(--teal-dark); }
.fl2 .rc-img.amber { background: rgba(224, 138, 62, .12); }
.fl2 .rc-body { padding: 16px; }
.fl2 .rc-cat { font-family: var(--font-body); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 6px; }
.fl2 .rc-body h3 { font-size: 15px; margin-bottom: 6px; line-height: 1.3; }
.fl2 .rc-body .rc-meta { font-family: var(--font-body); font-size: 10px; color: var(--muted); }

.fl2 .article-cta { background: var(--teal-dark); padding: 64px 0; text-align: center; }
.fl2 .article-cta h2 { font-size: clamp(22px, 3vw, 36px); color: #fff; max-width: 560px; margin: 0 auto 10px; }
.fl2 .article-cta p { color: rgba(255, 255, 255, .65); font-size: 16px; margin-bottom: 24px; }
.fl2 .article-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 960px) {
  .fl2 .article-layout { grid-template-columns: 1fr; }
  .fl2 .article-sidebar { display: none; }
  .fl2 .related-grid { grid-template-columns: 1fr 1fr; }
  .fl2 .brain-compare { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .fl2 .related-grid { grid-template-columns: 1fr; }
  .fl2 .article-body p { font-size: 16px; }
  .fl2 .article-body p:first-child { font-size: 17px; }
}

/* ==========================================================================
   Privacy Policy page
   ========================================================================== */
.fl2 .legal-hero { background: var(--ink); padding: 56px 0 48px; }
.fl2 .legal-hero h1 { font-size: clamp(24px, 3vw, 40px); color: #fff; margin-bottom: 10px; }
.fl2 .legal-hero .updated { font-family: var(--font-body); font-size: 11px; color: rgba(255, 255, 255, .6); margin-top: 10px; }

.fl2 .legal-layout { display: grid; grid-template-columns: 200px 1fr; gap: 56px; padding: 56px 0 88px; align-items: start; }
.fl2 .legal-nav { position: sticky; top: 80px; }
.fl2 .legal-nav-title { font-family: var(--font-body); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.fl2 .legal-nav a { display: block; font-size: 13px; color: var(--muted); padding: 6px 0; border-bottom: 1px solid var(--line); transition: color .15s; }
.fl2 .legal-nav a:hover { color: var(--teal-dark); }
.fl2 .legal-nav a:last-child { border-bottom: none; }
.fl2 .legal-body h2 { font-size: clamp(18px, 2vw, 24px); margin: 40px 0 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.fl2 .legal-body h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.fl2 .legal-body h3 { font-size: 17px; margin: 24px 0 10px; color: var(--ink); }
.fl2 .legal-body p { font-size: 16px; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.75; }
.fl2 .legal-body ul { padding-left: 20px; margin-bottom: 16px; }
.fl2 .legal-body li { font-size: 16px; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.65; }
.fl2 .legal-body strong { color: var(--ink); }
.fl2 .legal-body a { color: var(--teal-dark); text-decoration: underline; text-decoration-color: var(--teal-light); }
.fl2 .legal-highlight { background: var(--teal-light); border-radius: 6px; padding: 16px 18px; margin: 20px 0; }
.fl2 .legal-highlight p { font-size: 16px; color: var(--teal-dark); margin: 0; line-height: 1.6; }
.fl2 .legal-highlight p strong { color: var(--teal-dark); }

/* ==========================================================================
   Money-Back Guarantee page
   ========================================================================== */
/* ==========================================================================
   Contact page
   ========================================================================== */
.fl2 .contact-hero { background: var(--ink); padding: 60px 0 52px; }
.fl2 .contact-hero h1 { font-size: clamp(26px, 3.2vw, 44px); color: #fff; margin-bottom: 12px; }
.fl2 .contact-hero p { font-size: 16px; color: rgba(255, 255, 255, .5); max-width: 440px; }

.fl2 .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 56px 0 88px; align-items: start; }
.fl2 .contact-form-wrap { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 32px; box-shadow: var(--shadow); }
.fl2 .cf-title { font-family: var(--font-body); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fl2 .cf-group { margin-bottom: 16px; }
.fl2 .cf-group label { font-family: var(--font-body); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; }
.fl2 .cf-group input, .fl2 .cf-group select, .fl2 .cf-group textarea { width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 4px; font-family: var(--font-body); font-size: 14px; color: var(--ink); background: #fff; transition: border-color .18s; }
.fl2 .cf-group input:focus, .fl2 .cf-group select:focus, .fl2 .cf-group textarea:focus { outline: none; border-color: var(--teal); }
.fl2 .cf-group textarea { resize: vertical; min-height: 110px; }
.fl2 .cf-submit { width: 100%; padding: 12px; background: var(--teal-dark); color: #fff; border: none; border-radius: 4px; font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 4px; transition: background .18s; }
.fl2 .cf-submit:hover { background: var(--teal); }
.fl2 .contact-info { display: flex; flex-direction: column; gap: 16px; }
.fl2 .ci-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.fl2 .ci-card h3 { font-size: 16px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.fl2 .ci-card p { font-size: 16px; color: var(--muted); line-height: 1.6; margin-bottom: 8px; }
.fl2 .ci-card a.ci-link { font-family: var(--font-body); font-size: 12.5px; color: var(--teal-dark); font-weight: 600; }
.fl2 .ci-card a.ci-link:hover { color: var(--amber-dark); }
.fl2 .ci-portals { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.fl2 .ci-portal { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--paper-2); border-radius: 4px; font-family: var(--font-body); font-size: 11.5px; }
.fl2 .ci-portal .flag { font-size: 16px; }
.fl2 .ci-portal .portal-name { color: var(--ink-soft); }
.fl2 .ci-portal .portal-contact { color: var(--teal-dark); font-size: 11px; }

@media (max-width: 960px) {
  .fl2 .legal-layout { grid-template-columns: 1fr; }
  .fl2 .legal-nav { display: none; }
  .fl2 .contact-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Legacy SEO pages (learn-english, persian-online, business-english, etc.)
   — visual unification pass. These ~40 programmatic pages render through
   page.php and predate the TooTii 2.0 redesign. Rather than rebuild each
   one individually, this section restyles their SHARED component classes
   (.subhero, .button, .page-card-grid, .faq-grid, .final-cta, etc.) so
   every one of them picks up the new palette, card style, and button shape
   in a single pass. They already inherit the new header/footer, fonts, and
   --ink/--amber/--line/--muted tokens via the .fl2 cascade (see the design
   system block near the top of this file) — this section finishes the job
   for everything that was still styled by the pre-redesign rules below.
   ========================================================================== */
:root {
  --brand: #E08A3E;
  --brand-dark: #B96B27;
  --surface: #F1EBDF;
}

/* Hero bands (.hero is now unused dead code from the old homepage, kept for
   safety; .subhero is still live on every legacy SEO page) — swap the old
   navy/blue-green gradient for the same warm ink + teal/amber glow used on
   every 2.0 page-hero. */
.hero,
.subhero {
  background:
    radial-gradient(circle at 82% 20%, rgba(31, 138, 131, .22), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(224, 138, 62, .12), transparent 30%),
    var(--ink);
}

/* Button shape — align with .btn's proportions (3px radius, 600 weight)
   instead of the old pill-ish 8px radius / 850 weight. Colors already
   follow from the --brand override above. */
.header-cta,
.button {
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
}

.header-cta,
.button-primary {
  box-shadow: 0 14px 28px -10px rgba(224, 138, 62, .5);
}

.header-cta:hover,
.button-primary:hover {
  background: linear-gradient(120deg, var(--amber-dark), var(--amber-dark));
}

/* Numbered/labeled badge chips — was a hardcoded pale-pink (#fff0f3); now
   teal to match the new method-card step badges. */
.language-card span,
.page-card-grid article span,
.feature-list span,
.method-loop span {
  color: var(--teal-dark);
  background: var(--teal-light);
}

.audience-grid a {
  color: var(--teal-dark);
}

/* Final CTA band — solid teal-dark instead of the old brand gradient,
   matching every 2.0 page's closing CTA treatment. */
.final-cta {
  background: var(--teal-dark);
}

.locale-panel .active {
  background: var(--teal-dark);
}

/* ============================================================
   CAREERS PAGE (/careers) — see page-careers.php, inc/careers.php
   ============================================================ */
.fl2 .careers-fit-list { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 14px; }
.fl2 .careers-fit-list li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.fl2 .careers-fit-list li::before { content: "\2713"; position: absolute; left: 0; top: 1px; color: var(--teal-dark); font-weight: 700; }
.fl2 .careers-fit-list strong { color: var(--ink); }

.fl2 .careers-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fl2 .careers-tier { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.fl2 .careers-tier .ct-label { font-family: var(--font-body); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-dark); font-weight: 700; margin-bottom: 10px; }
.fl2 .careers-tier p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.fl2 .careers-tier strong { color: var(--ink); }

.fl2 .track-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.fl2 .track-pill { font-family: var(--font-body); font-size: 11px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); cursor: pointer; background: #fff; transition: all .15s; }
.fl2 .track-pill:hover { border-color: var(--teal); color: var(--teal-dark); }
.fl2 .track-pill.active { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); font-weight: 600; }

.fl2 .careers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.fl2 .career-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: transform .2s, box-shadow .2s; }
.fl2 .career-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -16px rgba(20, 25, 31, .18); }
.fl2 .career-card h3 { margin: 0; font-size: 17px; line-height: 1.35; color: var(--ink); }
.fl2 .cc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.fl2 .cc-badge { font-family: var(--font-body); font-size: 9.5px; letter-spacing: .04em; padding: 3px 8px; border-radius: var(--radius-pill); font-weight: 600; }
.fl2 .cc-badge-lang { background: var(--ink); color: #fff; }
.fl2 .cc-badge-track { background: var(--teal-light); color: var(--teal-dark); }
.fl2 .cc-excerpt { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); flex: 1; }
.fl2 .cc-apply { align-self: flex-start; margin-top: 4px; }
.fl2 .careers-empty { margin-top: 24px; font-size: 14.5px; color: var(--muted); text-align: center; padding: 28px; border: 1px dashed var(--line); border-radius: 8px; }

.fl2 .careers-sales { max-width: 640px; }
.fl2 .careers-sales h2 { margin: 6px 0 14px; }
.fl2 .careers-sales p { font-size: 15.5px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; }
.fl2 .careers-sales strong { color: var(--ink); }
.fl2 .careers-sales .btn { margin-top: 6px; }

@media (max-width: 900px) {
  .fl2 .careers-grid { grid-template-columns: 1fr 1fr; }
  .fl2 .careers-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .fl2 .careers-grid { grid-template-columns: 1fr; }
}


/* TooTii lockup: mascot + Fredoka wordmark, same look as the app's Logo */
.fl2 .logo, .fl2 .logo-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.fl2 .logo-mark { height: 24px; width: auto; flex-shrink: 0; }
.fl2 .logo-text {
  font-family: 'Fredoka', var(--font-body); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: .015em;
  background-image: none;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.fl2.is-home .logo-text, .fl2 .logo-text--dark { background-image: none; }
.fl2 .footer-logo { margin-bottom: 12px; }
.fl2 .footer-logo .logo-mark { height: 26px; margin-bottom: 0; }
.fl2 .footer-logo .logo-text { font-size: 22px; }


/* Phone header: menu button first (same order as the app), short CTA label */
.fl2 .cta-short { display: none; }
@media (max-width: 960px) {
  .fl2 .nav-cta-persistent .cta-full { display: none; }
  .fl2 .nav-cta-persistent .cta-short { display: inline; }
  .fl2 .menu-toggle { order: -1; margin-right: 10px; padding: 4px 6px 4px 0; line-height: 1; }
  .fl2 .nav-cta-persistent { margin-right: 0; }
}

/* Fixed RU pricing table (2026-09-24) -- per-row category+price breakdown
   inside a .learn-card, replacing the old single "from ₽X" line. */
.fl2 .lc-price-table { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.fl2 .lc-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.fl2 .lc-price-row span:first-child { color: var(--muted); }
.fl2 .lc-price-row span:last-child { font-family: var(--font-body); font-size: 13px; color: var(--teal-dark); font-weight: 600; white-space: nowrap; }
.fl2 .pricing-topup-note { margin-top: 24px; max-width: 720px; padding: 16px 18px; border-radius: 8px; background: var(--bg-alt, #f7f6f2); font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.fl2 .pricing-topup-note strong { color: var(--ink); }

/* Header: collapse into the hamburger below 1180px and never wrap nav labels (2026-09-25) --
   between 961 and 1180px (tablets, phones in "desktop site" mode) the full nav was squeezed so
   "The Method" wrapped onto two lines and overlapped the logo. */
.fl2 .nav-links a { white-space: nowrap; }
@media (max-width: 1180px) {
  .fl2 .nav-links { display: none; }
  .fl2 .menu-toggle { display: block; order: -1; margin-right: 10px; padding: 4px 6px 4px 0; line-height: 1; }
  .fl2 .nav-cta { display: none; }
  .fl2 .nav-cta-mobile { display: flex; }
  .fl2 .nav-cta-persistent { display: flex; margin-left: auto; margin-right: 0; }
  .fl2 .nav-cta-persistent .btn { padding: 7px 14px; font-size: 12.5px; white-space: nowrap; }
  .fl2 .nav-cta-persistent .cta-full { display: none; }
  .fl2 .nav-cta-persistent .cta-short { display: inline; }
}

/* Pricing grid: 50/25-minute tabs, 2x2 clickable price blocks, teachers under the grid (2026-09-25) */
.fl2 .price-controls { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-bottom: 20px; }
.fl2 .price-tabs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fl2 .price-tabs-label { font-size: 13px; color: var(--muted); margin-right: 4px; }
.fl2 .price-tab, .fl2 .price-lang { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; cursor: pointer; }
.fl2 .price-tab.is-active, .fl2 .price-lang.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.fl2 .price-panel { display: none; }
.fl2 .price-panel.is-active { display: block; }
.fl2 .price-grid2 { display: grid; grid-template-columns: minmax(84px, .7fr) 1fr 1fr; gap: 12px; align-items: stretch; max-width: 760px; }
.fl2 .pg-colhead { font-weight: 600; font-size: 15px; display: flex; flex-direction: column; justify-content: flex-end; }
.fl2 .pg-colhead small { font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
.fl2 .pg-rowlabel { display: flex; align-items: center; font-weight: 600; font-size: 15px; }
.fl2 .price-cell { display: flex; flex-direction: column; gap: 6px; justify-content: center; padding: 20px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.fl2 .price-cell:hover { border-color: var(--teal-dark); box-shadow: 0 6px 20px rgba(0, 0, 0, .08); transform: translateY(-1px); }
.fl2 .pc-price { font-family: var(--font-body); font-size: clamp(20px, 3.4vw, 28px); font-weight: 600; color: var(--teal-dark); white-space: nowrap; }
.fl2 .pc-book { font-size: 12.5px; color: var(--muted); }
.fl2 .price-footnote { margin-top: 16px; font-size: 12.5px; color: var(--muted); max-width: 640px; }
.fl2 .price-teachers-wrap { margin-top: 36px; }
.fl2 .pt-heading { font-size: 21px; margin: 0; }
.fl2 .pt-lead { color: var(--muted); font-size: 14px; margin: 4px 0 14px; }
.fl2 .price-teachers { display: none; flex-wrap: wrap; gap: 12px; }
.fl2 .price-teachers.is-active { display: flex; }
.fl2 .pt-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff; min-width: 210px; }
.fl2 .pt-card img, .fl2 .pt-ph { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--surface, #eee); flex: none; }
.fl2 .pt-name { font-weight: 600; font-size: 15px; }
.fl2 .pt-label { font-size: 12.5px; color: var(--teal-dark); }

/* 2026-09-29 feedback: the whole #pricing-table block (tabs, grid, note, teacher cards) was left-aligned
   under an already-centered intro -- centered everything in it to match. */
#pricing-table { text-align: center; }
#pricing-table .price-controls { justify-content: center; }
#pricing-table .price-grid2 { margin: 0 auto; }
#pricing-table .pg-colhead { align-items: center; }
#pricing-table .pg-rowlabel { justify-content: center; }
#pricing-table .fl-native-level-note { margin-left: auto; margin-right: auto; }
#pricing-table .price-teachers-wrap { display: flex; flex-direction: column; align-items: center; }
#pricing-table .price-teachers { justify-content: center; }
#pricing-table .pt-card { text-align: left; }
@media (max-width: 560px) {
  .fl2 .price-grid2 { grid-template-columns: 1fr 1fr; }
  .fl2 .pg-corner { display: none; }
  .fl2 .pg-rowlabel { grid-column: 1 / -1; margin-top: 6px; }
  .fl2 .pg-colhead { font-size: 13px; }
}

/* Free weekly group session (English with a native speaker) -- description block */
.fl2 .trial-desc h3 { margin: 22px 0 8px; font-size: 16px; }
.fl2 .trial-desc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fl2 .trial-desc li { font-size: 14.5px; line-height: 1.55; }
.fl2 .trial-desc .td-result { background: #fff; border-radius: 8px; padding: 14px 16px; box-shadow: var(--shadow-sm); font-size: 14.5px; line-height: 1.6; margin: 14px 0 0; }

/* Homepage "next event" strip (fed by the app's public events API) */
.fl2 .event-strip { background: var(--teal-light, #e6f4f1); border-bottom: 1px solid rgba(0,0,0,.06); }
.fl2 .event-strip-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 9px 0; font-size: 14px; line-height: 1.4; }
.fl2 .event-strip .es-title { font-weight: 700; color: var(--ink); }
.fl2 .event-strip .es-when { color: var(--ink); }
.fl2 .event-strip .es-meta { color: var(--muted); }
.fl2 .event-strip .es-cta { margin-left: auto; font-weight: 700; color: var(--amber-dark, #9a5a1e); text-decoration: none; white-space: nowrap; }
.fl2 .event-strip .es-cta:hover { text-decoration: underline; }
@media (max-width: 640px) { .fl2 .event-strip .es-cta { margin-left: 0; } }

/* Simple page heroes (Events, ...): headline + lede sit directly in .wrap on the dark band -- make them readable */
.fl2 .page-hero:not(.page-hero-simple):not(.page-hero-teachers) > .wrap > h1 { color: #fff; margin-bottom: 14px; }
.fl2 .page-hero:not(.page-hero-simple):not(.page-hero-teachers) > .wrap > p { color: rgba(255,255,255,.78); max-width: 640px; padding-bottom: 56px; margin: 0; line-height: 1.65; }

/* ============================================================
   2026-09-28 REDESIGN — homepage-specific components (prefix td-)
   Colors/fonts here are all CSS variables (see :root) so this whole
   block ports to tootii.com/.cn by copying the values, not the rules.
   Everything below is prefixed .fl2 to match (and beat the specificity
   of) the theme's existing .fl2 .btn / .fl2 h2 etc rules -- round 2
   feedback found several "looks unstyled" bugs that were actually this
   specificity gap (my un-prefixed .td-btn-ghost border, for example,
   was always losing to .fl2 .btn's `border: 1.5px solid transparent`).
   ============================================================ */

.fl2 .td-btn-ghost {
  background: transparent;
  color: var(--text-navy);
  border: 1.5px solid var(--border-soft);
}
.fl2 .td-btn-ghost:hover { background: var(--accent-green-soft); border-color: var(--accent-green); transform: translateY(-2px); }
.fl2 .btn, .fl2 .td-btn-ghost, .fl2 .td-contact-btn { min-height: 44px; }

/* Round 3, item 3: body copy baseline for the homepage (17px desktop / 16px mobile via the
   @media 480px override below) -- most homepage text already has its own explicit size, this
   only backstops anything left at the inherited default. */
.fl2 .td-home { font-size: 17px; }
.fl2 .td-section { padding: 90px 0; background: #fff; }
.fl2 .td-section-soft { background: var(--accent-green-soft); }
.fl2 .td-section-cream { background: var(--bg-cream); }
/* 2026-09-28 round 3: adjacent sections must never share a background -- section headers are
   centered everywhere (desktop + mobile), independent of the hero's own two-column layout. */
.fl2 .td-section-head { margin: 0 auto 24px; max-width: 700px; text-align: center; }
.fl2 .td-h2 { font-family: var(--font-body); font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; color: var(--text-navy); margin: 0; line-height: 1.25; }
.fl2 .td-h2-sub { display: block; font-family: var(--font-body); font-size: 0.55em; font-weight: 500; font-style: normal; color: var(--text-secondary); margin-top: 6px; }

/* --- 1. Hero --- */
.fl2 .td-hero {
  padding: 28px 0 40px;
  background: var(--bg-cream);
  background-image: radial-gradient(circle at 85% 15%, rgba(15, 110, 86, .06), transparent 45%),
    radial-gradient(circle at 8% 95%, rgba(233, 160, 58, .07), transparent 40%);
}
/* 2026-09-28 round 3: text column widened (1.3fr vs 1fr) and the max font-size lowered so
   "не думая о грамматике" stays on one line at 1440/1024px instead of wrapping to a 3rd line. */
.fl2 .td-hero-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.fl2 .td-hero-text { text-align: center; }
.fl2 .td-hero-h1 { font-family: var(--font-body); font-size: clamp(32px, 3.6vw, 46px); font-weight: 800; color: var(--text-navy); line-height: 1.2; margin: 0 0 16px; }
.fl2 .td-hero-h1-accent { color: var(--accent-green); display: inline-block; font-size: clamp(28px, 3.3vw, 42px); }
.fl2 .td-hero-lede { font-size: 18px; color: var(--text-secondary); margin: 0 0 24px; }
.fl2 .td-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; justify-content: center; }
.fl2 .td-hero-btn { flex: 0 0 auto; }
.fl2 .td-hero-note { font-size: 14px; color: var(--text-secondary); margin: 0; }
.fl2 .td-hero-visual { position: relative; display: block; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/3; }
.fl2 .td-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
.fl2 .td-hero-visual-placeholder { background: var(--bg-cream); border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; aspect-ratio: auto; min-height: 0; padding: 20px; }
.fl2 .td-hero-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fl2 .td-hero-play svg { width: 56px; height: 56px; fill: #fff; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }

/* --- 2. Как это работает --- */
.fl2 .td-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fl2 .td-step { display: flex; align-items: center; gap: 12px; background: var(--white, #fff); border: 1px solid var(--border-soft); border-radius: var(--radius-card); padding: 16px; }
.fl2 .td-step-num { flex: none; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: var(--accent-green); color: #fff; font-weight: 800; font-size: 14px; }
.fl2 .td-step-body h3 { font-size: 14.5px; margin: 0 0 3px; color: var(--text-navy); }
.fl2 .td-step-body p { font-size: 15px; color: var(--text-secondary); margin: 0; line-height: 1.45; }

/* --- 3. Языки + аудитория --- */
.fl2 .td-lang-cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.fl2 .td-lang-card { position: relative; flex: 1 1 160px; min-width: 140px; background: var(--bg-cream); border: 1px solid var(--border-soft); border-radius: var(--radius-card); padding: 22px; text-align: center; color: var(--text-navy); transition: transform .15s, box-shadow .15s; }
.fl2 .td-lang-card:not(.td-lang-soon):hover { transform: translateY(-3px); box-shadow: 0 10px 24px -12px rgba(4,44,83,.2); }
.fl2 .td-lang-flag { font-size: 32px; display: block; margin-bottom: 10px; }
.fl2 .td-lang-name { font-weight: 700; }
.fl2 .td-lang-soon { opacity: .7; }
.fl2 .td-soon-tag { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--accent-coral); background: var(--btn-orange-soft); padding: 3px 10px; border-radius: var(--radius-pill); }
.fl2 .td-audience-row { display: flex; flex-direction: column; gap: 12px; }
.fl2 .td-audience-label { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.fl2 .td-audience-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fl2 .td-chip { display: inline-block; padding: 7px 16px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--border-soft); font-size: 14px; color: var(--text-secondary); }
.fl2 .td-chip-link { color: var(--text-navy); font-weight: 600; }
.fl2 .td-chip-link:hover { border-color: var(--accent-green); color: var(--accent-green); }

/* --- 4. Почему годы не дают результата — ALWAYS 2 columns, even at 360px (round-2 fix) --- */
/* 2026-09-28 round 3: readable size (18px desktop) + more breathing room, capped to ~900px so
   lines don't stretch full-width on wide screens. */
.fl2 .td-pairs { display: flex; flex-direction: column; gap: 14px; margin: 0 auto 22px; max-width: 900px; }
.fl2 .td-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; position: relative; }
.fl2 .td-pair-block { display: flex; align-items: center; gap: 10px; padding: 18px 20px; font-size: 18px; line-height: 1.4; }
.fl2 .td-pair-icon { flex: none; width: 22px; height: 22px; }
.fl2 .td-pair-icon svg { width: 100%; height: 100%; }
.fl2 .td-pair-before { background: var(--bg-cream); border: 1px solid var(--border-soft); border-radius: 12px 0 0 12px; border-right: none; color: var(--text-secondary); }
.fl2 .td-pair-before .td-pair-icon { color: var(--text-secondary); }
.fl2 .td-pair-after { background: var(--accent-green-soft); border: 1px solid var(--accent-green); border-radius: 0 12px 12px 0; color: var(--text-navy); font-weight: 600; }
.fl2 .td-pair-after .td-pair-icon { color: var(--accent-green); }
.fl2 .td-pair-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-green); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.fl2 .td-no-pressure-strip { text-align: center; background: var(--btn-orange-soft); color: var(--btn-text-dark); border-radius: var(--radius-pill); padding: 12px 20px; font-size: 14px; font-weight: 600; max-width: 560px; margin: 0 auto 18px; }
.fl2 .td-founder-line { text-align: center; font-size: 14px; color: var(--text-secondary); }
.fl2 .td-founder-line a { color: var(--accent-green); font-weight: 600; }

/* --- 5. Преподаватели — one card per teacher, one row per language (round-2 fix) --- */
/* 2026-09-28 round 3: contained + centered/wrapped on desktop (no horizontal scroll, no
   breaking out of the page) -- the edge-bleed snap-scroller is restored mobile-only below. */
.fl2 .td-teachers-scroller { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px; overflow: visible; }
.fl2 .td-teachers-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding-left: 0; width: auto; }
.fl2 .td-teacher-card { scroll-snap-align: start; flex: 0 0 260px; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-card); padding: 26px 22px; text-align: center; }
.fl2 .td-teacher-photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; display: block; }
.fl2 .td-teacher-initials { width: 76px; height: 76px; border-radius: 50%; background: var(--accent-green-soft); color: var(--accent-green); font-weight: 800; font-size: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.fl2 .td-teacher-name { font-weight: 700; color: var(--text-navy); margin-bottom: 12px; }
.fl2 .td-teacher-lang-row { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0; border-top: 1px solid var(--border-soft); text-align: center; }
.fl2 .td-teacher-lang-row:first-of-type { border-top: 1px solid var(--border-soft); }
.fl2 .td-teacher-lang-name { font-size: 14px; font-weight: 700; color: var(--text-navy); }
.fl2 .td-teacher-lang-badge { display: block; font-size: 14px; font-weight: 700; color: var(--accent-green); }

/* --- 6. Истории --- */
.fl2 .td-story-video { max-width: 720px; margin: 28px auto 16px; aspect-ratio: 16/9; border-radius: var(--radius-card); overflow: hidden; background: var(--bg-cream); border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; }
.fl2 .td-h2-highlight { font-weight: 800; color: var(--accent-coral); }
.fl2 .td-story-video iframe { width: 100%; height: 100%; border: 0; }
.fl2 .td-video-inwork-chip { font-size: 14px; font-weight: 600; background: var(--btn-orange-soft); color: var(--btn-text-dark); padding: 10px 20px; border-radius: var(--radius-pill); }
.fl2 .td-story-note { text-align: center; font-size: 15px; color: var(--text-secondary); max-width: 480px; margin: 0 auto; }
.fl2 .td-reviews-row { margin-top: 32px; }
.fl2 .td-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.fl2 .td-review-card { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-card); padding: 20px; }
.fl2 .td-review-quote { font-size: 14.5px; color: var(--text-navy); margin: 0 0 10px; }
.fl2 .td-review-who { font-size: 14px; color: var(--text-secondary); }

/* --- 7. Цены --- */
.fl2 .td-price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.fl2 .td-price-card { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-card); padding: 18px 10px; text-align: center; }
.fl2 .td-price-card-featured { border-color: var(--btn-orange); background: var(--btn-orange-soft); }
.fl2 .td-price-card h3 { margin: 0 0 10px; font-size: 15px; color: var(--text-navy); }
.fl2 .td-price-amount { font-size: 17px; font-weight: 800; color: var(--text-navy); }
.fl2 .td-price-amount span { display: block; font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-top: 3px; }
.fl2 .td-price-note { text-align: center; font-size: 14px; color: var(--text-secondary); margin-bottom: 10px; }
.fl2 .td-price-link { display: block; text-align: center; font-weight: 700; color: var(--accent-green); }

/* --- 8. CTA bands --- */
/* 2026-09-29: bg matched to the pricing section right above it (--accent-green-soft, same as .td-section-soft)
   per feedback -- a deliberate exception to the "adjacent sections never share a bg" rhythm rule elsewhere
   on this page, requested to make the trial band read as a continuation of Pricing rather than a new block. */
.fl2 .td-cta-band-inner { max-width: 520px; margin: 0 auto; }
.fl2 .td-cta-note { color: var(--text-secondary); margin: 8px 0 20px; font-size: 14.5px; }
.fl2 .td-cta-btn { width: 100%; max-width: 340px; justify-content: center; display: inline-flex; }
/* 2026-09-29: trial CTA merged into the Цены section (both already shared the same bg) -- its own top
   border + spacing instead of being a separate section. Heading intentionally smaller than a normal .td-h2. */
.fl2 .td-price-cta { margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(4, 44, 83, .1); text-align: center; }
.fl2 .td-cta-band-h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 0; }

/* --- 9/10. FAQ + contact + partner (reuses .faq-list/.faq-item/.faq-q/.faq-a) --- */
.fl2 .td-faq-list .faq-q, .fl2 .td-partner-collapse .faq-q { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--text-navy); min-height: 44px; }
.fl2 .td-faq-list .faq-a, .fl2 .td-partner-collapse .faq-a { color: var(--text-secondary); }
.fl2 .td-contact-buttons { display: flex; gap: 10px; margin-bottom: 24px; }
.fl2 .td-contact-btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; border-radius: var(--radius-card); background: #fff; border: 1.5px solid var(--border-soft); color: var(--text-navy); font-size: 14px; font-weight: 700; transition: transform .15s, border-color .15s; }
.fl2 .td-contact-btn:hover { border-color: var(--accent-green); transform: translateY(-2px); }
.fl2 .td-contact-btn svg { width: 22px; height: 22px; }
/* 2026-09-28 round 3: "Станьте партнёром" redesigned as its own clearly-visible full-width
   card (was reading as a plain, easy-to-miss text link) -- reuses the same .faq-item/.faq-q
   JS toggle as the FAQ accordion above, just with its own look: 2px green border, a round
   icon, title + one-line description, and a chevron that flips + the card fills on open. */
.fl2 .td-partner-collapse { max-width: 900px; margin: 0 auto; }
.fl2 .td-partner-collapse .faq-item { border: 2px solid var(--accent-green); border-radius: var(--radius-card); background: #fff; transition: background .15s; }
.fl2 .td-partner-collapse .faq-item.open { background: var(--accent-green-soft); }
.fl2 .td-partner-collapse .faq-q { display: flex; align-items: center; gap: 14px; padding: 18px 20px; min-height: 0; }
.fl2 .td-partner-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-green-soft); color: var(--accent-green); display: flex; align-items: center; justify-content: center; }
.fl2 .td-partner-collapse .faq-item.open .td-partner-icon { background: #fff; }
.fl2 .td-partner-icon svg { width: 22px; height: 22px; }
.fl2 .td-partner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fl2 .td-partner-title { font-weight: 800; color: var(--text-navy); font-size: 17px; }
.fl2 .td-partner-desc { font-size: 14px; color: var(--text-secondary); font-weight: 500; }
.fl2 .td-partner-chevron { flex: none; width: 20px; height: 20px; color: var(--accent-green); transition: transform .2s ease; }
.fl2 .td-partner-collapse .faq-item.open .td-partner-chevron { transform: rotate(180deg); }
.fl2 .td-partner-collapse .faq-a { padding: 0 20px 20px 74px; }

/* 2026-09-29 round 5 additions ------------------------------------------------------------------------ */

/* Section subtitle (a second, smaller line under an h2 that is NOT part of the title itself, e.g. section 4
   "Почему годы учёбы не дают результата?" / "И что работает на самом деле" -- distinct from .td-h2-sub,
   which is an inline <span> inside the h2 used elsewhere; this is its own paragraph so it never counts as
   part of the heading's accessible name. */
.fl2 .td-section-subtitle { margin: 8px 0 0; font-size: 16px; font-weight: 500; color: var(--text-secondary); }

/* Method section (2. Как это работает) — pyramid diagram left, list right; stacks on mobile. */
.fl2 .td-method-grid { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: center; max-width: 780px; margin: 0 auto; }
.fl2 .td-pyramid { width: 100%; max-width: 260px; margin: 0 auto; }
.fl2 .td-pyramid svg { width: 100%; height: auto; }
.fl2 .td-method-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fl2 .td-method-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-card); padding: 16px; }
.fl2 .td-method-item h3 { font-size: 17px; font-weight: 800; margin: 0 0 3px; color: var(--text-navy); }
.fl2 .td-method-item p { font-size: 15px; font-weight: 400; color: #5F5E5A; margin: 0; line-height: 1.45; }

/* 2026-09-29 round 2: 4-layer DLI pyramid -- reuses .td-method-grid/.td-pyramid/.td-method-list/
   .td-method-item as the base (same component as the 3-layer version), these are additive overrides only.
   Bigger canvas (480x530, ~530px tall to match the 4-card list) so every label fits on one line at >=16px
   without shrinking fonts -- see the layer-width math in the section's own HTML comment. Grid top-aligns
   (not center) so the pyramid's own top edge lines up with the list's top edge; the mascot perches above
   that line, in space reserved by margin-top on the grid itself, so it never throws off that alignment. */
/* 2026-09-29 round 5: shrunk further (viewBox height 680->550, ~324px rendered vs ~408px) and switched to
   bottom-alignment (align-items:flex-end) per feedback -- the pyramid is now noticeably shorter than the
   4-card list, so anchoring at the shared BASE (not the top) reads better than a top-aligned gap opening up
   at the bottom. margin-top dropped since flex-end naturally pushes the shorter column down; kept a small
   value purely so the mascot (which sits above the SVG) never grazes the subtitle above on any viewport. */
.fl2 .td-method-grid-dli { grid-template-columns: 448px 1fr; align-items: flex-end; margin-top: 24px; max-width: 1000px; }
.fl2 .td-pyramid-dli { position: relative; max-width: 448px; overflow: visible; }
.fl2 .td-pyramid-mascot { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: -3px; width: 68px; height: 68px; object-fit: contain; }
.fl2 .td-method-badge { flex: none; width: 30px; height: 30px; line-height: 27px; text-align: center; border-radius: 50%; font-weight: 800; font-size: 14px; }
.fl2 .td-method-badge-1 { background: #E1F5EE; color: #0d1433; border: 1.5px solid #0F6E56; }
.fl2 .td-method-badge-2 { background: #0F6E56; color: #fff; }
.fl2 .td-method-badge-3 { background: #FAEEDA; color: #412402; border: 2px solid #e9a03a; line-height: 24px; }
.fl2 .td-method-badge-4 { background: #e9a03a; color: #412402; }
.fl2 .td-method-icon { flex: none; width: 22px; height: 22px; color: var(--accent-green); }
.fl2 .td-method-icon svg { width: 100%; height: 100%; }
@media (max-width: 480px) {
  .fl2 .td-method-grid-dli { margin-top: 44px; }
  .fl2 .td-pyramid-mascot { width: 40px; height: 40px; margin-bottom: -2px; }
}

/* Pricing table (7. Цены) — replaces the old 3-card grid; group column gets a diagonal pattern + badge. */
.fl2 .td-price-table-wrap { overflow-x: auto; margin-bottom: 14px; }
.fl2 .td-price-table { width: 100%; max-width: 640px; margin: 0 auto; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border-soft); }
.fl2 .td-price-table th, .fl2 .td-price-table td { padding: 14px 16px; text-align: center; }
/* table-layout:fixed + explicit widths (2026-09-29: "Группа до 4" and "Индивидуально" must be equal width,
   not sized by their own content -- the badge/diagonal-pattern column used to render wider). */
.fl2 .td-price-table th:first-child, .fl2 .td-price-table td:first-child { width: 24%; padding-left: 24px; }
.fl2 .td-price-table th:not(:first-child), .fl2 .td-price-table td:not(:first-child) { width: 38%; }
.fl2 .td-price-table thead th { font-size: 15px; font-weight: 800; color: var(--text-navy); position: relative; padding-top: 30px; }
.fl2 .td-price-table tbody th { text-align: left; font-weight: 700; color: var(--text-navy); font-size: 14px; }
.fl2 .td-price-table tbody td { font-size: 18px; font-weight: 800; color: var(--text-navy); }
.fl2 .td-price-table tbody tr:not(:last-child) th, .fl2 .td-price-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border-soft); }
/* 2026-09-29: "Любимый выбор" column no longer gets its own diagonal-pattern background -- same white as
   the other columns now, badge only (feedback: the pattern + tint looked like a separate, wider block). */
.fl2 .td-price-badge { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); background: var(--btn-orange); color: var(--btn-text-dark); font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.fl2 .td-price-trial-note { font-weight: 700; color: var(--accent-green); }

/* Reviews (6. Истории) — 5-star row, source label, and a "перевод" tag for the translated EN reviews. */
.fl2 .td-review-stars { color: var(--btn-orange); letter-spacing: 2px; font-size: 14px; margin-bottom: 8px; }
.fl2 .td-review-translation { font-size: 13.5px; color: var(--text-secondary); font-style: italic; margin: 0 0 10px; }
.fl2 .td-review-translation-tag { display: inline-block; background: var(--accent-green-soft); color: var(--accent-green); font-style: normal; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--radius-pill); margin-right: 8px; }
.fl2 .td-review-source { color: var(--accent-green); font-weight: 700; }

/* FAQ inline CTA (9. Частые вопросы — "Можно ли зарегистрироваться бесплатно?") */
.fl2 .td-faq-cta { display: inline-flex; margin-top: 12px; padding: 8px 18px; font-size: 14px; }

/* Partners (10. Наши партнёры) — full-width bordered card, matching the old accordion's visual weight. */
.fl2 .td-partners-mascot { display: block; margin: 0 auto 14px; }
.fl2 .td-partners-lead { max-width: 640px; margin: 0 auto 24px; text-align: center; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.fl2 .td-partners-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto 20px; }
.fl2 .td-partner-card { display: block; border: 1.5px solid rgba(211, 209, 199, .55); border-radius: var(--radius-card); background: #fff; padding: 24px; text-align: center; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.fl2 a.td-partner-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -12px rgba(4,44,83,.2); }
/* Fixed box, object-fit:fill (2026-09-29: logos of very different aspect ratios -- 240x74 vs 200x200 --
   must land at the same visual height; stretching to fill reads better here than letterboxing/cropping a
   wordmark logo would). */
/* 2026-09-29: fixed 120x120 box, logo centered inside it at a fixed 100px width with its NATURAL height
   (no more object-fit:fill deforming it) -- width is what's pinned, height follows the logo's own aspect
   ratio and is simply centered in the box, whatever that height comes out to. */
.fl2 .td-partner-logo-box { width: 120px; height: 120px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
.fl2 .td-partner-card img { width: 100px; height: auto; max-height: 100%; display: block; }
.fl2 .td-partner-card-name { font-weight: 800; color: var(--text-navy); font-size: 16px; }
.fl2 .td-partner-card-city { color: var(--text-secondary); font-size: 14px; margin-top: 2px; }

/* Logo — solid, bold, identical header/footer (round-2 fix: was a washed-out gradient) */
.fl2 .logo-text {
  font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: .015em;
  background-image: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial; color: var(--accent-green);
}
.fl2.is-home .logo-text, .fl2 .logo-text--dark { color: var(--accent-green); background-image: none; }

/* Mobile */
@media (max-width: 860px) {
  .fl2 .td-hero-wrap { grid-template-columns: 1fr; }
  .fl2 .td-hero-ctas { flex-direction: column; align-items: center; }
  .fl2 .td-hero-btn { justify-content: center; }
  /* Method pyramid stacks above its list on mobile/tablet, per the brief ("pyramid on top"). */
  .fl2 .td-method-grid { grid-template-columns: 1fr; max-width: 420px; }
  .fl2 .td-pyramid { max-width: 200px; }
}
/* 2026-09-28 round 3: teacher cards revert to an edge-bleed snap-scroller on mobile only
   (desktop/tablet now shows a contained, centered, wrapping row -- see the base rules above). */
@media (max-width: 860px) {
  .fl2 .td-teachers-scroller { max-width: none; margin: 0; padding: 0 16px 8px 0; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; }
  .fl2 .td-teachers-row { flex-wrap: nowrap; justify-content: flex-start; padding-left: 16px; width: max-content; }
}
@media (max-width: 480px) {
  .fl2 .td-home { font-size: 16px; }
  .fl2 .td-hero-h1 { font-size: 30px; }
  .fl2 .td-hero-h1-accent { font-size: 26px; }
  .fl2 .td-section { padding: 56px 0; }
  .fl2 .td-steps { grid-template-columns: 1fr; gap: 10px; }
  .fl2 .td-step { padding: 12px; }
  /* Global min text size (round 3): nothing below 14px, even on the smallest screens. */
  .fl2 .td-pair-block { font-size: 16px; padding: 14px; }
  .fl2 .td-pair-icon { width: 18px; height: 18px; }
  .fl2 .td-lang-cards { flex-wrap: nowrap; gap: 8px; }
  .fl2 .td-lang-card { flex: 1 1 0; min-width: 0; padding: 12px 6px; }
  .fl2 .td-lang-flag { font-size: 22px; margin-bottom: 6px; }
  .fl2 .td-lang-name { font-size: 14px; }
  .fl2 .td-soon-tag { font-size: 14px; padding: 2px 6px; margin-top: 4px; }
  .fl2 .td-price-cards { gap: 6px; }
  .fl2 .td-price-card { padding: 12px 6px; }
  .fl2 .td-price-card h3 { font-size: 14px; margin-bottom: 6px; }
  .fl2 .td-price-amount { font-size: 15px; }
  .fl2 .td-price-amount span { font-size: 14px; }
  .fl2 .td-price-table th, .fl2 .td-price-table td { padding: 10px 8px; }
  .fl2 .td-price-table thead th { font-size: 13px; padding-top: 26px; }
  .fl2 .td-price-table tbody td { font-size: 15px; }
  .fl2 .td-price-badge { font-size: 10px; padding: 2px 8px; }
  .fl2 .td-partner-card { padding: 16px; }
}

/* Events: homepage strip, full-width event rows, single-event landing page (2026-09-29 redesign) */
.fl2 .event-strip { background: var(--accent-green-soft, var(--paper-2)); border-bottom: 1px solid var(--line); padding: 12px 0; }
.fl2 .event-strip-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-body); font-size: 14px; }
.fl2 .event-strip .es-title { font-weight: 700; color: var(--ink); }
.fl2 .event-strip .es-when, .fl2 .event-strip .es-meta { color: var(--muted); }
.fl2 .event-strip .es-cta { margin-left: auto; font-weight: 700; color: var(--teal-dark); white-space: nowrap; }
.fl2 .event-strip .es-cta:hover { color: var(--amber-dark, var(--teal-dark)); }

.fl2 .event-rows { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.fl2 .event-row { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; transition: transform .2s, box-shadow .2s; }
.fl2 .event-row:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -16px rgba(20, 25, 31, .18); }
.fl2 .event-row-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; background: var(--accent-green-soft, var(--paper-2)); }
.fl2 .event-row-date .erd-day { font-size: 24px; font-weight: 800; color: var(--teal-dark); line-height: 1; }
.fl2 .event-row-date .erd-mon { font-family: var(--font-body); font-size: 10px; letter-spacing: .08em; color: var(--teal-dark); margin-top: 2px; }
.fl2 .event-row-img { width: 96px; height: 64px; flex-shrink: 0; border-radius: 8px; background-color: var(--paper-2); background-size: cover; background-position: center; }
.fl2 .event-row-body { flex: 1; min-width: 0; }
.fl2 .event-row-body h3 { font-size: 18px; margin-bottom: 4px; line-height: 1.3; }
.fl2 .event-row-meta { font-size: 14.5px; color: var(--muted); }
.fl2 .event-row-cta { flex-shrink: 0; font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--teal-dark); white-space: nowrap; }
@media (max-width: 640px) {
  .fl2 .event-row { flex-wrap: wrap; }
  .fl2 .event-row-img { display: none; }
  .fl2 .event-row-cta { width: 100%; margin-top: 4px; }
}

.fl2 .event-landing { max-width: 720px; padding: 48px 32px 72px; }
@media (max-width: 640px) {
  /* Tighter side margin on narrow phones (32px each side ate ~17% of a
     375px viewport) -- still enough to keep the title/body clear of the
     screen edges, the actual bug (padding: 48px 0 72px -- the 3-value
     shorthand's middle value sets BOTH left and right to 0, zeroing
     horizontal padding at every width, not just mobile) reported 2026-09-30. */
  .fl2 .event-landing { padding-left: 20px; padding-right: 20px; }
}
.fl2 .event-landing-back { display: inline-block; margin-bottom: 20px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--teal-dark); }
.fl2 .event-landing-img { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background-color: var(--paper-2); background-size: cover; background-position: center; margin-bottom: 24px; }
.fl2 .event-landing h1 { font-size: clamp(26px, 3.5vw, 38px); color: var(--ink); margin-bottom: 10px; }
.fl2 .event-landing-meta { font-size: 15px; color: var(--muted); margin-bottom: 20px; }
.fl2 .event-landing-desc { font-size: 16px; color: var(--ink); line-height: 1.7; margin-bottom: 32px; white-space: pre-line; }
.fl2 .event-landing-enroll { display: inline-flex; }



/* ==========================================================================
   2026-10-03 — INNER PAGES MATCH THE HOMEPAGE
   Metod, Story, Become a teacher, Teacher standards, Careers, Insights,
   Contact, Privacy, Teachers, Booking. Scoped by `body.inner-2` (added in
   inc/routes.php) so the legacy SEO pages, Pricing, Languages and Events are
   untouched. The homepage's own design tokens (--bg-cream, --text-navy,
   --accent-green, --btn-orange ...) are the single source of truth: the
   legacy tokens the old components read are remapped to them here, then the
   shared building blocks (hero, section head, cards, chips, CTA band, dark
   bands) are brought in line with the td-* homepage components.
   ========================================================================== */
body.fl2.inner-2 {
  --ink: var(--text-navy);
  --ink-soft: #244B73;
  --paper: var(--bg-cream);
  --paper-2: var(--bg-cream);
  --teal: var(--accent-green);
  --teal-dark: var(--accent-green);
  --teal-light: var(--accent-green-soft);
  --amber: var(--btn-orange);
  --amber-dark: #B96B27;
  --line: var(--border-soft);
  --muted: var(--text-secondary);
  --shadow: 0 12px 28px -14px rgba(4, 44, 83, .22);
  --shadow-sm: 0 4px 16px -8px rgba(4, 44, 83, .15);
  background: #fff;
  color: var(--text-navy);
  font-size: 17px;
}

/* --- type: bold navy headings like the homepage --- */
body.fl2.inner-2 h1,
body.fl2.inner-2 h2 { font-weight: 800; letter-spacing: 0; line-height: 1.2; color: var(--text-navy); }
body.fl2.inner-2 h3,
body.fl2.inner-2 h4 { font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--text-navy); }
body.fl2.inner-2 em { font-style: normal; }

/* --- 1. Heroes: cream + soft glow, navy text, green accent (= .td-hero) --- */
body.fl2.inner-2 .page-hero,
body.fl2.inner-2 .page-hero-simple,
body.fl2.inner-2 .page-hero-recruit,
body.fl2.inner-2 .page-hero-insights,
body.fl2.inner-2 .page-hero-teachers,
body.fl2.inner-2 .legal-hero,
body.fl2.inner-2 .contact-hero {
  background: var(--bg-cream);
  background-image: radial-gradient(circle at 85% 15%, rgba(15, 110, 86, .07), transparent 45%),
    radial-gradient(circle at 8% 95%, rgba(233, 160, 58, .08), transparent 40%);
  border-bottom: 1px solid var(--border-soft);
  padding: 56px 0 48px;
  color: var(--text-navy);
}
body.fl2.inner-2 .page-hero-text { padding-bottom: 0; }
body.fl2.inner-2 .page-hero h1,
body.fl2.inner-2 .page-hero-text h1,
body.fl2.inner-2 .page-hero > .wrap > h1,
body.fl2.inner-2 .page-hero-recruit h1,
body.fl2.inner-2 .page-hero-insights h1,
body.fl2.inner-2 .page-hero-simple h1,
body.fl2.inner-2 .legal-hero h1,
body.fl2.inner-2 .contact-hero h1 {
  color: var(--text-navy) !important;
  font-family: var(--font-body);
  font-size: clamp(30px, 3.6vw, 46px);
}
body.fl2.inner-2 .page-hero h1 em,
body.fl2.inner-2 .page-hero-text h1 em,
body.fl2.inner-2 .page-hero-recruit h1 em,
body.fl2.inner-2 .page-hero-insights h1 em,
body.fl2.inner-2 .page-hero-simple h1 em { color: var(--accent-green) !important; }
body.fl2.inner-2 .page-hero p,
body.fl2.inner-2 .page-hero-text p,
body.fl2.inner-2 .page-hero-text p.lede,
body.fl2.inner-2 .page-hero > .wrap > p,
body.fl2.inner-2 .page-hero-recruit p.lede,
body.fl2.inner-2 .page-hero-insights p,
body.fl2.inner-2 .page-hero-simple p,
body.fl2.inner-2 .contact-hero p,
body.fl2.inner-2 .legal-hero .updated {
  color: var(--text-secondary) !important;
  font-size: 18px;
  padding-bottom: 0;
}
body.fl2.inner-2 .page-hero-inner { align-items: center; }
body.fl2.inner-2 .page-hero-recruit,
body.fl2.inner-2 .page-hero-simple { text-align: center; }

/* --- 2. Buttons: orange primary, outlined ghost (= .td-btn-ghost) --- */
body.fl2.inner-2 .btn-ghost,
body.fl2.inner-2 .btn-ghost-white,
body.fl2.inner-2 .btn-ghost-ink,
body.fl2.inner-2 .btn-ghost-card {
  background: transparent;
  color: var(--text-navy);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-pill);
}
body.fl2.inner-2 .btn-ghost:hover,
body.fl2.inner-2 .btn-ghost-white:hover,
body.fl2.inner-2 .btn-ghost-ink:hover,
body.fl2.inner-2 .btn-ghost-card:hover { background: var(--accent-green-soft); border-color: var(--accent-green); color: var(--text-navy); transform: translateY(-2px); }
body.fl2.inner-2 .btn-teal { background: var(--btn-orange); color: var(--btn-text-dark); }
body.fl2.inner-2 .btn-teal:hover { background: var(--accent-coral); }
body.fl2.inner-2 .btn-ghost-white { display: inline-flex; align-items: center; padding: 13px 24px; font-weight: 600; font-size: 14.5px; min-height: 44px; }

/* --- 3. Sections: white / cream / soft green, centred bold heads (= .td-section) --- */
body.fl2.inner-2 .fl2-section { background: #fff; padding: 80px 0; color: var(--text-navy); }
body.fl2.inner-2 .fl2-section-alt { background: var(--bg-cream); }
body.fl2.inner-2 .fl2-section-dark { background: var(--accent-green-soft); color: var(--text-navy); }
body.fl2.inner-2 .fl2-section-head { max-width: 700px; margin: 0 auto 36px; text-align: center; }
body.fl2.inner-2 .fl2-section-head h2 { font-size: clamp(28px, 3.4vw, 40px); }
body.fl2.inner-2 .fl2-section-head p,
body.fl2.inner-2 .fl2-section-dark .fl2-section-head p { color: var(--text-secondary); font-size: 17px; }
body.fl2.inner-2 .fl2-section-dark .fl2-section-head h2 { color: var(--text-navy); }
body.fl2.inner-2 .fl2-section p { color: var(--text-secondary); }
body.fl2.inner-2 .fl2-section-dark :is(h1, h2, h3, h4, strong) { color: var(--text-navy); }
body.fl2.inner-2 .fl2-section-dark :is(p, li, span, div) { color: var(--text-secondary); }

/* --- 4. Cards: white, soft border, 20px radius, no heavy shadow (= .td-step / .td-teacher-card) --- */
body.fl2.inner-2 :is(.brain-card, .active-card, .creator-card, .shared-card, .vs-card, .career-card, .article-card,
  .featured-card, .sidebar-card, .cert-step, .booking-step, .calc-wrap, .careers-tier) {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: none;
}
/* --- 5. Chips / filter bars (= .td-chip) --- */
body.fl2.inner-2 .filter-bar { background: #fff; border-bottom: 1px solid var(--border-soft); }
body.fl2.inner-2 :is(.lang-tab, .cat-tab, .type-pill, .track-pill, .proof-chip, .sidebar-chip, .cc-badge) {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}
body.fl2.inner-2 :is(.lang-tab, .cat-tab, .type-pill, .track-pill):hover { border-color: var(--accent-green); color: var(--accent-green); }
body.fl2.inner-2 :is(.lang-tab, .cat-tab, .type-pill, .track-pill).active { background: var(--accent-green-soft); border-color: var(--accent-green); color: var(--accent-green); }

/* --- 6. Closing CTA band: soft green, not dark navy --- */
body.fl2.inner-2 .page-cta { background: var(--accent-green-soft); border-top: 1px solid var(--border-soft); padding: 72px 0; text-align: center; }
body.fl2.inner-2 .page-cta h2 { color: var(--text-navy); }
body.fl2.inner-2 .page-cta p { color: var(--text-secondary); }
body.fl2.inner-2 .page-cta-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --- 7. Legal pages (Privacy, Teacher standards): readable on white --- */
body.fl2.inner-2 .legal-layout { padding: 48px 0 88px; }
body.fl2.inner-2 .legal-body h2 { font-size: clamp(20px, 2.2vw, 26px); border-top: 1px solid var(--border-soft); }
body.fl2.inner-2 .legal-body p,
body.fl2.inner-2 .legal-body li { color: var(--text-secondary); font-size: 17px; }
body.fl2.inner-2 .legal-body a { color: var(--accent-green); text-decoration-color: var(--accent-green-soft); }
body.fl2.inner-2 .legal-highlight,
body.fl2.inner-2 .legal-highlight p { background: var(--accent-green-soft); color: var(--text-navy); }
body.fl2.inner-2 .legal-highlight { border-radius: 14px; border: 1px solid var(--accent-green-soft); }
body.fl2.inner-2 .legal-nav a { color: var(--text-secondary); border-color: var(--border-soft); }
body.fl2.inner-2 .legal-nav a:hover { color: var(--accent-green); }
body.fl2.inner-2 .legal-nav-title { color: var(--text-secondary); font-family: var(--font-body); letter-spacing: .06em; }

/* --- 4b. Dark panels -> light. Highlight cards go soft green with a green edge (= .td-pair-after);
   panels that sit on a soft-green section go white so they still read as cards. --- */
body.fl2.inner-2 :is(.brain-card.new, .vs-card.us, .formula-block, .drill-strip, .become-nudge, .group-info, .calc-result,
  .interlude, .page-cta-booking) {
  background: var(--accent-green-soft);
  border: 1px solid var(--accent-green);
  border-radius: var(--radius-card);
  box-shadow: none;
  color: var(--text-navy);
}
body.fl2.inner-2 :is(.active-card, .loyalty-benefit, .loyalty-timeline, .commission-box, .apply-wrap, .hero-stats) {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: none;
  color: var(--text-navy);
}
body.fl2.inner-2 :is(.brain-card.new, .vs-card.us, .formula-block, .drill-strip, .become-nudge, .group-info, .calc-result, .interlude,
  .page-cta-booking, .active-card, .loyalty-benefit, .loyalty-timeline, .commission-box, .apply-wrap, .hero-stats)
  :is(h1, h2, h3, h4, h5, strong, b) { color: var(--text-navy) !important; font-family: var(--font-body); font-style: normal; }
body.fl2.inner-2 :is(.brain-card.new, .vs-card.us, .formula-block, .drill-strip, .become-nudge, .group-info, .calc-result, .interlude,
  .page-cta-booking, .active-card, .loyalty-benefit, .loyalty-timeline, .commission-box, .apply-wrap, .hero-stats)
  :is(p, li, span, div, label, small) { color: var(--text-secondary); font-style: normal; }
body.fl2.inner-2 .brain-card.new .icon,
body.fl2.inner-2 .vs-card.us .icon { background: var(--accent-green); color: #fff; }
body.fl2.inner-2 .brain-card.old .icon { background: var(--btn-orange-soft); color: var(--accent-coral); }
body.fl2.inner-2 .brain-card.new li,
body.fl2.inner-2 .vs-card.us li { color: var(--text-navy); }
body.fl2.inner-2 .drill-badge { background: var(--accent-green); color: #fff !important; }
body.fl2.inner-2 .calc-result .cb-row.total .cb-label,
body.fl2.inner-2 .calc-result .cb-total { color: var(--text-navy) !important; font-weight: 700; }
body.fl2.inner-2 .lt-dot.muted { background: var(--border-soft); }
body.fl2.inner-2 .calc-breakdown { border-top-color: var(--border-soft); }
body.fl2.inner-2 .commission-divider { background: var(--border-soft); }
body.fl2.inner-2 .stat-num { color: var(--accent-green) !important; font-style: normal; font-weight: 800; }
body.fl2.inner-2 .stat-lbl { color: var(--text-secondary) !important; }
body.fl2.inner-2 .stat-item + .stat-item { border-left-color: var(--border-soft); }

/* Dark visual cards in the method page's pillars / insights images: soft instead of near-black */
body.fl2.inner-2 .pillar-visual,
body.fl2.inner-2 .pillar-visual.dark { background: var(--accent-green-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-card); }
body.fl2.inner-2 .pillar-visual :is(span, div, p, strong, h4) { color: var(--text-navy); }
body.fl2.inner-2 .pillar-visual .student-role,
body.fl2.inner-2 .pillar-visual .ss-label { color: var(--text-secondary); }
body.fl2.inner-2 .featured-img,
body.fl2.inner-2 .ac-img,
body.fl2.inner-2 .ac-img.dark,
body.fl2.inner-2 .ac-img.teal { background: var(--accent-green-soft); }
body.fl2.inner-2 .feat-quote { color: var(--text-navy); font-style: normal; font-weight: 700; }
body.fl2.inner-2 .proof-card-video { background: var(--accent-green-soft); }

/* Apply / contact style forms on a white card */
body.fl2.inner-2 .form-group label,
body.fl2.inner-2 .form-check label { color: var(--text-secondary); font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
body.fl2.inner-2 .form-group input,
body.fl2.inner-2 .form-group select,
body.fl2.inner-2 .form-group textarea { background: #fff; border: 1px solid var(--border-soft); color: var(--text-navy); border-radius: 12px; }
body.fl2.inner-2 .form-group input::placeholder,
body.fl2.inner-2 .form-group textarea::placeholder { color: #9a998f; }
body.fl2.inner-2 .form-group select option { background: #fff; color: var(--text-navy); }

/* Story page: dark opening scene -> cream hero, teal proof band -> soft green */
body.fl2.inner-2 .opening { background: var(--bg-cream); border-bottom: 1px solid var(--border-soft); padding: 64px 0 56px; }
body.fl2.inner-2 .opening h1 { color: var(--text-secondary) !important; letter-spacing: 0; font-weight: 600; }
body.fl2.inner-2 .opening h1 em { color: var(--text-navy) !important; font-family: var(--font-body); font-style: normal; font-weight: 800; }
body.fl2.inner-2 .opening-caption,
body.fl2.inner-2 .scene-label { color: var(--text-secondary); font-style: normal; }
body.fl2.inner-2 .proof-band { background: var(--accent-green-soft); }
body.fl2.inner-2 .proof-copy h2 { color: var(--text-navy); }
body.fl2.inner-2 .proof-copy p { color: var(--text-secondary); }
body.fl2.inner-2 .proof-chip { background: #fff; color: var(--text-navy); border-color: var(--border-soft); }
body.fl2.inner-2 .pq,
body.fl2.inner-2 .narrative blockquote { border-left-color: var(--accent-green); color: var(--text-navy); font-style: normal; }

/* --- 8. FAQ accordion (Method, Contact) --- */
body.fl2.inner-2 .faq-item { border-bottom: 1px solid var(--border-soft); }
body.fl2.inner-2 .faq-q { color: var(--text-navy); font-weight: 700; font-family: var(--font-body); }
body.fl2.inner-2 .faq-a { color: var(--text-secondary); }


/* Centered heroes keep their lede centred (the legacy rule zeroes the margins) */
body.fl2.inner-2 .page-hero-recruit p,
body.fl2.inner-2 .page-hero-recruit p.lede,
body.fl2.inner-2 .page-hero-simple p,
body.fl2.inner-2 .page-hero-insights p { margin-left: auto !important; margin-right: auto !important; text-align: center; }
body.fl2.inner-2 .page-hero-insights { text-align: center; }
body.fl2.inner-2 .page-hero-insights h1 { margin-left: auto; margin-right: auto; }
/* Figures: bold like the homepage price cards, not light/italic display type */
body.fl2.inner-2 :is(.cr-amount, .price-num, .stat-num, .commission-item .val, .commission-item .big) { font-family: var(--font-body); font-style: normal; font-weight: 800; color: var(--text-navy); }
body.fl2.inner-2 .calc-result .cr-amount { color: var(--accent-green); }


/* Story: accent word + sidebar figures; Insights: centred filter chips */
body.fl2.inner-2 .opening h1 em span { color: var(--accent-green) !important; }
body.fl2.inner-2 .ss-num,
body.fl2.inner-2 .lt-age { font-family: var(--font-body); font-style: normal; font-weight: 800; color: var(--accent-green); }
body.fl2.inner-2 .ss-lbl { color: var(--text-secondary); }
body.fl2.inner-2 .filter-inner { justify-content: center; flex-wrap: wrap; gap: 10px 14px; }
body.fl2.inner-2 .filter-bar-insights .filter-inner { gap: 10px; }


/* ==========================================================================
   Footer contacts: icon + handle/number/address (all pages)
   ========================================================================== */
.fl2 .footer-contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.fl2 .footer-trust-strip a.fc-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text-navy); font-weight: 600; text-decoration: none; }
.fl2 .footer-trust-strip a.fc-link svg { width: 18px; height: 18px; flex: none; fill: var(--accent-green); transition: transform .15s; }
.fl2 .footer-trust-strip a.fc-link:hover { color: var(--accent-green); }
.fl2 .footer-trust-strip a.fc-link:hover svg { transform: translateY(-1px); }
.fl2 .footer-trust-strip .fc-hours { color: var(--text-secondary); }

/* ==========================================================================
   Contact page: one compact row of icon chips (no big cards)
   ========================================================================== */
body.fl2.inner-2 .contact-hero { text-align: center; }
body.fl2.inner-2 .contact-hero p { margin: 0 auto; max-width: 560px; }
body.fl2.inner-2 .ct-channels { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 900px; margin: 0 auto; }
body.fl2.inner-2 .ct-chip { display: inline-flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); color: var(--text-navy); font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
body.fl2.inner-2 .ct-chip:hover { transform: translateY(-2px); border-color: var(--accent-green); box-shadow: 0 10px 24px -14px rgba(4, 44, 83, .3); }
body.fl2.inner-2 .ct-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-green-soft); color: var(--accent-green); }
body.fl2.inner-2 .ct-ico svg { width: 20px; height: 20px; fill: currentColor; }
body.fl2.inner-2 .ct-chip.tg .ct-ico { background: #229ED9; color: #fff; }
body.fl2.inner-2 .ct-chip.wa .ct-ico { background: #25D366; color: #fff; }
body.fl2.inner-2 .ct-note { text-align: center; color: var(--text-secondary); font-size: 16px; margin: 22px 0 0; }
body.fl2.inner-2 .ct-regions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 14px 0 0; font-size: 15px; color: var(--text-secondary); }
body.fl2.inner-2 .ct-regions .flag { margin-right: 4px; }
body.fl2.inner-2 .ct-faq { max-width: 760px; margin: 0 auto; }

/* ==========================================================================
   Teachers page (real teachers from the app, homepage card style) + Booking steps
   ========================================================================== */
body.fl2.inner-2 .tp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
body.fl2.inner-2 .tp-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; }
body.fl2.inner-2 .tp-chip { border: 1px solid var(--border-soft); background: #fff; border-radius: var(--radius-pill); padding: 9px 20px; font: 600 15px var(--font-body); color: var(--text-secondary); cursor: pointer; }
body.fl2.inner-2 .tp-chip:hover { border-color: var(--accent-green); color: var(--accent-green); }
body.fl2.inner-2 .tp-chip.active { background: var(--accent-green-soft); border-color: var(--accent-green); color: var(--accent-green); }
body.fl2.inner-2 .tp-grid { justify-content: center; }
body.fl2.inner-2 .tp-card[hidden] { display: none; }
body.fl2.inner-2 .tp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
body.fl2.inner-2 .tp-empty { text-align: center; color: var(--text-secondary); }
body.fl2.inner-2 .tp-empty a { color: var(--accent-green); font-weight: 700; }
body.fl2.inner-2 .become-nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; padding: 28px 32px; max-width: 900px; margin: 0 auto; }
body.fl2.inner-2 .become-nudge p { margin: 0; max-width: 560px; color: var(--text-secondary); }

body.fl2.inner-2 .bk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; margin: 0 auto; }
body.fl2.inner-2 .bk-step { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-card); padding: 28px 22px; text-align: center; }
body.fl2.inner-2 .bk-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-green); color: #fff; font-weight: 800; margin-bottom: 14px; }
body.fl2.inner-2 .bk-step h3 { font-size: 18px; margin: 0 0 8px; }
body.fl2.inner-2 .bk-step p { margin: 0; font-size: 16px; color: var(--text-secondary); line-height: 1.5; }
body.fl2.inner-2 .bk-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
@media (max-width: 860px) { body.fl2.inner-2 .bk-steps { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
  body.fl2.inner-2 .page-hero,
  body.fl2.inner-2 .page-hero-simple,
  body.fl2.inner-2 .page-hero-recruit,
  body.fl2.inner-2 .page-hero-insights,
  body.fl2.inner-2 .page-hero-teachers,
  body.fl2.inner-2 .legal-hero,
  body.fl2.inner-2 .contact-hero { padding: 40px 0 36px; }
  body.fl2.inner-2 .fl2-section { padding: 56px 0; }
}


/* ==========================================================================
   tootii.cn additions (2026-10-04): no web fonts on the mainland site (guideline §18.5) -- Nunito covers
   Latin only, so Chinese text falls back to the system CJK fonts; WeChat button colour.
   ========================================================================== */
body.locale-zh, body.locale-zh button, body.locale-zh input, body.locale-zh textarea, body.locale-zh h1, body.locale-zh h2, body.locale-zh h3, body.locale-zh h4 {
  font-family: Nunito, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.btn-wechat { background: #07C160; color: #fff; }
.fl2 header { background-color: rgba(253, 252, 249, .96); }


/* Reviews: translated text by default, link to show the original (2026-10-04) */
.fl2 .td-review-toggle { display: block; background: none; border: 0; padding: 0; margin: 0 0 8px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent-green); text-decoration: underline; cursor: pointer; text-align: left; }
.fl2 .td-review-toggle:hover { color: var(--text-navy); }
.fl2 .td-review-quote[hidden] { display: none; }


/* ============================================================
   BRAND LOOK 2026-10-19 (tokens: lib/brand/tokens.ts in the app repo)
   Wordmark: solid green, Fredoka Bold, no gradient (#1d9e75 on light, #34c690 on dark).
   Navy headlines, amber main button, red only as a small accent, cream page background.
   ============================================================ */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/fredoka-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.fl2 .logo-mark { height: 32px; width: 32px; }
.fl2 .logo-text,
.fl2.is-home .logo-text,
.fl2 .logo-text--dark {
  font-family: 'Fredoka', var(--font-body); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: .02em;
  background: none; background-image: none; -webkit-background-clip: initial; background-clip: initial;
  color: #1d9e75; -webkit-text-fill-color: #1d9e75;
}
.fl2 .logo-text--on-dark { color: #34c690; -webkit-text-fill-color: #34c690; }
.fl2 .footer-logo .logo-lockup { gap: 14px; }
.fl2 .footer-logo .logo-mark { height: 38px; width: 38px; margin-bottom: 0; }
.fl2 .footer-logo .logo-wordmark { height: 34px; width: auto; display: block; }
.fl2 .btn-primary:hover { background: #d68f2c; box-shadow: 0 14px 28px -10px rgba(233, 160, 58, .45); }
body.fl2.inner-2 .btn-teal:hover { background: #d68f2c; }
.fl2 .td-h2-highlight { color: #1d9e75; }

/* tl-lang START (Languages page redesign 2026-11-02) */
/* TooTii Languages page — self-contained, scoped to .tl-lang. Paste into Customizer / theme CSS. */
.tl-lang{--tl-navy:var(--text-navy,#101a33);--tl-green:var(--accent-green,#1fa463);--tl-orange:var(--btn-orange,#e8a13a);--tl-muted:#5f687d;--tl-line:#e4e0d7;max-width:1152px;margin:0 auto;padding:56px 24px 72px;color:var(--tl-navy);font-family:inherit}
.tl-lang *{box-sizing:border-box}
.tl-lang__bar{display:flex;gap:8px;margin-bottom:20px}
.tl-lang__bar i{display:block;width:56px;height:5px;border-radius:3px;background:var(--tl-green)}
.tl-lang__bar i:nth-child(2){background:#d64545}.tl-lang__bar i:nth-child(3){background:var(--tl-orange)}
.tl-lang h1{margin:0;font-size:clamp(30px,5vw,44px);font-weight:800;line-height:1.15;color:var(--tl-navy)}
.tl-lang__slogan{margin:12px 0 0;font-size:clamp(18px,2.4vw,22px);font-weight:700;color:var(--tl-green)}
.tl-lang__sub{margin:8px 0 0;font-size:17px;color:var(--tl-muted)}
.tl-lang__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;padding:0;list-style:none}
.tl-card{display:flex;flex-direction:column;background:#f6f2e8;border:2px solid var(--tl-line);border-radius:18px;padding:14px;text-align:center}
.tl-card__img{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:5/4}
.tl-card__img>img:first-child{display:block;width:100%;height:100%;object-fit:cover}
.tl-card__img .tl-card__flag{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);object-fit:cover}

.tl-card__tag{position:absolute;right:8px;bottom:8px;padding:3px 10px;border-radius:999px;background:var(--tl-green);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em}
.tl-card h2{margin:14px 0 0;font-size:19px;font-weight:800;line-height:1.25;color:var(--tl-navy)}
.tl-card p{margin:6px 0 0;font-size:14px;line-height:1.4;color:var(--tl-muted)}
.tl-card__price{margin-top:auto!important;padding-top:14px;font-size:16px!important;font-weight:800;color:var(--tl-navy)!important}
.tl-card__cta{display:block;margin-top:12px;padding:13px 10px;border-radius:10px;background:var(--tl-orange);color:var(--tl-navy);font-size:16px;font-weight:800;text-decoration:none}
.tl-card__cta:hover,.tl-card__cta:focus-visible{filter:brightness(.95)}
.tl-lang__trial{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:32px;padding:22px 34px;border:2px solid var(--tl-orange);border-radius:18px;background:#fff4e2}
.tl-lang__trial strong{display:block;font-size:22px;font-weight:800}
.tl-lang__trial span{display:block;margin-top:4px;font-size:15px;color:var(--tl-muted)}
.tl-lang__trial a{flex:none;padding:14px 28px;border-radius:12px;background:var(--tl-orange);color:var(--tl-navy);font-size:17px;font-weight:800;text-decoration:none}
@media(max-width:900px){.tl-lang__grid{grid-template-columns:repeat(2,1fr);gap:14px}.tl-card{border-radius:14px;padding:12px}.tl-card h2{font-size:15px}.tl-card p{font-size:12.5px}.tl-card__price{font-size:14px!important}.tl-card__cta{font-size:15px;padding:11px 8px}}
@media(max-width:600px){.tl-lang{padding:32px 20px 48px}.tl-lang__trial{flex-direction:column;align-items:stretch;text-align:left;padding:18px}.tl-lang__trial a{text-align:center}.tl-lang__trial strong{font-size:17px}}
/* tl-lang END */

/* === Hero type pass 2026-11-04: both headline lines the same, bigger; lede split into two lines, bigger ===
   (appended after the original td-hero rules so it wins; sizes tuned per language so the longer line fits on small phones) */
.fl2 .td-hero-h1 { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 18px; }
.fl2 .td-hero-h1-accent { font-size: inherit; line-height: inherit; }
.fl2 .td-hero-lede { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.4; margin: 0 0 26px; }
.fl2 .td-hero-lede-line { display: block; text-wrap: balance; }
@media (max-width: 900px) {
  .fl2 .td-hero-h1 { font-size: clamp(32px, 11vw, 56px); }
  .fl2 .td-hero-lede { font-size: clamp(18px, 3.2vw, 24px); }
}