/* =========================================================
   SA | SCHOOL — TABLET / MOBILE RESPONSIVE LAYER
   Loaded after page-specific styles so the mobile layout is
   consistent across the entire presentation site.
   ========================================================= */

.mobile-nav-toggle,
.mobile-nav-panel,
.mobile-nav-backdrop { display:none; }

@media (max-width: 1100px) {
  html { scroll-padding-top: 76px; }
  body { min-width:0; }

  /* ---------- universal compact header ---------- */
  .header {
    height:76px !important;
    padding:0 24px !important;
    position:sticky !important;
    top:0;
    z-index:5000 !important;
    background:rgba(247,242,234,.96) !important;
    backdrop-filter:blur(14px);
  }
  .header .logo,
  .logo {
    font-size:16px !important;
    line-height:1 !important;
    position:relative;
    z-index:5002;
  }
  .header > .nav,
  .header > .header-actions,
  .header > .back {
    display:none !important;
  }

  .mobile-nav-toggle {
    display:flex;
    width:46px;
    height:46px;
    flex:0 0 46px;
    border:1px solid rgba(30,28,26,.18);
    border-radius:50%;
    background:rgba(255,255,255,.36);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    position:relative;
    z-index:5002;
    cursor:pointer;
    color:#1E1C1A;
  }
  .mobile-nav-toggle span {
    display:block;
    width:18px;
    height:1.5px;
    border-radius:99px;
    background:currentColor;
    transition:transform .25s ease, opacity .2s ease;
  }
  body.mobile-nav-open .mobile-nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.mobile-nav-open .mobile-nav-toggle span:nth-child(2){opacity:0}
  body.mobile-nav-open .mobile-nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  .mobile-nav-backdrop {
    display:block;
    position:fixed;
    inset:0;
    z-index:4998;
    background:rgba(30,28,26,.38);
    backdrop-filter:blur(5px);
    opacity:0;
    visibility:hidden;
    transition:.24s ease;
  }
  .mobile-nav-panel {
    display:flex;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:4999;
    width:min(420px,88vw);
    padding:104px 24px 28px;
    background:#F7F2EA;
    border-left:1px solid rgba(30,28,26,.12);
    box-shadow:-24px 0 70px rgba(30,28,26,.12);
    flex-direction:column;
    transform:translateX(104%);
    transition:transform .28s cubic-bezier(.2,.7,.2,1);
    overflow-y:auto;
  }
  body.mobile-nav-open { overflow:hidden; }
  body.mobile-nav-open .mobile-nav-backdrop { opacity:1; visibility:visible; }
  body.mobile-nav-open .mobile-nav-panel { transform:translateX(0); }

  .mobile-nav-kicker {
    color:#7A2528;
    font-size:9px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-bottom:24px;
  }
  .mobile-nav-links {
    display:flex;
    flex-direction:column;
    border-top:1px solid rgba(30,28,26,.14);
  }
  .mobile-nav-links a,
  .mobile-nav-links .mobile-nav-link-button {
    min-height:52px;
    width:100%;
    padding:0 2px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    border:0;
    border-bottom:1px solid rgba(30,28,26,.14);
    background:transparent;
    font-family:"Cormorant Garamond",serif;
    font-size:25px;
    line-height:1;
    letter-spacing:-.025em;
    color:#1E1C1A;
    text-align:left;
    cursor:pointer;
  }
  .mobile-nav-links a::after,
  .mobile-nav-links .mobile-nav-link-button::after {
    content:none !important;
    display:none !important;
  }
  .mobile-nav-links a.mobile-nav-muted {
    color:#756E68;
    font-family:"Manrope",sans-serif;
    font-size:12px;
    letter-spacing:0;
  }
  .mobile-nav-cta {
    margin-top:auto;
    padding-top:26px;
  }
  .mobile-nav-cta a {
    min-height:50px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    background:#7A2528;
    color:#fff;
    font-size:11px;
    font-weight:600;
  }

  /* ---------- homepage hero ---------- */
  main.hero,
  .hero {
    min-height:auto !important;
  }
  main.hero {
    grid-template-columns:1fr !important;
  }
  main.hero .hero-left {
    min-height:auto !important;
    padding:56px 24px 42px !important;
  }
  main.hero h1 {
    max-width:840px !important;
    font-size:clamp(62px,10.2vw,96px) !important;
    line-height:.83 !important;
  }
  main.hero .eyebrow {
    margin-bottom:24px !important;
    font-size:10px !important;
  }
  main.hero .hero-info {
    margin-top:52px !important;
    grid-template-columns:minmax(0,1.1fr) minmax(250px,.9fr) !important;
    gap:34px !important;
  }
  main.hero .hero-description {
    max-width:520px !important;
    font-size:13px !important;
  }
  main.hero .hero-actions {
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }
  main.hero .hero-right {
    min-height:420px !important;
    height:420px !important;
    padding:30px 24px !important;
  }
  main.hero .arch {
    width:min(58%,430px) !important;
    top:54% !important;
  }
  main.hero .big-mark {
    font-size:150px !important;
  }
  main.hero .right-title {
    font-size:55px !important;
  }
  main.hero .right-note {
    font-size:9px !important;
  }

  /* ---------- homepage about ---------- */
  .about-intro {
    min-height:auto !important;
    grid-template-columns:1fr !important;
  }
  .about-photo {
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:4 / 3 !important;
    max-height:560px;
  }
  .about-photo img {
    object-position:center 28% !important;
  }
  .about-content {
    min-height:auto !important;
    padding:54px 24px 38px !important;
  }
  .about-heading {
    margin-top:34px !important;
    font-size:clamp(68px,11vw,100px) !important;
    line-height:.82 !important;
  }
  .about-copy {
    margin-top:40px !important;
    padding-top:26px !important;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) !important;
    gap:38px !important;
  }
  .about-lead {
    padding-top:36px !important;
    font-size:clamp(26px,3.4vw,34px) !important;
  }
  .about-quote-mark {
    top:-29px !important;
    left:-4px !important;
    font-size:92px !important;
  }
  .about-text {
    max-width:none !important;
    font-size:12.5px !important;
    line-height:1.8 !important;
  }
  .about-facts {
    margin-top:42px !important;
    grid-template-columns:1fr 1fr !important;
  }
  .about-fact {
    min-height:130px !important;
    padding:22px 18px 20px 0 !important;
  }
  .about-fact:nth-child(2){border-right:0 !important;padding-left:20px !important}
  .about-fact:nth-child(3),.about-fact:nth-child(4){border-top:1px solid rgba(30,28,26,.16) !important}
  .about-fact:nth-child(3){padding-left:0 !important}
  .about-fact:nth-child(4){padding-left:20px !important;border-right:0 !important}
  .about-fact-value { font-size:52px !important; }
  .about-fact-label { max-width:220px !important; }
  .about-statement {
    min-height:auto !important;
    padding:56px 24px 36px !important;
  }
  .about-statement-title {
    margin:64px 0 54px !important;
    font-size:clamp(70px,11vw,108px) !important;
    line-height:.8 !important;
  }
  .about-statement-bottom {
    grid-template-columns:1fr 1fr !important;
    gap:34px !important;
  }

  /* ---------- audience modal ---------- */
  .audience-modal { padding:18px !important; }
  .audience-modal__panel {
    width:min(760px,100%) !important;
    max-height:calc(100dvh - 36px);
    overflow:auto;
    border-radius:24px !important;
  }
  .audience-modal__top { padding:30px 30px 24px !important; }
  .audience-options { grid-template-columns:1fr 1fr !important; }
  .audience-card { min-height:250px !important; padding:28px !important; }

  /* ---------- student / parent pages ---------- */
  body > main > .hero:not(main.hero) {
    grid-template-columns:1fr !important;
  }
  body > main > .hero .hero-copy {
    min-height:auto !important;
    padding:56px 24px 42px !important;
  }
  body > main > .hero .hero-copy h1 {
    font-size:clamp(62px,10vw,94px) !important;
    line-height:.84 !important;
  }
  body > main > .hero .hero-lead {
    margin-top:44px !important;
    max-width:760px !important;
  }
  body > main > .hero .hero-side {
    min-height:360px !important;
    height:auto !important;
    padding:30px 24px !important;
  }
  body > main > .hero .side-word {
    font-size:clamp(54px,8.5vw,82px) !important;
  }

  /* ---------- platform / formats editorial pages ---------- */
  body > main > .hero .hero-bottom {
    margin-top:48px !important;
    grid-template-columns:1fr 1fr !important;
    gap:34px !important;
  }
  body > main > .hero .hero-side,
  body > main > .hero .hero-art {
    min-height:360px !important;
  }
  .section { padding:68px 24px !important; }
  .section-head { grid-template-columns:1fr !important; gap:22px !important; margin-bottom:42px !important; }
  .section-title { font-size:clamp(54px,8.5vw,84px) !important; line-height:.86 !important; }
  .section-intro {
    margin-left:0 !important;
    padding-left:0 !important;
    grid-template-columns:1fr 1fr !important;
    gap:36px !important;
    margin-bottom:42px !important;
  }
  .pain-grid,.features,.principles,.platform-grid,.flow-line {
    grid-template-columns:1fr 1fr !important;
  }
  .directions,.before-after { grid-template-columns:1fr !important; }
  .direction { min-height:auto !important; }
  .statement { grid-template-columns:160px 1fr !important; gap:28px !important; padding:70px 24px !important; }
  .demo { padding:68px 24px !important; }
  .demo-head { grid-template-columns:1fr !important; gap:22px !important; }
  .demo-browser iframe { min-height:560px !important; height:620px !important; }
  .cta { min-height:auto !important; padding:70px 24px 34px !important; }

  /* ---------- simple tutor page ---------- */
  .page { grid-template-columns:1fr !important; }
  .page .left { min-height:auto !important; padding:56px 24px 42px !important; }
  .page .right { min-height:360px !important; padding:30px 24px !important; }
}

