:root{
      --bg:#101014;
      --bg-2:#151319;
      --surface:#19181d;
      --surface-2:#222126;
      --text:#ffffff;
      --muted:#9293a3;
      --line:rgba(255,255,255,.08);
      --accent:#ff656c;
      --accent-soft:#ff8a8e;
      --pill:#3a2328;
      --shadow:0 34px 90px rgba(0,0,0,.45);
    }


    /* Global auto-scaling foundation for every website page/section */
    :root{
      --site-max:1240px;
      --site-gutter:clamp(16px, 3.5vw, 56px);
      --section-space:clamp(54px, 8vw, 112px);
      --radius-lg:clamp(16px, 1.5vw, 24px);
    }

    html{
      width:100%;
      min-width:320px;
      font-size:clamp(14px, .35vw + 12px, 16px);
      -webkit-text-size-adjust:100%;
    }

    body,
    main{
      width:100%;
      max-width:100%;
    }

    img,
    svg,
    video,
    canvas{
      max-width:100%;
    }

    img,
    video{
      height:auto;
    }

    section{
      width:100%;
      max-width:100%;
    }

    .site-container,
    .page-container,
    .section-inner{
      width:min(var(--site-max), calc(100% - (var(--site-gutter) * 2)));
      margin-inline:auto;
    }

    .page-section{
      width:100%;
      padding-block:var(--section-space);
    }

    .responsive-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
      gap:clamp(16px, 2vw, 28px);
    }

    .responsive-card{
      min-width:0;
      border-radius:var(--radius-lg);
    }

    h1,h2,h3,h4,p{
      max-width:100%;
      overflow-wrap:break-word;
    }

    h2{
      font-size:clamp(28px, 3.2vw, 48px);
      line-height:1.05;
    }

    h3{
      font-size:clamp(18px, 1.6vw, 26px);
    }

    p{
      font-size:clamp(13px, .45vw + 11px, 16px);
    }

    button,
    input,
    select,
    textarea{
      max-width:100%;
    }

    table{
      width:100%;
      max-width:100%;
    }

    /* Keep wide content usable on smaller screens without breaking layout */
    .table-wrap,
    .horizontal-scroll{
      width:100%;
      max-width:100%;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }

    /* Tablet */
    @media (max-width:1100px){
      :root{
        --site-gutter:clamp(18px, 3vw, 36px);
        --section-space:clamp(48px, 7vw, 84px);
      }

      .nav-links{
        gap:clamp(12px, 1.8vw, 22px);
        font-size:clamp(10px, 1vw, 12px);
      }
    }

    /* Mobile / narrow window */
    @media (max-width:760px){
      :root{
        --site-gutter:16px;
        --section-space:48px;
      }

      .site-container,
      .page-container,
      .section-inner{
        width:calc(100% - 32px);
      }

      .responsive-grid{
        grid-template-columns:1fr;
      }
    }

    /* Short desktop/laptop windows */
    @media (min-width:761px) and (max-height:760px){
      :root{
        --section-space:clamp(36px, 5vh, 64px);
      }
    }

    /* Very large displays: scale up gently without becoming oversized */
    @media (min-width:1800px){
      :root{
        --site-max:1360px;
      }
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}

    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      background:
        radial-gradient(circle at 61% 40%, rgba(115,79,112,.15) 0 12%, rgba(115,79,112,.07) 25%, transparent 46%),
        radial-gradient(circle at 29% 72%, rgba(151,72,67,.14) 0 12%, rgba(151,72,67,.06) 28%, transparent 48%),
        linear-gradient(180deg, #121217 0%, #101014 100%);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x:hidden;
    }

    a{color:inherit;text-decoration:none}
    button{font:inherit}


    .subpage{
      min-height:100svh;
      width:100%;
      padding:clamp(18px, 2vw, 30px) 0 var(--section-space);
    }

    .subpage-shell{
      width:min(var(--site-max), calc(100% - (var(--site-gutter) * 2)));
      margin-inline:auto;
    }

    .page{
      min-height:100vh;
      position:relative;
      isolation:isolate;
    }

    .page::before{
      content:"";
      position:absolute;
      width:760px;
      height:760px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,95,105,.055), transparent 63%);
      left:24%;
      top:21%;
      filter:blur(6px);
      pointer-events:none;
      z-index:-1;
    }

    .nav{
      width:min(var(--site-max), calc(100% - (var(--site-gutter) * 2)));
      height:clamp(72px, 9vh, 96px);
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:800;
      letter-spacing:-.02em;
      font-size:17px;
    }

    .brand-app-icon{
      width:clamp(24px, 1.8vw, 28px);
      height:clamp(24px, 1.8vw, 28px);
      border-radius:8px;
      object-fit:cover;
      display:block;
      flex:0 0 auto;
      box-shadow:0 7px 20px rgba(0,0,0,.2);
    }

    .brand-mark{
      width:25px;
      height:25px;
      border-radius:7px;
      position:relative;
      background:linear-gradient(145deg,#ff9a69 0%,#ff626d 64%,#d9435d 100%);
      box-shadow:0 7px 20px rgba(255,101,108,.18);
      transform:rotate(-5deg);
      overflow:hidden;
    }

    .brand-mark::before{
      content:"";
      position:absolute;
      width:12px;
      height:8px;
      left:5px;
      top:5px;
      border:2px solid rgba(255,255,255,.9);
      border-top:none;
      border-radius:1px 1px 4px 4px;
      transform:skewY(7deg);
    }

    .brand-mark::after{
      content:"";
      position:absolute;
      width:2px;
      height:8px;
      background:rgba(255,255,255,.88);
      right:5px;
      top:8px;
      border-radius:999px;
    }



    .brand-title-svg{
      display:block;
      width:clamp(118px, 9.4vw, 142px);
      height:auto;
      overflow:visible;
    }

    .mini-brand-title-svg{
      display:block;
      width:78px;
      height:auto;
      overflow:visible;
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:28px;
      color:#8f909c;
      font-size:12px;
      font-weight:700;
    }

    .nav-links a{
      transition:.2s ease;
      white-space:nowrap;
    }
    .nav-links a:hover{color:#fff}

    .support-link{
      display:flex;
      align-items:center;
      gap:7px;
    }

    .support-cup{
      width:14px;
      height:14px;
      object-fit:contain;
      filter:invert(1);
      opacity:.72;
      display:block;
    }

    .hero{
      width:min(var(--site-max), calc(100% - (var(--site-gutter) * 2)));
      margin:0 auto;
      min-height:calc(100svh - clamp(72px, 9vh, 96px));
      display:grid;
      grid-template-columns:minmax(0, 1.04fr) minmax(0, .96fr);
      align-items:center;
      gap:clamp(34px, 5vw, 74px);
      padding:clamp(10px, 2vh, 18px) 0 clamp(28px, 7vh, 84px);
    }

    .hero-copy{
      transform:translateY(clamp(-10px, -1vh, -4px));
      min-width:0;
    }

    .eyebrow{
      display:inline-flex;
      font-family:"Roboto", Arial, sans-serif;
      font-weight:500;
      align-items:center;
      gap:11px;
      min-height:37px;
      padding:0 17px;
      border:1px solid rgba(255,113,120,.18);
      border-radius:999px;
      background:rgba(75,43,49,.62);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
      color:#fff;
      font-size:12px;
      font-weight:500;
      margin-bottom:28px;
    }

    .eyebrow .dot{
      width:4px;height:4px;border-radius:50%;
      background:#a78a90;
    }

    h1{
      margin:0;
      max-width:600px;
      font-family:"Arial Rounded MT Bold", "Trebuchet MS", Inter, sans-serif;
      font-size:clamp(58px, 5.1vw, 82px);
      line-height:.98;
      letter-spacing:-.055em;
      font-weight:900;
    }


    .hero-title-svg{
      display:block;
      width:min(100%, clamp(430px, 39vw, 600px));
      height:auto;
      overflow:visible;
      margin:0;
    }

    .accent{color:var(--accent)}

    .sub{
      font-family:"Roboto", Arial, sans-serif;
      font-weight:500;
      margin:26px 0 30px;
      max-width:510px;
      color:#9c9dad;
      font-size:clamp(13px, 1.05vw, 16px);
      line-height:1.65;
      letter-spacing:-.012em;
    }

    .cta-row{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
    }

    .store-button{
      text-decoration:none;
      height:clamp(44px, 3.2vw, 48px);
      border:1px solid rgba(255,255,255,.42);
      background:#070708;
      color:#fff;
      border-radius:8px;
      padding:0 15px;
      display:flex;
      align-items:center;
      gap:10px;
      cursor:pointer;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 5px 20px rgba(0,0,0,.15);
      transition:transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .store-button:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.72);
      background:#0b0b0d;
    }

    .store-button svg{width:23px;height:23px;flex:0 0 auto}

    .store-copy{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      line-height:1;
    }

    .store-copy small{
      font-size:8px;
      letter-spacing:.035em;
      margin-bottom:4px;
      color:#e3e3e3;
      text-transform:uppercase;
    }

    .store-copy strong{
      font-size:15px;
      font-weight:600;
      letter-spacing:-.02em;
    }

    .preview-wrap{
      display:flex;
      justify-content:center;
      align-items:center;
      position:relative;
      min-height:min(560px, calc(100svh - 150px));
      min-width:0;
    }

    .preview-wrap::before{
      content:"";
      position:absolute;
      width:620px;
      height:480px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(136,91,126,.13), transparent 66%);
      filter:blur(5px);
    }

    .device{
      width:clamp(390px, 38vw, 570px);
      position:relative;
      z-index:1;
      transform:perspective(1200px) rotateY(-2deg) rotateX(1deg);
      transform-origin:center center;
      filter:drop-shadow(0 38px 45px rgba(0,0,0,.46));
      padding-bottom:34px;
      animation:laptopFloat 4.2s cubic-bezier(.45,0,.55,1) infinite;
      will-change:transform;
    }

    @keyframes laptopFloat{
      0%,100%{
        transform:perspective(1200px) translateY(0) rotateY(-2deg) rotateX(1deg);
      }
      50%{
        transform:perspective(1200px) translateY(-10px) rotateY(-2deg) rotateX(1deg);
      }
    }

    @media (prefers-reduced-motion: reduce){
      .device{
        animation:none;
      }
    }

    .device::before{
      content:"";
      position:absolute;
      left:50%;
      bottom:0;
      transform:translateX(-50%);
      width:114%;
      height:clamp(22px, 2vw, 30px);
      border-radius:0 0 18px 18px;
      background:linear-gradient(180deg,#989aa0 0%,#5a5b61 22%,#303136 58%,#1a1b1f 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 8px 18px rgba(255,255,255,.06),
        0 14px 22px rgba(0,0,0,.34);
      z-index:4;
    }

    .device::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:11px;
      transform:translateX(-50%);
      width:105px;
      height:5px;
      border-radius:0 0 8px 8px;
      background:#c0c1c5;
      opacity:.72;
      z-index:5;
      box-shadow:0 1px 0 rgba(0,0,0,.15);
    }

    .screen{
      width:100%;
      aspect-ratio:16 / 10;
      border-radius:16px 16px 8px 8px;
      overflow:hidden;
      background:#0c0d11;
      position:relative;
      border:9px solid #1e1f24;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 0 0 2px rgba(255,255,255,.08);
      z-index:1;
    }

    .screen::before{
      content:"";
      position:absolute;
      top:-6px;
      left:50%;
      transform:translateX(-50%);
      width:6px;
      height:6px;
      border-radius:50%;
      background:#050506;
      box-shadow:0 0 0 1px rgba(255,255,255,.05);
      z-index:10;
    }

    .screen::after{
      content:"";
      position:absolute;
      left:-1px;
      right:-1px;
      bottom:-1px;
      height:16px;
      background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(9,10,12,.12) 28%, rgba(9,10,12,.65) 100%);
      border-radius:0 0 6px 6px;
      z-index:2;
      pointer-events:none;
    }

    .app-topbar{
      height:44px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 17px;
      background:#0f1014;
      border-bottom:1px solid rgba(255,255,255,.045);
    }

    .mini-brand{
      display:flex;
      align-items:center;
      gap:7px;
      font-size:10px;
      font-weight:800;
    }

    .mini-logo-img{
      width:20px;
      height:20px;
      border-radius:6px;
      object-fit:cover;
      display:block;
      flex:0 0 auto;
    }

    .mini-logo{
      width:19px;height:19px;border-radius:6px;
      display:grid;place-items:center;
      background:linear-gradient(145deg,#ff9a69,#ff626d 70%);
      color:white;
      font-size:8px;
      box-shadow:0 6px 16px rgba(255,101,108,.15);
    }

    .avatar{
      width:22px;height:22px;border-radius:50%;
      background:#b0ad69;
      border:2px solid #292717;
      display:grid;place-items:center;
    }

    .avatar svg{width:11px;height:11px}

    .app-body{
      display:grid;
      grid-template-columns:92px 1fr;
      height:calc(100% - 44px);
    }

    .side{
      padding:12px 10px;
      background:#111217;
      border-right:1px solid rgba(255,255,255,.045);
    }

    .side-title{
      height:7px;width:45px;border-radius:99px;background:#3f414a;
      margin:3px 4px 15px;
    }

    .side-item{
      height:29px;
      border-radius:7px;
      margin:5px 0;
      display:flex;
      align-items:center;
      gap:6px;
      padding:0 7px;
      color:#747681;
      font-size:8px;
      font-weight:700;
    }

    .side-item::before{
      content:"";
      width:8px;height:8px;border-radius:3px;
      border:1.3px solid currentColor;
      opacity:.75;
    }

    .side-item.active{
      background:rgba(255,101,108,.13);
      color:#ff777d;
    }

    .dashboard{
      padding:14px 14px 13px;
      overflow:hidden;
      background:#0d0e12;
    }

    .welcome{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-bottom:10px;
    }

    .welcome h3{
      font-size:11px;
      margin:0 0 3px;
      letter-spacing:-.025em;
      font-weight:800;
    }

    .welcome p{
      margin:0;
      color:#686a75;
      font-size:6px;
    }

    .date-chip{
      font-size:5.5px;
      border:1px solid rgba(255,255,255,.06);
      border-radius:6px;
      padding:4px 6px;
      color:#767884;
      background:#121318;
      white-space:nowrap;
    }

    .home-grid{
      display:grid;
      grid-template-columns:1.23fr .9fr .87fr;
      grid-template-rows:118px 126px;
      gap:8px;
      height:252px;
    }

    .home-card{
      border-radius:11px;
      background:#17181e;
      border:1px solid rgba(255,255,255,.045);
      overflow:hidden;
      position:relative;
      min-width:0;
    }

    .home-card-header{
      height:31px;
      padding:9px 10px 0;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:7px;
    }

    .home-card-title{
      display:flex;
      align-items:center;
      gap:6px;
      min-width:0;
      color:#ececf0;
      font-size:7px;
      font-weight:800;
      letter-spacing:-.01em;
      white-space:nowrap;
    }

    .home-card-icon{
      width:12px;
      height:12px;
      border-radius:4px;
      border:1px solid rgba(255,255,255,.08);
      display:grid;
      place-items:center;
      color:#ff7279;
      flex:0 0 auto;
    }

    .home-card-icon svg{
      width:7px;
      height:7px;
    }

    .micro-menu{
      color:#535660;
      font-size:9px;
      line-height:1;
      letter-spacing:1px;
    }

    /* Teacher Profile stays neutral, matching the actual app's profile card rule. */
    .profile-card{
      background:
        radial-gradient(circle at 29% 30%, rgba(255,255,255,.055), transparent 27%),
        linear-gradient(122deg,#27282e 0%,#1c1d22 54%,#17181d 100%);
    }

    .profile-body{
      height:87px;
      position:relative;
      padding:6px 10px 9px 80px;
    }

    .profile-portrait{
      position:absolute;
      left:13px;
      bottom:8px;
      width:56px;
      height:70px;
    }

    .profile-portrait::before{
      content:"";
      position:absolute;
      left:50%;
      top:4px;
      transform:translateX(-50%);
      width:22px;
      height:22px;
      border-radius:50%;
      background:#8e8f94;
    }

    .profile-portrait::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:0;
      transform:translateX(-50%);
      width:39px;
      height:45px;
      border-radius:45% 45% 32% 32%;
      background:#707177;
    }

    .profile-body strong{
      display:block;
      margin-top:14px;
      font-size:9px;
      color:#f5f5f6;
    }

    .profile-body span{
      display:block;
      margin-top:4px;
      font-size:5.5px;
      color:#85868f;
    }

    .profile-badge{
      position:absolute;
      right:9px;
      bottom:9px;
      padding:4px 7px;
      border-radius:999px;
      background:rgba(65,66,72,.72);
      border:1px solid rgba(255,255,255,.055);
      font-size:5px;
      font-weight:800;
      color:#fff;
    }

    .progress-body,
    .target-body{
      height:87px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:2px 8px 10px;
    }

    .progress-ring{
      --p:78;
      width:53px;
      height:53px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:conic-gradient(#ff6971 calc(var(--p) * 1%), #2b2d34 0);
      position:relative;
      flex:0 0 auto;
    }

    .progress-ring::after{
      content:"";
      position:absolute;
      inset:6px;
      border-radius:50%;
      background:#17181e;
    }

    .progress-ring strong{
      position:relative;
      z-index:1;
      font-size:10px;
      letter-spacing:-.02em;
    }

    .progress-copy{
      min-width:0;
    }

    .progress-copy b{
      display:block;
      font-size:7px;
      margin-bottom:4px;
    }

    .progress-copy span{
      display:block;
      font-size:5px;
      line-height:1.35;
      color:#6f717c;
    }

    .target-number{
      font-size:23px;
      line-height:1;
      font-weight:900;
      letter-spacing:-.05em;
      color:#fff;
    }

    .target-number small{
      display:block;
      margin-top:5px;
      font-size:5px;
      line-height:1.2;
      letter-spacing:0;
      color:#767883;
      font-weight:600;
    }

    .target-meter{
      width:50px;
      display:grid;
      gap:5px;
    }

    .target-meter span{
      display:block;
      height:5px;
      border-radius:99px;
      background:#2a2c33;
      overflow:hidden;
    }

    .target-meter span::before{
      content:"";
      display:block;
      width:var(--fill);
      height:100%;
      border-radius:inherit;
      background:#ff6971;
      opacity:.82;
    }

    .classes-card,
    .performance-card,
    .insights-card{
      min-height:0;
    }

    .classes-body{
      height:95px;
      position:relative;
      padding:2px 9px 9px;
    }

    .class-average{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      margin-bottom:6px;
    }

    .class-average strong{
      font-size:14px;
      line-height:1;
      letter-spacing:-.04em;
    }

    .class-average span{
      font-size:5px;
      color:#747680;
      padding-bottom:1px;
    }

    .course-carousel{
      position:absolute;
      left:9px;
      right:9px;
      bottom:9px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:5px;
    }

    .course-pill{
      height:39px;
      border-radius:7px;
      background:#202129;
      border:1px solid rgba(255,255,255,.035);
      padding:6px;
      min-width:0;
    }

    .course-pill b{
      display:block;
      font-size:6px;
      margin-bottom:7px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .course-pill span{
      display:block;
      font-size:10px;
      font-weight:900;
      color:#d8d9dc;
    }

    .performance-body{
      height:95px;
      padding:3px 10px 10px;
      position:relative;
    }

    .chart-lines{
      position:absolute;
      left:10px;
      right:10px;
      top:6px;
      bottom:17px;
      background:
        linear-gradient(to bottom,
          transparent 24%,
          rgba(255,255,255,.035) 25%,
          transparent 26%,
          transparent 49%,
          rgba(255,255,255,.035) 50%,
          transparent 51%,
          transparent 74%,
          rgba(255,255,255,.035) 75%,
          transparent 76%);
    }

    .performance-bars{
      position:absolute;
      left:13px;
      right:12px;
      bottom:15px;
      height:63px;
      display:flex;
      align-items:flex-end;
      gap:6px;
    }

    .performance-bars span{
      flex:1;
      min-width:6px;
      border-radius:3px 3px 1px 1px;
      background:linear-gradient(180deg,#ff8c91 0%,#ff6971 55%,#b83f4a 100%);
      opacity:.92;
    }

    .performance-bars span:nth-child(1){height:34%}
    .performance-bars span:nth-child(2){height:51%}
    .performance-bars span:nth-child(3){height:45%}
    .performance-bars span:nth-child(4){height:67%}
    .performance-bars span:nth-child(5){height:82%}
    .performance-bars span:nth-child(6){height:74%}

    .insights-body{
      height:95px;
      padding:2px 9px 8px;
      display:grid;
      gap:5px;
    }

    .insight-row{
      display:grid;
      grid-template-columns:18px 1fr auto;
      align-items:center;
      gap:6px;
      min-height:22px;
      border-radius:6px;
      background:#1e2027;
      padding:4px 6px 4px 4px;
    }

    .insight-dot{
      width:16px;
      height:16px;
      border-radius:5px;
      background:rgba(255,105,113,.11);
      border:1px solid rgba(255,105,113,.13);
      display:grid;
      place-items:center;
      color:#ff7279;
      font-size:7px;
      font-weight:900;
    }

    .insight-text b{
      display:block;
      font-size:5.5px;
      margin-bottom:2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .insight-text span{
      display:block;
      font-size:4.5px;
      color:#696b76;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .insight-value{
      font-size:6px;
      font-weight:800;
      color:#bfc0c5;
    }

    .screen-glare{
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(120deg,rgba(255,255,255,.025),transparent 29%,transparent 72%,rgba(255,255,255,.015));
    }

    .scroll-cue{
      position:absolute;
      bottom:14px;
      left:50%;
      transform:translateX(-50%);
      width:84px;
      height:4px;
      border-radius:99px;
      background:rgba(255,255,255,.86);
      opacity:.9;
    }


    /* Auto-scale the hero for shorter desktop/laptop displays. */
    @media (min-width:901px) and (max-height:820px){
      .nav{
        height:72px;
      }

      .hero{
        min-height:calc(100svh - 72px);
        padding:6px 0 28px;
        gap:clamp(28px,4vw,56px);
      }

      .eyebrow{
        min-height:32px;
        margin-bottom:20px;
      }

      .sub{
        margin:20px 0 22px;
      }

      .preview-wrap{
        min-height:calc(100svh - 110px);
      }

      .device{
        width:min(36vw, 500px);
      }
    }

    @media (min-width:901px) and (max-height:700px){
      .nav{
        height:62px;
      }

      .hero{
        min-height:calc(100svh - 62px);
        padding:4px 0 16px;
      }

      .eyebrow{
        margin-bottom:16px;
      }

      .sub{
        margin:16px 0 18px;
      }

      .store-button{
        height:44px;
      }

      .device{
        width:min(34vw, 445px);
      }

      .preview-wrap{
        min-height:calc(100svh - 84px);
      }
    }

    @media (min-width:1400px){
      .nav,
      .hero{
        width:min(var(--site-max), calc(100% - (var(--site-gutter) * 2)));
      }

      .device{
        width:min(39vw, 610px);
      }

      .hero-title-svg{
        width:min(100%, 640px);
      }
    }

    @media (max-width: 900px){
      .nav-links{gap:16px}
      .hero{
        grid-template-columns:1fr;
        gap:clamp(28px, 6vw, 40px);
        text-align:center;
        padding-top:clamp(30px, 6vh, 50px);
        min-height:auto;
      }
      .hero-copy{transform:none}
      .sub{margin-left:auto;margin-right:auto}
      .cta-row{justify-content:center}
      .preview-wrap{min-height:500px}
      .device{width:min(82vw, 520px)}
      .nav{height:80px}
      .nav-links a:nth-child(2),
      .nav-links a:nth-child(3),
      .nav-links a:nth-child(4){display:none}
    }

    @media (max-width: 560px){
      .nav{
        width:min(100% - 28px,1040px);
      }
      .brand{font-size:14px}
      .brand-title-svg{width:116px}
      .nav-links{gap:12px;font-size:11px}
      .hero{
        width:min(100% - 28px,1040px);
        padding-top:36px;
      }
      h1{
        font-size:51px;
      }
      .hero-title-svg{
        width:100%;
      }
      .sub{
        font-size:14px;
      }
      .eyebrow{
        font-size:10px;
        margin-bottom:22px;
      }
      .device{
        width:min(94vw, 430px);
      }
      .device::before{
        width:112%;
        bottom:0;
        height:20px;
      }
      .device::after{
        bottom:7px;
        width:78px;
        height:4px;
      }
      .preview-wrap{min-height:390px}
      .app-body{grid-template-columns:72px 1fr}
      .side-item{font-size:6px}
    }

    /* Full-page scrolling */
    html{
      scroll-padding-top:0;
    }

    body{
      overscroll-behavior-y:none;
    }

    .page{
      min-height:100svh;
    }

    .features-page{
      min-height:100svh;
      position:relative;
      overflow:visible;
      display:flex;
      align-items:flex-start;
      background:
        radial-gradient(circle at 30% 72%, rgba(255,101,108,.035), transparent 34%),
        radial-gradient(circle at 76% 68%, rgba(69,172,160,.035), transparent 35%),
        #101014;
      padding:clamp(50px, 7vh, 76px) 0 clamp(22px, 3vh, 38px);
    }

    .features-inner{
      width:min(1310px, calc(100% - (var(--site-gutter) * 2)));
      margin:0 auto;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      min-height:calc(100svh - clamp(72px, 10vh, 108px));
    }

    .features-title-svg{
      display:block;
      width:min(560px, 44vw);
      height:auto;
      margin:0 auto;
      overflow:visible;
    }

    .features-subtitle{
      width:min(720px, 80vw);
      margin:14px auto 0;
      text-align:center;
      color:#9b9caa;
      font-family:"Roboto", Arial, sans-serif;
      font-size:clamp(13px, .95vw, 16px);
      font-weight:400;
      line-height:1.6;
    }

    .feature-grid{
      width:100%;
      display:grid;
      grid-template-columns:minmax(0, 2.05fr) minmax(315px, 1fr);
      gap:clamp(14px, 1.5vw, 20px);
      margin-top:clamp(46px, 7vh, 70px);
      align-items:stretch;
    }

    .feature-card{
      height:clamp(430px, 61vh, 610px);
      border-radius:26px;
      position:relative;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.055);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
    }

    .feature-card.grades{
      background:
        radial-gradient(circle at 72% 74%, rgba(255,101,108,.08), transparent 39%),
        #372426;
      border-color:rgba(255,101,108,.14);
    }

    .feature-card.attendance{
      background:
        radial-gradient(circle at 63% 72%, rgba(66,176,165,.085), transparent 40%),
        #1c2929;
      border-color:rgba(86,188,178,.12);
    }

    .feature-copy{
      position:relative;
      z-index:4;
      padding:clamp(21px, 2vw, 30px);
      max-width:58%;
    }

    .attendance .feature-copy{
      max-width:100%;
    }

    .feature-icon{
      width:41px;
      height:41px;
      display:grid;
      place-items:center;
      border-radius:11px;
      margin-bottom:13px;
    }

    .grades .feature-icon{
      color:#ff6971;
      background:rgba(255,105,113,.11);
      border:1px solid rgba(255,105,113,.08);
    }

    .attendance .feature-icon{
      color:#4bc2b4;
      background:rgba(75,194,180,.11);
      border:1px solid rgba(75,194,180,.08);
    }

    .feature-icon svg{
      width:19px;
      height:19px;
    }

    .feature-card h2{
      margin:0 0 10px;
      color:#fff;
      font-family:"Roboto", Arial, sans-serif;
      font-size:clamp(21px, 1.65vw, 28px);
      font-weight:800;
      letter-spacing:-.025em;
    }

    .feature-card p{
      margin:0;
      color:#acabb3;
      font-family:"Roboto", Arial, sans-serif;
      font-size:clamp(12px, .88vw, 15px);
      font-weight:400;
      line-height:1.55;
    }

    /* Grade-management mockup */
    .grade-window{
      position:absolute;
      z-index:2;
      width:min(72%, 620px);
      height:78%;
      right:5%;
      bottom:-16%;
      border-radius:20px 20px 0 0;
      background:#0d0e12;
      border:7px solid #24252a;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 35px 55px rgba(0,0,0,.35);
      overflow:hidden;
    }

    .grade-window-top{
      height:42px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 14px;
      background:#111217;
      border-bottom:1px solid rgba(255,255,255,.05);
    }

    .grade-window-brand{
      display:flex;
      align-items:center;
      gap:7px;
      font-size:8px;
      font-weight:800;
      color:#f0f0f3;
    }

    .grade-window-logo{
      width:18px;
      height:18px;
      border-radius:6px;
      background:linear-gradient(145deg,#ff8a85,#ff5f6b);
      display:grid;
      place-items:center;
      font-size:6px;
      font-weight:900;
      color:#fff;
    }

    .grade-window-dots{
      display:flex;
      gap:4px;
    }

    .grade-window-dots i{
      width:4px;
      height:4px;
      border-radius:50%;
      background:#4a4c55;
    }

    .grade-app{
      display:grid;
      grid-template-columns:74px 1fr;
      height:calc(100% - 42px);
    }

    .grade-side{
      padding:10px 8px;
      background:#111217;
      border-right:1px solid rgba(255,255,255,.045);
    }

    .grade-side span{
      display:block;
      height:25px;
      border-radius:6px;
      margin-bottom:5px;
      background:transparent;
      position:relative;
    }

    .grade-side span::before{
      content:"";
      position:absolute;
      width:8px;
      height:8px;
      border:1px solid #656773;
      border-radius:3px;
      left:5px;
      top:8px;
    }

    .grade-side span.active{
      background:rgba(255,101,108,.11);
    }

    .grade-side span.active::before{
      border-color:#ff6870;
      background:rgba(255,104,112,.08);
    }

    .grade-main{
      padding:13px 12px 0;
      overflow:hidden;
    }

    .mock-page-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:11px;
    }

    .mock-page-title strong{
      font-size:10px;
      color:#f4f4f5;
    }

    .mock-page-title i{
      width:58px;
      height:19px;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.06);
      background:#17181e;
    }

    .class-summary{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:6px;
      margin-bottom:8px;
    }

    .class-summary div{
      height:43px;
      border-radius:8px;
      background:#191a20;
      border:1px solid rgba(255,255,255,.04);
      padding:7px;
    }

    .class-summary small{
      display:block;
      font-size:5px;
      color:#747681;
      margin-bottom:4px;
    }

    .class-summary b{
      font-size:10px;
      color:#f0f0f3;
    }

    .grade-table{
      border-radius:9px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.045);
    }

    .grade-row{
      display:grid;
      grid-template-columns:1.35fr .65fr .65fr .65fr;
      min-height:27px;
      background:#14151a;
      border-bottom:1px solid rgba(255,255,255,.035);
    }

    .grade-row.header{
      min-height:25px;
      background:#1a1b21;
      color:#71737d;
      font-size:5px;
      font-weight:800;
    }

    .grade-cell{
      display:flex;
      align-items:center;
      padding:0 7px;
      font-size:5.5px;
      color:#a9aab1;
      border-right:1px solid rgba(255,255,255,.028);
    }

    .grade-cell:last-child{
      border-right:0;
    }

    .grade-score{
      width:84%;
      height:5px;
      border-radius:99px;
      background:#2b2d34;
      overflow:hidden;
    }

    .grade-score::after{
      content:"";
      display:block;
      width:var(--score);
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,#ff6971,#ff8b8f);
    }

    /* Attendance mockup */
    .attendance-window{
      position:absolute;
      z-index:2;
      width:84%;
      height:73%;
      left:50%;
      bottom:-10%;
      transform:translateX(-50%);
      border-radius:24px 24px 0 0;
      background:#0e0f13;
      border:7px solid #24272b;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 32px 50px rgba(0,0,0,.34);
      overflow:hidden;
    }

    .attendance-top{
      height:42px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 13px;
      background:#111217;
      border-bottom:1px solid rgba(255,255,255,.045);
    }

    .attendance-top b{
      font-size:9px;
      color:#f4f4f5;
    }

    .attendance-top span{
      font-size:6px;
      color:#73757f;
    }

    .attendance-body{
      padding:12px 10px;
    }

    .attendance-summary{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:6px;
      margin-bottom:9px;
    }

    .attendance-summary div{
      border-radius:8px;
      background:#1a1b21;
      padding:7px 8px;
      min-height:42px;
    }

    .attendance-summary small{
      display:block;
      color:#777984;
      font-size:5px;
      margin-bottom:4px;
    }

    .attendance-summary strong{
      display:block;
      color:#f1f1f3;
      font-size:10px;
    }

    .register-list{
      display:grid;
      gap:6px;
    }

    .register-row{
      min-height:35px;
      border-radius:8px;
      background:#18191f;
      border:1px solid rgba(255,255,255,.04);
      display:grid;
      grid-template-columns:1fr repeat(4,18px);
      align-items:center;
      gap:5px;
      padding:0 7px;
    }

    .student-line{
      height:6px;
      width:72%;
      border-radius:99px;
      background:#4b4d57;
    }

    .status-dot{
      width:15px;
      height:15px;
      border-radius:50%;
      border:1px solid #454851;
      display:grid;
      place-items:center;
      font-size:6px;
      color:#666975;
    }

    .status-dot.present{
      border-color:rgba(75,194,180,.32);
      background:rgba(75,194,180,.12);
      color:#55cabb;
    }

    @media (max-width:980px){
      .features-page{
        overflow:visible;
        align-items:flex-start;
        padding-top:70px;
      }

      .features-inner{
        min-height:auto;
      }

      .features-title-svg{
        width:min(560px, 80vw);
      }

      .feature-grid{
        grid-template-columns:1fr;
        margin-top:44px;
      }

      .feature-card{
        height:520px;
      }

      .feature-copy,
      .attendance .feature-copy{
        max-width:72%;
      }


    }

    @media (max-width:650px){
      .features-page{
        padding:58px 0 30px;
      }

      .features-title-svg{
        width:94%;
      }

      .features-subtitle{
        width:92%;
        margin-top:10px;
      }

      .feature-grid{
        margin-top:34px;
      }

      .feature-card{
        height:470px;
        border-radius:20px;
      }

      .feature-copy,
      .attendance .feature-copy{
        max-width:100%;
      }


    }

    @media (prefers-reduced-motion:reduce){
      html{
        scroll-behavior:auto;
      }

    }


    /* Home-only dynamic scroll movement */
    .nav{
      --home-nav-y:0px;
      transform:translate3d(0,var(--home-nav-y),0);
      will-change:transform;
    }

    .hero-copy{
      --home-copy-y:0px;
      --home-copy-opacity:1;
      transform:translate3d(0,calc(clamp(-10px, -1vh, -4px) + var(--home-copy-y)),0);
      opacity:var(--home-copy-opacity);
      will-change:transform,opacity;
    }

    .preview-wrap{
      --home-preview-y:0px;
      --home-preview-opacity:1;
      transform:translate3d(0,var(--home-preview-y),0);
      opacity:var(--home-preview-opacity);
      will-change:transform,opacity;
    }

    .scroll-cue{
      --home-cue-y:0px;
      --home-cue-opacity:.9;
      transform:translate3d(-50%,var(--home-cue-y),0);
      opacity:var(--home-cue-opacity);
      will-change:transform,opacity;
    }


    /* Scroll motion applies to the HOME PAGE only.
       The Features page remains completely stationary. */
    .home-parallax{
      --home-scroll-y:0px;
      transform:translate3d(0, var(--home-scroll-y), 0);
      will-change:transform;
      backface-visibility:hidden;
    }

    .features-page .feature-card,
    .features-page .feature-copy,
    .features-page .features-title-svg,
    .features-page .features-subtitle{
      transition:none !important;
      opacity:1 !important;
    }

    @media (prefers-reduced-motion:reduce){
      .home-parallax{
        transform:none !important;
      }
    }


    .secondary-feature-grid{
      width:100%;
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:clamp(14px, 1.5vw, 20px);
      margin-top:clamp(18px, 2vw, 24px);
      padding-bottom:clamp(54px, 8vh, 92px);
    }

    .compact-feature{
      min-height:clamp(330px, 42vh, 430px);
      border-radius:26px;
      position:relative;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.055);
      padding:clamp(23px, 2vw, 30px);
    }

    .compact-feature.contacts{
      background:
        radial-gradient(circle at 76% 78%, rgba(118,102,255,.08), transparent 42%),
        #232231;
      border-color:rgba(118,102,255,.12);
    }

    .compact-feature.reports{
      background:
        radial-gradient(circle at 76% 78%, rgba(255,177,72,.07), transparent 42%),
        #30271f;
      border-color:rgba(255,177,72,.11);
    }

    .compact-feature.backup{
      background:
        radial-gradient(circle at 76% 78%, rgba(83,169,255,.08), transparent 42%),
        #202a33;
      border-color:rgba(83,169,255,.11);
    }

    .compact-feature.insights{
      background:
        radial-gradient(circle at 76% 78%, rgba(112,207,143,.075), transparent 42%),
        #202d26;
      border-color:rgba(112,207,143,.11);
    }

    .compact-feature .feature-copy{
      max-width:64%;
      padding:0;
    }

    .compact-feature .feature-icon{
      margin-bottom:14px;
    }

    .compact-feature.contacts .feature-icon{
      color:#8f83ff;
      background:rgba(143,131,255,.11);
      border:1px solid rgba(143,131,255,.08);
    }

    .compact-feature.reports .feature-icon{
      color:#f1ad5f;
      background:rgba(241,173,95,.11);
      border:1px solid rgba(241,173,95,.08);
    }

    .compact-feature.backup .feature-icon{
      color:#67aef4;
      background:rgba(103,174,244,.11);
      border:1px solid rgba(103,174,244,.08);
    }

    .compact-feature.insights .feature-icon{
      color:#7ccf96;
      background:rgba(124,207,150,.11);
      border:1px solid rgba(124,207,150,.08);
    }

    .mini-feature-ui{
      position:absolute;
      right:-3%;
      bottom:-7%;
      width:52%;
      height:72%;
      border-radius:18px 18px 0 0;
      background:#0f1014;
      border:6px solid #25262c;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 26px 44px rgba(0,0,0,.28);
      overflow:hidden;
    }

    .mini-ui-top{
      height:34px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 10px;
      background:#121318;
      border-bottom:1px solid rgba(255,255,255,.045);
    }

    .mini-ui-top b{
      font-size:7px;
      color:#f4f4f5;
    }

    .mini-ui-top span{
      width:38px;
      height:14px;
      border-radius:5px;
      background:#1c1d23;
      border:1px solid rgba(255,255,255,.04);
    }

    .mini-ui-body{
      padding:9px;
      height:calc(100% - 34px);
    }

    .contact-table{
      display:grid;
      gap:5px;
    }

    .contact-row{
      min-height:28px;
      display:grid;
      grid-template-columns:1fr .9fr .7fr;
      gap:5px;
      align-items:center;
      border-radius:7px;
      background:#18191f;
      padding:0 7px;
    }

    .contact-row span{
      height:5px;
      border-radius:99px;
      background:#50525c;
    }

    .contact-row span:nth-child(2){width:78%}
    .contact-row span:nth-child(3){width:66%}

    .report-preview{
      display:grid;
      grid-template-columns:.86fr 1.14fr;
      gap:7px;
      height:100%;
    }

    .report-side,
    .report-main{
      border-radius:8px;
      background:#18191f;
      border:1px solid rgba(255,255,255,.035);
      padding:7px;
    }

    .report-score{
      width:54px;
      height:54px;
      margin:9px auto 7px;
      border-radius:50%;
      background:conic-gradient(#f1ad5f 78%, #2b2d33 0);
      display:grid;
      place-items:center;
      position:relative;
    }

    .report-score::after{
      content:"";
      position:absolute;
      inset:6px;
      border-radius:50%;
      background:#18191f;
    }

    .report-score b{
      position:relative;
      z-index:1;
      font-size:9px;
    }

    .report-line{
      height:5px;
      border-radius:99px;
      background:#43454f;
      margin:7px 0;
    }

    .report-bars{
      height:88px;
      display:flex;
      align-items:flex-end;
      gap:5px;
      margin-top:9px;
    }

    .report-bars i{
      flex:1;
      border-radius:3px 3px 0 0;
      background:linear-gradient(180deg,#efbd78,#d78737);
    }

    .report-bars i:nth-child(1){height:38%}
    .report-bars i:nth-child(2){height:58%}
    .report-bars i:nth-child(3){height:74%}
    .report-bars i:nth-child(4){height:64%}
    .report-bars i:nth-child(5){height:88%}

    .backup-list{
      display:grid;
      gap:7px;
    }

    .backup-item{
      min-height:48px;
      border-radius:8px;
      background:#18191f;
      border:1px solid rgba(255,255,255,.035);
      padding:8px;
      display:grid;
      grid-template-columns:22px 1fr auto;
      gap:7px;
      align-items:center;
    }

    .backup-file{
      width:22px;
      height:22px;
      border-radius:6px;
      display:grid;
      place-items:center;
      background:rgba(103,174,244,.1);
      color:#67aef4;
      font-size:8px;
    }

    .backup-file svg{
      width:11px;
      height:11px;
      display:block;
    }

    .backup-lines b,
    .backup-lines span{
      display:block;
      height:5px;
      border-radius:99px;
      background:#555762;
    }

    .backup-lines b{
      width:76%;
      margin-bottom:5px;
    }

    .backup-lines span{
      width:48%;
      opacity:.55;
    }

    .restore-pill{
      width:34px;
      height:16px;
      border-radius:99px;
      background:rgba(103,174,244,.1);
      border:1px solid rgba(103,174,244,.12);
    }

    .insight-stack{
      display:grid;
      gap:7px;
    }

    .insight-card-mini{
      min-height:48px;
      border-radius:8px;
      background:#18191f;
      display:grid;
      grid-template-columns:25px 1fr auto;
      align-items:center;
      gap:7px;
      padding:7px;
      border:1px solid rgba(255,255,255,.035);
    }

    .insight-card-mini i{
      width:25px;
      height:25px;
      border-radius:7px;
      background:rgba(124,207,150,.1);
      display:grid;
      place-items:center;
      color:#7ccf96;
      font-style:normal;
      font-size:9px;
    }

    .insight-mini-lines b,
    .insight-mini-lines span{
      display:block;
      height:5px;
      border-radius:99px;
      background:#555762;
    }

    .insight-mini-lines b{
      width:74%;
      margin-bottom:5px;
    }

    .insight-mini-lines span{
      width:52%;
      opacity:.55;
    }

    .insight-mini-value{
      font-size:7px;
      font-weight:800;
      color:#aeb0b7;
    }

    @media (max-width:980px){
      .secondary-feature-grid{
        grid-template-columns:1fr;
      }

      .compact-feature{
        min-height:420px;
      }


    }

    @media (max-width:650px){
      .compact-feature{
        min-height:430px;
        border-radius:20px;
      }


    }


    /* Keep feature text and preview imagery in separate zones */
    .feature-card.grades{
      display:grid;
      grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);
      align-items:stretch;
    }

    .feature-card.grades .feature-copy{
      max-width:none;
      width:100%;
      padding:clamp(24px, 2.2vw, 32px);
      padding-right:clamp(14px, 1.4vw, 22px);
      z-index:4;
    }

    .feature-card.grades .grade-window{
      position:relative;
      right:auto;
      bottom:auto;
      width:calc(100% - clamp(20px, 2vw, 30px));
      height:calc(100% - clamp(70px, 9vh, 95px));
      align-self:end;
      justify-self:end;
      margin:0 clamp(18px, 1.8vw, 26px) clamp(-26px, -2vh, -16px) 0;
    }

    .feature-card.attendance{
      display:flex;
      flex-direction:column;
    }

    .feature-card.attendance .feature-copy{
      max-width:100%;
      width:100%;
      padding:clamp(24px, 2.2vw, 30px);
      padding-bottom:14px;
      position:relative;
      z-index:4;
    }

    .feature-card.attendance .attendance-window{
      position:relative;
      left:auto;
      bottom:auto;
      transform:none;
      width:calc(100% - clamp(34px, 3vw, 48px));
      height:clamp(255px, 42vh, 410px);
      margin:auto auto clamp(-34px, -3vh, -22px);
      flex:0 0 auto;
    }

    .compact-feature{
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(210px, .86fr);
      align-items:stretch;
      padding:0;
    }

    .compact-feature .feature-copy{
      max-width:none;
      width:100%;
      padding:clamp(24px, 2vw, 30px);
      padding-right:clamp(12px, 1.4vw, 20px);
      position:relative;
      z-index:4;
    }

    .compact-feature .mini-feature-ui{
      position:relative;
      right:auto;
      bottom:auto;
      width:calc(100% - clamp(20px, 2vw, 30px));
      height:calc(100% - clamp(56px, 7vh, 78px));
      align-self:end;
      justify-self:end;
      margin:0 clamp(16px, 1.5vw, 22px) clamp(-24px, -2vh, -16px) 0;
    }

    @media (max-width:1150px){
      .feature-card.grades{
        grid-template-columns:minmax(0, .72fr) minmax(0, 1.28fr);
      }

      .compact-feature{
        grid-template-columns:minmax(0, .9fr) minmax(200px, 1.1fr);
      }
    }

    @media (max-width:980px){
      .feature-card.grades,
      .compact-feature{
        grid-template-columns:1fr;
        display:flex;
        flex-direction:column;
      }

      .feature-card.grades .feature-copy,
      .compact-feature .feature-copy{
        padding-right:clamp(24px, 3vw, 34px);
      }

      .feature-card.grades .grade-window{
        position:relative;
        width:calc(100% - 44px);
        height:310px;
        margin:8px auto -28px;
        align-self:auto;
        justify-self:auto;
      }

      .compact-feature .mini-feature-ui{
        position:relative;
        width:calc(100% - 44px);
        height:260px;
        margin:8px auto -24px;
        align-self:auto;
        justify-self:auto;
      }

      .feature-card.attendance .attendance-window{
        width:calc(100% - 44px);
        height:310px;
        margin:8px auto -26px;
      }
    }

    @media (max-width:650px){
      .feature-card.grades .grade-window,
      .feature-card.attendance .attendance-window,
      .compact-feature .mini-feature-ui{
        width:calc(100% - 28px);
      }

      .feature-card.grades .grade-window{
        height:280px;
      }

      .feature-card.attendance .attendance-window{
        height:280px;
      }

      .compact-feature .mini-feature-ui{
        height:245px;
      }
    }


    /* Match all additional feature typography to Grade Management.
       Keep Grade Management and Attendance layouts unchanged. */
    .compact-feature h2{
      margin:0 0 10px;
      color:#fff;
      font-family:"Roboto", Arial, sans-serif;
      font-size:clamp(21px, 1.65vw, 28px);
      font-weight:800;
      letter-spacing:-.025em;
      line-height:1.12;
    }

    .compact-feature p{
      margin:0;
      color:#acabb3;
      font-family:"Roboto", Arial, sans-serif;
      font-size:clamp(12px, .88vw, 15px);
      font-weight:400;
      line-height:1.55;
    }

    /* Give each additional feature panel its own composition. */
    .compact-feature{
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-template-rows:1fr 1fr;
      padding:0;
      min-height:clamp(390px, 46vh, 470px);
    }

    .compact-feature .feature-copy{
      width:auto;
      max-width:none;
      padding:clamp(26px, 2.2vw, 34px);
      position:relative;
      z-index:4;
    }

    .compact-feature .mini-feature-ui{
      position:relative;
      right:auto;
      bottom:auto;
      margin:0;
      z-index:2;
    }

    /* Contacts — text top-left, preview lower-right */
    .compact-feature.contacts .feature-copy{
      grid-column:1;
      grid-row:1;
      align-self:start;
      justify-self:start;
      text-align:left;
    }

    .compact-feature.contacts .mini-feature-ui{
      grid-column:2;
      grid-row:1 / 3;
      width:calc(100% - clamp(20px, 2vw, 30px));
      height:76%;
      align-self:end;
      justify-self:end;
      margin:0 clamp(18px, 1.6vw, 24px) clamp(-24px, -2vh, -16px) 0;
    }

    /* Reports — text centered across the top, preview centered below */
    .compact-feature.reports .feature-copy{
      grid-column:1 / 3;
      grid-row:1;
      width:min(78%, 620px);
      align-self:start;
      justify-self:center;
      text-align:center;
      padding-bottom:10px;
    }

    .compact-feature.reports .feature-icon{
      margin-left:auto;
      margin-right:auto;
    }

    .compact-feature.reports .mini-feature-ui{
      grid-column:1 / 3;
      grid-row:2;
      width:68%;
      height:112%;
      align-self:end;
      justify-self:center;
      margin:0 auto clamp(-26px, -2vh, -17px);
    }

    /* Backup & Restore — text vertically centered on the left */
    .compact-feature.backup .feature-copy{
      grid-column:1;
      grid-row:1 / 3;
      align-self:center;
      justify-self:start;
      text-align:left;
    }

    .compact-feature.backup .mini-feature-ui{
      grid-column:2;
      grid-row:1 / 3;
      width:calc(100% - clamp(20px, 2vw, 30px));
      height:calc(100% - clamp(54px, 7vh, 74px));
      align-self:end;
      justify-self:end;
      margin:0 clamp(18px, 1.6vw, 24px) clamp(-24px, -2vh, -16px) 0;
    }

    /* Insights — text top-right, preview lower-left */
    .compact-feature.insights .feature-copy{
      grid-column:2;
      grid-row:1;
      align-self:start;
      justify-self:end;
      text-align:right;
    }

    .compact-feature.insights .feature-icon{
      margin-left:auto;
    }

    .compact-feature.insights .mini-feature-ui{
      grid-column:1;
      grid-row:1 / 3;
      width:calc(100% - clamp(20px, 2vw, 30px));
      height:70%;
      align-self:end;
      justify-self:start;
      margin:0 0 clamp(-18px, -1.4vh, -12px) clamp(18px, 1.6vw, 24px);
    }

    @media (max-width:980px){
      .compact-feature{
        display:flex;
        flex-direction:column;
        min-height:500px;
      }

      .compact-feature .feature-copy,
      .compact-feature.contacts .feature-copy,
      .compact-feature.reports .feature-copy,
      .compact-feature.backup .feature-copy,
      .compact-feature.insights .feature-copy{
        width:100%;
        text-align:left;
        align-self:auto;
        justify-self:auto;
        padding:clamp(24px, 3vw, 34px);
      }

      .compact-feature.reports .feature-icon,
      .compact-feature.insights .feature-icon{
        margin-left:0;
        margin-right:0;
      }

      .compact-feature .mini-feature-ui,
      .compact-feature.contacts .mini-feature-ui,
      .compact-feature.reports .mini-feature-ui,
      .compact-feature.backup .mini-feature-ui,
      .compact-feature.insights .mini-feature-ui{
        width:calc(100% - 44px);
        height:275px;
        align-self:auto;
        justify-self:auto;
        margin:8px auto -24px;
      }

      .compact-feature.backup .mini-feature-ui{
        height:300px;
        margin:8px auto -28px;
      }

      .compact-feature.insights .mini-feature-ui{
        margin:8px auto -18px;
      }
    }

    @media (max-width:650px){
      .compact-feature{
        min-height:470px;
      }

      .compact-feature .mini-feature-ui,
      .compact-feature.contacts .mini-feature-ui,
      .compact-feature.reports .mini-feature-ui,
      .compact-feature.backup .mini-feature-ui,
      .compact-feature.insights .mini-feature-ui{
        width:calc(100% - 28px);
        height:245px;
      }

      .compact-feature.backup .mini-feature-ui{
        height:262px;
        margin:8px auto -26px;
      }

      .compact-feature.insights .mini-feature-ui{
        height:235px;
      }
    }


    /* Standalone in-file pages */
    .standalone-page{
      display:none;
      min-height:100svh;
      width:100%;
      background:
        radial-gradient(circle at 22% 15%, rgba(255,101,108,.06), transparent 34%),
        radial-gradient(circle at 78% 44%, rgba(113,82,123,.07), transparent 36%),
        #101014;
      color:#fff;
    }

    body.show-standalone .page,
    body.show-standalone .features-page{
      display:none !important;
    }

    body.show-privacy #privacy-page{
      display:block;
    }

    body.show-terms #terms-page{
      display:block;
    }

    body.show-contact #contact-page{
      display:block;
    }

    body.show-faq #faq-page{
      display:block;
    }

    .standalone-nav{
      width:min(var(--site-max), calc(100% - (var(--site-gutter) * 2)));
      min-height:clamp(72px, 9vh, 96px);
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }

    .standalone-nav-links{
      display:flex;
      align-items:center;
      gap:clamp(14px, 2vw, 26px);
      color:#8f909c;
      font-size:12px;
      font-weight:700;
    }

    .standalone-nav-links a{
      white-space:nowrap;
      transition:color .2s ease;
    }

    .standalone-nav-links a:hover,
    .standalone-nav-links a.active{
      color:#fff;
    }

    .privacy-shell{
      width:min(1100px, calc(100% - (var(--site-gutter) * 2)));
      margin:0 auto;
      padding:clamp(46px, 6vh, 68px) 0 88px;
    }

    .privacy-back{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-bottom:28px;
      color:#9a9ca7;
      font-family:"Roboto", Arial, sans-serif;
      font-size:13px;
      font-weight:500;
      transition:color .2s ease, transform .2s ease;
    }

    .privacy-back:hover{
      color:#fff;
      transform:translateX(-2px);
    }

    .privacy-hero{
      max-width:none;
    }

