/* same tokens as the Foreign and Heritage pages */
:root{
  --bg:#FFF9EE; --bg-2:#FFF1D6; --card:#fff; --line:#F4E1B5; --line-2:#EFD08A;
  --honey:#FFD466; --honey-2:#FFE7A3; --honey-3:#FFF4D6; --orange:#F08A0C; --orange-2:#F7A21B; --orange-text:#C96D00;
  --brown:#3A1E0C; --brown-2:#6B4B35; --teal:#123C4C; --teal-2:#35505B;
  --shadow:0 2px 0 rgba(236,196,110,.35), 0 10px 26px -18px rgba(150,90,0,.45);
  --head:'Montserrat','Arial Black',Arial,sans-serif; --body:'PT Sans','Segoe UI',Arial,sans-serif; --hand:'Caveat','Comic Sans MS',cursive;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); color-scheme:light;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--brown);font:17px/1.5 var(--body)}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid #3D72A8;outline-offset:3px;border-radius:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.hx{clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
/* picture slots: dashed frame until the file is on the server; .svg is accepted too */
.slot{position:relative}
.slot img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}
.slot:not(.has) img{visibility:hidden}
.slot:not(.has)::before{content:"";position:absolute;inset:0;border:2px dashed rgba(18,60,76,.14);border-radius:18px;background:rgba(255,255,255,.5)}

/* header — as on the section pages */
.top{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:70px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto}
.logo img{width:40px}
.logo b{font:800 17px/1.02 var(--head);letter-spacing:-.01em}
.nav{flex:1;display:flex;justify-content:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;text-decoration:none;padding:8px 16px;border-radius:999px;font:600 15px var(--head)}
.nav a:hover{background:var(--honey-3)}
.nav a[aria-current="page"]{background:var(--honey)}
.tools{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lang{font:600 13px var(--head);color:var(--brown-2)}
.lang b{color:var(--brown)}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--brown);cursor:pointer}
@media (max-width:1000px){.top .wrap{flex-wrap:wrap;gap:6px 12px;padding-bottom:8px}.nav{order:3;flex-basis:100%;justify-content:flex-start;margin:0 -22px;padding:0 22px}.tools{margin-left:auto}.lang{display:none}}

