/* Lerni Landing — Lower Sections styles.
   Extracted from the standalone prototype
   (resources/Lerni Landing - Lower Sections _standalone_.html).
   All non-:root selectors are scoped under .landing-lower so
   the rest of the site is unaffected. */

:root { --lerni-yellow:        #FDC201;
  --lerni-yellow-soft:   #FEE180;
  --lerni-yellow-tint:   #FFEAA7;
  --lerni-yellow-wash:   #FFF8EE;

  
  --lerni-orange:        #EC8846;
  --lerni-orange-soft:   #F9B180;
  --lerni-orange-tint:   #FBC9A7;
  --lerni-orange-wash:   #FDE9DC;

  
  --lerni-pink:          #D47695;
  --lerni-pink-soft:     #DF9BB1;
  --lerni-pink-tint:     #E9BAC9;
  --lerni-pink-wash:     #F6E3E9;

  
  --lerni-purple:        #967BB7;
  --lerni-purple-soft:   #B8A3CE;
  --lerni-purple-tint:   #C2B2D5;
  --lerni-purple-wash:   #E7E1EF;
  --lerni-purple-dark:   #75539D;   

  
  --lerni-blue:          #3385CC;
  --lerni-blue-soft:     #5C9DD6;
  --lerni-blue-tint:     #99C2E6;
  --lerni-blue-wash:     #C6E0F6;
  --lerni-blue-pale:     #EAEEFF;   

  
  --lerni-green:         #10935C;
  --lerni-green-soft:    #1DAA6F;
  --lerni-green-tint:    #88C9AE;
  --lerni-green-wash:    #CFE9DF;
  --lerni-green-mint:    #A8D7D3;   
  --lerni-green-mint-bg: #C4E4E1;   

  
  --lerni-coral:         #FF7575;   
  --lerni-coral-soft:    #FFB0B0;
  --lerni-coral-tint:    #FFE0E0;

  
  --lerni-black:         #000000;
  --lerni-ink:           #1F2144;   
  --lerni-ink-2:         #222C44;   
  --lerni-gray-900:      #21231E;
  --lerni-gray-700:      #383835;   
  --lerni-gray-500:      #606060;   
  --lerni-gray-400:      #767676;   
  --lerni-gray-300:      #858585;   
  --lerni-gray-200:      #D9D9D9;   
  --lerni-gray-100:      #E0E0E0;   
  --lerni-gray-50:       #F0F0F0;   

  
  --lerni-bg:            #FBF7F2;   
  --lerni-bg-alt:        #F9F3EC;   
  --lerni-bg-lilac:      #F7F5FA;   
  --lerni-bg-sky:        #D9F0FC;   
  --lerni-surface:       #FFFFFF;   
  --lerni-border:        #E0E0E0;   
  --lerni-border-soft:   #F0F0F0;   

  
  --lerni-text-dark:     #000000;   
  --lerni-text-ink:      #1F2144;   
  --lerni-text:          #383835;   
  --lerni-text-muted:    #606060;   
  --lerni-text-light:    #767676;   
  --lerni-text-mute:     #858585;   

  
  --lerni-shadow-xs:     0 1px 2px rgba(31, 33, 68, 0.04);
  --lerni-shadow-sm:     0 2px 4px rgba(31, 33, 68, 0.05);
  --lerni-shadow:        0 4px 12px rgba(31, 33, 68, 0.06);
  --lerni-shadow-md:     0 8px 24px rgba(31, 33, 68, 0.08);
  --lerni-shadow-lg:     0 16px 40px rgba(31, 33, 68, 0.10);

  
  --lerni-shadow-purple: 0 2px 2px rgba(150, 123, 183, 0.32);
  --lerni-shadow-purple-lg: 0 8px 20px rgba(150, 123, 183, 0.28);

  
  --lerni-radius-xs:     4px;       
  --lerni-radius-sm:     6px;       
  --lerni-radius:        8px;       
  --lerni-radius-md:     12px;
  --lerni-radius-lg:     16px;      
  --lerni-radius-xl:     20px;
  --lerni-radius-2xl:    24px;
  --lerni-radius-pill:   999px;

  
  --lerni-s-1:  4px;
  --lerni-s-2:  8px;
  --lerni-s-3:  12px;
  --lerni-s-4:  16px;
  --lerni-s-5:  20px;
  --lerni-s-6:  24px;
  --lerni-s-8:  32px;
  --lerni-s-10: 40px;
  --lerni-s-12: 48px;
  --lerni-s-16: 64px;
  --lerni-s-20: 80px;
  --lerni-s-24: 96px;

  
  --lerni-font-body:     'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                          Roboto, 'Helvetica Neue', Arial, sans-serif;
  --lerni-font-display:  'Filson Pro', 'Nunito Sans', 'Lato', -apple-system,
                          BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lerni-font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  
  --lerni-t-h1:         96px;
  --lerni-t-h2:         60px;
  --lerni-t-h3:         48px;
  --lerni-t-h4:         34px;
  --lerni-t-h5:         24px;
  --lerni-t-h6:         21px;
  --lerni-t-subtitle1:  18px;
  --lerni-t-subtitle2:  14px;
  --lerni-t-body:       16px;
  --lerni-t-small:      14px;
  --lerni-t-label:      13px;
  --lerni-t-overline:   10px;

  --lerni-w-light:      300;
  --lerni-w-regular:    400;
  --lerni-w-bold:       700;
  --lerni-w-black:      900;

  --lerni-leading-tight: 1.1;
  --lerni-leading-snug:  1.3;
  --lerni-leading-body:  1.5;
  --lerni-leading-loose: 1.6;

  
  --lerni-ease:         cubic-bezier(.22,.61,.36,1);
  --lerni-ease-out:     cubic-bezier(.16,1,.3,1);
  --lerni-ease-bounce:  cubic-bezier(.34,1.56,.64,1);
  --lerni-dur-fast:     120ms;
  --lerni-dur:          200ms;
  --lerni-dur-slow:     320ms; }
body { font-family: var(--lerni-font-body);
  color: var(--lerni-text);
  background: var(--lerni-bg);
  font-size: var(--lerni-t-body);
  line-height: var(--lerni-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
.landing-lower .lerni-page { font-family: var(--lerni-font-body);
  color: var(--lerni-text);
  background: var(--lerni-bg);
  font-size: var(--lerni-t-body);
  line-height: var(--lerni-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
.landing-lower .lerni-h1 { font-family: var(--lerni-font-body);
  font-size: var(--lerni-t-h1);
  line-height: 1.05;
  font-weight: var(--lerni-w-light);
  color: var(--lerni-text-dark);
  letter-spacing: -0.025em; }
.landing-lower .lerni-h1-bold { font-family: var(--lerni-font-body);
  font-size: 57px;
  line-height: 1.1;
  font-weight: var(--lerni-w-bold);
  color: var(--lerni-text-dark);
  letter-spacing: -0.03em; }
.landing-lower .lerni-h2 { font-family: var(--lerni-font-body);
  font-size: var(--lerni-t-h2);
  line-height: 1.1;
  font-weight: var(--lerni-w-bold);
  color: var(--lerni-text-dark);
  letter-spacing: -0.02em; }
.landing-lower .lerni-h3 { font-family: var(--lerni-font-body);
  font-size: var(--lerni-t-h3);
  line-height: 1.15;
  font-weight: var(--lerni-w-bold);
  color: var(--lerni-text-dark);
  letter-spacing: -0.015em; }
.landing-lower .lerni-h4 { font-family: var(--lerni-font-body);
  font-size: var(--lerni-t-h4);
  line-height: 1.2;
  font-weight: var(--lerni-w-bold);
  color: var(--lerni-text-ink); }
.landing-lower .lerni-h5 { font-family: var(--lerni-font-body);
  font-size: var(--lerni-t-h5);
  line-height: 1.25;
  font-weight: var(--lerni-w-bold);
  color: var(--lerni-text-ink); }
.landing-lower .lerni-h6 { font-family: var(--lerni-font-body);
  font-size: var(--lerni-t-h6);
  line-height: 1.3;
  font-weight: var(--lerni-w-bold);
  color: var(--lerni-text-ink); }
.landing-lower .lerni-subtitle-1 { font-family: var(--lerni-font-body);
  font-size: var(--lerni-t-subtitle1);
  line-height: 1.45;
  font-weight: var(--lerni-w-regular);
  color: var(--lerni-text-muted); }
.landing-lower .lerni-subtitle-2 { font-family: var(--lerni-font-body);
  font-size: var(--lerni-t-subtitle2);
  line-height: 1.4;
  font-weight: var(--lerni-w-bold);
  color: var(--lerni-text);
  text-transform: uppercase;
  letter-spacing: 0.04em; }
.landing-lower .lerni-body-text { font-family: var(--lerni-font-body);
  font-size: var(--lerni-t-body);
  line-height: 1.55;
  font-weight: var(--lerni-w-regular);
  color: var(--lerni-text); }
.landing-lower .lerni-body-bold { font-family: var(--lerni-font-body);
  font-size: var(--lerni-t-body);
  line-height: 1.55;
  font-weight: var(--lerni-w-bold);
  color: var(--lerni-text); }
.landing-lower .lerni-body-small { font-family: var(--lerni-font-body);
  font-size: var(--lerni-t-small);
  line-height: 1.45;
  color: var(--lerni-text-light); }
.landing-lower .lerni-label { font-family: var(--lerni-font-body);
  font-size: var(--lerni-t-label);
  font-weight: var(--lerni-w-bold);
  color: var(--lerni-text);
  text-transform: uppercase;
  letter-spacing: 0.06em; }
.landing-lower .lerni-overline { font-family: var(--lerni-font-body);
  font-size: var(--lerni-t-overline);
  font-weight: var(--lerni-w-black);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lerni-purple); }
.landing-lower .lerni-button-text { font-family: var(--lerni-font-display);
  font-size: 16px;
  font-weight: var(--lerni-w-bold);
  letter-spacing: 0.01em; }
.landing-lower .lerni-link { color: var(--lerni-purple);
  font-weight: var(--lerni-w-bold);
  text-decoration: none; }
.landing-lower .lerni-link:hover { text-decoration: underline; }
.landing-lower .hero-nav { display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px; }
.landing-lower .hero-nav__logo { display: flex;
  align-items: center;
  height: 52px; }
.landing-lower .hero-nav__logo img { height: 100%; width: auto; display: block; }
.landing-lower .hero-nav__links { display: flex;
  align-items: center;
  gap: 36px; }
.landing-lower .hero-nav__link { font-family: var(--lerni-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--lerni-text-ink);
  letter-spacing: -0.005em;
  cursor: pointer;
  position: relative; }
.landing-lower .hero-nav__link:hover { color: var(--lerni-purple-dark); }
.landing-lower .hero-nav__cta { display: flex;
  align-items: center;
  gap: 12px; }
.landing-lower .lerni-btn { display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--lerni-font-display);
  font-weight: 700;
  letter-spacing: 0.005em;
  border: 0;
  cursor: pointer;
  transition: transform 200ms var(--lerni-ease), box-shadow 200ms var(--lerni-ease); }
.landing-lower .lerni-btn:hover { transform: translateY(-1px); }
.landing-lower .lerni-btn--primary { background: var(--lerni-purple);
  color: #fff;
  box-shadow: var(--lerni-shadow-purple-lg);
  position: relative;
  overflow: hidden; }
.landing-lower .lerni-btn--primary:hover { background: var(--lerni-purple-dark); }
.landing-lower .lerni-btn--primary::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.22,1,.36,1); }
.landing-lower .lerni-btn--primary:hover::before { transform: translateX(120%); }
.landing-lower .lerni-btn--primary.is-attention::before {
  animation: lerniShineSweep .9s cubic-bezier(.22,1,.36,1); }
