/* VINEdots public site. Mobile-first. Tokens follow docs/vinedots-design-rules.md. */
:root{
  --ivory:#FBF6F0;--white:#fff;--hairline:#EAE3DB;
  --ink:#1A1816;--secondary:#6E6862;--muted:#776F68;
  --purple:#715B83;--deep:#5B3583;--tint:#F1E9F7;--tint-text:#5A4468;--outline:#D6C9E0;--pressed:#5F4C6E;
  --pink:#D4568E;--pink-text:#A83368;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --font:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
@font-face{font-family:'Poppins';font-weight:400;font-style:normal;font-display:swap;src:local('Poppins Regular'),local('Poppins-Regular'),url('../fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-style:normal;font-display:swap;src:local('Poppins Medium'),local('Poppins-Medium'),url('../fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;src:local('Poppins SemiBold'),local('Poppins-SemiBold'),url('../fonts/poppins-600.woff2') format('woff2')}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Page to page: the old page fades out, then the new one fades in (browsers with cross-document view transitions;
   the others just load the page). how-it-works/index.html carries the same rules, so it fades too. */
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root){animation:vt-out .2s ease both}
::view-transition-new(root){animation:vt-in .3s ease .1s both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
body{margin:0;font-family:var(--font);background:var(--ivory);color:var(--ink);line-height:1.55;overflow-x:hidden;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;font-weight:500;text-wrap:balance}
h1{font-size:clamp(34px,7vw,64px)}h2{font-size:clamp(26px,4vw,40px)}h3{font-size:17px}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.wrap.narrow,.narrow{max-width:760px}
.center{text-align:center}
.fine{font-size:13px;color:var(--secondary)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100}.skip:focus{left:8px;top:8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
:focus-visible{outline:3px solid var(--purple);outline-offset:2px}

/* Wordmark: VINE gradient, dots deep purple (never pink) */
.wm{font-weight:600;font-size:20px;letter-spacing:-.01em}
.wm-vine{background:linear-gradient(90deg,var(--deep),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.wm-dots{color:var(--deep)}
.wm-logo{background:linear-gradient(90deg,#5C3786,#8A3E86,#CB4D8A);-webkit-background-clip:text;background-clip:text;color:transparent} /* the header's VINEdots: the app icon's colors (img/icon.svg) */
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border-radius:999px;font:500 15px/1 var(--font);border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,transform .15s,color .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--purple);color:#fff}.btn-primary:hover{background:var(--pressed)}
.btn-secondary{background:transparent;border-color:var(--outline);color:var(--tint-text)}.btn-secondary:hover{background:var(--tint)}
.btn-white{background:#fff;color:var(--deep)}.btn-white:hover{background:#f4eef8}
.btn-outline-light{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);color:#fff}.btn-outline-light:hover{background:rgba(255,255,255,.2)}
.btn-lg{height:54px;padding:0 32px;font-size:16px}.btn-sm{height:36px;padding:0 16px;font-size:13px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Header: a frosted white pill floating 12px down (the app's phone nav, in white; same as how-it-works/).
   The header box is see-through and lets clicks pass; only the pill takes them. */
/* Fixed, not absolute: clicking the label focuses the checkbox, and one at the top of the page would scroll the page up to it. */
.mt,.st{position:fixed;top:0;left:0;opacity:0;pointer-events:none}
.site-header{position:sticky;top:0;z-index:50;height:76px;padding-top:12px;pointer-events:none}
.nav-pill{pointer-events:auto;width:min(1120px,calc(100% - 24px));margin:0 auto;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 30px -12px rgba(40,20,60,.3),0 0 0 .5px rgba(26,24,22,.08),inset 0 1px 0 rgba(255,255,255,.9)}
/* Frosted where the browser can blur what's behind; elsewhere the near-solid white above keeps the text readable. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-pill{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8)}
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px;padding:0 8px 0 16px}
.site-header .logo{gap:7px}
.site-header .bub{color:#3D2C4F;flex:none}
.site-header .links{display:none;position:relative;gap:2px;font-size:14px;font-weight:500}
.site-header .links a,.sv-btn{text-decoration:none;padding:8px 14px;white-space:nowrap;transition:color .15s}
.site-header .links a:hover,.site-header .links a:focus-visible,.site-header .links a[aria-current],.sv-btn:hover,.sv-btn:focus-visible,.sv-btn[aria-current]{color:var(--purple)}
.sv-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.sv-btn svg{transition:transform .25s}
.st:checked~.site-header .sv-btn svg{transform:rotate(180deg)}
/* The app's tab bar, in purple: under the current page's link, sliding to the hovered or focused one (site.js) */
.nav-bar{position:absolute;left:0;bottom:3px;width:0;height:3px;border-radius:999px;background:var(--purple);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.3,.7,.2,1),width .3s cubic-bezier(.3,.7,.2,1),opacity .2s}
@media(prefers-reduced-motion:reduce){.nav-bar{transition:opacity .2s}}
.actions{display:flex;align-items:center;gap:8px}
.nav-login{display:none;font-size:14px;font-weight:500;text-decoration:none;padding:0 6px;white-space:nowrap}.nav-login:hover{color:var(--purple)}
.btn-nav{height:40px;padding:0 18px;font-size:14px}
.btn-nav.full,.btn-nav.short,.actions>.langc{display:none}

/* Burger: circular, 3 lines; an X while the menu is open */
.burger{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--hairline);background:rgba(255,255,255,.7);color:var(--ink);display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;cursor:pointer}
.burger span{width:16px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .2s}
.mt:checked~.site-header .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mt:checked~.site-header .burger span:nth-child(2){opacity:0}
.mt:checked~.site-header .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Language switch: globe-icon circular button that opens a centred pop-up */
.langc{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:40px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;transition:color .15s}
.langc:hover{color:var(--purple)}
/* Preview note: a card that drops from above the screen to its middle, with confetti, until it's closed (site.js adds .on) */
.pv-note{position:fixed;top:50%;left:50%;z-index:60;display:flex;gap:12px;width:min(calc(100% - 32px),460px);padding:12px 44px 12px 14px;background:#fff;border:1px solid var(--outline);border-radius:16px;box-shadow:0 12px 32px rgba(26,24,22,.18);color:var(--secondary);font-size:14px;line-height:1.5;transform:translate(-50%,calc(-50vh - 100%));transition:transform .7s cubic-bezier(.2,.9,.3,1.15)}
.pv-note[hidden]{display:none}
.pv-note.on{transform:translate(-50%,-50%)}
.confetti{position:fixed;inset:0;z-index:59;width:100%;height:100%;pointer-events:none}
.pv-note::before{content:"";flex:none;width:6px;border-radius:3px;background:var(--deep)}
.pv-note p{margin:0}
.pv-note strong{display:block;color:var(--ink);font-size:15px;font-weight:600}
.pv-note a{color:var(--deep);font-weight:600;white-space:nowrap}
.pv-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--secondary);font-size:22px;line-height:1;cursor:pointer}
.pv-x:hover{background:var(--tint)}
@media(prefers-reduced-motion:reduce){.pv-note{transition:none}}
.lang-pop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(26,24,22,.5)}
.lang-pop[hidden]{display:none}
.lang-card{position:relative;width:min(460px,100%);max-height:calc(100vh - 40px);overflow-y:auto;padding:24px;background:#fff;color:var(--ink);border-radius:16px}
.lang-title{margin:0 40px 16px 4px;font-size:18px;font-weight:600}
.lang-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border:1px solid var(--hairline);border-radius:50%;background:#fff;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.lang-x:hover{background:var(--tint)}
.lang-card ul{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none}
.lang-card a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--hairline);border-radius:12px;text-decoration:none;color:var(--ink)}
.lang-card a strong{font-size:15px;font-weight:600}
.lang-card a span{font-size:12px;color:var(--muted)}
.lang-card a:hover{border-color:var(--outline);background:var(--tint)}
.lang-card a[aria-current]{border-color:var(--purple);background:var(--tint)}
body.lang-open{overflow:hidden}

/* Phone menu: drops down inside the pill, like the day bar on how-it-works/ */
.menu{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease,visibility 0s .3s}
.mt:checked~.site-header .menu{max-height:min(560px,calc(100vh - 90px));overflow-y:auto;visibility:visible;transition:max-height .3s ease}
.menu nav{display:flex;flex-direction:column;padding:6px 8px;border-top:1px solid var(--hairline)}
.menu nav a{padding:11px 12px;border-radius:16px;font-size:17px;font-weight:500;text-decoration:none}
.menu nav a:hover{color:var(--purple)}
.menu nav a[aria-current]{background:var(--tint);color:var(--tint-text)}
/* Services group: smaller, under the main links */
.menu-h{margin:6px 12px 2px;padding-top:12px;border-top:1px solid var(--hairline);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.menu-sub{display:flex;flex-direction:column}
.menu nav .menu-sub a{padding:8px 12px;font-size:15px}
/* Bottom row: Learn | About | Contact | Log in | globe + language, centred; the | are borders */
.menu-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;row-gap:4px;padding:12px;border-top:1px solid var(--hairline);font-size:13px;font-weight:500;line-height:1}
.menu-foot>*{padding:6px 7px;text-decoration:none}
.menu-foot>*+*{border-left:1px solid var(--outline)}
.menu-foot a:hover,.menu-foot a[aria-current]{color:var(--purple)}
.menu-foot .langc{width:auto;height:auto;gap:6px;font:inherit}
@media(min-width:900px){
  .site-header .links{display:flex}.nav-login{display:inline}.btn-nav.short{display:inline-flex}.burger,.menu{display:none}
  .actions>.langc{display:flex}
  /* Scrolled down (site.js .compact): the pill shrinks to VINEdots + burger in the top left corner; the mouse in the
     top 10% of the screen (site.js .peek), on the pill, or Tab focus in it grows it back to the full bar in the middle */
  .nav-pill{margin-left:max(12px,calc(50% - 560px));transition:width .4s cubic-bezier(.3,.7,.2,1),margin-left .4s cubic-bezier(.3,.7,.2,1)}
  .compact:not(.peek) .nav-pill:not(:hover,:focus-within){width:224px;margin-left:12px}
  .compact:not(.peek) .nav-pill:not(:hover,:focus-within) :is(.links,.actions>:not(.burger),.sticky-cta){display:none}
  .compact:not(.peek) .nav-pill:not(:hover,:focus-within) .burger{display:flex}
  .compact .nav-pill :is(.links,.actions>:not(.burger),.sticky-cta){animation:nav-in .4s}
}
@keyframes nav-in{from{opacity:0}}
@media(min-width:900px) and (max-width:1239px){.site-header .links a,.sv-btn{padding:8px 10px}} /* room for the longer labels (es, pt-BR) */
@media(min-width:1100px){.btn-nav.full{display:inline-flex}.btn-nav.short{display:none}}
/* Over a full-bleed hero the pill floats on the photo instead of taking room above it */
.has-hero .site-header{position:fixed;left:0;right:0}

/* Hero */
/* Photo heroes are regular height; App (.ast), How it works (its own page) and Local programs (below) fill the screen */
.hero{position:relative;min-height:max(460px,60svh);display:flex;align-items:flex-end;overflow:hidden;background:#2a2230;color:#fff}
.hero-bg{position:absolute;inset:-6% 0;z-index:0;will-change:transform;overflow:hidden}
.kb-img{width:100%;height:100%;object-fit:cover;animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.14) translate(-2%,-2%)}}
/* Darker band at the top keeps the transparent header's white links readable over any photo */
.scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(26,24,22,.66) 0,rgba(26,24,22,.34) 140px,rgba(26,24,22,.38) 50%,rgba(26,24,22,.84) 100%)}
.hero-content{position:relative;z-index:2;padding-top:120px;padding-bottom:56px}
.pill{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);font-size:13px;font-weight:500;margin-bottom:20px}
.live-dot{width:14px;height:14px;border-radius:50%;flex:none;background:#E5484D;box-shadow:0 0 0 0 rgba(229,72,77,.6),0 0 8px rgba(229,72,77,.8);animation:live-glow 1.8s ease-out infinite}
@keyframes live-glow{0%{box-shadow:0 0 0 0 rgba(229,72,77,.65),0 0 8px rgba(229,72,77,.8)}70%{box-shadow:0 0 0 12px rgba(229,72,77,0),0 0 14px rgba(229,72,77,.6)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0),0 0 8px rgba(229,72,77,.8)}}
.hero h1{max-width:820px;font-size:clamp(38px,8vw,78px);line-height:1.03;margin-bottom:18px}
.accent{color:inherit}
.hero .lead{font-size:clamp(16px,2vw,20px);color:rgba(255,255,255,.9);max-width:540px;margin-bottom:30px}
.hero .cta-row{margin-bottom:40px}
.hero .cta-row:has(+.hero-trial){margin-bottom:14px}
.hero-trial{margin:0 0 34px;font-size:14px;font-weight:500;color:rgba(255,255,255,.9)}
.hero-trial::before{content:"\2713";margin-right:8px;color:#F4C3DA}
.trial-note{margin:14px 0 0;font-size:14px;font-weight:600;color:var(--deep)}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:13px;color:rgba(255,255,255,.88)}
.avatars{flex:none;width:114px}.faces-track{display:flex}.faces-track.slide{transform:translateX(-26px);transition:transform .6s ease}.avatars img{position:relative;flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85);margin-left:-10px}.avatars img:first-child{margin-left:0}.faces-track img:nth-child(5){opacity:0}.faces-track.slide img:first-child{transform:translateX(26px);transition:transform .6s ease}.faces-track.slide img:nth-child(5){opacity:1;transition:opacity .6s}
.trust span{flex:1 1 auto;min-width:0;margin-left:6px}