.privacy-hero h1{
      margin:0 0 18px;
      font-family:"Roboto", Arial, sans-serif;
      font-size:clamp(42px, 6vw, 70px);
      line-height:.98;
      letter-spacing:-.055em;
      font-weight:800;
    }

.privacy-layout{
      display:grid;
      grid-template-columns:230px minmax(0, 1fr);
      gap:32px;
      align-items:start;
    }

    .privacy-toc{
      position:sticky;
      top:24px;
      padding:18px;
      border-radius:18px;
      background:rgba(23,24,30,.78);
      border:1px solid rgba(255,255,255,.07);
      backdrop-filter:blur(10px);
    }

    .privacy-toc strong{
      display:block;
      margin-bottom:11px;
      font-family:"Roboto", Arial, sans-serif;
      font-size:12px;
    }

    .privacy-toc a{
      display:block;
      padding:8px 9px;
      border-radius:8px;
      color:#858793;
      font-family:"Roboto", Arial, sans-serif;
      font-size:12px;
      line-height:1.3;
      transition:background .2s ease, color .2s ease;
    }

    .privacy-toc a:hover{
      color:#fff;
      background:#202127;
    }

    .privacy-card{
      border-radius:24px;
      overflow:hidden;
      background:rgba(23,24,30,.86);
      border:1px solid rgba(255,255,255,.07);
    }

    .privacy-section{
      padding:clamp(24px, 3vw, 38px);
      border-bottom:1px solid rgba(255,255,255,.07);
    }

    .privacy-section:last-child{
      border-bottom:0;
    }

    .privacy-section h2{
      margin:0 0 12px;
      font-family:"Roboto", Arial, sans-serif;
      font-size:clamp(21px, 2vw, 28px);
      font-weight:800;
      letter-spacing:-.025em;
    }

    .privacy-section p,
    .privacy-section li{
      color:#a4a5af;
      font-family:"Roboto", Arial, sans-serif;
      font-size:14px;
      line-height:1.72;
    }

    .privacy-section p{
      margin:0 0 13px;
    }

    .privacy-section p:last-child{
      margin-bottom:0;
    }

    .privacy-footer{
      width:min(1100px, calc(100% - (var(--site-gutter) * 2)));
      margin:0 auto;
      padding:28px 0 36px;
      border-top:1px solid rgba(255,255,255,.07);
      color:#777985;
      font-family:"Roboto", Arial, sans-serif;
      font-size:12px;
      display:flex;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
    }

    @media (max-width:860px){
      .standalone-nav-links a:not(.active){
        display:none;
      }

      .privacy-layout{
        grid-template-columns:1fr;
      }

      .privacy-toc{
        position:relative;
        top:auto;
      }
    }


    /* Shared page-heading system: use this for every website page */
    .standard-page-heading{
      width:100%;
      max-width:none;
      margin:0 auto clamp(42px, 5vh, 58px);
      text-align:center;
    }

    .standard-page-title-svg{
      display:block;
      width:min(430px, 48vw);
      height:auto;
      margin:0 auto;
      overflow:visible;
    }

    .standard-page-heading p{
      width:min(720px, 82vw);
      margin:14px auto 0;
      color:#9b9caa;
      font-family:"Roboto", Arial, sans-serif;
      font-size:clamp(13px, .95vw, 16px);
      font-weight:400;
      line-height:1.6;
      text-align:center;
    }

    /* Keep the Features title aligned to the same page-heading position. */
    .features-inner > .features-title-svg{
      margin-top:0;
    }

    .features-subtitle{
      margin-top:14px;
    }

    @media (max-width:650px){
      .standard-page-title-svg{
        width:min(88vw, 430px);
      }

      .standard-page-heading{
        margin-bottom:36px;
      }
    }


    /* Every page uses the exact same top navigation as Home. */
    .standalone-page > .nav{
      width:min(var(--site-max), calc(100% - (var(--site-gutter) * 2)));
      height:clamp(72px, 9vh, 96px);
      margin:0 auto;
    }


    .terms-shell{
      width:min(1100px, calc(100% - (var(--site-gutter) * 2)));
      margin:0 auto;
      padding:clamp(46px, 6vh, 68px) 0 88px;
    }

    .terms-title-svg{
      width:min(510px, 56vw);
    }

    .terms-note{
      margin-top:14px;
      color:#777985;
      font-family:"Roboto", Arial, sans-serif;
      font-size:12px;
      text-align:center;
    }

    @media (max-width:650px){
      .terms-title-svg{
        width:min(92vw, 510px);
      }
    }


    .contact-shell{
      width:min(1100px, calc(100% - (var(--site-gutter) * 2)));
      margin:0 auto;
      padding:clamp(46px, 6vh, 68px) 0 88px;
    }

    .contact-title-svg{
      width:min(350px, 42vw);
    }

    .contact-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:18px;
      margin-top:28px;
    }

    .contact-card{
      min-height:220px;
      border-radius:22px;
      padding:26px;
      background:#17181e;
      border:1px solid rgba(255,255,255,.065);
      position:relative;
      overflow:hidden;
    }

    .contact-card::after{
      content:"";
      position:absolute;
      width:180px;
      height:180px;
      right:-70px;
      bottom:-90px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,101,108,.08), transparent 66%);
      pointer-events:none;
    }

    .contact-card-icon{
      width:40px;
      height:40px;
      border-radius:11px;
      display:grid;
      place-items:center;
      margin-bottom:15px;
      color:#ff6f77;
      background:rgba(255,101,108,.10);
      border:1px solid rgba(255,101,108,.10);
    }

    .contact-card-icon svg{
      width:19px;
      height:19px;
    }

    .contact-card h2{
      margin:0 0 10px;
      font-family:"Roboto", Arial, sans-serif;
      font-size:21px;
      font-weight:800;
      letter-spacing:-.025em;
    }

    .contact-card p,
    .contact-card li{
      color:#9fa0aa;
      font-family:"Roboto", Arial, sans-serif;
      font-size:14px;
      line-height:1.65;
    }

    .contact-card p{
      margin:0;
    }

    .contact-card ul{
      margin:11px 0 0;
      padding-left:18px;
    }

    .contact-card li + li{
      margin-top:6px;
    }

    .contact-wide{
      grid-column:1 / -1;
      min-height:auto;
      display:grid;
      grid-template-columns:1.2fr .8fr;
      align-items:center;
      gap:28px;
    }

    .contact-wide .contact-card-icon{
      margin-bottom:12px;
    }

    .contact-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
    }

    .contact-button{
      min-height:44px;
      padding:0 17px;
      border-radius:9px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-family:"Roboto", Arial, sans-serif;
      font-size:13px;
      font-weight:700;
      transition:transform .2s ease, background .2s ease, border-color .2s ease;
    }

    .contact-button.primary{
      color:#fff;
      background:#ff656c;
      border:1px solid #ff656c;
    }

    .contact-button.secondary{
      color:#dddde3;
      background:#1f2026;
      border:1px solid rgba(255,255,255,.08);
    }

    .contact-button:hover{
      transform:translateY(-2px);
    }

    .contact-developer{
      margin-top:18px;
      padding:18px 20px;
      border-radius:18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      background:rgba(23,24,30,.86);
      border:1px solid rgba(255,255,255,.065);
    }

    .contact-developer strong{
      display:inline;
      margin:0;
      font-family:"Roboto", Arial, sans-serif;
      font-size:14px;
    }

    .contact-developer-inline{
      display:flex;
      align-items:center;
      gap:7px;
      min-width:0;
      flex-wrap:wrap;
    }

    .contact-separator{
      color:#555862 !important;
      font-size:11px !important;
    }

    .contact-developer span{
      color:#858793;
      font-family:"Roboto", Arial, sans-serif;
      font-size:12px;
    }

    .contact-email{
      display:inline;
      margin-top:0;
      color:#ff777e;
      font-family:"Roboto", Arial, sans-serif;
      font-size:13px;
      font-weight:500;
      transition:color .2s ease;
    }

    .contact-email:hover{
      color:#ffffff;
    }

    .contact-response{
      color:#777985;
      font-family:"Roboto", Arial, sans-serif;
      font-size:12px;
      text-align:right;
    }

    @media (max-width:760px){
      .contact-title-svg{
        width:min(78vw, 350px);
      }

      .contact-grid{
        grid-template-columns:1fr;
      }

      .contact-wide{
        grid-column:auto;
        grid-template-columns:1fr;
      }

      .contact-actions{
        justify-content:flex-start;
      }

      .contact-developer{
        align-items:flex-start;
        flex-direction:column;
      }

      .contact-response{
        text-align:left;
      }
    }


    .faq-shell{
      width:min(1040px, calc(100% - (var(--site-gutter) * 2)));
      margin:0 auto;
      padding:clamp(46px, 6vh, 68px) 0 92px;
    }

    .faq-title-svg{
      width:min(220px, 28vw);
    }

    .faq-list{
      width:min(850px, 100%);
      margin:0 auto;
      display:grid;
      gap:clamp(30px, 4vw, 44px);
    }

    .faq-item{
      display:grid;
      gap:14px;
    }

    .faq-question-row{
      display:flex;
      align-items:flex-end;
      gap:11px;
    }

    .faq-question-row:nth-child(odd){
      justify-content:flex-start;
    }

    .faq-avatar{
      width:34px;
      height:34px;
      border-radius:50%;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      background:#202127;
      border:1px solid rgba(255,255,255,.07);
      color:#ff7279;
      font-family:"Roboto", Arial, sans-serif;
      font-size:10px;
      font-weight:800;
    }

    .faq-bubble{
      position:relative;
      max-width:min(690px, 82%);
      padding:14px 18px;
      border-radius:18px 18px 18px 6px;
      background:#202127;
      border:1px solid rgba(255,255,255,.07);
      box-shadow:0 10px 26px rgba(0,0,0,.16);
      color:#f2f2f4;
      font-family:"Roboto", Arial, sans-serif;
      font-size:14px;
      font-weight:700;
      line-height:1.45;
    }

    .faq-bubble::after{
      content:"";
      position:absolute;
      left:-7px;
      bottom:8px;
      width:14px;
      height:14px;
      background:#202127;
      border-left:1px solid rgba(255,255,255,.07);
      border-bottom:1px solid rgba(255,255,255,.07);
      transform:rotate(45deg);
      border-radius:0 0 0 3px;
    }

    .faq-answer{
      margin-left:45px;
      max-width:760px;
      color:#9fa0aa;
      font-family:"Roboto", Arial, sans-serif;
      font-size:14px;
      font-weight:400;
      line-height:1.72;
    }

    .faq-answer strong{
      color:#ececf0;
      font-weight:600;
    }

    .faq-answer a{
      color:#ff737a;
      font-weight:500;
    }

    .faq-answer a:hover{
      color:#fff;
    }

    .faq-divider{
      width:100%;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
      margin-top:4px;
    }

    .faq-footer-note{
      width:min(850px, 100%);
      margin:52px auto 0;
      border-radius:20px;
      padding:24px 26px;
      background:#17181e;
      border:1px solid rgba(255,255,255,.065);
      text-align:center;
    }

    .faq-footer-note strong{
      display:block;
      margin-bottom:7px;
      color:#f2f2f4;
      font-family:"Roboto", Arial, sans-serif;
      font-size:16px;
      font-weight:800;
    }

    .faq-footer-note p{
      margin:0;
      color:#90929d;
      font-family:"Roboto", Arial, sans-serif;
      font-size:13px;
      line-height:1.6;
    }

    .faq-footer-note a{
      color:#ff737a;
      font-weight:600;
    }

    @media (max-width:650px){
      .faq-title-svg{
        width:min(55vw, 220px);
      }

      .faq-bubble{
        max-width:calc(100% - 46px);
        font-size:13px;
      }

      .faq-answer{
        margin-left:0;
        padding-left:45px;
        font-size:13px;
      }
    }


    /* =========================================================
       MOBILE / PHONE LAYOUT
       These rules ONLY apply to phone-sized or phone-shaped views.
       Desktop/PC styling above remains unchanged.
       ========================================================= */
    @media (max-width: 760px), (max-aspect-ratio: 3/4) and (max-width: 980px){

      html{
        scroll-snap-type:none !important;
      }

      body{
        overflow-x:hidden;
      }

      /* ----- Shared navigation ----- */
      .nav,
      .standalone-page > .nav{
        width:100%;
        min-height:64px;
        height:auto;
        padding:12px 16px;
        gap:14px;
        align-items:center;
        overflow:hidden;
      }

      .brand{
        gap:8px;
        flex:0 0 auto;
      }

      .brand-app-icon{
        width:26px;
        height:26px;
        border-radius:7px;
      }

      .brand-title-svg{
        width:118px;
      }

      .nav-links{
        flex:1 1 auto;
        justify-content:flex-start;
        gap:18px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:5px 2px;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
        mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
      }

      .nav-links::-webkit-scrollbar{
        display:none;
      }

      .nav-links a{
        display:inline-flex !important;
        flex:0 0 auto;
        font-size:11px;
      }

      .support-link{
        gap:5px;
      }

      .support-cup{
        width:13px;
        height:13px;
      }

      /* ----- Home ----- */
      .page{
        min-height:100svh;
      }

      .hero{
        width:calc(100% - 32px);
        min-height:auto;
        grid-template-columns:1fr;
        gap:28px;
        padding:36px 0 52px;
        text-align:left;
      }

      .hero-copy{
        width:100%;
        transform:none;
      }

      .eyebrow{
        min-height:32px;
        padding:0 13px;
        margin-bottom:20px;
        font-size:10px;
        gap:8px;
      }

      .hero-title-svg{
        width:min(100%, 460px);
        margin:0;
      }

      .sub{
        max-width:100%;
        margin:20px 0 24px;
        font-size:14px;
        line-height:1.6;
      }

      .cta-row{
        justify-content:flex-start;
        gap:10px;
      }

      .store-button{
        min-width:0;
        height:46px;
        padding:0 13px;
      }

      .store-copy small{
        font-size:7px;
      }

      .store-copy strong{
        font-size:14px;
      }

      .preview-wrap{
        width:100%;
        min-height:320px;
        justify-content:center;
        padding:8px 0 24px;
      }

      .preview-wrap::before{
        width:130vw;
        height:100%;
      }

      .device{
        width:min(88vw, 470px);
        padding-bottom:26px;
      }

      .device::before{
        width:112%;
        height:20px;
      }

      .device::after{
        width:76px;
        height:4px;
        bottom:7px;
      }

      .app-body{
        grid-template-columns:70px 1fr;
      }

      .side{
        padding:8px 5px;
      }

      .side-item{
        padding:0 5px;
        gap:4px;
        font-size:5.5px;
      }

      .dashboard{
        padding:10px;
      }

      .home-grid{
        grid-template-columns:repeat(3, minmax(0,1fr));
        grid-template-rows:96px 105px;
        gap:5px;
        height:206px;
      }

      .home-card-header{
        height:26px;
        padding:7px 7px 0;
      }

      .home-card-title{
        font-size:5.7px;
        gap:4px;
      }

      .home-card-icon{
        width:10px;
        height:10px;
      }

      .profile-body{
        height:70px;
        padding-left:56px;
      }

      .profile-portrait{
        left:9px;
        width:40px;
        height:54px;
      }

      .profile-body strong{
        margin-top:9px;
        font-size:6.5px;
      }

      .profile-body span{
        font-size:4.5px;
      }

      .progress-ring{
        width:42px;
        height:42px;
      }

      .progress-ring strong{
        font-size:8px;
      }

      .target-number{
        font-size:18px;
      }

      /* ----- Features ----- */
      .features-page{
        min-height:auto;
        padding:52px 0 40px;
        overflow:visible;
      }

      .features-inner{
        width:calc(100% - 28px);
        min-height:auto;
      }

      .features-title-svg{
        width:min(94%, 520px);
      }

      .features-subtitle{
        width:94%;
        font-size:13px;
        line-height:1.55;
      }

      .feature-grid,
      .secondary-feature-grid{
        grid-template-columns:1fr;
        gap:16px;
        margin-top:34px;
      }

      .secondary-feature-grid{
        margin-top:16px;
        padding-bottom:26px;
      }

      .feature-card,
      .compact-feature{
        width:100%;
        height:auto;
        min-height:0;
        border-radius:20px;
        overflow:hidden;
      }

      .feature-card.grades,
      .feature-card.attendance,
      .compact-feature{
        display:flex;
        flex-direction:column;
      }

      .feature-card .feature-copy,
      .feature-card.grades .feature-copy,
      .feature-card.attendance .feature-copy,
      .compact-feature .feature-copy,
      .compact-feature.contacts .feature-copy,
      .compact-feature.reports .feature-copy,
      .compact-feature.backup .feature-copy,
      .compact-feature.insights .feature-copy{
        width:100%;
        max-width:none;
        padding:24px 22px 16px;
        text-align:left;
        align-self:auto;
        justify-self:auto;
      }

      .feature-card h2,
      .compact-feature h2{
        font-size:22px;
        line-height:1.12;
      }

      .feature-card p,
      .compact-feature p{
        font-size:13px;
        line-height:1.58;
      }

      .feature-card .feature-icon,
      .compact-feature .feature-icon,
      .compact-feature.reports .feature-icon,
      .compact-feature.insights .feature-icon{
        width:38px;
        height:38px;
        margin:0 0 12px 0;
      }

      .grade-window,
      .feature-card.grades .grade-window,
      .attendance-window,
      .feature-card.attendance .attendance-window,
      .mini-feature-ui,
      .compact-feature .mini-feature-ui,
      .compact-feature.contacts .mini-feature-ui,
      .compact-feature.reports .mini-feature-ui,
      .compact-feature.backup .mini-feature-ui,
      .compact-feature.insights .mini-feature-ui{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        transform:none;
        width:calc(100% - 28px);
        height:265px;
        margin:6px auto -12px;
        align-self:auto;
        justify-self:auto;
      }

      .feature-card.grades .grade-window{
        height:285px;
      }

      .feature-card.attendance .attendance-window{
        height:285px;
      }

      .compact-feature.backup .mini-feature-ui{
        height:275px;
      }

      .compact-feature.insights .mini-feature-ui{
        height:260px;
      }

      /* ----- Shared standalone pages ----- */
      .privacy-shell,
      .terms-shell,
      .contact-shell,
      .faq-shell{
        width:calc(100% - 28px);
        padding:38px 0 64px;
      }

      .standard-page-heading{
        margin-bottom:34px;
      }

      .standard-page-title-svg,
      .terms-title-svg,
      .contact-title-svg,
      .faq-title-svg{
        width:min(88vw, 440px);
      }

      .contact-title-svg{
        width:min(72vw, 340px);
      }

      .faq-title-svg{
        width:min(48vw, 220px);
      }

      .standard-page-heading p{
        width:100%;
        margin-top:12px;
        font-size:13px;
        line-height:1.58;
      }

      /* Privacy / Terms */
      .privacy-layout{
        grid-template-columns:1fr;
        gap:18px;
      }

      .privacy-toc{
        position:relative;
        top:auto;
        display:flex;
        gap:7px;
        overflow-x:auto;
        padding:12px;
        border-radius:15px;
        scrollbar-width:none;
      }

      .privacy-toc::-webkit-scrollbar{
        display:none;
      }

      .privacy-toc strong{
        display:none;
      }

      .privacy-toc a{
        flex:0 0 auto;
        padding:8px 10px;
        background:#1d1f25;
        border:1px solid rgba(255,255,255,.05);
        font-size:11px;
      }

      .privacy-card{
        border-radius:18px;
      }

      .privacy-section{
        padding:22px 18px;
      }

      .privacy-section h2{
        font-size:21px;
      }

      .privacy-section p,
      .privacy-section li{
        font-size:13px;
        line-height:1.66;
      }

      .terms-note{
        font-size:11px;
      }

      /* Contact */
      .contact-grid{
        grid-template-columns:1fr;
        gap:14px;
        margin-top:20px;
      }

      .contact-card,
      .contact-wide{
        min-height:0;
        border-radius:18px;
        padding:22px 18px;
      }

      .contact-wide{
        grid-template-columns:1fr;
        gap:20px;
      }

      .contact-actions{
        justify-content:flex-start;
      }

      .contact-button{
        min-height:42px;
        font-size:12px;
      }

      .contact-developer{
        margin-top:14px;
        padding:18px;
        align-items:flex-start;
        flex-direction:column;
      }

      .contact-developer-inline{
        gap:6px;
      }

      .contact-response{
        text-align:left;
        line-height:1.5;
      }

      /* FAQ */
      .faq-list{
        gap:28px;
      }

      .faq-question-row{
        align-items:flex-end;
        gap:9px;
      }

      .faq-avatar{
        width:31px;
        height:31px;
        font-size:9px;
      }

      .faq-bubble{
        max-width:calc(100% - 42px);
        padding:12px 14px;
        border-radius:16px 16px 16px 6px;
        font-size:13px;
        line-height:1.45;
      }

      .faq-answer{
        margin-left:40px;
        padding-left:0;
        font-size:13px;
        line-height:1.66;
      }

      .faq-footer-note{
        margin-top:38px;
        padding:20px 18px;
      }

      /* ----- Footer ----- */
      .privacy-footer{
        width:calc(100% - 28px);
        padding:22px 0 28px;
        flex-direction:column;
        gap:6px;
        font-size:11px;
      }

      /* Avoid desktop motion on phone for a calmer mobile experience */
      .home-parallax{
        transform:none !important;
      }

      .hero-laptop-image{
        width:min(88vw, 470px);
        animation:laptopImageFloatMobile 4.2s cubic-bezier(.45,0,.55,1) infinite;
      }

      @keyframes laptopImageFloatMobile{
        0%,100%{
          transform:perspective(1000px) translateY(0) rotateY(-1deg) rotateX(.5deg);
        }
        50%{
          transform:perspective(1000px) translateY(-6px) rotateY(-1deg) rotateX(.5deg);
        }
      }
    }

    /* Extra-narrow phones */
    @media (max-width: 430px){
      .nav,
      .standalone-page > .nav{
        padding-inline:12px;
      }

      .brand-title-svg{
        width:104px;
      }

      .nav-links{
        gap:14px;
      }

      .hero{
        width:calc(100% - 24px);
        padding-top:28px;
      }

      .eyebrow{
        max-width:100%;
        white-space:nowrap;
        font-size:9px;
      }

      .cta-row{
        width:100%;
      }

      .store-button{
        flex:1 1 145px;
      }

      .hero-laptop-image{
        width:92vw;
      }

      .features-inner,
      .privacy-shell,
      .terms-shell,
      .contact-shell,
      .faq-shell{
        width:calc(100% - 22px);
      }

      .feature-card .feature-copy,
      .compact-feature .feature-copy{
        padding-inline:18px;
      }

      .privacy-section{
        padding-inline:16px;
      }

      .faq-answer{
        margin-left:36px;
      }
    }

    @media (prefers-reduced-motion: reduce){
      .device{
        animation:none !important;
      }
    }


    /* Image-based laptop preview
       Keeps the hero laptop identical across screen sizes. */
    .preview-wrap.image-preview{
      min-width:0;
    }

    .hero-laptop-image{
      display:block;
      width:clamp(390px, 38vw, 570px);
      max-width:100%;
      height:auto;
      position:relative;
      z-index:1;
      user-select:none;
      -webkit-user-drag:none;
      pointer-events:none;
      transform:perspective(1200px) rotateY(-2deg) rotateX(1deg);
      transform-origin:center center;
      filter:drop-shadow(0 38px 45px rgba(0,0,0,.46));
      animation:laptopImageFloat 4.2s cubic-bezier(.45,0,.55,1) infinite;
      will-change:transform;
    }

    @keyframes laptopImageFloat{
      0%,100%{
        transform:perspective(1200px) translateY(0) rotateY(-2deg) rotateX(1deg);
      }
      50%{
        transform:perspective(1200px) translateY(-10px) rotateY(-2deg) rotateX(1deg);
      }
    }

    @media (prefers-reduced-motion: reduce){
      .hero-laptop-image{
        animation:none !important;
      }
    }


    /* Change Log */
    body.show-changelog #changelog-page{display:block}

    .changelog-shell{
      width:min(1120px, calc(100% - (var(--site-gutter) * 2)));
      margin:0 auto;
      padding:clamp(46px,6vh,68px) 0 92px;
    }

    .changelog-title-svg{width:min(420px,48vw)}

    .changelog-summary{
      width:min(900px,100%);
      margin:0 auto 24px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:15px 18px;
      border-radius:16px;
      background:rgba(23,24,30,.84);
      border:1px solid rgba(255,255,255,.065);
    }

    .changelog-summary span{
      color:#91939e;
      font-family:"Roboto",Arial,sans-serif;
      font-size:12px;
      line-height:1.5;
    }

    .changelog-summary strong{
      color:#f1f1f3;
      font-family:"Roboto",Arial,sans-serif;
      font-size:12px;
      font-weight:700;
      white-space:nowrap;
    }

    .changelog-list{
      width:min(900px,100%);
      margin:0 auto;
      position:relative;
      display:grid;
      gap:18px;
    }

    .changelog-list::before{
      content:"";
      position:absolute;
      left:22px;
      top:30px;
      bottom:30px;
      width:1px;
      background:linear-gradient(180deg,rgba(255,101,108,.08),rgba(255,101,108,.28) 12%,rgba(255,255,255,.07) 88%,rgba(255,255,255,.02));
    }

    .changelog-entry{
      position:relative;
      display:grid;
      grid-template-columns:46px minmax(0,1fr);
      gap:16px;
      align-items:start;
    }

    .changelog-dot{
      width:13px;
      height:13px;
      margin:23px auto 0;
      border-radius:50%;
      background:#ff656c;
      border:3px solid #17181e;
      box-shadow:0 0 0 1px rgba(255,101,108,.28),0 0 20px rgba(255,101,108,.14);
      position:relative;
      z-index:2;
    }

    .changelog-card{
      border-radius:22px;
      padding:23px 24px 22px;
      background:#17181e;
      border:1px solid rgba(255,255,255,.065);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
    }

    .changelog-card.current{
      border-color:rgba(255,101,108,.16);
      background:radial-gradient(circle at 94% 18%,rgba(255,101,108,.055),transparent 28%),#17181e;
    }

    .changelog-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-bottom:13px;
      flex-wrap:wrap;
    }

    .changelog-date{
      display:inline-flex;
      align-items:center;
      min-height:29px;
      padding:0 11px;
      border-radius:999px;
      color:#ff7a81;
      background:rgba(255,101,108,.09);
      border:1px solid rgba(255,101,108,.12);
      font-family:"Roboto",Arial,sans-serif;
      font-size:11px;
      font-weight:700;
    }

    .changelog-tag{
      color:#71737d;
      font-family:"Roboto",Arial,sans-serif;
      font-size:10px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.075em;
    }

    .changelog-card h2{
      margin:0 0 13px;
      color:#f5f5f6;
      font-family:"Roboto",Arial,sans-serif;
      font-size:clamp(20px,1.6vw,25px);
      font-weight:800;
      letter-spacing:-.025em;
      line-height:1.15;
    }

    .changelog-card ul{
      margin:0;
      padding-left:19px;
      display:grid;
      gap:8px;
    }

    .changelog-card li{
      color:#a1a2ac;
      font-family:"Roboto",Arial,sans-serif;
      font-size:13px;
      line-height:1.62;
      padding-left:2px;
    }

    .changelog-card li::marker{color:#ff6971}
    .changelog-card b{color:#e7e7ea;font-weight:600}

    .changelog-footer-note{
      width:min(900px,100%);
      margin:22px auto 0;
      color:#747681;
      font-family:"Roboto",Arial,sans-serif;
      font-size:11px;
      line-height:1.6;
      text-align:center;
    }

    @media (max-width:760px), (max-aspect-ratio:3/4) and (max-width:980px){
      .changelog-shell{width:calc(100% - 28px);padding:38px 0 64px}
      .changelog-title-svg{width:min(82vw,400px)}
      .changelog-summary{align-items:flex-start;flex-direction:column;gap:7px;padding:14px 15px}
      .changelog-summary strong{white-space:normal}
      .changelog-list{gap:14px}
      .changelog-list::before{left:13px}
      .changelog-entry{grid-template-columns:28px minmax(0,1fr);gap:10px}
      .changelog-dot{width:11px;height:11px;margin-top:22px}
      .changelog-card{padding:20px 17px;border-radius:18px}
      .changelog-card h2{font-size:20px}
      .changelog-card li{font-size:12.5px}
    }


    /* Reference-inspired shared footer */
    .site-footer{
      position:relative;width:100%;margin-top:clamp(58px,7vw,92px);overflow:hidden;
      border-top:1px solid rgba(255,255,255,.07);
      background:radial-gradient(circle at 14% 8%,rgba(255,101,108,.055),transparent 30%),#0f0f13;
    }
    .site-footer::before{
      content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;
      background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
      background-size:54px 54px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 96%);
    }
    .site-footer::after{
      content:"";position:absolute;width:430px;height:230px;right:4%;bottom:-120px;border-radius:50%;
      background:radial-gradient(circle,rgba(255,101,108,.075),transparent 68%);filter:blur(10px);pointer-events:none;
    }
    .site-footer-inner{
      position:relative;z-index:1;width:min(1180px,calc(100% - (var(--site-gutter) * 2)));margin:0 auto;
      padding:clamp(42px,5.4vw,68px) 0 28px;display:grid;
      grid-template-columns:minmax(290px,1.8fr) repeat(3,minmax(125px,.7fr));gap:clamp(34px,5vw,72px);align-items:start;
    }
    .site-footer-brand{max-width:390px}
    .site-footer-logo{display:inline-flex;align-items:center;gap:11px;color:#f4f4f6;text-decoration:none;margin-bottom:15px}
    .site-footer-mark{
      width:30px;height:30px;border-radius:8px;display:block;object-fit:cover;flex:0 0 auto;
      box-shadow:0 8px 24px rgba(0,0,0,.28),0 0 22px rgba(255,101,108,.12);
    }
    .site-footer-logo span:last-child{font:800 17px/1 "Roboto",Arial,sans-serif;letter-spacing:-.025em}
    .site-footer-description{max-width:360px;margin:0 0 22px;color:#858793;font:400 12.5px/1.7 "Roboto",Arial,sans-serif}
    .site-footer-copyright{color:#62646e;font:400 11px/1.55 "Roboto",Arial,sans-serif}
    .site-footer-column h3{margin:4px 0 17px;color:#c8c9cf;font:800 10px/1 "Roboto",Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase}
    .site-footer-column nav{display:grid;gap:12px}
    .site-footer-column a{width:max-content;max-width:100%;color:#777985;font:400 12px/1.4 "Roboto",Arial,sans-serif;text-decoration:none;transition:color .2s ease,transform .2s ease}
    .site-footer-column a:hover{color:#ff747b;transform:translateX(2px)}
    .site-footer-bottom{
      position:relative;z-index:1;width:min(1180px,calc(100% - (var(--site-gutter) * 2)));margin:0 auto;padding:18px 0 24px;
      border-top:1px solid rgba(255,255,255,.055);display:flex;align-items:center;justify-content:space-between;gap:18px;
      color:#555761;font:400 10.5px/1.4 "Roboto",Arial,sans-serif;
    }
    .site-footer-bottom a{color:#686a74;text-decoration:none}.site-footer-bottom a:hover{color:#ff747b}
    body.show-standalone .main-site-footer{display:none}
    .standalone-page .site-footer{margin-top:clamp(50px,6vw,80px)}
    @media(max-width:880px){.site-footer-inner{grid-template-columns:1.3fr repeat(3,minmax(100px,.65fr));gap:30px}}
    @media(max-width:760px),(max-aspect-ratio:3/4) and (max-width:980px){
      .site-footer{margin-top:48px}.site-footer-inner{width:calc(100% - 30px);padding:38px 0 24px;grid-template-columns:1fr 1fr;gap:34px 26px}
      .site-footer-brand{grid-column:1/-1;max-width:none}.site-footer-description{max-width:520px;font-size:12px}.site-footer-column h3{margin-bottom:14px}
      .site-footer-column a{font-size:11.5px}.site-footer-bottom{width:calc(100% - 30px);padding:17px 0 23px;align-items:flex-start;flex-direction:column;gap:6px}
    }
    @media(max-width:430px){.site-footer-inner{grid-template-columns:1fr 1fr;gap:30px 18px}.site-footer-mark{width:28px;height:28px}.site-footer-logo span:last-child{font-size:16px}}


    /* =========================================================
       HOME / FEATURES PAGE SEPARATION
       Home and Features now behave as separate in-file pages.
       ========================================================= */
    body:not(.show-standalone):not(.show-features) .features-page{
      display:none !important;
    }

    body.show-features .page,
    body.show-features .home-page-footer,
    body.show-features .standalone-page{
      display:none !important;
    }

    body.show-features .features-page{
      display:block !important;
      min-height:100svh;
      padding:0;
    }

    body.show-features .features-page > .nav{
      display:flex;
      transform:none !important;
    }

    body.show-features .features-inner{
      padding-top:clamp(48px, 6vh, 70px);
      padding-bottom:clamp(24px, 4vh, 46px);
    }

    .features-page-footer{
      margin-top:clamp(50px, 6vw, 80px);
    }

    .home-page-footer{
      margin-top:0;
    }

    body:not(.show-features) .scroll-cue{
      display:none;
    }

    @media (max-width:760px), (max-aspect-ratio:3/4) and (max-width:980px){
      body.show-features .features-inner{
        padding-top:38px;
      }
    }


    /* =========================================================
       ABOUT / CREATOR PAGE
       Reference-inspired editorial profile layout.
       ========================================================= */
    body.show-about #about-page{
      display:block;
    }

    .about-shell{
      width:min(1160px, calc(100% - (var(--site-gutter) * 2)));
      margin:0 auto;
      padding:clamp(48px, 6vh, 76px) 0 86px;
    }

    .about-page-heading{
      text-align:center;
      margin-bottom:clamp(34px, 5vw, 58px);
    }

    .about-page-heading .about-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:30px;
      padding:0 12px;
      border-radius:999px;
      background:rgba(255,101,108,.08);
      border:1px solid rgba(255,101,108,.12);
      color:#ff747b;
      font-family:"Roboto", Arial, sans-serif;
      font-size:10px;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      margin-bottom:16px;
    }

    .about-page-heading h1{
      margin:0;
      color:#f6f6f7;
      font-family:"Roboto", Arial, sans-serif;
      font-size:clamp(44px, 5.4vw, 76px);
      font-weight:800;
      line-height:.98;
      letter-spacing:-.055em;
    }

    .about-page-heading h1 span{
      color:#ff656c;
    }

    .about-page-heading p{
      width:min(670px, 100%);
      margin:17px auto 0;
      color:#8f919c;
      font-family:"Roboto", Arial, sans-serif;
      font-size:13px;
      line-height:1.7;
    }

    .creator-profile{
      position:relative;
      width:min(1010px, 100%);
      margin:0 auto;
      display:grid;
      grid-template-columns:minmax(0, 1.35fr) minmax(300px, .75fr);
      gap:clamp(42px, 6vw, 88px);
      align-items:center;
      padding:clamp(38px, 5vw, 64px);
      border-radius:28px;
      background:
        radial-gradient(circle at 86% 22%, rgba(255,101,108,.055), transparent 29%),
        #17181d;
      border:1px solid rgba(255,255,255,.065);
      box-shadow:0 26px 70px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.018);
      overflow:hidden;
    }

    .creator-profile::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.18;
      background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
      background-size:46px 46px;
      mask-image:linear-gradient(90deg, rgba(0,0,0,.65), transparent 74%);
    }

    .creator-copy,
    .creator-visual{
      position:relative;
      z-index:1;
    }

    .creator-label{
      margin:0 0 14px;
      color:#ff6e75;
      font-family:"Roboto", Arial, sans-serif;
      font-size:10px;
      font-weight:800;
      letter-spacing:.13em;
      text-transform:uppercase;
    }

    .creator-copy h2{
      margin:0 0 20px;
      max-width:570px;
      color:#f5f5f6;
      font-family:"Roboto", Arial, sans-serif;
      font-size:clamp(29px, 3vw, 43px);
      font-weight:800;
      line-height:1.08;
      letter-spacing:-.045em;
    }

    .creator-copy p{
      margin:0 0 15px;
      max-width:620px;
      color:#9a9ca6;
      font-family:"Roboto", Arial, sans-serif;
      font-size:13px;
      line-height:1.78;
    }

    .creator-copy p strong{
      color:#e9e9ec;
      font-weight:600;
    }

    .creator-signature{
      display:flex;
      align-items:center;
      gap:13px;
      margin-top:27px;
      padding-top:22px;
      border-top:1px solid rgba(255,255,255,.06);
    }

    .creator-signature-mark{
      width:38px;
      height:38px;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      border-radius:12px;
      background:rgba(255,101,108,.1);
      border:1px solid rgba(255,101,108,.13);
      color:#ff747b;
      font-family:"Roboto", Arial, sans-serif;
      font-size:12px;
      font-weight:800;
    }

    .creator-signature strong{
      display:block;
      margin-bottom:3px;
      color:#f1f1f3;
      font-family:"Roboto", Arial, sans-serif;
      font-size:13px;
      font-weight:700;
    }

    .creator-signature span{
      display:block;
      color:#777985;
      font-family:"Roboto", Arial, sans-serif;
      font-size:11px;
      line-height:1.45;
    }

    .creator-visual{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      min-width:0;
    }

    .creator-photo-frame{
      position:relative;
      width:min(330px, 28vw);
      aspect-ratio:1;
      border-radius:50%;
      overflow:hidden;
      background:#1f2024;
      border:1px solid rgba(255,255,255,.075);
      box-shadow:0 24px 55px rgba(0,0,0,.35), 0 0 0 9px rgba(255,255,255,.018);
    }

    .creator-photo-frame::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      box-shadow:inset 0 0 50px rgba(0,0,0,.12);
      pointer-events:none;
    }

    .creator-photo{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      object-position:center 45%;
      filter:contrast(1.02);
    }

    .creator-name{
      margin-top:18px;
      color:#f3f3f5;
      font-family:"Roboto", Arial, sans-serif;
      font-size:14px;
      font-weight:700;
      text-align:center;
    }

    .creator-role{
      margin-top:5px;
      color:#72747f;
      font-family:"Roboto", Arial, sans-serif;
      font-size:10.5px;
      font-weight:500;
      text-align:center;
    }

    .creator-contact-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      margin-top:18px;
      padding:0 15px;
      border-radius:12px;
      color:#f6f6f7;
      background:#222329;
      border:1px solid rgba(255,255,255,.075);
      font-family:"Roboto", Arial, sans-serif;
      font-size:11px;
      font-weight:600;
      text-decoration:none;
      transition:border-color .2s ease, color .2s ease, transform .2s ease;
    }

    .creator-contact-link:hover{
      color:#ff747b;
      border-color:rgba(255,101,108,.22);
      transform:translateY(-1px);
    }

    @media (max-width:820px){
      .creator-profile{
        grid-template-columns:1fr;
        gap:36px;
      }

      .creator-visual{
        grid-row:1;
      }

      .creator-photo-frame{
        width:min(310px, 66vw);
      }

      .creator-copy{
        text-align:center;
      }

      .creator-copy h2,
      .creator-copy p{
        margin-left:auto;
        margin-right:auto;
      }

      .creator-signature{
        justify-content:center;
        text-align:left;
      }
    }

    @media (max-width:760px), (max-aspect-ratio:3/4) and (max-width:980px){
      .about-shell{
        width:calc(100% - 28px);
        padding:38px 0 64px;
      }

      .about-page-heading{
        margin-bottom:30px;
      }

      .about-page-heading h1{
        font-size:clamp(40px, 12vw, 58px);
      }

      .about-page-heading p{
        font-size:12.5px;
      }

      .creator-profile{
        padding:28px 20px 30px;
        border-radius:22px;
      }

      .creator-copy h2{
        font-size:29px;
      }

      .creator-copy p{
        font-size:12.5px;
      }
    }


    /* About heading uses the same custom display treatment as the other page headers. */
    .about-page-heading{
      width:100%;
      max-width:none;
      margin:0 auto clamp(42px, 5vh, 58px);
      text-align:center;
    }

    .about-page-heading .about-kicker{
      margin-left:auto;
      margin-right:auto;
    }

    .about-title-svg{
      display:block;
      width:min(650px, 66vw);
      height:auto;
      margin:0 auto;
      overflow:visible;
    }

    .about-page-heading p{
      width:min(720px, 82vw);
      margin:14px auto 0;
      text-align:center;
    }

    @media (max-width:650px){
      .about-title-svg{
        width:min(92vw, 650px);
      }
    }


/* =========================================================
   MOBILE HORIZONTAL SCROLL LOCK
   Prevents the page and mobile navigation/TOC from scrolling
   sideways while leaving the desktop layout unchanged.
   ========================================================= */
@media (max-width: 760px), (max-aspect-ratio: 3/4) and (max-width: 980px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
    overscroll-behavior-x:none;
  }

  body > *,
  main,
  section,
  header,
  footer{
    max-width:100%;
  }

  img,
  svg,
  video,
  canvas{
    max-width:100%;
  }

  /* Mobile navigation now wraps instead of scrolling sideways. */
  .nav,
  .standalone-page > .nav{
    flex-wrap:wrap;
    overflow:hidden !important;
  }

  .nav-links{
    width:100%;
    flex:1 1 100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 14px;
    overflow:visible !important;
    padding:5px 0 2px;
    mask-image:none !important;
    -webkit-mask-image:none !important;
    -webkit-overflow-scrolling:auto;
  }

  .nav-links a{
    flex:0 0 auto;
    white-space:nowrap;
  }

  /* Privacy/Terms navigation wraps instead of becoming a sideways strip. */
  .privacy-toc{
    display:flex;
    flex-wrap:wrap;
    overflow:visible !important;
    gap:7px;
  }

  .privacy-toc a{
    flex:0 1 auto;
  }

  /* Defensive containment for larger decorative/preview elements. */
  .hero,
  .features-inner,
  .privacy-shell,
  .terms-shell,
  .contact-shell,
  .faq-shell,
  .about-shell,
  .site-footer-inner,
  .site-footer-bottom{
    max-width:100%;
  }
}

@media (max-width:430px){
  .nav-links{
    gap:7px 11px;
  }

  .nav-links a{
    font-size:10.5px;
  }
}


/* =========================================================
   MOBILE HORIZONTAL SCROLL — HARD LOCK v2
   iPhone/Safari-safe containment. Vertical scrolling remains enabled.
   ========================================================= */
@media (max-width: 760px), (max-aspect-ratio: 3/4) and (max-width: 980px){

  html{
    width:100% !important;
    max-width:100% !important;
    overflow-x:clip !important;
    overscroll-behavior-x:none !important;
    touch-action:pan-y;
  }

  body{
    position:relative !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow-x:clip !important;
    overscroll-behavior-x:none !important;
    touch-action:pan-y;
  }

  *,
  *::before,
  *::after{
    box-sizing:border-box;
  }

  .page,
  .features-page,
  .standalone-page,
  .hero,
  .hero-copy,
  .preview-wrap,
  .features-inner,
  .privacy-shell,
  .terms-shell,
  .contact-shell,
  .faq-shell,
  .about-shell,
  .site-footer,
  .site-footer-inner,
  .site-footer-bottom{
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:clip;
  }

  .page,
  .features-page,
  .standalone-page{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    transform:none !important;
  }

  .hero{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    width:calc(100% - 24px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
  }

  .hero-copy,
  .home-parallax{
    position:relative;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  .hero-title-svg,
  .features-title-svg,
  .standard-page-title-svg,
  .about-title-svg{
    display:block;
    width:100% !important;
    max-width:100% !important;
    height:auto;
    margin-left:0 !important;
    margin-right:auto !important;
    transform:none !important;
  }

  .sub,
  .standard-page-heading p,
  .about-page-heading p{
    width:100% !important;
    max-width:100% !important;
  }

  .cta-row{
    width:100%;
    min-width:0;
    flex-wrap:wrap;
  }

  .store-button{
    max-width:100%;
  }

  .preview-wrap{
    position:relative;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    transform:none !important;
  }

  /* The old 130vw glow was one source of iOS overflow. */
  .preview-wrap::before{
    left:50% !important;
    width:100% !important;
    max-width:100% !important;
    transform:translateX(-50%) !important;
  }

  .hero-laptop-image{
    display:block;
    width:min(92%, 470px) !important;
    max-width:92% !important;
    height:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .nav,
  .standalone-page > .nav{
    position:relative;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    overflow-x:clip !important;
  }

  .nav-links{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    flex:1 1 100% !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    overflow:visible !important;
    transform:none !important;
  }

  .privacy-toc{
    width:100%;
    max-width:100%;
    overflow:visible !important;
    flex-wrap:wrap !important;
  }

  .feature-grid,
  .secondary-feature-grid,
  .creator-profile,
  .contact-grid,
  .privacy-layout,
  .changelog-entry{
    min-width:0 !important;
    max-width:100% !important;
  }

  .feature-card,
  .compact-feature,
  .privacy-card,
  .contact-card,
  .contact-wide,
  .changelog-card{
    min-width:0 !important;
    max-width:100% !important;
  }

  img,
  svg,
  video,
  canvas{
    max-width:100% !important;
  }
}

@media (max-width:430px){
  .hero{
    width:calc(100% - 20px) !important;
  }

  .hero-laptop-image{
    width:94% !important;
    max-width:94% !important;
  }
}


/* =========================================================
   MOBILE TOP NAVIGATION v3
   Brand stays left. Features / FAQ / Support stay right.
   Hamburger opens the remaining pages above all content.
   ========================================================= */
.mobile-more-nav{
  display:none;
}

@media (max-width:760px), (max-aspect-ratio:3/4) and (max-width:980px){

  .nav,
  .standalone-page > .nav{
    position:relative !important;
    z-index:2147480000 !important;
    width:100% !important;
    min-height:62px !important;
    height:auto !important;
    padding:10px 12px !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    overflow:visible !important;
    isolation:isolate;
  }

  /* Left side: app icon + Teacher Dashboard stays intact. */
  .brand{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:132px !important;
    gap:7px !important;
    overflow:hidden;
  }

  .brand-app-icon{
    width:25px !important;
    height:25px !important;
    flex:0 0 25px !important;
    border-radius:7px !important;
  }

  .brand-title-svg{
    width:96px !important;
    max-width:96px !important;
    height:auto !important;
    flex:0 1 auto !important;
  }

  /* Right side: only the most important visible links. */
  .nav-links{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    flex:0 1 auto !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:9px !important;
    padding:0 !important;
    margin-left:auto !important;
    overflow:visible !important;
    mask-image:none !important;
    -webkit-mask-image:none !important;
  }

  .nav-links > a{
    display:none !important;
  }

  .nav-links > a[href="#features"],
  .nav-links > a[href="#faq"],
  .nav-links > a.support-link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    min-height:38px !important;
    padding:0 !important;
    margin:0 !important;
    color:#9698a3 !important;
    font-family:"Roboto",Arial,sans-serif !important;
    font-size:9.5px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    text-decoration:none !important;
  }

  .nav-links > a[href="#features"]:hover,
  .nav-links > a[href="#faq"]:hover,
  .nav-links > a.support-link:hover{
    color:#ff737a !important;
  }

  .nav-links .support-cup{
    display:block !important;
    width:12px !important;
    height:12px !important;
    max-width:12px !important;
    flex:0 0 12px !important;
    margin-right:4px !important;
    object-fit:contain !important;
  }

  .mobile-more-nav{
    position:relative;
    z-index:2147483000 !important;
    display:flex;
    align-items:center;
    flex:0 0 auto;
  }

  .mobile-menu-toggle{
    width:38px;
    height:38px;
    padding:0;
    border:1px solid rgba(255,255,255,.09);
    border-radius:11px;
    background:#191a20;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-menu-toggle span{
    display:block;
    width:17px;
    height:1.7px;
    border-radius:99px;
    background:#f2f2f4;
    transition:transform .18s ease, opacity .18s ease;
  }

  .mobile-more-nav.is-open .mobile-menu-toggle span:nth-child(1){
    transform:translateY(5.7px) rotate(45deg);
  }

  .mobile-more-nav.is-open .mobile-menu-toggle span:nth-child(2){
    opacity:0;
  }

  .mobile-more-nav.is-open .mobile-menu-toggle span:nth-child(3){
    transform:translateY(-5.7px) rotate(-45deg);
  }

  /* Full viewport backdrop is intentionally below the dropdown but above site content. */
  .mobile-menu-backdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:2147483100 !important;
    background:rgba(4,4,7,.46);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }

  .mobile-more-nav.is-open .mobile-menu-backdrop{
    display:block;
  }

  .mobile-menu-panel{
    display:none;
    position:fixed !important;
    z-index:2147483200 !important;
    top:72px !important;
    right:12px !important;
    width:min(300px, calc(100vw - 24px)) !important;
    max-height:calc(100vh - 92px);
    overflow-y:auto;
    overflow-x:hidden;
    padding:10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:17px;
    background:#17181e !important;
    box-shadow:
      0 24px 70px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.025);
    transform:none !important;
  }

  .mobile-more-nav.is-open .mobile-menu-panel{
    display:block !important;
  }

  .mobile-menu-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:7px 8px 10px;
    color:#f4f4f6;
    font-family:"Roboto",Arial,sans-serif;
    font-size:12px;
    font-weight:800;
  }

  .mobile-menu-close{
    width:32px;
    height:32px;
    border:0;
    border-radius:9px;
    background:#222329;
    color:#a4a6b0;
    font-family:Arial,sans-serif;
    font-size:22px;
    line-height:1;
    cursor:pointer;
  }

  .mobile-menu-links{
    display:grid;
    gap:4px;
  }

  .mobile-menu-links a{
    min-height:46px;
    padding:0 13px;
    border-radius:11px;
    display:flex;
    align-items:center;
    color:#a1a3ad;
    background:transparent;
    border:1px solid transparent;
    font-family:"Roboto",Arial,sans-serif;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
  }

  .mobile-menu-links a:active,
  .mobile-menu-links a:hover{
    color:#ff747b;
    background:rgba(255,101,108,.07);
    border-color:rgba(255,101,108,.10);
  }

  /* Keep page content under the dropdown regardless of local stacking contexts. */
  .page,
  .features-page,
  .standalone-page > main,
  .site-footer{
    position:relative;
    z-index:1 !important;
  }
}