.landing-lower .lerni-btn--primary.is-attention {
  animation: lerniAttentionPulse .9s cubic-bezier(.22,1,.36,1); }
@keyframes lerniShineSweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@keyframes lerniAttentionPulse {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(-2px); box-shadow: 0 14px 32px -6px rgba(150,123,183,.75); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-lower .lerni-btn--primary.is-attention,
  .landing-lower .lerni-btn--primary.is-attention::before { animation: none !important; }
}
.landing-lower .lerni-btn--ghost { background: transparent;
  color: var(--lerni-text-ink);
  border: 1.5px solid var(--lerni-text-ink); }
.landing-lower .lerni-btn--ghost:hover { background: var(--lerni-text-ink); color: #fff; }
.landing-lower .lerni-btn--surface { background: #fff;
  color: var(--lerni-text-ink);
  border: 1px solid var(--lerni-border);
  box-shadow: var(--lerni-shadow-sm); }
.landing-lower .lerni-btn--lg { height: 64px;
  padding: 0 32px;
  border-radius: var(--lerni-radius);
  font-size: 17px; }
.landing-lower .lerni-btn--md { height: 52px;
  padding: 0 26px;
  border-radius: var(--lerni-radius);
  font-size: 16px; }
.landing-lower .lerni-btn--sm { height: 44px;
  padding: 0 20px;
  border-radius: var(--lerni-radius);
  font-size: 15px; }
.landing-lower .hero-eyebrow { display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--lerni-purple-wash);
  color: var(--lerni-purple-dark);
  font-family: var(--lerni-font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase; }
.landing-lower .hero-eyebrow__dot { width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--lerni-purple);
  box-shadow: 0 0 0 4px rgba(150,123,183,.22); }
.landing-lower .v1 { width: 100%;
  height: 100%;
  background: #FBF7F2;
  position: relative;
  overflow: hidden;
  font-family: var(--lerni-font-body);
  display: flex;
  flex-direction: column; }
.landing-lower .v1__halo { position: absolute;
  width: 1100px; height: 1100px;
  left: 50%; top: 56%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(150,123,183,.18) 0%, rgba(150,123,183,0) 60%);
  pointer-events: none; }
.landing-lower .v1__content { flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 40px 60px 0;
  position: relative;
  z-index: 2; }
.landing-lower .v1__eyebrow { font-size: 13px;
  font-weight: 700;
  color: var(--lerni-purple-dark);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px; }
.landing-lower .v1__headline { font-family: var(--lerni-font-body);
  font-size: 108px;
  line-height: 0.96;
  font-weight: 900;
  color: #0B0D2A;
  letter-spacing: -0.045em;
  margin: 0 0 24px;
  max-width: 1100px; }
.landing-lower .v1__headline em { font-style: normal;
  background: linear-gradient(135deg, var(--lerni-purple) 0%, var(--lerni-coral) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; }
.landing-lower .v1__sub { font-size: 21px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--lerni-text-muted);
  margin: 0 0 28px;
  max-width: 680px; }
.landing-lower .v1__ctas { display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px; }
.landing-lower .v1__cta-link { display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lerni-text-ink);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 0 12px;
  height: 64px; }
.landing-lower .v1__cta-link:hover { color: var(--lerni-purple-dark); }
.landing-lower .v1__trust { display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  color: var(--lerni-text-light);
  font-weight: 500; }
.landing-lower .v1__trust-sep { color: var(--lerni-gray-200); }
.landing-lower .v1__device { position: absolute;
  bottom: -340px;
  left: 50%;
  transform: translateX(-50%);
  width: 820px;
  filter: drop-shadow(0 -10px 40px rgba(31,33,68,.12));
  z-index: 1;
  border-radius: 14px;
  overflow: hidden; }
.landing-lower .v1__device img { width: 100%;
  display: block;
  border-radius: 14px; }
