/* landing.css — shared visual system for the DanceMate marketing pages
   (index.html and tour.html). Linked rather than inlined so the two pages
   cannot drift apart. */
    /* ═════════════ TOKENS ═════════════ */
    :root{
      /* the colour the hero is made of */
      --deep:    #123063;
      --mid:     #1B4D8E;
      --bright:  #3F8BC9;
      --light:   #6FBBE8;
      /* ink on white */
      --ink:     #0B1A31;
      --body:    #4A5A70;
      --muted:   #667586;   /* 4.7:1 on white; #7C8B9E was 3.5:1 */
      --hair:    rgba(11,26,49,.11);
      --hair-2:  rgba(11,26,49,.07);
      --well:    #F2F6FA;
      --bar-neutral: #B9C4D1;  /* the "by hand" bar — a neutral, not an accent */
      /* accents */
      --coral:   #FF5A45;
      --coral-btn: #D13A21; /* button fill: white text 4.8:1 */
      --coral-d: #E23F2B;
      --sky:     #68B1E2;
      --navy:    #1B3768;
      --green:   #14876A;
      --green-l: #E5F4EF;
      /* medal grades — real meaning, used only for grades */
      --bronze:  #B0743A;
      --silver:  #7F8B98;
      --gold:    #BE9427;
      --thistle: #6B4CA8;

      --sans: 'Figtree', system-ui, -apple-system, sans-serif;
      --ease: cubic-bezier(.22,1,.36,1);
      --shadow-1: 0 2px 10px rgba(11,26,49,.07);
      --shadow-2: 0 18px 40px rgba(11,26,49,.13);
      --shadow-3: 0 42px 80px rgba(4,16,36,.44), 0 8px 20px rgba(4,16,36,.22);
    }

    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

    body{
      font-family:var(--sans);
      color:var(--body);
      background:#fff;
      line-height:1.62;
      -webkit-font-smoothing:antialiased;
    }
    /* height:auto is load-bearing. The width and height attributes on an image element are
       presentational hints, so any rule that sets only width lets the height attribute through
       and stretches the picture vertically. Rules that want a fixed height (nav logo, footer)
       set it explicitly. */
    img{max-width:100%;display:block;height:auto}
    a{color:inherit;text-decoration:none}
    ::selection{background:rgba(255,90,69,.24)}

    :focus-visible{outline:2.5px solid var(--coral-btn);outline-offset:3px;border-radius:5px}
    .on-colour :focus-visible{outline-color:#fff}

    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
             clip:rect(0 0 0 0);white-space:nowrap;border:0}
    .skip-link{position:fixed;top:-60px;left:16px;z-index:300;background:#fff;color:var(--ink);
               padding:10px 18px;border-radius:8px;font-weight:700;transition:top .2s}
    .skip-link:focus{top:12px}

    .inner{max-width:1180px;margin:0 auto;padding:0 5vw}

    /* ═════════════ TYPE ═════════════ */
    h1,h2,h3{color:var(--ink);letter-spacing:-.028em;line-height:1.06;font-weight:800}
    h1{font-size:clamp(2.35rem,5vw,3.42rem)}
    h2{font-size:clamp(1.9rem,3.6vw,2.6rem)}
    h3{font-size:1.18rem;letter-spacing:-.018em;line-height:1.25}
    .kicker{
      display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:700;
      letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:18px;
    }
    .kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);flex-shrink:0}
    .lede{font-size:1.09rem;line-height:1.58;max-width:56ch}
    .lede b{font-weight:700;color:var(--ink)}

    /* ═════════════ BUTTONS ═════════════ */
    .btn{
      display:inline-block;background:var(--coral-btn);color:#fff;font-weight:700;
      font-size:.95rem;padding:12px 22px;border-radius:9px;
      box-shadow:0 8px 20px rgba(209,58,33,.32);
      transition:transform .16s var(--ease),background .16s;
      border:none;cursor:pointer;font-family:var(--sans);
    }
    .btn:hover{background:#B22F19;transform:translateY(-2px)}
    .btn-lg{font-size:1rem;padding:16px 30px;border-radius:10px}
    .btn-out{
      display:inline-block;font-size:1rem;font-weight:700;color:#fff;padding:15px 28px;
      border-radius:10px;border:1.6px solid rgba(255,255,255,.5);
      transition:background .16s,border-color .16s;
    }
    .btn-out:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.8)}
    /* Used on both <a> and <button>, so it carries the button resets the way .btn does. */
    .btn-ink{
      display:inline-block;font-size:1rem;font-weight:700;color:var(--ink);padding:15px 28px;
      border-radius:10px;border:1.6px solid rgba(11,26,49,.2);background:#fff;
      transition:border-color .16s,transform .16s var(--ease);
      cursor:pointer;font-family:var(--sans);
    }
    .btn-ink:hover{border-color:var(--ink);transform:translateY(-2px)}
    .textlink{font-weight:700;color:var(--navy);border-bottom:2px solid rgba(27,55,104,.3);padding-bottom:2px}
    .textlink:hover{border-bottom-color:var(--navy)}

    /* ═════════════ NAV ═════════════ */
    .nav{
      position:absolute;left:0;right:0;top:0;z-index:40;height:84px;
      display:flex;align-items:center;
      /* scrim: lifts small white nav text to 6.3:1 over the bright end of the gradient */
      background:linear-gradient(to bottom,rgba(9,26,50,.38),rgba(9,26,50,0));
    }
    .nav .inner{display:flex;align-items:center;width:100%}
    /* The full-colour logo on a white plate rather than a flat white silhouette: navy and
       orange type has nothing to sit against on the gradient, so the plate is what makes
       it legible without throwing away the brand colours. */
    .nav .brand{display:inline-flex;align-items:center;background:#fff;padding:7px 13px;
                border-radius:10px;margin-right:46px;box-shadow:var(--shadow-1)}
    .nav .logo{height:24px;width:auto}
    .nav-links{display:flex;gap:30px;list-style:none}
    .nav-links a{font-size:.95rem;font-weight:600;color:#fff}
    .nav-links a:hover{color:#fff}
    .nav-right{margin-left:auto;display:flex;align-items:center;gap:24px}
    .nav-right .signin{font-size:.95rem;font-weight:600;color:#fff;background:none;border:none;
                       cursor:pointer;font-family:var(--sans)}
    .nav-right .signin:hover{color:#fff}
    .burger{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
    .burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;margin:5px 0}

    /* ═════════════ HERO — the colour ═════════════ */
    .hero{
      position:relative;overflow:hidden;
      background:linear-gradient(128deg,var(--deep) 0%,var(--mid) 38%,var(--bright) 72%,var(--light) 100%);
      padding:170px 0 96px;
    }
    .hero .bloom{
      position:absolute;left:-160px;bottom:-240px;width:700px;height:700px;border-radius:50%;
      background:radial-gradient(circle,rgba(255,90,69,.44) 0%,rgba(255,90,69,0) 66%);
      pointer-events:none;
    }
    .hero .bloom-2{
      position:absolute;right:-140px;top:-200px;width:600px;height:600px;border-radius:50%;
      background:radial-gradient(circle,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 68%);
      pointer-events:none;
    }
    .hero .dancers{
      position:absolute;left:46%;bottom:-56px;width:min(430px,32vw);aspect-ratio:1;
      background:#fff;opacity:.1;pointer-events:none;
      -webkit-mask-image:url('/hero-dancers.png');mask-image:url('/hero-dancers.png');
      -webkit-mask-size:contain;mask-size:contain;
      -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    }
    @supports not (mask-image:url('/hero-dancers.png')){.hero .dancers{display:none}}

    .hero .inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
    .hero .kicker{color:rgba(255,255,255,.94)}
    .hero h1{color:#fff}
    .hero h1 em{font-style:normal;color:#9FD8FF}
    .hero .lede{margin-top:20px;color:rgba(255,255,255,.95);max-width:30rem}
    .hero .lede b{color:#fff}
    .hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
    .assure{margin-top:26px;display:flex;flex-wrap:wrap;gap:22px}
    .assure span{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:#fff}
    .assure .tk{color:#25C08A;font-weight:800}

    /* the sheet */
    .sheetwrap{position:relative;margin-right:-5vw}
    .sheet{
      position:relative;width:100%;aspect-ratio:var(--sheet-ar,556/498);overflow:hidden;border-radius:14px;
      background:#fff;transform:rotate(-1.8deg);box-shadow:var(--shadow-3);
    }
    .sheet img{position:absolute;width:var(--w,191.9%);left:var(--x,-60.4%);top:var(--y,-2.3%);
               height:auto;max-width:none}
    .sheet::after{
      content:"";position:absolute;left:0;right:0;bottom:0;height:9%;
      background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 84%);
    }
    .sheet-chip{
      position:absolute;left:-42px;bottom:34px;z-index:3;background:#fff;border-radius:12px;
      box-shadow:0 20px 40px rgba(4,16,36,.32);padding:14px 19px;display:flex;align-items:center;gap:12px;
    }
    .sheet-chip .ring{width:23px;height:23px;border-radius:50%;background:var(--green);flex-shrink:0;
                      display:flex;align-items:center;justify-content:center}
    .sheet-chip .t1{font-size:.88rem;font-weight:700;color:var(--ink);line-height:1.25}
    .sheet-chip .t2{font-size:.78rem;color:var(--muted);font-weight:500}
    .sheet-cap{margin-top:18px;color:#fff;font-size:.88rem;font-weight:600;
               display:inline-flex;align-items:center;gap:9px;
               background:rgba(9,26,50,.5);padding:7px 14px;border-radius:40px}
    .sheet-cap .sq{width:9px;height:9px;border-radius:2px;background:#fff;opacity:.7;flex-shrink:0}

    /* ═════════════ SECTIONS ═════════════ */
    .room{padding:96px 0}
    .room.well{background:var(--well)}
    .room-head{max-width:44rem;margin-bottom:48px}
    .room-head .lede{margin-top:16px}



    /* split section */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
    .checks{margin-top:26px;list-style:none;display:grid;gap:14px}
    .checks li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;line-height:1.5}
    .checks .tk{width:22px;height:22px;border-radius:50%;background:var(--green-l);color:var(--green);
                font-weight:800;font-size:.78rem;display:flex;align-items:center;justify-content:center;
                flex-shrink:0;margin-top:3px}
    .checks b{color:var(--ink);font-weight:700}
    /* Screenshot frame. Shows the whole image by default — several of the app captures
       are already tightly cropped and would be damaged by a blanket crop.
       Add .crop for the full-window 1893px captures, where showing the whole screen is
       illegible at page scale, and set the region inline. The arithmetic:
       --w = imgW/cropW, --x = -cropX/cropW, --y = -cropY/cropH, --ar = cropW/cropH. */
    .framed{
      overflow:hidden;border:1px solid var(--hair);border-radius:16px;
      box-shadow:var(--shadow-2);background:#fff;
    }
    .framed img{width:100%;height:auto}
    .framed.crop{position:relative;aspect-ratio:var(--ar,1340/560)}
    .framed.crop img{position:absolute;width:var(--w,141.3%);left:var(--x,-20.9%);top:var(--y,-53.6%);
                     height:auto;max-width:none}

    /* grades */
    .grades{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
    .g{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--hair);
       border-radius:40px;padding:8px 17px 8px 10px;font-size:.88rem;font-weight:700}
    .g .pip{width:15px;height:15px;border-radius:50%;flex-shrink:0}
    .g{color:var(--ink)}
    .g.b .pip{background:linear-gradient(140deg,#D9A066,var(--bronze))}
    .g.s .pip{background:linear-gradient(140deg,#C3CCD5,var(--silver))}
    .g.g .pip{background:linear-gradient(140deg,#EBCB6C,var(--gold))}

    /* ═════════════ PRICING ═════════════ */
    /* Pricing takes the page's own gradient. It sits directly below #school, which is
       also .room.well — sharing that grey ran the two sections together with no edge.
       Colour at the moment of deciding, and the white card lifts off it the way the AR2
       sheet lifts off the hero. Everything set in ink has to be re-set for a dark ground. */
    .pricing-colour{
      background:linear-gradient(128deg,var(--deep) 0%,var(--mid) 38%,var(--bright) 72%,var(--light) 100%);
    }
    .pricing-colour h2{color:#fff}
    .pricing-colour .kicker{color:rgba(255,255,255,.94)}
    .pricing-colour .lede{color:rgba(255,255,255,.95)}
    .pricing-colour .plan-extras-h{color:rgba(255,255,255,.74)}
    .pricing-colour .checks li{color:rgba(255,255,255,.94)}
    .pricing-colour .checks b{color:#fff}
    .pricing-colour .checks .tk{background:rgba(255,255,255,.2);color:#fff}
    .pricing-colour .solo-line{color:rgba(255,255,255,.92)}
    .pricing-colour .solo-line b{color:#fff}
    .pricing-colour .textlink{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
    .pricing-colour .textlink:hover{border-bottom-color:#fff}
    .pricing-colour .price{box-shadow:var(--shadow-3)}
    .pricing-colour .price.feature{border-color:#fff}
    .pricing-colour :focus-visible{outline-color:#fff}

    .prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:760px}
    .price{background:#fff;border:1px solid var(--hair);border-radius:16px;padding:32px 30px;
           box-shadow:var(--shadow-1);position:relative}
    .price.feature{border:2px solid var(--navy);box-shadow:var(--shadow-2)}
    .price .tag{position:absolute;top:-12px;right:24px;background:var(--navy);color:#fff;
                font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
                padding:5px 12px;border-radius:40px}
    .price .plan{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
    .price .amt{font-size:3rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;margin:10px 0 2px;
                line-height:1}
    .price .amt small{font-size:1rem;font-weight:600;color:var(--muted);letter-spacing:0}
    /* No min-height: that existed to keep two cards' descriptions level so their buttons
       lined up. With a single card it only padded the label out to 48px for one line. */
    .price p{font-size:.95rem;margin-top:12px}
    .price .btn,.price .btn-ink{margin-top:20px;width:100%;text-align:center}
    /* A single plan: the card keeps a card's width rather than stretching to fill the row,
       and what the price buys sits beside it instead of the row being half empty. */
    .prices-one{grid-template-columns:minmax(0,380px);max-width:none}
    .plan-row{display:grid;grid-template-columns:380px minmax(0,1fr);gap:44px;align-items:start}
    .plan-extras{padding-top:9px}
    .plan-extras-h{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
                   color:var(--muted);margin-bottom:16px}
    .plan-extras .checks{margin-top:0}
    @media (max-width:900px){
      .plan-row{grid-template-columns:1fr;gap:32px}
      .plan-extras{padding-top:0}
    }
    /* Solo, stated rather than offered. It sits below the card as a sentence, so nothing
       is hidden from a teacher looking for it, but there is only one thing to choose. */
    .solo-line{margin-top:26px;font-size:1rem;color:var(--body)}
    .solo-line b{color:var(--ink);font-weight:800}
    .price-note{margin-top:14px;font-size:.95rem;color:var(--body);font-weight:500}

    /* ═════════════ FOUNDER + CTA ═════════════ */
    .founder{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;max-width:52rem}
    .founder .mark{width:88px;height:88px;border-radius:50%;background:var(--well);
                   display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--hair)}
    .founder .mark img{width:52px}
    .founder blockquote{font-size:1.22rem;line-height:1.5;color:var(--ink);font-weight:600}
    .founder cite{display:block;margin-top:12px;font-style:normal;font-size:.95rem;color:var(--muted);font-weight:600}

    /* The closing call to action is a card, not a full-bleed band. Pricing carries the
       gradient now; ending light keeps that the one colour moment at the foot of the page.
       The secondary button here must be .btn-ink, not .btn-out — .btn-out is white on white. */
    .finale-room{padding:96px 0;background:var(--well)}
    .finale-card{position:relative;overflow:hidden;border-radius:18px;padding:64px 44px;
                 text-align:center;background:#fff;box-shadow:var(--shadow-2)}
    .finale-body{position:relative;z-index:2}
    .finale-card h2{color:var(--ink);max-width:20ch;margin:0 auto}
    .finale-card p{margin:18px auto 0;color:var(--body);max-width:46ch}
    .finale-card .hero-actions{justify-content:center}
    @media (max-width:720px){
      .finale-card{padding:44px 22px}
    }

    /* ═════════════ FOOTER ═════════════ */
    footer{background:#fff;padding:52px 0 44px;border-top:1px solid var(--hair)}
    .foot{display:flex;flex-wrap:wrap;gap:26px;align-items:center}
    .foot img{height:26px;width:auto}
    .foot nav{display:flex;flex-wrap:wrap;gap:22px;margin-left:auto}
    .foot nav a{font-size:.95rem;font-weight:600;color:var(--body)}
    .foot nav a:hover{color:var(--ink)}
    .legal{margin-top:26px;font-size:.88rem;color:var(--muted);line-height:1.6}

    /* ═════════════ MOBILE MENU ═════════════ */
    .mobile-menu{
      position:fixed;inset:0;z-index:120;background:linear-gradient(150deg,var(--deep),var(--mid));
      display:none;flex-direction:column;padding:26px 5vw;
    }
    .mobile-menu.open{display:flex}
.mobile-menu ul{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
    .mm-top{display:flex;align-items:center}
    .mm-top img{height:26px;filter:brightness(0) invert(1)}
    .mm-close{margin-left:auto;background:none;border:none;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:4px 10px}
    .mobile-menu ul{list-style:none;margin-top:46px;display:grid;gap:22px}
    .mobile-menu a,.mobile-menu button{font-size:1.22rem;font-weight:700;color:#fff;background:none;border:none;
                                       font-family:var(--sans);cursor:pointer;padding:0;text-align:left}
    .mobile-menu .btn{margin-top:30px;text-align:center;font-size:1rem}

    /* ═════════════ MODAL ═════════════ */
    .modal-overlay{
      position:fixed;inset:0;z-index:200;background:rgba(11,26,49,.6);
      display:none;align-items:center;justify-content:center;padding:5vw;
    }
    .modal-overlay.open{display:flex}
    .modal{background:#fff;border-radius:18px;padding:34px 32px;max-width:440px;width:100%;
           box-shadow:0 40px 90px rgba(4,16,36,.4)}
    .modal h3{font-size:1.5rem;margin-bottom:10px}
    .modal p{font-size:.95rem;margin-bottom:20px}
    .modal input{
      width:100%;padding:14px 16px;border:1.5px solid rgba(11,26,49,.22);border-radius:10px;
      font-size:1rem;font-family:var(--sans);font-weight:600;color:var(--ink);margin-bottom:16px;
    }
    .modal input:focus{outline:2.5px solid var(--coral);outline-offset:2px;border-color:transparent}
    .modal .btn{width:100%;font-size:1rem;padding:15px}
    .modal-msg{display:none;padding:12px 15px;border-radius:10px;font-size:.95rem;font-weight:600;margin-bottom:16px}
    .modal-msg.info{background:var(--well);color:var(--body)}
    .modal-msg.success{background:var(--green-l);color:var(--green)}
    .modal-msg.error{background:#FDECEA;color:var(--coral-d)}
    .modal-x{background:none;border:none;font-size:.95rem;font-weight:600;color:var(--muted);
             cursor:pointer;margin-top:14px;font-family:var(--sans);display:block;width:100%}

    /* ═════════════ MOTION ═════════════ */
    .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
    .reveal.is-in{opacity:1;transform:none}
    .reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s}
    @media (prefers-reduced-motion: reduce){
      .reveal{opacity:1;transform:none;transition:none}
      .btn:hover,.btn-ink:hover,.screen:hover{transform:none}
    }

    /* ═════════════ RESPONSIVE ═════════════ */
    @media (max-width:980px){
      .hero{padding:132px 0 74px}
      .hero .inner{grid-template-columns:1fr;gap:52px}
      .hero .dancers{width:64vw;opacity:.12;right:-8%}
      .sheet-chip{left:auto;right:14px;bottom:20px}
      .split{grid-template-columns:1fr;gap:44px}
      .founder{grid-template-columns:1fr;gap:22px}
    }
    @media (max-width:720px){
      .nav-links,.nav-right{display:none}
      .burger{display:block}
      .room{padding:68px 0}
      .prices{grid-template-columns:1fr}
      .sheet-chip{padding:11px 14px}
      .sheet-chip .t1{font-size:.78rem}
      .sheet-chip .t2{font-size:.72rem}
      .assure{gap:14px}
    }

/* ═════════════ TOUR PAGE ═════════════ */
.tour-head{
  position:relative;overflow:hidden;padding:150px 0 76px;
  background:linear-gradient(128deg,var(--deep) 0%,var(--mid) 44%,var(--bright) 100%);
}
.tour-head .bloom{
  position:absolute;left:-160px;bottom:-260px;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,69,.4) 0%,rgba(255,90,69,0) 66%);pointer-events:none;
}
.tour-head .inner{position:relative;z-index:2}
.tour-head .kicker{color:rgba(255,255,255,.94)}
.tour-head h1{color:#fff;max-width:16ch}
.tour-head .lede{margin-top:18px;color:rgba(255,255,255,.95)}

.stop-index{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px}
.stop-index a{
  display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);border-radius:40px;padding:8px 17px;
  font-size:.88rem;font-weight:700;color:#fff;transition:background .16s;
}
.stop-index a:hover{background:rgba(255,255,255,.24)}
.stop-index .n{font-size:.72rem;font-weight:800;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}

.stop{padding:88px 0;border-top:1px solid var(--hair-2)}
.stop:first-of-type{border-top:none}
.stop.well{background:var(--well)}
.stop .split{align-items:center}
.stop-num{
  font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:14px;display:block;
}
.stop-num b{color:var(--coral);font-weight:800}
.stop h2{margin-bottom:14px}
/* One screen per row, full column width — a 1900px capture is unreadable in half a column. */
.stop-shots{display:grid;gap:30px;margin-top:44px}
.stop-shots figcaption{margin-top:12px;font-size:.88rem;color:var(--muted);font-weight:600}
@media (max-width:980px){
  .tour-head{padding:120px 0 60px}
  .stop{padding:64px 0}
  .stop-shots{margin-top:30px}
}

/* Copy split that sits above a full-width screenshot: text left, proof list right. */
.split-tight{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:5vw}
.split-tight .checks{margin-top:0}

/* A screenshot given the full column width, so the app is actually legible. */
.wide-shot{margin-top:44px}
.wide-shot figcaption{margin-top:14px;font-size:.88rem;color:var(--muted);font-weight:600}
@media (max-width:980px){
  .split-tight{grid-template-columns:1fr;gap:32px}
  .wide-shot{margin-top:32px}
}

/* Small captures (already tightly cropped by whoever took them) must not be
   upscaled to the full column — they get their own ceiling. */
.framed.narrow{max-width:560px;margin-left:auto;margin-right:auto}

/* ═════════════ TIME BACK (exam season) ═════════════ */
.saver{
  margin-top:44px;background:#fff;border:1px solid var(--hair);border-radius:16px;
  padding:30px 32px;box-shadow:var(--shadow-1);max-width:820px;
}
/* One aligned row per input: label, control, value. */
.saver-inputs{display:grid;gap:16px}
.saver-field{display:grid;grid-template-columns:290px 1fr 92px;align-items:center;gap:16px}
.saver-field label{font-size:.88rem;font-weight:700;color:var(--ink)}
.saver-row{display:contents}

.saver-row input[type=range]{flex:1;accent-color:var(--coral-btn);height:22px;cursor:pointer}
.saver-row output{text-align:right;font-size:.95rem;font-weight:800;color:var(--ink);
                  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Stepper control: [−] 70 [+] candidates. The row normally uses display:contents
   so its children become grid items of .saver-field; a stepper lays out its own
   parts instead, so it takes the control and value columns together. */
.saver-row.saver-step{display:flex;align-items:center;gap:14px;grid-column:2 / -1}
.stepb{width:40px;height:40px;flex:none;border-radius:10px;border:1px solid var(--hair);
       background:#fff;color:var(--ink);font:700 1.3rem/1 var(--sans);cursor:pointer;
       display:flex;align-items:center;justify-content:center}
.stepb:hover{border-color:var(--coral-btn);color:var(--coral-btn)}
.stepb:focus-visible,.stepnum:focus-visible{outline:2px solid var(--coral-btn);outline-offset:2px}
/* The count is the headline of the row, not a form field — no box, no chrome.
   Still a real number input, so it can be typed into and takes arrow keys. */
.stepnum{width:118px;text-align:center;font:800 1.9rem var(--sans);color:var(--ink);
         font-variant-numeric:tabular-nums;border:0;background:none;padding:0;
         -moz-appearance:textfield}
.stepnum::-webkit-outer-spin-button,
.stepnum::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepunit{font-size:.88rem;font-weight:600;color:var(--muted)}
/* The <output> stays for the calculator to write to, but the input shows the value. */
.saver-row.saver-step output{display:none}
/* The itemised breakdown. This had no rules at all until 2026-08-16 — the markup shipped
   referencing .saver-lines and nothing ever styled it, so it rendered as a default
   bulleted list with the figures butted against the labels. */
.saver-lines{margin-top:22px;list-style:none;padding:0}
.saver-lines li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
                padding:11px 0;border-bottom:1px solid var(--hair-2);
                font-size:1rem;color:var(--body)}
.saver-lines li:last-child{border-bottom:0}
.saver-lines li em{font-style:normal;color:var(--muted);font-size:.88rem}
.saver-lines b{color:var(--ink);font-weight:800;white-space:nowrap;
               font-variant-numeric:tabular-nums}
.saver-total{margin-top:4px;padding-top:14px;border-top:2px solid var(--hair);
             font-weight:700;color:var(--ink)}
.saver-total b{font-size:1.22rem}

/* The by-hand / DanceMate flip. The visitor performs the comparison themselves rather
   than being told the answer, and the switch is radio + :has() so it costs no JavaScript. */
.flip{margin-top:26px;padding-top:22px;border-top:1px solid var(--hair-2)}
.flip-switch{position:relative;isolation:isolate;display:inline-flex;padding:4px;gap:4px;
             border-radius:40px;background:var(--well);border:1px solid var(--hair-2)}
.flip-switch input{position:absolute;opacity:0;width:1px;height:1px}
/* Equal-width labels so the thumb below can travel a fixed distance. */
.flip-switch label{position:relative;z-index:1;min-width:152px;text-align:center;
                   padding:8px 18px;border-radius:40px;cursor:pointer;
                   font-size:.88rem;font-weight:700;color:var(--body);
                   transition:color .25s var(--ease)}
.flip-switch input:checked + label{color:var(--ink)}
.flip-switch input:focus-visible + label{outline:2px solid var(--coral-btn);outline-offset:2px}
/* The thumb slides rather than the highlight jumping between labels. It is a real span,
   not a ::before: Chrome does not re-resolve pseudo-element styles when a :has() state
   changes, so the transform on a ::before never moved. Verified 2026-08-16. */
.flip-thumb{position:absolute;top:4px;left:4px;z-index:0;
            width:152px;height:calc(100% - 8px);border-radius:40px;background:#fff;
            box-shadow:var(--shadow-1);transition:transform .32s var(--ease)}
.flip-switch:has(#flip-dm:checked) .flip-thumb{transform:translateX(156px)}
.flip-face{margin-top:22px}
/* Rows deal themselves in on each flip, so the comparison reads as performed rather
   than swapped. The faces are display:none/block, so this replays every time. */
.flip-face .saver-lines li{animation:rowdeal .34s var(--ease) both}
.flip-face .saver-lines li:nth-child(2){animation-delay:.05s}
.flip-face .saver-lines li:nth-child(3){animation-delay:.1s}
.flip-face .saver-lines li:nth-child(4){animation-delay:.15s}
.flip-face .flip-aside{animation:rowdeal .34s var(--ease) .2s both}
@keyframes rowdeal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* The green confirmations carry the same tick disc as the bullets further up. */
.flip-dm-face .done{display:inline-flex;align-items:center;gap:8px}
.flip-dm-face .done::before{content:"✓";width:20px;height:20px;border-radius:40px;
                            background:var(--green-l);color:var(--green);font-size:.78rem;
                            display:inline-flex;align-items:center;justify-content:center}
@media (prefers-reduced-motion:reduce){
  .flip-face .saver-lines li,
  .flip-face .flip-aside{animation:none}
  .flip-thumb{transition:none}
  .calc-overlay,.calc-overlay .calc-modal{transition:none}
}

/* ═════════════ TIME SAVING CALCULATOR — trigger + modal ═════════════ */
/* The calculator is long, so it lives behind this card rather than sitting between the
   exam copy and the tour link pushing both apart. The card borrows the furniture of the
   tick panel above it so it reads as part of the product, not an advert for it. */
.calc-block{margin-top:44px}
.calc-card{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
           padding:24px 26px;border:1px solid var(--navy);border-radius:16px;
           background:var(--navy);box-shadow:var(--shadow-2)}
.calc-card-ico{width:52px;height:52px;flex:none;border-radius:14px;
               background:rgba(255,255,255,.16);color:#fff;
               display:flex;align-items:center;justify-content:center}
.calc-card-t{font-size:1.18rem;font-weight:800;color:#fff;letter-spacing:-.018em}
.calc-card-p{margin-top:4px;font-size:1rem;color:rgba(255,255,255,.84)}
/* A solid white button on the navy; the ink border would be invisible against it. */
.calc-card .btn-ink{margin-left:auto;border-color:#fff}
.calc-card .btn-ink:hover{border-color:#fff;background:var(--well)}
.calc-card :focus-visible{outline-color:#fff}
@media (max-width:720px){
  .calc-card{padding:20px;gap:16px}
  .calc-card .btn-ink{margin-left:0;width:100%;text-align:center}
}

.calc-overlay{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
              justify-content:center;padding:22px;overflow-y:auto;
              background:rgba(4,16,36,.55);opacity:0;transition:opacity .2s var(--ease)}
/* Load-bearing. `display:flex` above beats the user agent's [hidden]{display:none}, so
   without this the closed overlay stays in the layout: a full-viewport, fixed, invisible
   sheet at opacity:0 that still takes every click on the page. */
.calc-overlay[hidden]{display:none}
/* It stays in the layout for the 220ms fade-out; it must not eat clicks meanwhile. */
.calc-overlay:not(.open){pointer-events:none}
.calc-overlay.open{opacity:1}
.calc-overlay .calc-modal{width:min(880px,100%);background:#fff;border-radius:18px;
                          box-shadow:var(--shadow-3);padding:26px 28px;margin:auto;
                          transform:translateY(10px);transition:transform .24s var(--ease)}
.calc-overlay.open .calc-modal{transform:none}
.calc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px}
.calc-head h3{font-size:1.18rem;font-weight:800;color:var(--ink);letter-spacing:-.018em}
.calc-head p{margin-top:9px;font-size:1rem;color:var(--muted);max-width:52ch}
.calc-x{flex:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--hair);
        background:#fff;color:var(--body);font-size:1.2rem;line-height:1;cursor:pointer;
        font-family:var(--sans)}
.calc-x:hover{border-color:var(--coral-btn);color:var(--coral-btn)}
.calc-x:focus-visible{outline:2px solid var(--coral-btn);outline-offset:2px}
/* Inside the modal the widget is already on a panel, so it drops its own card. */
.calc-overlay .saver{margin-top:22px;border:0;box-shadow:none;padding:0;max-width:none}
@media (max-width:720px){
  .calc-overlay{padding:12px}
  .calc-overlay .calc-modal{padding:20px}
}
.flip-dm-face{display:none}
.flip:has(#flip-dm:checked) .flip-hand-face{display:none}
.flip:has(#flip-dm:checked) .flip-dm-face{display:block}
.flip .done{color:var(--green);font-weight:800}

/* The aside carries the reshuffle problem. It used to be a tickbox the visitor had to
   opt into, which meant most never saw the point at all; stated on both faces it lands
   without being asked for, and the flip does the arguing. */
/* No max-width: the aside fills its face. The cap is lifted on the shared rule rather
   than one face, so the by-hand and DanceMate sides stay the same width when you flip. */
.flip-aside{margin-top:22px;padding:16px 18px;border-radius:12px;background:var(--well);
            font-size:1rem;color:var(--body)}
.flip-aside b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.flip-aside-dm{background:var(--green-l)}
.flip-aside-dm b{color:var(--green)}

.saver-note{margin-top:22px;font-size:.88rem;color:var(--muted)}
@media (max-width:720px){
  .saver{padding:24px 20px}
  .saver-field{grid-template-columns:1fr;gap:8px}
  .saver-row{display:flex;align-items:center;gap:14px}
  .saver-row output{min-width:64px}
  .flip-switch{width:100%}
  .flip-switch label{flex:1;text-align:center;padding:8px 12px}
  .flip-aside{padding:14px 16px}
}

/* ═════════════ THE WHOLE SCHOOL — screens that change as you scroll ═════════════ */
/* Base state is the honest one: every screen shown in sequence with its own caption.
   That is what a phone, a reduced-motion visitor and a no-JS visitor get, and it is
   the same content — not a summary of it. .sc-live pins it and swaps one at a time. */
.screens-room{padding:96px 0}
.sc-copy h2{margin-bottom:26px}
.sc-rail{list-style:none;display:grid;gap:2px;margin:0 0 22px}
.sc-step{
  display:grid;grid-template-columns:auto 1fr;gap:4px 14px;width:100%;text-align:left;
  background:none;border:none;font-family:var(--sans);cursor:pointer;color:inherit;
  padding:14px 16px;border-radius:12px;
}
.sc-num{grid-row:span 2;font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--muted);
        font-variant-numeric:tabular-nums;padding-top:4px}
.sc-name{font-size:1.18rem;font-weight:800;letter-spacing:-.018em;color:var(--ink);line-height:1.25}
.sc-line{font-size:.88rem;line-height:1.5;color:var(--body)}
.sc-note{font-size:.88rem;color:var(--muted);max-width:44ch}

.sc-screens{display:grid;gap:30px;margin-top:36px}
.sc-shot figcaption{margin-top:12px;font-size:.88rem;color:var(--muted);font-weight:600}
.sc-shot figcaption .textlink{margin-left:6px;font-size:.88rem}

/* ── live: pinned, one screen at a time ── */
.screens-room.sc-live{padding:0}
.screens-room.sc-live .sc-track{height:calc(100vh + 290vh)}
.screens-room.sc-live .sc-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:clip}
/* width:100% is load-bearing: .sc-stage is a flex container, so without it this
   shrink-wraps and the screen column collapses to 0px. */
.screens-room.sc-live .sc-inner{width:100%;display:grid;grid-template-columns:minmax(280px,24rem) 1fr;gap:4vw;align-items:center}
.screens-room.sc-live .sc-rail{margin-bottom:18px}
/* the rail doubles as the progress indicator */
.screens-room.sc-live .sc-step{opacity:.45;transition:opacity .3s var(--ease),background .3s var(--ease)}
.screens-room.sc-live .sc-step .sc-line{display:none}
.screens-room.sc-live .sc-step.is-on{opacity:1;background:#fff;box-shadow:var(--shadow-1)}
.screens-room.sc-live .sc-step.is-on .sc-line{display:block}
.screens-room.sc-live .sc-step.is-on .sc-num{color:var(--coral-btn)}

.screens-room.sc-live .sc-screens{position:relative;display:block;margin:0;min-height:520px}
.screens-room.sc-live .sc-shot{
  position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none;
}
.screens-room.sc-live .sc-shot.is-on{opacity:1;transform:none;pointer-events:auto}

@media (prefers-reduced-motion: reduce){
  .screens-room.sc-live .sc-shot{transition:none}
}
@media (max-width:980px){
  .screens-room{padding:68px 0}
  .sc-step{padding:12px 0}
}

/* The AR2 sheet, now opening the exam-season section rather than the hero. */
.exam-sheet{position:relative;max-width:620px;margin:44px 0 0}
.exam-sheet .sheet{box-shadow:var(--shadow-2)}
.exam-sheet .sheet-chip{left:auto;right:-24px;bottom:26px}
.exam-sheet figcaption{margin-top:16px;font-size:.88rem;color:var(--muted);font-weight:600}
@media (max-width:720px){
  .exam-sheet .sheet-chip{right:8px;bottom:14px}
}

/* Exam season runs as a pair: copy and ticks left, the AR2 sheet right.
   Distinct from .split-tight (still used by the tour) because here the sheet
   IS the right-hand column rather than sitting full-width underneath. */
.split-exam{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:5vw}
.split-exam .exam-sheet{max-width:none;margin:6px 0 0}
/* The chip hangs off the sheet's right edge by default; inside a column that
   would push past the container, so it tucks in. */
.split-exam .exam-sheet .sheet-chip{left:auto;right:14px;bottom:22px}

/* The ticks read as one block under the paragraph rather than loose text. */
.exam-panel{
  margin-top:26px;padding:24px 26px;background:var(--well);
  border:1px solid var(--hair-2);border-radius:16px;
}
.exam-panel .checks{margin-top:0}

@media (max-width:980px){
  .split-exam{grid-template-columns:1fr;gap:32px}
  .split-exam .exam-sheet{margin-top:0}
  .exam-panel{padding:20px 20px}
}

/* The pinned stage is exactly 100vh and centres its content, so a copy column taller
   than the viewport is clipped at BOTH ends — the last line of the note and the top of
   the heading, silently. At its natural size that column wants ~780px, which is taller
   than a great many laptops. Rather than stand pinning down on all of them, it tightens:
   the rail carries the same eight stops in less room. shouldGoLive() measures what is
   left and only pins when it genuinely fits. */
@media (max-height: 860px){
  .screens-room.sc-live .sc-step{padding:9px 16px}
  .screens-room.sc-live .sc-copy h2{margin-bottom:16px}
  .screens-room.sc-live .sc-rail{margin-bottom:12px}
}
@media (max-height: 760px){
  .screens-room.sc-live .sc-step{padding:6px 14px}
  .screens-room.sc-live .sc-name{font-size:1.09rem}
  /* the headline ramp's own floor, rather than a size invented for this breakpoint */
  .screens-room.sc-live .sc-copy h2{font-size:1.9rem;margin-bottom:12px}
  .screens-room.sc-live .sc-note{font-size:.78rem}
}