/* Rosebridge English homepage sections. Load after rb.css. */

/* hero */
.hero{position:relative;overflow-x:clip;overflow-y:visible;z-index:1;background:var(--ivory);min-height:calc(100svh - 84px);display:flex;align-items:center;padding:56px 0 88px}
.hero-disc{position:absolute;left:55vw;top:50%;width:118vh;height:118vh;border-radius:50%;background:var(--teal);transform:translateY(-50%)}
.hero-photo{position:absolute;margin:0;left:calc(55vw + 7vh);top:50%;width:64vh;height:64vh;border-radius:50%;overflow:hidden;transform:translateY(-52%);background:var(--teal-deep)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform:scale(1.06)}
.lesson-card{position:absolute;left:calc(55vw - 8vh);top:calc(50% + 15vh);z-index:2;width:372px;background:var(--card-white);border-radius:var(--radius);padding:22px 24px 20px;color:var(--ink)}
.lc-title{font-family:var(--f-display);font-size:var(--t-lead);line-height:1.2;margin-bottom:14px}
.lc-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:3px;margin-bottom:16px}
.lc-own{flex:6;background:var(--teal);border-radius:999px}
.lc-live{flex:50;background:var(--rose);border-radius:999px}
.lc-rows{display:grid;gap:10px}
.lc-row{display:grid;grid-template-columns:92px 1fr;align-items:baseline;gap:10px}
.lc-row dt{font-family:var(--f-display);font-size:var(--t-h3);line-height:1;display:flex;align-items:center;gap:8px;white-space:nowrap}
.lc-row dt .ring{width:12px;height:12px}
.lc-row dd{font-size:var(--t-small);line-height:1.35;color:var(--body)}
.hero-copy{position:relative;z-index:3}
.hero-copy h1{max-width:50vw}
.hero-lead{max-width:34ch;margin-top:36px;font-size:var(--t-lead);line-height:1.5;color:var(--body)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:36px}
.hero-note{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:var(--t-small);color:var(--soft)}
.hero-note svg{color:var(--teal)}

/* how it works: tinted stages */
.how{padding:var(--gap-section) 0 0}
.how-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 6vw;align-items:end;margin-bottom:64px}
.how-intro p{max-width:46ch}
.stages{display:flex;height:540px;border-radius:var(--radius);overflow:hidden}
.stage{position:relative;flex:0 0 96px;background:var(--tone);color:var(--on);transition:flex-basis .7s var(--ease);overflow:hidden;min-width:0}
.stage.is-open{flex:1 1 auto}
.stage h3{position:absolute;inset:0;font:inherit;color:inherit}
.stage-tab{position:absolute;inset:0;width:100%;border:0;background:transparent;cursor:pointer;text-align:left;padding:0;color:inherit}
.stage-tab span{position:absolute;left:30px;bottom:30px;transform-origin:left bottom;transform:rotate(-90deg) translateY(100%);white-space:nowrap;font-family:var(--f-display);font-size:var(--t-lead);line-height:1;transition:opacity .4s}
.stage-tab:hover span{opacity:.75}
.stage.is-open .stage-tab{pointer-events:none}
.stage.is-open .stage-tab span{opacity:0}
.stage-body{position:absolute;inset:0;display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,380px);gap:40px;padding:44px 48px;opacity:0;visibility:hidden;transition:opacity .5s var(--ease-soft),visibility 0s .5s}
.stage.is-open .stage-body{opacity:1;visibility:visible;transition:opacity .7s var(--ease-soft) .25s,visibility 0s}
.stage-text{display:flex;flex-direction:column;justify-content:flex-end;gap:28px;min-width:0}
.stage-name{font-family:var(--f-display);font-size:var(--t-h2);line-height:1;letter-spacing:-.03em;color:inherit}
.stage-text p:last-child{max-width:36ch;font-size:var(--t-body);line-height:1.55}
.how-more{margin-top:28px}