.landing-lower .v2 { width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  font-family: var(--lerni-font-body);
  background:
    radial-gradient(ellipse 60% 80% at 12% 18%, rgba(150,123,183,.22) 0%, transparent 60%),
    radial-gradient(ellipse 70% 90% at 95% 88%, rgba(255,117,117,.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 80% 10%, rgba(168,215,211,.32) 0%, transparent 60%),
    linear-gradient(180deg, #FFF8F2 0%, #F7F1F8 100%);
  display: flex;
  flex-direction: column; }
.landing-lower .v2__blob { position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none; }
.landing-lower .v2__blob--purple { width: 480px; height: 480px;
  background: rgba(150,123,183,.35);
  top: -120px; left: -100px; }
.landing-lower .v2__blob--coral { width: 380px; height: 380px;
  background: rgba(255,117,117,.28);
  bottom: -120px; left: 38%; }
.landing-lower .v2__blob--mint { width: 320px; height: 320px;
  background: rgba(168,215,211,.45);
  top: 18%; right: -80px; }
.landing-lower .v2__content { flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 40px 80px 60px;
  position: relative;
  z-index: 2; }
.landing-lower .v2__left { max-width: 600px; }
.landing-lower .v2__headline { font-family: var(--lerni-font-body);
  font-size: 88px;
  line-height: 1;
  font-weight: 900;
  color: #1F2144;
  letter-spacing: -0.035em;
  margin: 28px 0 28px; }
.landing-lower .v2__headline-soft { font-weight: 300;
  color: #1F2144; }
.landing-lower .v2__headline-accent { color: var(--lerni-purple);
  font-weight: 900; }
.landing-lower .v2__sub { font-size: 20px;
  line-height: 1.5;
  color: var(--lerni-text-muted);
  margin: 0 0 40px;
  max-width: 520px; }
.landing-lower .v2__ctas { display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px; }
.landing-lower .v2__trust-row { display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap; }
.landing-lower .v2__trust-item { display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--lerni-text); }
.landing-lower .v2__trust-item b { font-weight: 900;
  color: var(--lerni-text-ink);
  font-size: 18px;
  letter-spacing: -0.01em; }
.landing-lower .v2__trust-item small { display: block;
  font-size: 12px;
  color: var(--lerni-text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700; }
.landing-lower .v2__right { position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
.landing-lower .v2__phone { position: relative;
  width: 320px;
  z-index: 2;
  filter: drop-shadow(0 40px 60px rgba(31,33,68,.22)); }
.landing-lower .v2__phone img { width: 100%; display: block; border-radius: 36px; }
.landing-lower .v2__floater { position: absolute;
  background: #fff;
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 20px 40px rgba(31,33,68,.10);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3; }
.landing-lower .v2__floater--top { top: 8%; left: -8%; }
.landing-lower .v2__floater--mid { top: 42%; right: -4%; }
.landing-lower .v2__floater--bot { bottom: 6%; left: -4%; }
.landing-lower .v2__floater-emoji { width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0; }
.landing-lower .v2__floater-text { font-size: 14px; line-height: 1.3; }
.landing-lower .v2__floater-text b { font-weight: 800; color: var(--lerni-text-ink); display: block; }
.landing-lower .v2__floater-text span { color: var(--lerni-text-light); font-size: 12px; }
.landing-lower .v2__mascot-bg { position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #FBF3EA 100%);
  box-shadow: 0 30px 80px rgba(150,123,183,.20);
  z-index: 1; }
.landing-lower .v3 { width: 100%; height: 100%;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
  font-family: var(--lerni-font-body);
  display: flex;
  flex-direction: column; }
.landing-lower .v3__bg { position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 95% 30%, rgba(150,123,183,.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 5% 90%, rgba(150,123,183,.06) 0%, transparent 60%);
  pointer-events: none; }
.landing-lower .v3__nav-wrap { border-bottom: 1px solid var(--lerni-border-soft);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 5; }
.landing-lower .v3__content { flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: center;
  padding: 36px 24px 28px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2; }
.landing-lower .v3__left { max-width: 580px; }
.landing-lower .v3__chip { display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--lerni-purple-wash);
  border: 1px solid rgba(150,123,183,.30); }
.landing-lower .v3__chip-icon { width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--lerni-purple);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 900; }
.landing-lower .v3__chip-text { font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lerni-purple-dark); }
.landing-lower .v3__headline { font-family: var(--lerni-font-body);
  font-size: 64px;
  line-height: 1.02;
  font-weight: 900;
  color: var(--lerni-text-ink);
  letter-spacing: -0.03em;
  margin: 22px 0 20px; }
.landing-lower .v3__headline-accent { color: var(--lerni-purple); }

/* Triadic hero — three short claims, last one wins. Slightly smaller
   than the single-line v3 hero so the rhythm reads as three lines
   without overflowing the column. */
.landing-lower .v3__headline--triad {
  font-size: 52px;
  line-height: 1.08;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.landing-lower .v3__triad-line { display: block; }
/* Muted lines were rendered in #606060 — readable but washed-out next
   to the ink third line. Bumped to --lerni-text (#383835) so the first
   two claims still feel like a setup, but no longer look "faded". */
.landing-lower .v3__triad-line--muted { color: var(--lerni-text); }
@media (max-width: 768px) {
  .landing-lower .v3__headline--triad { font-size: 36px; }
}

/* Normalised tile heading — for in-card titles across the landing
   (buy-paths, language tiles, etc.). Single source so size + weight
   + letter-spacing match between sections instead of three inline
   variants drifting apart. */
.landing-lower .tile-h {
  font-size: 22px;
  font-weight: 900;
  color: var(--lerni-text-ink);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  line-height: 1.2;
}
.landing-lower .tile-h--invert { color: #fff; }
.landing-lower .tile-h--sm { font-size: 18px; margin-bottom: 4px; }

/* Price-from CTA — live "from XX / mo" hint below the hero buttons.
   Renders as a quiet text link, not a button — the bold CTA above it
   is "Start free", this is the price-anchored secondary line. */
.landing-lower .v3__price-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--lerni-text-muted);
  transition: color 0.2s;
}
.landing-lower .v3__price-line:hover { color: var(--lerni-purple); }

/* Heritage-line — replaces the old "4.9/5 on App Store + Play" claim.
   Subtle, one line, sits between guarantee + language chips. */
.landing-lower .v3__heritage-line {
  font-size: 13px;
  color: var(--lerni-text-light);
  border-top: 1px solid var(--lerni-border-soft);
  padding-top: 16px;
  margin: 0 0 20px;
  max-width: 540px;
}
.landing-lower .v3__sub { font-size: 18px;
  line-height: 1.55;
  color: var(--lerni-text);
  margin: 0 0 28px;
  max-width: 540px; }
.landing-lower .v3__ctas { display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px; }
.landing-lower .v3__guarantee { display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  font-size: 13px;
  color: var(--lerni-text); }
.landing-lower .v3__guarantee b { color: var(--lerni-text-ink); font-weight: 800; }
.landing-lower .v3__rating { display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--lerni-border-soft);
  border-bottom: 1px solid var(--lerni-border-soft);
  margin-bottom: 20px; }
.landing-lower .v3__rating-stars { font-size: 16px; color: var(--lerni-yellow); letter-spacing: 2px; }
.landing-lower .v3__rating-text { font-size: 14px; color: var(--lerni-text-muted); }
.landing-lower .v3__rating-text b { font-weight: 900; color: var(--lerni-text-ink); }
.landing-lower .v3__langs { display: flex;
  align-items: center;
  gap: 14px; }
.landing-lower .v3__langs-label { font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lerni-text-light); }
.landing-lower .v3__lang-chip { display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 6px;
  background: #fff;
  border: 1px solid var(--lerni-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lerni-text-ink); }
.landing-lower .v3__lang-chip img { width: 22px; height: 22px; border-radius: 999px; object-fit: cover; }
.landing-lower .v3__flag { width: 22px; height: 22px; border-radius: 999px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.landing-lower .v3__right { position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
.landing-lower .v3__macbook { position: relative;
  width: 920px;
  max-width: 100%;
  z-index: 1;
  filter: drop-shadow(0 48px 64px rgba(31,33,68,.22)) drop-shadow(0 16px 24px rgba(150,123,183,.18)); }
.landing-lower .v3__macbook img { width: 100%; display: block; border-radius: 16px; }
.landing-lower .v3__phone-overlay { position: absolute;
  bottom: 4%;
  right: -2%;
  width: 220px;
  z-index: 2;
  filter: drop-shadow(0 30px 40px rgba(31,33,68,.25)); }
.landing-lower .v3__phone-overlay img { width: 100%; display: block; border-radius: 32px; }
.landing-lower .v3__floating-stat { position: absolute;
  top: 8%;
  left: -2%;
  background: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 20px 40px rgba(31,33,68,.10);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3; }
.landing-lower .v3__floating-stat-icon { width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--lerni-green-wash);
  display: flex; align-items: center; justify-content: center; }
.landing-lower .v3__floating-stat b { font-size: 16px; font-weight: 900; color: var(--lerni-text-ink); display: block; line-height: 1.1; }
.landing-lower .v3__floating-stat span { font-size: 11px; color: var(--lerni-text-light); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.landing-lower .v3__stat-bar { display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--lerni-border-soft);
  background: var(--lerni-bg);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2; }
.landing-lower .v3__stat { padding: 22px 24px;
  border-right: 1px solid var(--lerni-border-soft);
  display: flex;
  align-items: center;
  gap: 14px; }
.landing-lower .v3__stat:last-child { border-right: 0; }
.landing-lower .v3__stat-icon { width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; }
.landing-lower .v3__stat-num { font-size: 22px;
  font-weight: 900;
  color: var(--lerni-text-ink);
  letter-spacing: -0.02em;
  line-height: 1; }
.landing-lower .v3__stat-lbl { font-size: 12px;
  color: var(--lerni-text-light);
  font-weight: 600;
  margin-top: 4px; }
.landing-lower .v4 { width: 100%; height: 100%;
  background: var(--lerni-bg);
  position: relative;
  overflow: hidden;
  font-family: var(--lerni-font-body);
  display: flex;
  flex-direction: column; }
.landing-lower .v4__bg { position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(150,123,183,.14) 0%, transparent 50%),
    radial-gradient(circle at 8% 92%, rgba(255,117,117,.10) 0%, transparent 55%);
  pointer-events: none; }
.landing-lower .v4__nav-wrap { border-bottom: 1px solid var(--lerni-border-soft);
  background: rgba(251,247,242,.85);
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 5; }
.landing-lower .v4__content { flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
  padding: 36px 64px 28px;
  position: relative;
  z-index: 2; }
.landing-lower .v4__left { max-width: 600px; }
.landing-lower .v4__promise { display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--lerni-border);
  box-shadow: var(--lerni-shadow-sm); }
.landing-lower .v4__promise-num { display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--lerni-green);
  color: #fff;
  font-size: 11px;
  font-weight: 900; }
.landing-lower .v4__promise-text { font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lerni-text-ink); }
.landing-lower .v4__headline { font-family: var(--lerni-font-body);
  font-size: 72px;
  line-height: 1;
  font-weight: 900;
  color: var(--lerni-text-ink);
  letter-spacing: -0.035em;
  margin: 22px 0 18px; }
.landing-lower .v4__headline-strike { position: relative;
  color: var(--lerni-gray-400);
  font-weight: 700;
  white-space: nowrap; }
.landing-lower .v4__headline-strike::after { content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  top: 55%;
  height: 6px;
  background: var(--lerni-coral);
  border-radius: 8px;
  transform: rotate(-3deg); }
.landing-lower .v4__headline-accent { color: var(--lerni-purple); }
.landing-lower .v4__sub { font-size: 18px;
  line-height: 1.55;
  color: var(--lerni-text-muted);
  margin: 0 0 24px;
  max-width: 540px; }
.landing-lower .v4__bullets { display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px; }
.landing-lower .v4__bullet { display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--lerni-text); }
.landing-lower .v4__bullet-check { width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--lerni-green-wash);
  color: var(--lerni-green);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px; }
.landing-lower .v4__bullet b { font-weight: 800; color: var(--lerni-text-ink); }
.landing-lower .v4__ctas { display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px; }
.landing-lower .v4__price-line { font-size: 13px;
  color: var(--lerni-text-light); }
.landing-lower .v4__price-line b { color: var(--lerni-text-ink); font-weight: 800; }
.landing-lower .v4__right { position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
.landing-lower .v4__hero-card { width: 540px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 40px 60px rgba(31,33,68,.14);
  overflow: hidden;
  position: relative;
  z-index: 2; }
.landing-lower .v4__hero-photo { height: 360px;
  background-size: cover;
  background-position: 30% 30%;
  position: relative; }
.landing-lower .v4__hero-photo-overlay { position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(31,33,68,.45) 100%); }
.landing-lower .v4__hero-flag { position: absolute;
  top: 18px; left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 4px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--lerni-text-ink); }