@media (max-width: 720px) {
  .header { height:70px !important; padding:0 18px !important; }
  .mobile-nav-toggle { width:42px; height:42px; flex-basis:42px; }
  .mobile-nav-panel { width:min(370px,92vw); padding:92px 20px 24px; }
  .mobile-nav-links a { min-height:54px; font-size:25px; }

  /* homepage hero — compact and intentional */
  main.hero .hero-left { padding:42px 20px 34px !important; }
  main.hero h1 { font-size:clamp(54px,16vw,76px) !important; line-height:.86 !important; }
  main.hero .hero-info { margin-top:40px !important; grid-template-columns:1fr !important; gap:26px !important; }
  main.hero .hero-actions { display:grid !important; grid-template-columns:1fr 1fr !important; width:100%; gap:9px !important; }
  main.hero .btn { width:100% !important; min-height:48px !important; padding:0 14px !important; font-size:11px !important; }
  main.hero .hero-right { height:300px !important; min-height:300px !important; padding:24px 20px !important; }
  main.hero .right-small { font-size:8px !important; }
  main.hero .right-title { font-size:42px !important; }
  main.hero .right-note { display:none !important; }
  main.hero .big-mark { font-size:112px !important; }
  main.hero .arch { width:55% !important; }

  /* about photo now behaves like an editorial image, not a full-screen section */
  .about-photo {
    aspect-ratio:4 / 5 !important;
    max-height:none !important;
  }
  .about-photo img { object-position:center 24% !important; }
  .about-photo-number { top:20px !important; left:20px !important; }
  .about-photo-caption { left:20px !important; bottom:20px !important; font-size:8px !important; }
  .about-content { padding:46px 20px 32px !important; }
  .about-heading { margin-top:28px !important; font-size:68px !important; }
  .about-copy { margin-top:34px !important; grid-template-columns:1fr !important; gap:28px !important; }
  .about-lead { padding-top:28px !important; font-size:27px !important; }
  .about-quote-mark { top:-28px !important; font-size:82px !important; }
  .about-text { font-size:12px !important; }
  .about-facts { grid-template-columns:1fr !important; }
  .about-fact,
  .about-fact:not(:first-child) {
    min-height:auto !important;
    padding:20px 0 !important;
    border-right:0 !important;
    border-top:1px solid rgba(30,28,26,.16) !important;
  }
  .about-fact:first-child { border-top:0 !important; }
  .about-fact-value { font-size:46px !important; }
  .about-statement { padding:46px 20px 28px !important; }
  .about-statement-title { margin:52px 0 40px !important; font-size:66px !important; }
  .about-statement-bottom { grid-template-columns:1fr !important; gap:22px !important; }
  .about-formula { font-size:22px !important; }

  /* audience modal */
  .audience-modal { padding:10px !important; }
  .audience-modal__panel { border-radius:20px !important; max-height:calc(100dvh - 20px) !important; }
  .audience-modal__top { padding:24px 20px 18px !important; }
  .audience-modal__title { font-size:47px !important; }
  .audience-options { grid-template-columns:1fr !important; }
  .audience-card { min-height:190px !important; padding:22px 20px !important; }
  .audience-card + .audience-card { border-left:0 !important; border-top:1px solid rgba(30,28,26,.16) !important; }

  /* all content pages */
  body > main > .hero .hero-copy { padding:42px 20px 34px !important; }
  body > main > .hero .hero-copy h1 { font-size:clamp(52px,15vw,72px) !important; line-height:.86 !important; }
  body > main > .hero .hero-lead { margin-top:32px !important; font-size:12px !important; }
  body > main > .hero .hero-bottom { grid-template-columns:1fr !important; gap:24px !important; margin-top:38px !important; }
  body > main > .hero .hero-side,
  body > main > .hero .hero-art { min-height:280px !important; padding:24px 20px !important; }
  body > main > .hero .side-word,
  body > main > .hero .hero-art-title,
  body > main > .hero .hero-side-title { font-size:50px !important; line-height:.86 !important; }

  .section { padding:54px 20px !important; }
  .section-head { margin-bottom:34px !important; }
  .section-title { font-size:52px !important; }
  .section-intro { grid-template-columns:1fr !important; gap:24px !important; margin-bottom:34px !important; }
  .pain-grid,.features,.principles,.platform-grid,.flow-line { grid-template-columns:1fr !important; }
  .pain-card,.feature,.principle,.platform-card,.flow-step { min-height:auto !important; padding:24px 20px !important; }
  .contrast { min-height:auto !important; padding:28px 20px !important; }
  .direction { padding:28px 20px !important; }
  .direction h3 { font-size:56px !important; }
  .direction-bottom { flex-direction:column !important; align-items:flex-start !important; }
  .direction-bottom .btn { width:100% !important; }
  .statement { grid-template-columns:1fr !important; padding:54px 20px !important; }
  .statement-mark { font-size:84px !important; height:46px; }
  .demo { padding:54px 20px !important; }
  .demo-title { font-size:54px !important; }
  .demo-topline { display:grid !important; grid-template-columns:1fr !important; }
  .demo-role,.demo-full { width:100% !important; margin-left:0 !important; }
  .demo-browser { border-radius:16px !important; }
  .demo-browser iframe { min-height:520px !important; height:560px !important; }
  .demo-caption { grid-template-columns:1fr !important; gap:18px !important; }
  .demo-caption-big { text-align:left !important; }
  .cta { padding:56px 20px 28px !important; }
  .cta h2 { font-size:62px !important; }
  .cta-bottom { flex-direction:column !important; gap:24px !important; }
  .cta-actions,.cta-buttons { width:100% !important; }
  .cta-primary,.cta-secondary,.cta-button { width:100% !important; }

  .status-strip { padding:18px 20px !important; }
  .status-items { width:100%; }
  .status-pill { flex:1 1 auto; text-align:center; }

  .page .left { padding:42px 20px 34px !important; }
  .page .right { min-height:280px !important; padding:24px 20px !important; }
  .page h1 { font-size:66px !important; }
}

