/* ==========================================================================
   mentoring.html — THE PHONE  (below 900px)
   --------------------------------------------------------------------------
   There is no 393 frame for this page in Figma. Built 22 Sep 2026 at her
   request ("תחשוב בהיגיון ... בלי לשנות כלום מהדסקטופ"), in the language of
   the developers page's phone layout (css/mobile.css): the same 393 artboard,
   the same --u mechanism (js/mentoring.js switches it to viewport / 393 below
   900, capped at 1.15), the same floating capsule header and menu sheet.

   THE DESKTOP IS UNTOUCHED. Every rule that changes a desktop value lives
   inside the media query below; outside it there are only the two rules that
   keep the phone's own new elements (menu button, menu sheet) off the desktop.

   ONE DECISION SHAPES THE WHOLE FILE: FLOW, NOT AN ARTBOARD.
   The desktop places every element at a fixed y on a 6646-tall artboard.
   Without a frame to read a phone artboard off, fixed y's would be guesses
   that break the first time a line wraps differently. So below 900 every
   section is back in normal flow, one after another, and each element takes
   its own height. The one exception is the top of the hero — DESIGN, BETTER
   in its selection box, the sticker and the small props — which is a
   composition, and is laid out on the 393 artboard like the desktop's.

   Centred on wide phones and small tablets: horizontal positions in the hero
   are written from the centre line (50% + offset), and every section pads
   itself to a 353 column in the middle.
   ========================================================================== */

/* the phone's own pieces never appear on the desktop */
.site-head__menu,
.site-menu { display: none; }