.landing-lower .v4__hero-flag span { width: 22px; height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg,#012169 33%,#fff 33% 66%,#C8102E 66%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.landing-lower .v4__hero-quote { position: absolute;
  bottom: 18px; left: 22px; right: 22px;
  color: #fff;
  font-family: var(--lerni-font-body);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em; }
.landing-lower .v4__hero-meta { display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px; }
.landing-lower .v4__hero-author { display: flex; align-items: center; gap: 12px; }
.landing-lower .v4__hero-avatar { width: 44px; height: 44px;
  border-radius: 999px;
  background-size: cover;
  background-position: center; }
.landing-lower .v4__hero-name b { font-size: 14px; color: var(--lerni-text-ink); font-weight: 800; display: block; }
.landing-lower .v4__hero-name span { font-size: 12px; color: var(--lerni-text-light); }
.landing-lower .v4__hero-stars { font-size: 14px; color: var(--lerni-yellow); letter-spacing: 1.5px; }
.landing-lower .v4__sticker { position: absolute;
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 18px 36px rgba(31,33,68,.12);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px; }
.landing-lower .v4__sticker--score { top: 8%; right: -2%; }
.landing-lower .v4__sticker--cefr { bottom: 6%; left: -3%; }
.landing-lower .v4__sticker-num { font-size: 24px;
  font-weight: 900;
  color: var(--lerni-text-ink);
  letter-spacing: -0.02em;
  line-height: 1; }
.landing-lower .v4__sticker-lbl { font-size: 11px;
  color: var(--lerni-text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700; }
.landing-lower .v4__cefr-bar { display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px; }
.landing-lower .v4__cefr-pill { height: 6px; width: 18px;
  border-radius: 999px;
  background: var(--lerni-gray-200); }
.landing-lower .v4__cefr-pill--on { background: var(--lerni-purple); }
.landing-lower .v4__brand-strip { display: flex;
  align-items: center;
  gap: 32px;
  justify-content: center;
  padding: 18px 64px;
  border-top: 1px solid var(--lerni-border-soft);
  background: #fff;
  position: relative;
  z-index: 2; }
.landing-lower .v4__brand-strip-label { font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lerni-text-light); }
.landing-lower .v4__brand-logo { font-family: var(--lerni-font-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--lerni-gray-400);
  opacity: 0.85; }
.landing-lower .v5 { width: 100%; height: 100%;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
  font-family: var(--lerni-font-body);
  display: flex;
  flex-direction: column; }
.landing-lower .v5__bg-split { position: absolute;
  top: 0; bottom: 0;
  right: 0;
  width: 52%;
  background: linear-gradient(160deg, #1A1B3A 0%, #2D2055 60%, #5D3B95 110%);
  z-index: 0; }
.landing-lower .v5__bg-split::before { content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 80%, rgba(255,117,117,.16) 0%, transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(150,123,183,.30) 0%, transparent 55%); }
.landing-lower .v5__bg-grid { position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, #000 30%, transparent 80%); }
.landing-lower .v5__nav-wrap { position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--lerni-border-soft); }
.landing-lower .v5__content { flex: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  align-items: stretch;
  position: relative;
  z-index: 2; }
.landing-lower .v5__left { padding: 48px 56px 48px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px; }
.landing-lower .v5__pill { display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 14px;
  background: var(--lerni-bg-alt);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lerni-purple-dark); }
.landing-lower .v5__pill::before { content: '';
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--lerni-green);
  box-shadow: 0 0 0 4px rgba(16,147,92,.18); }
.landing-lower .v5__headline { font-family: var(--lerni-font-body);
  font-size: 68px;
  line-height: 0.98;
  font-weight: 900;
  color: var(--lerni-text-ink);
  letter-spacing: -0.035em;
  margin: 20px 0 18px; }
.landing-lower .v5__headline em { font-style: normal;
  background: linear-gradient(135deg, var(--lerni-purple) 0%, var(--lerni-coral) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; }
.landing-lower .v5__sub { font-size: 18px;
  line-height: 1.55;
  color: var(--lerni-text-muted);
  margin: 0 0 28px; }
.landing-lower .v5__ctas { display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px; }
.landing-lower .v5__meta-row { display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap; }
.landing-lower .v5__avatars { display: flex;
  align-items: center; }
.landing-lower .v5__avatar { width: 34px; height: 34px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  border: 2px solid var(--lerni-bg);
  margin-left: -10px; }
.landing-lower .v5__avatar:first-child { margin-left: 0; }
.landing-lower .v5__avatar--more { background: var(--lerni-purple);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; }
.landing-lower .v5__meta-text { font-size: 13px;
  color: var(--lerni-text-light);
  line-height: 1.4; }
.landing-lower .v5__meta-text b { color: var(--lerni-text-ink); font-weight: 800; }
.landing-lower .v5__metric-row { display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--lerni-border-soft); }
.landing-lower .v5__metric-num { font-size: 36px;
  font-weight: 900;
  color: var(--lerni-text-ink);
  letter-spacing: -0.03em;
  line-height: 1; }
.landing-lower .v5__metric-num em { font-style: normal;
  color: var(--lerni-purple); }
.landing-lower .v5__metric-lbl { font-size: 12px;
  color: var(--lerni-text-light);
  font-weight: 700;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em; }
.landing-lower .v5__right { position: relative;
  padding: 48px 64px 48px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff; }
.landing-lower .v5__right-inner { position: relative;
  width: 100%;
  max-width: 760px;
  height: 600px; }
.landing-lower .v5__macbook { position: absolute;
  top: 0; right: 0;
  width: 680px;
  filter: drop-shadow(0 50px 70px rgba(0,0,0,.5));
  border-radius: 12px;
  overflow: hidden; }
.landing-lower .v5__macbook img { width: 100%; display: block; }
.landing-lower .v5__phone { position: absolute;
  bottom: 0; left: 0;
  width: 230px;
  z-index: 2;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.5)); }
.landing-lower .v5__phone img { width: 100%; display: block; border-radius: 32px; }
.landing-lower .v5__bubble { position: absolute;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 14px 18px;
  color: #fff;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px; }
.landing-lower .v5__bubble--top { top: 60px; left: -20px; }
.landing-lower .v5__bubble--mid { top: 40%; right: -10px; }
.landing-lower .v5__bubble-icon { width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; }
.landing-lower .v5__bubble b { font-size: 14px; font-weight: 800; display: block; line-height: 1.2; }
.landing-lower .v5__bubble span { font-size: 12px; opacity: 0.7; }
.landing-lower .v6 { width: 100%; height: 100%;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
  font-family: var(--lerni-font-body);
  display: flex;
  flex-direction: column; }
.landing-lower .v6__bg { position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #fff 0%, #FBF7F2 100%),
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(150,123,183,.10) 0%, transparent 60%); }
.landing-lower .v6__bg-deco { position: absolute;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150,123,183,.10) 0%, transparent 60%);
  top: -200px; right: -200px; }
.landing-lower .v6__nav-wrap { position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--lerni-border-soft);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px); }
.landing-lower .v6__content { flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
  padding: 36px 64px 24px;
  position: relative;
  z-index: 2; }
.landing-lower .v6__left { max-width: 580px; }
.landing-lower .v6__chip { display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 14px 0 6px;
  background: #fff;
  border: 1px solid var(--lerni-border);
  border-radius: 999px;
  box-shadow: var(--lerni-shadow-sm); }
.landing-lower .v6__chip-badge { display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  background: var(--lerni-green);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em; }
.landing-lower .v6__chip-text { font-size: 12px;
  font-weight: 700;
  color: var(--lerni-text-ink); }
.landing-lower .v6__headline { font-family: var(--lerni-font-body);
  font-size: 62px;
  line-height: 1;
  font-weight: 900;
  color: var(--lerni-text-ink);
  letter-spacing: -0.03em;
  margin: 22px 0 18px; }
.landing-lower .v6__headline-accent { background: linear-gradient(135deg, var(--lerni-purple) 0%, var(--lerni-coral) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; }
.landing-lower .v6__sub { font-size: 18px;
  line-height: 1.55;
  color: var(--lerni-text-muted);
  margin: 0 0 28px;
  max-width: 520px; }
.landing-lower .v6__ctas { display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px; }
.landing-lower .v6__steps { display: flex;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid var(--lerni-border-soft);
  border-radius: 16px;
  padding: 6px;
  box-shadow: var(--lerni-shadow); }
.landing-lower .v6__step { flex: 1;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative; }
.landing-lower .v6__step + .v6__step::before { content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 1px;
  background: var(--lerni-border-soft); }
.landing-lower .v6__step-num { display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--lerni-purple-wash);
  color: var(--lerni-purple-dark);
  font-size: 12px;
  font-weight: 900; }
.landing-lower .v6__step-num--done { background: var(--lerni-purple);
  color: #fff; }
.landing-lower .v6__step-title { font-size: 14px;
  font-weight: 800;
  color: var(--lerni-text-ink);
  letter-spacing: -0.01em; }
.landing-lower .v6__step-desc { font-size: 12px;
  color: var(--lerni-text-light);
  line-height: 1.4; }
.landing-lower .v6__right { position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
.landing-lower .v6__dash { width: 640px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 40px 60px rgba(31,33,68,.14);
  overflow: hidden;
  position: relative;
  z-index: 2; }
.landing-lower .v6__dash-top { display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--lerni-border-soft); }
.landing-lower .v6__dash-dots { display: flex;
  gap: 6px; }
.landing-lower .v6__dash-dots span { width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--lerni-border); }
.landing-lower .v6__dash-title { font-size: 13px;
  color: var(--lerni-text-light);
  font-weight: 600; }