/* hero */
.hero{position:relative;background:linear-gradient(180deg,var(--bg-2),var(--bg));border-bottom:1px solid var(--line);overflow:hidden}
.hero .art{position:absolute;top:0;right:0;bottom:0;width:55%}
.hero .art img{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;object-fit:initial}
.hero .art.slot:not(.has)::before{inset:14px 14px 14px 8%;border-radius:22px;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(243,212,138,.25) 14px 15px)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:clamp(380px,36vw,500px);align-items:center;padding-top:22px;padding-bottom:30px}
.crumbs{display:flex;gap:8px;font-size:14px;color:var(--brown-2);margin:0 0 12px;padding:0;list-style:none}
.crumbs li+li::before{content:"›";margin-right:8px;color:#A08770}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.hero h1{font:800 clamp(44px,6.4vw,76px)/1 var(--head);letter-spacing:-.035em;color:var(--teal);margin:0}
.hero .tagline{font:800 clamp(20px,2.4vw,28px) var(--head);color:var(--orange-text);margin:10px 0 0}
.hero .sub{font:700 18px var(--body);color:var(--teal);margin:20px 0 4px}
.hero .lead{margin:0;color:var(--teal-2);max-width:42ch}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:0;cursor:pointer;font:700 17px var(--head);padding:14px 28px;border-radius:999px;background:linear-gradient(180deg,var(--orange-2),var(--orange));color:#fff;box-shadow:0 8px 18px -10px rgba(210,110,0,.9)}
.btn:hover{filter:brightness(1.05)}
.hero .btn{margin-top:22px}
.feats{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 20px}
.feats li{display:flex;align-items:center;gap:8px;font:700 13.5px/1.2 var(--body);color:var(--teal)}
.feats li span{max-width:110px}
.feats svg{width:30px;height:30px;flex:0 0 auto;color:var(--brown)}
@media (max-width:760px){
  .hero .art{position:relative;width:auto;height:210px}
  .hero .art.slot:not(.has)::before{inset:10px 22px}
  .hero .wrap{grid-template-columns:1fr;min-height:0}
}

/* section heads */
section.block{margin:44px 0}
.sh{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px}
.sh h2{font:800 clamp(24px,3vw,34px) var(--head);letter-spacing:-.02em;color:var(--teal);margin:0}
.sh .note{font:600 24px/1.05 var(--hand);color:var(--teal);transform:rotate(-4deg)}
.sh .note span{color:var(--orange)}

/* reading paths — the same card tones as the level and direction cards */
.paths{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.paths{grid-template-columns:1fr}}
.pcard{--t:#FFE7A3;--t2:#FFF6DA;--b:#F6C24A;--bt:#3A1E0C;position:relative;display:grid;grid-template-columns:42% minmax(0,1fr);gap:16px;align-items:center;background:linear-gradient(180deg,var(--t),var(--t2));border-radius:26px;padding:20px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.04)}
.pcard.green{--t:#D7EDD5;--t2:#EEF7EC;--b:#7DBF8A;--bt:#12301A}
.pcard.blue{--t:#D6E7F7;--t2:#EDF4FB;--b:#6FA3D8;--bt:#0F2A44}
.pcard.lilac{--t:#E6DDF5;--t2:#F3EEFA;--b:#9C86CF;--bt:#24163F}
.pcard:hover{box-shadow:0 0 0 2px var(--b),var(--shadow)}
.pcard a.cover{position:absolute;inset:0;border-radius:inherit;z-index:2}
.pcard .slot{aspect-ratio:1/1}
.pcard .step{display:inline-block;font:800 13px var(--head);color:var(--teal);background:rgba(255,255,255,.7);border-radius:999px;padding:2px 10px;margin-bottom:6px}
.pcard h3{font:800 clamp(24px,2.6vw,32px)/1.05 var(--head);letter-spacing:-.02em;color:var(--teal);margin:0}
.pcard strong{display:block;font:700 16px/1.3 var(--body);color:var(--teal);margin:8px 0 6px}
.pcard p{margin:0;font-size:14.5px;line-height:1.4;color:var(--teal-2)}
.pcard .go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:var(--b);color:var(--bt);font:700 15px var(--head);border-radius:999px;padding:10px 22px}
@media (max-width:460px){.pcard{grid-template-columns:1fr}.pcard .slot{max-width:220px}}

/* achievements + quiz */
.ach{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:center}
@media (max-width:900px){.ach{grid-template-columns:1fr}}
.goals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.goals li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;font:600 15px/1.3 var(--body);color:var(--teal);padding:4px 12px;border-left:1px solid var(--line)}
.goals li:first-child{border-left:0}
.goals svg{width:42px;height:42px}
@media (max-width:620px){.goals{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0}.goals li:nth-child(3){border-left:0}}
.quiz{position:relative;background:var(--honey-3);border:1px solid var(--line);border-radius:22px;padding:20px 22px}
.quiz h3{font:800 19px var(--head);color:var(--teal);margin:0 0 6px}
.quiz p{margin:0 0 14px;font-size:15px;color:var(--teal-2);max-width:26ch}
.quiz .btn{font-size:15px;padding:11px 22px}
.quiz img{position:absolute;right:14px;top:12px;width:54px}

/* panorama + quote */
.pano{position:relative;min-height:240px;display:flex;align-items:center;margin-top:10px}
.pano .slot{position:absolute;inset:0}
.pano .slot img{object-fit:cover}
.pano .slot:not(.has)::before{border:0;border-radius:0;background:linear-gradient(180deg,#D6E7F7,var(--bg-2))}
.quote{position:relative;z-index:2;margin:0 0 0 max(22px,calc((100vw - 1180px)/2 + 22px));background:rgba(255,255,255,.92);border-radius:36px;padding:20px 30px;font:600 28px/1.15 var(--hand);color:var(--teal);max-width:400px;box-shadow:var(--shadow)}
.quote span{color:var(--orange)}

/* footer — as on the section pages */
footer{border-top:1px solid var(--line);background:var(--card);font-size:14.5px;color:var(--brown-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.ftop{padding-top:26px;padding-bottom:20px}
.fbrand .logo img{width:34px}
.fbrand .logo b{font-size:15px}
.fbrand p{margin:8px 0 0;font-size:13.5px}
.fnav{display:flex;flex-wrap:wrap;gap:6px 26px}
.fnav a{text-decoration:none;font:600 14px var(--head);color:var(--brown)}
.fnav a:hover{color:var(--orange-text);text-decoration:underline}
.fside{display:flex;align-items:center;gap:22px}
.social{display:flex;gap:16px}
.social span{color:var(--brown);display:grid;place-items:center}
.social svg{width:20px;height:20px}
.fbottom{border-top:1px solid var(--line);padding-top:16px;padding-bottom:22px;font-size:13px}
.fhand{font:600 21px var(--hand);color:var(--brown)}
.fhand span{color:#E0483E}
@media (max-width:760px){.ftop,.fbottom{flex-direction:column;align-items:flex-start}}

/* ── Grammar: свои блоки ── */
.ghero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg-2),var(--bg));border-bottom:1px solid var(--line)}
.ghero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center;min-height:clamp(240px,26vw,340px);padding-top:22px;padding-bottom:26px}
.ghero h1{font:800 clamp(38px,5.4vw,64px)/1 var(--head);letter-spacing:-.035em;color:var(--teal);margin:0}
.ghero .en{font:800 clamp(18px,2.2vw,26px) var(--head);color:var(--orange-text);margin:6px 0 0}
.ghero p.lead{margin:14px 0 0;color:var(--teal-2);max-width:44ch}
.ghero .art{position:relative;min-height:200px}
.ghero .art img{width:100%;height:100%;object-fit:contain;object-position:right bottom}
/* широкая картинка-шапка: занимает правую часть до края экрана */
.ghero.wide{background:#FDF5E2}
.ghero.wide .art{position:absolute;top:0;right:0;bottom:0;left:38%;min-height:0}
.ghero.wide .art img{width:100%;height:100%;object-fit:cover;object-position:left center;border-radius:0}
.ghero.wide .art.slot:not(.has)::before{border-radius:0}
.ghero.wide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#FDF5E2 0,#FDF5E2 34%,rgba(253,245,226,.85) 44%,rgba(253,245,226,0) 60%)}
.ghero.wide .wrap{z-index:2}
@media (max-width:760px){.ghero.wide .art{position:relative;left:0;height:180px}.ghero.wide::after{display:none}}
@media (max-width:760px){.ghero .wrap{grid-template-columns:1fr}.ghero .art{min-height:150px}}

.ghero.banner{position:relative;background:#FFF6E4 url("../img/hero-grammar.webp") right center/cover no-repeat}
.ghero.banner .wrap{grid-template-columns:minmax(0,52%);min-height:clamp(260px,30vw,380px)}
.ghero.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,249,238,.96) 0,rgba(255,249,238,.9) 38%,rgba(255,249,238,0) 62%)}
@media (max-width:760px){.ghero.banner{background-position:72% center}.ghero.banner .wrap{grid-template-columns:1fr}.ghero.banner::before{background:linear-gradient(90deg,rgba(255,249,238,.97) 0,rgba(255,249,238,.86) 55%,rgba(255,249,238,.35) 100%)}}

/* карточки частей речи */
.pos{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.poscard{position:relative;display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;box-shadow:var(--shadow)}
.poscard:hover{border-color:var(--orange-2)}
.poscard.soon{background:transparent;box-shadow:none}
.poscard .slot{aspect-ratio:1/1;border-radius:14px;background:var(--honey-3)}
.poscard h3{font:800 18px/1.15 var(--head);color:var(--teal);margin:0}
.poscard p{margin:3px 0 0;font-size:14px;color:var(--teal-2)}
.poscard a.cover{position:absolute;inset:0;border-radius:inherit;z-index:2}

/* уровни */
.levels{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.lvl{--t:#FFE7A3;--t2:#FFF6DA;--b:#F6C24A;--bt:#3A1E0C;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 40%;gap:14px;background:linear-gradient(180deg,var(--t),var(--t2));border-radius:24px;padding:18px;box-shadow:var(--shadow)}
.lvl.two{--t:#D7EDD5;--t2:#EEF7EC;--b:#7DBF8A;--bt:#12301A}
.lvl.three{--t:#E6DDF5;--t2:#F3EEFA;--b:#9C86CF;--bt:#24163F}
.lvl a.cover{position:absolute;inset:0;border-radius:inherit;z-index:2}
.lvl .tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.8);border-radius:999px;padding:3px 12px;font:800 12.5px var(--head);color:var(--teal)}
.lvl h3{font:800 clamp(22px,2.4vw,28px)/1.05 var(--head);color:var(--teal);margin:8px 0 2px}
.lvl .cefr{font:700 16px var(--body);color:var(--teal-2)}
.lvl ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.lvl li{display:grid;grid-template-columns:16px 1fr;gap:8px;font-size:15px;color:var(--teal)}
.lvl li::before{content:"•";color:var(--orange)}
.lvl .slot{aspect-ratio:3/4;align-self:end}
.lvl .go{position:absolute;right:16px;bottom:16px;width:40px;height:40px;border-radius:50%;background:var(--b);color:var(--bt);display:grid;place-items:center;z-index:3}
@media (max-width:520px){.lvl{grid-template-columns:1fr}.lvl .slot{max-width:180px}}

/* юниты и уроки */
.units{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.unitcard{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow)}
.unitcard:hover{border-color:var(--orange-2)}
.unitcard.soon{background:transparent;box-shadow:none}
.unitcard a.cover{position:absolute;inset:0;border-radius:inherit;z-index:2}
.unitcard .slot{aspect-ratio:4/3;border-radius:12px;background:var(--honey-3)}
.unitcard .pill{display:inline-block;font:800 11.5px var(--head);color:var(--teal);background:var(--honey-2);border-radius:999px;padding:2px 9px;margin-bottom:5px}
.unitcard h3{font:800 16.5px/1.2 var(--head);color:var(--teal);margin:0}
.unitcard p{margin:3px 0 0;font-size:13.5px;color:var(--teal-2)}
.soonpill{display:inline-block;margin-top:5px;font:700 11.5px var(--head);color:#3D72A8;background:#E3EEF8;border-radius:999px;padding:1px 9px}
.arrow{width:38px;height:38px;border-radius:50%;background:var(--honey);color:var(--brown);display:grid;place-items:center;flex:0 0 auto}
.lessons{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.lcard{position:relative;display:grid;grid-template-columns:44px 90px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:var(--shadow)}
.lcard:hover{border-color:var(--orange-2)}
.lcard.soon{background:transparent;box-shadow:none}
.lcard a.cover{position:absolute;inset:0;border-radius:inherit;z-index:2}
.lcard .num{width:34px;height:34px;border-radius:50%;background:var(--honey);color:var(--brown);display:grid;place-items:center;font:800 14px var(--head)}
.lcard.soon .num{background:#E7E0D4;color:#8A7B69}
.lcard .slot{aspect-ratio:4/3;border-radius:10px;background:var(--honey-3)}
.lcard h3{font:800 15px/1.2 var(--head);color:var(--teal);margin:0}
.unitblock{margin:26px 0 0}
.unitblock h2{display:flex;align-items:center;gap:10px;font:800 20px var(--head);color:var(--teal);margin:0 0 12px}
.unitblock h2 .pill{font:800 12px var(--head);color:var(--teal);background:var(--honey-2);border-radius:999px;padding:3px 10px}