/* Slightly tighter fit for very narrow phones. */
@media (max-width:360px){
  .brand{
    max-width:112px !important;
  }

  .brand-title-svg{
    width:80px !important;
    max-width:80px !important;
  }

  .nav-links{
    gap:7px !important;
  }

  .nav-links > a[href="#features"],
  .nav-links > a[href="#faq"],
  .nav-links > a.support-link{
    font-size:8.5px !important;
  }

  .nav-links .support-cup{
    width:10px !important;
    height:10px !important;
    max-width:10px !important;
    flex-basis:10px !important;
    margin-right:3px !important;
  }

  .mobile-menu-toggle{
    width:36px;
    height:36px;
  }
}


/* Mobile navigation desktop guard v4 */
@media (min-width:761px){
  .mobile-more-nav,
  .mobile-menu-panel,
  .mobile-menu-backdrop{
    display:none !important;
  }
}


/* =========================================================
   MOBILE NAVIGATION v5 FIXES
   - Support icon after text
   - Current page shown in white
   - Reliable dropdown layering
   ========================================================= */
.support-link .support-text{
  display:inline;
}

@media (max-width:760px){
  .nav-links > a[href="#features"].is-current,
  .nav-links > a[href="#faq"].is-current,
  .nav-links > a.is-current,
  .mobile-menu-links a.is-current{
    color:#ffffff !important;
  }

  .mobile-menu-links a.is-current{
    background:rgba(255,255,255,.055) !important;
    border-color:rgba(255,255,255,.085) !important;
  }

  .support-link{
    flex-direction:row !important;
  }

  .support-link .support-text{
    order:1;
  }

  .support-link .support-cup{
    order:2;
    margin-left:4px !important;
    margin-right:0 !important;
  }

  .mobile-more-nav{
    overflow:visible !important;
  }

  .mobile-menu-panel{
    pointer-events:auto !important;
  }

  .mobile-menu-backdrop{
    pointer-events:auto !important;
  }

  .mobile-menu-toggle{
    position:relative !important;
    z-index:2147483300 !important;
    pointer-events:auto !important;
  }
}