.landing-lower .v6__dash-body { padding: 22px 24px; }
.landing-lower .v6__dash-greet { font-size: 12px;
  color: var(--lerni-text-light);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px; }
.landing-lower .v6__dash-h { font-size: 24px;
  font-weight: 900;
  color: var(--lerni-text-ink);
  letter-spacing: -0.02em;
  margin-bottom: 18px; }
.landing-lower .v6__dash-cards { display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px; }
.landing-lower .v6__dash-card { border: 1px solid var(--lerni-border-soft);
  border-radius: 12px;
  padding: 14px;
  background: var(--lerni-bg); }
.landing-lower .v6__dash-card--active { background: var(--lerni-purple-wash);
  border-color: rgba(150,123,183,.30); }
.landing-lower .v6__dash-card-tag { font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lerni-purple-dark);
  margin-bottom: 6px; }
.landing-lower .v6__dash-card-title { font-size: 14px;
  font-weight: 800;
  color: var(--lerni-text-ink);
  margin-bottom: 4px; }
.landing-lower .v6__dash-card-meta { font-size: 12px;
  color: var(--lerni-text-light);
  display: flex;
  align-items: center;
  gap: 6px; }
.landing-lower .v6__dash-progress { margin-top: 10px;
  height: 6px;
  border-radius: 999px;
  background: var(--lerni-border);
  overflow: hidden; }
.landing-lower .v6__dash-progress-fill { height: 100%;
  background: linear-gradient(90deg, var(--lerni-purple), var(--lerni-coral));
  border-radius: 999px; }
.landing-lower .v6__dash-list { display: flex;
  flex-direction: column;
  gap: 8px; }
.landing-lower .v6__dash-row { display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--lerni-bg); }
.landing-lower .v6__dash-row-icon { width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px; }
.landing-lower .v6__dash-row-text { flex: 1; }
.landing-lower .v6__dash-row-text b { font-size: 13px; font-weight: 800; color: var(--lerni-text-ink); display: block; }
.landing-lower .v6__dash-row-text span { font-size: 11px; color: var(--lerni-text-light); }
.landing-lower .v6__dash-row-status { font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lerni-green); }
.landing-lower .v6__phone-side { position: absolute;
  bottom: -20px;
  right: -10px;
  width: 200px;
  z-index: 3;
  filter: drop-shadow(0 30px 40px rgba(31,33,68,.25)); }
.landing-lower .v6__phone-side img { width: 100%; display: block; border-radius: 32px; }
.landing-lower .v6__floater { position: absolute;
  top: 4%;
  left: -20px;
  background: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 18px 36px rgba(31,33,68,.14);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px; }
.landing-lower .v6__floater-icon { width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--lerni-green-wash);
  display: flex; align-items: center; justify-content: center;
  color: var(--lerni-green);
  font-size: 16px; font-weight: 900; }
.landing-lower .v6__floater b { font-size: 13px; font-weight: 800; color: var(--lerni-text-ink); display: block; }
.landing-lower .v6__floater span { font-size: 11px; color: var(--lerni-text-light); }
.landing-lower .land { font-family: var(--lerni-font-body);
  color: var(--lerni-text);
  background: #fff;
  width: 100%; }
.landing-lower .container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .landing-lower .container { padding-left: 40px; padding-right: 40px; }
}
.landing-lower .land .container { max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px; }
.landing-lower .land-section { padding: 96px 0;
  position: relative;
  background: #fff; }
.landing-lower .land-section--cream { background: var(--lerni-bg-alt); }
.landing-lower .land-section--lilac { background: var(--lerni-bg-lilac); }
.landing-lower .land-section--dark { background: linear-gradient(160deg,#1A1B3A 0%,#2D2055 100%); color: #fff; }
.landing-lower .eyebrow { display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lerni-purple-dark); }
.landing-lower .eyebrow::before { content: '';
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--lerni-purple);
  box-shadow: 0 0 0 5px rgba(150,123,183,.22); }
.landing-lower .land-section--dark .eyebrow { color: var(--lerni-coral-soft); }
.landing-lower .land-section--dark .eyebrow::before { background: var(--lerni-coral); box-shadow: 0 0 0 4px rgba(255,117,117,.25); }
.landing-lower .s-h { font-family: var(--lerni-font-body);
  font-size: 64px;
  line-height: 1.05;
  font-weight: 900;
  color: var(--lerni-text-ink);
  letter-spacing: -0.025em;
  margin: 22px 0 22px;
  text-wrap: balance; }
@media (max-width: 768px) {
  .landing-lower .s-h { font-size: 40px; }
  .landing-lower .eyebrow { font-size: 16px; gap: 10px; }
}
.landing-lower .land-section--dark .s-h { color: #fff; }
.landing-lower .s-sub { font-size: 19px;
  line-height: 1.55;
  color: var(--lerni-text-muted);
  margin: 0;
  max-width: 720px; }
.landing-lower .land-section--dark .s-sub { color: rgba(255,255,255,.7); }
.landing-lower .s-head { text-align: center; max-width: 820px; margin: 0 auto 64px; }
.landing-lower .s-head .s-sub { margin: 0 auto; }
.landing-lower .s-head--left { text-align: left; margin: 0 0 56px; }
.landing-lower .s-head--left .s-sub { margin: 0; }
.landing-lower .logos-bar { background: #fff; padding: 36px 0; border-bottom: 1px solid var(--lerni-border-soft); }
.landing-lower .logos-row { display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap; }
.landing-lower .logos-label { font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--lerni-text-light); }
.landing-lower .logos-item { font-family: var(--lerni-font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--lerni-gray-400);
  opacity: 0.78; }
.landing-lower .problem-grid { display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; }
.landing-lower .problem-card { background: #fff;
  border: 1px solid var(--lerni-border-soft);
  border-radius: var(--lerni-radius-lg);
  padding: 32px 28px;
  box-shadow: var(--lerni-shadow-sm); }
.landing-lower .problem-num { font-family: var(--lerni-font-body);
  font-size: 48px;
  font-weight: 900;
  color: var(--lerni-purple);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 18px; }
.landing-lower .problem-num small { font-size: 16px;
  color: var(--lerni-text-light);
  font-weight: 700;
  letter-spacing: 0; }
.landing-lower .problem-card h3 { font-size: 21px; font-weight: 900; color: var(--lerni-text-ink);
  margin: 0 0 10px; letter-spacing: -0.015em; }
.landing-lower .problem-card p { font-size: 15px; line-height: 1.55; color: var(--lerni-text-muted); margin: 0; }
.landing-lower .how-grid { display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center; }
.landing-lower .how-steps { display: flex; flex-direction: column; gap: 14px; }
.landing-lower .how-step { display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--lerni-border-soft);
  border-radius: var(--lerni-radius-lg);
  padding: 22px 24px;
  box-shadow: var(--lerni-shadow-sm);
  transition: transform 200ms var(--lerni-ease), box-shadow 200ms var(--lerni-ease); }
.landing-lower .how-step--active { border-color: rgba(150,123,183,.30);
  box-shadow: 0 16px 40px rgba(150,123,183,.15); }
.landing-lower .how-step__num { width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--lerni-purple-wash);
  color: var(--lerni-purple-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; }
.landing-lower .how-step--active .how-step__num { background: var(--lerni-purple); color: #fff; }
.landing-lower .how-step h4 { font-size: 19px; font-weight: 800; color: var(--lerni-text-ink);
  margin: 0 0 4px; letter-spacing: -0.01em; }
.landing-lower .how-step p { font-size: 14px; color: var(--lerni-text-muted); margin: 0; line-height: 1.5; }
.landing-lower .how-visual { background: #fff;
  border-radius: var(--lerni-radius-2xl);
  padding: 32px;
  box-shadow: 0 30px 60px rgba(31,33,68,.12);
  position: relative;
  overflow: hidden; }
.landing-lower .how-visual::before { content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 70% 30%, rgba(150,123,183,.10) 0%, transparent 60%); }
.landing-lower .how-visual img { width: 100%; display: block; border-radius: 14px; position: relative; }
.landing-lower .feature-row { display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
  padding: 48px 0; }
.landing-lower .feature-row--reverse .feature-row__copy { order: 2; }
.landing-lower .feature-row--reverse .feature-row__visual { order: 1; }
.landing-lower .feature-row__tag { display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase; }
.landing-lower .feature-row__tag--purple { background: var(--lerni-purple-wash); color: var(--lerni-purple-dark); }
.landing-lower .feature-row__tag--coral { background: var(--lerni-coral-tint); color: #B43F3F; }
.landing-lower .feature-row__tag--green { background: var(--lerni-green-wash); color: var(--lerni-green); }
.landing-lower .feature-row__tag--orange { background: var(--lerni-orange-wash); color: #A2541F; }
.landing-lower .feature-row h3 { font-size: 40px;
  font-weight: 900;
  color: var(--lerni-text-ink);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 14px 0 16px; }
.landing-lower .feature-row p { font-size: 17px;
  line-height: 1.6;
  color: var(--lerni-text-muted);
  margin: 0 0 24px;
  max-width: 520px; }
.landing-lower .feature-row__bullets { display: flex;
  flex-direction: column;
  gap: 12px; }
.landing-lower .feature-row__bullets li { list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--lerni-text); }
.landing-lower .feature-row__bullets li::before { content: '✓';
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--lerni-green-wash);
  color: var(--lerni-green);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px; }
.landing-lower .feature-row__visual { position: relative;
  border-radius: var(--lerni-radius-2xl);
  overflow: hidden;
  background: var(--lerni-bg);
  aspect-ratio: 5/4;
  box-shadow: 0 30px 60px rgba(31,33,68,.12); }
.landing-lower .feature-row__visual--photo { background-size: cover; background-position: center; }
.landing-lower .feature-row__visual--cards { padding: 36px;
  display: flex;
  align-items: center;
  justify-content: center; }
.landing-lower .method-grid { display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px; }
.landing-lower .method-card { background: #fff;
  border: 1px solid var(--lerni-border-soft);
  border-radius: var(--lerni-radius-lg);
  padding: 26px 22px;
  box-shadow: var(--lerni-shadow-sm); }
.landing-lower .method-card__num { font-family: var(--lerni-font-body);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--lerni-text-ink); }
.landing-lower .method-card__num em { font-style: normal; color: var(--lerni-purple); }
.landing-lower .method-card h4 { font-size: 15px; font-weight: 800; color: var(--lerni-text-ink); margin: 0 0 4px;
  letter-spacing: -0.005em; }