@media (max-width: 420px) {
  main.hero .hero-actions { grid-template-columns:1fr !important; }
  main.hero h1 { font-size:54px !important; }
  .about-heading { font-size:61px !important; }
  .section-title,.demo-title { font-size:48px !important; }
  .cta h2 { font-size:56px !important; }
}


/* =========================================================
   SA | SCHOOL — MOBILE POLISH v2
   Compact editorial rhythm for tablets and phones.
   ========================================================= */

@media (max-width:1100px){

  /* MENU — quieter and tighter */
  .mobile-nav-panel{
    width:min(390px,86vw) !important;
    padding:96px 22px 22px !important;
  }
  .mobile-nav-kicker{
    margin-bottom:18px !important;
  }
  .mobile-nav-links a,
  .mobile-nav-links .mobile-nav-link-button{
    min-height:50px !important;
    font-size:24px !important;
  }
  .mobile-nav-cta{
    padding-top:20px !important;
  }
  .mobile-nav-cta a{
    min-height:46px !important;
  }

  /* GLOBAL SECTIONS — less empty space */
  .section{
    padding:52px 22px !important;
  }
  .section-head{
    gap:16px !important;
    margin-bottom:30px !important;
  }
  .section-title{
    font-size:clamp(46px,7.4vw,72px) !important;
    line-height:.88 !important;
  }
  .section-intro{
    padding-top:20px !important;
    gap:24px !important;
    margin-bottom:30px !important;
  }
  .section-intro strong{
    font-size:clamp(22px,2.8vw,31px) !important;
  }
  .section-intro p{
    font-size:12px !important;
    line-height:1.72 !important;
  }

  /* CARDS / GRIDS — illustrative, not giant screens */
  .pain-card,
  .feature,
  .principle,
  .platform-card,
  .flow-step{
    min-height:220px !important;
    padding:20px 18px !important;
  }
  .pain-card h3,
  .feature h3,
  .principle h3,
  .platform-card h3,
  .flow-step h3{
    margin-top:24px !important;
    font-size:27px !important;
    line-height:1 !important;
  }
  .pain-card p,
  .feature p,
  .principle p,
  .platform-card p,
  .flow-step p{
    margin-top:11px !important;
    font-size:10px !important;
    line-height:1.62 !important;
  }
  .pain-answer,
  .feature-tag{
    margin-top:16px !important;
    font-size:8px !important;
  }

  .contrast{
    min-height:320px !important;
    padding:24px 22px !important;
  }
  .contrast h3{
    margin-top:26px !important;
    font-size:clamp(36px,5vw,52px) !important;
  }

  .direction{
    min-height:auto !important;
    padding:28px 26px !important;
  }
  .direction h3{
    margin-top:26px !important;
    font-size:clamp(46px,6.3vw,67px) !important;
  }
  .direction-lead{
    margin-top:16px !important;
    font-size:22px !important;
  }
  .direction-list{
    margin-top:24px !important;
  }
  .direction-list div{
    padding:11px 0 !important;
  }
  .direction-bottom{
    margin-top:24px !important;
  }

  /* HERO — tighter vertical rhythm */
  main.hero .hero-left{
    padding:46px 22px 34px !important;
  }
  main.hero h1{
    font-size:clamp(58px,9.2vw,84px) !important;
  }
  main.hero .hero-info{
    margin-top:38px !important;
    gap:24px !important;
  }
  main.hero .hero-right{
    height:330px !important;
    min-height:330px !important;
  }

  body > main > .hero .hero-copy{
    padding:46px 22px 34px !important;
  }
  body > main > .hero .hero-bottom{
    margin-top:34px !important;
    gap:24px !important;
  }
  body > main > .hero .hero-side,
  body > main > .hero .hero-art{
    min-height:310px !important;
  }

  /* ABOUT — photo is editorial, not a poster */
  .about-photo{
    aspect-ratio:16 / 10 !important;
    max-height:430px !important;
    overflow:hidden !important;
  }
  .about-photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 24% !important;
  }
  .about-content{
    padding:44px 22px 30px !important;
  }
  .about-heading{
    margin-top:24px !important;
    font-size:clamp(62px,9vw,82px) !important;
  }
  .about-copy{
    margin-top:28px !important;
    padding-top:22px !important;
    gap:26px !important;
  }
  .about-lead{
    padding-top:28px !important;
  }
  .about-facts{
    margin-top:30px !important;
  }
  .about-fact{
    min-height:104px !important;
    padding-top:16px !important;
    padding-bottom:16px !important;
  }
  .about-fact-value{
    font-size:44px !important;
  }
  .about-statement{
    padding:46px 22px 30px !important;
  }
  .about-statement-title{
    margin:46px 0 36px !important;
  }

  /* DEMO / CTA */
  .demo{
    padding:52px 22px !important;
  }
  .demo-browser iframe{
    min-height:480px !important;
    height:520px !important;
  }
  .cta{
    padding:54px 22px 30px !important;
  }
  .cta h2{
    font-size:clamp(58px,8.4vw,88px) !important;
  }
}