/* =========================================================
   FAQ MOBILE TYPOGRAPHY v6
   Compact phone sizing + Safari text-scaling control.
   ========================================================= */
@media (max-width:760px){
  html,
  body{
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }

  #faq-page .faq-shell{
    width:calc(100% - 24px) !important;
    padding-top:30px !important;
  }

  #faq-page .standard-page-heading{
    margin-bottom:26px !important;
  }

  #faq-page .faq-title-svg{
    width:min(132px, 38vw) !important;
    max-width:132px !important;
  }

  #faq-page .standard-page-heading p{
    max-width:310px !important;
    margin:10px auto 0 !important;
    font-size:11.5px !important;
    line-height:1.55 !important;
  }

  #faq-page .faq-list{
    gap:23px !important;
  }

  #faq-page .faq-item{
    gap:10px !important;
  }

  #faq-page .faq-question-row{
    gap:8px !important;
  }

  #faq-page .faq-avatar{
    width:28px !important;
    height:28px !important;
    flex-basis:28px !important;
    font-size:8px !important;
  }

  #faq-page .faq-bubble{
    max-width:calc(100% - 38px) !important;
    padding:10px 12px !important;
    border-radius:14px 14px 14px 5px !important;
    font-size:11.5px !important;
    line-height:1.46 !important;
    font-weight:700 !important;
  }

  #faq-page .faq-bubble::after{
    width:11px !important;
    height:11px !important;
    left:-6px !important;
    bottom:7px !important;
  }

  #faq-page .faq-answer{
    margin-left:36px !important;
    padding-left:0 !important;
    max-width:calc(100% - 36px) !important;
    font-size:11px !important;
    line-height:1.62 !important;
  }

  #faq-page .faq-footer-note{
    margin-top:30px !important;
    padding:17px 15px !important;
    border-radius:16px !important;
  }

  #faq-page .faq-footer-note strong{
    font-size:13px !important;
  }

  #faq-page .faq-footer-note p{
    font-size:10.5px !important;
    line-height:1.55 !important;
  }
}