.landing-lower .method-card p { font-size: 13px; color: var(--lerni-text-muted); margin: 0; line-height: 1.5; }
.landing-lower .pricing-grid { display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch; }
.landing-lower .price-card { background: var(--lerni-purple-wash);
  border: 1.5px solid var(--lerni-purple-tint);
  border-radius: var(--lerni-radius-2xl);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--lerni-shadow);
  position: relative; }
.landing-lower .price-card--featured { background: linear-gradient(160deg, #1F2144 0%, #2D2055 100%);
  color: #fff;
  border: 0;
  transform: scale(1.04);
  box-shadow: 0 30px 60px rgba(45,32,85,.30); }
.landing-lower .price-tag { position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--lerni-coral);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px; font-weight: 900;
  letter-spacing: 0.14em; text-transform: uppercase; }
.landing-lower .price-card__name { font-size: 13px; font-weight: 800; color: var(--lerni-text-light);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; }
.landing-lower .price-card--featured .price-card__name { color: var(--lerni-coral-soft); }
.landing-lower .price-card__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.landing-lower .price-card__amount { font-family: var(--lerni-font-body);
  font-size: 56px; font-weight: 900; letter-spacing: -0.035em; line-height: 1;
  color: var(--lerni-text-ink); }
.landing-lower .price-card--featured .price-card__amount { color: #fff; }
.landing-lower .price-card__cycle { font-size: 15px; color: var(--lerni-text-light); font-weight: 600; }
.landing-lower .price-card--featured .price-card__cycle { color: rgba(255,255,255,.6); }
.landing-lower .price-card__desc { font-size: 14px; color: var(--lerni-text-muted); margin: 0 0 24px; line-height: 1.5; }
.landing-lower .price-card--featured .price-card__desc { color: rgba(255,255,255,.75); }
.landing-lower .price-card__cta { display: inline-flex; align-items: center; justify-content: center;
  height: 50px; border-radius: var(--lerni-radius);
  font-family: var(--lerni-font-display); font-weight: 700; font-size: 15px;
  border: 0; cursor: pointer; margin-bottom: 28px;
  transition: transform 200ms var(--lerni-ease); }
.landing-lower .price-card__cta--primary { background: var(--lerni-purple); color: #fff; box-shadow: var(--lerni-shadow-purple); }
.landing-lower .price-card__cta--ghost { background: transparent; color: var(--lerni-text-ink); border: 1.5px solid var(--lerni-text-ink); }
.landing-lower .price-card__cta--white { background: #fff; color: #1F2144; }
.landing-lower .price-card__cta:hover { transform: translateY(-1px); }
.landing-lower .price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.landing-lower .price-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--lerni-text); line-height: 1.45; }
.landing-lower .price-card--featured li { color: rgba(255,255,255,.9); }
.landing-lower .price-card li::before { content: '✓'; flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--lerni-green-wash); color: var(--lerni-green);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 12px; }
.landing-lower .price-card--featured li::before { background: rgba(255,255,255,.18); color: #fff; }
.landing-lower .pricing-trust { display: flex; align-items: center; justify-content: center; gap: 32px;
  margin-top: 48px; flex-wrap: wrap; }
.landing-lower .pricing-trust-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--lerni-text-muted); }
.landing-lower .pricing-trust-item b { color: var(--lerni-text-ink); font-weight: 800; }
.landing-lower .testimonial-grid { display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; }
.landing-lower .t-card { background: #fff;
  border-radius: var(--lerni-radius-lg);
  padding: 28px;
  border: 1px solid var(--lerni-border-soft);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--lerni-shadow-sm); }
.landing-lower .t-card--photo { padding: 0;
  overflow: hidden;
  position: relative;
  min-height: 380px;
  border: 0; }
.landing-lower .t-card--photo .t-photo { position: absolute; inset: 0;
  background-size: cover;
  background-position: center; }
.landing-lower .t-card--photo .t-photo::after { content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(31,33,68,.78) 100%); }
.landing-lower .t-card--photo .t-content { position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 24px;
  color: #fff; }
.landing-lower .t-card--photo .t-quote { color: #fff; }
.landing-lower .t-card--photo .t-author b { color: #fff; }
.landing-lower .t-card--photo .t-author span { color: rgba(255,255,255,.7); }
.landing-lower .t-stars { color: var(--lerni-yellow); font-size: 14px; letter-spacing: 1.5px; }
.landing-lower .t-quote { font-family: var(--lerni-font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--lerni-text-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1; }
.landing-lower .t-author { display: flex; align-items: center; gap: 12px; }
.landing-lower .t-avatar { width: 42px; height: 42px; border-radius: 999px;
  background-size: cover; background-position: center; }
.landing-lower .t-author b { font-size: 14px; font-weight: 800; color: var(--lerni-text-ink); display: block; }
.landing-lower .t-author span { font-size: 12px; color: var(--lerni-text-light); }
.landing-lower .cta-band { background: linear-gradient(135deg, #1F2144 0%, #2D2055 50%, #5D3B95 100%);
  color: #fff;
  border-radius: var(--lerni-radius-2xl);
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden; }
.landing-lower .cta-band::before { content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,117,117,.25) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(150,123,183,.30) 0%, transparent 50%); }
.landing-lower .cta-band > * { position: relative; z-index: 2; }
.landing-lower .cta-band h2 { font-family: var(--lerni-font-body);
  font-size: 56px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 18px; }
.landing-lower .cta-band p { font-size: 18px;
  color: rgba(255,255,255,.78);
  margin: 0 0 28px;
  line-height: 1.55;
  max-width: 480px; }
.landing-lower .cta-band__ctas { display: flex; align-items: center; gap: 14px; }
.landing-lower .cta-band__metric-grid { display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px; }
.landing-lower .cta-band__metric { background: rgba(255,255,255,.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--lerni-radius-lg);
  padding: 22px; }
.landing-lower .cta-band__metric-num { font-size: 36px; font-weight: 900;
  letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 4px; }
.landing-lower .cta-band__metric-num em { font-style: normal; color: var(--lerni-coral-soft); }
.landing-lower .cta-band__metric-lbl { font-size: 12px; color: rgba(255,255,255,.7);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.landing-lower .faq-list { display: flex;
  flex-direction: column;
  gap: 12px; }
.landing-lower .faq-item { background: #fff;
  border: 1px solid var(--lerni-border-soft);
  border-radius: var(--lerni-radius-lg);
  overflow: hidden; }
.landing-lower .faq-q { display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  font-size: 17px;
  font-weight: 800;
  color: var(--lerni-text-ink);
  cursor: pointer;
  letter-spacing: -0.01em; }
.landing-lower .faq-q__icon { width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--lerni-purple-wash);
  color: var(--lerni-purple-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900;
  flex-shrink: 0; }
.landing-lower .faq-a { padding: 0 24px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lerni-text-muted);
  border-top: 1px solid var(--lerni-border-soft);
  margin-top: -2px;
  padding-top: 18px; }
.landing-lower .faq-item--open .faq-q__icon { background: var(--lerni-purple); color: #fff; }
.landing-lower .faq-item:not(.faq-item--open) .faq-a { display: none; }
.landing-lower .sticky-banner { position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1100px;
  background: #fff;
  border-radius: var(--lerni-radius-xl);
  padding: 16px 20px 16px 24px;
  box-shadow: 0 30px 60px rgba(31,33,68,.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--lerni-border-soft);
  z-index: 90; }
.landing-lower .sticky-banner b { font-size: 15px; font-weight: 800; color: var(--lerni-text-ink); display: block; }
.landing-lower .sticky-banner span { font-size: 13px; color: var(--lerni-text-light); }
.landing-lower .compare-table { width: 100%;
  background: #fff;
  border-radius: var(--lerni-radius-2xl);
  border: 1px solid var(--lerni-border-soft);
  overflow: hidden;
  box-shadow: var(--lerni-shadow); }
.landing-lower .compare-table table { width: 100%; border-collapse: collapse; }
.landing-lower .compare-table th, .landing-lower .compare-table td { padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid var(--lerni-border-soft);
  font-size: 15px; }
.landing-lower .compare-table th { font-weight: 800;
  color: var(--lerni-text-light);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--lerni-bg); }
.landing-lower .compare-table th.col-lerni { background: var(--lerni-purple);
  color: #fff; }
.landing-lower .compare-table td.col-lerni { background: rgba(150,123,183,.08);
  font-weight: 700;
  color: var(--lerni-text-ink); }
.landing-lower .compare-table td:first-child { font-weight: 800; color: var(--lerni-text-ink); }
.landing-lower .compare-table tr:last-child td { border-bottom: 0; }
.landing-lower .compare-check { color: var(--lerni-green); font-weight: 900; font-size: 16px; }
.landing-lower .compare-x { color: var(--lerni-gray-300); font-weight: 900; font-size: 16px; }
html, body { margin: 0; padding: 0; background: #fff; }
.landing-lower #root { width: 100%; }
/* ============================================================
   Heritage section rebuild (07b)
   Big-stat trio, founder quote, milestone timeline.
   Replaces the previous credentials-only block with a story.
============================================================ */
.landing-lower .heritage-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 28px;
  max-width: 980px;
  margin: 0 auto 56px;
  text-align: center; }
.landing-lower .heritage-stat__num {
  font-family: var(--lerni-font-display);
  font-weight: 900;
  font-size: clamp(64px, 9vw, 104px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--lerni-purple);
  background: linear-gradient(180deg, var(--lerni-purple) 0%, var(--lerni-purple-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px; }
.landing-lower .heritage-stat__num em {
  font-style: normal;
  font-size: 0.55em;
  font-weight: 800;
  vertical-align: 0.18em;
  margin-left: 0.04em;
  letter-spacing: 0; }
.landing-lower .heritage-stat__label {
  font-family: var(--lerni-font-body);
  font-size: 15px;
  font-weight: 800;
  color: var(--lerni-text-ink);
  letter-spacing: -0.005em;
  margin-bottom: 6px; }
.landing-lower .heritage-stat__sub {
  font-size: 13px;
  color: var(--lerni-text-muted);
  line-height: 1.45;
  max-width: 260px;
  margin: 0 auto; }

.landing-lower .heritage-quote {
  max-width: 760px;
  margin: 0 auto 64px;
  padding: 32px 28px;
  background: #fff;
  border: 1px solid var(--lerni-border-soft);
  border-radius: 24px;
  box-shadow: 0 12px 32px -8px rgba(31,33,68,.08); }
.landing-lower .heritage-quote blockquote {
  margin: 0 0 20px;
  font-family: var(--lerni-font-display);
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--lerni-text-ink);
  letter-spacing: -0.005em;
  position: relative;
  padding-left: 28px; }
.landing-lower .heritage-quote blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -8px;
  font-family: var(--lerni-font-display);
  font-size: 52px;
  color: var(--lerni-purple);
  line-height: 1;
  opacity: 0.5; }
.landing-lower .heritage-quote figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--lerni-border-soft); }
.landing-lower .heritage-quote__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
  box-shadow: 0 2px 0 var(--lerni-purple-wash), 0 8px 18px -6px rgba(31,33,68,.22);
  background: linear-gradient(135deg, var(--lerni-purple) 0%, var(--lerni-coral) 100%); }
.landing-lower .heritage-quote__name {
  display: block;
  font-weight: 900;
  font-size: 15px;
  color: var(--lerni-text-ink); }
.landing-lower .heritage-quote__role {
  display: block;
  font-size: 13px;
  color: var(--lerni-text-muted);
  margin-top: 2px; }

.landing-lower .heritage-timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative; }
.landing-lower .heritage-timeline::before {
  content: "";
  position: absolute;
  left: 78px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--lerni-purple-wash) 0%, var(--lerni-purple-tint, #c8b3e8) 50%, var(--lerni-purple-wash) 100%);
  border-radius: 1px; }