@media (max-width:720px){

  .mobile-nav-panel{
    width:min(350px,90vw) !important;
    padding:88px 18px 18px !important;
  }
  .mobile-nav-links a,
  .mobile-nav-links .mobile-nav-link-button{
    min-height:48px !important;
    font-size:23px !important;
  }

  /* HERO */
  main.hero .hero-left{
    padding:36px 18px 28px !important;
  }
  main.hero h1{
    font-size:clamp(50px,15vw,68px) !important;
  }
  main.hero .hero-info{
    margin-top:30px !important;
    gap:20px !important;
  }
  main.hero .hero-right{
    height:250px !important;
    min-height:250px !important;
  }
  main.hero .big-mark{
    font-size:92px !important;
  }
  main.hero .right-title{
    font-size:36px !important;
  }

  body > main > .hero .hero-copy{
    padding:36px 18px 28px !important;
  }
  body > main > .hero .hero-copy h1{
    font-size:clamp(48px,14vw,66px) !important;
  }
  body > main > .hero .hero-side,
  body > main > .hero .hero-art{
    min-height:240px !important;
    padding:20px 18px !important;
  }
  body > main > .hero .side-word,
  body > main > .hero .hero-art-title,
  body > main > .hero .hero-side-title{
    font-size:43px !important;
  }

  /* ABOUT */
  .about-photo{
    aspect-ratio:16 / 11 !important;
    max-height:340px !important;
  }
  .about-content{
    padding:38px 18px 26px !important;
  }
  .about-heading{
    font-size:59px !important;
  }
  .about-copy{
    margin-top:26px !important;
    gap:22px !important;
  }
  .about-facts{
    margin-top:24px !important;
  }

  /* ALL SECTIONS */
  .section{
    padding:44px 18px !important;
  }
  .section-head{
    margin-bottom:26px !important;
  }
  .section-title{
    font-size:46px !important;
  }
  .section-intro{
    padding-top:18px !important;
    gap:19px !important;
    margin-bottom:26px !important;
  }

  /* CARDS — one compact vertical stream */
  .pain-card,
  .feature,
  .principle,
  .platform-card,
  .flow-step{
    min-height:0 !important;
    padding:18px 16px !important;
  }
  .pain-card h3,
  .feature h3,
  .principle h3,
  .platform-card h3,
  .flow-step h3{
    margin-top:18px !important;
    font-size:25px !important;
  }
  .pain-card p,
  .feature p,
  .principle p,
  .platform-card p,
  .flow-step p{
    margin-top:9px !important;
  }
  .contrast{
    min-height:0 !important;
    padding:22px 18px !important;
  }
  .direction{
    padding:24px 18px !important;
  }
  .direction h3{
    font-size:49px !important;
  }
  .direction-list div{
    padding:10px 0 !important;
  }

  .statement{
    padding:44px 18px !important;
  }
  .demo{
    padding:44px 18px !important;
  }
  .demo-browser iframe{
    min-height:430px !important;
    height:460px !important;
  }
  .cta{
    padding:46px 18px 26px !important;
  }
  .cta h2{
    font-size:54px !important;
  }

  /* status strip / small utility blocks */
  .status-strip{
    padding:14px 18px !important;
  }
  .status-strip strong{
    font-size:23px !important;
  }
  .status-pill{
    padding:7px 9px !important;
    font-size:9px !important;
  }
}