/* Sections */
.sec{padding:72px 0;position:relative}
.sec-tight{padding:40px 0}
.sec-white{background:var(--white);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.sec-clip{overflow:hidden}
.sec-head{max-width:680px;margin:0 0 40px}.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{color:var(--secondary);font-size:16px}
.eyebrow{display:block;font-size:14px;font-weight:500;color:var(--deep);margin-bottom:10px}
.body-lg{font-size:16px;color:var(--secondary)}
.grid-2,.grid-3,.grid-4{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:700px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.card-tile{border:1px solid var(--hairline);border-radius:16px;background:var(--ivory);padding:26px 22px;display:flex;flex-direction:column;gap:8px}
.sec-white .card-tile{background:var(--ivory)}
.card-tile h3{font-size:18px;margin:0}
.card-tile p{font-size:14px;color:var(--secondary);margin:0}
.card-tile .tag{font-size:12px;color:var(--muted)}
.card-tile .btn{align-self:flex-start;margin-top:10px}
.card-tile.featured{background:linear-gradient(160deg,var(--deep),var(--pink));border-color:transparent;color:#fff}
.card-tile.featured p,.card-tile.featured .tag{color:rgba(255,255,255,.9)}
.card-tile.tool .icon{width:44px;height:44px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.link-card{text-decoration:none;transition:border-color .2s,transform .2s}.link-card:hover{border-color:var(--outline);transform:translateY(-2px)}
.link-card .more{margin-top:auto;font-size:14px;font-weight:500;color:var(--purple)}
.card-img{border-radius:10px;margin-bottom:8px;aspect-ratio:16/9;object-fit:cover;width:100%}
ul.plain{list-style:none;margin:0 0 6px;padding:0;font-size:14px;color:var(--secondary)}
ul.plain li{padding:2px 0}

/* Reveal on scroll (only when JS runs) */
/* Content is visible from the start; scrolling in only settles it into place, so slow JS never leaves blank sections */
.js .reveal{transform:translateY(18px);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.js .reveal.in-view{opacity:1;transform:none}
.js .reveal-stagger>*{transform:translateY(16px);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.js .reveal-stagger.in-view>*{opacity:1;transform:none}
.reveal-stagger.in-view>:nth-child(2){transition-delay:.08s}.reveal-stagger.in-view>:nth-child(3){transition-delay:.16s}
.reveal-stagger.in-view>:nth-child(4){transition-delay:.24s}.reveal-stagger.in-view>:nth-child(5){transition-delay:.32s}
/* Card grids where each card pops in big as it reaches the screen: from 60% size it springs just past full size and settles (site.js staggers a row) */
.js .reveal-pop>*{opacity:0;transform:translateY(48px) scale(.6);transition:opacity .3s ease,transform .75s cubic-bezier(.34,1.56,.64,1)}
.js .reveal-pop>.in-view{opacity:1;transform:none}

/* Class picker: sliding rail, ported 1:1 from docs/mockups/index-z.html */
.picker{padding-top:48px;padding-bottom:40px}
@media(min-width:700px){.picker{padding-top:72px}}
.subhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto;padding:0 20px}
.subhead h2{font-size:clamp(30px,7vw,44px);margin-bottom:10px}
.subhead .lede{font-size:clamp(16px,2.2vw,18px);color:var(--secondary);max-width:36em}
.arrows{display:none;gap:8px}
.arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--hairline);background:#fff;color:var(--deep);font-size:20px;cursor:pointer}
.arrow:disabled{opacity:.4;cursor:default}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:22px calc((100% - min(82vw,460px))/2) 14px;scroll-padding-inline:0;scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.cls{position:relative;flex:0 0 min(82vw,460px);scroll-snap-align:center;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);background:#fff;border:1px solid var(--hairline);border-radius:20px;overflow:hidden;min-height:410px}
.cls .pic{position:relative;background:var(--tint)}
.cls .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.cls .pic .next{position:absolute;left:10px;top:10px;max-width:calc(100% - 20px);padding:8px 14px;border-radius:18px;background:#fff;color:var(--purple);font-size:14px;font-weight:600;line-height:1.25;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.cls .body{padding:16px 14px 14px;display:flex;flex-direction:column;min-width:0}
.cls .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--tint);color:var(--tint-text);font-size:12px;font-weight:600;white-space:nowrap}
.lv-a1{background:#FDE6E6;color:#A82525}.lv-a2{background:#FDEDE1;color:#9C4D14}.lv-b1{background:#FAEFCF;color:#7D6100}
.lv-b2{background:#ECF8E6;color:#3D7827}.lv-c1{background:#E1F0FA;color:#1F6FA0}.lv-c2{background:#E4EAFB;color:#2A4FA8}
.cls .day{font-weight:600;color:var(--purple);font-size:14px}
.cls .topic{font-size:20px;line-height:1.15;letter-spacing:-.015em;margin:2px 0 10px;font-weight:500}
.cls .time{font-size:36px;font-weight:500;letter-spacing:-.04em;line-height:1;white-space:nowrap}
.cls .time small{font-size:16px;letter-spacing:0;margin-left:3px}
.cls .who{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--secondary);margin-top:14px}
.cls .av{width:34px;height:34px;border-radius:50%;background:var(--tint);color:var(--tint-text);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.cls .seats{font-size:13px;color:var(--secondary);margin:10px 0 14px}
.cls .seats b{color:var(--ink)}
.cls .btn{margin-top:auto}
.btn-book{height:44px;gap:8px;font-size:15px;font-weight:600;border:1.5px solid var(--purple);color:var(--purple);background:transparent;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;text-decoration:none}
.btn-book:hover{background:var(--tint)}
/* The whole card is the tap target; the button stays the visible, focusable control */
.cls .btn-book{height:auto;min-height:44px;padding:9px 16px;white-space:normal;text-align:center;line-height:1.25}
.cls .btn-book::after{content:"";position:absolute;inset:0;border-radius:20px}
.cls:has(.btn-book:hover){border-color:var(--outline)}
.week-empty{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding:24px;background:#fff;border:1px dashed var(--outline);border-radius:16px}
.week-empty p{margin:0;max-width:40em;color:var(--secondary)}
.cls.past{background:#FAF8F5}.cls.past .pic img{filter:grayscale(.8);opacity:.7}.cls.past .pic .next{background:var(--ink);color:#fff}
.cls.past .day,.cls.past .topic,.cls.past .time{color:var(--secondary)}.cls.past .chip{opacity:.75}
.cls .held{margin-top:auto;padding-top:12px;border-top:1px solid var(--hairline);font-size:13px;color:var(--secondary)}
/* Live Class card (portal data): same order and weights as the app's Classes card
   (vinedots-pwa WeekClassCard) - date + class name, big local time, topic, track + level chips, teacher. */
.cls-live .dayrow{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 8px;margin-bottom:12px}
.cls-live .dayrow .day{flex:none;font-size:14px;color:var(--tint-text);white-space:nowrap}
.cls-live .cname{flex:1 1 auto;font-size:13px;color:var(--ink);text-align:right;line-height:1.25}
.cls-live .timerow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cls-live .dur{font-size:13px;color:var(--muted)}
.cls-live .topic{margin:0 0 12px}
.cls-live .topic-soon{margin:0 0 12px;font-size:15px;color:var(--muted)}
.cls-live .chips{margin-bottom:0}
.cls-live .who{margin:12px 0 16px}
.chip-lv{padding:0;overflow:hidden;gap:0}
.chip-lv>span{height:100%;display:flex;align-items:center;padding:0 9px}
.cls.past .chip-lv,.cls.past .cname{opacity:.75}
.week-start{margin:12px 0 0;color:var(--ink);font-size:16px;font-weight:600;line-height:1.5;white-space:pre-line;max-width:560px}
.week-start[hidden]{display:none}
.week-theme{margin:16px 0 0;display:inline-block;padding:10px 20px;border-radius:999px;background:var(--tint);border:1px solid var(--outline);color:var(--tint-text);font-size:18px;font-weight:500;line-height:1.3}
.week-theme strong{color:var(--deep);font-weight:700}
.rail-dots{display:flex;justify-content:center;gap:8px;padding-top:6px}
.rail-dots i{width:8px;height:8px;border-radius:99px;background:var(--outline);transition:width .2s,background .2s}
.rail-dots i.on{width:22px;background:var(--purple)}
@media(min-width:700px){.rail-dots{display:none}}
.tznote{margin-top:14px;font-size:14px;color:var(--secondary);text-align:center}
/* List view | Calendar view (site.js): the app's Classes switch and week calendar (vinedots-pwa Segmented.tsx, WeekCalendar.tsx) */
.week-tools{display:flex;align-items:center;gap:8px;flex:none}
.seg{position:relative;display:flex;gap:2px;padding:3px;border-radius:999px;background:#fff;border:1px solid var(--hairline)}
.seg-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 4px);border-radius:999px;background:var(--purple);transition:transform .25s ease}
.seg[data-v="cal"] .seg-thumb{transform:translateX(calc(100% + 2px))}
.seg button{position:relative;flex:1;min-width:0;height:38px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;background:transparent;font:500 14px/1.15 var(--font);color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .2s}
.seg button[aria-checked="true"]{color:#fff}
.seg svg{flex:none}
.rail[hidden],.rail-dots[hidden],.arrows[hidden],.week-cal[hidden],.seg[hidden]{display:none}
@media(max-width:699px){.subhead{flex-wrap:wrap}.week-tools{width:100%}.seg{flex:1}}
.week-cal{margin-top:22px}
.wc-pager{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.wc-pager::-webkit-scrollbar{display:none}
.wc-page{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.wc-week{margin:0 0 8px;font-size:16px;font-weight:500;color:var(--ink)}
.wc-grid{background:#fff;border:1px solid var(--hairline);border-radius:12px;overflow:hidden}
.wc-grid{display:grid;grid-template-columns:34px repeat(7,minmax(0,1fr))}
.wc-hl{position:absolute;left:0;right:0;height:1px;background:#F3EEE8}
.wc-fold{position:absolute;left:0;right:0;background:repeating-linear-gradient(135deg,#F6F1EB 0 4px,#FBF8F4 4px 8px);border-top:1px solid #EFE8E0;border-bottom:1px solid #EFE8E0} /* the folded 12:00-18:00 Taiwan hours */
.wc-head{padding:8px 0 6px;text-align:center;border-bottom:1px solid var(--hairline)}
.wc-head+.wc-head{border-left:1px solid var(--hairline)}
.wc-head span{display:block;font-size:11px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.wc-head b{display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin:2px auto 0;border-radius:999px;font-size:14px;font-weight:600}
.wc-head.today span{color:var(--purple)}
.wc-head.today b{background:var(--purple);color:#fff}
.wc-gutter{position:relative}
.wc-gutter span{position:absolute;right:4px;font-size:9.5px;color:var(--muted);white-space:nowrap}
.wc-col{position:relative;border-left:1px solid var(--hairline)}
.wc-col.today{background-color:rgba(241,233,247,.45)}
.wc-cls{position:absolute;z-index:1;display:flex;flex-direction:column;gap:1px;padding:3px 3px 3px 4px;overflow:hidden;border-radius:5px;border-left:3px solid var(--purple);background:var(--tint);color:var(--ink);text-decoration:none;font-size:10px;line-height:1.2}
.wc-cls.biz{background:#E9F0F8;border-left-color:#4A6E96}
.wc-cls.now{background:var(--purple);border-left-color:var(--pink);color:#fff}
.wc-cls b{font-weight:600;color:var(--tint-text);white-space:nowrap}
.wc-cls.biz b{color:#33506F}
.wc-cls.now b{color:#fff}
.wc-cls span{font-weight:500;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden} /* whole lines, as many as fit (site.js) */
.wc-cls:hover{filter:brightness(.97)}
.wc-now{position:absolute;left:0;right:0;height:2px;background:var(--pink);z-index:2}
.wc-now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:999px;background:var(--pink)}
@media(min-width:700px){
  .arrows{display:flex}
  .rail{padding-right:20px;padding-left:max(20px,calc((100vw - 1180px)/2 + 20px));scroll-padding-inline:max(20px,calc((100vw - 1180px)/2 + 20px))}
  .cls{flex-basis:460px;scroll-snap-align:start}
}

/* How it works */
/* How it works (how.php), ported 1:1 from the mockup's 5-step flow */
.ic{display:flex;align-items:center;justify-content:center;border-radius:50%;flex:none;width:64px;height:64px}
.ic.c1{background:#E4EEF3;color:#2F5566}.ic.c2{background:var(--tint);color:var(--purple)}
.ic.c3{background:#E6EFE4;color:#2C5A2A}.ic.c4{background:#F4EBDD;color:#8A5A14}.ic.c5{background:#F8E7EE;color:#9A2F5C}
.flow5{display:grid;gap:22px;margin-top:38px}
.fs{display:flex;gap:16px;align-items:center}
.fs h3{font-size:19px;margin:0}
.fs p{font-size:15px;color:var(--secondary);line-height:1.4;margin:0}
.fs .num{font-size:12px;font-weight:600;color:var(--purple);letter-spacing:.06em;text-transform:uppercase}
.gap-arrow{display:none;color:var(--muted);font-size:22px}
@media(min-width:1000px){
  .flow5{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:start;gap:14px}
  .fs{flex-direction:column;text-align:center;gap:12px}
  .fs .ic{width:80px;height:80px}
  .gap-arrow{display:block;margin-top:26px}
}

/* Classmates */
.mates{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:900px;margin:0 auto}
@media(min-width:700px){.mates{grid-template-columns:repeat(5,1fr);gap:20px}}
.mate{text-align:center}
.mate .ring{aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--hairline);margin-bottom:8px}
.mate .ring img{width:100%;height:100%;object-fit:cover}
.mate .name,.mate .nm{font-size:14px;font-weight:500}.mate .role,.mate .rl{font-size:12px;color:var(--muted)}

/* Testimonials */
.testi{max-width:760px;margin:0 auto;text-align:center}
.testi-item{display:none;margin:0}.testi-item.active{display:block}
.testi-photo{width:84px;height:84px;border-radius:50%;object-fit:cover;margin:0 auto 16px}
.testi-initial{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font-size:28px;font-weight:600}
.testi blockquote{margin:0 0 14px;font-size:clamp(17px,2.4vw,22px);line-height:1.5}
.testi figcaption{display:flex;flex-direction:column;font-size:14px}.testi figcaption span{color:var(--muted);font-size:13px}
.testi-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.testi-ctl>button{width:40px;height:40px;border-radius:50%;border:1px solid var(--hairline);background:#fff;cursor:pointer;font-size:16px}
.testi-dots{display:flex;gap:8px}.testi-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--outline);cursor:pointer}.testi-dots button.active{background:var(--purple)}

/* Streak: text / class-photo / dot-wall, three columns on desktop. */
.streak-grid{display:grid;gap:32px;align-items:start;grid-template-columns:1fr}
@media(min-width:900px){.streak-grid{grid-template-columns:1.1fr .9fr 1fr;gap:32px;align-items:center}}
.checks{list-style:none;margin:0;padding:0}
.checks li{display:flex;align-items:flex-start;gap:10px;padding:5px 0;font-size:16px;font-weight:500}
.checks svg{color:var(--purple);margin-top:3px;flex:none}
.sp-split .plus{align-self:center;font-style:normal;font-size:26px;color:var(--purple);font-weight:500}
.streak-photo{position:relative;border-radius:16px;overflow:hidden;min-height:320px;background:var(--tint)}
.streak-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-split{position:absolute;left:12px;right:12px;bottom:12px;background:#fff;border-radius:16px;padding:14px 16px;display:flex;align-items:center;justify-content:space-around;gap:8px;border:1px solid var(--hairline)}
.sp-split span{text-align:center;font-size:13px;color:var(--secondary);line-height:1.3;display:flex;flex-direction:column;gap:2px}
.sp-split strong{font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.sp-split small{font-size:12px;color:var(--secondary)}

/* Dot wall, per docs/DOTS-SPEC.md. Color is decorative only; size/shape carry state.
   Scoped under .dotwall/.legend so the short ".d"/state class names never leak globally. */
.dotwall{background:#F7E7EE;border-radius:20px;padding:28px 24px;display:flex;flex-direction:column;gap:16px}
.dotwall .dw-label{font-size:14px;color:var(--secondary)}
.dotwall .dw-n{font-size:clamp(28px,6vw,36px);font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.dotwall .dw-grid{display:grid;grid-template-columns:repeat(8,1fr);align-items:center;justify-items:center;gap:10px 8px}
.dotwall .d,.legend .d{display:inline-block;flex:none;border-radius:50%;opacity:0;transform:translateY(-24px)}
.dotwall .d{width:20px;height:20px}
.dotwall .d.x2{width:26px;height:26px}
.dotwall .d.x3{width:32px;height:32px}
.dotwall .d.c1,.legend .d.c1{background:#EFBBD3}
.dotwall .d.c2,.legend .d.c2{background:#E7A0C0}
.dotwall .d.c3,.legend .d.c3{background:#DE85AD}
.dotwall .d.c4,.legend .d.c4{background:#D4568E}
.dotwall .d.c5,.legend .d.c5{background:#BC4278}
.dotwall .d.ring,.legend .d.ring{background:transparent;border:2px solid var(--pink)}
.dotwall .d.dash,.legend .d.dash{background:transparent;border:2px dashed var(--pink)}
.dotwall .d.fut,.legend .d.fut{width:8px;height:8px;background:#EBC9D8}
.dotwall.in-view .d{animation:drop .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i)*50ms)}
@keyframes drop{0%{opacity:0;transform:translateY(-24px)}30%{opacity:1}100%{opacity:1;transform:none}}
.no-js .dotwall .d,.dotwall:not(.reveal) .d{opacity:1;transform:none}
.dotwall-foot{display:flex;justify-content:space-between;font-size:13px;color:var(--secondary)}.dotwall-foot strong{color:var(--purple)}
.legend{list-style:none;margin:0;padding:12px 0 0;border-top:1px dashed var(--outline);display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--secondary)}
.legend li{display:flex;align-items:center;gap:8px}
.legend .d{width:14px;height:14px;opacity:1;transform:none}
.legend .d.x2,.legend .d.x3{width:14px;height:14px}
.legend .d.fut{width:8px;height:8px}

/* After class + AI tools (home_tools.php), ported 1:1 from the mockup's "AFTER" section */
.after-grid{display:grid;gap:24px;align-items:stretch}
.afterL{min-width:0}
.afterL .lede{margin:10px 0 0}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
@media(max-width:699px){.tiles .tile:last-child:nth-child(odd){grid-column:1/-1}}
.tile{background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:16px 14px;display:flex;flex-direction:column;gap:10px}
.tile .ic{width:44px;height:44px}
.tile h3{font-size:16px;margin:0}
.tile p{font-size:13px;color:var(--secondary);line-height:1.4;margin:4px 0 0}
.aibox{margin-top:30px;padding-top:26px;border-top:1px solid var(--hairline)}
.aicap{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.aicap span{font-size:13px;font-weight:600;color:var(--purple);letter-spacing:.02em}
.aiar{display:none;gap:8px}
.aiar button{width:38px;height:38px;border-radius:50%;border:1px solid var(--hairline);background:#fff;color:var(--deep);font-size:16px;cursor:pointer}
.aiar button:hover{background:var(--tint)}
.airail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;margin:0 -20px;padding:0 20px 6px;scroll-padding-inline:20px}
.airail::-webkit-scrollbar{display:none}
.feat{background:var(--ivory);border:1px solid var(--hairline);border-radius:16px;padding:16px 14px;display:flex;flex-direction:column;gap:10px;flex:0 0 min(72vw,280px);scroll-snap-align:start;min-height:170px}
.feat .ic{width:44px;height:44px;border-radius:12px}
.feat h3{font-size:16px;margin:0}
.feat p{font-size:13px;color:var(--secondary);line-height:1.4;margin:4px 0 0}
@media(min-width:700px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){
  .airail{margin:0;padding:0 0 6px;scroll-padding-inline:0}
  .feat{flex:0 0 calc((100% - 24px)/3)}
  .aiar{display:flex}
}
@media(min-width:1000px){.after-grid{grid-template-columns:1.25fr 1fr}.feat{min-height:160px}}

/* Partner logo marquee + join-band (home_logos.php) */
.logos{position:relative;overflow:hidden;background:var(--white);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
/* A still, wrapped row of logos: per the brand rules nothing animates on its own */
.logos{padding:40px 12px}.logos .track{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 0}.logos .track+.track{margin-top:18px}
.logos img{height:34px;width:auto;margin:0 20px;flex:none;mix-blend-mode:multiply;filter:grayscale(1);opacity:.78;transition:filter .2s,opacity .2s}
.logos img:hover{filter:none;opacity:1}
.pause-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--hairline);background:#fff;color:var(--ink);cursor:pointer}
.pause-btn:hover{background:var(--tint)}
.pause-btn .i-play,.pause-btn.paused .i-pause{display:none}.pause-btn.paused .i-play{display:block}
/* Community (proof.php), ported 1:1 from the mockup's "COMMUNITY" section */
#proof h2{max-width:15em}
.tsum{display:grid;gap:26px;margin-top:34px;align-items:center}
.tsum h3{font-size:clamp(24px,5vw,32px);margin-bottom:10px}
.tsum .lede{max-width:40em}
.stat{text-align:center}
.stat .n{display:block;font-size:clamp(46px,10vw,68px);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--deep);font-variant-numeric:tabular-nums}
.stat .l{display:block;font-size:15px;color:var(--secondary);margin-top:8px}
.stat .l+.n{margin-top:22px}
.creds{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin-top:16px}
.creds img{height:24px;width:auto;max-width:100%;mix-blend-mode:multiply}
.faces{margin-top:64px;text-align:center}
.faces h3{font-size:18px;margin:0 0 18px}
.joinband{margin:40px 0 0;padding:28px 24px;border-radius:20px;background:linear-gradient(135deg,var(--deep),var(--pink-text));color:#fff;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.joinband h3{color:#fff;font-size:clamp(22px,4vw,28px);margin-bottom:6px}
.joinband p{color:rgba(255,255,255,.9);font-size:15px;max-width:38em;margin:0}
.quotes{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:40px -20px 0;padding:0 20px 10px;scroll-padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain}
.quotes::-webkit-scrollbar{display:none}
.qc{flex:0 0 min(86vw,380px);scroll-snap-align:start;padding:24px 22px;display:flex;flex-direction:column}
.qc p{font-size:17px;font-weight:500;line-height:1.5;letter-spacing:-.005em;margin-bottom:20px}
.by{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--secondary);margin-top:auto}
.by .av{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.by .av.testi-initial{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font-weight:600}
.by b{display:block;color:var(--ink);font-size:15px}
.trusted{margin-top:64px}
.trusted .lab{text-align:center;font-size:16px;line-height:1.6;color:var(--secondary);margin:0 auto 20px;padding:0 20px;max-width:50em}
.trusted .lab strong{color:var(--ink);font-weight:600}
@media(min-width:700px){
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);margin:40px 0 0;padding:0;overflow:visible}
  .qc{flex:none}
  .joinband{flex-direction:row;justify-content:space-between;text-align:left;padding:30px 34px}
  .joinband p{max-width:34em}
}
@media(min-width:900px){.tsum{grid-template-columns:1.5fr .8fr;gap:64px}}

/* Don't finish English, keep using it (diff.php): course vs. English Gym cycle */
.notcourse{display:grid;gap:40px}
.vs{display:grid;gap:14px}
@media(min-width:760px){.vs{grid-template-columns:repeat(3,1fr)}}
.vsc{border-radius:16px;padding:24px 22px}
.vsc.old{background:#EFEDEA;color:var(--secondary)}
.vsc.new{background:var(--tint);color:var(--ink);border:2px solid var(--outline)}
.vsc .tag{display:inline-flex;height:28px;align-items:center;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;margin-bottom:16px}
.old .tag{background:transparent;color:var(--secondary);padding:0}
.new .tag{background:var(--purple);color:#fff}
.path{list-style:none;position:relative;margin:0;padding:0}
.path li{position:relative;display:flex;align-items:center;gap:14px;padding:11px 0;font-weight:600;font-size:18px}
.path li::before{content:"";width:12px;height:12px;margin-left:7px;border-radius:50%;background:var(--muted);flex:none;position:relative;z-index:1}
.path li:not(:last-child)::after{content:"";position:absolute;left:12px;top:50%;height:100%;width:2px;background:#D5D0CA}
.new .path li::before{background:var(--purple)}
.new .path li:not(:last-child)::after{background:var(--outline)}
.cyc{position:relative}
.cyc .back{position:absolute;left:62%;right:8px;top:25px;bottom:25px;border:2px solid var(--purple);border-left:0;border-radius:0 18px 18px 0;pointer-events:none}
.cyc .back::before{content:"";position:absolute;left:-1px;top:-8px;border-style:solid;border-width:7px 11px 7px 0;border-color:transparent var(--purple) transparent transparent}
.cyc .back::after{content:"";position:absolute;left:-4px;bottom:-5px;width:8px;height:8px;border-radius:50%;background:var(--purple)}
.vsc .foot{margin-top:14px;padding-top:12px;border-top:1px solid rgba(0,0,0,.08);font-size:15px;font-weight:500}
.new .foot{color:var(--tint-text)}

/* A week with VINEdots (rhythm.php) */
/* A week with VINEdots (rhythm.php), ported 1:1 from the mockup */
.wk{background:#E4EEF3;border-top:1px solid var(--hairline)}
.tl{display:grid;gap:18px;margin-top:34px;list-style:none;padding:0}
.tl li{display:flex;gap:16px;align-items:center}
.tl .ic{width:56px;height:56px}
.tl .day{font-size:14px;font-weight:600;color:var(--purple)}
.tl h3{font-size:18px;margin:0}
.tl p{font-size:14px;color:var(--secondary);line-height:1.35;margin:0}
@media(min-width:1000px){.tl{grid-template-columns:repeat(6,1fr)}.tl li{flex-direction:column;text-align:center;align-items:center;gap:10px}}

/* Who it's for (who.php), ported 1:1 from the mockup */
.who{display:grid;gap:14px;margin-top:30px}
.card{background:#fff;border:1px solid var(--hairline);border-radius:20px}
.who .c{overflow:hidden;border-radius:16px}
.who .im{aspect-ratio:16/10;background:var(--tint)}
.who .im img{width:100%;height:100%;object-fit:cover}
.who .tx{padding:20px 20px 24px}
.who h3{font-size:22px;margin-bottom:6px}
.who p{color:var(--secondary);font-size:15px;margin:0}
@media(min-width:700px){.who{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.who .im{aspect-ratio:4/3}}

/* Credentials */
.cred-stat{text-align:center;margin-bottom:36px}
.cred-stat .num{font-size:clamp(40px,6vw,56px);font-weight:600;line-height:1;background:linear-gradient(90deg,var(--deep),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.cred-stat .lbl{color:var(--secondary);font-size:14px}
.cred-logos{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;align-items:center;margin-bottom:48px}
.cred-logos img{height:38px;width:auto;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}.cred-logos img:hover{filter:none;opacity:1}
.clients-label{text-align:center;font-size:13px;color:var(--muted);margin-bottom:16px}
.clients-wrap{border:1px solid var(--hairline);border-radius:16px;overflow:hidden}.clients-wrap img{width:100%;height:auto}

/* Pricing (plans.php), ported 1:1 from the mockup's Monthly/Annual toggle + tiers */
.toggle{display:inline-flex;background:#fff;border:1px solid var(--hairline);border-radius:999px;padding:5px;margin:26px auto 30px;gap:4px}
.toggle button{border:0;background:transparent;font:600 15px var(--font);height:42px;padding:0 18px;border-radius:999px;cursor:pointer;color:var(--secondary)}
.toggle button.on{background:var(--purple);color:#fff}
.toggle .save{font-size:12px;background:#E6EFE4;color:#2C5A2A;border-radius:999px;padding:2px 8px;margin-left:6px}
.toggle button.on .save{background:rgba(255,255,255,.22);color:#fff}
.tiers{display:grid;gap:14px}
.tier{padding:26px 22px;display:flex;flex-direction:column;position:relative}
.tier .btn{height:auto;min-height:44px;padding-top:9px;padding-bottom:9px;white-space:normal;text-align:center;line-height:1.25}
.tier.pop{border:2px solid var(--outline)}
.tier .badge{position:absolute;top:-14px;left:22px;height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:var(--tint);color:var(--tint-text);font-size:12px;font-weight:500}
.tier h3{font-size:24px;margin:0}
.price{font-size:clamp(40px,10vw,52px);font-weight:500;letter-spacing:-.045em;line-height:1;margin:10px 0 4px;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px}
.price small{white-space:nowrap;font-size:16px;font-weight:500;letter-spacing:0;color:var(--secondary)}
.per{font-size:13px;color:var(--secondary);min-height:20px;margin-bottom:16px}
.tier ul{margin:0 0 22px;padding:0;list-style:none;flex:1}
.tier .tnote{font-size:13px;color:var(--secondary);margin:-8px 0 18px}
.tier li{padding:9px 0 9px 28px;border-top:1px solid var(--hairline);position:relative;font-size:15px}
.tier li::before{content:"";position:absolute;left:4px;top:15px;width:8px;height:13px;border:solid var(--purple);border-width:0 3px 3px 0;transform:rotate(45deg) scale(.7)}
.cmp-link{margin-top:20px}
.blk{width:100%}
@media(min-width:1000px){.tiers{grid-template-columns:repeat(3,1fr);align-items:stretch}.price{font-size:44px}}

/* Magazine / posts */
.mag-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.mag-head h2{margin:0}
.mag-nav{display:flex;align-items:center;gap:10px}
.mag-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--hairline);background:#fff;cursor:pointer;font-size:16px}
.link-more{font-size:14px;font-weight:500;color:var(--purple);margin-right:6px}
.mag-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:6px}
.mag-track::-webkit-scrollbar{display:none}
.mag-track .post-card{flex:0 0 280px;scroll-snap-align:start}
.post-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:640px){.post-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:960px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:16px;overflow:hidden;background:var(--ivory);text-decoration:none}
.post-card .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--tint)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.post-card:hover .thumb img{transform:scale(1.05)}
.thumb-ph{height:100%;display:flex;align-items:center;justify-content:center}
.post-card .body{padding:16px;display:flex;flex-direction:column;gap:6px}
.post-card .cat{font-size:12px;font-weight:500;color:var(--deep)}
.post-card .title{font-size:16px;font-weight:600;line-height:1.35}
.post-card .sum{font-size:14px;color:var(--secondary);margin:0}
/* Learn previews stop after a few lines with "…" in every language (Chinese summaries were tall blocks) */
.post-card .sum,.lx-card-sum{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.lx-sum{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.post-card .meta{font-size:12px;color:var(--muted)}

/* Newsletter */
.nl-card{background:linear-gradient(135deg,var(--deep),var(--pink));border-radius:24px;padding:48px 24px;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.nl-card h2{margin:0;max-width:520px}.nl-card>p{margin:0;max-width:460px;color:rgba(255,255,255,.88)}
.nl-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;max-width:460px;margin:8px auto 0}
.nl-form input[type=email]{flex:1;min-width:200px;height:52px;border-radius:999px;border:1px solid var(--outline);padding:0 20px;font:15px var(--font);background:#fff;color:var(--ink)}
.nl-form button{height:52px;padding:0 26px;border-radius:999px;border:0;background:var(--ink);color:#fff;font:500 15px var(--font);cursor:pointer}
.consent{width:100%;margin:2px 0 0;font-size:12px}
.nl-card .consent,.nl-card .form-msg{color:rgba(255,255,255,.85)}
.nl-card .form-msg.ok,.nl-card .form-msg.err{background:rgba(255,255,255,.16);color:#fff}

/* Final CTA */
.final{position:relative;padding:112px 0;overflow:hidden;text-align:center;color:#fff}
.final-bg,.final-scrim{position:absolute;inset:0}.final-bg img{width:100%;height:100%;object-fit:cover}
.final-scrim{background:linear-gradient(180deg,rgba(91,53,131,.9),rgba(212,86,142,.88))}
.final-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
.final h2{font-size:clamp(40px,9vw,96px);line-height:.95;letter-spacing:-.03em;max-width:720px;margin:0}.final h2 em{font-style:normal;font-weight:400}
.final p{margin:0 0 12px;font-size:17px;color:rgba(255,255,255,.9)}

/* Inner pages */
.page-head{padding:56px 0 24px}
.page-head h1{font-size:clamp(32px,5vw,52px);max-width:860px}
.page-head .lead{font-size:18px;color:var(--secondary);max-width:680px}
.page-head.center .lead{margin-inline:auto}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;font-size:13px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px}.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--purple)}
.prose{font-size:17px;line-height:1.7}
.prose h2{font-size:26px;margin:1.6em 0 .5em}.prose h3{font-size:20px;margin:1.4em 0 .4em}
.prose a{color:var(--deep)}.prose img{border-radius:12px;margin:1em 0}
.prose ul,.prose ol{padding-left:1.3em}.prose blockquote{margin:1.2em 0;padding:.2em 0 .2em 1.1em;border-left:3px solid var(--outline);color:var(--secondary)}
.prose table{border-collapse:collapse;width:100%}.prose td,.prose th{border:1px solid var(--hairline);padding:8px 10px}
.narrow-block{max-width:760px;margin-bottom:32px}
.two-col{display:grid;gap:36px;grid-template-columns:1fr}
@media(min-width:900px){.two-col{grid-template-columns:1.4fr 1fr;gap:56px}.two-col.top{align-items:start}}
.card-panel{background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:24px}
@media(min-width:900px){.sticky-form{position:sticky;top:88px}}
.lead-img{width:100%;border-radius:16px;margin-bottom:24px}
.faq details{background:transparent;border:0;border-top:1px solid var(--hairline);margin-bottom:0;padding:0}
.faq details:last-child{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;min-height:64px;padding:12px 0;font-weight:600;font-size:18px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:28px;font-weight:400;color:var(--purple);line-height:1}.faq details[open] summary::after{content:"\2212"}
.faq .prose{font-size:15px;padding-bottom:12px}

/* Forms */
.lead-form label{display:block;margin-bottom:14px}.lead-form label span{display:block;font-size:13px;font-weight:500;margin-bottom:4px}
.fgrid{display:grid;gap:0 16px;grid-template-columns:1fr}@media(min-width:600px){.lead-form .fgrid{grid-template-columns:1fr 1fr}.sticky-form .fgrid{grid-template-columns:1fr}}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;padding:12px 14px;border:1px solid var(--outline);border-radius:12px;font:15px var(--font);background:#fff;color:var(--ink)}
.form-msg{padding:12px 16px;border-radius:12px;margin:0 0 14px;font-size:14px}.form-msg.ok{background:#ECF8E6;color:#2f6a1e}.form-msg.err{background:#FDE6E6;color:#A82525}
.cf-turnstile{margin:8px 0}

/* Learn */
.learn-tools{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-bottom:28px}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-link{height:34px;padding:0 16px;border-radius:999px;border:1px solid var(--hairline);background:#fff;display:inline-flex;align-items:center;font-size:13px;text-decoration:none}
.chip-link.on{background:var(--purple);border-color:var(--purple);color:#fff}
.search{display:flex;gap:8px}.search input{height:36px;padding:0 14px;border:1px solid var(--outline);border-radius:999px;font:14px var(--font);min-width:0;background:#fff}
.search.big{margin-bottom:20px;max-width:480px}.search.big input{flex:1}
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:32px}
.article-hero{width:100%;border-radius:16px;margin:8px 0 28px}
.cat-link{font-size:13px;font-weight:500;color:var(--deep);text-decoration:none}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--secondary)}
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}.avatar-lg{width:72px;height:72px;border-radius:50%;object-fit:cover}
.author-head{display:flex;gap:18px;align-items:center}
.notice{background:var(--tint);color:var(--tint-text);border-radius:10px;padding:10px 14px;font-size:14px;margin-top:14px}
.tts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:10px 14px;margin-bottom:24px;font-size:14px}
.tts[hidden]{display:none}
.tts button{height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--outline);background:#fff;color:var(--tint-text);font:500 13px var(--font);cursor:pointer}
.tts select{height:32px;border:1px solid var(--outline);border-radius:8px;font:13px var(--font)}
.tags{font-size:14px;color:var(--secondary)}.tags a{margin-right:8px;text-decoration:none;color:var(--deep)}
.author-box{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:24px;margin-top:32px}
.author-box .avatar-lg{flex:none;width:88px;height:88px}
.avatar-ph{display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--deep);font:500 36px var(--serif)}
.author-box p{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--secondary)}
.author-more{align-self:flex-start;margin-top:10px;font-size:13px;font-weight:600;color:var(--deep);text-decoration:none}.author-more:hover{color:var(--purple)}
@media(max-width:520px){.author-box{flex-direction:column;gap:14px}}
/* End of an article: one white box, about the author then "Keep practising" (same type as the bio) with its 3 buttons */
.post-end{margin-top:32px;background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:24px}
.post-end .author-box{margin:0;padding:0;border:0;border-radius:0;background:none}
.post-end .author-box+.post-cta{margin-top:22px;padding-top:22px;border-top:1px solid var(--hairline)}
.post-cta h3{margin:0 0 4px;font:600 17px/1.4 var(--font);color:var(--ink)}
.post-cta>p:not(.cta-row):not(.offer){margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--secondary)}
@media(min-width:521px){.post-end .author-box+.post-cta{padding-left:108px}} /* lines up with the bio, past the 88px photo */
/* Article-end links (View Live Classes | Explore Corporate | Explore 1-on-1): one purple underline that slides to the
   hovered link and, left alone, walks along them left to right (site.js adds .cta-bar) */
.cta-links{position:relative;gap:6px 14px;font-size:15px;font-weight:500}
.cta-links a{color:var(--purple);text-decoration:none;padding:4px 0}
.cta-links a:hover{color:var(--pressed)}
.cta-links .sep{color:var(--outline)}
.cta-bar{position:absolute;left:0;top:0;height:2px;border-radius:2px;background:var(--purple);pointer-events:none;opacity:0;transition:transform .5s cubic-bezier(.3,.7,.2,1),width .5s cubic-bezier(.3,.7,.2,1),opacity .25s}
@media(prefers-reduced-motion:reduce){.cta-bar{transition:opacity .25s}}
@media(max-width:520px){.cta-links{flex-direction:column;align-items:flex-start;gap:4px}.cta-links .sep{display:none}}
.offer{font-size:14px;margin:8px 0 0}

/* Footer */
.site-footer{background:#1A1816;color:rgba(255,255,255,.7);padding:56px 0 28px}
.foot-newsletter{display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center;padding-bottom:44px;margin-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-newsletter h2{color:#fff;margin:0 0 6px;font-size:clamp(22px,3.6vw,30px)}
.foot-newsletter>div>p{margin:0;max-width:460px;color:rgba(255,255,255,.7)}
.foot-newsletter .nl-form{max-width:460px}
.foot-newsletter .nl-form button{background:#fff;color:var(--ink)}.foot-newsletter .nl-form button:hover{background:var(--tint)}
.foot-newsletter .consent,.foot-newsletter .form-msg{color:rgba(255,255,255,.6)}
.foot-newsletter .form-msg.ok,.foot-newsletter .form-msg.err{background:rgba(255,255,255,.1);color:#fff;padding:8px 14px;border-radius:10px}
@media(min-width:800px){.foot-newsletter{flex-direction:row;justify-content:space-between;text-align:left}.foot-newsletter>div>p{margin:0}}
.foot-grid{display:grid;gap:32px;grid-template-columns:1fr 1fr;margin-bottom:36px}@media(min-width:800px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.foot-grid>div:first-child{grid-column:1/-1}@media(min-width:800px){.foot-grid>div:first-child{grid-column:auto}}
.site-footer .flogo{display:flex;align-items:center;gap:8px;margin-bottom:14px;text-decoration:none}
.site-footer .wordmark{font-size:18px;font-weight:600;color:#fff}
.site-footer .tag{font-size:13px;line-height:1.6;max-width:260px}
.site-footer h4{font-size:13px;font-weight:500;color:rgba(255,255,255,.62);margin:0 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.site-footer ul a{font-size:14px;color:rgba(255,255,255,.75);text-decoration:none}.site-footer ul a:hover{color:#fff}
.site-footer ul a small{display:block;font-size:12px;color:rgba(255,255,255,.5);margin-top:2px}
#service{scroll-margin-top:90px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.62)}
.foot-bottom a{color:rgba(255,255,255,.7);text-decoration:none}.foot-bottom a:hover{color:#fff}
.fbr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}

/* Sticky mobile CTA */
/* Phones, Home and App: "Ready to start speaking?" drops down under the nav row once the hero has scrolled by (site.js), like the day bar on how-it-works/ */
.sticky-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px;max-height:0;overflow:hidden;visibility:hidden;padding:0 8px 0 16px;border-top:1px solid transparent;transition:max-height .3s ease,border-color .3s,visibility 0s .3s}
.sticky-cta.show,.st:checked~.site-header .sv-row{max-height:52px;visibility:visible;border-top-color:var(--hairline);transition:max-height .3s ease,border-color .3s}
/* Services open: its row takes the place of the page's own row (Learn topics, programs), so the two don't stack */
@media(min-width:900px){.st:checked~.site-header .sticky-cta:not(.sv-row){max-height:0;visibility:hidden;border-top-color:transparent}}
.nav-r{font-size:.6em;line-height:0;margin-left:1px} /* the ® after Learn in the nav */
.sticky-cta span{font-size:13px;font-weight:500}
.mt:checked~.site-header .sticky-cta{display:none}
@media(min-width:900px){.sticky-cta{display:none}}
/* Services row (desktop only): opened by the Services toggle in the bar */
.sticky-cta.sv-row{display:none;justify-content:center;padding:0 8px}
@media(min-width:900px){.sticky-cta.sv-row{display:flex}}
.sv-row a{padding:8px 14px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
.sv-row a:hover,.sv-row a:focus-visible,.sv-row a[aria-current]{color:var(--purple)}
@media(prefers-reduced-motion:reduce){.menu,.sticky-cta,.burger span,.sv-btn svg,.nav-pill{transition:none!important}.nav-pill *{animation:none!important}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kb-img,.live-dot{animation:none}
  .js .reveal,.js .reveal-stagger>*,.js .reveal-pop>*{opacity:1;transform:none;transition:none}
  .dotwall .d{opacity:1;transform:none;animation:none!important}
}

/* Learn home (magazine layout) */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lx-lead{padding:36px 0 8px}
.lx-lead-grid{display:grid;gap:24px;align-items:center}
.lx-kicker{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--deep);margin-bottom:14px}
.lx-kicker a{text-decoration:none}.lx-kicker a:hover{color:var(--purple)}
.lx-lead h2{font-size:clamp(30px,4.6vw,52px);letter-spacing:-.025em;line-height:1.08;margin:0 0 16px}
.lx-lead h2 a{text-decoration:none}.lx-lead h2 a:hover{color:var(--deep)}
.lx-sum{font-size:16px;color:var(--secondary);margin:0 0 16px;max-width:46ch}
.lx-meta{font-size:13px;color:var(--muted)}
.lx-read{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:500;color:var(--purple);text-decoration:none}
.lx-read:hover{color:var(--pressed)}
.lx-lead-img,.lx-feat-img,.lx-card-img{display:block;overflow:hidden;background:var(--tint)}
.lx-lead-img{order:-1;border-radius:20px;aspect-ratio:4/3} /* phones: image above the headline, so it never sits right on top of the Featured image below */
.lx-lead-img img,.lx-feat-img img,.lx-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.lx-lead-img:hover img,.lx-feat:hover .lx-feat-img img,.lx-card:hover .lx-card-img img{transform:scale(1.04)}
.lx-lead-img picture,.lx-feat-img picture,.lx-card-img picture{display:contents}
.lx-sec{padding:40px 0 0}
.lx-label{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
.lx-label::after{content:"";flex:1;height:1px;background:var(--hairline)}
.lx-label-row{display:flex;align-items:center;gap:16px;margin-bottom:18px}.lx-label-row .lx-label{flex:1;margin:0}.lx-label-row .link-more{margin:0;white-space:nowrap}
.lx-cat{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--deep);margin-bottom:8px}
.lx-go{color:var(--ink);display:inline-flex;transition:transform .2s,color .2s}
a:hover>*>.lx-meta-row .lx-go,a:hover>.lx-go{transform:translateX(3px);color:var(--purple)}
.lx-meta-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto}
.lx-feat{display:grid;gap:20px;text-decoration:none;align-items:center}
.lx-feat-img{border-radius:18px;aspect-ratio:16/10}
.lx-feat-text{display:flex;flex-direction:column}
.lx-feat h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.2;margin:0 0 12px}
.lx-feat .lx-sum{font-size:15px}
.lx-feat .lx-meta-row{margin-top:4px}
.lx-cards{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:0 20px 4px}
.lx-cards::-webkit-scrollbar{display:none}
.lx-card{flex:0 0 78%;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);border-radius:16px;overflow:hidden;text-decoration:none;transition:box-shadow .2s,transform .2s}
.lx-card:hover{box-shadow:0 12px 30px rgba(26,24,22,.08);transform:translateY(-2px)}
.lx-card-img{aspect-ratio:4/3}
.lx-card-body{display:flex;flex-direction:column;flex:1;padding:16px}
.lx-card-title{font-size:17px;font-weight:600;line-height:1.3;margin-bottom:8px}
.lx-card-sum{font-size:13px;color:var(--secondary);margin:0 0 14px}
/* Phones: two rows that swipe sideways; the right edge fades out to show there is more (the 56px end padding clears the fade) */
.lx-topics{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none;margin:-2px -20px;padding:2px 56px 2px 20px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.lx-topics::-webkit-scrollbar{display:none}
.lx-topics>.lx-topic{min-width:220px} /* columns fit the longest name, never narrower than this */
.lx-topic{display:flex;align-items:center;gap:12px;padding:16px 18px;background:#fff;border:1px solid var(--hairline);border-radius:14px;text-decoration:none;scroll-snap-align:start;transition:border-color .2s,background .2s} /* one row: icon, name, arrow */
.lx-topic:hover{border-color:var(--outline);background:var(--tint)}
.lx-topic-ic{flex:none;display:flex;color:var(--deep)}
.lx-topic-name{flex:1;min-width:0;font-size:14px;font-weight:500}
.lx-topic .lx-go{flex:none}
.lx-cta{position:relative;overflow:hidden;margin-top:40px;background:linear-gradient(165deg,var(--deep),#3d2260);color:#fff;min-height:260px;display:flex;align-items:center}
.lx-cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.lx-cta::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(45,24,72,.92) 0%,rgba(45,24,72,.7) 50%,rgba(45,24,72,.15) 100%)}
.lx-cta>.wrap{position:relative;z-index:2;width:100%}
.lx-cta-body{padding:56px 0;max-width:480px}
.lx-cta h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin:0 0 10px}
.lx-cta p{font-size:15px;color:rgba(255,255,255,.82);margin:0 0 22px}
@media(min-width:640px){
  .lx-cards{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible;margin:0;padding:0}
  .lx-topics{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0;-webkit-mask-image:none;mask-image:none}
  .lx-topics>.lx-topic{min-width:auto}
}
@media(min-width:900px){
  .lx-lead{padding:56px 0 16px}
  .lx-lead-grid{grid-template-columns:1fr 1.15fr;gap:56px}
  .lx-lead-img{order:0}
  .lx-feat{grid-template-columns:1.15fr 1fr;gap:48px}
  .lx-sec{padding-top:56px}
  .lx-cta{margin-top:56px}.lx-cta-body{padding:88px 0}
}
@media(min-width:1000px){
  .lx-cards{grid-template-columns:repeat(4,1fr)}
}
/* Learn pages: room above the footer whichever section comes last (a category page can end on its feature story) */
.mag main>:last-child:not(.pa),.pa>:last-child{padding-bottom:72px}
@media(min-width:900px){.mag main>:last-child:not(.pa),.pa>:last-child{padding-bottom:96px}}
@media(prefers-reduced-motion:reduce){.lx-lead-img img,.lx-feat-img img,.lx-card-img img,.lx-card,.lx-go{transition:none}}

/* Learn masthead (every Learn page): newspaper nameplate, dateline + search. The topic nav (.lbar-cats) is a row
   inside the nav pill, styled with the Local programs tabs: it drops down once the masthead has scrolled by (site.js)
   or while the pointer or keyboard focus is on the pill. */
@media(hover:hover){.nav-pill:hover .lbar-cats,.nav-pill:focus-within .lbar-cats{max-height:52px;visibility:visible;border-top-color:var(--hairline);transition:max-height .3s ease,border-color .3s}}
.lbar{background:var(--ivory)}
.lbar-name{display:block;padding:22px 0 14px;text-align:center;text-decoration:none;color:#000;font-family:var(--serif);font-weight:600;font-size:clamp(40px,12vw,128px);line-height:.95;letter-spacing:-.035em;white-space:nowrap}
.lbar-wm{font-family:var(--font);font-weight:600;font-size:.86em;letter-spacing:-.045em}
.lbar-ed{font-style:italic;font-weight:500;margin-left:-.1em}
.lbar-ed sup{font-size:.2em;font-style:normal;vertical-align:top;margin-left:.1em}
/* A category page's masthead (editorial split): "Section 03" and its name with a pink dot; the description and
   "Start here" beside it on wide screens, under it on phones. The dot is drawn, so it suits every language.
   The name is always one line: learn_bar.php gives its width in ems (--em, a slight overestimate), and the size is
   the space / that width, up to 104px. */
.lbar-split{display:grid;gap:16px 40px;padding:4px 0 24px}
.lbar-head{container-type:inline-size;min-width:0}
.lbar-kick{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-text);margin-bottom:6px}
.lbar-sec{margin:0;white-space:nowrap;font:500 clamp(28px,8vw,104px)/1.08 var(--serif);letter-spacing:-.03em;color:#000} /* 1.08: room for Chinese and Japanese glyphs */
@supports (width:1cqw){.lbar-sec{font-size:min(104px,calc(100cqw / var(--em,8)))}}
.lbar-sec::after{content:"";display:inline-block;width:.14em;height:.14em;margin-left:.05em;border-radius:50%;background:var(--pink)}
.lbar-about p{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--secondary)}
.lbar-kick-q{display:block;color:var(--muted)}
.lbar-start{font:500 19px/1.3 var(--serif);color:var(--ink);text-decoration:none}.lbar-start:hover{color:var(--purple)}
@media(min-width:900px){.lbar-split{padding:8px 0 30px}.lbar-split.has-about{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end}.lbar-about{border-left:1px solid var(--hairline);padding-left:28px}}
.lbar-line{position:relative;display:flex;align-items:center;gap:16px;min-height:52px;border-top:1px solid #000;border-bottom:3px double #000}
.lbar-info{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#000;padding:8px 0}
.lbar-loc,.lbar-wx{display:inline-flex;align-items:center;gap:6px}
.lbar-date,.lbar-date:hover{color:inherit;text-decoration:none;cursor:text}
.lbar-loc[hidden],.lbar-wx[hidden]{display:none}
.lbar-wx b{font-weight:600}
.lbar-search{margin-left:auto;flex:none;display:flex;align-items:center;height:38px;width:38px;border:1px solid #000;border-radius:999px;background:#fff;overflow:hidden;transition:border-color .2s}
.lbar-search:focus-within{border-color:var(--purple)}
.lbar-ic{flex:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#000}
.lbar-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;font:14px var(--font);color:var(--ink);outline:none}
.lbar-search input::-webkit-search-cancel-button{display:none}
.lbar-go{display:none;flex:none;height:30px;margin-right:3px;padding:0 14px;border:0;border-radius:999px;background:#000;color:#fff;font:500 13px var(--font);cursor:pointer}
.lbar-go:hover{background:var(--deep)}
.lbar-search:focus-within,.lbar-search.has-q{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:auto;z-index:2}
.lbar-search:focus-within .lbar-go,.lbar-search.has-q .lbar-go{display:block}
/* Only the open search hides the dateline: hiding it on any focus swallowed taps on the date link (the secret admin login). */
.lbar-line:has(.lbar-search:focus-within) .lbar-info,.lbar-line:has(.has-q) .lbar-info{visibility:hidden}
@media(min-width:900px){
  .lbar-name{padding:34px 0 22px}
  .lbar-line{min-height:56px}
  .lbar-info{font-size:12px;gap:4px 28px}
  .lbar-search,.lbar-search:focus-within,.lbar-search.has-q{position:static;transform:none;width:320px}
  .lbar-go{display:block}
  .lbar-line:has(.lbar-search:focus-within) .lbar-info,.lbar-line:has(.has-q) .lbar-info{visibility:visible}
}

/* Magazine typography on Learn pages */
.mag .page-head{padding-top:40px}
.mag .page-head h1,.mag .article h1,.mag .prose h2,.mag .prose h3,.mag .post-card .title,
.lx-lead h2,.lx-feat h3,.lx-card-title,.lx-cta h2{font-family:var(--serif);font-weight:500;letter-spacing:-.012em}
.mag .page-head h1{font-size:clamp(36px,5.6vw,60px);line-height:1.05}
.mag .post-card .title{font-size:20px;line-height:1.2}
.lx-lead h2{font-size:clamp(36px,5.4vw,64px);line-height:1.02}
.lx-feat h3{font-size:clamp(26px,3.2vw,38px);line-height:1.1}
.lx-card-title{font-size:21px;line-height:1.18}
.lx-cta h2{font-size:clamp(28px,3.4vw,40px)}

/* Article page (magazine layout) */
.pa{padding:28px 0 0}
.pa-grid{display:grid;gap:40px}
.pa-main{min-width:0}
.pa-hero{margin:0 0 26px}
.pa-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.pa-hero picture{display:contents}
.pa-hero figcaption,.vd-img figcaption{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.5}
.pa-kicker{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--deep);margin-bottom:12px}
.pa-kicker a{text-decoration:none}.pa-kicker a:hover{color:var(--purple)}
.pa-head h1{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;font-size:clamp(30px,4.4vw,48px);line-height:1.08;margin:0 0 14px}
.pa-lead{font-size:17px;line-height:1.6;color:var(--secondary);margin:0 0 22px;max-width:62ch}
.pa-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--hairline)}
.pa-by{display:flex;align-items:center;gap:12px}
.pa-by img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.pa-by>div{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--muted)}
.pa-by svg{width:15px;height:15px;margin-right:5px;vertical-align:-2px} /* the clock before the read time */
.pa-author{font-size:16px;font-weight:600;color:var(--ink);text-decoration:none}.pa-author:hover{color:var(--purple)}
/* Listen player */
.pa .tts{display:flex;align-items:center;gap:12px;margin:0;padding:0;background:none;border:0;border-radius:0;font-size:12px;color:var(--secondary);min-width:280px}
.pa .tts[hidden]{display:none}
.tts .tts-btn{flex:none;width:38px;height:38px;padding:0;border-radius:50%;border:0;background:linear-gradient(135deg,var(--deep),var(--pink));color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.tts .tts-btn:hover{filter:brightness(.9)}
.tts .i-pause,.tts.playing .i-play{display:none}.tts.playing .i-pause{display:block}
.tts-body{flex:1;display:flex;flex-direction:column;gap:6px;min-width:90px}
.tts-track{height:3px;background:var(--hairline);border-radius:3px;overflow:hidden}
.tts-track i{display:block;height:100%;width:0;background:var(--ink);transition:width .4s}
.tts-time{white-space:nowrap;font-variant-numeric:tabular-nums}
/* Read-along: the sentence being spoken, and the word where the voice reports word boundaries (site.js) */
::highlight(tts-say){background-color:rgba(113,91,131,.14)}
::highlight(tts-word){background-color:rgba(113,91,131,.34);color:var(--ink)}
.tts-on{background:rgba(113,91,131,.1);border-radius:4px} /* browsers without CSS highlights: the whole paragraph */
.pa .tts select{height:28px;border:1px solid var(--hairline);border-radius:999px;background:#fff;font:12px var(--font);padding:0 6px}
.pa-toc-m{margin:20px 0 0;border:1px solid var(--hairline);border-radius:12px;background:#fff;padding:12px 16px}
.pa-toc-m summary{cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.pa-toc-m .pa-toc{margin-top:10px}
/* Body */
.pa .article-body{margin-top:28px}
.pa .article-body>p:first-child::first-letter{float:left;font-family:var(--serif);font-weight:500;font-size:4.3em;line-height:.82;padding:6px 10px 0 0;color:var(--deep)}
.pa .prose h2{font-size:clamp(24px,2.6vw,30px);line-height:1.2;margin:1.7em 0 .5em;scroll-margin-top:142px;clear:both}
.pa .prose h3{font-size:21px}
/* Quote (❝): a purple line on the left, no box and no quote mark, so it can't be taken for the lilac CTA box */
.pa .prose blockquote{margin:1.6em 0;padding:2px 0 2px 24px;border:0;border-left:3px solid var(--purple);background:none;border-radius:0;color:var(--ink)}
.pa .prose .vd-pull blockquote::before{content:"\201C";display:block;font-family:var(--serif);font-size:56px;line-height:.6;color:var(--purple);margin-bottom:6px}
.pa .prose blockquote p{font-family:var(--serif);font-size:23px;line-height:1.3;margin:0 0 .5em}
.pa .prose blockquote p:last-child{margin-bottom:0} /* every line the same size: a quote's last line is not a caption */
/* Pull quote block (editor): on wide screens a box on the right with the text flowing beside it; full width on phones */
.pa .prose .vd-pull{margin:1.6em 0;padding:24px 26px;background:#F3EDF5;border-radius:6px}
.pa .prose .vd-pull blockquote{margin:0;padding:0;border:0;background:none;border-radius:0}
.pa .prose .vd-pull figcaption{margin-top:14px;font-size:12px;color:var(--secondary)}
/* Sections block: an idea split into 2, 3 or 4 numbered parts */
.vd-cols{display:grid;grid-template-columns:1fr;gap:0;margin:1.6em 0;counter-reset:vdc;clear:both}
.vd-col{counter-increment:vdc;padding:18px 0;border-top:1px solid var(--hairline)}
.vd-col::before{content:counter(vdc,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:26px;padding:0 8px;margin-bottom:12px;border:1px solid var(--outline);border-radius:999px;font:500 12px var(--font);color:var(--deep)}
.prose .vd-col h4{font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.25;margin:0 0 8px}
.prose .vd-col p{font-size:14px;line-height:1.6;color:var(--secondary);margin:0 0 .6em}
.prose .vd-col p:last-child{margin-bottom:0}
@media(min-width:600px){
  .vd-cols-2,.vd-cols-4{grid-template-columns:repeat(2,1fr)}
  .vd-cols-3{grid-template-columns:repeat(3,1fr)}
  .vd-cols .vd-col{padding:18px 18px 18px 0}
  .vd-cols-2 .vd-col:nth-child(2n),.vd-cols-4 .vd-col:nth-child(2n),.vd-cols-3 .vd-col:not(:first-child){padding-left:18px;border-left:1px solid var(--hairline)}
}
@media(min-width:900px){
  .vd-cols-4{grid-template-columns:repeat(4,1fr)}
  .vd-cols-4 .vd-col:not(:first-child){padding-left:18px;border-left:1px solid var(--hairline)}
}
/* Image block (with optional "Explain your image") */
.vd-img{margin:1.8em 0;clear:both}
.prose .vd-img img{width:100%;border-radius:6px;margin:0}
.vd-img figure{margin:0}
.vd-img-explain{display:grid;gap:18px}
.vd-explain h3{margin-top:0}
.prose .vd-explain h3{font-size:clamp(22px,2.4vw,26px);margin:0 0 10px}
.prose .vd-explain p{font-size:15px;color:var(--secondary)}
@media(min-width:800px){.vd-img-explain{grid-template-columns:1.15fr 1fr;gap:32px;align-items:center}}
/* Video blocks: YouTube / TikTok / Instagram (players built by app/Services/Embed.php) */
figure.vd-video{margin:1.8em 0;clear:both}
.vd-video-f{margin:0}
.vd-frame{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#141210}
.vd-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vd-tall .vd-frame{aspect-ratio:9/16}
figure.vd-video.vd-tall,.vd-video-explain .vd-tall{width:100%;max-width:340px;margin-left:auto;margin-right:auto}
.vd-v-instagram .vd-frame{aspect-ratio:auto;background:#fff;border:1px solid var(--hairline)}
.vd-v-instagram .vd-frame iframe{position:static;display:block;height:640px}
figure.vd-video.vd-v-instagram,.vd-video-explain .vd-v-instagram{max-width:400px}
.vd-poster{position:absolute;inset:0;display:block;cursor:pointer}
.prose .vd-poster img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;transition:transform .6s ease}
.vd-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,24,22,0) 50%,rgba(26,24,22,.38))}
.vd-play{position:absolute;left:50%;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--purple);box-shadow:0 8px 24px rgba(26,24,22,.25);transition:transform .25s ease,background .25s,color .25s}
.vd-play svg{margin-left:3px}
.vd-poster:hover .vd-play,.vd-poster:focus-visible .vd-play{transform:scale(1.08);background:var(--purple);color:#fff}
.vd-poster:hover img{transform:scale(1.03)}
.vd-poster:focus-visible{outline:3px solid var(--purple);outline-offset:-3px}
.vd-video figcaption{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.5}
.vd-tall figcaption{text-align:center}
.vd-video-explain{display:grid;gap:18px;margin:1.8em 0;clear:both}
@media(min-width:800px){
  .vd-video-explain{grid-template-columns:1.15fr 1fr;gap:32px;align-items:center}
  .vd-video-explain:has(.vd-tall){grid-template-columns:minmax(0,300px) 1fr}
  .vd-video-explain:has(.vd-v-instagram){grid-template-columns:minmax(0,360px) 1fr}
  .vd-video-explain .vd-tall figcaption{text-align:left}
}
@media(prefers-reduced-motion:reduce){.prose .vd-poster img,.vd-play{transition:none}.vd-poster:hover img{transform:none}}
/* Key phrases block (listen buttons added by site.js) */
.vd-vocab{margin:1.8em 0;padding:20px 24px 8px;background:#F3EDF5;border-radius:6px;clear:both}
.prose .vd-vocab h3{font:600 11px/1.4 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--deep);margin:0 0 4px}
.vd-term{padding:14px 0;border-top:1px solid rgba(91,53,131,.14)}
.vd-vocab h3+.vd-term,.vd-term:first-child{border-top:0}
.prose .vd-term h4{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.25;margin:0 0 4px}
.vd-mean{font-size:15px;line-height:1.55;color:var(--secondary)}
.vd-ex{margin-top:6px;padding-left:12px;border-left:2px solid var(--outline);font-size:15px;font-style:italic;line-height:1.55}
.vd-say{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--outline);border-radius:50%;background:#fff;color:var(--purple);cursor:pointer;transition:background .2s,color .2s}
.vd-say:hover,.vd-say.on{background:var(--purple);border-color:var(--purple);color:#fff}
@media(min-width:700px){
  .vd-term{display:grid;grid-template-columns:minmax(0,36%) 1fr;column-gap:28px}
  .vd-term>*{grid-column:2}
  .prose .vd-term h4{grid-column:1;grid-row:1/span 2;margin:0}
}
.pa-tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.pa-tags a{font-size:13px;padding:4px 12px;border:1px solid var(--hairline);border-radius:999px;background:#fff;text-decoration:none;color:var(--tint-text)}
.pa-tags a:hover{border-color:var(--outline);background:var(--tint)}
.pa .author-box>div{display:flex;flex-direction:column;gap:2px}
.pa .post-end{margin-top:28px;margin-bottom:40px}
/* Sidebar */
.pa-side-h{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.pa-toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pa-toc a{display:flex;gap:12px;padding:6px 0;font-size:13px;line-height:1.4;color:var(--secondary);text-decoration:none}
.pa-toc a span{flex:none;width:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.pa-toc a:hover,.pa-toc a.on{color:var(--deep)}.pa-toc a.on span{color:var(--deep)}
.pa-share{display:grid;grid-template-columns:repeat(2,max-content);gap:8px 40px;align-items:center;justify-items:start} /* phones: 2 x 2 */
.pa-share .pa-side-h{grid-column:1/-1;margin-bottom:4px}
.pa-share a,.pa-share button{display:inline-flex;align-items:center;gap:10px;padding:6px 0 6px 12px;font:13px var(--font);color:var(--secondary);text-decoration:none;background:none;border:0;cursor:pointer}
.pa-share a:hover,.pa-share button:hover{color:var(--deep)}
.pa-mins{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary)}
.pa-edit{color:var(--purple);text-decoration:none}.pa-edit:hover{text-decoration:underline}
.pa-side-in{display:flex;flex-direction:column;gap:28px;padding:24px 0 8px;border-top:1px solid var(--hairline)}
.pa-side-in>*{flex-shrink:0} /* never squash an item (it cut off the Instagram card's Follow button); a tall sidebar scrolls instead */
.pa-side nav{display:none}
@media(min-width:1000px){
  .pa{padding-top:36px}
  .pa-grid{grid-template-columns:minmax(0,1fr) 250px;gap:56px}
  .pa-side{border-left:1px solid var(--hairline);padding-left:28px}
  .pa-side-in{position:sticky;top:140px;max-height:calc(100vh - 164px);overflow-y:auto;scrollbar-width:none;border-top:0;padding:0 2px 2px 0;gap:32px} /* under the nav pill and its topic row; a sidebar taller than the screen still scrolls (wheel/touch), with no bar */
  .pa-side-in::-webkit-scrollbar{display:none}
  .pa-side .tts{flex:none;flex-wrap:wrap;row-gap:10px;min-width:0;padding:14px;background:#fff;border:1px solid var(--hairline);border-radius:14px;animation:nav-in .3s} /* the player, moved here by site.js on wide screens */
  .pa-side .tts-body{flex-basis:calc(100% - 50px)}
  .pa-side .tts select{margin-left:auto}
  .pa-side nav{display:block}
  .pa-share{grid-template-columns:1fr;gap:2px}
  .pa-toc-m{display:none}
  .pa .article-body>.vd-pull{float:right;width:44%;margin:.3em 0 1.2em 28px}
}

/* Instagram card (article sidebar): a plain ivory card in the page colour, no Instagram colours once the photo shows */
.ig-card{display:flex;flex-direction:column;gap:14px;padding:16px;background:var(--ivory);border:1px solid var(--hairline);border-radius:14px;position:relative;overflow:hidden}
/* Hidden until the reader scrolls down; site.js adds .in to fade it in (the partial's <noscript> shows it without JS) */
.ig-card:not(.in){opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
.ig-card.in{transition:opacity .8s ease}
@media(prefers-reduced-motion:reduce){.ig-card,.ig-card.in{transition:none}}
.ig-head{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.ig-photo{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid var(--hairline)}
.ig-logo{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.ig-name{display:flex;flex-direction:column;min-width:0}
.ig-name strong{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.ig-head:hover strong{color:var(--deep)}
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px} /* 8 posts: 2 x 4 */
.ig-grid a{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:4px;background:var(--tint)}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s,opacity .2s}
.ig-grid a:hover img{transform:scale(1.06);opacity:.9}
.ig-play{position:absolute;right:4px;top:4px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.ig-follow{display:flex;align-items:center;justify-content:center;height:38px;border-radius:999px;background:var(--purple);color:#fff;font-size:13px;font-weight:500;text-decoration:none}
.ig-follow:hover{background:var(--pressed)}

/* Service pages (1-on-1, interview, corporate, local programs, success stories) */
.sv-hero .hero-content{padding-top:110px}
.sv-hero h1{max-width:900px;font-size:clamp(36px,7vw,72px);letter-spacing:-.02em}
.sv-hero .lead{max-width:620px}
.sv-hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}
.sv-hero .crumbs ol{color:rgba(255,255,255,.75)}.sv-hero .crumbs a:hover{color:#fff}
.sv-hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.sv-hero-stat{display:flex;align-items:baseline;gap:10px;font-size:13px;color:rgba(255,255,255,.85)}
.sv-hero-stat strong{font-size:26px;line-height:1;color:#fff}
.sv-hero .sv-meta{margin:0}
.sv-hero .sv-meta li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff}
/* Stat cards on the hero photo (About): frosted glass like the pills, so the photo runs on behind them */
.sv-hero-stats{margin-top:32px}
.sv-hero .sv-stat{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sv-hero .sv-stat strong{color:#fff}
.sv-hero .sv-stat>span{color:rgba(255,255,255,.85)}
@media(max-width:799px){.sv-hero-stats{gap:10px;margin-top:24px}.sv-hero .sv-stat{padding:14px 16px}.sv-hero .sv-stat strong{font-size:28px;margin-bottom:6px}.sv-hero .sv-stat>span{font-size:13px}} /* stacked on phones: keep the hero short */
.sv-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.sv-meta{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.sv-meta li{padding:6px 14px;border-radius:999px;background:var(--tint);color:var(--tint-text);font-size:13px;font-weight:500}

/* Image slots: a photo, or a labelled placeholder until one is uploaded */
.sv-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.sv-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center;color:var(--tint-text);background:repeating-linear-gradient(135deg,#F1E9F7 0 14px,#EDE2F5 14px 28px);border:1px dashed var(--outline)}
.sv-ph strong{font-size:14px;font-weight:500;max-width:260px}
.sv-ph code{font-size:11px;color:var(--muted);word-break:break-all}
.sv-card,.sv-steps li{overflow:hidden}
.sv-card>.sv-img:first-child,.sv-steps li>.sv-img:first-child,.sv-day>.sv-img:first-child{width:calc(100% + 44px);max-width:none;margin:-24px -22px 12px;border-radius:0;aspect-ratio:16/10}
.sv-day{overflow:hidden}.sv-day>.sv-img:first-child{width:calc(100% + 40px);margin:-20px -20px 14px}
.sv-steps li.has-img{position:relative}
.sv-steps li.has-img::before{position:absolute;top:14px;left:14px;z-index:1;border:2px solid #fff}
.sv-mosaic{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.sv-mosaic>:first-child{grid-column:1/-1}
.sv-mosaic .sv-img{height:100%}
@media(min-width:800px){.sv-mosaic{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}.sv-mosaic>:first-child{grid-column:1;grid-row:1/3}.sv-mosaic>:not(:first-child){aspect-ratio:auto}}
.sv-split .sv-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto}
.sv-split .sv-mosaic>:first-child{grid-column:1/-1;grid-row:auto}
.sv-split .sv-mosaic>*{aspect-ratio:4/3}
/* Image slots with no photo yet render nothing: close the gaps they leave (a figure with a plain <img>, like the STAR chart, has a photo) */
.sv-split>figure:not(:has(img,.sv-img)):not(:has(.sv-stat-over)),.sv-mosaic:not(:has(.sv-img)){display:none}
@media(min-width:900px){.sv-split:has(>figure:not(:has(img,.sv-img)):not(:has(.sv-stat-over))),.sv-split:has(>.sv-mosaic:not(:has(.sv-img))){grid-template-columns:1fr}.sv-split:has(>figure:not(:has(img,.sv-img)):not(:has(.sv-stat-over)))>div,.sv-split:has(>.sv-mosaic:not(:has(.sv-img)))>div{max-width:760px}}
.sv-mosaic:has(>.sv-img:only-child){grid-template-columns:1fr}
@media(min-width:800px){.sv-mosaic:has(>.sv-img:only-child)>.sv-img{grid-row:auto}.sv-mosaic:has(>.sv-img:nth-child(2):last-child){grid-template-columns:1fr 1fr;grid-template-rows:auto}.sv-mosaic:has(>.sv-img:nth-child(2):last-child)>.sv-img{grid-column:auto;grid-row:auto;aspect-ratio:4/3}}
.sv-steps li.has-img:not(:has(>.sv-img))::before{position:static;border:0}
.sv-figure:not(:has(img,.sv-img)) .sv-stat-over{position:static;max-width:none;padding:24px 22px}
.sv-figure{position:relative;margin:0}
.sv-figure .sv-stat-over{position:absolute;left:16px;bottom:16px;max-width:260px;padding:14px 18px;border-radius:12px;background:#fff;border:1px solid var(--hairline);font-size:13px;color:var(--secondary)}
.sv-figure .sv-stat-over strong{display:block;font-size:28px;line-height:1.1;color:var(--deep)}
.sv-split .sv-stats{grid-template-columns:repeat(3,1fr);gap:10px}
.sv-split .sv-stat{padding:16px 14px}.sv-split .sv-stat strong{font-size:clamp(24px,3vw,32px)}
.sv-final h2{font-size:clamp(32px,6vw,60px);line-height:1.05;max-width:820px}

.sv-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:svs}
.sv-steps li{counter-increment:svs;padding:24px 22px;background:#fff;border:1px solid var(--hairline);border-radius:12px}
.sv-steps li::before{content:counter(svs);display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:14px;border-radius:50%;background:var(--purple);color:#fff;font-weight:600}
.sv-steps h3{margin:0 0 4px;font-size:18px}.sv-steps p{margin:0;font-size:14px;color:var(--secondary)}
.sec-white .sv-steps li{background:var(--ivory)}
@media(min-width:800px){.sv-steps{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.sv-steps.five{grid-template-columns:repeat(5,1fr)}}
/* About's journey: the steps as a timeline, numbered dots joined by a line instead of cards. A column of steps
   down to 1099px (the line runs down), one row of five above it (the line runs across) */
.sv-steps.timeline{gap:0}
.sv-steps.timeline li{position:relative;overflow:visible;padding:0 0 28px 60px;background:none;border:0;border-radius:0}
.sv-steps.timeline li::before{position:absolute;left:0;top:0;margin:0}
.sv-steps.timeline li:not(:last-child)::after{content:"";position:absolute;left:19px;top:48px;bottom:8px;width:2px;border-radius:2px}
/* The brand gradient (the logo's #5C3786 > #8A3E86 > #CB4D8A) runs through it: each dot is the next shade, each line
   blends from its dot's shade (--c) to the next one's (--n) */
.sv-steps.timeline li:nth-child(1){--c:#5C3786;--n:#733A86}
.sv-steps.timeline li:nth-child(2){--c:#733A86;--n:#8A3E86}
.sv-steps.timeline li:nth-child(3){--c:#8A3E86;--n:#AA4588}
.sv-steps.timeline li:nth-child(4){--c:#AA4588;--n:#CB4D8A}
.sv-steps.timeline li:nth-child(5){--c:#CB4D8A}
.sv-steps.timeline li::before{background:var(--c)}
.sv-steps.timeline li:not(:last-child)::after{background:linear-gradient(180deg,var(--c),var(--n))}
@media(min-width:800px) and (max-width:1099px){.sv-steps.timeline{grid-template-columns:1fr;max-width:720px}}
@media(min-width:1100px){
  .sv-steps.timeline{gap:24px}
  .sv-steps.timeline li{padding:56px 0 0}
  .sv-steps.timeline li:not(:last-child)::after{left:52px;right:-12px;top:19px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--c),var(--n))}
}
.sv-gap{margin-top:40px}.sv-gap-s{margin-top:24px}
.sv-note{margin:20px 0 0;padding:14px 18px;border-radius:12px;background:var(--tint);color:var(--tint-text);font-size:14px}
.sv-note.plain{padding:0;border-radius:0;background:none;color:var(--secondary)} /* the same note as plain text (About) */
.sv-stack{display:grid;gap:12px}
.sv-partner{width:240px;max-width:100%;margin-top:8px;mix-blend-mode:multiply}
.sv-split img.sv-tall{aspect-ratio:4/5;max-height:560px}

.sv-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sv-checks li{position:relative;padding-left:34px;font-size:15px;line-height:1.5}
.sv-checks li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B3583' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}
.sv-checks.two{gap:12px 28px}
@media(min-width:700px){.sv-checks.two{grid-template-columns:repeat(2,1fr)}}
.sv-checks.sm li{font-size:14px;color:var(--secondary)}

.sv-split{display:grid;gap:32px;align-items:center}
.sv-split>figure{margin:0}
.sv-split img{width:100%;border-radius:16px;object-fit:cover}
.sv-split h2{margin-bottom:14px}
.sv-split .body-lg{margin-bottom:20px}
@media(min-width:900px){.sv-split{grid-template-columns:1fr 1fr;gap:64px}.sv-split.rev>figure{order:2}}

.sv-cards{display:grid;gap:16px}
.sv-card{display:flex;flex-direction:column;gap:8px;padding:24px 22px;background:#fff;border:1px solid var(--hairline);border-radius:12px}
.sec-white .sv-card{background:var(--ivory)}
.sv-card h3{margin:0;font-size:18px}.sv-card p{margin:0;font-size:14px;color:var(--secondary)}
.sv-card .sv-sub{font-size:13px;font-weight:500;color:var(--deep)}
.sv-card .sv-checks{margin-top:8px}
.sv-card .sv-impact{margin-top:auto;padding-top:14px;border-top:1px solid var(--hairline);font-size:13px;color:var(--ink)}
.sv-card .sv-impact strong{color:var(--deep)}
.sv-h3{margin:0 0 20px;font-size:20px}.sv-h3.sv-gap{margin-top:40px}
.sv-card.sv-row{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.sv-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:6px;border-radius:50%;background:var(--tint);color:var(--deep)}
@media(min-width:700px){.sv-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.sv-cards.three{grid-template-columns:repeat(3,1fr)}.sv-cards.four{grid-template-columns:repeat(4,1fr)}}

.sv-stats{display:grid;gap:16px}
.sv-stat{padding:24px 22px;border-radius:12px;background:#fff;border:1px solid var(--hairline)}
.sec-white .sv-stat{background:var(--ivory)}
.sv-stat strong{display:block;font-size:clamp(36px,5vw,48px);line-height:1;letter-spacing:-.02em;color:var(--deep);margin-bottom:10px;font-variant-numeric:tabular-nums}
.sv-stat>span{font-size:14px;color:var(--secondary)}
@media(min-width:800px){.sv-stats{grid-template-columns:repeat(3,1fr)}}

.sv-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 36px}
.sv-split .sv-logos,.card-panel .sv-logos{justify-content:flex-start;gap:16px 28px}
.sv-logos img{height:44px;width:auto;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.75;mix-blend-mode:multiply}
.sv-logos.sv-creds img{filter:none;opacity:1}

.sv-quote{max-width:820px;margin:0 auto;text-align:center}
.sv-quote blockquote{margin:0 0 20px;font-size:clamp(18px,2.4vw,23px);line-height:1.55}
.sv-quote blockquote p{margin:0 0 .8em}
.sv-quote cite{font-style:normal;font-weight:600}
.sv-quote cite span{display:block;font-weight:400;font-size:14px;color:var(--secondary)}

.sv-band{padding:56px 0;background:linear-gradient(135deg,var(--deep),var(--pink));color:#fff;text-align:center}
.sv-band h2{max-width:760px;margin:0 auto 12px}
.sv-band p{max-width:640px;margin:0 auto 24px;color:rgba(255,255,255,.9)}
.sv-band .sv-actions{justify-content:center;margin-top:0}

.sv-anchor{scroll-margin-top:130px}

/* Local programs: the program tabs drop down as a row inside the nav pill once the hero has scrolled by (the phones'
   "Ready to start speaking?" row, on every screen). One program panel at a time, each opening with its own photo hero
   and sliding in from its side. Corporate training's section links (.corp-tabs) are the same row. */
.sticky-cta.lp-tabs,.sticky-cta.lbar-cats,.sticky-cta.corp-tabs{justify-content:center;padding:0 8px}
@media(min-width:900px){.sticky-cta.lp-tabs,.sticky-cta.lbar-cats,.sticky-cta.corp-tabs{display:flex}}
.lp-tabs ul,.lbar-cats ul,.corp-tabs ul{display:flex;gap:2px;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.lp-tabs ul::-webkit-scrollbar,.lbar-cats ul::-webkit-scrollbar,.corp-tabs ul::-webkit-scrollbar{display:none}
/* Cut off on a phone: the side with more tabs past it fades out (site.js sets .more-l / .more-r). */
.lp-tabs ul,.lbar-cats ul,.corp-tabs ul{--fl:0px;--fr:0px;-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
.lp-tabs ul.more-l,.lbar-cats ul.more-l,.corp-tabs ul.more-l{--fl:40px}
.lp-tabs ul.more-r,.lbar-cats ul.more-r,.corp-tabs ul.more-r{--fr:40px}
.lp-tabs a,.lbar-cats a,.corp-tabs a{position:relative;display:block;padding:8px 14px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
.lp-tabs a:hover,.lp-tabs a[aria-current],.lbar-cats a:hover,.lbar-cats a[aria-current],.corp-tabs a:hover,.corp-tabs a[aria-current]{color:var(--purple)}
.lp-tabs a[aria-current]::after,.lbar-cats a[aria-current]::after,.corp-tabs a[aria-current]::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:3px;border-radius:999px;background:var(--purple)}
.js .lp-panel:not(.on){display:none}
.lp-panels{overflow:hidden} /* the slide-in must not widen the page on phones */
.lp-panel.from-r{animation:lp-r .5s cubic-bezier(.16,1,.3,1)}
.lp-panel.from-l{animation:lp-l .5s cubic-bezier(.16,1,.3,1)}
@keyframes lp-r{from{opacity:0;transform:translateX(64px)}}
@keyframes lp-l{from{opacity:0;transform:translateX(-64px)}}
.sv-hero:has(+.lp-panels){min-height:100svh} /* the page's own hero fills the screen, so the first program's hero doesn't peek in */
.sv-hero-sub{min-height:76svh}
.sv-hero-sub .hero-content{padding-top:150px} /* clears the nav pill with the tabs row open */
.lp-top{align-items:start}
.lp-role{margin:-6px 0 16px;font-weight:500;color:var(--deep)}

.sv-cases{display:grid;gap:16px}
.sv-case{display:flex;flex-direction:column;gap:10px;padding:24px 22px;background:#fff;border:1px solid var(--hairline);border-radius:12px}
.sv-case-logo{height:56px;display:flex;align-items:center}
.sv-case-logo img{max-height:52px;max-width:170px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.sv-case h3{margin:0;font-size:18px}
.sv-case p{margin:0;font-size:14px;color:var(--secondary)}
.sv-case .sv-result{margin-top:auto;padding-top:12px;border-top:1px solid var(--hairline);font-size:14px;color:var(--ink)}
@media(min-width:700px){.sv-cases{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.sv-cases{grid-template-columns:repeat(3,1fr)}}

.sv-quotes{display:grid;gap:16px}
.sv-q{display:flex;flex-direction:column;gap:14px;margin:0;padding:24px 22px;background:#fff;border:1px solid var(--hairline);border-radius:12px}
.sec-white .sv-q{background:var(--ivory)}
.sv-q blockquote{margin:0;font-size:15px;line-height:1.6}
.sv-q figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;font-size:14px}
.sv-q figcaption img,.sv-q .sv-init{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover}
.sv-q .sv-init{display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--deep);font-weight:600}
.sv-q figcaption span{display:block;font-size:13px;color:var(--muted)}
@media(min-width:700px){.sv-quotes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.sv-quotes{grid-template-columns:repeat(3,1fr)}}

.sv-days{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sv-day{padding:20px;background:#fff;border:1px solid var(--hairline);border-radius:12px}
.sv-day .sv-when{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--deep)}
.sv-day h3{margin:6px 0 10px;font-size:17px}
.sv-day ul{margin:0;padding-left:1.1em;font-size:14px;color:var(--secondary)}
@media(min-width:700px){.sv-days{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sv-days{grid-template-columns:repeat(5,1fr)}}
@media(min-width:700px){.sv-days.two{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.sv-days.three{grid-template-columns:repeat(3,1fr)}.sv-days.four{grid-template-columns:repeat(4,1fr)}}
.sv-day p{margin:0;font-size:14px;color:var(--secondary)}

.sv-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;margin:0;padding:0 0 8px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory}
.sv-gallery li{scroll-snap-align:start}
.sv-gallery figure{margin:0}
.sv-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.sv-gallery figcaption{margin-top:8px;font-size:14px;font-weight:500}
@media(min-width:700px){.sv-gallery{grid-auto-columns:40%}}
@media(min-width:1000px){.sv-gallery{grid-auto-columns:calc((100% - 56px)/5);overflow:visible}}

.sv-price{display:grid;gap:28px;padding:28px 24px;background:#fff;border:1px solid var(--hairline);border-radius:16px}
.sv-price-tag{font-size:13px;color:var(--secondary)}
.sv-price-tag strong{display:block;font-size:clamp(34px,5vw,44px);line-height:1.1;color:var(--deep);letter-spacing:-.02em}
.sv-price h3{margin:0 0 12px}
@media(min-width:900px){.sv-price{grid-template-columns:1fr 1.3fr;padding:36px;gap:48px}}

.sv-form{display:grid;gap:32px}
.sv-form h2{margin-bottom:12px}
@media(min-width:900px){.sv-form{grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}}
/* Get in touch (partials/sv_contact.php) runs on from the section above it without a hairline between them */
#contact-form.sec-white{border-top:0}
.sec-white:has(+#contact-form){border-bottom:0}
.sv-contact{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--secondary)}
.sv-contact a{color:var(--deep)}

/* About page: history timeline and office banner */
.ab-era{max-width:680px;margin:0 0 20px;padding-left:16px;border-left:3px solid var(--pink)}
.ab-era-when{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-text)}
.ab-era h3{margin:4px 0 6px;font-size:20px}
.ab-era p{margin:0;font-size:15px;color:var(--secondary)}
.ab-timeline{list-style:none;margin:0 0 48px;padding:0 0 8px;display:grid;gap:14px;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory}
.ab-timeline li{scroll-snap-align:start}
.ab-timeline:last-child{margin-bottom:0}
.ab-timeline li{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);border-radius:12px;overflow:hidden}
.ab-timeline img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ab-timeline li>div{padding:18px 20px 20px}
.ab-timeline h4{margin:0 0 4px;font-size:17px}
.ab-timeline p{margin:0;font-size:14px;color:var(--secondary)}
@media(min-width:700px){.ab-timeline{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ab-timeline{grid-template-columns:repeat(4,1fr)}}
.ab-what-ic{display:flex;color:var(--purple);margin-bottom:6px} /* "What makes VINE different": a bare icon, no circle */
/* A quote over the lower part of a photo (Russ beside Our mission, Ting beside Bonus support) */
.ab-qphoto{position:relative;margin:0;border-radius:16px;overflow:hidden}
.ab-qphoto .sv-img{aspect-ratio:3/4;border-radius:0}
.ab-qphoto figcaption{position:absolute;left:0;right:0;bottom:0;padding:64px 22px 22px;background:linear-gradient(rgba(26,18,34,0),rgba(26,18,34,.85) 50%);color:#fff}
@media(min-width:900px){.ab-qphoto .sv-img{aspect-ratio:4/5}.ab-qphoto figcaption{padding:96px 28px 26px}}
.ab-qphoto blockquote{margin:0}
.ab-qphoto blockquote p{margin:0;font-size:clamp(17px,1.6vw,20px);line-height:1.5;font-weight:500}
.ab-qphoto cite{display:block;margin-top:14px;font-style:normal;font-weight:600;font-size:15px}
.ab-qphoto cite span{display:block;font-weight:400;font-size:13px;opacity:.8}

/* Launch copy (2026-10-17) */
.trust .heritage{display:block;margin-top:2px;font-size:12px;color:rgba(255,255,255,.72)}
.trial-note{max-width:620px;margin:14px auto 22px;font-weight:500;line-height:1.5}
.price small.cur{font-size:12px;font-weight:600;letter-spacing:.06em}
.tiles.two{grid-template-columns:1fr 1fr}
@media(max-width:420px){.tiles.two{grid-template-columns:1fr}}
.gym-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.gym-card,.mp-tile{--from:#6B3FA0;--to:#B06AD9;--soft:#F3EBFA}
.gym-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border-radius:16px;background:linear-gradient(180deg,var(--soft) 0%,#fff 70%);border:1px solid #ECE6DF;box-shadow:0 1px 2px rgba(26,24,22,.04),0 8px 20px -14px rgba(26,24,22,.25)}
.g-prepare{--from:#0E7C7B;--to:#2BB39F;--soft:#E3F5F1}.g-reinforce{--from:#C8473F;--to:#F08A63;--soft:#FDEDE7}.g-use{--from:#A86A08;--to:#E5AE34;--soft:#FBF1DC}
.gym-ic{position:relative;overflow:hidden;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--from),var(--to));box-shadow:0 6px 14px -6px var(--from)}
.gym-ic::before{content:"";position:absolute;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);top:-15px;right:-13px}.gym-ic svg{position:relative}
.gym-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.gym-grp{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--from)}
.gym-card h3{margin:0;font-size:16px;font-weight:600;line-height:1.25;color:var(--ink)}
.gym-card p{margin:0;font-size:13px;line-height:1.4;color:var(--secondary)}
.gym-bar{margin-top:auto;display:block;height:5px;border-radius:999px;background:rgba(26,24,22,.07);overflow:hidden}.gym-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--from),var(--to))}
.phonecard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:0 20px}
.phonecard .q{margin:0;max-width:330px;text-align:center;font-size:19px;font-weight:600;line-height:1.3;font-style:italic;color:var(--ink)}
.mphone{position:relative;width:270px;height:560px;padding:9px;border-radius:42px;background:#1A1816;box-shadow:0 30px 60px -30px rgba(47,38,64,.55);display:flex;flex-direction:column;overflow:hidden;color:#1A1816;font-size:11px;line-height:1.35}
.mphone>*{background:#FBF6F0}.mphone b{font-weight:600}.mphone small{display:block;font-size:9px;color:#6B6460}
.mp-top{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 6px;border-radius:33px 33px 0 0}.mp-top span{display:flex;align-items:center;gap:5px}.mp-top span img{width:22px;height:22px}.mp-top span img+img{width:auto;height:18px}.mp-me{width:26px;height:26px;border-radius:50%;object-fit:cover}
.mp-body{flex:1;padding:6px 12px;overflow:hidden}
.mp-scene{display:none}.mp-scene.on{display:block;animation:mpIn .45s ease both}
.mp-card{border-radius:14px;background:#fff;border:1px solid #EAE3DB;overflow:hidden}
.mp-title{font-size:15px;font-weight:600;margin:4px 0 0}.mp-sub{font-size:10px;color:#6B6460;margin:2px 0 10px}.mp-h{margin:10px 0 6px;font-size:12.5px;font-weight:600}
.mp-flame svg{width:34px;height:34px}
.mp-greet{display:flex;gap:6px;align-items:stretch;margin-bottom:8px}.mp-greet>div:first-child{flex:1;padding-top:4px}.mp-greet>div:first-child b{display:block;font-size:12.5px;font-weight:500;margin-bottom:4px}
.mp-fire{flex:none;width:84px;padding:7px 4px;border-radius:12px;background:#F1E9F7;text-align:center}.mp-fire span{display:flex;align-items:center;justify-content:center;gap:2px}.mp-fire svg{width:20px;height:20px}.mp-fire b{font-size:19px;font-weight:700;line-height:1}.mp-fire strong{display:block;font-size:8.5px;font-weight:600}.mphone .mp-fire small{font-size:7px}
.mp-next-row{display:flex}.mp-next-img{width:86px;flex:none;position:relative;background:center/cover}
.mp-next-img span{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:4px;padding:6px;font-size:9.5px;font-weight:700;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent)}.mp-next-img i{width:18px;height:18px;border-radius:50%;background:#9A6BC9;font-style:normal;font-size:10px;display:flex;align-items:center;justify-content:center}
.mp-next-txt{padding:7px 8px;display:flex;flex-direction:column;gap:1px}.mp-next-txt>small:first-child{color:#5A4468;font-weight:600}.mp-next-txt b{font-size:11px}
.mphone .mp-time{font-size:20px;font-weight:600;line-height:1.1}.mp-time em{font-style:normal;font-size:10px;margin-left:1px}.mp-time small{display:inline;font-size:8px}
.mp-pair{display:flex;margin:3px 0 1px}.mp-pair img{width:16px;height:16px;border-radius:50%;object-fit:cover;border:1.5px solid #fff}.mp-pair img+img{margin-left:-5px}
.mp-next-btns{display:flex;gap:4px;padding:6px;border-top:1px solid #EAE3DB}.mp-next-btns span{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;padding:5px 2px;border-radius:8px;border:1px solid #D9CFE3;font-size:8px;text-align:center}
.mp-next-btns .go{background:#715B83;border-color:#715B83;color:#fff;font-weight:600;animation:mpPulse 1.6s .6s infinite}.mp-next-btns .off{background:#F6F3EF;border-color:#F6F3EF;color:#B5ADA6}
/* /app Live classes chapter: the Classes list, the next 3 live classes (site.js puts them on the visitor's clock; a finger taps Join) */
.mp-sched{display:flex;flex-direction:column;gap:6px}
.mp-srow{display:flex;align-items:center;gap:8px;padding:8px;background:#fff;border:1px solid #EAE3DB;border-radius:12px}
.mp-srow[hidden]{display:none}
.mp-sdt{flex:none;width:60px;display:flex;flex-direction:column}
.mp-sdt small{font-size:8.5px;font-weight:600;color:#5A4468}
.mp-sdt b{font-size:14px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.mp-sdt em{font-style:normal;font-size:8px;margin-left:2px}
.mp-sinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mp-sinfo b{font-size:10px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-sinfo small{font-size:8.5px;color:#736D67}
.mp-sjoin{flex:none;padding:5px 11px;border-radius:999px;font-size:9px;font-weight:600;transition:transform .15s,background .15s}
.mp-sjoin.go{background:#715B83;color:#fff;animation:mpPulse 1.6s .6s infinite}
.mp-sjoin.off{background:#F6F3EF;color:#B5ADA6}
.mp-sjoin.down{transform:scale(.9);background:#5F4C6E;animation:none}
.mp-week{margin-top:8px;padding:8px}.mp-week-head{display:flex;align-items:center;gap:6px}.mp-week-head .mp-ic{margin:0;--from:#6B3FA0;--to:#B06AD9}.mp-week-head div{flex:1}.mp-week-head b{font-size:11px}.mp-week-head em{font-style:normal;font-size:8px;color:#5A4468}
.mp-days{display:flex;justify-content:space-between;margin:7px 0}.mp-days span{display:flex;flex-direction:column;align-items:center;gap:2px;width:26px;padding:2px 0;border-radius:6px}.mphone .mp-days small{font-size:6.5px}
.mp-days i{width:6px;height:6px;margin:4px 0;border-radius:50%;background:#F1D7E3}.mp-days .done i{width:13px;height:13px;margin:0;background:#DE85AD;animation:mpPop .35s .3s both}
.mp-days .today{border:1px solid #715B83;background:#F1E9F7}.mp-days .today i{width:13px;height:13px;margin:0;border:1.5px solid #715B83;background:none}.mphone .mp-days .today small{color:#1A1816;font-weight:600}
.mp-goal{display:flex;align-items:center;gap:7px;padding:7px;border-radius:9px;background:#F1E9F7}.mp-goal>span{flex:none;width:28px;height:28px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600}.mp-goal div{flex:1}.mp-goal b{font-size:9.5px}.mp-goal small b{font-size:8px}.mp-goal em{font-style:normal;font-size:14px;color:#5A4468}
.mp-streak{padding:11px}.mp-flame{display:flex;align-items:center;gap:6px;font-size:11px}.mp-flame b{font-size:24px;line-height:1;margin-right:2px}
.mp-safe{margin:9px 0;padding:7px 8px;border-radius:9px;background:#F1E9F7;font-size:9px;color:#5A4468}
.mp-mile{display:flex;justify-content:space-between;margin:0 0 5px;font-size:9px;color:#6B6460}.mp-mile b{color:#1A1816}
.mp-bar{height:14px;border-radius:999px;background:#F1E9F7;overflow:hidden}.mp-bar i{display:flex;align-items:center;justify-content:flex-end;width:50%;height:100%;padding-right:6px;border-radius:999px;background:linear-gradient(90deg,#715B83,#D4568E);color:#fff;font-size:8px;font-style:normal;font-weight:700;animation:mpGrow .8s .3s both}
.mp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.mp-stats div{padding:8px 4px;border-radius:10px;background:#fff;border:1px solid #EAE3DB;text-align:center;animation:mpUp .35s calc(.3s + var(--i)*.08s) both}.mp-stats b{display:block;font-size:15px}.mp-stats small{font-size:7.5px;line-height:1.2}
.mp-banner{position:relative;overflow:hidden;padding:9px 11px 8px;background:#5B4BB7;color:#fff}.mp-banner small{color:#fff;font-weight:600;font-size:8.5px}.mp-banner span{display:block;font-size:9px;opacity:.8;margin-top:3px}.mp-banner b{display:block;font-size:24px;font-weight:700;line-height:1.05}
.mp-banner i{position:absolute;border-radius:50%;background:rgba(255,255,255,.18)}.mp-banner i:nth-of-type(1){width:46px;height:46px;right:14px;top:-10px}.mp-banner i:nth-of-type(2){width:22px;height:22px;right:70px;top:30px}.mp-banner i:nth-of-type(3){width:30px;height:30px;right:6px;bottom:-8px}
.mp-who{display:flex;align-items:center;gap:6px;padding:8px 10px 4px}.mp-who img{width:22px;height:22px;border-radius:50%;object-fit:cover}.mp-who b{flex:1}
.mp-signed{width:18px;height:18px;border-radius:50%;background:#D4568E;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center}
.mp-tabs{display:inline-flex;margin:4px 10px 6px;padding:2px;border-radius:999px;background:#F6F3EF;font-size:8.5px}.mp-tabs span{padding:3px 8px;border-radius:999px;color:#6B6460}.mp-tabs .on{background:#fff;color:#1A1816;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mp-terms{height:198px;overflow:hidden;-webkit-mask:linear-gradient(180deg,#000 85%,transparent);mask:linear-gradient(180deg,#000 85%,transparent)}.mp-terms>div{animation:mpScroll 4.6s 1.4s ease-in-out both}.mp-term{margin:0 10px 5px;font-size:9.5px}.mp-term b{font-weight:700}
.mp-actions{display:flex;gap:6px;margin:8px 10px 10px;padding-top:8px;border-top:1px solid #EAE3DB}.mp-actions span{flex:1;padding:6px;border-radius:9px;border:1px solid #EAE3DB;text-align:center;font-size:9px}.mp-actions .off{background:#F6F3EF;color:#B5ADA6}
.mp-hero{position:relative;overflow:hidden;padding:10px 11px 11px;border-radius:14px;color:#fff;background:radial-gradient(120% 90% at 100% 0%,#2BB39F 0%,transparent 60%),linear-gradient(160deg,#0E7C7B,#2BB39F);box-shadow:0 12px 24px -14px #0E7C7Bcc}
.mp-chip{display:inline-block;margin-right:4px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.2);font-size:7.5px;font-weight:600}.mp-chip.w{background:#fff;color:#0E7C7B}
.mp-glass{position:absolute;right:10px;top:9px;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);transform:rotate(-6deg)}
.mp-hero b{display:block;margin-top:10px;font-size:15px}.mphone .mp-hero small{color:#fff;opacity:.95;margin-top:2px}
.mp-start{display:inline-block;margin-top:8px;padding:5px 11px;border-radius:999px;background:#fff;color:#0E7C7B;font-size:9.5px;font-weight:600;animation:mpPulse 1.6s .8s infinite}.mp-start em{font-style:normal;font-weight:500;opacity:.7}
.mp-gym{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mp-tile{position:relative;padding:8px;border-radius:12px;border:1px solid #EAE3DB;background:linear-gradient(180deg,var(--soft),#fff 70%);animation:mpUp .35s calc(.2s + var(--i)*.1s) both}.mp-tile.up{border-color:var(--to)}
.mp-ic{width:24px;height:24px;margin-bottom:5px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--from),var(--to));box-shadow:0 4px 10px -5px var(--from)}
.mp-tile em{position:absolute;top:7px;right:6px;padding:1px 5px;border-radius:999px;background:#fff;border:1px solid var(--to);color:var(--from);font-size:6.5px;font-style:normal;font-weight:600}
.mphone .mp-grp{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--from)}.mp-tile b{display:block;font-size:10px;margin:1px 0}.mphone .mp-tile small{font-size:7.5px}
.mp-drill p{margin:0 0 12px;font-size:12px;line-height:1.5}.mp-drill span{display:block;margin-bottom:8px;padding:10px;border-radius:12px;border:1.5px solid #EAE3DB;background:#fff;font-size:11.5px}.mp-drill .ok{animation:mpOk .4s 1.2s both}
.mp-prog{height:5px;margin-top:14px;border-radius:999px;background:rgba(26,24,22,.07);overflow:hidden}.mp-prog i{display:block;width:25%;height:100%;background:linear-gradient(90deg,#6B3FA0,#B06AD9);animation:mpBar .5s 1.7s both}
/* the app's phone nav (vinedots-pwa global.css .bottom-nav): a floating plum pill, a white bar under the open tab */
.mphone .mp-nav{position:relative;display:flex;justify-content:space-around;padding:6px 10px 15px;border-radius:0 0 33px 33px}.mphone .mp-nav::before{content:"";position:absolute;inset:0 6px 9px;border-radius:18px;background:#725D89;box-shadow:0 6px 18px -8px rgba(40,20,60,.45)}
.mp-nav span{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8px;color:#EDE6F4;white-space:nowrap}.mp-nav span::after{content:"";width:34px;height:2px;border-radius:999px}.mp-nav img{width:20px;height:20px}.mp-nav img+img,.mp-nav .on img:first-child{display:none}.mp-nav .on img+img{display:block}.mp-nav .on{color:#fff;font-weight:500}.mp-nav .on::after{background:#fff}
@keyframes mpIn{from{opacity:0;transform:translateX(14px)}}@keyframes mpUp{from{opacity:0;transform:translateY(8px)}}@keyframes mpPop{from{transform:scale(0)}}@keyframes mpGrow{from{width:12%}}
@keyframes mpPulse{50%{box-shadow:0 0 0 6px rgba(113,91,131,.18)}}@keyframes mpOk{to{border-color:#2BB39F;background:#E3F5F1;color:#0E7C7B}}@keyframes mpBar{to{width:50%}}@keyframes mpScroll{to{transform:translateY(calc(-100% + 190px))}}
.mp-call{display:flex;flex-direction:column;gap:6px;padding:9px;border-radius:14px;background:#24211F;color:#fff}
.mp-call-top{display:flex;align-items:center;justify-content:space-between}.mphone .mp-call-top small{font-size:8px;color:rgba(255,255,255,.7)}
.mp-live{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;background:#D4568E;font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.mp-live i{width:5px;height:5px;border-radius:50%;background:#fff;animation:mpBlink 1.2s infinite}
.mp-call-t{font-size:13px}
.mp-split{display:flex;gap:3px}.mp-split span{flex:1;padding:4px 6px;border-radius:6px;background:rgba(255,255,255,.08);font-size:7.5px;color:rgba(255,255,255,.7)}.mp-split b{display:block;font-size:8.5px;color:#fff}.mp-split .on{background:rgba(212,86,142,.4)}
.mp-cam{position:relative;border-radius:10px;background:#35312E center/cover;animation:mpTalk 5s calc(var(--i) * 1s) infinite}.mp-teach{height:138px}
.mp-cam span{position:absolute;left:5px;bottom:5px;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.5);font-size:7.5px}
.mp-mates{display:grid;grid-template-columns:1fr 1fr;gap:5px}.mp-mates .mp-cam{height:64px}
.mp-ctrl{display:flex;justify-content:center;gap:8px}.mp-ctrl span{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12)}.mp-ctrl .end{width:auto;padding:0 12px;border-radius:999px;background:#E5484D;font-size:9px;font-weight:600}
.mp-seg{display:flex;margin:2px 0 8px;padding:2px;border-radius:999px;background:#F6F3EF}.mp-seg span{flex:1;padding:5px;border-radius:999px;text-align:center;font-size:9.5px;color:#6B6460}.mp-seg .on{background:#fff;color:#1A1816;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mp-trk{padding:12px;border-radius:14px;animation:mpUp .35s both}.mp-trk-social{background:#F4EBDD;color:#5A3A0C}.mp-trk-business{background:#F1E9F7;color:#5A4468}
.mphone .mp-trk small{color:inherit;opacity:.85}.mp-trk>b{display:block;margin:3px 0 6px;font-size:17px}.mp-trk p{margin:0;font-size:9.5px}
.mp-les{display:flex;align-items:center;gap:7px;margin:0 0 5px;padding:7px 9px;border-radius:10px;border:1px solid #EAE3DB;background:#fff;font-size:10px;animation:mpUp .35s calc(.15s + var(--i) * .06s) both}.mp-les i{flex:none;width:6px;height:6px;border-radius:50%;background:#D4568E}
.mp-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;justify-items:center}
.mp-wall i{width:18px;height:18px;border-radius:50%;animation:mpPop .3s calc(.3s + var(--i) * .04s) both}
.mp-wall .w1{background:#EFBBD3}.mp-wall .w2{background:#DE85AD}.mp-wall .w3{background:#BC4278}.mp-wall .wr{border:2px solid #DE85AD}.mp-wall .wnow{border:2px dashed #715B83}.mp-wall .w0{border:1px solid #E5DCD3}
.mp-devs{display:flex;gap:6px;margin:4px 0 10px}.mp-devs span{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;border:1px solid #EAE3DB;background:#fff;font-size:9px;color:#5A4468}.mp-devs span:first-child{border-color:#715B83;background:#F1E9F7;font-weight:600}
.mp-login{padding:10px}.mphone .mp-login small{margin:0 0 3px;font-size:8.5px}
.mp-in{display:block;margin-bottom:8px;padding:7px 9px;border-radius:9px;border:1px solid #D9CFE3;font-size:10px}
.mp-go{display:block;padding:8px;border-radius:999px;background:#715B83;color:#fff;text-align:center;font-size:10.5px;font-weight:600;animation:mpPulse 1.6s .6s infinite}
.mp-said{margin-bottom:7px;padding:8px 10px;border-radius:12px;border:1px solid #EAE3DB;background:#fff;animation:mpUp .35s calc(.2s + var(--i) * .25s) both}
.mphone .mp-said small{font-size:7.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.mp-said s{display:block;margin:1px 0 5px;font-size:10.5px;color:#B5524F}.mp-said b{display:block;margin-top:1px;font-size:11px;color:#0E7C7B}
.mp-go svg{margin-right:3px;vertical-align:-2px}
/* the home phone's story (site.js): a finger glides to what gets tapped; each phrase said turns green */
.mphone .mp-finger{position:absolute;left:0;top:0;z-index:5;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:rgba(26,24,22,.3);border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.3);pointer-events:none;opacity:0;transform:translate(135px,400px);transition:transform .6s cubic-bezier(.3,.7,.2,1),opacity .25s}
.mphone .mp-finger.on{opacity:1}.mphone .mp-finger.tap{animation:mpTap .35s}
@keyframes mpTap{50%{scale:.7;box-shadow:0 0 0 8px rgba(255,255,255,.4)}}
.mp-les.ok{border-color:#2BB39F;background:#E3F5F1;color:#0E7C7B}.mp-les.ok i{background:#2BB39F}.mp-go.rec{background:#D4568E;animation:none}
.mp-a2hs{display:flex;align-items:flex-start;gap:7px;margin:10px 0 0;padding:8px 9px;border-radius:10px;background:#F1E9F7;color:#5A4468;font-size:9px}.mp-a2hs svg{flex:none}
@keyframes mpTalk{0%,16%{box-shadow:0 0 0 2px #D4568E}20%,100%{box-shadow:0 0 0 0 transparent}}@keyframes mpBlink{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.mphone *{animation:none!important}}
.tools-more{margin:16px 0 0;font-size:14px;font-weight:600}
.tools-more a{color:var(--purple);text-decoration:none}
.tools-more a:hover{text-decoration:underline}
#how{scroll-margin-top:90px}
.sv-wa a{white-space:nowrap}
/* Contact: the Taipei office photo stays still behind the page; the title, then the form and details on cards, scroll over it, and the FAQ slides up over it last */
.ct-bg{position:fixed;inset:0;z-index:-1;background:#2a2230}
.ct-bg img{width:100%;height:100%;object-fit:cover;object-position:52% 45%}
.ct-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,24,22,.5),rgba(26,24,22,.15) 45%,rgba(26,24,22,.6))}
.ct-top{display:flex;align-items:flex-end;min-height:max(240px,34vh)}
.ct-top .page-head{width:100%;padding-bottom:40px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.ct-top .page-head .lead{color:rgba(255,255,255,.88)}
.ct-cards{padding-bottom:64px}
.ct-cards .two-col>*{padding:28px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:20px;box-shadow:0 24px 60px -30px rgba(0,0,0,.6)} /* the blocks that keep the form and details readable on the photo */
@media(max-width:599px){.ct-cards .two-col>*{padding:22px 18px}}
.ct-sheet{position:relative;background:var(--ivory);border-radius:24px 24px 0 0;box-shadow:0 -16px 40px -24px rgba(0,0,0,.45)}
.contact-offices h3{font-size:16px;margin:20px 0 4px}.contact-offices p{margin:0}
.contact-quote{margin:24px 0 0;font-size:18px;font-weight:500;font-style:italic;line-height:1.4}.contact-quote span{display:block;margin-top:4px;font-size:13px;font-weight:400;font-style:normal;color:var(--secondary)}
/* Contact: the email as a frosted pill under the intro, on the office photo */
.ct-mail{margin:18px 0 0;height:40px;font-size:15px;color:#fff;text-decoration:none;text-shadow:none;background:rgba(26,24,22,.38);border-color:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .15s}
.ct-mail:hover,.ct-mail:focus-visible{background:rgba(26,24,22,.55)}
.contact-qr{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}.contact-qr figure{margin:0;max-width:150px}.contact-qr img{display:block;width:132px;height:132px;border:1px solid var(--hairline);border-radius:12px;padding:6px;background:#fff}.contact-qr figcaption{margin-top:8px;font-size:14px}.contact-qr figcaption small{display:block;color:var(--secondary)}
.trk-tabs{display:inline-flex;gap:4px;padding:4px;margin-bottom:16px;border:1px solid var(--hairline);border-radius:999px;background:var(--white)}.trk-tabs button{border:0;background:none;border-radius:999px;padding:9px 18px;font:500 15px/1 var(--font);color:var(--secondary);cursor:pointer}.trk-tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.trk-view{position:relative;border-radius:20px;overflow:hidden}.trk-rail{display:grid;gap:12px}.trk-panel{display:grid;gap:22px;padding:28px 24px;border-radius:20px}.trk-social{background:#F4EBDD;color:#5A3A0C}.trk-business{background:var(--tint);color:var(--tint-text)}.trk-tag{font-size:13px}.trk-panel h3{font-size:clamp(26px,4vw,34px);margin:4px 0 12px;color:inherit}.trk-goal{margin:0 0 20px}.trk-lab{font-size:13px;font-weight:600;margin:0 0 6px}.trk-list{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}.trk-list li{padding:6px 0;break-inside:avoid;border-bottom:1px solid rgba(26,24,22,.08)}.trk-all{margin:14px 0 0;color:var(--secondary)}.trk-peek{display:none}
.trk.is-js .trk-rail{display:flex;gap:0;width:200%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.trk.is-js .trk-panel{flex:0 0 50%;border-radius:0}.trk.is-js .trk-social{padding-right:76px}.trk.is-js .trk-business{padding-left:76px}.trk.is-js .trk-peek:not([hidden]){position:absolute;top:0;bottom:0;width:56px;display:flex;align-items:center;justify-content:center;gap:10px;writing-mode:vertical-rl;border:0;font:500 14px/1 var(--font);cursor:pointer;transition:filter .2s}.trk-peek:hover{filter:brightness(.96)}.trk-peek-business{right:0;background:var(--tint);color:var(--tint-text);box-shadow:inset 1px 0 0 rgba(26,24,22,.08)}.trk-peek-social{left:0;background:#F4EBDD;color:#5A3A0C;box-shadow:inset -1px 0 0 rgba(26,24,22,.08)}.trk-arr{flex:none}
@media(min-width:800px){.trk-panel{grid-template-columns:1fr 1.2fr;gap:40px;padding:44px 40px}.trk.is-js .trk-social{padding-right:104px}.trk.is-js .trk-business{padding-left:104px}}
@media(max-width:520px){.trk-list{columns:1}.trk-tabs button{padding:9px 12px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.trk.is-js .trk-rail{transition:none}}
.corp-stat{margin:18px auto 0;max-width:620px;text-align:center;font-size:16px;color:var(--secondary)}
.corp-stat strong{color:var(--deep)}

/* App landing page (pages/app.php): runs up behind the floating nav (.has-hero), so the intro and the stage start with
   76px for it. Chapters scroll past a pinned phone, beside them from 900px and above them on
   phones (where the stage's solid background, fading out at its foot, hides the text scrolling under it). site.js
   swaps the phone's screens and turns the circles behind it (--y). */
.ast{background:var(--tint)}
.ast h1{font-size:clamp(36px,7vw,64px);line-height:1.05;margin:6px 0 16px;color:var(--ink,#2F2640)}
.ast .lead{font-size:clamp(16px,2vw,19px);color:var(--secondary);max-width:540px;margin:0 0 28px}
.ast .cta-row{display:flex;flex-wrap:wrap;gap:12px}
.ast-step{max-width:540px;min-height:62svh;padding:36px 0 40px}
.ast-intro{min-height:0;padding:108px 0 0}
.ast-step h2{font-size:clamp(28px,4vw,44px);line-height:1.1;margin:0 0 14px;color:var(--ink)}
.ast-step>p{font-size:clamp(16px,1.6vw,19px);color:var(--secondary);margin:0 0 22px}
.js .ast-step{opacity:.3;transition:opacity .45s}.js .ast-step.on{opacity:1}
.ast-stage{position:sticky;top:0;z-index:2;display:flex;justify-content:center;margin-bottom:-28px;padding:84px 0 44px;overflow:hidden;background:linear-gradient(var(--tint) calc(100% - 28px),rgba(241,233,247,0))}
.ast-orbit{position:absolute;left:50%;top:55%;transform:rotate(calc(var(--y,0) * .05deg)) scale(.6)}
.ast-orbit i{position:absolute;border-radius:50%;background:#F6DCE8}
.ast-orbit i:nth-child(1){width:380px;height:380px;left:-430px;top:-340px}
.ast-orbit i:nth-child(2){width:300px;height:300px;left:110px;top:-60px;background:#E1D3EA}
.ast-orbit i:nth-child(3){width:170px;height:170px;left:-330px;top:150px;background:#EDD3DF}
.ast-devs{position:relative;zoom:.6}.ast .mphone{position:relative;z-index:1;transition:transform .7s cubic-bezier(.3,.7,.2,1)}.ast .mphone.tap{cursor:pointer}
/* "Any device": the laptop slides in from the right, in front, as the phone shrinks behind it and peeks over its top
   (sizes in phone px; 460 wide still fits a phone's screen) */
.ast-laptop{position:absolute;z-index:2;left:-95px;top:172px;width:460px;opacity:0;transform:translateX(75%);transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .4s;pointer-events:none;color:#1A1816;font-size:11px;line-height:1.35}
.ast-stage.laptop .ast-laptop{opacity:1;transform:none}
.ast-stage.laptop .mphone{transform:translate(95px,-60px) scale(.6)}
:where(.ast-laptop) b{font-weight:600}:where(.ast-laptop) small{display:block;font-size:9px;color:#6B6460}.ast-laptop .mp-login small{margin:0 0 3px;font-size:8.5px}
.lt-screen{display:flex;height:288px;border:7px solid #1A1816;border-bottom-width:9px;border-radius:12px 12px 3px 3px;overflow:hidden;background:#FBF6F0;box-shadow:0 30px 60px -30px rgba(47,38,64,.55)}
/* the app's desktop sidebar: plum, a soft highlight on the open tab, the logo at its foot (so the top bar drops it) */
.lt-side{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:40px;padding:10px 0;background:#725D89}.lt-side img{width:28px;height:28px;padding:6px;border-radius:8px;opacity:.85}.lt-side .on{opacity:1;background:rgba(255,255,255,.16)}.lt-side .lt-logo{width:22px;height:22px;padding:0;margin-top:auto;opacity:1;filter:brightness(0) invert(1)}
.lt-main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column}.ast-laptop .mp-top{padding:10px 16px 0;border-radius:0}.ast-laptop .mp-top span{visibility:hidden}
/* then the class notes, 2.6s after it slides in (the animation restarts each time the laptop comes back) */
.lt-notes{position:absolute;inset:0;display:flex;gap:10px;padding:10px 12px;background:#FBF6F0;opacity:0;visibility:hidden}
.ast-stage.laptop .lt-notes{animation:ltNotes .5s 2.6s both}
@keyframes ltNotes{from{opacity:0;visibility:visible;transform:translateX(16px)}to{opacity:1;visibility:visible;transform:none}}
.lt-note{flex:1;min-width:0}.lt-note .mp-term{margin-bottom:4px;font-size:9px}
.lt-people{flex:none;display:flex;flex-direction:column;gap:5px;width:110px}.lt-people small{font-weight:600}
.lt-people .mp-cam{height:84px;color:#fff}
.lt-faces{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.lt-faces span{position:relative;aspect-ratio:1;border-radius:50%;background:center/cover}.lt-faces span:last-child{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #715B83}
.lt-faces em{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);padding:0 4px;border-radius:999px;background:#715B83;color:#fff;font-size:6.5px;font-style:normal;font-weight:600}
/* the phone's welcome screen, in two columns: the words on the left, the log-in form on the right */
.lt-welcome{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"t l" "s l" "d l" "a l";align-content:center;column-gap:18px;padding:0 20px 12px}
.lt-welcome .mp-title{grid-area:t}.lt-welcome .mp-sub{grid-area:s}.lt-welcome .mp-devs{grid-area:d;margin-bottom:0}.lt-welcome .mp-a2hs{grid-area:a}.lt-welcome .mp-login{grid-area:l;align-self:center}
.lt-base{height:9px;width:112%;margin-left:-6%;border-radius:2px 2px 10px 10px;background:linear-gradient(180deg,#D9D3CC,#C4BCB3)}
@media(prefers-reduced-motion:reduce){.ast .mphone,.ast-laptop{transition:none}.ast-laptop *{animation:none!important}}
@media(min-height:700px){.ast-devs{zoom:.66}}
@media(min-height:800px){.ast-devs{zoom:.72}}
@media(min-width:600px) and (min-height:900px){.ast-devs{zoom:.85}}
@media(max-width:899px){.ast-stage{padding-top:132px}} /* clears the nav and the "Ready to start speaking?" bar under it */
@media(max-width:899px) and (max-height:560px){.ast-stage{position:relative;padding-top:24px}} /* phones on their side: no room to pin it */
@media(min-width:900px){
  /* the circles spill out of the phone's column, behind the text, but not out of the section */
  .ast{overflow:clip;background:radial-gradient(120% 60% at 85% 0%,#F6DCE8 0%,rgba(246,220,232,0) 55%),var(--tint)}
  .ast-stage{overflow:visible;z-index:auto}
  .ast-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px}
  /* spans one row per chapter (7); pinned from the start, the phone mid-way below the nav */
  .ast-stage{grid-column:2;grid-row:1/span 7;align-self:start;align-items:center;height:100svh;margin:0;padding:76px 0 0;background:none}
  .ast-orbit{transform:rotate(calc(var(--y,0) * .05deg))}
  .ast-step{grid-column:1;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;min-height:80svh;padding:40px 0}
  .ast-intro{min-height:100svh;padding-top:116px}.ast-step:last-child{min-height:calc(100svh - 76px)}
  .ast-devs{zoom:.95}
}
@media(min-width:900px) and (min-height:760px){.ast-devs{zoom:1.12}}
@media(min-width:900px) and (min-height:840px){.ast-devs{zoom:1.26}}
@media(min-width:900px) and (min-height:940px){.ast-devs{zoom:1.42}}
.ast-pills,.ast-hint{display:none}
.js .ast-pills{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;border:1px solid var(--outline);border-radius:999px;background:var(--white)}
.ast-pills button{border:0;background:none;border-radius:999px;padding:10px 18px;font:500 15px/1 var(--font);color:var(--secondary);cursor:pointer}
.ast-pills button[aria-pressed=true]{background:var(--ink);color:#fff}
.js .ast-hint{display:block;margin:10px 0 0;font-size:14px;color:var(--secondary)}
.ast-step>.ast-stores-lab{margin:3em 0 12px} /* about two blank lines under the buttons */
.ast-stores{display:flex;flex-wrap:wrap;gap:10px}
.store{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 14px;border-radius:12px;background:var(--ink);color:#fff;text-decoration:none;font-size:17px;font-weight:600;line-height:1.1}
.store small{display:block;font-size:10.5px;font-weight:500;opacity:.8}
a.store:hover{background:#000}
.store.off{background:none;color:var(--secondary);border:1px dashed var(--outline)}
.app-trial{margin:16px 0 0;font-size:14px;font-weight:500;color:var(--deep)}
.app-trial::before{content:"\2713";margin-right:8px;color:var(--pink)}
.app-member{margin:6px 0 0;font-size:14px;color:var(--secondary)}
.app-login{color:var(--purple);font-weight:600}
.cur-pick{margin-top:22px}
.cur-pick label{margin-right:6px}
.cur-pick select{font:inherit;font-size:13px;padding:4px 8px;border:1px solid var(--outline);border-radius:8px;background:#fff;color:var(--ink)}
.local-note{margin-top:6px}
.price.is-local{font-size:clamp(30px,7vw,38px)}

/* Free trial class (pages/trial_class.php, partials/trial_form.php) */
.trial-aside h2{margin-bottom:14px}
.trial-aside .checks{margin-bottom:18px}
.trial-how{color:var(--secondary)}
.trial-invited{margin-bottom:12px}
.trial-shared{margin:-6px 0 16px;font-weight:600;color:var(--tint-text)}
.trial-set{border:0;border-top:1px solid var(--hairline);margin:8px 0 0;padding:18px 0 4px;min-width:0}
.trial-set legend{font-weight:600;font-size:16px;padding:0;margin-bottom:2px;float:left;width:100%}
.trial-set legend+*{clear:left}
.trial-set .fine{margin:0 0 12px}
.trial-via{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.lead-form .trial-via label{margin:0}
.trial-via input{position:absolute;opacity:0;width:1px;height:1px}
.trial-via span{display:inline-flex!important;align-items:center;height:38px;padding:0 16px;margin:0!important;border-radius:999px;border:1px solid var(--outline);background:#fff;color:var(--tint-text);font-size:14px!important;cursor:pointer}
.trial-via input:checked+span{background:var(--purple);border-color:var(--purple);color:#fff}
.trial-via input:focus-visible+span{outline:2px solid var(--purple);outline-offset:2px}
.trial-phone{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 12px}
.lead-form .tc-line[hidden]{display:none}
.trial-form>.btn{margin-top:10px}
.trial-ok{background:#ECF8E6;color:#2f6a1e;border-radius:16px;padding:22px 22px 8px}
.trial-ok h2{color:#2f6a1e;margin:0 0 8px;font-size:22px}
@media(max-width:420px){.trial-phone{grid-template-columns:1fr}}
.final-alt{color:#fff;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:3px;opacity:.92}.final-alt:hover{opacity:1}
/* 404: hangman (assets/js/hangman.js) */
.hm{display:grid;gap:18px;justify-items:center;margin:8px 0 32px}
.hm[hidden],.hm [hidden]{display:none}
.hm-art{width:min(260px,80%);height:auto;overflow:visible}
.hm-art path,.hm-art ellipse{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.hm-gallows{stroke-width:17}.hm-rope{stroke-width:7}.hm-man{stroke-width:10}
/* Each wrong guess draws the next part, stroke by stroke */
.hm-part{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .45s ease,opacity 0s .45s}
.hm-part.on{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset .45s ease}
.hm-sentence{margin:0;max-width:44ch;font-size:19px;line-height:1.7;font-weight:500;color:var(--ink)}
.hm-blank{display:inline-flex;gap:4px;margin:0 4px;vertical-align:bottom}
.hm-slot{display:inline-block;width:.9em;height:1.5em;border-bottom:2px solid var(--ink);font-weight:600;line-height:1.5em;color:var(--deep);text-align:center}
.hm-slot.missed{color:var(--pink-text)}
.hm-status{margin:0;min-height:1.5em;font-size:15px;color:var(--secondary)}
.hm-keys{display:grid;grid-template-columns:repeat(13,1fr);gap:6px;width:100%;max-width:600px}
.hm-key{height:44px;padding:0;border:1px solid var(--outline);border-radius:12px;background:#fff;color:var(--tint-text);font:600 16px/1 var(--font);text-transform:uppercase;cursor:pointer}
.hm-key:hover:not(:disabled){background:var(--tint)}
.hm-key:disabled{cursor:default;opacity:.4}
.hm-key.hit{opacity:1;background:var(--tint);border-color:var(--purple);color:var(--deep)}
.hm-key.miss{text-decoration:line-through}
@media(max-width:560px){.hm-keys{grid-template-columns:repeat(7,1fr)}}
@media(prefers-reduced-motion:reduce){.hm-part,.hm-part.on{transition:none}}