:root{
  --bg:#f7f9fc; --surface:#ffffff; --surface-2:#eef5ff; --text:#07162f;
  --muted:#56637b; --accent:#1677ff; --line:#dfe7f2; --shadow:0 12px 35px rgba(21,48,86,.08);
  --radius:26px; --max:1180px;
}
html[data-theme="dark"]{
  --bg:#090d16; --surface:#101725; --surface-2:#121d30; --text:#f5f8ff;
  --muted:#aab5c8; --accent:#5c9dff; --line:#253149; --shadow:0 12px 35px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.45}
img{max-width:100%;display:block}
a{color:inherit}
.shell{width:min(var(--max),calc(100% - 32px));margin-inline:auto}
.site-header{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:28px;font-weight:800}
.brand-mark{color:var(--accent);font-size:26px}
.header-controls{display:flex;gap:12px;align-items:center}
.language-control{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);padding:10px 13px;border-radius:999px}
.language-control select{appearance:none;border:0;background:transparent;color:var(--text);font:inherit;font-weight:650;padding-right:20px;outline:none}
.theme-toggle{border:1px solid var(--line);background:linear-gradient(90deg,#fff 0 50%,#10204a 50%);border-radius:999px;padding:6px 9px;min-width:100px;display:flex;align-items:center;justify-content:space-between;gap:7px;cursor:pointer}
.theme-knob{width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.2);transform:translateX(-4px);transition:.2s}
html[data-theme="dark"] .theme-knob{transform:translateX(4px)}
main{padding-bottom:22px}
.section-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;
  margin-bottom:18px;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--section-bg,var(--surface));
  box-shadow:var(--shadow);
}
.panel{
  min-width:0;
  border-radius:0;
  overflow:hidden;
  background:transparent;
}
.info{
  padding:clamp(28px,4vw,58px);
  background:linear-gradient(90deg,var(--section-bg,var(--surface)) 0%,var(--section-bg,var(--surface)) 82%,rgba(255,255,255,0) 100%);
  position:relative;
  z-index:2;
}
.visual{
  min-height:430px;
  position:relative;
  background-color:var(--section-bg,var(--surface));
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.visual::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:28%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,var(--section-bg,var(--surface)) 0%,rgba(255,255,255,0) 100%);
}
.visual-plain{background-color:var(--section-bg,var(--surface))}
.fanti-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  position:relative;
  z-index:0;
}
.hero{min-height:600px}
.hero .panel{min-height:600px}
.hero-copy{display:flex;flex-direction:column;justify-content:center}
h1,h2{margin:0;color:var(--text);letter-spacing:-.035em;line-height:1.02}
h1{font-size:clamp(48px,6vw,82px);max-width:700px}
h2{font-size:clamp(34px,4vw,58px)}
.lead{color:var(--muted);font-size:clamp(19px,2vw,26px);margin:22px 0}
.lead.small{font-size:18px}
.eyebrow{color:var(--accent);font-size:13px;font-weight:800;letter-spacing:.08em;margin:0 0 14px}
.store-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
.store-row img{height:55px;width:auto}
.hero-visual{position:relative;display:grid;grid-template-columns:.48fr .52fr;align-items:end;padding:24px 22px 0;background:transparent}
.hero-visual .fanti-photo{grid-column:2;height:92%;object-fit:cover;border-radius:0}
.phone{position:relative;background:#111;border-radius:44px;padding:10px;box-shadow:0 18px 40px rgba(4,15,38,.20);aspect-ratio:9/19.5;overflow:hidden}
.phone::before{content:"";position:absolute;z-index:3;top:15px;left:50%;transform:translateX(-50%);width:34%;height:24px;border-radius:14px;background:#080808}
.phone-screen{width:100%;height:100%;object-fit:cover;border-radius:35px;background:#fff}
.phone--hero{grid-column:1;width:min(310px,95%);justify-self:end;z-index:2}
.phone--phrases{width:220px;flex:0 0 220px}
.phone--small{width:190px;flex:0 0 190px}
.icon-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
.flow-item,.icon-item{text-align:left}
.flow-item img,.icon-item img{width:52px;height:52px;margin-bottom:10px}
.flow-item strong,.icon-item strong{display:block;font-size:18px}
.flow-item span,.icon-item span{color:var(--muted);font-size:14px}
.phrases-info{display:flex;align-items:center;gap:34px}
.phrases-copy{min-width:0}
.mini-points{display:grid;gap:12px;margin-top:22px}
.mini-point{padding:12px 0;border-top:1px solid var(--line)}
.mini-point strong{display:block}
.mini-point span{color:var(--muted);font-size:14px}
.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.activity{margin:0;text-align:center}
.activity img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px}
.activity figcaption{font-weight:700;font-size:14px;margin-top:7px}
.languages-content,.pace-panel,.tools-panel{display:flex;align-items:center;gap:28px;margin-top:24px}
.flag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;flex:1;width:100%}
.flag-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--surface-2)}
.flag-card img{width:46px;height:31px;border-radius:7px}
.flag-card span{font-size:14px;font-weight:700;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
.icon-grid{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:16px;margin-top:22px}
.icon-item{padding:12px;background:var(--surface-2);border-radius:16px}
.tools-grid{grid-template-columns:repeat(3,minmax(100px,1fr))}
.cta{background:linear-gradient(90deg,#e9f2ff,#f8fbff);border-radius:var(--radius);overflow:hidden}
html[data-theme="dark"] .cta{background:linear-gradient(90deg,#12213a,#0e1625)}
.cta .panel{border-radius:0}
.schools-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:18px 24px;margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:22px;text-decoration:none}
.schools-card img{width:48px}
.schools-card strong,.schools-card small{display:block}
.schools-card small{color:var(--muted);margin-top:3px}
.schools-card b{color:var(--accent)}
.site-footer{min-height:100px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}
.footer-brand{font-size:22px}
.site-footer nav{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.site-footer nav a,.schools-footer{font-size:14px;text-decoration:none;color:var(--muted)}
.schools-footer{color:var(--accent)}
@media (max-width: 800px){
  .shell{width:min(100% - 22px,680px)}
  .site-header{min-height:74px}
  .brand{font-size:22px}
  .language-control{padding:8px 10px}
  .language-control select{max-width:115px}
  .theme-toggle{min-width:86px}
  .section-grid{grid-template-columns:1fr;gap:0;margin-bottom:12px;border-radius:20px}
  .panel{border-radius:0}
  .info{
    background:linear-gradient(180deg,var(--section-bg,var(--surface)) 0%,var(--section-bg,var(--surface)) 90%,rgba(255,255,255,0) 100%);
  }
  .visual::before{
    inset:0 0 auto 0;
    width:100%;
    height:18%;
    background:linear-gradient(180deg,var(--section-bg,var(--surface)) 0%,rgba(255,255,255,0) 100%);
  }
  html[data-theme="dark"] .info{
    background:linear-gradient(180deg,var(--section-bg,var(--surface)) 0%,var(--section-bg,var(--surface)) 90%,rgba(16,23,37,0) 100%);
  }
  html[data-theme="dark"] .visual::before{
    background:linear-gradient(180deg,var(--section-bg,var(--surface)) 0%,rgba(16,23,37,0) 100%);
  }
  .info{padding:28px 22px}
  .hero,.hero .panel{min-height:auto}
  .hero-copy{padding-top:34px;padding-bottom:34px}
  h1{font-size:clamp(44px,13vw,64px)}
  h2{font-size:clamp(32px,9vw,46px)}
  .hero-visual{min-height:520px;grid-row:2;grid-template-columns:.46fr .54fr}
  .hero-visual .fanti-photo{height:90%}
  .phone--hero{width:min(255px,100%)}
  .visual{min-height:380px}
  .icon-flow{grid-template-columns:1fr;gap:14px}
  .flow-item{display:grid;grid-template-columns:52px 1fr;column-gap:14px;align-items:start}
  .flow-item img{grid-row:1/3;margin:0}
  .phrases-info,.languages-content,.pace-panel,.tools-panel{flex-direction:column;align-items:flex-start}
  .phone--phrases,.phone--small{width:min(270px,78vw);align-self:center;flex-basis:auto}
  .activity-grid{grid-template-columns:repeat(2,1fr)}
  .flag-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .icon-grid,.tools-grid{grid-template-columns:1fr 1fr;width:100%}
  .order-desktop-left{order:2}
  .cta-copy{order:1}
  .cta .visual{order:2}
  .schools-card{grid-template-columns:auto 1fr;padding:16px}
  .schools-card b{grid-column:2}
  .site-footer{grid-template-columns:1fr;text-align:center;padding:26px 0}
  .site-footer .brand{justify-content:center}
  .site-footer nav{gap:14px}
}
@media (max-width: 460px){
  .header-controls{gap:7px}
  .language-control span{display:none}
  .theme-toggle{min-width:78px}
  .store-row{gap:9px}
  .store-row img{height:46px}
  .hero-visual{min-height:430px;padding-inline:12px}
  .activity-grid{gap:9px}
  .activity figcaption{font-size:12px}
  .flag-card{padding:8px}
  .flag-card img{width:38px}
}

.section-soft{--section-bg:#f7faff}

/* Continuous-section palette */
.hero{--section-bg:#f6f9ff}
main > .section-soft:nth-of-type(2){--section-bg:#fbfcff}
main > .section-soft:nth-of-type(3){--section-bg:#fffaf5}
main > .section-soft:nth-of-type(4){--section-bg:#f7fbff}
main > .section-soft:nth-of-type(5){--section-bg:#f8fbff}
main > .section-soft:nth-of-type(6){--section-bg:#fbf9f5}
main > .section-soft:nth-of-type(7){--section-bg:#f8fbff}

html[data-theme="dark"] .info{
  background:linear-gradient(90deg,var(--section-bg,var(--surface)) 0%,var(--section-bg,var(--surface)) 82%,rgba(16,23,37,0) 100%);
}
html[data-theme="dark"] .visual::before{
  background:linear-gradient(90deg,var(--section-bg,var(--surface)) 0%,rgba(16,23,37,0) 100%);
}
html[data-theme="dark"] .hero{--section-bg:#101827}
html[data-theme="dark"] main > .section-soft:nth-of-type(2){--section-bg:#111827}
html[data-theme="dark"] main > .section-soft:nth-of-type(3){--section-bg:#1a1713}
html[data-theme="dark"] main > .section-soft:nth-of-type(4){--section-bg:#111b29}
html[data-theme="dark"] main > .section-soft:nth-of-type(5){--section-bg:#101b2a}
html[data-theme="dark"] main > .section-soft:nth-of-type(6){--section-bg:#181713}
html[data-theme="dark"] main > .section-soft:nth-of-type(7){--section-bg:#111b29}

/* V4: universal HTML-composited app mockups */
.app-mockup{
  background:#111;
}
.app-mockup::before{
  content:"";
  position:absolute;
  z-index:5;
  top:15px;
  left:50%;
  transform:translateX(-50%);
  width:34%;
  height:24px;
  border-radius:14px;
  background:#080808;
}
.mock-player,
.mock-library{
  height:100%;
  border-radius:35px;
  overflow:hidden;
  background:#f7f9fc;
  color:#0b1730;
}
html[data-theme="dark"] .mock-player,
html[data-theme="dark"] .mock-library{
  background:#111827;
  color:#f7f9ff;
}
.mock-player{
  padding:66px 22px 24px;
  display:flex;
  flex-direction:column;
}
.mock-language{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:750;
  font-size:15px;
  min-width:0;
}
.mock-language img{
  width:34px;
  height:23px;
  border-radius:6px;
  flex:0 0 auto;
}
.mock-language span{
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
}
.mock-player-card{
  margin-top:26px;
  min-height:170px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 8px 28px rgba(26,49,85,.10);
  padding:28px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:15px;
}
html[data-theme="dark"] .mock-player-card{
  background:#1b2435;
}
.mock-player-card strong{
  font-size:clamp(18px,2vw,25px);
  line-height:1.25;
  overflow-wrap:anywhere;
}
.mock-speaker{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;background:var(--accent);
}
.mock-wave{
  color:var(--accent);
  letter-spacing:2px;
  overflow:hidden;
  white-space:nowrap;
  margin:25px 0 12px;
  text-align:center;
}
.mock-controls{
  display:flex;align-items:center;justify-content:space-around;
  margin-top:auto;font-size:22px;
}
.mock-controls b{
  width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:22px;
}
.mock-progress{
  height:6px;border-radius:99px;background:#d8e2ef;margin-top:24px;overflow:hidden;
}
.mock-progress i{
  display:block;width:58%;height:100%;background:var(--accent);
}

.mock-library{
  padding:62px 14px 18px;
}
.mock-library-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:8px;margin-bottom:13px;
}
.mock-library-head span{
  font-size:16px;font-weight:800;min-width:0;overflow-wrap:anywhere;
}
.mock-library-head small{
  color:var(--muted);flex:0 0 auto;
}
.mock-library-rows{
  display:grid;gap:10px;
}
.mock-library-row{
  min-height:82px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 4px 16px rgba(20,43,75,.08);
  padding:12px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
html[data-theme="dark"] .mock-library-row{
  background:#1b2435;
}
.mock-library-thumb{
  width:52px;height:58px;border-radius:11px;
  background:linear-gradient(145deg,#e7edf6,#b9c7dc);
}
html[data-theme="dark"] .mock-library-thumb{
  background:linear-gradient(145deg,#28364d,#182234);
}
.mock-library-row strong{
  font-size:12px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.mock-library-row small{
  display:block;color:var(--muted);font-size:10px;margin-top:3px;
}
.pace-phone .phone-screen{
  object-fit:cover;
}
.languages-content{
  align-items:flex-start;
}
@media (max-width:800px){
  .flag-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:390px){
  .flag-grid{
    grid-template-columns:1fr;
  }
}

/* V5 layout refinements */
.works-on{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  color:var(--muted);
  font-size:15px;
}
.works-icons{
  color:var(--text);
  font-size:22px;
  letter-spacing:3px;
  flex:0 0 auto;
}

/* Keep text safely in its half; Fanti never intrudes into copy */
.section-grid{
  isolation:isolate;
}
.info{
  overflow:visible;
}
.visual{
  overflow:hidden;
}
.visual .fanti-photo{
  object-fit:cover;
  object-position:center;
}

/* Languages: exactly two columns, larger cards */
.flag-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}
.flag-card{
  min-height:62px;
  padding:12px 14px !important;
}
.flag-card img{
  width:54px !important;
  height:36px !important;
  flex:0 0 auto;
}
.flag-card span{
  font-size:15px !important;
  line-height:1.2 !important;
}

/* Pace: title/icons above phone; 4 features stacked vertically */
.pace-panel--stacked{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(170px,220px);
  align-items:start !important;
  gap:28px;
  margin-top:0 !important;
}
.pace-panel--stacked .pace-copy{
  min-width:0;
}
.icon-list{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:20px;
}
.icon-list .icon-item{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--surface-2);
  border-radius:14px;
}
.icon-list .icon-item img{
  width:36px;
  height:36px;
  margin:0;
}
.icon-list .icon-item strong{
  margin:0;
  font-size:16px;
}
.pace-panel--stacked .pace-phone{
  margin-top:58px;
  width:min(220px,100%);
  justify-self:end;
}

@media (max-width:800px){
  .pace-panel--stacked{
    grid-template-columns:1fr;
  }
  .pace-panel--stacked .pace-phone{
    margin-top:10px;
    justify-self:center;
    width:min(280px,78vw);
  }
  .flag-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:420px){
  .flag-grid{
    grid-template-columns:1fr !important;
  }
}

/* V6: explicit Light/Dark Fanti assets */
.fanti-picture{
  display:block;
  width:100%;
  height:100%;
  position:relative;
  z-index:0;
}
.fanti-picture .fanti-photo{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* V7: section headings span phone + supporting text */
.phrases-info--headed,
.pace-panel--headed{
  display:block !important;
}
.section-heading{
  width:100%;
  margin-bottom:28px;
}
.section-heading h2{
  max-width:none;
}
.phrases-body,
.pace-body{
  display:grid;
  align-items:start;
  gap:30px;
}
.phrases-body{
  grid-template-columns:minmax(180px,220px) minmax(0,1fr);
}
.pace-body{
  grid-template-columns:minmax(0,1fr) minmax(180px,220px);
}
.phrases-body .phone--phrases,
.pace-body .pace-phone{
  width:100%;
  max-width:220px;
  margin:0;
  justify-self:center;
}
.phrases-copy .lead,
.pace-copy .lead{
  margin-top:0;
}
@media (max-width:800px){
  .section-heading{
    margin-bottom:22px;
  }
  .phrases-body,
  .pace-body{
    grid-template-columns:1fr;
  }
  .phrases-body .phone--phrases,
  .pace-body .pace-phone{
    width:min(280px,78vw);
    max-width:none;
  }
  .phrases-body .phrases-copy{
    order:1;
  }
  .phrases-body .phone{
    order:2;
  }
  .pace-body .pace-copy{
    order:1;
  }
  .pace-body .pace-phone{
    order:2;
  }
}

/* V9 refinements */

/* Header controls */
.globe-icon,.sun-icon,.moon-icon{display:inline-grid;place-items:center;line-height:1}
.globe-icon{font-size:17px}
.sun-icon,.moon-icon{font-size:17px}

/* Hero: one visual surface; Fanti is the background, phone floats over it */
.hero-visual{
  display:block !important;
  position:relative;
  padding:0 !important;
  overflow:hidden;
  min-height:600px;
}
.hero-visual .hero-fanti{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}
.hero-visual .hero-fanti .fanti-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.hero-visual::before{
  z-index:1;
  width:20%;
}
.hero-visual .phone--hero{
  position:absolute;
  left:5%;
  bottom:-2%;
  width:min(310px,46%);
  z-index:3;
  background:#111;
}
.hero-visual .phone--hero .mock-player{
  background:#f7f9fc;
}
html[data-theme="dark"] .hero-visual .phone--hero .mock-player{background:#111827}

/* How it works: larger, evenly spaced steps */
#how-items.icon-flow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  margin-top:36px;
  align-items:start;
}
#how-items .flow-item{
  min-height:155px;
}
#how-items .flow-item img{width:58px;height:58px;margin-bottom:15px}
#how-items .flow-item strong{font-size:20px;margin-bottom:7px}
#how-items .flow-item span{font-size:16px;line-height:1.45}

/* Languages: stronger two-line title */
.languages-panel h2{
  max-width:390px;
  line-height:1.02;
}
.languages-panel h2{
  white-space:normal;
}
.flag-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}

/* Pace: right-aligned copy and larger vertical feature rows */
.pace-panel--headed .section-heading{text-align:right}
.pace-panel--headed .pace-copy{text-align:right}
.pace-panel--headed .icon-list{gap:14px}
.pace-panel--headed .icon-list .icon-item{
  grid-template-columns:48px minmax(0,1fr);
  min-height:68px;
  padding:13px 16px;
  text-align:left;
}
.pace-panel--headed .icon-list .icon-item img{width:44px;height:44px}
.pace-panel--headed .icon-list .icon-item strong{font-size:18px}

/* Tools: height determined by left content, Fanti simply fills it */
.tools-panel{margin-top:0}
section:has(#tools-title){align-items:stretch}
section:has(#tools-title) .visual{min-height:0}
section:has(#tools-title) .fanti-picture,
section:has(#tools-title) .fanti-photo{height:100%}

/* CTA: compact; Fanti fills the full right half */
.cta{min-height:0}
.cta .info{padding-top:32px;padding-bottom:32px}
.cta .visual{min-height:250px}
.cta .fanti-picture,.cta .fanti-photo{height:100%}
.cta .fanti-photo{object-fit:cover}

/* Footer */
.site-footer{
  min-height:88px;
  grid-template-columns:auto 1fr auto;
  font-size:14px;
  color:var(--muted);
}
.footer-language{display:flex;align-items:center;gap:7px}
.footer-language select{
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  max-width:170px;
}

/* Mobile */
@media (max-width:800px){
  .hero-visual{min-height:500px}
  .hero-visual .phone--hero{width:min(250px,48%);left:4%}
  #how-items.icon-flow{grid-template-columns:1fr;gap:18px}
  #how-items .flow-item{min-height:0}
  .pace-panel--headed .section-heading,
  .pace-panel--headed .pace-copy{text-align:left}
  .cta .visual{min-height:300px}
  .site-footer{grid-template-columns:1fr;text-align:center;gap:14px;padding:24px 0}
  .footer-language{justify-content:center}
}

/* V11: restore left-aligned scan pattern for Personalize Your Listening */
.pace-panel--headed .section-heading,
.pace-panel--headed .pace-copy{
  text-align:left !important;
}
.pace-panel--headed .icon-list .icon-item{
  text-align:left !important;
}

/* Compact "Practice your way" section: height follows left content */
section:has(#tools-title){
  align-items:stretch !important;
}
section:has(#tools-title) .info{
  padding-top:34px;
  padding-bottom:34px;
}
section:has(#tools-title) .visual{
  min-height:0 !important;
  height:auto !important;
}
section:has(#tools-title) .fanti-picture{
  height:100% !important;
  min-height:0 !important;
}
section:has(#tools-title) .fanti-photo{
  width:100%;
  height:100% !important;
  min-height:0 !important;
  object-fit:cover;
  object-position:center 42%;
}

/* Prevent tools copy itself from forcing unnecessary height */
.tools-panel{
  margin-top:0 !important;
  align-items:flex-start !important;
}
.tools-panel > div{
  width:100%;
}
.tools-grid{
  margin-top:18px;
}
.tools-grid .icon-item{
  padding:10px 12px;
}
.tools-grid .icon-item img{
  width:44px;
  height:44px;
}
.tools-grid .icon-item strong{
  font-size:16px;
}
.tools-grid .icon-item span{
  font-size:13px;
}

/* On mobile, keep same content-first order and compact image */
@media (max-width:800px){
  section:has(#tools-title) .visual{
    min-height:260px !important;
    max-height:320px;
  }
}

/* V12 refinements */

/* Hero: smaller phone, further left; crop Fanti scene so the mascot stays clear */
.hero-visual .phone--hero{
  left:2.5% !important;
  width:min(260px,38%) !important;
  bottom:-1% !important;
}
.hero-visual .hero-fanti .fanti-photo{
  object-position:58% center !important;
}

/* One app / Many languages: two separately translatable lines */
.languages-heading{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-width:420px;
}
.languages-heading #languages-title-primary{
  display:block;
  font-size:1em;
  line-height:1.02;
}
.languages-heading #languages-title-secondary{
  display:block;
  font-size:.78em;
  line-height:1.08;
  font-weight:750;
}

/* Pace is back on the left; Fanti stays on the right */
.pace-panel--headed .section-heading,
.pace-panel--headed .pace-copy{
  text-align:left !important;
}

/* Final CTA: substantially shorter */
.cta .info{
  padding-top:24px !important;
  padding-bottom:24px !important;
}
.cta .lead{
  margin-top:10px;
  margin-bottom:10px;
}
.cta .store-row{
  margin-top:8px;
}
.cta .visual{
  min-height:190px !important;
  max-height:230px;
}
.cta .fanti-picture,
.cta .fanti-photo{
  height:100% !important;
}
.cta .fanti-photo{
  object-fit:cover;
  object-position:center 55%;
}

@media (max-width:800px){
  .hero-visual .phone--hero{
    width:min(205px,42%) !important;
    left:2% !important;
  }
  .hero-visual .hero-fanti .fanti-photo{
    object-position:60% center !important;
  }
  .cta .visual{
    min-height:220px !important;
    max-height:260px;
  }
}

/* V13: official supplied Playli logo */
.brand--image{
  display:inline-flex;
  align-items:center;
  width:auto;
  text-decoration:none;
}
.brand--image img{
  display:block;
  width:auto;
  height:46px;
  max-width:180px;
  object-fit:contain;
}
@media (max-width:600px){
  .brand--image img{
    height:38px;
    max-width:145px;
  }
}

/* V14 header + hero refinements */

/* Official logo: rounded, bordered, plus app name */
.brand--image{
  gap:10px;
}
.brand--image img{
  height:44px !important;
  width:44px !important;
  max-width:none !important;
  object-fit:cover;
  border-radius:11px;
  border:1px solid var(--line);
  background:#fff;
}
.brand-name{
  font-size:25px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text);
}

/* Reliable SVG icons in language selector and theme slider */
.globe-icon,
.sun-icon,
.moon-icon{
  width:19px;
  height:19px;
  flex:0 0 19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.globe-icon{color:var(--muted)}
.sun-icon{color:#f6b800}
.moon-icon{color:#d8e2ff}

.theme-toggle{
  color:var(--text);
}

/* Hero / Learn by Listening:
   shift Fanti background 50px left by extending the image 50px beyond the visual card */
.hero-visual .hero-fanti{
  left:-50px !important;
  right:0 !important;
  width:calc(100% + 50px) !important;
}
.hero-visual .hero-fanti .fanti-photo{
  width:100% !important;
  object-position:center center !important;
}

/* Keep phone clearly separate and further left */
.hero-visual .phone--hero{
  left:1.5% !important;
}

@media (max-width:800px){
  .brand--image img{
    width:38px !important;
    height:38px !important;
    border-radius:9px;
  }
  .brand-name{
    font-size:21px;
  }

  /* Smaller offset on narrow screens so the crop remains controlled */
  .hero-visual .hero-fanti{
    left:-28px !important;
    width:calc(100% + 28px) !important;
  }
}

/* V16: slightly smaller Hero phone */
.hero-visual .phone--hero{
  width:min(225px,33%) !important;
  left:1.5% !important;
}
@media (max-width:800px){
  .hero-visual .phone--hero{
    width:min(180px,38%) !important;
  }
}

/* V17: supplied production flag artwork */
.flag-card img,
.mock-language img{
  object-fit:cover;
  border-radius:7px;
}

/* V18: compact help link beneath the Hero platform line */
.hero-help{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  font-size:14px;
  color:var(--muted);
}
.hero-help a{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}
.hero-help a:hover{
  text-decoration:underline;
}

/* V19: Help is a standalone secondary card, like Playli for Schools */
.help-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:16px 24px;
  margin-top:-2px;
  margin-bottom:18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  text-decoration:none;
  box-shadow:var(--shadow);
}
.help-card-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--surface-2);
  color:var(--accent);
  font-size:24px;
  font-weight:800;
}
.help-card strong,
.help-card small{
  display:block;
}
.help-card small{
  margin-top:3px;
  color:var(--muted);
}
.help-card b{
  color:var(--accent);
}
@media (max-width:800px){
  .help-card{
    grid-template-columns:auto 1fr;
    gap:12px;
    padding:14px 16px;
    margin-bottom:12px;
  }
  .help-card b{
    grid-column:2;
  }
}

/* V20: clearer Help card */
.help-card{
  background:#eaf4ff !important;
  border-color:#cfe4ff !important;
  box-shadow:none !important;
}
html[data-theme="dark"] .help-card{
  background:#10233d !important;
  border-color:#22466f !important;
}
.help-card-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:#ffffff !important;
  color:var(--accent);
  border:1px solid #d8e9ff;
}
html[data-theme="dark"] .help-card-icon{
  background:#173252 !important;
  border-color:#2b527d;
}
.help-card-icon svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.help-card-copy strong{
  font-size:17px;
}
.help-card-copy small{
  font-size:14px;
  line-height:1.4;
}
.help-card b{
  color:var(--accent);
  font-size:15px;
  white-space:nowrap;
}

/* V21 */

/* Hero phone: lift it away from the bottom edge */
.hero-visual .phone--hero{
  bottom:5% !important;
}
@media (max-width:800px){
  .hero-visual .phone--hero{
    bottom:6% !important;
  }
}

/* Clear device icons for iPhone / Android / Apple Watch */
.works-icons{
  display:inline-flex;
  align-items:center;
  gap:5px;
  letter-spacing:0 !important;
}
.device-icon{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:var(--text);
}
.device-android{width:22px;height:22px}
.device-watch{width:20px;height:20px}

/* Listen at your pace: restore a clear, harmonious background surface */
section:has(#pace-title){
  --section-bg:#eef6ff !important;
}
section:has(#pace-title) .info{
  background:linear-gradient(90deg,#eef6ff 0%,#eef6ff 84%,rgba(238,246,255,0) 100%) !important;
}
html[data-theme="dark"] section:has(#pace-title){
  --section-bg:#111f33 !important;
}
html[data-theme="dark"] section:has(#pace-title) .info{
  background:linear-gradient(90deg,#111f33 0%,#111f33 84%,rgba(17,31,51,0) 100%) !important;
}
@media (max-width:800px){
  section:has(#pace-title) .info{
    background:linear-gradient(180deg,#eef6ff 0%,#eef6ff 90%,rgba(238,246,255,0) 100%) !important;
  }
  html[data-theme="dark"] section:has(#pace-title) .info{
    background:linear-gradient(180deg,#111f33 0%,#111f33 90%,rgba(17,31,51,0) 100%) !important;
  }
}

/* V22: exact One App / Many Languages hierarchy */
.languages-heading #languages-title-primary{
  font-size:1em !important;
  font-weight:800;
}
.languages-heading #languages-title-secondary{
  font-size:.72em !important;
  font-weight:750;
  margin-top:3px;
}

/* V23 refinements */

/* Hero card: reduce vertical empty space above the phone.
   Keep top/bottom breathing room visually balanced. */
.hero{
  min-height:540px !important;
}
.hero .panel{
  min-height:540px !important;
}
.hero-visual{
  min-height:540px !important;
}
.hero-visual .phone--hero{
  bottom:5% !important;
  top:auto !important;
}
.hero-visual .hero-fanti{
  top:-18px !important;
  height:calc(100% + 18px) !important;
}

/* Real-life phrases: make three supporting points stronger,
   card-like, and remove divider lines. */
.mini-points{
  display:grid;
  gap:12px;
  margin-top:20px;
}
.mini-point{
  border-top:0 !important;
  background:#ffffff;
  border-radius:16px;
  padding:15px 16px !important;
  box-shadow:0 6px 18px rgba(20,43,75,.06);
}
html[data-theme="dark"] .mini-point{
  background:#182235;
  box-shadow:none;
}
.mini-point strong{
  font-size:17px;
  line-height:1.25;
  margin-bottom:4px;
}
.mini-point span{
  font-size:14px;
  line-height:1.4;
}

/* Listen at your pace: enlarge all four items and make the
   controls column visually match the phone height. */
.pace-body{
  align-items:stretch !important;
}
.pace-copy{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.pace-panel--headed .icon-list{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  flex:1;
  align-content:stretch;
  margin-top:18px;
}
.pace-panel--headed .icon-list .icon-item{
  min-height:78px !important;
  padding:16px 18px !important;
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  align-items:center;
  gap:14px;
  border-radius:16px;
}
.pace-panel--headed .icon-list .icon-item img{
  width:48px !important;
  height:48px !important;
}
.pace-panel--headed .icon-list .icon-item strong{
  font-size:19px !important;
  line-height:1.2;
}
.pace-body .pace-phone{
  align-self:stretch;
  height:auto;
  max-height:none;
}
.pace-body .pace-phone .phone-screen{
  height:100%;
  object-fit:cover;
}

@media (max-width:800px){
  .hero,
  .hero .panel,
  .hero-visual{
    min-height:470px !important;
  }
  .hero-visual .hero-fanti{
    top:-10px !important;
    height:calc(100% + 10px) !important;
  }

  .pace-copy{
    min-height:auto;
  }
  .pace-panel--headed .icon-list .icon-item{
    min-height:70px !important;
  }
  .pace-body .pace-phone{
    align-self:center;
    height:auto;
  }
}

/* V24: real supplied Playli player screenshot in Hero */
.hero-real-screen{
  background:transparent !important;
  overflow:hidden;
}
.hero-real-screen::before{
  display:none !important;
}
.hero-player-screen{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}
.hero-screen-content{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.hero-screen-language{
  position:absolute;
  left:10%;
  top:19.5%;
  display:flex;
  align-items:center;
  gap:6px;
  max-width:76%;
  font-size:clamp(8px,1vw,12px);
  font-weight:750;
  color:#0b1423;
}
.hero-screen-language img{
  width:22px;
  height:15px;
  border-radius:4px;
  object-fit:cover;
  flex:0 0 auto;
}
.hero-screen-language span{
  min-width:0;
  overflow-wrap:anywhere;
}
.hero-screen-content > strong{
  position:absolute;
  left:13%;
  right:13%;
  top:43%;
  transform:translateY(-50%);
  text-align:center;
  color:#0b1423;
  font-size:clamp(11px,1.5vw,19px);
  line-height:1.25;
  overflow-wrap:anywhere;
}

/* V25: symbolic iPhone frame around the real Hero screenshot.
   Keep the actual screenshot almost entirely visible. */
.hero-real-screen{
  position:absolute;
  padding:6px !important;
  border-radius:30px !important;
  background:#0a0a0b !important;
  box-shadow:
    0 12px 30px rgba(9,18,32,.22),
    0 0 0 1px rgba(255,255,255,.12) inset;
  box-sizing:border-box;
}

.hero-real-screen .hero-player-screen{
  width:100% !important;
  height:100% !important;
  border-radius:24px !important;
  object-fit:cover !important;
  display:block;
}

/* Very subtle side buttons, purely symbolic. */
.hero-real-screen::before,
.hero-real-screen::after{
  content:"";
  position:absolute;
  background:#17181a;
  border-radius:3px;
  z-index:4;
  pointer-events:none;
}
.hero-real-screen::before{
  width:3px;
  height:42px;
  left:-3px;
  top:26%;
  box-shadow:0 52px 0 #17181a;
}
.hero-real-screen::after{
  width:3px;
  height:58px;
  right:-3px;
  top:33%;
}

/* Keep dynamic overlay aligned inside the 6px frame. */
.hero-screen-content{
  inset:6px !important;
  border-radius:24px;
  overflow:hidden;
}

@media (max-width:800px){
  .hero-real-screen{
    padding:5px !important;
    border-radius:26px !important;
  }
  .hero-real-screen .hero-player-screen,
  .hero-screen-content{
    border-radius:21px !important;
  }
  .hero-screen-content{
    inset:5px !important;
  }
}

/* V26: spoken-language Hero example */
.hero-screen-content > strong{
  top:48% !important;
}

/* V27: Hero spoken example slightly lower */
.hero-screen-content > strong{
  top:53% !important;
}

/* V28: stronger Real-life phrases cards */
.mini-points{
  gap:14px !important;
}
.mini-point{
  min-height:92px;
  padding:19px 20px !important;
  border-radius:18px !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mini-point strong{
  font-size:19px !important;
  line-height:1.22 !important;
  margin-bottom:6px !important;
}
.mini-point span{
  font-size:15px !important;
  line-height:1.45 !important;
}

/* User-supplied activity illustrations are deliberately identical in
   Light and Dark mode. Do not recolor, darken or swap them. */
.activity img{
  filter:none !important;
  opacity:1 !important;
}
html[data-theme="dark"] .activity img{
  filter:none !important;
  opacity:1 !important;
}

/* V29: new final CTA hammock artwork */
.cta .fanti-photo{
  object-position:center 48% !important;
}
html[data-theme="dark"] .cta .fanti-photo{
  object-position:center 50% !important;
}

/* V30: Start listening today — Fanti image fills the complete right half */
.cta{
  align-items:stretch !important;
}

.cta .visual{
  position:relative !important;
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  padding:0 !important;
  overflow:hidden !important;
}

.cta .visual .fanti-picture{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
}

.cta .visual .fanti-photo{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}

@media (max-width:800px){
  .cta .visual{
    min-height:260px !important;
    height:260px !important;
  }

  .cta .visual .fanti-picture,
  .cta .visual .fanti-photo{
    width:100% !important;
    height:100% !important;
  }
}

/* V32: remove white seam/border around the final CTA artwork */
.cta{
  overflow:hidden !important;
  background:#eaf4ff !important;
  border-color:#cfe4ff !important;
}

html[data-theme="dark"] .cta{
  background:#10233d !important;
  border-color:#22466f !important;
}

.cta .info{
  background:#eaf4ff !important;
}

html[data-theme="dark"] .cta .info{
  background:#10233d !important;
}

.cta .visual{
  background:#eaf4ff !important;
  border:0 !important;
  box-shadow:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

html[data-theme="dark"] .cta .visual{
  background:#10233d !important;
}

.cta .visual .fanti-picture,
.cta .visual .fanti-photo{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.cta .visual .fanti-picture{
  inset:-1px !important;
  width:calc(100% + 2px) !important;
  height:calc(100% + 2px) !important;
}

.cta .visual .fanti-photo{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* Ensure the right edge and the rounded outer corners stay blue instead of white. */
.cta .visual::before,
.cta .visual::after{
  display:none !important;
}

/* V33: real supplied Dark Mode Hero player screenshot */
html[data-theme="dark"] .hero-screen-language,
html[data-theme="dark"] .hero-screen-content > strong{
  color:#f7f9ff !important;
}

/* V34: restore left-side fade on the final CTA artwork */
.cta .visual::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 auto 0 0 !important;
  width:24% !important;
  z-index:3 !important;
  pointer-events:none !important;
  background:linear-gradient(
    90deg,
    #eaf4ff 0%,
    rgba(234,244,255,.92) 28%,
    rgba(234,244,255,.52) 58%,
    rgba(234,244,255,0) 100%
  ) !important;
}

html[data-theme="dark"] .cta .visual::before{
  background:linear-gradient(
    90deg,
    #10233d 0%,
    rgba(16,35,61,.92) 28%,
    rgba(16,35,61,.52) 58%,
    rgba(16,35,61,0) 100%
  ) !important;
}

@media (max-width:800px){
  .cta .visual::before{
    width:18% !important;
  }
}

/* V36: Help card matches the clean white Schools-card treatment */
.help-card{
  background:#ffffff !important;
  border-color:var(--line) !important;
  box-shadow:var(--shadow) !important;
}

.help-card-icon{
  background:var(--surface-2) !important;
  border-color:var(--line) !important;
}

html[data-theme="dark"] .help-card{
  background:var(--surface) !important;
  border-color:var(--line) !important;
}

html[data-theme="dark"] .help-card-icon{
  background:var(--surface-2) !important;
  border-color:var(--line) !important;
}

/* V37: footer language selector mirrors the header control, but smaller */
.footer-language-control{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
}

.footer-globe-icon{
  width:15px;
  height:15px;
  flex:0 0 15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:var(--muted);
}

.footer-language-control select{
  appearance:auto;
  border:0 !important;
  outline:0;
  background:transparent !important;
  color:var(--text) !important;
  font:inherit;
  font-size:13px !important;
  font-weight:650;
  max-width:145px;
  padding:0;
}

/* Mobile already has the primary language selector in the header. */
@media (max-width:800px){
  .footer-language-control{
    display:none !important;
  }
}

/* V38: unified card border system */
.section-grid{
  border:1px solid var(--line) !important;
}

/* The border belongs only to the complete section, never its left/right halves. */
.section-grid > .panel{
  border:0 !important;
}

/* Explicit two-line hierarchy for One App. / Many Languages. */
.languages-heading{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start;
  gap:3px;
  margin:0;
}
.languages-heading #languages-title-primary{
  display:block;
  font-size:1em !important;
  line-height:1.02;
  font-weight:800;
}
.languages-heading #languages-title-secondary{
  display:block;
  font-size:.72em !important;
  line-height:1.08;
  font-weight:750;
}

/* V39: new Listen at your pace Fanti jogging artwork */
section:has(#pace-title) .visual{
  position:relative;
  overflow:hidden;
}
section:has(#pace-title) .visual .fanti-picture,
section:has(#pace-title) .visual .fanti-photo{
  width:100% !important;
  height:100% !important;
}
section:has(#pace-title) .visual .fanti-photo{
  object-fit:cover !important;
  object-position:center center !important;
}

/* V40: Listen at your pace artwork is anchored to the RIGHT edge.
   Any cropping now happens on the left side of the image. */
section:has(#pace-title) .visual .fanti-photo{
  object-fit:cover !important;
  object-position:right center !important;
}

/* V41: anchor additional Fanti section artwork to the RIGHT edge.
   If cover-cropping is needed, crop from the LEFT. */

/* Listen. Understand. Repeat. */
section:has(#how-title) .visual .fanti-photo{
  object-fit:cover !important;
  object-position:right center !important;
}

/* Thousands of real-life phrases. */
section:has(#phrases-title) .visual .fanti-photo{
  object-fit:cover !important;
  object-position:right center !important;
}

/* Learn anytime, anywhere. */
section:has(#anywhere-title) .visual .fanti-photo{
  object-fit:cover !important;
  object-position:right center !important;
}

/* V42: shift these two Fanti backgrounds 150px left from the right edge */

/* Thousands of real-life phrases */
section:has(#phrases-title) .visual .fanti-photo{
  object-position:calc(100% - 150px) center !important;
}

/* Turn everyday moments into language practice */
section:has(#anywhere-title) .visual .fanti-photo{
  object-position:calc(100% - 150px) center !important;
}

/* On narrow mobile layouts, keep the crop usable instead of forcing a 150px offset. */
@media (max-width:800px){
  section:has(#phrases-title) .visual .fanti-photo,
  section:has(#anywhere-title) .visual .fanti-photo{
    object-position:right center !important;
  }
}

/* V43: correct interpretation — omit the final 150px of the SOURCE image.
   The image is enlarged/offset to the right so its rightmost 150px lie outside
   the visual panel and are clipped. */

/* Thousands of real-life phrases + Everyday moments */
section:has(#phrases-title) .visual .fanti-picture,
section:has(#anywhere-title) .visual .fanti-picture{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  left:0 !important;
  right:-150px !important;
  width:calc(100% + 150px) !important;
  height:100% !important;
}

section:has(#phrases-title) .visual,
section:has(#anywhere-title) .visual{
  position:relative !important;
  overflow:hidden !important;
}

section:has(#phrases-title) .visual .fanti-photo,
section:has(#anywhere-title) .visual .fanti-photo{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:right center !important;
}

/* Mobile: no 150px source crop. */
@media (max-width:800px){
  section:has(#phrases-title) .visual .fanti-picture,
  section:has(#anywhere-title) .visual .fanti-picture{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:100% !important;
  }
}

/* V46: stronger header branding + rendered target CTA */
.brand--image{gap:12px !important}
.brand--image img{width:52px !important;height:52px !important;border-radius:13px !important}
.brand-name{font-size:30px !important;line-height:1;font-weight:800}
.cta-target-text{margin:11px 0 0;max-width:440px;color:var(--muted);font-size:14px;line-height:1.45}
@media(max-width:600px){
 .brand--image{gap:10px !important}
 .brand--image img{width:40px !important;height:40px !important;border-radius:10px !important}
 .brand-name{font-size:22px !important}
 .cta-target-text{font-size:13px}
}

/* V47: dynamic HTML overlay for the real Listening Settings screenshot */
.pace-ui{
  position:relative !important;
  overflow:hidden;
  container-type:inline-size;
  background:transparent !important;
}

.pace-ui .phone-screen{
  display:block;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

.pace-overlay{
  position:absolute;
  z-index:3;
  color:#07101f;
  line-height:1.08;
  pointer-events:none;
  white-space:nowrap;
}

html[data-theme="dark"] .pace-overlay{
  color:#fff;
}

.pace-ui-title{
  top:6.45%;
  left:50%;
  transform:translateX(-50%);
  font-size:4.15cqw;
  font-weight:750;
}

.pace-ui-order-title{
  top:12.85%;
  left:3.9%;
  font-size:3.95cqw;
  font-weight:760;
}

.pace-language{
  display:flex;
  align-items:center;
  gap:2.5cqw;
  font-size:3.7cqw;
  font-weight:470;
}

.pace-language img{
  width:7.1cqw;
  height:4.75cqw;
  border-radius:1.05cqw;
  object-fit:cover;
  flex:none;
}

.pace-language--order-1{
  left:16.9%;
  top:18.0%;
}

.pace-language--order-2{
  left:16.9%;
  top:25.85%;
}

.pace-ui-add{
  left:16.0%;
  top:34.10%;
  font-size:4.0cqw;
  font-weight:720;
}

.pace-language--settings-1{
  left:4.25%;
  top:42.05%;
  gap:2.2cqw;
  font-size:3.85cqw;
  font-weight:760;
}

.pace-language--settings-2{
  left:4.25%;
  top:73.30%;
  gap:2.2cqw;
  font-size:3.85cqw;
  font-weight:760;
}

/* Allow longer localized language names without spilling out of the phone. */
.pace-language span{
  display:block;
  max-width:28cqw;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Dark screenshot already contains the correct dark UI; no filters. */
html[data-theme="dark"] .pace-ui .phone-screen{
  filter:none !important;
}

/* V48 — alignment, flags, Hero phone */

/* All left-side section headings: slightly farther right. */
.section-grid .info > .eyebrow,
.section-grid .info > h2,
.section-grid .info > .languages-heading,
.section-grid .info > .pace-heading{
  margin-left:12px !important;
}

/* Pace: move the two lower flag/name headings upward.
   First one slightly; second one roughly twice as much. */
.pace-language--settings-1{
  top:40.9% !important;
}
.pace-language--settings-2{
  top:70.9% !important;
}

/* Pace: Language Order flags/names a little right and minimally upward. */
.pace-language--order-1{
  left:18.2% !important;
  top:17.65% !important;
}
.pace-language--order-2{
  left:18.2% !important;
  top:25.50% !important;
}

/* All rendered language flags get a thin white keyline. */
.pace-language img,
.flag-card img,
.mock-language img,
.hero-screen-language img{
  border:1px solid #fff !important;
  box-sizing:border-box;
}

/* Hero phone: no extra symbolic camera/notch/frame decoration.
   The supplied real screenshot already contains the actual phone UI. */
.hero-real-screen::before,
.hero-real-screen::after{
  display:none !important;
  content:none !important;
}

/* Also avoid any CSS-generated notch on generic phone wrappers. */
.phone--hero::before,
.phone--hero::after{
  display:none !important;
  content:none !important;
}

/* V50: one consistent simple phone-card treatment.
   Used by Real-life phrases and Personalize your listening, matching the Hero. */
.phone--phrases,
.pace-phone{
  box-sizing:border-box !important;
  padding:6px !important;
  background:#0a0a0b !important;
  border:0 !important;
  border-radius:30px !important;
  box-shadow:0 12px 30px rgba(9,18,32,.18) !important;
  overflow:hidden !important;
}

/* No generic camera/notch decoration on these screenshots. */
.phone--phrases::before,
.phone--phrases::after,
.pace-phone::before,
.pace-phone::after{
  display:none !important;
  content:none !important;
}

/* The content/screenshot is the single inner card, just like the top phone. */
.phone--phrases .mock-library,
.pace-phone .phone-screen{
  border-radius:24px !important;
  overflow:hidden !important;
}

/* Pace HTML overlays must be clipped to the same inner screen area. */
.pace-phone .pace-overlay{
  z-index:3;
}

@media(max-width:800px){
  .phone--phrases,
  .pace-phone{
    padding:5px !important;
    border-radius:26px !important;
  }
  .phone--phrases .mock-library,
  .pace-phone .phone-screen{
    border-radius:21px !important;
  }
}

/* V53: fix oversized black bottom area on Personalize your listening phone.
   Cause: the Pace phone inherited a fixed phone aspect-ratio AND was stretched
   vertically by the flex layout, while the screenshot itself kept height:auto.
   The outer black wrapper therefore became taller than the actual screenshot. */

/* Let the real Pace screenshot define the phone's height, exactly like an image card. */
.pace-body .pace-phone,
.pace-phone.pace-ui{
  align-self:flex-start !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
}

/* Keep the supplied screenshot in normal document flow so its natural 1284×2778
   ratio determines the wrapper height. */
.pace-phone .phone-screen,
.pace-ui .phone-screen{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

/* The 6px frame remains, but there is no extra black area below the screenshot. */
.pace-phone{
  padding:6px !important;
}

/* Keep the left feature stack from forcing the phone taller. */
.pace-body{
  align-items:flex-start !important;
}

/* Hero phone remains unchanged; its frame already matches the source screenshot. */

/* V54: fine-tune Personalize your listening overlay positions */

/* 1. Listening Settings slightly lower */
.pace-ui-title{
  top:6.95% !important;
}

/* 2. Language Order slightly farther right */
.pace-ui-order-title{
  left:5.1% !important;
}

/* 3. First two flag/name rows slightly lower */
.pace-language--order-1{
  top:18.20% !important;
}
.pace-language--order-2{
  top:26.10% !important;
}

/* 4 + 5. First and second language rows farther right */
.pace-language--order-1,
.pace-language--order-2{
  left:19.8% !important;
}

/* V55: repeat the V54 Personalize-your-listening adjustments once more */

/* Listening Settings: another step lower */
.pace-ui-title{
  top:7.45% !important;
}

/* Language Order: another step right */
.pace-ui-order-title{
  left:6.3% !important;
}

/* Both top flag/name rows: another step lower and right */
.pace-language--order-1{
  top:18.75% !important;
}
.pace-language--order-2{
  top:26.70% !important;
}
.pace-language--order-1,
.pace-language--order-2{
  left:21.4% !important;
}

/* V56: ONLY the two lower Pace language flag/name headers farther right */
.pace-language--settings-1,
.pace-language--settings-2{
  left:6.0% !important;
}

/* V57 Discover screen */
.learning-ui{position:relative!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;align-self:flex-start!important;overflow:hidden!important;container-type:inline-size;padding:6px!important;background:#0a0a0b!important;border-radius:30px!important}
.learning-screen{position:relative!important;display:block!important;width:100%!important;height:auto!important;object-fit:contain!important;border-radius:24px!important}
.learning-overlay{position:absolute;z-index:4;color:#07101f;pointer-events:none;line-height:1.08}
html[data-theme="dark"] .learning-overlay{color:#fff}
.learning-discover{top:5.7%;left:50%;transform:translateX(-50%);font-size:4.1cqw;font-weight:780;white-space:nowrap}
.learning-search{top:11.7%;left:10.7%;font-size:3.75cqw;white-space:nowrap}
.learning-all{top:17.55%;left:6%;width:12.8%;text-align:center;font-size:3.55cqw;font-weight:760;color:#fff!important}
.learning-flags{top:5.15%;left:6.2%;display:flex;align-items:center;gap:1.4cqw}
.learning-flags img{width:5.7cqw;height:3.8cqw;object-fit:cover;border-radius:.75cqw;border:1px solid #fff;box-sizing:border-box}
.learning-list-name{left:18.2%;right:8%;font-size:3.25cqw;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learning-list-1{top:22.8%}.learning-list-2{top:31.45%}.learning-list-3{top:40.05%}.learning-list-4{top:48.65%}.learning-list-5{top:57.25%}.learning-list-6{top:65.85%}.learning-list-7{top:74.45%}.learning-list-8{top:83.05%}
.learning-unit{left:27.8%;font-size:2.75cqw;font-weight:430;white-space:nowrap}
.learning-unit-1{top:25.75%}.learning-unit-2{top:34.35%}.learning-unit-3{top:42.95%}.learning-unit-4{top:51.55%}.learning-unit-5{top:60.15%}.learning-unit-6{top:68.75%}.learning-unit-7{top:77.35%}.learning-unit-8{top:85.95%}
html[data-theme="dark"] .learning-unit{color:#8d98b2}

/* V61 — restore benefit cards; refine Discover screenshot text placement */

/* List titles: farther right and lower, max 30 chars per generated line. */
.learning-list-name{
  left:20.5% !important;
  right:5.5% !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.12 !important;
}
.learning-list-name span{
  display:block;
  white-space:nowrap;
}

/* Move every title down consistently. */
.learning-list-1{top:23.45% !important}
.learning-list-2{top:32.05% !important}
.learning-list-3{top:40.65% !important}
.learning-list-4{top:49.25% !important}
.learning-list-5{top:57.85% !important}
.learning-list-6{top:66.45% !important}
.learning-list-7{top:75.05% !important}
.learning-list-8{top:83.65% !important}

/* Units belong with the shifted list copy too. */
.learning-unit{left:30.1% !important}
.learning-unit-1{top:26.35% !important}
.learning-unit-2{top:34.95% !important}
.learning-unit-3{top:43.55% !important}
.learning-unit-4{top:52.15% !important}
.learning-unit-5{top:60.75% !important}
.learning-unit-6{top:69.35% !important}
.learning-unit-7{top:77.95% !important}
.learning-unit-8{top:86.55% !important}

/* V62 — phrases layout + Discover overlay positioning */

/* Keep the three benefit boxes in the LEFT text column beside the phone. */
section:has(#phrases-title) .info{
  display:flex;
  flex-direction:column;
}
section:has(#phrases-title) #phrases-points{
  margin-top:18px;
  width:100%;
}
section:has(#phrases-title) .visual{
  align-self:stretch;
}

/* Remove the All overlay completely. */
.learning-all{
  display:none !important;
}

/* Move all Discover-screen text farther right and lower. */
.learning-discover{
  top:6.35% !important;
  left:53.5% !important;
}
.learning-search{
  top:12.55% !important;
  left:13.3% !important;
}

/* Both flags lower and farther right. */
.learning-flags{
  top:5.95% !important;
  left:8.4% !important;
}

/* All list titles farther right and lower. */
.learning-list-name{
  left:23.2% !important;
  right:3.5% !important;
}
.learning-list-1{top:24.10% !important}
.learning-list-2{top:32.75% !important}
.learning-list-3{top:41.35% !important}
.learning-list-4{top:49.95% !important}
.learning-list-5{top:58.55% !important}
.learning-list-6{top:67.15% !important}
.learning-list-7{top:75.75% !important}
.learning-list-8{top:84.35% !important}

/* Phrases/words labels farther right and lower too. */
.learning-unit{
  left:32.8% !important;
}
.learning-unit-1{top:27.05% !important}
.learning-unit-2{top:35.65% !important}
.learning-unit-3{top:44.25% !important}
.learning-unit-4{top:52.85% !important}
.learning-unit-5{top:61.45% !important}
.learning-unit-6{top:70.05% !important}
.learning-unit-7{top:78.65% !important}
.learning-unit-8{top:87.25% !important}

/* V63 — Real-life phrases layout + final Discover overlay alignment */

/* Three benefit boxes sit beside the phone, inside the same left panel. */
section:has(#phrases-title) .phrases-body{
  display:grid !important;
  grid-template-columns:minmax(180px,220px) minmax(0,1fr) !important;
  gap:30px !important;
  align-items:start !important;
}
section:has(#phrases-title) .phrases-copy{
  min-width:0;
}
section:has(#phrases-title) #phrases-points{
  margin-top:0 !important;
  width:100% !important;
}

/* List names: single line only, hard-truncated in JS at 30 chars. */
.learning-list-name{
  left:25.0% !important;
  right:3.0% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  line-height:1.08 !important;
}

/* Upper list names needed to be lower; lower names were already close. */
.learning-list-1{top:25.05% !important}
.learning-list-2{top:33.55% !important}
.learning-list-3{top:42.05% !important}
.learning-list-4{top:50.55% !important}
.learning-list-5{top:58.95% !important}
.learning-list-6{top:67.45% !important}
.learning-list-7{top:75.95% !important}
.learning-list-8{top:84.45% !important}

/* phrases / words follows the same horizontal and vertical correction. */
.learning-unit{
  left:34.2% !important;
}
.learning-unit-1{top:27.95% !important}
.learning-unit-2{top:36.45% !important}
.learning-unit-3{top:44.95% !important}
.learning-unit-4{top:53.45% !important}
.learning-unit-5{top:61.85% !important}
.learning-unit-6{top:70.35% !important}
.learning-unit-7{top:78.85% !important}
.learning-unit-8{top:87.35% !important}

/* Discover/Search also slightly lower and farther right. */
.learning-discover{
  top:6.75% !important;
  left:54.8% !important;
}
.learning-search{
  top:13.05% !important;
  left:14.6% !important;
}

/* Flags: lower, farther right, and minimally larger. */
.learning-flags{
  top:6.35% !important;
  left:9.2% !important;
  gap:1.55cqw !important;
}
.learning-flags img{
  width:6.15cqw !important;
  height:4.1cqw !important;
}

@media(max-width:800px){
  section:has(#phrases-title) .phrases-body{
    grid-template-columns:1fr !important;
  }
  section:has(#phrases-title) .phrases-copy{
    order:1;
  }
  section:has(#phrases-title) .phone--phrases{
    order:2;
  }
}

/* V64 — Discover screen micro-alignment */

/* List titles only: slightly farther LEFT. */
.learning-list-name{
  left:23.6% !important;
}

/* Discover: truly centered in the phone/screenshot. */
.learning-discover{
  left:50% !important;
  transform:translateX(-50%) !important;
}

/* Flags: lower, horizontal position unchanged. */
.learning-flags{
  top:6.85% !important;
}

/* Fix cumulative vertical drift of phrases/words.
   Use one exact row step instead of individually drifting percentages. */
.learning-unit-1{top:27.95% !important}
.learning-unit-2{top:36.45% !important}
.learning-unit-3{top:44.95% !important}
.learning-unit-4{top:53.45% !important}
.learning-unit-5{top:61.95% !important}
.learning-unit-6{top:70.45% !important}
.learning-unit-7{top:78.95% !important}
.learning-unit-8{top:87.45% !important}

/* V65 — final Discover list micro-alignment */

/* List titles: only 3px farther left. */
.learning-list-name{
  transform:translateX(-3px) !important;
}

/* phrases / words: 5px left and 3px higher. */
.learning-unit{
  transform:translate(-5px,-3px) !important;
}

/* Exact identical vertical spacing between all eight unit labels: 8.50 percentage points. */
.learning-unit-1{top:27.95% !important}
.learning-unit-2{top:36.45% !important}
.learning-unit-3{top:44.95% !important}
.learning-unit-4{top:53.45% !important}
.learning-unit-5{top:61.95% !important}
.learning-unit-6{top:70.45% !important}
.learning-unit-7{top:78.95% !important}
.learning-unit-8{top:87.45% !important}

/* V67 — Discover list final micro-adjustments */

/* All eight list titles: 2px farther right. */
.learning-list-name{
  transform:translateX(-1px) !important; /* V65 was -3px; net +2px */
}

/* phrases / words:
   first row +3px lower, then taper evenly so the last row is only +1px lower.
   This preserves a smooth, corrected spacing progression. */
.learning-unit-1{top:calc(27.95% + 3px) !important}
.learning-unit-2{top:calc(36.45% + 2.714px) !important}
.learning-unit-3{top:calc(44.95% + 2.429px) !important}
.learning-unit-4{top:calc(53.45% + 2.143px) !important}
.learning-unit-5{top:calc(61.95% + 1.857px) !important}
.learning-unit-6{top:calc(70.45% + 1.571px) !important}
.learning-unit-7{top:calc(78.95% + 1.286px) !important}
.learning-unit-8{top:calc(87.45% + 1px) !important}

/* V69 — list-title vertical alignment:
   last title stays exactly where it is; upper titles progressively move down,
   with the first title +3px and the correction tapering to 0px on row 8. */
.learning-list-1{top:calc(25.05% + 3px) !important}
.learning-list-2{top:calc(33.55% + 2.571px) !important}
.learning-list-3{top:calc(42.05% + 2.143px) !important}
.learning-list-4{top:calc(50.55% + 1.714px) !important}
.learning-list-5{top:calc(58.95% + 1.286px) !important}
.learning-list-6{top:calc(67.45% + .857px) !important}
.learning-list-7{top:calc(75.95% + .429px) !important}
.learning-list-8{top:84.45% !important}

/* V70 — Personalize your listening:
   only the two TOP language flag/name rows. */
.pace-language--order-1,
.pace-language--order-2{
  transform:translateY(-3px) !important;
  font-size:3.95cqw !important;
}

.pace-language--order-1 img,
.pace-language--order-2 img{
  width:7.6cqw !important;
  height:5.05cqw !important;
}

/* V71 — Real-life phrases: only the two top language flags 3px lower */
.learning-flags{
  transform:translateY(3px) !important;
}

/* V72 — Personalize your listening:
   ONLY the first two / upper language flag + name rows, slightly larger. */
.pace-language--order-1,
.pace-language--order-2{
  font-size:4.15cqw !important;
}
.pace-language--order-1 img,
.pace-language--order-2 img{
  width:7.95cqw !important;
  height:5.30cqw !important;
}

/* V74 — align Start listening today heading with the rest of its text block */
section:has(#cta-title) .info > h2,
section:has(#cta-title) #cta-title{
  margin-left:0 !important;
}

/* V77 — Listen at your pace alignment */

/* Four feature rows/icons: flush with the left edge of the text column. */
section:has(#pace-title) .pace-items,
section:has(#pace-title) .pace-features{
  padding-left:0 !important;
  margin-left:0 !important;
}
section:has(#pace-title) .pace-item,
section:has(#pace-title) .pace-feature{
  padding-left:0 !important;
  margin-left:0 !important;
}
section:has(#pace-title) .pace-item > :first-child,
section:has(#pace-title) .pace-feature > :first-child{
  margin-left:0 !important;
}

/* Give the phone a little more room to the right on desktop. */
@media(min-width:801px){
  section:has(#pace-title) .pace-phone{
    transform:translateX(18px) !important;
  }
}

/* V78 — Listen at your pace: apply to the ACTUAL rendered classes */

/* The rendered feature rows are .icon-item inside #pace-items.
   Remove their left inset so all four icons start flush with the copy column. */
#pace-items.icon-list .icon-item{
  padding-left:0 !important;
  margin-left:0 !important;
}
#pace-items.icon-list .icon-item img{
  margin-left:0 !important;
  justify-self:start !important;
}

/* Move the Pace phone itself farther right inside its grid column. */
@media(min-width:801px){
  .pace-body .pace-phone{
    justify-self:end !important;
    transform:translateX(14px) !important;
  }
}

/* V81 — Real-life phrases: flags another 1px lower */
.learning-flags{
  transform:translateY(4px) !important; /* V71 was +3px */
}

/* V85: make the Help entry a clearly prominent onboarding card. */
.help-card{
  min-height:136px;
  gap:24px;
  padding:26px 30px;
  margin-top:4px;
  margin-bottom:28px;
  border-radius:26px;
}
.help-card-icon{
  width:64px;
  height:64px;
  border-radius:18px;
}
.help-card-icon svg{
  width:34px;
  height:34px;
}
.help-card-copy strong{
  font-size:22px;
  line-height:1.2;
}
.help-card-copy small{
  margin-top:7px;
  font-size:15px;
  line-height:1.45;
}
.help-card b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:15px;
  font-weight:750;
  white-space:nowrap;
}
@media (max-width:800px){
  .help-card{
    min-height:0;
    grid-template-columns:56px 1fr;
    gap:14px 16px;
    padding:20px;
    margin-top:2px;
    margin-bottom:20px;
    border-radius:22px;
  }
  .help-card-icon{
    width:56px;
    height:56px;
    border-radius:16px;
  }
  .help-card-icon svg{
    width:30px;
    height:30px;
  }
  .help-card-copy strong{
    font-size:20px;
  }
  .help-card-copy small{
    margin-top:5px;
    font-size:14px;
  }
  .help-card b{
    grid-column:1 / -1;
    width:100%;
    min-height:46px;
    margin-top:2px;
  }
}

/* V89: Playli for Schools uses the same visual hierarchy as How to use Playli. */
.schools-card{
  min-height:136px;
  gap:24px;
  padding:26px 30px;
  margin-top:18px;
  border-radius:26px;
}
.schools-card img{
  width:64px;
  height:64px;
  object-fit:contain;
}
.schools-card strong{
  font-size:22px;
  line-height:1.2;
}
.schools-card small{
  margin-top:7px;
  font-size:15px;
  line-height:1.45;
}
.schools-card b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:15px;
  font-weight:750;
  white-space:nowrap;
}
@media (max-width:800px){
  .schools-card{
    min-height:0;
    grid-template-columns:56px 1fr;
    gap:14px 16px;
    padding:20px;
    margin-top:18px;
    border-radius:22px;
  }
  .schools-card img{
    width:56px;
    height:56px;
  }
  .schools-card strong{font-size:20px;}
  .schools-card small{
    margin-top:5px;
    font-size:14px;
  }
  .schools-card b{
    grid-column:1 / -1;
    width:100%;
    min-height:46px;
    margin-top:2px;
  }
}

/* V93 — mobile header, Discover search alignment, compact language list */
@media (max-width:800px){
  .site-header{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding-top:10px !important;
    padding-bottom:12px !important;
  }
  .site-header .brand{
    grid-row:1 !important;
    justify-self:start !important;
  }
  .site-header .header-controls{
    grid-row:2 !important;
    width:100% !important;
    justify-content:space-between !important;
  }
  .site-header .language-control{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  .site-header .language-control select{
    max-width:none !important;
    width:100% !important;
  }
  .site-header .theme-toggle{
    flex:0 0 auto !important;
  }
}

/* Real-life phrases: move only the Search overlay 2px lower. */
.learning-search{
  transform:translateY(2px) !important;
}

/* One App / Many Languages: one vertical column, four visible languages. */
.flag-grid{
  grid-template-columns:1fr !important;
  max-width:360px !important;
}