/* =========================================================
   MOBILE AUDIENCE CHOICE — same "Занятия" logic everywhere
   ========================================================= */
.mobile-audience-choice{display:none}

@media(max-width:1100px){
  .mobile-audience-choice{
    display:grid;
    position:fixed;
    inset:0;
    z-index:6500;
    place-items:center;
    padding:18px;
    opacity:0;
    visibility:hidden;
    transition:.22s ease;
  }
  .mobile-audience-choice.is-open{
    opacity:1;
    visibility:visible;
  }
  body.mobile-audience-open{overflow:hidden}
  .mobile-audience-choice__backdrop{
    position:absolute;
    inset:0;
    background:rgba(30,28,26,.44);
    backdrop-filter:blur(7px);
  }
  .mobile-audience-choice__panel{
    position:relative;
    width:min(680px,100%);
    overflow:hidden;
    border-radius:24px;
    background:#F7F2EA;
    border:1px solid rgba(30,28,26,.15);
    box-shadow:0 28px 90px rgba(30,28,26,.20);
    padding:30px;
  }
  .mobile-audience-choice__close{
    position:absolute;
    right:18px;
    top:18px;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid rgba(30,28,26,.16);
    background:transparent;
    color:#1E1C1A;
    font-size:20px;
    line-height:1;
  }
  .mobile-audience-choice__eyebrow{
    color:#7A2528;
    font-size:9px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .mobile-audience-choice h2{
    margin-top:18px;
    padding-right:45px;
    font-family:"Cormorant Garamond",serif;
    font-size:58px;
    font-weight:400;
    line-height:.84;
    letter-spacing:-.04em;
  }
  .mobile-audience-choice__panel > p{
    margin-top:18px;
    max-width:480px;
    color:#77716B;
    font-size:11px;
    line-height:1.65;
  }
  .mobile-audience-choice__options{
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:26px;
    border-top:1px solid rgba(30,28,26,.14);
    border-left:1px solid rgba(30,28,26,.14);
  }
  .mobile-audience-choice__options a{
    min-height:190px;
    padding:22px;
    border-right:1px solid rgba(30,28,26,.14);
    border-bottom:1px solid rgba(30,28,26,.14);
    display:flex;
    flex-direction:column;
  }
  .mobile-audience-choice__options small{
    color:#7A2528;
    font-size:9px;
    letter-spacing:.1em;
  }
  .mobile-audience-choice__options strong{
    margin-top:42px;
    font-family:"Cormorant Garamond",serif;
    font-size:32px;
    font-weight:400;
  }
  .mobile-audience-choice__options span{
    margin-top:8px;
    color:#77716B;
    font-size:10px;
    line-height:1.55;
  }
}

@media(max-width:620px){
  .mobile-audience-choice{
    padding:10px;
    align-items:end;
  }
  .mobile-audience-choice__panel{
    padding:24px 18px 18px;
    border-radius:22px 22px 0 0;
    width:100%;
  }
  .mobile-audience-choice h2{
    font-size:48px;
  }
  .mobile-audience-choice__options{
    grid-template-columns:1fr;
    margin-top:22px;
  }
  .mobile-audience-choice__options a{
    min-height:130px;
  }
  .mobile-audience-choice__options strong{
    margin-top:24px;
    font-size:29px;
  }
}


/* =========================================================
   MOBILE v4 — hide portrait on tablets and phones
   ========================================================= */
@media (max-width:1100px){
  .about-photo{
    display:none !important;
  }

  .about,
  .about-grid,
  .about-wrap,
  .about-layout{
    grid-template-columns:1fr !important;
  }

  .about-content{
    width:100% !important;
    max-width:none !important;
    grid-column:1 / -1 !important;
  }
}


/* =========================================================
   SA | SCHOOL — READABILITY PASS (parent/child showcase)
   User request: all previously tiny supporting text should be
   comfortably readable on desktop, tablet and mobile.
   ========================================================= */

/* Main body copy */
p,
.hero-description,
.hero-text,
.about-text,
.closed-copy,
.note-block,
.platform-intro p,
.section-intro p,
.card p,
.pain-card p,
.principle p,
.platform-card p,
.rule-item p,
.makeup-note p,
.schedule-meta,
.result-copy,
.hero-copy p {
  font-size: clamp(16px, 1.05vw, 18px) !important;
  line-height: 1.72 !important;
}

/* Small explanatory / utility copy: keep hierarchy, remove microscopic sizes */
.side-note,
.hero-side-note,
.right-note,
.audience-modal__subtitle,
.moscow-note,
.schedule-foot,
.price-note,
.status-pill {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Eyebrows and labels can stay compact, but no longer 9–10px */
.eyebrow,
.kicker,
.section-label,
.cta-top,
.mobile-nav-kicker,
.pain-num,
.rule-num,
.schedule-index,
.platform-card > span,
.principle > span,
.price-kicker,
.right-small,
.audience-card__index {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* Navigation / compact action text */
.nav,
.header-actions,
.back,
.format-btn,
.btn,
.cta-btn,
.cta-link,
.mobile-nav-cta a {
  font-size: 14px !important;
}

/* Especially important enrolment / rules copy */
.closed-copy,
.rule-item p,
.makeup-note p,
.schedule-meta {
  font-size: 16px !important;
}

@media (max-width: 650px) {
  p,
  .hero-description,
  .hero-text,
  .about-text,
  .closed-copy,
  .note-block,
  .platform-intro p,
  .section-intro p,
  .card p,
  .pain-card p,
  .principle p,
  .platform-card p,
  .rule-item p,
  .makeup-note p,
  .schedule-meta,
  .result-copy,
  .hero-copy p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .eyebrow,
  .kicker,
  .section-label,
  .cta-top,
  .mobile-nav-kicker,
  .pain-num,
  .rule-num,
  .schedule-index,
  .platform-card > span,
  .principle > span,
  .price-kicker,
  .right-small,
  .audience-card__index {
    font-size: 11px !important;
  }
}