/* fragments: real screens, drawn to the product's own rules */
.frag{align-self:center;justify-self:end;width:100%;max-width:360px;background:var(--white);color:var(--navy);border-radius:18px;padding:24px;font-size:var(--t-small)}
.fc-part{font-weight:600;display:flex;justify-content:space-between;gap:8px;color:var(--navy)}
.fc-part span{font-weight:400;color:var(--soft)}
.fc-q{font-family:var(--f-display);font-size:var(--t-lead);margin:18px 0 14px}
.fc-opts{display:grid;gap:8px}
.fc-opts li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;background:#F4F1EE}
.fc-opts .ring{color:#9AA4B2;width:16px;height:16px}
.fc-opts .is-picked{background:var(--teal-tint)}
.fc-opts .is-picked .ring{color:var(--teal);background:var(--teal);box-shadow:inset 0 0 0 3px #fff} /* taste-skill-ignore: radio dot inside the data-ui level-check fragment */
.fc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;color:var(--soft)}
.fc-next{background:var(--teal);color:#fff;border-radius:999px;padding:7px 16px;font-weight:500}

.frag-phone{max-width:236px;padding:10px;background:#0F1E33;border-radius:34px}
.ph-screen{background:var(--navy);border-radius:26px;aspect-ratio:9/16;padding:18px 16px 16px;display:flex;flex-direction:column;color:#fff}
.ph-title{font-size:.8125rem;line-height:1.3;color:rgba(255,255,255,.8);background:rgba(255,255,255,.08);border-radius:10px;padding:8px 10px}
.ph-card{margin:auto 0;background:var(--ivory);color:var(--navy);border-radius:16px;padding:16px 14px}
.ph-drill{font-family:var(--f-display);font-size:var(--t-lead);line-height:1.1}
.ph-drill b{font-weight:700;color:var(--teal)}
.ph-contour{width:100%;height:30px;color:var(--teal);margin:8px 0 6px}
.ph-hint{font-size:.8125rem;line-height:1.35;color:var(--body)}
.ph-scrub{height:4px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden}
.ph-fill{display:block;height:100%;width:43%;background:var(--teal);border-radius:999px}
.ph-time{display:flex;justify-content:space-between;font-size:.8125rem;margin-top:8px;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}

.frag-live{max-width:380px;background:#13283F;color:#fff}
.lv-head{display:flex;align-items:center;gap:8px;font-weight:500}
.lv-dot{width:9px;height:9px;border-radius:50%;background:var(--rose)}
.lv-left{margin-left:auto;font-weight:400;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.lv-topic{font-family:var(--f-display);font-size:var(--t-lead);line-height:1.2;margin:14px 0 16px}
.lv-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lv-tile{aspect-ratio:4/3;border-radius:12px;background:#24405E;display:flex;align-items:flex-end;padding:8px 10px;font-size:.8125rem;color:rgba(255,255,255,.85)}
.lv-teacher{background:#3A4F6A}
.lv-you.is-talking{box-shadow:inset 0 0 0 3px var(--rose)} /* taste-skill-ignore: speaking indicator inside the data-ui session fragment */

.frag-test .ft-title{font-family:var(--f-display);font-size:var(--t-lead);line-height:1.15}
.frag-test .ft-sub{color:var(--soft);margin:4px 0 18px}
.frag-test li{display:flex;align-items:center;gap:12px;padding:12px 0}
.frag-test li + li{border-top:0}
.frag-test li span:last-child{margin-left:auto;color:var(--soft)}
.frag-test li:nth-child(odd){background:transparent}
.frag-test .ring{width:14px;height:14px}

/* the voice question */
.voice{margin-top:var(--gap-section);background:var(--navy);color:#fff;transition:background-color 1.1s var(--ease-soft);overflow:hidden}
.voice.is-right{background:var(--teal-deep)}
.voice.is-wrong{background:var(--navy)}
.voice-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6vw;align-items:center;padding-top:clamp(96px,8vw,128px);padding-bottom:clamp(96px,8vw,128px)}
.voice .h2{color:#fff;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.015em}
.voice-copy p{max-width:40ch;margin-top:28px;color:rgba(255,255,255,.86)}
.voice-copy .voice-q{font-family:var(--f-display);font-size:var(--t-h3);line-height:1.25;color:#fff;max-width:24ch}
.voice-q q{quotes:"\201C" "\201D"}
.voice-stage{position:relative}
.voice-sentence{position:relative;display:inline-block;font-family:var(--f-display);font-size:clamp(2.6rem,5.2vw,5.4rem);line-height:1;letter-spacing:-.03em;color:#fff;padding-top:clamp(70px,8vw,120px);margin-bottom:48px}
.voice-last{color:var(--rose)}
.voice-line{position:absolute;left:0;top:0;width:100%;height:clamp(70px,8vw,120px);overflow:visible}
.voice-line path{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.voice[data-picked="up"] .vl-up,.voice[data-picked="down"] .vl-down{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease) .1s,opacity .2s}
.voice[data-picked="up"] .vl-down,.voice[data-picked="down"] .vl-up{opacity:0}
.voice[data-picked] .voice-line path{stroke:var(--gold)}
.voice-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px}
.vc-btn{display:flex;align-items:center;gap:18px;min-height:96px;padding:0 28px;border-radius:999px;border:0;background:rgba(255,255,255,.1);color:#fff;font-family:var(--f-display);font-size:var(--t-h3);cursor:pointer;transition:background-color .4s var(--ease-soft),color .4s,transform .2s}
.vc-btn svg{width:56px;height:36px;flex:none}
.vc-btn:hover{background:rgba(255,255,255,.18)}
.vc-btn:active{transform:scale(.985)}
.vc-btn[aria-pressed="true"]{background:var(--card-white);color:var(--navy)}
.voice-result{margin-top:32px;min-height:4em;max-width:48ch;color:rgba(255,255,255,.9)}
.voice-result .vr-title{font-family:var(--f-display);font-size:var(--t-h3);color:#fff;margin-bottom:10px}
.voice-result p + p{margin-top:12px}
.voice-result a{color:#fff}

/* courses as a menu */
.courses{padding:var(--gap-section) 0 0}
.menu-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:24px}
.menu-count{font-size:var(--t-body);color:var(--soft);white-space:nowrap}
.menu-intro{max-width:56ch;margin-bottom:56px}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:44px 72px}
.menu li{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.menu h3,.menu h4{font-family:var(--f-text);font-size:var(--t-body);font-weight:600;line-height:1.3;color:var(--ink);display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.menu .lvl{font-family:var(--f-text);font-weight:500;font-size:var(--t-body);color:var(--teal);white-space:nowrap;font-variant-numeric:tabular-nums}
.menu p{margin-top:6px;max-width:44ch;color:var(--body)}
.bullet{width:64px;height:64px;border-radius:50%;border:3px solid var(--teal);color:var(--teal);display:flex;align-items:center;justify-content:center;transition:background-color .4s,color .4s}
.bullet svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.menu-courses li:hover .bullet{background:var(--teal);color:var(--card-white)}
.menu-courses h3{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-family:var(--f-display);font-weight:400;font-size:var(--t-h3);line-height:1.1}
.course-lvl{color:var(--ink)}
.course-name{font-family:var(--f-text);font-size:var(--t-small);font-weight:500;color:var(--teal);letter-spacing:.01em}
.menu-head-2{margin-top:clamp(96px,9vw,140px)}
.menu-key{display:flex;flex-wrap:wrap;gap:12px 32px;margin-bottom:44px;color:var(--soft);font-size:var(--t-small)}
.menu-key > span{display:inline-flex;align-items:center;gap:10px}
.menu-unit{gap:36px 72px}
.menu-unit li{grid-template-columns:30px 1fr;gap:14px}
.menu-unit .ring{width:16px;height:16px;margin-top:5px;border-width:3px}

.menu-unit .lvl{color:var(--navy)}
.courses-foot{margin-top:64px;max-width:60ch}

/* teachers */
.teachers{padding:var(--gap-section) var(--margin) 0}
.panel{position:relative;max-width:calc(1520px - 2 * var(--margin));margin:0 auto;background:var(--navy);color:#fff;border-radius:calc(var(--radius) + 6px);overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:min(80svh,700px)}
.panel-left{position:relative;padding:64px 56px 0}
.panel .h2{color:#fff;max-width:9ch}
.portraits{position:absolute;left:56px;bottom:-3vw;display:flex}
.portrait::after{content:attr(data-letter)}
.portrait{width:clamp(180px,16vw,300px);height:clamp(180px,16vw,300px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:clamp(4.2rem,6.6vw,7.6rem);line-height:1}
.portrait-matt{background:var(--teal);color:var(--ivory);z-index:2}
.portrait-charles{background:var(--rose);color:var(--navy);margin-left:-2.6vw;transform:translateY(-4vw);z-index:1}
.portrait-cynde{background:#5E9EA5;color:var(--navy);margin-left:-2.6vw}
.panel-right{padding:64px 56px 72px;display:flex;flex-direction:column;justify-content:center;gap:48px}
.bio{max-width:42ch}
.bio h3{font-family:var(--f-display);font-size:var(--t-h3);color:#fff;display:flex;align-items:center;gap:14px;margin-bottom:12px}
.bio h3 .ring{width:18px;height:18px}
.bio p{color:rgba(255,255,255,.86)}
.panel-right .btn{align-self:flex-start}

/* pricing: names as the index */
.pricing{padding:var(--gap-section) 0 0}
.pricing-intro{max-width:52ch;margin:24px 0 64px}
.plans{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:6vw;align-items:start}
.plan-names{display:flex;flex-direction:column;align-items:flex-start}
.plan-names button{position:relative;border:0;background:none;padding:.08em 0 .08em .72em;font-family:var(--f-display);font-size:clamp(3rem,5.4vw,5.6rem);line-height:1.08;letter-spacing:-.035em;color:#7D8696;cursor:pointer;text-align:left;transition:color .5s var(--ease-soft)}
.plan-names button::before{content:"";position:absolute;left:0;top:50%;width:.3em;height:.3em;margin-top:-.12em;border-radius:50%;background:var(--teal);opacity:0;transform:scale(.6);transition:transform .5s var(--ease),opacity .4s}
.plan-names button:hover{color:#4F5A6D}
.plan-names button[aria-selected="true"]{color:var(--ink)}
.plan-names button[aria-selected="true"]::before{transform:scale(1);opacity:1}
.plan-stage{padding-top:.6em;min-height:340px}
.plan-stage > *{transition:opacity .28s var(--ease-soft),transform .28s var(--ease-soft)}
.plan-stage.is-swapping > *{opacity:0;transform:translateY(6px)}
.plan-price{font-family:var(--f-display);font-size:clamp(4.5rem,8.4vw,8.4rem);line-height:.9;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:lining-nums}
.plan-price .per{font-family:var(--f-text);font-size:1.125rem;letter-spacing:0;color:var(--soft);margin-left:10px}
.plan-desc{margin:28px 0 32px;max-width:40ch}
.plan-extra{margin-top:72px;max-width:62ch;color:var(--soft)}
.plan-fallback{margin-top:20px}

/* faq: index cards */
.faq{padding:var(--gap-section) 0 0}
.faq-title{margin-bottom:56px}
.drawer{max-width:1040px}
.card{position:relative;background:var(--card-white);border-radius:var(--radius)}
.card h3{font:inherit;color:inherit}
.card button{display:flex;align-items:center;gap:18px;width:100%;border:0;background:transparent;text-align:left;cursor:pointer;padding:28px 36px;color:var(--ink)}
.card button .ring{width:18px;height:18px;border-width:3px;transition:background-color .4s}
.card.is-open button .ring{background:var(--teal)}
.card .q{display:block;font-family:var(--f-display);font-size:var(--t-lead);line-height:1.2;transition:color .3s}
.card button:hover .q{color:var(--teal)}
.card .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.card .a > p{overflow:hidden;padding:0 36px 0 72px;max-width:calc(56ch + 72px);color:var(--body);transition:padding .6s var(--ease)}
.card.is-open .a{grid-template-rows:1fr}
.card.is-open .a > p{padding-bottom:36px}
.drawer .card + .card{margin-top:10px}
.faq-more{margin-top:36px}

/* close */
.close{padding:var(--gap-section) 0 0;overflow:hidden}
.close-tile{position:relative;overflow:hidden;background:var(--teal);color:#fff;border-radius:var(--radius);min-height:440px;padding:64px clamp(32px,5vw,80px);display:flex;flex-direction:column;justify-content:center}
.close-tile .h2{color:#fff;position:relative}
.close-tile > p,.close-actions{position:relative}
.close-disc{position:absolute;right:-8%;top:50%;width:min(560px,48vw);aspect-ratio:1;border-radius:50%;background:var(--teal-dk);transform:translateY(-50%)}
.close-disc::after{content:"";position:absolute;inset:22%;border-radius:50%;background:var(--teal)}
.close-tile p{max-width:46ch;margin:20px 0 32px;color:rgba(255,255,255,.9)}
.close-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}

/* motion: content is visible by default; only .js hides it for the entrance */
.js [data-cut] .line{overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.js [data-cut] .line > span{display:inline-block;transform:translateY(108%);transition:transform 1.15s var(--ease)}
.js .is-in[data-cut] .line > span,.js [data-cut].is-in .line > span{transform:none}
.js [data-after]{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease-soft),transform .9s var(--ease)}
.js .hero.is-in [data-after]{opacity:1;transform:none}
.js .hero.is-in [data-after]:nth-of-type(2){transition-delay:.08s}
.js .hero-disc{transform:translateY(-50%) scale(.94);opacity:0;transition:transform 1.8s var(--ease),opacity 1.2s var(--ease-soft)}
.js .hero.is-in .hero-disc{transform:translateY(-50%) scale(1);opacity:1}
.js .hero-photo{opacity:0;transition:opacity 1.4s var(--ease-soft) .35s}
.js .hero.is-in .hero-photo{opacity:1}
.js .hero-photo img{transition:transform 9s var(--ease-soft)}
.js .hero.is-in .hero-photo img{transform:scale(1)}
.js .lesson-card{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease-soft) .7s,transform 1.2s var(--ease) .7s}
.js .hero.is-in .lesson-card{opacity:1;transform:none}
.js [data-reveal] > *,.js [data-reveal].menu > li{opacity:0;transition:opacity 1s var(--ease-soft);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-reveal].stages,.js [data-reveal].plans{opacity:0;transition:opacity 1s var(--ease-soft)}
.js [data-reveal].stages > *,.js [data-reveal].plans > *{opacity:1;transform:none}
.js [data-reveal].is-in > *,.js [data-reveal].is-in.menu > li,.js [data-reveal].is-in.stages,.js [data-reveal].is-in.plans{opacity:1;transform:none}
.js [data-reveal]:is(.h2,p,.close-tile){opacity:0;transition:opacity 1s var(--ease-soft)}
.js [data-reveal]:is(.h2,p,.close-tile) > *{opacity:1;transform:none}
.js [data-reveal]:is(.h2,p,.close-tile).is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js [data-cut] .line > span,.js [data-after],.js .hero-disc,.js .hero-photo,.js .lesson-card,.js [data-reveal],.js [data-reveal] > *,.js [data-reveal].menu > li,.js .drawer .card{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  .js .hero-disc{transform:translateY(-50%) !important}
  .js .hero-photo{transform:translateY(-52%) !important}
  .js .hero-photo img{transform:none !important}
  .stage,.stage-body,.card .a,.voice,.voice-line path{transition:none !important}
}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .stage-body{grid-template-columns:1fr;gap:24px;padding:36px 36px}
  .stage-body .frag{justify-self:start;max-width:320px}
  .frag-phone{max-width:180px}
  .stages{height:640px}
}

/* ---------- phone ---------- */
@media (max-width:860px){

  .hero{flex-direction:column;align-items:stretch;min-height:0;padding:0 0 64px}
  .hero-disc{position:relative;left:auto;top:auto;transform:none;width:150vw;height:150vw;margin:-74vw 0 0 0;align-self:flex-end;margin-right:-62vw}
  .js .hero-disc,.js .hero.is-in .hero-disc{transform:none}
  .js .hero-disc{transform:scale(.94)}
  .js .hero.is-in .hero-disc{transform:none}
  .hero-photo{left:auto;right:8vw;top:6vw;width:66vw;height:66vw;transform:none}
  .js .hero-photo{transform:none}
  .lesson-card{position:relative;left:auto;top:auto;width:auto;margin:-20vw var(--margin) 0 var(--margin);order:3}
  .hero-copy{order:2;margin-top:28px}
  .hero-copy h1{max-width:none;font-size:clamp(2.75rem,12.5vw,4.4rem)}
  .hero-lead{margin-top:22px;font-size:var(--t-body)}
  .hero-actions{margin-top:26px}
  .hero-actions .btn{width:100%}
  .lesson-card{margin-top:40px}

  .how-intro{grid-template-columns:1fr;gap:20px;margin-bottom:40px}
  .stages{flex-direction:column;height:auto;border-radius:var(--radius)}
  .stage{flex:none}
  .stage h3{position:relative;inset:auto}
  .stage-tab{position:relative;inset:auto;height:68px;padding:0 22px}
  .stage-tab span{position:static;transform:none;font-size:var(--t-lead);display:flex;align-items:center;height:100%;opacity:1 !important}
  .stage.is-open .stage-tab{pointer-events:none}
  .stage.is-open .stage-tab span{opacity:1}
  .stage-body{position:relative;inset:auto;display:none;padding:0 22px 28px;grid-template-columns:1fr;gap:24px}
  .stage.is-open .stage-body{display:grid}
  .stage-name{display:none}
  .stage-body .frag{max-width:100%;justify-self:stretch}
  .stage-body .frag-phone{max-width:200px;justify-self:start}

  .voice-inner{grid-template-columns:1fr;gap:40px;min-height:0;padding-top:88px;padding-bottom:88px}
  .voice-sentence{font-size:clamp(2.2rem,11vw,3.4rem);margin-bottom:32px}
  .vc-btn{min-height:76px;padding:0 20px;gap:12px}
  .vc-btn svg{width:42px}

  .menu-head{flex-direction:column;gap:6px;margin-bottom:18px}
  .menu{grid-template-columns:1fr;gap:32px}
  .bullet{width:52px;height:52px}
  .bullet svg{width:26px;height:26px}
  .menu h3,.menu h4{flex-direction:column;gap:2px}

  .panel{display:flex;flex-direction:column;min-height:0}
  .panel-left{display:contents}
  .panel .h2{order:1;padding:48px 24px 0;max-width:none}
  .panel-right{order:2;padding:28px 24px 0;gap:32px}
  .portraits{order:3;position:relative;left:auto;bottom:auto;margin:56px 0 -10vw;justify-content:center}
  .portrait{width:32vw;height:32vw;font-size:14vw}
  .portrait-charles{margin-left:-6vw;transform:translateY(-8vw)}
  .portrait-cynde{margin-left:-6vw}

  .plans{grid-template-columns:1fr;gap:20px}
  .plan-names button{font-size:clamp(2.6rem,11vw,3.6rem)}
  .plan-stage{min-height:0;padding-top:12px}
  .plan-price{font-size:clamp(4rem,20vw,5.5rem)}
  .plan-stage .btn{width:100%}

  .card button{padding:22px 22px;gap:14px}
  .card .a > p{padding:0 22px 0 54px}

  .close-tile{padding:44px 26px 200px;min-height:0}
  .close-disc{top:auto;bottom:-130px;right:-60px;width:300px;transform:none}
  .close-actions .btn{width:100%}

}