.landing-lower .heritage-timeline__item {
  position: relative;
  padding: 18px 0 18px 110px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px; }
.landing-lower .heritage-timeline__item::before {
  content: "";
  position: absolute;
  left: 72px;
  top: 26px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--lerni-purple);
  box-shadow: 0 0 0 4px rgba(150,123,183,.08); }
.landing-lower .heritage-timeline__year {
  position: absolute;
  left: 0;
  top: 20px;
  font-family: var(--lerni-font-display);
  font-weight: 900;
  font-size: 18px;
  color: var(--lerni-purple-dark);
  letter-spacing: -0.01em;
  width: 56px;
  text-align: right; }
.landing-lower .heritage-timeline__title {
  font-family: var(--lerni-font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--lerni-text-ink);
  letter-spacing: -0.005em; }
.landing-lower .heritage-timeline__sub {
  font-size: 14px;
  color: var(--lerni-text-muted);
  line-height: 1.5; }
.landing-lower .heritage-timeline__item--now::before {
  background: var(--lerni-purple);
  box-shadow: 0 0 0 4px rgba(150,123,183,.18), 0 0 0 10px rgba(150,123,183,.06); }
.landing-lower .heritage-timeline__item--now .heritage-timeline__title { color: var(--lerni-purple-dark); }

@media (max-width: 780px) {
  .landing-lower .heritage-stats { grid-template-columns: 1fr; gap: 36px; max-width: 360px; }
  .landing-lower .heritage-quote { padding: 24px 20px; border-radius: 18px; }
  .landing-lower .heritage-quote blockquote { font-size: 17px; padding-left: 22px; }
  .landing-lower .heritage-timeline::before { left: 18px; }
  .landing-lower .heritage-timeline__item { padding: 14px 0 14px 52px; }
  .landing-lower .heritage-timeline__item::before { left: 12px; top: 22px; }
  .landing-lower .heritage-timeline__year { position: static; width: auto; text-align: left; font-size: 14px; margin-bottom: 2px; }
}

/* ============================================================
   Hero-nav locale switcher chip (anon visitors).
   Compact flag + ISO-code button with a hover/click dropdown.
============================================================ */
.landing-lower .hero-nav__locale { position: relative; }
.landing-lower .hero-nav__locale-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--lerni-border);
  border-radius: 999px;
  font-family: var(--lerni-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--lerni-text-ink);
  cursor: pointer;
  transition: border-color .2s var(--lerni-ease), background .2s var(--lerni-ease); }
.landing-lower .hero-nav__locale-trigger:hover { border-color: var(--lerni-purple-tint, #c8b3e8); background: var(--lerni-purple-wash); }
.landing-lower .hero-nav__locale-code { letter-spacing: 0.04em; }
.landing-lower .hero-nav__locale-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 140px;
  background: #fff;
  border: 1px solid var(--lerni-border-soft);
  border-radius: 12px;
  box-shadow: 0 16px 32px -8px rgba(31,33,68,.18);
  padding: 6px;
  z-index: 50; }
.landing-lower .hero-nav__locale-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lerni-text-ink);
  text-decoration: none;
  transition: background .15s var(--lerni-ease); }
.landing-lower .hero-nav__locale-item:hover { background: var(--lerni-bg); }
.landing-lower .hero-nav__locale-item.is-active { background: var(--lerni-purple-wash); color: var(--lerni-purple-dark); font-weight: 800; }
.landing-lower .hero-nav__flag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; }

