/* ============================================================================
   Liza Zimin — mobile skin A «Графит» (dramatic dark) · live since 2026-09-17 (George chose variant A)
   Loaded AFTER site.css. Every rule lives inside max-width:899px — desktop untouched.
   Palette: graphite #17191B · graphite-90 #2A2D30 · lime #CDF568 · lime-ink #3A4A12 ·
            ivory #F5F3EC · ivory-dim #ECE9DE · white · ink-70 #4A4D50 (+ alpha tints).
   Surfaces (top → bottom):
     header G · hero G · video-1 G · problem IVORY · facts G · video-2 G · steps IVORY ·
     reviews G · price IVORY (graphite card) · about Liza G · creds IVORY · socials IVORY ·
     FAQ WHITE · final CTA LIME · footer G
   ========================================================================== */
@media (max-width: 899px) {

  /* ---- 0. Local tokens ---------------------------------------------------- */
  :root{
    --a-ease-out:cubic-bezier(.23,1,.32,1);
    --a-lime-glow:rgba(205,245,104,.16);
    --a-lime-line:rgba(205,245,104,.42);
    --a-on-dark:rgba(255,255,255,.78);      /* 10.98:1 on graphite */
    --a-on-dark-2:rgba(255,255,255,.72);    /* 7.93:1 on graphite-90 */
    --a-hair-dark:rgba(255,255,255,.08);
    --section:clamp(3.5rem,14vw,4.5rem);
  }

  /* ---- 1. Type scale on phones ------------------------------------------- */
  .h2{font-size:clamp(1.75rem,7.6vw,2.125rem);font-weight:800;line-height:1.08;letter-spacing:-.028em}
  .display{font-size:clamp(2.5rem,12.2vw,3.25rem);letter-spacing:-.04em;line-height:.98}
  .opener .lead,.vsec__text .lead{margin-top:16px}

  /* eyebrows become chips: graphite pill with lime label on light surfaces */
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:.75rem;letter-spacing:.12em;line-height:1;font-weight:700;
    padding:8px 12px 8px 10px;border-radius:999px;margin-bottom:14px;
    background:var(--graphite);color:var(--lime);
  }
  .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
  /* the rule under the chip: a short heavy graphite bar */
  .rule{width:28px;height:3px;border-radius:2px;background:var(--graphite);opacity:1;margin-bottom:14px}

  /* ---- 2. Dark surfaces: shared treatment -------------------------------- */
  .site-header,
  .hero,
  .vsec,
  #about-course,
  section.about{background:var(--graphite);color:var(--white)}

  :is(.hero,.vsec,#about-course,section.about) .eyebrow{
    background:transparent;color:var(--lime);box-shadow:inset 0 0 0 1px var(--a-lime-line);
  }
  :is(.hero,.vsec,#about-course,section.about) .rule{background:var(--lime)}
  :is(.hero,.vsec,#about-course,section.about) :is(.lead,p){color:var(--a-on-dark)}
  :is(.hero,.vsec,#about-course,section.about) strong{color:var(--white);font-weight:600}
  /* focus ring: white on graphite */
  :is(.site-header,.hero,.vsec,#about-course,section.about) :focus-visible{outline-color:var(--white)}

  /* ---- 3. Header ---------------------------------------------------------- */
  .site-header{
    background:rgba(23,25,27,.92);
    border-bottom:1px solid var(--graphite-90);
  }
  .site-header .brand svg g{fill:var(--white)}
  .site-header .brand svg g:first-child{fill:var(--lime)}

  /* ---- 4. Hero ------------------------------------------------------------ */
  .hero{
    padding-top:28px;
    background:
      radial-gradient(90% 55% at 100% 0%,var(--a-lime-glow),transparent 70%),
      var(--graphite);
  }
  .hero .display{color:var(--white);margin-bottom:18px}
  .hero .lead{color:var(--a-on-dark)}
  /* «паники»: lime word with a drawn lime stroke underneath */
  .accent-underline{
    background:none;color:var(--lime);
    position:relative;isolation:isolate;padding-inline:0;
  }
  .accent-underline::after{
    content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;border-radius:.05em;
    background:var(--lime);transform-origin:left center;
    animation:a-draw 700ms var(--a-ease-out) 250ms both;
  }
  @keyframes a-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  .ticks{color:var(--a-on-dark);gap:10px 20px}
  .ticks li{gap:10px}
  .ticks svg{
    width:20px;height:20px;padding:4px;border-radius:50%;
    background:var(--lime);color:var(--graphite);stroke-width:3;
  }

  /* primary buttons on graphite: lime fill, graphite label (14.15:1) */
  .hero .btn--primary,
  .sticky-cta.btn--primary{
    background:var(--lime);color:var(--graphite);font-weight:700;
    box-shadow:0 10px 30px -12px rgba(205,245,104,.55);
  }
  .hero .btn--primary:focus-visible{background:var(--white);color:var(--graphite)}

  /* ---- 5. Video sections (all three on graphite) ------------------------- */
  .vsec--joined{border-top:1px solid var(--graphite-90)}
  .vsec__text h2{color:var(--white)}
  .vsec__note{color:var(--a-on-dark)}
  .vcard__media{
    box-shadow:
      0 0 0 1px var(--a-lime-line),
      0 28px 60px -28px rgba(205,245,104,.45);
  }
  .vsec .vcard__media:focus-visible{outline-color:var(--white)}
  .vcard__play{
    width:68px;height:68px;margin:-34px 0 0 -34px;
    background:var(--lime);color:var(--graphite);
    box-shadow:0 8px 24px -6px rgba(23,25,27,.6);
  }
  .vcard__play svg{width:26px;height:26px}
  .vcard__play::after{
    content:"";position:absolute;inset:0;border-radius:inherit;
    box-shadow:0 0 0 2px var(--lime);opacity:0;
    animation:a-ping 3.2s var(--a-ease-out) 1s infinite;
  }
  @keyframes a-ping{
    0%{transform:scale(1);opacity:.7}
    45%{transform:scale(1.55);opacity:0}
    100%{transform:scale(1.55);opacity:0}
  }
  .vcard__dur{background:rgba(23,25,27,.88);color:var(--white);box-shadow:inset 0 0 0 1px var(--a-hair-dark)}

  /* ---- 6. Problem (ivory breathing section) ------------------------------ */
  .vsec--after-hero + .section--tint{background:var(--ivory)}
  .vsec--after-hero + .section--tint .card{
    background:var(--white);border-color:transparent;border-radius:18px;
    box-shadow:0 1px 0 var(--ivory-dim),0 14px 30px -22px rgba(23,25,27,.35);
  }
  .grid--3 .card h3{font-size:1.125rem;font-weight:700;letter-spacing:-.01em}
  .card__ico{background:var(--lime);border-color:var(--lime);color:var(--graphite);border-radius:12px}

  /* ---- 7. Facts (graphite) ----------------------------------------------- */
  #about-course h2{color:var(--white)}
  #about-course .card--fact{
    background:var(--graphite-90);border:1px solid var(--a-hair-dark);border-radius:16px;
    padding:18px 16px;position:relative;overflow:hidden;
  }
  #about-course .card--fact::before{
    content:"";position:absolute;left:16px;top:0;width:24px;height:3px;border-radius:0 0 2px 2px;background:var(--lime);
  }
  #about-course .card--fact .k{color:var(--lime);font-size:1.125rem;font-weight:800;letter-spacing:-.015em;margin-top:6px}
  #about-course .card--fact p:not(.k){color:var(--a-on-dark-2)}

  /* ---- 8. Steps (ivory) --------------------------------------------------- */
  #how{background:var(--ivory)}
  .step::before{
    background:var(--graphite);color:var(--lime);font-weight:800;font-size:1.25rem;
    box-shadow:0 0 0 4px var(--ivory),0 0 0 5px rgba(23,25,27,.12);
  }
  .step h3{font-size:1.125rem;font-weight:700;letter-spacing:-.01em}
  @media (max-width:759px){
    .steps{gap:28px}
    .step{padding-left:68px}
    .step:not(:last-child)::after{
      content:"";position:absolute;left:23px;top:56px;bottom:-24px;width:2px;border-radius:1px;
      background:linear-gradient(var(--graphite),rgba(23,25,27,.1));
    }
  }

  /* ---- 9. Price (ivory section, graphite card with a lime band) ---------- */
  #price{background:var(--ivory)}
  .price-card{
    position:relative;border-radius:24px;padding:36px 22px 26px;
    background:
      linear-gradient(var(--lime),var(--lime)) top/100% 8px no-repeat,
      radial-gradient(80% 45% at 100% 0%,var(--a-lime-glow),transparent 70%),
      var(--graphite);
    box-shadow:0 0 0 1px var(--graphite),0 34px 60px -30px rgba(23,25,27,.6);
  }
  .price-card .amount{color:var(--lime);font-size:clamp(2.75rem,13vw,3rem);letter-spacing:-.04em}
  .price-card .amount span{color:var(--a-on-dark)}
  .price-card .pay-note{color:var(--white)}
  .price-card .sub{color:var(--a-on-dark)}
  .price-list{gap:12px;padding-top:22px;border-top:1px solid var(--a-hair-dark)}
  .price-list svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--lime);color:var(--graphite);stroke-width:3;margin-top:0}
  .price-card .btn--on-dark{color:var(--graphite);font-weight:700;box-shadow:0 10px 30px -12px rgba(205,245,104,.55)}

  /* ---- 10. About Liza (graphite) ----------------------------------------- */
  section.about .portrait{box-shadow:0 0 0 1px var(--a-lime-line),0 28px 60px -30px rgba(205,245,104,.4)}
  section.about .name{font-size:clamp(1.75rem,7.6vw,2.125rem);font-weight:800;color:var(--white);letter-spacing:-.028em}
  section.about a.meta{
    min-height:44px;padding:0 16px 0 12px;border-radius:999px;
    color:var(--white);box-shadow:inset 0 0 0 1px var(--a-lime-line);
  }
  section.about a.meta svg{color:var(--lime)}

  /* ---- 11. Credentials + socials (ivory) --------------------------------- */
  .creds .h2{color:var(--graphite)}
  .research{border-left:3px solid var(--graphite);border-radius:0}
  .socials a{
    width:58px;height:58px;background:var(--graphite);color:var(--lime);border-color:var(--graphite);
  }
  .socials a:focus-visible{border-radius:999px;outline-color:var(--graphite)}

  /* ---- 12. FAQ (white) ---------------------------------------------------- */
  .qa{border-color:rgba(23,25,27,.1)}
  .qa button{padding:20px 52px 20px 0;font-weight:700;letter-spacing:-.005em}
  .qa button::before{
    content:"";position:absolute;right:0;top:50%;width:34px;height:34px;margin-top:-17px;
    border-radius:50%;background:var(--graphite);
    transition:background var(--dur) var(--ease);
  }
  .qa button::after{
    right:13px;top:50%;width:8px;height:8px;margin-top:-6px;
    border-color:var(--lime);
    transform:rotate(45deg);
  }
  .qa button[aria-expanded="true"]::before{background:var(--lime)}
  .qa button[aria-expanded="true"]::after{border-color:var(--graphite);transform:translateY(3px) rotate(225deg)}
  .qa__panel-inner{padding-right:12px}

  /* ---- 13. Final CTA (lime band) ----------------------------------------- */
  .section--lime{
    background:
      radial-gradient(circle at 105% 108%,rgba(23,25,27,.06) 0 38%,transparent 38.3%),
      var(--lime);
  }
  .section--lime .h2{color:var(--graphite);font-size:clamp(2rem,9vw,2.5rem)}
  .section--lime .lead{color:var(--lime-ink)}
  .section--lime .btn--primary{width:100%;box-shadow:0 14px 30px -14px rgba(23,25,27,.6)}
  .section--lime .btn--primary:focus-visible{background:var(--white);color:var(--graphite)}

  /* ---- 14. Sticky CTA ----------------------------------------------------- */
  .sticky-cta.btn--primary{
    border-color:var(--graphite);
    box-shadow:0 0 0 1px rgba(205,245,104,.5),0 14px 34px -10px rgba(23,25,27,.6);
  }
  .sticky-cta:focus-visible{outline-color:var(--graphite);background:var(--white)}

  /* ---- 15. Motion off ----------------------------------------------------- */
  @media (prefers-reduced-motion:reduce){
    .accent-underline::after,.vcard__play::after{animation:none}
    .vcard__play::after{opacity:0}
  }
}

/* Phones: the page (html) background is graphite, so iOS paints the status-bar
   strip above the dark header in graphite too — theme-color alone doesn't cover it.
   body keeps its own ivory background, so content is unaffected. */
@media (max-width: 899px){html{background:#17191B}}

/* Phones: the «₪3,840 — окончательная цена…» line moves BELOW the price card
   (George, 2026-09-17). Done without touching the markup: the opener becomes
   display:contents so its children are flex items of the section's .wrap, and
   the line is ordered after the card. The opener's own margin-bottom is lost
   with display:contents, so the heading carries it instead. */
@media (max-width: 899px){
  #price .wrap{display:flex;flex-direction:column}
  #price .opener{display:contents}
  #price .opener .eyebrow,#price .opener .rule,#price .opener .h2{order:1}
  #price .opener .h2{margin-bottom:var(--opener-gap)}
  #price .price-card{order:2}
  #price .opener .lead{order:3;margin:18px auto 0;max-width:var(--measure);text-align:center}
}