/* Homepage v3 mobile corrections by Codex (abtest2/performance/homepage, 14 Sep 2026):
   founder section, comparison card with a no-JavaScript format selector, FAQ alignment.
   Everything is scoped to max-width 860px; desktop is unchanged. Must load after home-v3.css. */

/* ---- founder-mobile.css ---- */
/* Homepage v3 teacher section. Desktop rules stay completely untouched. */
@media (max-width:860px) {
  .h3 .h3-founder {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:26px!important;
    align-items:start!important;
    justify-items:stretch!important;
    width:calc(100% - 40px)!important;
    max-width:38rem!important;
    margin-inline:auto!important;
  }
  .h3 .h3-founder > * { min-width:0!important; max-width:100%!important; }
  .h3 .h3-founder > .h3-portrait {
    position:relative;
    width:100%!important;
    max-width:28rem!important;
    height:clamp(220px,64vw,300px)!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    margin:0 auto!important;
    border-radius:20px!important;
    overflow:hidden;
    transform:none!important;
    box-shadow:5px 5px 0 rgba(19,216,232,.24)!important;
  }
  .h3 .h3-founder .h3-portrait > img {
    display:block!important;
    position:static!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:50% 0%!important;
    transform:none!important;
    animation:none!important;
  }
  .h3 .h3-founder .h3-stamp {
    right:12px!important;
    bottom:12px!important;
    width:auto!important;
    max-width:8rem!important;
    padding:10px 12px!important;
    font-size:11px!important;
    line-height:1.3!important;
    transform:none!important;
  }
  .h3 .h3-founder > div:last-child { width:100%!important; padding:0!important; }
  .h3 .h3-founder .m3-eyebrow {
    white-space:normal!important;
    font-size:11px!important;
    line-height:1.5!important;
    letter-spacing:.16em!important;
  }
  .h3 .h3-founder .h3-h2 {
    max-width:none!important;
    font-size:clamp(28px,7.6vw,36px)!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
    overflow-wrap:break-word;
  }
  .h3 .h3-founder .m3-sub {
    max-width:none!important;
    font-size:16px!important;
    line-height:1.65!important;
  }
  .h3 .h3-founder .h3-founder-links {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    margin-top:24px!important;
  }
  .h3 .h3-founder .h3-founder-links > a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:48px;
    padding:14px 16px;
    border:1px solid rgba(19,216,232,.22);
    border-radius:10px;
    background:rgba(19,216,232,.035);
    font-size:14px;
    line-height:1.35;
  }
}

/* ---- compare-mobile.css ---- */
/* Desktop keeps the original matrix. No scripts, animation or extra assets. */
.h3 .h3-compare-switch { display:none; }