/* ============================================================
   Mobile breakpoints — collapse multi-column grids on phones.
   The bulk of the page was authored at desktop widths; without
   these rules a phone gets desktop-width grids that overflow
   the viewport and force horizontal scroll.
============================================================ */
@media (max-width: 880px) {
  .landing-lower .v3__content { grid-template-columns: 1fr; gap: 32px; }
  .landing-lower .v3__macbook { width: 100%; max-width: 100%; }
  .landing-lower .v3__macbook img { width: 100%; height: auto; }
  .landing-lower .v3__floating-stat { display: none; }
  .landing-lower .v3__stat-bar { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .landing-lower .problem-grid { grid-template-columns: 1fr; }
  .landing-lower .how-grid { grid-template-columns: 1fr; }
  .landing-lower .feature-row,
  .landing-lower .feature-row--reverse { grid-template-columns: 1fr; }
  .landing-lower .feature-row__visual { min-height: 280px; max-height: 420px; }
  .landing-lower .method-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-lower .testimonial-grid { grid-template-columns: 1fr; }
  .landing-lower .cta-band { grid-template-columns: 1fr; gap: 32px; }
  .landing-lower .cta-band__metric-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-lower .cta-band__metric-num em { font-size: 32px; }
  .landing-lower .compare-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .landing-lower .compare-table table { min-width: 560px; }
}

/* ------------------------------------------------------------
   P1 mobile fixes (narrow viewports — phones, 320–560px).
   Targets ship-blocker issues: horizontal scroll, untappable
   nav, oversized headlines, sticky bar overflow.
------------------------------------------------------------ */
@media (max-width: 560px) {
  /* Long words / unbreakable strings must wrap inside the landing
     instead of pushing the viewport. */
  .landing-lower { overflow-x: hidden; }
  .landing-lower .s-h,
  .landing-lower .v3__headline,
  .landing-lower .v3__headline--triad,
  .landing-lower .feature-row h3,
  .landing-lower .cta-band h2,
  .landing-lower .tile-h { overflow-wrap: break-word; word-break: break-word; }

  /* Hero nav — inline `padding: 20px 64px` on <nav> is unreachable
     without !important. Phones get a tighter padded row and the
     CTA cluster wraps if the locale chip + log-in + see-pricing
     can't fit a single line. */
  .landing-lower .hero-nav { padding: 14px 16px !important; gap: 10px; flex-wrap: wrap; }
  .landing-lower .hero-nav__logo { height: 36px; }
  .landing-lower .hero-nav__cta { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  /* Keep Method + Pricing visible on mobile — earlier fix hid the
     entire link group, but those two links are public, not @auth. The
     @auth-only links (Courses, Blog, For business, For schools) are
     gated in the markup itself, so this rule only narrows the gap. */
  .landing-lower .hero-nav__links { gap: 14px; font-size: 13px; flex-basis: 100%; order: 3; justify-content: center; padding-top: 6px; border-top: 1px solid var(--lerni-border-soft); margin-top: 6px; }
  .landing-lower .hero-nav__link { padding-top: 2px; padding-bottom: 2px; }

  /* Hero CTAs + language chips — wrap so two MD buttons / five flag
     chips don't push the right edge off-screen. */
  .landing-lower .v3__ctas { flex-wrap: wrap; gap: 10px; }
  .landing-lower .v3__ctas .lerni-btn { flex: 1 1 auto; min-width: 0; }
  .landing-lower .v3__langs { flex-wrap: wrap; gap: 8px; }
  .landing-lower .v3__chip { max-width: 100%; height: auto; padding: 6px 12px; }
  .landing-lower .v3__chip-text { white-space: normal; line-height: 1.3; }
  .landing-lower .v3__content { padding-left: 16px; padding-right: 16px; }
  .landing-lower .v3__stat-bar { grid-template-columns: 1fr; padding: 0 16px; }
  .landing-lower .v3__stat { border-right: 0; border-bottom: 1px solid var(--lerni-border-soft); padding: 16px 8px; }
  .landing-lower .v3__stat:last-child { border-bottom: 0; }

  /* Headline scaling — 64/52px display fonts don't fit 320px. */
  .landing-lower .v3__headline { font-size: 36px; }
  .landing-lower .v3__headline--triad { font-size: 30px; }
  .landing-lower .s-h { font-size: 30px; }
  .landing-lower .feature-row h3 { font-size: 28px; }
  .landing-lower .cta-band h2 { font-size: 32px; }

  /* CTA band — desktop padding 64px×56px eats most of a 320px viewport. */
  .landing-lower .cta-band { padding: 36px 22px; gap: 24px; }
  .landing-lower .cta-band__ctas { flex-wrap: wrap; gap: 10px; }
  .landing-lower .cta-band__ctas .lerni-btn { flex: 1 1 auto; min-width: 0; }
  .landing-lower .cta-band__metric-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .landing-lower .cta-band__metric { padding: 14px; }
  .landing-lower .cta-band__metric-num { font-size: 26px; }
  .landing-lower .cta-band__metric-num em { font-size: 26px; }

  /* Method grid — 2 cards per row stays readable at 320px when the
     full 4-col grid would otherwise force a single column wall. */
  .landing-lower .method-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .landing-lower .method-card { padding: 18px 14px; }
  .landing-lower .method-card__num { font-size: 36px; }

  /* Sticky banner — stack icon row over the CTA button so 320px doesn't
     squeeze the text down to one word per line. */
  .landing-lower .sticky-banner {
    width: calc(100% - 24px);
    bottom: 12px;
    padding: 12px 14px;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center; }
  .landing-lower .sticky-banner .lerni-btn { width: 100%; }

  /* Locale dropdown — chip is rightmost in the nav; the menu anchors
     right:0 and is 140px wide. Confirm the menu can't be wider than
     the viewport on the smallest screens. */
  .landing-lower .hero-nav__locale-menu { min-width: 0; width: max-content; max-width: calc(100vw - 32px); }

  /* FAQ accordion — looser tap target, smaller heading on phones. */
  .landing-lower .faq-q { padding: 18px 18px; font-size: 16px; gap: 14px; }
  .landing-lower .faq-a { padding: 14px 18px 18px; }

  /* Pricing trust strip — stop the three rows from crowding into one
     unreadable line. */
  .landing-lower .pricing-trust { gap: 16px; flex-direction: column; align-items: flex-start; }

  /* Heritage stats — single column already in place via 780px rule,
     but big numerals can clip on 320px without a max width. */
  .landing-lower .heritage-stat__num { font-size: 56px; }

  /* Logo bar — items wrap; make sure long labels don't form a single
     overflowing row. */
  .landing-lower .logos-row { gap: 18px 24px; }
}

@media (max-width: 380px) {
  /* Smallest phones (320–380px): make sure two-button hero/CTA rows
     fall to one button per row rather than crushing labels. */
  .landing-lower .v3__ctas .lerni-btn,
  .landing-lower .cta-band__ctas .lerni-btn { width: 100%; flex: 1 1 100%; }
  .landing-lower .v3__headline--triad { font-size: 26px; }
  .landing-lower .v3__headline { font-size: 30px; }
  .landing-lower .s-h { font-size: 26px; }
  .landing-lower .cta-band h2 { font-size: 28px; }
}

/* ============================================================
   Comparison table — mobile rebuild
   ------------------------------------------------------------
   Below 640px the desktop 4-column table is unreadable even
   with a horizontal-scroll wrapper. Switch to a card stack:
   each row becomes a card with the feature name as the title
   and each verdict labelled (App / Textbook / Lerni).
============================================================ */
@media (max-width: 640px) {
  /* Earlier @media (max-width:880px) rule set min-width:560px on the
     inner <table> and overflow-x:auto on the wrapper. min-width was
     clipping the right edge off-screen on phones. Override here. */
  .landing-lower .compare-table { overflow: visible !important; padding: 0; background: transparent; max-width: 100%; width: 100%; }
  .landing-lower .compare-table table { min-width: 0 !important; max-width: 100%; }
  .landing-lower .compare-table table,
  .landing-lower .compare-table thead,
  .landing-lower .compare-table tbody,
  .landing-lower .compare-table tr,
  .landing-lower .compare-table th,
  .landing-lower .compare-table td { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
  .landing-lower .compare-table thead { position: absolute; left: -9999px; top: -9999px; }
  .landing-lower .compare-table tbody { display: grid; gap: 12px; }
  .landing-lower .compare-table tr {
    background: #fff;
    border-radius: 14px;
    padding: 16px 16px 8px;
    box-shadow: 0 2px 8px rgba(31,33,68,.06);
    border: 1px solid var(--lerni-border-soft); }
  .landing-lower .compare-table td:first-child {
    font-family: var(--lerni-font-display);
    font-weight: 800;
    font-size: 15px;
    color: var(--lerni-text-ink);
    line-height: 1.35;
    text-align: left;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--lerni-border-soft); }
  .landing-lower .compare-table td:not(:first-child) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    text-align: left !important;
    font-size: 14px;
    color: var(--lerni-text-muted); }
  .landing-lower .compare-table td:not(:first-child)::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--lerni-text-light);
    letter-spacing: 0.02em; }
  .landing-lower .compare-table td.col-lerni::before { color: var(--lerni-purple-dark); }
  .landing-lower .compare-table td.col-lerni {
    background: var(--lerni-purple-wash);
    border-radius: 8px;
    padding-left: 12px;
    padding-right: 12px;
    margin-top: 6px; }
  /* Verdict glyphs sized for the right-aligned card row */
  .landing-lower .compare-table .compare-check { font-size: 18px; }
  .landing-lower .compare-table .compare-x { font-size: 18px; }
}

/* Sticky banner — mobile: button-only.
   Hides the icon + price text + microcopy block so phones see just the
   pricing CTA in the floating bar (no clipped 3-line layout). */
@media (max-width: 640px) {
  .landing-lower .sticky-banner { padding: 12px 14px; gap: 0; }
  .landing-lower .sticky-banner__context { display: none !important; }
  .landing-lower .sticky-banner .lerni-btn { width: 100%; text-align: center; padding: 12px 14px; font-size: 14px; min-height: 48px; }
}

/* ============================================================
   Sticky banner — entrance / exit motion
   ------------------------------------------------------------
   Replaces Alpine's default x-transition.opacity (which only
   fades and feels abrupt against a fixed-position element).
   Adds a slide-up + subtle scale + soft purple-glow pulse on
   reveal. Honours prefers-reduced-motion.
============================================================ */
.landing-lower .sticky-banner--enter {
  transition: opacity .42s cubic-bezier(.22,1,.36,1),
              transform .55s cubic-bezier(.22,1,.36,1),
              box-shadow .65s cubic-bezier(.22,1,.36,1); }
.landing-lower .sticky-banner--enter-start {
  opacity: 0;
  transform: translateY(28px) scale(.97);
  box-shadow: 0 0 0 rgba(150,123,183,0); }
.landing-lower .sticky-banner--enter-end {
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: 0 24px 60px -16px rgba(31,33,68,.22), 0 0 0 10px rgba(150,123,183,.08); }

.landing-lower .sticky-banner--leave {
  transition: opacity .25s ease-out, transform .3s ease-out; }
.landing-lower .sticky-banner--leave-start {
  opacity: 1;
  transform: translateY(0); }
.landing-lower .sticky-banner--leave-end {
  opacity: 0;
  transform: translateY(20px); }

/* Once the banner is fully in, settle the glow to its rest state */
.landing-lower .sticky-banner {
  transition: box-shadow .45s ease-out, transform .25s var(--lerni-ease, cubic-bezier(.22,1,.36,1)); }

/* Reduced-motion users get a plain fade with no slide/scale */
@media (prefers-reduced-motion: reduce) {
  .landing-lower .sticky-banner--enter,
  .landing-lower .sticky-banner--leave { transition: opacity .2s linear; }
  .landing-lower .sticky-banner--enter-start,
  .landing-lower .sticky-banner--leave-end { transform: none; box-shadow: none; }
  .landing-lower .sticky-banner--enter-end,
  .landing-lower .sticky-banner--leave-start { transform: none; }
}

/* Hero CTA dual-label — long copy on desktop, short on mobile.
   Long: "Start learning languages from 29 PLN/month" wraps to 2 lines
   on phones; short renders the same offer in <20 chars. */
.landing-lower .cta-label--short { display: none; }
@media (max-width: 540px) {
  .landing-lower .cta-label--long { display: none; }
  .landing-lower .cta-label--short { display: inline; }
}