@media (max-width: 899px) {

  /* ---- The page ------------------------------------------------------- */
  .mentoring {
    /* THE DEVELOPERS PAGE'S MARGINS (her call, 22 Sep 2026 — one site, one
       measure): its deck and copy run 325 wide on the 393 frame, 34 each side,
       under a 321 header. */
    --col: calc(325 * var(--u));
    --gut: max(calc(34 * var(--u)), calc((100vw - var(--col)) / 2));
  }

  .page {
    height: auto;
    padding-bottom: calc(56 * var(--u));       /* the footer bar lives here */
  }

  /* The desktop's background stack is one tall artboard of pictures placed
     at fixed y's; in flow those y's mean nothing. Each section paints its
     own ground instead (below). */
  .page-bg,
  .grid-rail { display: none; }

  /* THE GRID LINES, as four hairlines down the whole page — the developers
     page's phone keeps four of its ten, and so does this one. Drawn as one
     background on a layer over everything (0.07 alpha, pointer-events off),
     so no section has to know about them. */
  .page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
      linear-gradient(rgba(159, 147, 255, 0.07), rgba(159, 147, 255, 0.07)) no-repeat,
      linear-gradient(rgba(159, 147, 255, 0.07), rgba(159, 147, 255, 0.07)) no-repeat,
      linear-gradient(rgba(159, 147, 255, 0.07), rgba(159, 147, 255, 0.07)) no-repeat,
      linear-gradient(rgba(159, 147, 255, 0.07), rgba(159, 147, 255, 0.07)) no-repeat;
    background-size: 1px 100%;
    background-position:
      var(--gut) 0,
      calc(var(--gut) + var(--col) / 3) 0,
      calc(var(--gut) + var(--col) * 2 / 3) 0,
      calc(var(--gut) + var(--col) - 1px) 0;
  }

  /* every section in flow, one after another */
  .hero,
  .services,
  .audience,
  .about,
  .plans,
  .contact {
    position: relative;
    padding-inline: var(--gut);
  }

  /* The wordmarks and headings are `position: absolute` + `translate: -50%`
     + nowrap on the desktop. In flow they are ordinary centred blocks. */
  .services__title,
  .audience__title,
  .plans__title,
  .contact__mark {
    position: relative;
    left: auto;
    top: auto;
    translate: none;
    display: block;
    width: auto;
    white-space: normal;
  }

  /* The note capsules: in flow, centred under their heading, keeping their
     tilt. `height: auto` — the desktop pins them at 68.9. */
  .capsule--note {
    position: relative;
    left: auto;
    top: auto;
    translate: none;
    display: flex;
    width: max-content;
    max-width: 100%;
    height: auto;
    /* LIFTED ONTO the heading's bottom edge, as the desktop has them —
       a sticker on the title, not a line under it */
    z-index: 2;
    margin: calc(-12 * var(--u)) auto 0;
    padding: calc(8 * var(--u)) calc(22 * var(--u));
    gap: calc(10 * var(--u));
    font-size: calc(15 * var(--u));
  }
  .capsule--note img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }


  /* the in-page links stop with the heading under the phone's header */
  #services-title,
  #audience-title,
  #about-name,
  #plans-title { scroll-margin-top: calc(84 * var(--u)); }

  /* ---- The header: the developers page's floating capsule --------------
     353 wide at 12 from the top. The five links become the menu button on
     the right; the logo sits beside it and the CTA holds the left end with
     the same 6 inset on its three free sides as the desktop's. */
  [data-head="round"] .site-head {
    left: 50%;
    translate: -50% 0;
    top: calc(12 * var(--u));
    width: calc(321 * var(--u));
    height: calc(50 * var(--u));
    /* the button sits with the SAME gap above, below and beside it: the
       capsule is 50, the button 33.6, so 7.9 all round (measured) */
    padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(7.9 * var(--u));
  }

  .site-head__nav { display: none; }

  /* THE DEVELOPERS PAGE'S HEADER BUTTON: "שנתחיל?" (swapped in by
     js/mentoring.js), 14 type, 4 / 12 padding, its own height rather than
     the capsule's — narrower than the desktop's pill (her call, 22 Sep). */
  [data-head="round"] .site-head__cta {
    align-self: center;
    height: auto;
    padding: calc(4 * var(--u)) calc(12 * var(--u));
    font-size: calc(14 * var(--u));
  }

  /* On the desktop the logo sits in a 147 box pushed to its far edge — that
     empty space is what positions the links. There are no links here. */
  /* centred in the capsule, whatever the CTA and the menu button measure
     (her call, 22 Sep 2026) */
  .site-head__logo-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: auto;
    height: auto;
  }
  .site-head__menu { margin-left: auto; }
  .site-head__logo { width: calc(62 * var(--u)); height: calc(20.5 * var(--u)); }

  .site-head__menu {
    display: block;
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-dark);
    line-height: 0;
    cursor: pointer;
  }
  /* the artwork is 82 wide with the three bars in its right quarter — the
     empty part is the gap between the logo and the bars, as on the other
     two pages */
  /* the developers page's size: 82 x 23.5, three bars 20 wide */
  .site-head__menu-svg {
    display: block;
    width: calc(82 * var(--u));
    height: calc(23.5 * var(--u));
  }

  /* the sheet — hangs under the capsule, same width, unfolds */
  .site-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 50%;
    translate: -50% 0;
    top: calc(70 * var(--u));
    width: calc(321 * var(--u));
    padding: calc(18 * var(--u)) calc(24 * var(--u));
    gap: calc(14 * var(--u));
    z-index: 149;
    border-radius: calc(24 * var(--u));
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(13, 9, 20, 0.08);
    color: var(--c-dark);
    opacity: 0;
    scale: 0.96;
    transform-origin: 50% 0;
    pointer-events: none;
    transition: opacity 0.28s var(--ease-out), scale 0.28s var(--ease-out);
  }
  .site-menu[hidden] { display: none; }
  .site-menu.is-open { opacity: 1; scale: 1; pointer-events: auto; }
  .site-menu a {
    font-size: calc(18 * var(--u));
    line-height: 1.4;
    font-weight: var(--fw-reg);
    text-align: right;
    opacity: 0;
    translate: 0 calc(-6 * var(--u));
    transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out);
  }
  .site-menu.is-open a { opacity: 1; translate: 0; }
  .site-menu.is-open a:nth-child(2) { transition-delay: 0.05s; }
  .site-menu.is-open a:nth-child(3) { transition-delay: 0.10s; }
  .site-menu.is-open a:nth-child(4) { transition-delay: 0.15s; }
  .site-menu.is-open a:nth-child(5) { transition-delay: 0.20s; }


  /* ---- Hero ------------------------------------------------------------
     THE TOP IS A COMPOSITION on the 393 artboard, scaled from the desktop's
     own relationships rather than invented:
       DESIGN at 178 (the desktop's 380 scaled to the width) — ink ~133..271
       the sticker over DESIGN's top edge by the same ~20 as the frame
       BETTER at 58, in its selection box, under DESIGN and flush with its
         right edge (x 360), with the four handles on the box's corners
       "Made for designers", the t mark and the "You" cursor round the box
         where the desktop has them, scaled by the same 58/128.
     Horizontal positions are written from the centre line, so a wider phone
     keeps the composition centred. Everything below it is in flow. */
  .hero {
    isolation: isolate;
    z-index: 2;                      /* its wave lies over the dark below */
    padding-top: calc(408 * var(--u));
    padding-bottom: calc(20 * var(--u));
    text-align: center;
  }

  /* the frosted columns and wash — her own hero plate, cropped to the phone */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* faded into the page colour at the bottom, so there is no seam where
       the hero ends above the dark section's jagged top */
    background:
      linear-gradient(to bottom, rgba(247, 247, 247, 0) 62%, #F7F7F7 92%),
      url("../assets/img/mentoring/bg-hero.webp") no-repeat 50% 0 / auto 100%;
  }

  /* THE RIBBON, IN THE DEVELOPERS PAGE'S POSE (her call, 22 Sep 2026): it
     comes in high on the right edge, sweeps down into a soft bowl and runs
     out to the left a little higher — the same swoosh as index.html's phone
     hero. The file is used unflipped for that; drawn 1300 wide, only its
     right-hand stretch is on screen. It lies across the seam, and
     js/mentoring.js cuts the dark section along its centre line. */
  .hero::after {
    content: "";
    position: absolute;
    left: calc(50% - 880 * var(--u));
    bottom: calc(-303 * var(--u));      /* its centre line runs ~20..115 into the section below */
    width: calc(1300 * var(--u));
    height: calc(297 * var(--u));
    background: url("../assets/img/mentoring/wave-ribbon.webp") no-repeat 0 0 / 100% 100%;
    transform: rotate(-12deg);
    pointer-events: none;
  }

  .capsule--tag {
    left: calc(50% - 68.5 * var(--u));           /* x 128 */
    top: calc(138 * var(--u));
    height: auto;
    padding: calc(5 * var(--u)) calc(14 * var(--u));
    font-size: calc(12.5 * var(--u));
  }

  .hero__title {
    left: 50%;
    top: calc(116 * var(--u));
    font-size: calc(178 * var(--u));
    letter-spacing: calc(-8.9 * var(--u));
  }

  /* BETTER's selection box: 223.6 x 67, right edge 360, top 284 */
  .hero__select {
    left: calc(50% + 51.7 * var(--u));           /* centre x 248.2 */
    top: calc(317.5 * var(--u));
    width: calc(223.6 * var(--u));
    height: calc(67 * var(--u));
    border-width: max(1px, calc(2 * var(--u)));
  }
  .hero__better {
    left: calc(50% + 51.7 * var(--u));
    top: calc(290.9 * var(--u));
    font-size: calc(58 * var(--u));
    letter-spacing: calc(-2.9 * var(--u));
  }
  .hero .handle {
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
    border-width: max(1px, calc(2 * var(--u)));
  }
  .hero__handle--tl { left: calc(50% - 60.1 * var(--u)); top: calc(284 * var(--u)); }
  .hero__handle--tr { left: calc(50% + 163.5 * var(--u)); top: calc(284 * var(--u)); }
  .hero__handle--bl { left: calc(50% - 60.1 * var(--u)); top: calc(351 * var(--u)); }
  .hero__handle--br { left: calc(50% + 163.5 * var(--u)); top: calc(351 * var(--u)); }

  /* "Made for designers" and the t mark are the desktop's — on a phone they
     crowded BETTER (her call, 22 Sep 2026) */
  .hero__made,
  .hero__star { display: none; }
  .hero__mark { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .hero__mark--a { left: calc(50% - 172.5 * var(--u)); top: calc(300 * var(--u)); }
  .hero__mark--b { left: calc(50% + 150.5 * var(--u)); top: calc(92 * var(--u)); }

  /* "You" — parked left of BETTER's box, pointing at it. On a touch screen
     it is artwork, never the cursor (js/mentoring-hero.js is desktop-only). */
  .hero__you {
    left: calc(50% - 118 * var(--u));
    top: calc(322 * var(--u));
  }
  .hero__you .cursor-arrow { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  /* A cursor that does not follow you cannot say "You". Static, pointing at
     BETTER, it just says "HI!" — her choice, 22 Sep 2026, after "Tsivia" and
     "Your turn". The desktop
     keeps "You", where it IS your cursor. */
  .hero__you .cursor-badge { font-size: 0; direction: ltr; }   /* HI! reads left to right */
  .hero__you .cursor-badge::after {
    content: "Hi!";
    font-size: calc(12 * var(--u));
  }
  .hero__you .cursor-badge {
    left: calc(10 * var(--u));
    top: calc(9 * var(--u));
    padding: calc(2 * var(--u)) calc(7 * var(--u));
    border-radius: calc(6 * var(--u));
  }

  /* the copy under the composition, in flow */
  .hero__lede,
  .hero__sub,
  .hero__cta {
    position: relative;
    left: auto;
    top: auto;
    translate: none;
    width: auto;
  }
  .hero__lede {
    font-size: calc(24 * var(--u));
    line-height: 1.2;
    letter-spacing: calc(0.6 * var(--u));
    white-space: normal;
    text-wrap: balance;               /* two even lines, never one word alone */
  }
  .hero__sub {
    margin-top: calc(14 * var(--u));
    font-size: calc(15.5 * var(--u));
    line-height: 1.45;
    text-align: center;
  }
  .hero__cta {
    margin-top: calc(24 * var(--u));
    padding: calc(7 * var(--u)) calc(30 * var(--u));
    font-size: calc(17 * var(--u));
  }


  /* ---- The dark sections: services, audience, about -------------------
     On the desktop one dark SHAPE lies behind all three. Here each paints
     the same #0D0914, and the shape's two jagged edges survive as the top of
     services and the bottom of about. */
  .services,
  .audience,
  .about { background: #0D0914; }

  .services {
    z-index: 1;
    padding-top: calc(220 * var(--u));   /* clear of the ribbon lying over the top */
    padding-bottom: calc(30 * var(--u));
    /* its top edge is cut along the ribbon by js/mentoring.js */
  }

  .services__title {
    font-size: calc(62 * var(--u));
    line-height: 1;
  }
  .capsule--services { rotate: 3deg; }

  /* ---- THE CARDS: the developers page's stacking deck --------------------
     Her call, 22 Sep 2026: no falling icons on the phone; the three cards
     pile up as she scrolls, exactly as WHY ME does on the developers page.
     js/mentoring.js moves the cards into .services__deck, puts that on a
     sticky .stack-stage and adds an empty .stack-run after it (the scroll the
     stage stays parked for); then it lifts 02 and 03 into place. All three
     share one grid cell, each dealt 112 lower than the one before — 112 is
     what clears a 64 number with air under it, the developers page's own
     measure. */
  .icon-fall { display: none; }

  .services .stack-stage {
    position: sticky;
    top: calc(80 * var(--u));           /* under the floating header */
    z-index: 1;
    margin-top: calc(64 * var(--u));    /* clear of the sticker above it */
  }
  .services .stack-run { height: calc(1200 * var(--u)); }

  .services__deck {
    display: grid;
    grid-template-columns: 1fr;
  }

  .card {
    grid-area: 1 / 1;
    align-self: start;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin: 0;
    padding: calc(36 * var(--u)) calc(32 * var(--u));
    gap: calc(24 * var(--u));
    justify-content: flex-start;
    /* opaque, so a card sliding over another hides it; the dark ones keep
       the desktop's white hairline on the section's own dark */
    box-shadow: 0 calc(-1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.18),
                0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.22);
  }
  .card--dark { background: #0D0914; }
  .card--01 { z-index: 1; }
  .card--02 { z-index: 2; margin-top: calc(112 * var(--u)); }
  .card--03 { z-index: 3; margin-top: calc(224 * var(--u)); }

  /* the site-wide rise is a second motion competing with the climb: the
     fade stays, the travel goes (the climb uses the translate property) */
  .card[data-anim] {
    transform: none;
    transition: opacity 0.7s var(--ease-rise);
  }

  .card__num   { font-size: calc(64 * var(--u)); }
  .card__body  { gap: calc(20 * var(--u)); }
  .card__head  { gap: calc(16 * var(--u)); }
  .card__title { width: auto; font-size: calc(28 * var(--u)); line-height: 1; }
  .card__text,
  .card__link  { font-size: calc(16 * var(--u)); line-height: 1.45; }

  @media (prefers-reduced-motion: reduce) {
    .services .card { translate: none !important; }
  }


  /* ---- Audience ------------------------------------------------------- */
  .audience {
    padding-top: calc(80 * var(--u));
    padding-bottom: calc(40 * var(--u));
  }
  .audience__title { font-size: calc(46 * var(--u)); line-height: 1; }

  .audience__list {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    margin-top: calc(30 * var(--u));
  }

  /* A phone has no hover. Every row is shown OPEN — title and note — and the
     desktop's hover look goes to the row crossing the MIDDLE of the screen
     (.is-active, js/mentoring.js): the row turns white, its title is framed in
     purple between the two brackets, the words go dark. As she scrolls, the
     frame travels down the list — the section comes alive without hiding a
     word. The real :hover is neutralised: a tap would leave it stuck. */
  .arow,
  .arow:hover,
  .arow:focus-visible {
    height: auto;
    padding: calc(26 * var(--u)) calc(52 * var(--u)) calc(26 * var(--u)) calc(14 * var(--u));
    margin-inline: calc(-14 * var(--u));      /* the white row reaches past the text */
    color: #F7F7F7;
    font-weight: var(--fw-light);
    transition: color 0.45s var(--ease-soft);
  }
  .arow:hover::before { opacity: 0; }
  .arow.is-active::before { opacity: 1; }
  .arow.is-active { color: var(--c-dark); font-weight: var(--fw-light-on-white); }

  .arow__bullet,
  .arow__you { display: none; }

  .arow__titlewrap { display: block; }
  .arow__text,
  .arow:hover .arow__text,
  .arow:focus-visible .arow__text {
    font-size: calc(22 * var(--u));
    line-height: 1.2;
    white-space: normal;
    padding: calc(10 * var(--u)) calc(12 * var(--u));
    border-color: transparent;
    color: inherit;
  }
  .arow__text,
  .arow:hover .arow__text { border-width: max(1px, calc(1.3 * var(--u))); }
  .arow.is-active .arow__text {
    border-color: var(--c-purple);
    color: var(--c-purple);
  }

  /* THE FRAME, FINER (her call, 22 Sep 2026): the desktop's 3px frame and
     its 14-square brackets are drawn for a 1920 row; on a phone they were
     heavy. The frame line drops to 1.3 and the brackets are drawn here, by
     the title box itself, as two 9 squares with a 1.3 line — the same
     objects, a phone's weight. The desktop's bracket images are hidden. */
  .arow__bracket { display: none; }
  .arow__titlewrap::before,
  .arow__titlewrap::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(9 * var(--u));
    height: calc(100% + 10 * var(--u));
    translate: -50% -50%;
    opacity: 0;
    transition: opacity 0.45s var(--ease-soft);
    --sq: calc(9 * var(--u));
    --in: calc(6.4 * var(--u));
    --ln: calc(1.3 * var(--u));
    background:
      linear-gradient(#FFFFFF, #FFFFFF) 50% var(--ln) / var(--in) var(--in) no-repeat,
      linear-gradient(#FFFFFF, #FFFFFF) 50% calc(100% - var(--ln)) / var(--in) var(--in) no-repeat,
      linear-gradient(var(--c-purple), var(--c-purple)) 50% 0 / var(--sq) var(--sq) no-repeat,
      linear-gradient(var(--c-purple), var(--c-purple)) 50% 100% / var(--sq) var(--sq) no-repeat;
  }
  .arow__titlewrap::before { left: 0; }
  .arow__titlewrap::after  { left: 100%; }
  .arow.is-active .arow__titlewrap::before,
  .arow.is-active .arow__titlewrap::after { opacity: 1; }

  .arow__num,
  .arow:hover .arow__num,
  .arow:focus-visible .arow__num {
    right: calc(14 * var(--u));
    top: calc(34 * var(--u));
    translate: none;
    font-size: calc(30 * var(--u));
    opacity: 1;
    transform: none;
  }
  .arow.is-active .arow__num { color: var(--c-purple); }

  .arow__noteWrap,
  .arow:hover .arow__noteWrap {
    grid-template-rows: 1fr;
    margin-top: calc(12 * var(--u));
  }
  .arow__note,
  .arow:hover .arow__note {
    opacity: 0.75;
    font-size: calc(15 * var(--u));
    line-height: 1.5;
    padding-inline: calc(12 * var(--u));
  }
  .arow.is-active .arow__note { opacity: 1; }
  .arow:last-child { border-bottom: 0; }   /* nothing under 03 */
  .arow__note br { display: none; }        /* the desktop's line break is for a 1920 line */


  /* ---- About ---------------------------------------------------------- */
  .about {
    padding-top: calc(60 * var(--u));
    padding-bottom: calc(220 * var(--u));  /* the CTA clear of the wave over the bottom edge */
    /* its bottom edge is cut along the second wave by js/mentoring.js */
  }

  .about__photo,
  .about__name,
  .about__tag,
  .about__bio,
  .about__cta {
    position: relative;
    left: auto;
    top: auto;
    translate: none;
  }

  /* short enough that the picture fills it to the bottom edge, so the name
     lifted onto that edge sits on her, not on empty dark */
  /* THE WHOLE PICTURE, NO CUT. It fades out into the section's dark over its
     lower third instead of ending on a straight edge, and the name is set in
     that fade (her note, 22 Sep 2026). */
  .about__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1159 / 1356;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
  }
  /* the desktop's crop is for a 770 x 974 box; here the picture simply
     covers its box */
  .about__photo img {
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    top: 0;
  }

  /* lifted onto the bottom of the photo, as the desktop sets the name
     against the picture (her call, 22 Sep 2026) */
  .about__name {
    z-index: 2;
    width: auto;
    margin-top: calc(-92 * var(--u));
    font-size: calc(48 * var(--u));
    text-align: center;
  }

  /* the "Web Designer" selection box, centred under the name. Its two
     brackets (the small squares on each side) are separate images placed
     for the 1920 artboard; here they are drawn by the box itself, from the
     same file, centred on its two side edges as the frame has them. */
  .about__tag {
    display: flex;
    overflow: visible;
    margin: calc(18 * var(--u)) auto 0;
    padding: calc(12 * var(--u)) calc(24 * var(--u));
    border-width: max(1px, calc(2 * var(--u)));
    font-size: calc(18 * var(--u));
  }
  .about__tag::before,
  .about__tag::after {
    content: "";
    position: absolute;
    top: 50%;
    height: calc(100% + 14 * var(--u));
    aspect-ratio: 17.0925 / 101.059;
    translate: -50% -50%;
    background: url("../assets/svg/mentoring/bracket-101.svg") no-repeat center / 100% 100%;
  }
  .about__tag::before { left: 0; }
  .about__tag::after  { left: 100%; }

  .about__tag-bracket,
  .about__spark { display: none; }

  .about__bio {
    width: auto;
    margin-top: calc(24 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1.55;
    text-align: center;
  }

  .about__cta {
    display: flex;
    width: 100%;
    margin-top: calc(28 * var(--u));
    padding: calc(8 * var(--u)) calc(20 * var(--u));
    font-size: calc(18 * var(--u));
  }


  /* ---- Plans ---------------------------------------------------------- */
  .plans {
    z-index: 2;                          /* its wave lies over About's edge */
    padding-top: calc(70 * var(--u));
    padding-bottom: calc(60 * var(--u));
  }

  /* THE SECOND WAVE, the same swoosh as the first — the developers page uses
     one pose for both of its phone waves, and so does this one. It lies over
     About's bottom edge, which js/mentoring.js cuts along its centre line. */
  .plans::before {
    content: "";
    position: absolute;
    left: calc(50% - 880 * var(--u));
    top: calc(-119 * var(--u));         /* its centre line ends just above About's bottom */
    width: calc(1300 * var(--u));
    height: calc(297 * var(--u));
    background: url("../assets/img/mentoring/wave-ribbon.webp") no-repeat 0 0 / 100% 100%;
    transform: rotate(-12deg);
    pointer-events: none;
  }

  .plans__title { font-size: calc(46 * var(--u)); line-height: 1; }

  .plans__row {
    position: relative;
    left: auto;
    top: auto;
    translate: none;
    width: 100%;
    flex-direction: column;
    gap: calc(36 * var(--u));
    margin-top: calc(40 * var(--u));
  }

  .plan {
    padding: calc(36 * var(--u)) calc(22 * var(--u));
    gap: calc(28 * var(--u));
  }
  .plan__handle { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
  .plan__head,
  .plan__head--wide { width: 100%; gap: calc(22 * var(--u)); }
  .plan__intro { gap: calc(12 * var(--u)); }
  .plan__title { font-size: calc(40 * var(--u)); }
  .plan__desc  { font-size: calc(16 * var(--u)); line-height: 1.45; }
  .plan__price { padding: calc(10 * var(--u)) calc(34 * var(--u)); border-radius: calc(10 * var(--u)); }
  .plan__unit  { font-size: calc(17 * var(--u)); }
  .plan__sum   { font-size: calc(36 * var(--u)); }
  .plan__rule  { width: 60%; }
  .plan__foot  { gap: calc(30 * var(--u)); width: 100%; }
  /* one tick per line: 16 type at 1.3 is a 20.8 line, so 15 + 5.8 */
  .plan__lines { font-size: calc(16 * var(--u)); }
  .plan__checks { width: calc(15 * var(--u)); gap: calc(5.8 * var(--u)); }
  .plan__checks span { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  .plan__cta {
    width: 100%;
    padding: calc(8 * var(--u)) calc(20 * var(--u));
    font-size: calc(18 * var(--u));
  }


  /* ---- LET'S TALK and the footer: the developers page's build -----------
     As there (css/mobile.css, "Footer, Figma frame 3116:689"): LET'S TALK on
     TWO lines at the hero's size, a 56 bar at the very bottom with the
     copyright centred in it, and ABOVE the bar the legal links as a small
     right-aligned column and the two contact icons as a column on the left.
     The picture behind is this page's own footer plate. */
  .contact {
    isolation: isolate;
    padding: calc(50 * var(--u)) 0 calc(100 * var(--u));
  }
  .contact::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-40 * var(--u));
    bottom: calc(-56 * var(--u));
    z-index: -1;
    background: url("../assets/img/mentoring/bg-footer.webp") no-repeat 50% 100% / cover;
  }
  .contact__mark {
    width: calc(393 * var(--u));
    margin-inline: auto;
    font-size: calc(174.4 * var(--u));
    /* a little air between the letters (was -8.72, her call 22 Sep 2026) */
    letter-spacing: calc(-2 * var(--u));
    /* THE FADE, SOFTER: the desktop's gradient is drawn for ONE line, so on
       two it dropped TALK to white in a few pixels. Here it runs top to bottom
       over both lines and thins out gradually through the whole of TALK. */
    background-image: linear-gradient(to bottom,
      rgb(32, 27, 73) 0%,
      rgb(63, 56, 123) 42%,
      rgba(88, 78, 162, 0.62) 66%,
      rgba(105, 94, 190, 0.28) 86%,
      rgba(105, 94, 190, 0) 104%);
    line-height: 0.83;
    white-space: normal;
    text-align: center;
  }

  /* the bar */
  .foot {
    top: auto;
    bottom: 0;
    width: 100%;
    height: calc(56 * var(--u));
  }
  .foot__copy {
    top: auto;
    bottom: calc(19 * var(--u));
    left: 50%;
    font-size: calc(12 * var(--u));
  }

  /* above the bar: the icons, a column on the left ... */
  .foot__social {
    top: auto;
    bottom: calc(66 * var(--u));
    left: var(--gut);
    flex-direction: column;
    gap: calc(8 * var(--u));
  }
  .foot__social img { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

  /* ... and the legal links, a column on the right, in the developers page's
     order: accessibility, privacy, terms */
  .foot__legal {
    top: auto;
    right: var(--gut);
    left: auto;
    translate: none;
    font-size: calc(11 * var(--u));
    line-height: 1.5;
  }
  .foot__legal--a11y    { bottom: calc(100 * var(--u)); }
  .foot__legal--privacy { bottom: calc(83.5 * var(--u)); }
  .foot__legal--terms   { bottom: calc(67 * var(--u)); }
}
@media (max-width: 899px) {
  /* LET'S TALK on ONE line, the screen's width (her note, 5 Oct, all pages) */
  .contact__mark {
    font-size: calc(207 * var(--u)) !important;
    letter-spacing: -0.02em !important;
    line-height: 0.87 !important;
    white-space: nowrap !important;
  }
}

/* LET'S TALK — her frame 3749:891 (5 Oct 2026), in this page's purple:
   Degolan 198.737, line 0.83, 468.344 wide (the L and the K run off the
   screen), its top 95 above the bar, fading down to it. The icons and the
   legal links move ABOVE it, centred. */
@media (max-width: 899px) {
  .contact { padding: calc(115 * var(--u)) 0 0 !important; overflow-x: clip; }
  .contact__mark {
    position: relative;
    left: 50%;
    direction: ltr;                                 /* wider than the screen: in RTL it would hang off the left */
    translate: -50% 0 !important;
    width: calc(468.344 * var(--u)) !important;
    max-width: none;
    margin: 0 calc(100% - 468.344 * var(--u)) calc(-70 * var(--u)) 0 !important;   /* RTL parent: the overflow would hang left; its line 95 above the bar, the foot on under it (measured) */
    font-size: calc(198.737 * var(--u)) !important;
    letter-spacing: 0 !important;
    line-height: 0.83 !important;
    background-image: linear-gradient(to bottom, rgb(32, 27, 73) 1.2263%, rgba(88, 78, 162, 0.6) 60.162%, rgba(105, 94, 190, 0) 79.543%) !important;
  }
  .foot__social {
    bottom: calc(205 * var(--u)) !important;
    left: 50% !important;
    translate: -50% 0;
    flex-direction: row !important;
    gap: calc(22 * var(--u)) !important;
  }
  .foot__social img { width: calc(20 * var(--u)) !important; height: calc(20 * var(--u)) !important; }
  .foot__legal { bottom: calc(173 * var(--u)) !important; font-size: calc(13 * var(--u)) !important; }
  .foot__legal--a11y    { right: calc(24 * var(--u)) !important; left: auto !important; }
  .foot__legal--privacy { right: auto !important; left: 50% !important; translate: -50% 0 !important; }
  .foot__legal--terms   { right: auto !important; left: calc(24 * var(--u)) !important; }
}
@media (max-width: 899px) {
  /* the whole LET'S TALK: its room above and below (css/site-nav.css .is-whole)
     taken back here, where the margins are set with !important */
  .contact__mark.is-whole {
    margin-top: -0.25em !important;
    margin-bottom: calc(-70 * var(--u) - 0.25em) !important;
  }
}
@media (max-width: 899px) {
  /* DESIGN kept whole: its room above (css/site-nav.css .is-whole) on top of
     the ink correction js/site-degolan.js writes inline — exactly where it was */
  .hero__title.is-degolan.is-whole { margin-top: calc(-0.0903em - 0.25em) !important; }
}
@media (max-width: 899px) {
  /* LET'S TALK ends ON the line (her note): the type box's foot on the bar's top */
  .contact__mark.is-whole { margin-bottom: -0.25em !important; }
}
@media (max-width: 899px) {
  /* LET'S TALK sits on the line now (its top 221 above the page's foot): the
     links and the icons above it again, with the same air */
  .foot__legal { bottom: calc(243 * var(--u)) !important; }
  .foot__social { bottom: calc(275 * var(--u)) !important; }
  .contact { padding-top: calc(130 * var(--u)) !important; }
}
@media (max-width: 899px) {
  /* her S22 (5 Oct): the YOUR DESIGN tag sat ON the word — now a little above
     DESIGN (its foot just touching the letters' top, 114) — and BETTER with
     its box, its handles and the cursor a little lower (+16) */
  .capsule--tag { top: calc(93 * var(--u)); }
  .hero__select, .hero__better, .hero .hero__handle--tl, .hero .hero__handle--tr,
  .hero .hero__handle--bl, .hero .hero__handle--br, .hero__you, .hero__mark--a { margin-top: calc(16 * var(--u)); }
}
@media (max-width: 899px) {
  /* LET'S TALK: its letters' foot ON the purple line (was 7.3 above) */
  .contact__mark.is-whole { margin-bottom: calc(-0.25em - 7.3 * var(--u)) !important; }
}
@media (max-width: 899px) {
  .capsule--tag { top: calc(79 * var(--u)); }   /* higher again (her note, 6 Oct); between the logo and the menu, clear of both */
}
@media (max-width: 899px) {
  /* THE BACKGROUND COLUMNS ON THE LINES (her note, 6 Oct). Both plates are
     13 equal frosted columns; the page's four lines sit symmetric round the
     middle, 325/3 = 108.33 apart. Drawn 13 x 108.33 = 1408.33 wide and
     centred, the columns' edges fall exactly on the four lines (the 5th–8th
     edges at -162.5 / -54.17 / +54.17 / +162.5 from the middle). */
  .hero::before {
    background:
      linear-gradient(to bottom, rgba(247, 247, 247, 0) 62%, #F7F7F7 92%),
      url("../assets/img/mentoring/bg-hero.webp") no-repeat 50% 0 / calc(1408.33 * var(--u)) auto;
  }
  /* the footer as the hero (her note: it was the plate's pale top, with the
     plate's white seam showing as a stray white line under the plans): its
     coloured columns behind LET'S TALK, faded in from the page above */
  .contact::before {
    background:
      linear-gradient(to bottom, #F7F7F7 0%, rgba(247, 247, 247, 0) 30%),
      url("../assets/img/mentoring/bg-footer.webp") no-repeat 50% 100% / calc(1408.33 * var(--u)) auto;
  }
}
@media (max-width: 899px) {
  /* LET'S TALK touching the line: the fade ends at the letters' foot (97.5%), not at 79.5% */
  .contact__mark { background-image: linear-gradient(to bottom, rgb(32, 27, 73) 1.5%, rgba(88, 78, 162, 0.6) 73.8%, rgba(105, 94, 190, 0) 97.5%) !important; }
}
@media (max-width: 899px) {
  /* her notes, 6 Oct: the YOUR DESIGN tag a little to the left; the note
     under ליווי אישי a little higher, riding over the title's foot */
  .capsule--tag { left: calc(50% - 80.5 * var(--u)); }
  .capsule--services { margin-top: calc(-26 * var(--u)) !important; }
}