@media (max-width:860px) {
  @supports selector(:has(input:checked)) {
    .h3 #compare > .m3-shell {
      width:calc(100% - 32px);
      max-width:38rem;
      margin-inline:auto;
    }
    .h3 #compare .m3-head { margin-bottom:18px; }
    .h3 #compare .m3-eyebrow { margin-bottom:10px!important; font-size:10px; }
    .h3 #compare .h3-h2 { font-size:28px; line-height:1.08; }
    .h3 #compare .h3-h2::before { display:none; }
    .h3 #compare .m3-head > .m3-sub,
    .h3 #compare .compare-swipe-hint { display:none!important; }
    .h3 .h3-compare {
      margin:0;
      overflow:visible;
      border:1px solid rgba(32,213,229,.27);
      border-radius:18px;
      background:radial-gradient(ellipse at 0 0,rgba(32,213,229,.07),transparent 65%),#0b0d12;
      box-shadow:none;
      scroll-snap-type:none;
    }
    .h3 .h3-compare-switch {
      display:block;
      min-width:0;
      margin:0;
      padding:14px 14px 0;
      border:0;
    }
    .h3 .h3-compare-switch legend {
      position:absolute;
      width:1px;
      height:1px;
      margin:-1px;
      padding:0;
      overflow:hidden;
      clip-path:inset(50%);
      white-space:nowrap;
    }
    .h3 .h3-compare-switch > div { clear:both; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
    .h3 .h3-compare-switch label { position:relative; display:block; min-width:0; cursor:pointer; }
    .h3 .h3-compare-switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
    .h3 .h3-compare-switch label > span {
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:44px;
      padding:8px 4px;
      border:1px solid rgba(245,242,236,.16);
      border-radius:9px;
      color:#cbcbd2;
      background:#11151c;
      font-size:12px;
      font-weight:800;
      line-height:1.25;
    }
    .h3 .h3-compare-switch input:checked + span { color:#061015; border-color:#20d5e5; background:#20d5e5; }
    .h3 .h3-compare-switch input:focus-visible + span { outline:2px solid #f5f2ec; outline-offset:3px; }
    .h3 .h3-compare .compare-matrix {
      width:100%;
      min-width:0;
      grid-template-columns:94px minmax(0,1fr);
    }
    .h3 .h3-compare .compare-matrix > * {
      padding:8px 14px;
      border:0;
      border-bottom:1px solid rgba(245,242,236,.09);
      background:none;
      box-shadow:none;
    }
    .h3 .h3-compare :is(.compare-corner,.compare-check,.compare-provider,.compare-value,.compare-action) { display:none; }
    .h3 .h3-compare .compare-feature {
      position:static;
      z-index:auto;
      min-height:44px;
      padding-right:6px;
      color:#a8adb7;
      font-size:9px;
      line-height:1.5;
      letter-spacing:.06em;
      overflow-wrap:break-word;
    }
    .h3 .h3-compare .compare-value { color:#eeedf0; font-size:14px; line-height:1.4; overflow-wrap:break-word; }
    .h3 .h3-compare .compare-provider { grid-column:1/-1; min-height:78px; padding-block:14px 12px; }
    .h3 .h3-compare .compare-provider strong { font-size:17px; line-height:1.2; letter-spacing:-.02em; text-shadow:none; }
    .h3 .h3-compare .compare-provider span { margin-top:6px; font-size:12px; line-height:1.4; }
    .h3 .h3-compare:has(input[value="neroz"]:checked) :is(.compare-provider,.compare-value).is-neroz,
    .h3 .h3-compare:has(input[value="harderclass"]:checked) :is(.compare-provider,.compare-value).is-harderclass,
    .h3 .h3-compare:has(input[value="youtube"]:checked) :is(.compare-provider,.compare-value).is-youtube { display:flex; }
    .h3 .h3-compare .compare-feature:nth-last-child(4) { display:none; }
    .h3 .h3-compare .compare-action.is-neroz { display:block; grid-column:1/-1; min-height:0; padding:12px 14px; border:0; }
    .h3 .h3-compare .compare-action a { background:#20d5e5!important; box-shadow:none!important; font-size:11px!important; }
    .h3 #compare .h3-compare-close { margin-top:18px; }
    .h3 #compare .h3-compare-close > p { max-width:32ch; margin:0 auto 10px; font-size:17px; line-height:1.35; }
    .h3 #compare .h3-compare-close > a { display:inline-flex; align-items:center; min-height:44px; font-size:13px; }
  }
}

/* ---- faq-mobile.css ---- */
/* Homepage v3 FAQ: badge above question, one shared question/icon alignment. */
@media (max-width:860px) {
  .h3 .h3-faq summary {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:9px!important;
    min-width:0;
    padding:18px 56px 18px 18px!important;
    font-size:17px!important;
    line-height:1.4!important;
    text-align:left;
    overflow-wrap:break-word;
  }
  .h3 .h3-faq summary > .h3-tag {
    align-self:flex-start;
    flex:none;
    width:fit-content;
    max-width:100%;
    margin:0!important;
    padding:5px 8px!important;
    font-size:10px!important;
    line-height:1.1!important;
    letter-spacing:.12em!important;
  }
  .h3 .h3-faq summary::after {
    left:auto;
    right:18px!important;
    top:50%!important;
    width:26px;
    height:26px;
    margin-top:-13px;
    flex:none;
  }
  .h3 .h3-faq details > p {
    padding:0 18px 18px!important;
    font-size:15px!important;
    line-height:1.65!important;
  }
}