/* Direction G — Радость : shared shell for all pages */

:root{
  --ink:#2A2B7C; --body:#4A5270; --muted:#77809B;
  --indigo:#4F46E5; --pink:#E85D9E; --amber:#FBBF24;
  --sky:#EEF4FD; --lav:#F1EDFB; --white:#FFFFFF;
  --kids:#FDF0CE; --teens:#DCEAFD; --adults:#EBE4FB;
  --art-pink:#E8467F; --art-purple:#6D3F9E; --art-cream:#FDF4F8;
  --line:#E4E8F4;
  --r-card:20px; --r-btn:14px; --r-pill:999px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
/* height:auto is not optional once <img> carries width/height attributes:
   without it the attribute height becomes a fixed CSS height while the width
   scales, and the picture squashes */
img{max-width:100%;height:auto}
body{margin:0;background:var(--white);color:var(--body);
     font:400 17px/1.65 'Nunito',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 36px}
h1,h2,h3{margin:0;color:var(--ink);font-weight:800;letter-spacing:-.02em}
p{margin:0}
a{color:var(--indigo)}
.hand{font-family:'Caveat',cursive;font-weight:700}

/* ── NAV ─────────────────────────────────────────────── */
.nav{background:var(--white);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;
           height:84px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo svg{flex:none}
.logo .t{display:block;font-weight:900;font-size:21px;color:var(--ink);line-height:1.15;letter-spacing:-.02em}
.logo .s{display:block;font-size:13px;color:var(--muted);font-weight:600;line-height:1.3;margin-top:1px}
.menu{display:flex;align-items:center;gap:24px;font-weight:700;font-size:15px}
.menu a{color:var(--ink);text-decoration:none}
.menu a:hover{color:var(--indigo)}
.menu a.on{color:var(--indigo);border-bottom:2.5px solid var(--indigo);padding-bottom:3px}
.lang{border:1.5px solid var(--line);border-radius:var(--r-pill);padding:7px 16px;font-size:14px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:800;font-size:16px;
     padding:15px 28px;border-radius:var(--r-btn);background:var(--indigo);color:#fff;
     text-decoration:none;border:none;cursor:pointer}
.btn:hover{background:var(--ink)}
.btn-sm{padding:11px 22px;font-size:15px;border-radius:var(--r-pill)}
/* .menu a (0,1,1) outranks .btn (0,1,0), which turned the nav button's label
   dark navy on indigo. Restate it at higher specificity. */
.menu a.btn,.menu a.btn:hover{color:#fff}
.btn-ghost{background:var(--white);color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--white);color:var(--indigo);border-color:var(--indigo)}

/* ── HOME HERO ───────────────────────────────────────── */
.hero{background:linear-gradient(180deg,var(--sky),#F7FAFE);padding:56px 0 0;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);
            gap:48px;align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,68px);line-height:1.04;margin-bottom:22px}
.hero h1 .joy{display:block;color:var(--pink);font-weight:900}
.hero .lede{font-size:19.5px;line-height:1.6;max-width:44ch;margin-bottom:30px}
.hero .cta-row{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.hero .free{font-weight:700;font-size:15.5px;color:var(--muted)}
.hero-art{margin-bottom:-6px}
.hero-art img{width:100%;height:auto;display:block;border-radius:var(--r-card);aspect-ratio:1080/1149}

/* ── INTERIOR PAGE HEADER ────────────────────────────── */
.phead{background:linear-gradient(180deg,var(--sky),#F7FAFE);padding:60px 0 66px;text-align:center}
.phead h1{font-size:clamp(34px,4.6vw,54px);line-height:1.08;margin-bottom:14px}
.phead p{font-size:19px;max-width:58ch;margin:0 auto}
.phead .kicker{display:inline-block;background:var(--white);border:1.5px solid var(--line);
               border-radius:var(--r-pill);padding:7px 18px;font-size:14px;font-weight:800;
               color:var(--ink);margin-bottom:18px}

/* ── FOUR SKILLS ─────────────────────────────────────── */
.skills{background:var(--white);padding:34px 0 8px}
.skills .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:14px}
.skill{border-radius:var(--r-card);padding:20px 22px;color:#fff}
.skill .ru{font-size:26px;font-weight:900;line-height:1.1;letter-spacing:-.02em}
.skill .en{font-size:14.5px;font-weight:700;opacity:.9;margin-top:2px}
.s-read{background:#3B82C4} .s-write{background:var(--pink)}
.s-speak{background:#E9A227} .s-play{background:#4CA96B}

/* ── FEATURE PILLS ───────────────────────────────────── */
.pills{padding:34px 0 56px}
.pills .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px}
.pill{display:flex;align-items:center;gap:14px;background:var(--white);border:1.5px solid var(--line);
      border-radius:var(--r-pill);padding:14px 22px}
.pill .ic{width:44px;height:44px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center}
.pill .tx{font-weight:800;font-size:15px;color:var(--ink);line-height:1.3}
.pill .tx span{display:block;font-weight:600;color:var(--muted);font-size:14px}

/* ── LEARNING PATHS ──────────────────────────────────── */
.paths{background:var(--lav);padding:66px 0 72px;position:relative}
.paths::before{content:'';position:absolute;top:-1px;left:0;right:0;height:44px;background:var(--white);
               border-radius:0 0 50% 50%/0 0 100% 100%}
.paths .head{text-align:center;max-width:620px;margin:0 auto 40px;position:relative}
.paths h2{font-size:clamp(28px,3.6vw,42px);line-height:1.14;margin-bottom:10px}
.paths .head p{font-size:18px;color:var(--body)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px;position:relative}
.path{background:var(--white);border-radius:var(--r-card);overflow:hidden;
      box-shadow:0 10px 30px rgba(42,43,124,.09);display:flex;flex-direction:column}
.path img{width:100%;height:auto;display:block;aspect-ratio:356/240;object-fit:cover}
.path .in{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.path .age{display:inline-block;align-self:flex-start;border-radius:var(--r-pill);
           padding:5px 13px;font-size:13px;font-weight:800;margin-bottom:10px;color:var(--ink)}
.path h3{font-size:23px;margin-bottom:9px}
.path p{font-size:15.5px;line-height:1.55;flex:1}
.path .more{margin-top:18px;font-weight:800;font-size:15.5px;text-decoration:none;
            border-bottom:2.5px solid currentColor;align-self:flex-start;padding-bottom:2px}
.p-kids .age{background:var(--kids)} .p-kids .more{color:#B4801A}
.p-teens .age{background:var(--teens)} .p-teens .more{color:#2C6BB5}
.p-adults .age{background:var(--adults)} .p-adults .more{color:#7048C4}

/* ── DRAWING COURSE ──────────────────────────────────── */
.draw{background:var(--art-cream);padding:66px 0}
.draw .band{max-width:1040px;margin:0 auto;background:var(--white);border-radius:24px;overflow:hidden;
            display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
            gap:0;align-items:stretch;
            box-shadow:0 14px 44px rgba(109,63,158,.13);border:1px solid #F3E3EF}
.draw .pad{padding:44px 40px}
.draw .tag{font-size:13px;font-weight:800;color:var(--art-purple);margin-bottom:8px}
.draw h2{font-size:clamp(26px,3.4vw,38px);line-height:1.15;margin-bottom:12px;color:var(--art-pink)}
.draw p{font-size:17px;line-height:1.6;max-width:46ch}
.draw .chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.draw .chip{font-size:13.5px;font-weight:700;color:var(--art-purple);background:#F6EDF8;
            border-radius:var(--r-pill);padding:8px 15px}
.draw .btn-art{background:var(--art-purple)}
.draw .btn-art:hover{background:var(--art-pink)}
.draw .shot{position:relative;background:linear-gradient(150deg,#F7ECF5,#EFE7FB);
            display:flex;align-items:center;justify-content:center;padding:30px}
.draw .shot img{width:100%;height:auto;display:block;border-radius:16px;aspect-ratio:420/390;
                box-shadow:0 10px 30px rgba(109,63,158,.22)}
.draw .badge{position:absolute;left:46px;bottom:46px;background:var(--white);border-radius:12px;
             padding:9px 15px;font-size:13px;font-weight:800;color:var(--art-purple);
             box-shadow:0 4px 14px rgba(0,0,0,.1)}
@media(max-width:860px){
  .draw .band{grid-template-columns:1fr;gap:0}
  .draw .pad{padding:32px 26px}
  .draw .badge{left:40px;bottom:40px}
}

/* ── SECTIONS ────────────────────────────────────────── */
.sec{padding:70px 0}
.sec-sky{background:var(--sky)}
.sec-lav{background:var(--lav)}
.head-c{text-align:center;max-width:620px;margin:0 auto 36px}
.head-c h2{font-size:clamp(26px,3.2vw,36px);margin-bottom:8px}
.head-c p{color:var(--muted)}

/* ── PROOF / REVIEWS ─────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px}
.q{background:var(--sky);border-radius:var(--r-card);padding:26px}
.q.on-sky{background:var(--white)}
.q .stars{color:var(--amber);letter-spacing:3px;font-size:15px;margin-bottom:12px}
.q p{font-size:16px;line-height:1.55;color:var(--ink);font-weight:600}
.q cite{display:block;margin-top:14px;font-style:normal;font-size:14px;color:var(--muted);font-weight:700}
/* one panel, hairline-divided — the 1px grid gap becomes the divider,
   so it stays correct however the columns wrap */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
       gap:1px;background:#DBE5F6;border:1px solid #DBE5F6;border-radius:var(--r-card);
       overflow:hidden;margin-top:44px}
.stat{background:var(--sky);padding:30px 26px;text-align:center}
.stat .ic{width:46px;height:46px;border-radius:50%;background:var(--white);margin:0 auto 13px;
          display:flex;align-items:center;justify-content:center}
.stat b{display:block;font-size:34px;font-weight:900;color:var(--indigo);
        letter-spacing:-.025em;line-height:1.05}
.stat .k{display:block;font-size:15px;color:var(--body);font-weight:700;margin-top:6px;line-height:1.45}
.rating{display:flex;align-items:center;gap:20px;width:max-content;max-width:100%;
        background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-card);
        padding:20px 30px;margin:0 auto 16px;flex-wrap:wrap;justify-content:center}
.rating .big{font-size:52px;font-weight:900;color:var(--ink);line-height:1;letter-spacing:-.035em}
.rating .stars{color:var(--amber);letter-spacing:4px;font-size:20px;line-height:1;margin-bottom:6px}
.rating .src{font-size:14.5px;color:var(--muted);font-weight:700;line-height:1.3}
.ratingnote{text-align:center;font-size:14px;color:var(--muted);font-weight:600;
            max-width:600px;margin:0 auto 40px;line-height:1.5}

/* ── LEVELS (programs) ───────────────────────────────── */
.levels{display:grid;gap:16px}
.level{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,330px);gap:28px;
       background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-card);padding:26px 28px}
.level .n{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;
          font-size:26px;font-weight:900;color:#fff}
.level .n span{display:block}
.lv0 .n{background:#3FA37A} .lv1 .n{background:#3B82C4}
.lv2 .n{background:#E9A227} .lv3 .n{background:#8B5CD6}
.level .age{font-size:13px;font-weight:800;color:var(--muted);margin-top:9px;display:block}
.level h3{font-size:21px;margin-bottom:7px}
.level .out{font-size:16px;color:var(--body);line-height:1.55}
.level ul{margin:0;padding-left:20px;font-size:15.5px;line-height:1.8;color:var(--muted)}

/* ── PRICING ─────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:20px}
.plan{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-card);
      padding:30px 26px;display:flex;flex-direction:column;text-align:center}
.plan.feature{border-color:var(--indigo);border-width:2.5px;position:relative}
.plan.feature .tagtop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
                      background:var(--indigo);color:#fff;border-radius:var(--r-pill);
                      padding:4px 15px;font-size:12.5px;font-weight:800;white-space:nowrap}
.plan .dur{font-size:16px;font-weight:800;color:var(--ink)}
.plan .amt{font-size:48px;font-weight:900;color:var(--ink);letter-spacing:-.03em;line-height:1.05;margin:8px 0 2px}
.plan .cur{font-size:15px;color:var(--muted);font-weight:700}
.plan .desc{font-size:15px;line-height:1.55;margin-top:14px;flex:1}
.plan .amt.word{font-size:34px;letter-spacing:-.02em}
.plan.trial{background:var(--indigo);border-color:var(--indigo)}
.plan.trial .dur,.plan.trial .amt{color:#fff}
.plan.trial .cur,.plan.trial .desc{color:#C7C3F6}
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px;margin-top:14px}
.inc{display:flex;gap:13px;align-items:flex-start;background:var(--white);border-radius:var(--r-card);
     padding:20px 22px;border:1.5px solid var(--line)}
.inc .tick{width:26px;height:26px;flex:none;border-radius:50%;background:#E4F6EC;
           display:flex;align-items:center;justify-content:center;margin-top:1px}
.inc b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:2px}
.inc span{font-size:15px;line-height:1.5}

/* ── FAMILY DISCOUNTS ────────────────────────────────── */
.fam{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.fam .card{background:var(--white);border:1.5px solid var(--line);
           border-radius:var(--r-card);padding:28px 26px}
.fam .card.lead{grid-column:1/-1;border-color:var(--indigo);border-width:2.5px;
                display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                gap:34px;align-items:center;padding:30px 32px}
.fam .tag{display:inline-block;background:var(--indigo);color:#fff;border-radius:var(--r-pill);
          padding:4px 14px;font-size:12.5px;font-weight:800;margin-bottom:12px}
.fam h3{font-size:21px;margin-bottom:8px}
.fam .rule{font-size:17.5px;font-weight:800;color:var(--indigo);line-height:1.4;margin:0 0 8px}
.fam p{font-size:15.5px;line-height:1.55;margin:0}
.ptab{border-collapse:collapse;width:100%;font-size:16px}
.ptab th,.ptab td{text-align:right;padding:12px 8px;border-bottom:1px solid var(--line)}
.ptab th:first-child,.ptab td:first-child{text-align:left;padding-left:0}
.ptab td:last-child,.ptab th:last-child{padding-right:0}
.ptab thead th{font-size:13px;font-weight:800;color:var(--muted);
               text-transform:uppercase;letter-spacing:.04em}
.ptab tbody th{font-weight:800;color:var(--ink);white-space:nowrap}
.ptab td{font-weight:800;color:var(--ink)}
.ptab .off{font-size:13.5px;font-weight:700;color:var(--muted);
           padding-top:12px;line-height:1.5;text-align:left;border-bottom:none;
           white-space:normal}   /* a sentence, not a figure — must wrap */
/* old price first so the prices actually paid line up down the right edge */
.ptab td{white-space:nowrap}
.ptab td small{font-size:13.5px;font-weight:700;color:var(--muted);margin-right:7px;
               text-decoration:line-through;text-decoration-thickness:1px}
@media(max-width:820px){
  .fam{grid-template-columns:1fr}
  .fam .card.lead{grid-template-columns:1fr;gap:22px}
  .ptab{font-size:15px}
}
/* both prices fit side by side down to about 375px once the mobile cell padding
   kicks in; below that there is genuinely no room, so stack them */
@media(max-width:374px){
  .ptab td small{display:block;margin:2px 0 0}
}
.fam .card.pkg{border-color:var(--indigo);border-width:2.5px;
               background:linear-gradient(180deg,var(--sky),var(--white))}
/* ── PRICE CALCULATOR ────────────────────────────────── */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:0;
      background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-card);
      overflow:hidden;margin-bottom:20px}
.calc-controls{padding:28px 30px;display:grid;gap:18px;align-content:start}
.cf{display:grid;gap:8px;min-width:0}
.cf .cl{font-size:14px;font-weight:800;color:var(--ink)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{font-family:inherit;font-size:15px;font-weight:800;color:var(--body);
            background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-pill);
            padding:10px 18px;cursor:pointer;line-height:1.2}
.seg button:hover{border-color:var(--indigo);color:var(--indigo)}
.seg button[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.seg button:focus-visible{outline:2.5px solid var(--indigo);outline-offset:2px}
.calc-out{background:var(--sky);padding:28px 26px;display:flex;flex-direction:column;
          justify-content:center;text-align:center;border-left:1px solid #DBE5F6}
.calc-out .lbl{font-size:14px;font-weight:800;color:var(--muted)}
.calc-out .amt{font-size:50px;font-weight:900;color:var(--ink);letter-spacing:-.035em;
               line-height:1;margin:8px 0 4px}
.calc-out .was{font-size:15px;font-weight:700;color:var(--muted)}
.calc-out .was s{text-decoration-thickness:1px}
.calc-out .save{display:inline-block;background:#E4F6EC;color:#1B6B45;border-radius:var(--r-pill);
                padding:5px 14px;font-size:14px;font-weight:800;margin-top:12px}
.calc-out .per{font-size:14.5px;color:var(--muted);font-weight:700;margin-top:14px;line-height:1.5}
.calc-out .which{display:block;font-size:13px;font-weight:800;color:var(--indigo);margin-top:10px}
.calcnote{font-size:14px;color:var(--muted);font-weight:600;text-align:center;
          margin:0 auto 26px;max-width:640px;line-height:1.5}
@media(max-width:820px){
  .calc{grid-template-columns:1fr}
  .calc-out{border-left:none;border-top:1px solid #DBE5F6}
}
@media(max-width:600px){
  .calc-controls{padding:22px 20px;gap:16px}
  .calc-out{padding:24px 20px}
  .calc-out .amt{font-size:42px}
  .seg button{font-size:14.5px;padding:9px 15px}
}

/* the price leads, the saving follows quietly — three treatments on one line
   read as clutter, not as a bargain */
.pkgprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:4px 0 5px}
.pkgprice b{font-size:46px;font-weight:900;color:var(--ink);letter-spacing:-.03em;line-height:1}
.pkgprice span{font-size:16.5px;font-weight:800;color:var(--muted)}
.pkgsave{font-size:15px;font-weight:700;color:var(--muted);margin:0}
.pkgsave s{text-decoration-thickness:1px}
.pkgsave em{font-style:normal;color:#1B6B45;font-weight:800}
.pkgnums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#DBE5F6;
         border:1px solid #DBE5F6;border-radius:14px;overflow:hidden;margin:18px 0}
.pkgnums div{background:var(--white);padding:14px 8px;text-align:center;min-width:0}
.pkgnums b{display:block;font-size:27px;font-weight:900;color:var(--indigo);
           line-height:1.1;letter-spacing:-.02em}
.pkgnums span{display:block;font-size:13px;font-weight:700;color:var(--muted);
              margin-top:3px;line-height:1.35}
.famnote{margin-top:20px;background:var(--white);border:1.5px solid var(--line);
         border-radius:var(--r-card);padding:24px 28px}
.famnote b{display:block;color:var(--ink);font-size:16.5px;margin-bottom:9px}
.famnote ul{margin:0;padding-left:20px;font-size:15.5px;line-height:1.75}
.famnote li+li{margin-top:5px}

/* ── FAQ ─────────────────────────────────────────────── */
.faq{display:grid;gap:14px;max-width:820px;margin:0 auto}
.faq details{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-card);
             padding:20px 24px}
.faq summary{cursor:pointer;font-weight:800;color:var(--ink);font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;font-weight:900;color:var(--indigo);font-size:22px;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{margin-top:12px;font-size:16px;line-height:1.6}

/* ── CONTACT ─────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:34px}
.form{display:grid;gap:14px}
.form label{font-weight:800;color:var(--ink);font-size:15px;display:block;margin-bottom:6px}
.form > div{min-width:0}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:16px;color:var(--body);
  border:1.5px solid var(--line);border-radius:var(--r-btn);padding:13px 15px;background:var(--white)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2.5px solid var(--indigo);outline-offset:1px;border-color:transparent}
.form textarea{min-height:120px;resize:vertical}
.info{display:grid;gap:16px;align-content:start}
.info .box{background:var(--sky);border-radius:var(--r-card);padding:24px 26px}
.info .box b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.info .box a{font-weight:800}

/* ── FORM VALIDATION ─────────────────────────────────── */
.hint{display:block;font-weight:600;color:var(--muted);font-size:14px;margin-top:3px}
.err{display:none;color:#C0344F;font-weight:700;font-size:14.5px;margin-top:7px}
.field.bad input{border-color:#DE7690}
.field.bad .err{display:block}
.sent{background:#E9F7EF;border:1.5px solid #A9DCC0;border-radius:var(--r-card);padding:30px;text-align:center}
.sent b{display:block;color:var(--ink);font-size:20px;margin-bottom:7px}
.sent p{font-size:16px;line-height:1.55}

/* ── SUBJECT CHOICE ──────────────────────────────────── */
.choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px;margin-top:10px}
.choice .opt{display:flex;align-items:center;gap:13px;background:var(--white);cursor:pointer;
             border:1.5px solid var(--line);border-radius:var(--r-card);padding:16px 18px;
             font-weight:800;color:var(--ink);font-size:16px;margin:0}
.choice .opt:hover{border-color:var(--indigo)}
.choice .opt.on{border-color:var(--indigo);background:#F5F4FE}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .mark{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--line);
              background:var(--white);position:relative}
.choice .opt.on .mark{border-color:var(--indigo);background:var(--indigo)}
.choice .opt.on .mark::after{content:'';position:absolute;inset:4px;border-radius:50%;background:#fff}
.choice input:focus-visible ~ .mark{outline:2.5px solid var(--indigo);outline-offset:2px}
.choice .sub{display:block;font-weight:600;font-size:14px;color:var(--muted);margin-top:2px}

/* ── CALENDAR + TIME SLOTS ───────────────────────────── */
.cal{border:1.5px solid var(--line);border-radius:var(--r-card);padding:18px;margin-top:10px;background:var(--white)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.cal-title{font-weight:800;color:var(--ink);font-size:16.5px}
.cal-nav{width:34px;height:34px;flex:none;border-radius:50%;border:1.5px solid var(--line);
         background:var(--white);font-family:inherit;font-size:19px;line-height:1;color:var(--ink);cursor:pointer}
.cal-nav:hover:not(:disabled){border-color:var(--indigo);color:var(--indigo)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-dow span{text-align:center;font-size:12px;font-weight:800;color:var(--muted);padding-bottom:6px}
.day{aspect-ratio:1;min-width:0;border:1.5px solid transparent;border-radius:11px;background:transparent;
     font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;padding:0}
.day:hover:not(:disabled){border-color:var(--indigo);color:var(--indigo)}
.day[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.day:disabled{color:#C6CBDB;cursor:default}
.day.blank{visibility:hidden;pointer-events:none}
.day.today:not([aria-pressed="true"]){border-color:var(--line);background:var(--sky)}
.cal-times{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.cal-times .lbl{font-weight:800;color:var(--ink);font-size:15px;margin-bottom:9px}
.tchips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{font-family:inherit;font-size:14px;font-weight:700;color:var(--body);background:var(--white);
       border:1.5px solid var(--line);border-radius:var(--r-pill);padding:9px 15px;cursor:pointer}
.tchip:hover{border-color:var(--indigo);color:var(--indigo)}
.tchip[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.picksum{margin-top:14px;font-size:14.5px;font-weight:700;color:var(--muted)}
.picksum b{color:var(--ink)}
.cal-nav:focus-visible,.day:focus-visible,.tchip:focus-visible{outline:2.5px solid var(--indigo);outline-offset:2px}

/* ── FOOTER ──────────────────────────────────────────── */
.flourish{text-align:center;padding:64px 0 10px}
.flourish .line{font-family:'Caveat',cursive;font-weight:700;font-size:clamp(30px,4vw,44px);
                color:var(--ink);line-height:1.25}
.flourish .line em{font-style:normal;color:var(--pink)}
footer{border-top:1px solid var(--line);margin-top:44px;padding:32px 0 56px;
       font-size:15px;color:var(--muted);font-weight:600}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer b{color:var(--ink)}
footer a{color:var(--muted);text-decoration:underline;text-decoration-thickness:1px;
         text-underline-offset:3px}
footer a:hover{color:var(--indigo)}
footer .flinks{display:flex;gap:20px;flex-wrap:wrap}
footer .flinks a{color:var(--muted);text-decoration:none}
footer .flinks a:hover{color:var(--indigo)}

/* ── TABLET (iPad portrait and below) ────────────────── */
@media(max-width:900px){
  .wrap{padding:0 24px}
  .hero .wrap{grid-template-columns:1fr;gap:28px}
  .hero{padding:44px 0 0}
  .level{grid-template-columns:76px minmax(0,1fr);gap:20px}
  .level .detail{grid-column:2}
  /* the fixed 84px bar cannot hold a wrapped menu — let it grow instead */
  .nav .wrap{height:auto;padding-top:14px;padding-bottom:14px;gap:14px}
  .menu{gap:18px;row-gap:10px;flex-wrap:wrap}
  .sec{padding:52px 0}
  .phead{padding:44px 0 48px}
  .paths{padding:52px 0 56px}
  .draw{padding:52px 0}
  .head-c{margin-bottom:28px}
}

/* ── PHONE ───────────────────────────────────────────── */
@media(max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 20px}

  .logo svg{width:34px;height:34px}
  .logo .t{font-size:18px}
  .logo .s{font-size:12px}
  .menu{gap:14px;row-gap:10px;font-size:14.5px}
  .menu .btn-sm{padding:10px 18px;font-size:14px}
  .lang{padding:6px 13px}

  .sec{padding:40px 0}
  .phead{padding:32px 0 36px}
  .phead p{font-size:17px}
  .paths{padding:40px 0 44px}
  .draw{padding:40px 0}
  .hero{padding-top:32px}
  .hero .lede{font-size:17.5px}
  .btn{padding:14px 24px;font-size:15.5px}

  .skills{padding:24px 0 4px}
  .pills{padding:24px 0 36px}
  .pill{padding:12px 18px;gap:12px}
  .pill .ic{width:38px;height:38px}

  .path .in{padding:20px 20px 22px}
  .draw .pad{padding:26px 20px}
  .draw .shot{padding:20px}
  .draw .badge{left:30px;bottom:30px}

  .q{padding:22px 20px}
  .stat{padding:24px 18px}
  .stat b{font-size:30px}
  .rating{padding:16px 22px;gap:16px}
  .rating .big{font-size:44px}

  .level{padding:22px 20px;gap:16px}
  .level .n{width:54px;height:54px;font-size:23px;border-radius:15px}
  .level{grid-template-columns:54px minmax(0,1fr)}

  .plan{padding:26px 20px}
  .plan .amt{font-size:40px}
  .plan .amt.word{font-size:30px}
  /* pulled out of the card's top edge it would wrap over the border; in flow it
     simply takes a line of its own */
  .plan.feature .tagtop{position:static;transform:none;align-self:center;
                        white-space:normal;margin-bottom:10px}

  .inc{padding:18px}
  .fam .card,.fam .card.lead{padding:24px 20px}
  .famnote{padding:20px 22px}
  .ptab th,.ptab td{padding:11px 4px}
  .ptab thead th{font-size:12px;letter-spacing:.02em}

  .faq details{padding:18px 20px}
  .faq summary{font-size:16px}
  .faq details p{font-size:15.5px}

  .cal{padding:14px}
  .cal-dow,.cal-grid{gap:4px}
  .day{font-size:14px;border-radius:9px}

  .flourish{padding:44px 0 6px}
  footer{padding:26px 0 40px}
  footer .wrap{gap:16px}
}