/* FAQ heading centering v7 */
#faq-page .standard-page-heading{
  text-align:center !important;
}

#faq-page .faq-title-svg{
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#faq-page .standard-page-heading p{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

@media (max-width:760px){
  #faq-page .faq-title-svg{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* FAQ mobile title size v8
   Match the visual scale used by "Why Choose Teacher Dashboard". */
@media (max-width:760px){
  #faq-page .faq-title-svg{
    width:min(94%, 520px) !important;
    max-width:94% !important;
    height:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* Mobile dropdown simplification v9 */
@media (max-width:760px){
  .mobile-menu-panel{
    padding:8px !important;
  }

  .mobile-menu-header,
  .mobile-menu-close{
    display:none !important;
  }
}


/* =========================================================
   MOBILE FULL-PAGE MENU BLUR v10
   Blur the entire visible page behind the hamburger menu.
   ========================================================= */
@media (max-width:760px){
  .page > .hero,
  .page > .scroll-cue,
  .page > .site-footer,
  .features-page > .features-inner,
  .features-page > .site-footer,
  .standalone-page > main,
  .standalone-page > .site-footer,
  .nav > .brand,
  .nav > .nav-links{
    transition:filter .18s ease, opacity .18s ease;
  }

  body.mobile-menu-open .page > .hero,
  body.mobile-menu-open .page > .scroll-cue,
  body.mobile-menu-open .page > .site-footer,
  body.mobile-menu-open .features-page > .features-inner,
  body.mobile-menu-open .features-page > .site-footer,
  body.mobile-menu-open .standalone-page > main,
  body.mobile-menu-open .standalone-page > .site-footer,
  body.mobile-menu-open .nav > .brand,
  body.mobile-menu-open .nav > .nav-links{
    filter:blur(6px) !important;
    opacity:.72 !important;
    pointer-events:none !important;
    user-select:none !important;
  }

  /* The dropdown itself remains fully sharp and readable. */
  body.mobile-menu-open .mobile-more-nav,
  body.mobile-menu-open .mobile-menu-toggle,
  body.mobile-menu-open .mobile-menu-panel,
  body.mobile-menu-open .mobile-menu-links{
    filter:none !important;
    opacity:1 !important;
  }

  .mobile-menu-backdrop{
    background:rgba(6,6,10,.34) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .page > .hero,
  .page > .scroll-cue,
  .page > .site-footer,
  .features-page > .features-inner,
  .features-page > .site-footer,
  .standalone-page > main,
  .standalone-page > .site-footer,
  .nav > .brand,
  .nav > .nav-links{
    transition:none !important;
  }
}


/* =========================================================
   TRUE FULL-PAGE MOBILE MENU BLUR v11
   Viewport-level layer for iPhone/Safari.
   ========================================================= */
.mobile-page-blur-overlay{
  display:none;
}

@media (max-width:760px){
  .mobile-page-blur-overlay{
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:2147479000 !important;
    pointer-events:none;
    background:rgba(7,7,11,.30) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
  }

  body.mobile-menu-open .mobile-page-blur-overlay{
    display:block !important;
    pointer-events:auto !important;
  }

  /* Keep the navigation/menu above the viewport blur layer. */
  .nav,
  .standalone-page > .nav{
    z-index:2147480000 !important;
  }

  .mobile-more-nav,
  .mobile-menu-toggle,
  .mobile-menu-panel{
    position:relative;
    z-index:2147483200 !important;
  }

  /* The old header-contained backdrop is no longer needed.
     The body-level overlay now handles both blur and outside clicks. */
  .mobile-more-nav.is-open .mobile-menu-backdrop,
  .mobile-menu-backdrop{
    display:none !important;
  }

  /* Header text remains blurred too, while the hamburger/menu stay sharp. */
  body.mobile-menu-open .nav > .brand,
  body.mobile-menu-open .nav > .nav-links{
    filter:blur(6px) !important;
    opacity:.72 !important;
  }

  body.mobile-menu-open .mobile-more-nav,
  body.mobile-menu-open .mobile-menu-toggle,
  body.mobile-menu-open .mobile-menu-panel,
  body.mobile-menu-open .mobile-menu-links{
    filter:none !important;
    opacity:1 !important;
  }
}


/* =========================================================
   MOBILE MENU VISIBILITY + SOFTER BLUR v12
   Keeps the dropdown fully above the blur layer and reduces
   the blur strength by approximately 50%.
   ========================================================= */
@media (max-width:760px){

  /* Remove parent stacking contexts that were trapping the menu
     underneath the full-screen blur overlay on Features/Home. */
  body.mobile-menu-open .page,
  body.mobile-menu-open .features-page{
    z-index:auto !important;
    isolation:auto !important;
  }

  /* The full-page overlay remains above ordinary page content. */
  .mobile-page-blur-overlay{
    z-index:2147479000 !important;
    background:rgba(7,7,11,.16) !important;
    backdrop-filter:blur(4px) !important;
    -webkit-backdrop-filter:blur(4px) !important;
  }

  /* The navigation itself sits above the overlay so the menu can remain crisp. */
  .nav,
  .standalone-page > .nav{
    position:relative !important;
    z-index:2147481000 !important;
  }

  .mobile-more-nav{
    position:relative !important;
    z-index:2147483000 !important;
  }

  .mobile-menu-toggle{
    position:relative !important;
    z-index:2147483300 !important;
  }

  /* Important: keep the dropdown fixed to the phone viewport.
     This overrides the accidental relative-position rule from v11. */
  .mobile-menu-panel{
    position:fixed !important;
    z-index:2147483600 !important;
    top:68px !important;
    right:10px !important;
    width:min(292px, calc(100vw - 20px)) !important;
    max-height:calc(100vh - 84px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    filter:none !important;
    opacity:1 !important;
  }

  body.mobile-menu-open .mobile-menu-panel{
    display:block !important;
    filter:none !important;
    opacity:1 !important;
  }

  /* The viewport overlay now handles page blur, so do not double-blur
     cards/content underneath it. */
  body.mobile-menu-open .page > .hero,
  body.mobile-menu-open .page > .scroll-cue,
  body.mobile-menu-open .page > .site-footer,
  body.mobile-menu-open .features-page > .features-inner,
  body.mobile-menu-open .features-page > .site-footer,
  body.mobile-menu-open .standalone-page > main,
  body.mobile-menu-open .standalone-page > .site-footer{
    filter:none !important;
    opacity:1 !important;
  }

  /* Header items are above the overlay, so apply a lighter direct blur there. */
  body.mobile-menu-open .nav > .brand,
  body.mobile-menu-open .nav > .nav-links{
    filter:blur(3px) !important;
    opacity:.82 !important;
  }

  /* Hamburger and dropdown remain completely sharp. */
  body.mobile-menu-open .mobile-more-nav,
  body.mobile-menu-open .mobile-menu-toggle,
  body.mobile-menu-open .mobile-menu-panel,
  body.mobile-menu-open .mobile-menu-links{
    filter:none !important;
    opacity:1 !important;
  }
}