:root{
    --purple-900:#211732;
    --purple-700:#382368;
    --purple-600:#4F35A3;
    --purple-500:#6A4CC4;
    --coral-500:#F4826F;
    --coral-600:#DD6650;
    --error:#B3372B;
    --bg:#FFFFFF;
    --surface:#FFFFFF;
    --tint-pink:#FBF8F7;
    --tint-purple:#F8F7FB;
    --ink:#241B3A;
    --neutral-600:#6E6480;
    --neutral-400:#9A90AE;
    --line:#E3DCF2;
    --focus:#6A4CC4;
    --shadow: 0 18px 40px -22px rgba(38,20,74,0.35);
    --font-display:"Century Gothic","Avenir Next","Poppins","Segoe UI",ui-sans-serif,system-ui,sans-serif;
    --font-body:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
    --notch:22px;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --purple-900:#F3EEFF;
      --purple-700:#D9CBFF;
      --purple-600:#B6A0F2;
      --purple-500:#8C79E0;
      --coral-500:#FF9A85;
      --coral-600:#FFB09E;
      --error:#FF9A85;
      --bg:#150E22;
      --surface:#1E1530;
      --tint-pink:#2A1B2A;
      --tint-purple:#211A3A;
      --ink:#F3EEFF;
      --neutral-600:#BEB2D9;
      --neutral-400:#8E80AC;
      --line:#382A55;
      --shadow: 0 18px 40px -22px rgba(0,0,0,0.6);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --purple-900:#F3EEFF; --purple-700:#D9CBFF; --purple-600:#B6A0F2; --purple-500:#8C79E0;
    --coral-500:#FF9A85; --coral-600:#FFB09E; --error:#FF9A85; --bg:#150E22; --surface:#1E1530;
    --tint-pink:#2A1B2A; --tint-purple:#211A3A; --ink:#F3EEFF; --neutral-600:#BEB2D9;
    --neutral-400:#8E80AC; --line:#382A55; --shadow: 0 18px 40px -22px rgba(0,0,0,0.6);
    color-scheme: dark;
  }
  :root[data-theme="light"]{
    --purple-900:#211732; --purple-700:#382368; --purple-600:#4F35A3; --purple-500:#6A4CC4;
    --coral-500:#F4826F; --coral-600:#DD6650; --error:#B3372B; --bg:#FFFFFF; --surface:#FFFFFF;
    --tint-pink:#FBF8F7; --tint-purple:#F8F7FB; --ink:#241B3A; --neutral-600:#6E6480;
    --neutral-400:#9A90AE; --line:#E3DCF2; --shadow: 0 18px 40px -22px rgba(38,20,74,0.35);
    color-scheme: light;
  }

  *{box-sizing:border-box;}
  body{background:var(--bg);}
  .luma-page{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:1.05rem;
    line-height:1.65;
    overflow-x:hidden;
  }
  .luma-page h1, .luma-page h2, .luma-page h3, .luma-page h4{
    font-family:var(--font-display);
    color:var(--purple-900);
    font-weight:700;
    line-height:1.1;
    text-wrap:balance;
    letter-spacing:-0.01em;
  }
  .luma-page p{ text-wrap:pretty; }
  .luma-page a{ color:inherit; }
  .luma-page img, .luma-page svg{ display:block; max-width:100%; }
  .luma-page :focus-visible{
    outline:3px solid var(--focus);
    outline-offset:3px;
    border-radius:4px;
  }
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding-inline:clamp(1.25rem, 4vw, 2.5rem);
  }
  .eyebrow{
    font-family:var(--font-display);
    font-size:0.76rem;
    font-weight:700;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--coral-600);
  }
  section{ padding-block:clamp(3.5rem, 7vw, 6.5rem); }
  .tint-purple{ background:var(--tint-purple); }
  .tint-pink{ background:var(--tint-pink); }

  /* ---------- reveal-on-scroll ---------- */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in-view{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    .luma-page *{ scroll-behavior:auto !important; }
  }

  /* ---------- logo lockup ---------- */
  .logo-lockup{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
  .logo-badge{
    width:42px; height:42px; flex:none; border-radius:12px;
    background:#fff; padding:3px; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px -6px rgba(20,10,40,0.4); overflow:hidden;
  }
  .logo-badge img{ width:100%; height:100%; object-fit:contain; border-radius:8px; display:block; }

  /* ---------- header ---------- */
  .site-header{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .header-row{
    display:flex; align-items:center; justify-content:space-between;
    padding-block:0.85rem;
  }
  .main-nav{ display:flex; align-items:center; gap:2rem; }
  .main-nav a{
    font-family:var(--font-display);
    font-size:.92rem; font-weight:600;
    text-decoration:none; color:var(--purple-900);
    position:relative;
  }
  .main-nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background:var(--coral-500); transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  .main-nav a:hover::after{ transform:scaleX(1); }
  .header-actions{ display:flex; align-items:center; gap:1rem; }
  .nav-toggle{
    display:none; background:none; border:none; cursor:pointer; padding:.4rem;
  }
  .nav-toggle span{ display:block; width:22px; height:2px; background:var(--purple-900); margin:4px 0; }
  .mobile-panel{ display:none; }

  /* ---------- buttons ---------- */
  .btn{
    font-family:var(--font-display);
    font-weight:700; font-size:.92rem; letter-spacing:0.01em;
    display:inline-flex; align-items:center; gap:.5rem;
    padding:0.8rem 1.5rem;
    text-decoration:none;
    border:2px solid transparent;
    cursor:pointer;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-primary{ background:var(--coral-500); color:var(--purple-900); }
  .btn-primary:hover{ box-shadow:0 12px 24px -12px color-mix(in srgb, var(--coral-500) 70%, transparent); }
  .btn-outline{ background:transparent; border-color:var(--purple-600); color:var(--purple-700); }
  .btn-outline:hover{ background:var(--tint-purple); }
  .btn-sm{ padding:0.55rem 1.1rem; font-size:.82rem; }

  /* ---------- hero ---------- */
  .hero{ padding-block:clamp(3rem, 8vw, 5.5rem) clamp(2rem, 6vw, 4rem); }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem, 5vw, 4rem);
    align-items:center;
  }
  .hero h1{ font-size:clamp(2.5rem, 1.7rem + 3.4vw, 4.1rem); margin:.6rem 0 1.1rem; }
  .hero h1 em{ font-style:normal; color:var(--coral-600); }
  .hero-lede{ font-size:1.15rem; color:var(--neutral-600); max-width:46ch; margin-bottom:1.8rem; }
  .hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2rem; }
  .value-chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
  .value-chip{
    font-family:var(--font-display); font-size:.78rem; font-weight:700;
    color:var(--purple-700); background:var(--surface); border:1px solid var(--line);
    padding:.45rem .8rem; border-radius:999px; display:inline-flex; align-items:center; gap:.4rem;
  }
  .value-chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--coral-500); }

  .hero-visual{ position:relative; }
  .hero-visual .floaty{
    position:absolute; font-family:var(--font-display); font-weight:700; font-size:.8rem;
    background:var(--purple-600); color:#fff; padding:.5rem .9rem; border-radius:999px;
    box-shadow:var(--shadow); z-index:2;
  }
  .fl-1{ top:-14px; left:6%; background:var(--coral-500); color:var(--purple-900); }
  .fl-2{ bottom:8%; right:-10px; }
  .fl-3{ top:42%; left:-16px; background:var(--surface); color:var(--purple-700); border:1px solid var(--line); box-shadow:var(--shadow); }

  /* ---------- placeholder frames ---------- */
  .placeholder{
    border:2px dashed var(--neutral-400);
    border-radius:16px;
    background:color-mix(in srgb, var(--surface) 60%, transparent);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:.6rem; padding:1.6rem;
    color:var(--neutral-600);
  }
  .placeholder .ph-icon{ opacity:.55; }
  .placeholder .ph-label{
    font-family:var(--font-display); font-weight:700; font-size:.72rem;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--coral-600);
  }
  .placeholder .ph-desc{ font-size:.86rem; max-width:32ch; }
  .hero-visual .placeholder{ aspect-ratio:4/3.1; width:100%; }
  .hero-photo{
    aspect-ratio:4/3.1; width:100%; border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* ---------- notched cards ---------- */
  .card{
    background:var(--surface);
    padding:2rem 1.9rem;
    box-shadow:var(--shadow);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  }

  /* ---------- section heading ---------- */
  .section-head{ max-width:640px; margin-bottom:clamp(2rem,4vw,3rem); }
  .section-head h2{ font-size:clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem); margin:.5rem 0 .75rem; }
  .section-head p{ color:var(--neutral-600); font-size:1.05rem; }
  .section-head.center{ margin-inline:auto; text-align:center; }

  /* ---------- features ---------- */
  .feature-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; }
  .feature-icon{
    width:52px; height:52px; border-radius:50%; background:var(--tint-pink);
    display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem;
    color:var(--coral-600);
  }
  .feature-card h3{ font-size:1.2rem; margin-bottom:.5rem; }
  .feature-card p{ color:var(--neutral-600); font-size:.98rem; }

  /* ---------- subjects ---------- */
  .subject-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem; }
  .subject-card{
    background:var(--surface); padding:1.5rem; display:flex; gap:1rem; align-items:flex-start;
    box-shadow:var(--shadow);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  }
  .subject-glyph{
    flex:none; width:48px; height:48px; border-radius:12px;
    background:var(--purple-600); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:800; font-size:.95rem;
  }
  .subject-card h3{ font-size:1.05rem; margin-bottom:.25rem; }
  .subject-card p{ font-size:.88rem; color:var(--neutral-600); }
  .subject-levels{ font-size:.72rem; color:var(--coral-600); font-family:var(--font-display); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-top:.4rem; }

  /* ---------- how it works ---------- */
  .steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.6rem; counter-reset:step; }
  .step{ position:relative; padding-top:.5rem; }
  .step-num{
    font-family:var(--font-display); font-weight:800; font-size:3rem;
    color:var(--tint-purple); -webkit-text-stroke:1px var(--purple-500);
    line-height:1; margin-bottom:.6rem; display:block;
    animation:step-num-glow 6.4s ease-in-out infinite;
  }
  .step:nth-child(1) .step-num{ animation-delay:0s; }
  .step:nth-child(2) .step-num{ animation-delay:1.6s; }
  .step:nth-child(3) .step-num{ animation-delay:3.2s; }
  .step:nth-child(4) .step-num{ animation-delay:4.8s; }
  @keyframes step-num-glow{
    0%, 6%, 30%, 100%{
      color:var(--tint-purple); -webkit-text-stroke:1px var(--purple-500);
      text-shadow:none; transform:scale(1);
    }
    16%{
      color:var(--coral-500); -webkit-text-stroke:1px var(--coral-500);
      text-shadow:0 0 16px color-mix(in srgb, var(--coral-500) 70%, transparent), 0 0 42px color-mix(in srgb, var(--purple-500) 60%, transparent);
      transform:scale(1.1);
    }
  }
  .step h3{
    font-size:1.08rem; margin-bottom:.4rem;
    animation:step-title-glow 6.4s ease-in-out infinite;
  }
  .step:nth-child(1) h3{ animation-delay:0s; }
  .step:nth-child(2) h3{ animation-delay:1.6s; }
  .step:nth-child(3) h3{ animation-delay:3.2s; }
  .step:nth-child(4) h3{ animation-delay:4.8s; }
  @keyframes step-title-glow{
    0%, 6%, 30%, 100%{ color:var(--purple-900); text-shadow:none; }
    16%{ color:var(--coral-600); text-shadow:0 0 14px color-mix(in srgb, var(--coral-500) 55%, transparent); }
  }
  @media (prefers-reduced-motion: reduce){
    .step-num, .step h3{ animation:none; }
  }
  .step p{ font-size:.92rem; color:var(--neutral-600); }
  .step-connector{
    position:absolute; top:1.9rem; left:-.8rem; width:.8rem; height:2px; background:var(--line);
  }
  .step:first-child .step-connector{ display:none; }

  /* ---------- tutors carousel ---------- */
  .tutor-carousel{
    overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-block:1.4rem 2.2rem;
    mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    -webkit-mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  }
  .tutor-carousel::-webkit-scrollbar{ display:none; }
  .tutor-track{ display:flex; gap:2rem; width:max-content; }
  /* When every tutor card fits without scrolling, drop the fade mask and centre the row */
  .tutor-carousel.is-static{
    overflow-x:visible; mask-image:none; -webkit-mask-image:none;
    display:flex; justify-content:center;
  }
  .tutor-carousel.is-static .tutor-track{ flex-wrap:wrap; justify-content:center; width:auto; }
  .tutor-card{
    flex:0 0 300px; background:var(--surface); padding:2rem; text-align:center; box-shadow:var(--shadow);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
    transition:transform .45s ease, box-shadow .45s ease;
  }
  .tutor-card.is-center{
    transform:scale(1.09);
    box-shadow:0 0 0 1.5px var(--purple-500), 0 25px 55px -18px color-mix(in srgb, var(--purple-500) 70%, transparent), 0 0 50px 6px color-mix(in srgb, var(--coral-500) 45%, transparent);
  }
  .tutor-avatar{ width:120px; height:120px; border-radius:50%; margin:0 auto 1.2rem; overflow:hidden; flex:none; box-shadow:0 8px 20px -10px rgba(20,10,40,0.45); }
  .tutor-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .tutor-avatar.placeholder{ padding:.5rem; }
  .tutor-card h3{ font-size:1.25rem; margin-bottom:.15rem; }
  .tutor-role{ font-family:var(--font-display); font-size:.78rem; font-weight:700; color:var(--coral-600); text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem; }
  .tutor-bio{ text-align:left; font-size:.85rem; line-height:1.6; color:var(--neutral-600); }
  .tutor-bio p{ margin:0; }
  .tutor-bio.placeholder{ padding:1rem 1.1rem; font-size:.82rem; }
  .tutor-bio.placeholder .ph-desc{ max-width:none; text-align:left; }

  /* ---------- testimonials ---------- */
  .testimonial-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; align-items:stretch; max-width:760px; margin-inline:auto; }
  .testimonial-card.placeholder{ aspect-ratio:3/4; padding:1.2rem; }
  .stars-placeholder{ display:flex; gap:3px; opacity:.5; }

  .testimonial-quote{
    background:var(--surface);
    padding:1.9rem 1.7rem 1.6rem;
    box-shadow:var(--shadow);
    display:flex; flex-direction:column; gap:1rem;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  }
  .testimonial-quote .stars{ color:var(--coral-500); font-size:.85rem; letter-spacing:2px; }
  .testimonial-quote blockquote{
    margin:0; font-style:italic; font-size:.96rem; line-height:1.6; color:var(--ink);
    flex:1;
  }
  .testimonial-quote blockquote::before{ content:"\201C"; }
  .testimonial-quote blockquote::after{ content:"\201D"; }
  .testimonial-quote figcaption{
    font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--purple-700);
    display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line); padding-top:.8rem;
  }
  .testimonial-quote figcaption .role{ font-family:var(--font-body); font-weight:400; font-style:normal; font-size:.8rem; color:var(--neutral-600); }

  /* ---------- FAQ ---------- */
  .faq-list{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:0; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item:first-child{ border-top:1px solid var(--line); }
  .faq-q{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
    padding:1.35rem 0.25rem; font-family:var(--font-display); font-weight:700; font-size:1.02rem;
    color:var(--purple-900);
  }
  .faq-q .chev{ flex:none; transition:transform .25s ease; color:var(--coral-500); }
  .faq-item[data-open="true"] .faq-q .chev{ transform:rotate(180deg); }
  .faq-a{
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .faq-a-inner{ padding:0 .25rem 1.4rem; color:var(--neutral-600); font-size:.98rem; max-width:62ch; }

  /* ---------- CTA banner ---------- */
  .cta-banner{
    background:var(--purple-700);
    padding-block:clamp(3rem, 6vw, 4.5rem);
    text-align:center;
    clip-path: polygon(0 28px, 4% 0, 96% 0, 100% 28px, 100% calc(100% - 28px), 96% 100%, 4% 100%, 0 calc(100% - 28px));
  }
  :root[data-theme="dark"] .cta-banner{ background:#2A1D4A; }
  @media (prefers-color-scheme:dark){ .cta-banner{ background:#2A1D4A; } }
  .cta-banner h2{ color:#fff; font-size:clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); margin-bottom:.7rem; }
  .cta-banner p{ color:#D9CBFF; margin-bottom:1.8rem; }
  .cta-banner .btn-outline{ border-color:#fff; color:#fff; }
  .cta-banner .btn-outline:hover{ background:rgba(255,255,255,0.1); }

  /* ---------- footer ---------- */
  .site-footer{ background:var(--purple-900); color:#D9CBFF; padding-block:3.5rem 2rem; }
  :root[data-theme="dark"] .site-footer{ background:#0E081A; }
  @media (prefers-color-scheme:dark){ .site-footer{ background:#0E081A; } }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
  .footer-blurb{ font-size:.92rem; color:#B8A9E6; margin-top:1rem; max-width:30ch; }
  .footer-col h4{ font-family:var(--font-display); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#8C79E0; margin-bottom:1rem; }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
  .footer-col a{ text-decoration:none; color:#D9CBFF; font-size:.92rem; }
  .footer-col a:hover{ color:#fff; }
  .footer-note{ font-size:.8rem; color:#8C79E0; border:1px dashed #4A3A78; border-radius:8px; padding:.6rem .8rem; }
  .footer-bottom{ border-top:1px solid #382368; padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.82rem; color:#8C79E0; }
  .social-row{ display:flex; gap:.7rem; }
  .social-dot{ width:34px; height:34px; border-radius:50%; border:1px dashed #4A3A78; display:flex; align-items:center; justify-content:center; font-size:.7rem; }

  /* ---------- responsive ---------- */
  @media (max-width:960px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; max-width:480px; margin-inline:auto; width:100%; }
    .feature-grid, .subject-grid{ grid-template-columns:1fr 1fr; }
    .steps{ grid-template-columns:1fr 1fr; row-gap:2.2rem; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:720px){
    .main-nav, .header-actions .btn{ display:none; }
    .nav-toggle{ display:block; }
    .mobile-panel.open{ display:flex; }
    .mobile-panel{
      flex-direction:column; gap:.25rem; padding:.5rem clamp(1.25rem,4vw,2.5rem) 1.25rem;
      border-bottom:1px solid var(--line); background:var(--bg);
    }
    .mobile-panel a{ padding:.7rem 0; font-family:var(--font-display); font-weight:600; text-decoration:none; color:var(--purple-900); border-bottom:1px solid var(--line); }
    .mobile-panel .btn{ margin-top:.75rem; align-self:flex-start; }
    .feature-grid, .subject-grid, .testimonial-grid{ grid-template-columns:1fr; }
    .testimonial-grid{ gap:1.4rem; max-width:420px; }
    .tutor-card{ flex-basis:220px; }
    .steps{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; gap:2rem; }
  }
  /* Phone: swipe one tutor at a time, snapped to the centre, with the next card peeking in */
  .tutor-dots{ display:none; }
  @media (max-width:600px){
    .tutor-carousel:not(.is-static){
      margin-inline:calc(50% - 50vw);
      scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
      mask-image:none; -webkit-mask-image:none;
      padding-block:1rem 1.2rem;
    }
    .tutor-carousel:not(.is-static) .tutor-track{ gap:.9rem; padding-inline:10vw; }
    .tutor-carousel:not(.is-static) .tutor-card{ flex:0 0 80vw; scroll-snap-align:center; scroll-snap-stop:always; }
    .tutor-dots.is-on{ display:flex; justify-content:center; gap:.5rem; margin-top:.4rem; }
    .tutor-dots button{
      width:8px; height:8px; padding:0; border:0; border-radius:50%;
      background:color-mix(in srgb, var(--purple-500) 25%, transparent); cursor:pointer;
      transition:width .25s ease, background .25s ease;
    }
    .tutor-dots button.is-active{ width:22px; border-radius:4px; background:var(--purple-500); }
  }
  @media (max-width:600px){
    /* Flatten the collage tilt on narrow screens so screenshots stay fully legible */
    .testimonial-grid .testimonial-shot:nth-child(1),
    .testimonial-grid .testimonial-shot:nth-child(2),
    .testimonial-grid .testimonial-shot:nth-child(3),
    .testimonial-grid .testimonial-shot:nth-child(4){ transform:none; }
    .testimonial-grid .testimonial-shot:hover{ transform:scale(1.02); }
  }
</style>

/* ================= shared: testimonial screenshots ================= */
.testimonial-shot{
  background:var(--surface);
  padding:.6rem .6rem 1rem;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:.7rem;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  position:relative; transition:transform .3s ease, box-shadow .3s ease, z-index .3s ease;
}
.testimonial-shot img{
  width:100%; border-radius:10px; display:block;
}
.testimonial-shot figcaption{
  font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--purple-700);
  padding:0 .5rem; display:flex; flex-direction:column; gap:2px;
}
.testimonial-shot figcaption .role{ font-family:var(--font-body); font-weight:400; font-style:normal; font-size:.8rem; color:var(--neutral-600); }

/* Cluster the four shots together like a loose stack rather than a spread-out row */
.testimonial-grid .testimonial-shot:nth-child(1){ transform:rotate(-1.8deg) translate(6px, 4px); }
.testimonial-grid .testimonial-shot:nth-child(2){ transform:rotate(1.5deg) translate(-6px, 8px); }
.testimonial-grid .testimonial-shot:nth-child(3){ transform:rotate(1.2deg) translate(6px, -6px); }
.testimonial-grid .testimonial-shot:nth-child(4){ transform:rotate(-1.4deg) translate(-4px, -4px); }
.testimonial-grid .testimonial-shot:hover{
  transform:rotate(0deg) translate(0,0) scale(1.05);
  box-shadow:0 30px 60px -20px color-mix(in srgb, var(--purple-500) 55%, transparent);
  z-index:5;
}
@media (prefers-reduced-motion: reduce){
  .testimonial-grid .testimonial-shot{ transform:none; }
}

/* ================= shared: auth actions in header ================= */
.header-actions .btn-text{
  font-family:var(--font-display); font-weight:600; font-size:.88rem;
  text-decoration:none; color:var(--purple-900); padding:.6rem .3rem;
}
.header-actions .btn-text:hover{ color:var(--coral-600); }

/* ================= auth pages (login / signup) ================= */
.auth-shell{ min-height:calc(100vh - 76px); display:grid; grid-template-columns:1fr 1fr; }
.auth-side{
  background:var(--purple-700); color:#fff; padding:clamp(2.5rem,6vw,5rem);
  display:flex; flex-direction:column; justify-content:center; gap:1.4rem; position:relative; overflow:hidden;
}
:root[data-theme="dark"] .auth-side{ background:#2A1D4A; }
@media (prefers-color-scheme:dark){ .auth-side{ background:#2A1D4A; } }
.auth-side h2{ color:#fff; font-size:clamp(1.7rem,1.3rem + 1.6vw,2.3rem); }
.auth-side p{ color:#D9CBFF; max-width:38ch; }
.auth-side ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.auth-side li{ display:flex; align-items:flex-start; gap:.7rem; color:#EDE6FF; font-size:.95rem; }
.auth-side li .tick{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--coral-500); color:var(--purple-900); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; margin-top:1px; }
.auth-main{ display:flex; align-items:center; justify-content:center; padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,4vw,2.5rem); }
.auth-card{ width:100%; max-width:420px; }
.auth-card .eyebrow{ display:block; margin-bottom:.5rem; }
.auth-card h1{ font-size:clamp(1.7rem,1.4rem + 1vw,2.1rem); margin-bottom:.4rem; }
.auth-card .auth-sub{ color:var(--neutral-600); margin-bottom:1.8rem; font-size:.98rem; }
.role-tabs{ display:flex; gap:.5rem; margin-bottom:1.6rem; background:var(--tint-purple); padding:.3rem; border-radius:12px; }
.role-tab{
  flex:1; text-align:center; font-family:var(--font-display); font-weight:700; font-size:.82rem;
  padding:.6rem .5rem; border-radius:9px; border:none; background:none; cursor:pointer; color:var(--neutral-600);
}
.role-tab[aria-selected="true"]{ background:var(--surface); color:var(--purple-700); box-shadow:var(--shadow); }
.form-field{ margin-bottom:1.15rem; display:flex; flex-direction:column; gap:.4rem; }
.form-field label{ font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--purple-900); }
.form-field .hint{ font-family:var(--font-body); font-weight:400; color:var(--neutral-600); font-size:.8rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.form-field input, .form-field select, .form-field textarea{
  font-family:var(--font-body); font-size:.98rem; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line); border-radius:10px;
  padding:.7rem .85rem; width:100%;
}
.form-field textarea{ resize:vertical; min-height:110px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:3px solid var(--focus); outline-offset:1px; border-color:var(--purple-500);
}
.form-check{ display:flex; align-items:flex-start; gap:.6rem; font-size:.86rem; color:var(--neutral-600); margin-bottom:1.4rem; }
.form-check input{ margin-top:.2rem; }
.hp-field{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }
.form-error{ color:var(--error); font-size:.88rem; font-weight:600; margin:0 0 1rem; }
.btn-block{ width:100%; justify-content:center; }
.auth-foot{ margin-top:1.6rem; font-size:.92rem; color:var(--neutral-600); text-align:center; }
.auth-foot a{ color:var(--purple-700); font-weight:700; text-decoration:none; }
.auth-foot a:hover{ text-decoration:underline; }
.form-note{
  font-size:.82rem; color:var(--neutral-600); background:var(--tint-purple);
  border:1px dashed var(--line); border-radius:10px; padding:.7rem .9rem; margin-bottom:1.4rem;
}

/* ================= role picker (signup) ================= */
.role-grid{ display:flex; flex-direction:column; gap:.9rem; }
.role-card{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.2rem 1.3rem; text-decoration:none; background:var(--surface);
  border:1.5px solid var(--line); border-radius:14px; transition:border-color .18s ease, transform .18s ease;
}
.role-card:hover{ border-color:var(--purple-500); transform:translateY(-2px); }
.role-card .role-title{ font-family:var(--font-display); font-weight:800; color:var(--purple-900); font-size:1.02rem; display:block; }
.role-card .role-desc{ font-size:.85rem; color:var(--neutral-600); }
.role-card .role-arrow{ flex:none; color:var(--coral-500); font-size:1.3rem; }

/* ================= dashboard shell ================= */
.dash-body{ background:var(--tint-purple); min-height:100vh; }
.dash-shell{ display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.dash-sidebar{
  background:var(--purple-900); color:#D9CBFF; padding:1.6rem 1.2rem; display:flex; flex-direction:column; gap:2rem;
}
:root[data-theme="dark"] .dash-sidebar{ background:#0E081A; }
@media (prefers-color-scheme:dark){ .dash-sidebar{ background:#0E081A; } }
.dash-nav{ display:flex; flex-direction:column; gap:.3rem; }
.dash-nav a{
  display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; border-radius:10px;
  text-decoration:none; color:#D9CBFF; font-family:var(--font-display); font-weight:600; font-size:.9rem;
}
.dash-nav a.active{ background:rgba(255,255,255,0.08); color:#fff; }
.dash-nav a:hover{ background:rgba(255,255,255,0.06); }
.dash-user{ display:flex; align-items:center; gap:.7rem; border-top:1px solid #382368; padding-top:1.2rem; margin-top:auto; }
.avatar-circle{
  width:38px; height:38px; border-radius:50%; background:var(--coral-500); color:var(--purple-900);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; flex:none;
}
.dash-user-name{ font-family:var(--font-display); font-weight:700; font-size:.85rem; color:#fff; }
.dash-user-role{ font-size:.76rem; color:#8C79E0; }
.dash-main{ padding:clamp(1.5rem,3vw,2.5rem); }
.dash-topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.dash-topbar h1{ font-size:clamp(1.5rem,1.3rem + 1vw,1.9rem); }
.dash-topbar .eyebrow{ display:block; margin-bottom:.3rem; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:2rem; }
.stat-card{ background:var(--surface); border-radius:14px; padding:1.3rem 1.4rem; box-shadow:var(--shadow); }
.stat-card .stat-label{ font-family:var(--font-display); font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--neutral-600); }
.stat-card .stat-value{ font-family:var(--font-display); font-size:1.9rem; font-weight:800; color:var(--purple-900); margin:.3rem 0; }
.stat-card .stat-delta{ font-size:.78rem; color:var(--coral-600); font-weight:700; }
.dash-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:1.4rem; }
.dash-card{ background:var(--surface); border-radius:16px; padding:1.5rem 1.6rem; box-shadow:var(--shadow); margin-bottom:1.4rem; }
.dash-card h2{ font-size:1.15rem; margin-bottom:1rem; }
.dash-card .card-foot-link{ font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--purple-700); text-decoration:none; display:inline-block; margin-top:.8rem; }
.progress-row{ display:flex; align-items:center; gap:.9rem; margin-bottom:1rem; }
.progress-row:last-child{ margin-bottom:0; }
.progress-label{ flex:none; width:110px; font-size:.86rem; font-weight:600; color:var(--ink); }
.progress-track{ flex:1; height:9px; border-radius:99px; background:var(--tint-purple); overflow:hidden; }
.progress-fill{ height:100%; border-radius:99px; background:var(--purple-500); }
.progress-pct{ flex:none; width:38px; text-align:right; font-size:.8rem; color:var(--neutral-600); font-weight:700; }
.lesson-item{ display:flex; gap:1rem; align-items:flex-start; padding:.85rem 0; border-bottom:1px solid var(--line); }
.lesson-item:last-child{ border-bottom:none; padding-bottom:0; }
.lesson-date{
  flex:none; width:52px; text-align:center; background:var(--tint-pink); border-radius:10px; padding:.5rem .3rem;
  font-family:var(--font-display); color:var(--coral-600); font-weight:800; line-height:1.15;
}
.lesson-date .day{ display:block; font-size:1.05rem; }
.lesson-date .mon{ display:block; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; }
.lesson-info h4{ font-family:var(--font-display); font-size:.94rem; margin-bottom:.2rem; color:var(--purple-900); }
.lesson-info p{ font-size:.82rem; color:var(--neutral-600); }
.pill{ font-family:var(--font-display); font-size:.7rem; font-weight:700; padding:.25rem .6rem; border-radius:99px; display:inline-block; }
.pill-purple{ background:var(--tint-purple); color:var(--purple-700); }
.pill-coral{ background:var(--tint-pink); color:var(--coral-600); }
.roster-item{ display:flex; align-items:center; gap:.8rem; padding:.75rem 0; border-bottom:1px solid var(--line); }
.roster-item:last-child{ border-bottom:none; }
.roster-info{ flex:1; }
.roster-info h4{ font-family:var(--font-display); font-size:.9rem; color:var(--purple-900); margin-bottom:.15rem; }
.roster-info p{ font-size:.78rem; color:var(--neutral-600); }
.mobile-dash-toggle{ display:none; }
@media (max-width:900px){
  .dash-shell{ grid-template-columns:1fr; }
  .dash-sidebar{ position:sticky; top:0; z-index:30; flex-direction:row; align-items:center; justify-content:space-between; padding:1rem 1.2rem; }
  .dash-sidebar .dash-nav{ display:none; }
  .dash-sidebar .dash-user{ border-top:none; padding-top:0; margin-top:0; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .dash-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){ .stat-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }
@media (max-width:900px){ .auth-shell{ grid-template-columns:1fr; } .auth-side{ display:none; } }

/* ================= chat widget ================= */
.luma-chat-launcher{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:70;
  width:58px; height:58px; border-radius:50%;
  background:var(--purple-600); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 34px -12px color-mix(in srgb, var(--purple-600) 75%, transparent);
  transition:transform .2s ease, box-shadow .2s ease;
}
.luma-chat-launcher:hover{ transform:translateY(-2px) scale(1.05); }
.luma-chat-launcher .dot{
  position:absolute; top:5px; right:5px; width:11px; height:11px; border-radius:50%;
  background:var(--coral-500); border:2px solid var(--bg);
}
.luma-chat-panel{
  position:fixed; right:1.4rem; bottom:5.4rem; z-index:70;
  width:min(360px, calc(100vw - 2rem)); max-height:min(560px, calc(100vh - 7.5rem));
  background:var(--surface); border-radius:18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line);
  opacity:0; transform:translateY(14px) scale(.97); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.luma-chat-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.luma-chat-head{
  background:var(--purple-700); color:#fff; padding:1rem 1.1rem;
  display:flex; align-items:center; gap:.7rem; flex:none;
}
:root[data-theme="dark"] .luma-chat-head{ background:#2A1D4A; }
@media (prefers-color-scheme:dark){ .luma-chat-head{ background:#2A1D4A; } }
.luma-chat-head .avatar{
  width:34px; height:34px; border-radius:50%; background:var(--coral-500); color:var(--purple-900);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; flex:none;
}
.luma-chat-head strong{ font-family:var(--font-display); font-size:.92rem; display:block; }
.luma-chat-head span{ font-size:.76rem; color:#D9CBFF; }
.luma-chat-close{ margin-left:auto; background:none; border:none; color:#fff; cursor:pointer; font-size:1.2rem; line-height:1; padding:.2rem .4rem; }
.luma-chat-body{ flex:1; overflow-y:auto; padding:1rem 1rem .4rem; display:flex; flex-direction:column; gap:.7rem; }
.luma-chat-msg{ max-width:86%; font-size:.87rem; line-height:1.55; padding:.6rem .8rem; border-radius:14px; }
.luma-chat-msg.bot{ background:var(--tint-purple); color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px; }
.luma-chat-msg.user{ background:var(--purple-600); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.luma-chat-quick{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1rem .7rem; flex:none; }
.luma-chat-quick button{
  font-family:var(--font-body); font-size:.76rem; padding:.4rem .7rem; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--purple-700); cursor:pointer;
}
.luma-chat-quick button:hover{ background:var(--tint-purple); }
.luma-chat-typing{ display:inline-flex; gap:4px; padding:.2rem; }
.luma-chat-typing span{ width:6px; height:6px; border-radius:50%; background:var(--neutral-400); animation:luma-typing-bounce 1s infinite ease-in-out; }
.luma-chat-typing span:nth-child(2){ animation-delay:.15s; }
.luma-chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes luma-typing-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }
.luma-chat-form{ display:flex; gap:.5rem; padding:.8rem; border-top:1px solid var(--line); flex:none; }
.luma-chat-form input{
  flex:1; border:1.5px solid var(--line); border-radius:999px; padding:.6rem 1rem; font-size:.87rem;
  background:var(--bg); color:var(--ink); font-family:var(--font-body);
}
.luma-chat-form input:focus{ outline:3px solid var(--focus); outline-offset:1px; }
.luma-chat-form button{
  flex:none; width:38px; height:38px; border-radius:50%; border:none; background:var(--coral-500); color:var(--purple-900);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
@media (max-width:480px){
  .luma-chat-panel{ right:.7rem; left:.7rem; width:auto; bottom:5.1rem; }
  .luma-chat-launcher{ right:1rem; bottom:1rem; }
}
@media (prefers-reduced-motion: reduce){
  .luma-chat-panel, .luma-chat-launcher{ transition:none; }
}

/* ---- Free consultation enquiry ---- */
.enquire-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:3rem; align-items:center; }
.enquire-copy h2{ margin-bottom:1rem; }
.enquire-copy p{ color:var(--neutral-600); }
.enquire-points{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.7rem; }
.enquire-points li{ position:relative; padding-left:1.7rem; font-weight:600; color:var(--purple-900); }
.enquire-points li::before{ content:""; position:absolute; left:0; top:.45em; width:.7rem; height:.7rem; border-radius:50%; background:var(--coral-500); }
.enquire-card{ padding:2rem; }
.choice-field{ border:0; padding:0; margin-inline:0; min-width:0; }
.choice-field legend{ font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--purple-900); padding:0; margin-bottom:.4rem; }
.choice-row{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.choice{ position:relative; cursor:pointer; }
.choice input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.choice span{ display:block; text-align:center; padding:.75rem 1rem; border:1.5px solid var(--line); border-radius:10px; font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--neutral-600); background:var(--bg); transition:border-color .2s ease, background .2s ease, color .2s ease; }
.choice input:checked + span{ border-color:var(--purple-600); background:var(--tint-purple); color:var(--purple-700); }
.choice input:focus-visible + span{ outline:2px solid var(--purple-500); outline-offset:2px; }
.form-small{ font-size:.78rem; color:var(--neutral-600); text-align:center; margin:.9rem 0 0; }
@media (max-width:860px){ .enquire-grid{ grid-template-columns:1fr; gap:1.8rem; } .enquire-card{ padding:1.4rem; } }

/* ---- Funnel pages: book.html and thankyou.html ---- */
.funnel-steps{ display:flex; gap:.4rem; align-items:center; }
.funnel-step{ font-family:var(--font-display); font-weight:700; font-size:.72rem; padding:.35rem .7rem; border-radius:999px; background:var(--tint-purple); color:var(--neutral-600); white-space:nowrap; }
.funnel-step.is-current{ background:var(--purple-600); color:#fff; }
.funnel-step.is-done{ background:color-mix(in srgb, var(--purple-500) 18%, transparent); color:var(--purple-700); }
.funnel-title{ font-size:clamp(1.7rem, 1.2rem + 2vw, 2.4rem); line-height:1.15; margin-bottom:1rem; }
.funnel-people{ display:flex; align-items:center; gap:.2rem; margin-top:1.8rem; }
.funnel-people img{ width:54px; height:54px; border-radius:50%; object-fit:cover; border:3px solid var(--surface); box-shadow:var(--shadow); }
.funnel-people img + img{ margin-left:-14px; }
.funnel-people p{ margin:0 0 0 .8rem; font-size:.86rem; line-height:1.4; color:var(--neutral-600); }
.funnel-people strong{ color:var(--purple-900); }
.choice-row-3{ grid-template-columns:repeat(3, 1fr); align-items:stretch; }
.choice-row-3 .choice{ display:block; height:100%; }
.choice-row-3 .choice span{ height:100%; display:flex; flex-direction:column; justify-content:center; padding-inline:.4rem; }
.choice span small{ display:block; font-family:var(--font-body); font-weight:400; font-size:.72rem; margin-top:.15rem; color:var(--neutral-600); }
.calendly-inline-widget{ min-width:280px; height:680px; }
.funnel-next{ margin:0; padding-left:1.2rem; display:grid; gap:.9rem; color:var(--neutral-600); }
.funnel-next strong{ color:var(--purple-900); }
.funnel-proof{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.6rem; }
.funnel-proof img{ width:100%; border-radius:14px; box-shadow:var(--shadow); display:block; }
@media (max-width:600px){
  .funnel-step:not(.is-current){ display:none; }
  .funnel-proof{ grid-template-columns:1fr; }
}

/* ---- Ad landing page: start.html ---- */
.landing-hero{ padding-block:clamp(1.6rem,4vw,3.2rem) clamp(2.4rem,5vw,4rem); }
.landing-title{ font-size:clamp(1.75rem, 1.15rem + 2.4vw, 2.7rem); line-height:1.12; margin-bottom:1rem; }
.landing-form-title{ font-size:1.25rem; margin-bottom:.25rem; }
.landing-form-sub{ font-size:.86rem; color:var(--neutral-600); margin-bottom:1.1rem; }
.landing-proof.testimonial-grid{ max-width:900px; margin-inline:auto; }
.landing-steps{ list-style:none; padding:0; margin:0 auto; max-width:760px; display:grid; gap:.9rem; }
.landing-steps li{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1rem 1.2rem; color:var(--neutral-600); line-height:1.6; }
.landing-steps strong{ color:var(--purple-900); }
.landing-faq{ display:grid; gap:1.1rem; }
.landing-faq div{ border-top:1px solid var(--line); padding-top:1rem; }
.landing-faq h3{ font-size:1.02rem; margin-bottom:.35rem; }
.landing-faq p{ color:var(--neutral-600); }
.landing-sticky{ display:none; }
@media (max-width:860px){
  .landing-hero .enquire-grid{ gap:1.4rem; }
  /* Keep the form within one swipe on a phone: the points and faces appear further down the page anyway */
  .landing-hero .enquire-points, .landing-hero .funnel-people{ display:none; }
  .landing-hero .enquire-copy > p{ margin-bottom:.2rem; }
  .landing-sticky{ display:flex; justify-content:center; position:fixed; left:16px; right:16px; bottom:14px; z-index:40; box-shadow:0 14px 30px -12px rgba(38,20,74,.45); }
  .landing-sticky.is-hidden{ display:none; }
}

/* ---- Free mock marking + RAG sheets ---- */
.mock-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center; }
.mock-grid h2{ margin-bottom:1rem; }
.mock-grid > div > p{ color:var(--neutral-600); }
.rag-demo{ background:var(--surface); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--line); }
.rag-demo-head{ background:var(--purple-600); color:#fff; font-family:var(--font-display); font-weight:700; padding:.8rem 1.1rem; font-size:.9rem; }
.rag-demo-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem 1.1rem; border-top:1px solid var(--line); font-size:.9rem; }
.rag-demo-row i, .rag-tag{ font-style:normal; font-family:var(--font-display); font-weight:700; font-size:.72rem; padding:.28rem .65rem; border-radius:999px; color:#fff; white-space:nowrap; }
.rag-demo-row i.g, .rag-tag.g{ background:#3E8A5C; } .rag-demo-row i.a, .rag-tag.a{ background:#D4972A; color:#1f1500; } .rag-demo-row i.r, .rag-tag.r{ background:#C24545; } .rag-tag.n{ background:var(--tint-purple); color:var(--neutral-600); }
.rag-sheet-head{ background:var(--purple-600); color:#fff; border-radius:16px 16px 0 0; padding:1.4rem 1.5rem; }
.rag-sheet-head h1{ color:#fff; font-size:1.5rem; margin-bottom:.3rem; }
.rag-sheet-head p{ color:#E4DBFF; font-size:.9rem; }
.rag-sheet{ background:var(--surface); border:1px solid var(--line); border-radius:0 0 16px 16px; padding:1.4rem 1.5rem; box-shadow:var(--shadow); }
.rag-legend{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.rag-sheet h3{ font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--purple-600); margin:1.2rem 0 .4rem; }
.rag-sheet-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:.6rem 0; border-top:1px solid var(--line); font-size:.92rem; }
.rag-sheet-row small{ display:block; color:var(--neutral-600); font-size:.8rem; margin-top:.15rem; }
.rag-comments{ background:var(--tint-purple); border-left:3px solid var(--coral-500); border-radius:10px; padding:1rem 1.2rem; margin-top:1.4rem; white-space:pre-wrap; line-height:1.6; }
.rag-cta{ text-align:center; margin-top:2rem; }
.rag-cta p{ color:var(--neutral-600); margin-bottom:1rem; }
@media (max-width:860px){ .mock-grid{ grid-template-columns:1fr; gap:1.8rem; } }
@media print{ .site-header, .site-footer, .rag-cta, .luma-chat-launcher, .luma-chat-panel{ display:none !important; } }