/* Alex landing page. Loads after _layout.css, which supplies base type, links, .fw and .btn-brick. Every rule is scoped to .alex-landing. */

  .alex-landing .lede{ font-size:clamp(1.05rem, 1.6vw, 1.3rem); color:#46494b; }

  .alex-landing .eyebrow{
    display:inline-block;
    font-weight:800;
    font-size:0.8rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:#1f8f96;
    margin-bottom:1rem;
  }
  .alex-landing .eyebrow.on-dark{ color:#8fe3e6; }

  /* ---------- Jump link ---------- */
  .alex-landing a.jump-link{
    display:inline-flex;
    align-items:center;
    gap:0.5em;
    color:#15435f;
    font-weight:700;
    font-size:1rem;
    padding:0.85em 0.2em;
    text-decoration:none;
    white-space:nowrap;
  }
  .alex-landing a.jump-link:hover{ color:#1f8f96; }
  .alex-landing a.jump-link .arrow{ transition: transform .15s ease; }
  .alex-landing a.jump-link:hover .arrow{ transform: translateY(3px); }

  /* ---------- Hero ---------- */
  .alex-landing .hero{
    padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem);
    background:
      radial-gradient(60% 90% at 88% 8%, #d8efef 0%, rgba(216,239,239,0) 70%),
      #fff;
    overflow:hidden;
  }
  .alex-landing .hero .fw{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:clamp(2rem,5vw,4rem);
    align-items:center;
  }
  .alex-landing .hero .fw::before,
  .alex-landing .hero .fw::after{ content:none; }
  .alex-landing .hero .cta-row{
    display:flex;
    align-items:center;
    gap:1.4rem;
    flex-wrap:wrap;
    margin-top:1.6rem;
  }
  .alex-landing .hero .free-lesson-badge{
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    width:auto;
    margin-top:0.4rem;
    padding:0.55rem 1.1rem 0.55rem 0.6rem;
    background:#d8efef;
    border-radius:1.4rem;
    font-size:0.95rem;
    font-weight:700;
    line-height:1.35;
    color:#15435f;
  }
  .alex-landing .hero .free-lesson-badge .tick{
    position:relative;
    flex-shrink:0;
    width:1.4rem;
    height:1.4rem;
    border-radius:50%;
    background:#27b7c5;
  }
  .alex-landing .hero .free-lesson-badge .tick::after{
    content:"";
    position:absolute;
    left:50%;
    top:46%;
    width:0.32rem;
    height:0.62rem;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:translate(-50%, -50%) rotate(45deg);
  }
  .alex-landing .hero .fine-print{
    margin-top:1.4rem;
    font-size:0.88rem;
    color:#7a7d80;
  }

  .alex-landing .hero-card{
    background:#071c39;
    border-radius:1.4rem;
    box-shadow:0 24px 50px rgba(7,28,57,0.35);
    padding:1.6rem;
    border:1px solid #0f2a4f;
  }
  .alex-landing .hero-card .hc-head{
    display:flex;
    align-items:center;
    gap:0.7rem;
    margin-bottom:1.1rem;
    padding-bottom:1rem;
    border-bottom:1px solid #1a3050;
  }
  .alex-landing .hero-card .hc-avatar{
    width:38px; height:38px;
    flex-shrink:0;
  }
  .alex-landing .hero-card .hc-avatar img{ display:block; width:100%; height:100%; object-fit:contain; }
  .alex-landing .hero-card .hc-name{ font-weight:800; color:#fff; font-size:0.98rem; }
  .alex-landing .hero-card .hc-role{ font-size:0.8rem; color:#8fb0cf; }
  .alex-landing .hero-card .bubble{
    background:#1a3050;
    border-radius:1rem 1rem 1rem 0.2rem;
    padding:0.9rem 1.1rem;
    font-size:0.95rem;
    color:#fff;
    margin-bottom:0.8rem;
  }
  .alex-landing .hero-card .bubble.you{
    background:#36b6be;
    color:#071c39;
    border-radius:1rem 1rem 0.2rem 1rem;
    margin-left:2rem;
  }
  .alex-landing .hero-card .bubble.typing{
    display:flex;
    align-items:center;
    gap:0.3rem;
    width:3.6rem;
    padding:1rem 1.1rem;
  }
  .alex-landing .hero-card .bubble.typing span{
    display:block;
    flex:0 0 0.45rem;
    width:0.45rem; height:0.45rem;
    min-width:0.45rem; min-height:0.45rem;
    padding:0; margin:0;
    border-radius:50%;
    background:#8fb0cf;
  }
  .alex-landing .stepper{
    display:flex;
    justify-content:space-between;
    margin-top:1.3rem;
    padding-top:1.2rem;
    border-top:1px solid #1a3050;
    gap:0.4rem;
  }
  .alex-landing .stepper .step{
    text-align:center;
    flex:1;
    font-size:0.72rem;
    font-weight:400;
    color:#7f93ad;
  }
  .alex-landing .stepper .dot{
    width:100%;height:0.35rem;border-radius:0.35rem;
    background:#1a3050;
    margin:0 auto 0.5rem;
  }
  .alex-landing .stepper .step.done .dot{ background:#36b6be; }
  .alex-landing .stepper .step.active .dot{ background:#ffae00; }
  .alex-landing .stepper .step.active{ color:#fff; font-weight:700; }

  @media (prefers-reduced-motion: no-preference){
    .alex-landing .hero-card .bubble{ opacity:0; transform:translateY(0.6rem); }
    .alex-landing .stepper .step.active .dot{ transform:scaleX(0); transform-origin:left center; }
    .alex-landing .hero-card.is-live .bubble{ animation:alex-bubble 0.5s ease-out both; }
    .alex-landing .hero-card.is-live .bubble:nth-of-type(2){ animation-delay:0.3s; }
    .alex-landing .hero-card.is-live .bubble:nth-of-type(3){ animation-delay:1.1s; }
    .alex-landing .hero-card.is-live .bubble:nth-of-type(4){ animation-delay:1.9s; }
    .alex-landing .hero-card.is-live .bubble:nth-of-type(5){ animation-delay:2.7s; }
    .alex-landing .hero-card.is-live .bubble.typing span{ animation:alex-dot 1.2s ease-in-out 3.2s infinite; }
    .alex-landing .hero-card.is-live .bubble.typing span:nth-child(2){ animation-delay:3.4s; }
    .alex-landing .hero-card.is-live .bubble.typing span:nth-child(3){ animation-delay:3.6s; }
    .alex-landing .hero-card.is-live .stepper .step.active .dot{ animation:alex-fill 0.9s ease-out 0.2s both; }
  }
  @keyframes alex-bubble{
    0%{ opacity:0; transform:translateY(0.6rem); }
    100%{ opacity:1; transform:translateY(0); }
  }
  @keyframes alex-dot{
    0%{ transform:translateY(0); opacity:0.5; }
    30%{ transform:translateY(-0.2rem); opacity:1; }
    60%{ transform:translateY(0); opacity:0.5; }
    100%{ transform:translateY(0); opacity:0.5; }
  }
  @keyframes alex-fill{
    0%{ transform:scaleX(0); }
    100%{ transform:scaleX(1); }
  }

  /* ---------- Photo feature ---------- */
  .alex-landing .photo-feature .photo-frame{
    position:relative;
    margin:0;
    border-radius:1.4rem;
    overflow:hidden;
  }
  .alex-landing .photo-feature .photo-img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:21 / 9;
    object-fit:cover;
    object-position:center;
  }
  .alex-landing .photo-feature .photo-chip{
    position:absolute;
    right:1.5rem;
    bottom:1.5rem;
    display:flex;
    align-items:center;
    gap:0.7rem;
    background:#fff;
    border-radius:1rem;
    padding:0.75rem 1.1rem 0.75rem 0.8rem;
    box-shadow:0 12px 30px rgba(21,67,95,0.18);
  }
  .alex-landing .photo-feature .photo-chip img{ display:block; width:30px; height:30px; object-fit:contain; }
  .alex-landing .photo-feature .photo-chip .pc-title{ display:block; font-weight:800; font-size:0.9rem; color:#3d3e42; line-height:1.3; }
  .alex-landing .photo-feature .photo-chip .pc-sub{ display:block; font-weight:700; font-size:0.8rem; color:#1f8f96; line-height:1.3; }

  /* ---------- Section shells ---------- */
  .alex-landing section{ padding:clamp(3.2rem,6vw,5.5rem) 0; }
  .alex-landing section.tint{ background:#f5fafa; }
  .alex-landing .section-head{ max-width:760px; margin-bottom:clamp(2rem,4vw,3rem); }
  .alex-landing .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

  /* ---------- Session timeline ---------- */
  .alex-landing .timeline{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.4rem;
  }
  .alex-landing .tl-card{
    background:#fff;
    border:1px solid #e2e2e2;
    border-radius:1rem;
    padding:1.5rem 1.4rem;
    position:relative;
  }
  .alex-landing .tl-card .tl-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.1rem; height:2.1rem;
    border-radius:50%;
    background:linear-gradient(90deg, rgba(89,196,190,1) 0%, rgba(39,163,181,1) 100%);
    color:#fff;
    font-weight:800;
    font-size:0.95rem;
    margin-bottom:0.9rem;
  }
  .alex-landing .tl-card h4{
    font-size:1.02rem;
    font-weight:800;
    color:#3d3e42;
    padding:0 0 0.4rem;
  }
  .alex-landing .tl-card p{ font-size:0.92rem; padding:0; color:#46494b; }

  .alex-landing .callout{
    margin-top:2.2rem;
    background:#15435f;
    background:linear-gradient(120deg, #1c4d6b 0%, #0c2635 100%);
    color:#fff;
    border-radius:1.2rem;
    padding:1.8rem 2rem;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:1.4rem;
    align-items:center;
  }
  .alex-landing .callout .badge{
    background:rgba(255,255,255,0.14);
    color:#fff;
    font-weight:800;
    font-size:0.75rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    padding:0.5em 0.9em;
    border-radius:0.5em;
    white-space:nowrap;
  }
  .alex-landing .callout p{ padding:0; color:rgba(255,255,255,0.92); font-size:0.98rem; }
  .alex-landing .callout strong{ color:#fff; }

  /* ---------- Video feature ---------- */
  .alex-landing .video-feature{
    margin-top:clamp(2.5rem,5vw,4rem);
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.6fr);
    gap:clamp(2rem,4vw,3.4rem);
    align-items:center;
  }
  .alex-landing .video-feature .video-frame{
    position:relative;
    aspect-ratio:16 / 9;
    border-radius:1.4rem;
    overflow:hidden;
    isolation:isolate;
    background:#0c2635;
    box-shadow:0 24px 50px rgba(21,67,95,0.14);
  }
  .alex-landing .video-feature .video-frame iframe{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    border:0;
  }

  /* ---------- Pedagogy grid ---------- */
  .alex-landing .ped-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.3rem;
  }
  .alex-landing .ped-card{
    background:#fff;
    border:1px solid #e2e2e2;
    border-radius:1.1rem;
    padding:1.6rem 1.5rem;
    transition:box-shadow .15s ease, transform .15s ease;
  }
  .alex-landing .ped-card:hover{ box-shadow:0 16px 30px rgba(21,67,95,0.1); transform:translateY(-2px); }
  .alex-landing .ped-card .tag{
    display:inline-block;
    font-size:0.72rem;
    font-weight:800;
    letter-spacing:0.05em;
    text-transform:uppercase;
    padding:0.25em 0.7em;
    border-radius:0.4em;
    margin-bottom:0.9rem;
  }
  .alex-landing .tag.teal{ background:#d8efef; color:#1f8f96; }
  .alex-landing .tag.magenta{ background:#f8dfe7; color:#db5780; }
  .alex-landing .tag.blue{ background:#dde6fa; color:#2b63cd; }
  .alex-landing .tag.navy{ background:#dde9f0; color:#15435f; }
  .alex-landing .ped-grid .ped-card:nth-child(1) .tag{ background:#dbf2f3; color:#206d72; }
  .alex-landing .ped-grid .ped-card:nth-child(2) .tag{ background:#f3e7f2; color:#84557e; }
  .alex-landing .ped-grid .ped-card:nth-child(3) .tag{ background:#fff0d1; color:#805700; }
  .alex-landing .ped-grid .ped-card:nth-child(4) .tag{ background:#dde9f0; color:#18425f; }
  .alex-landing .ped-grid .ped-card:nth-child(5) .tag{ background:#f9e1e8; color:#993d5a; }
  .alex-landing .ped-grid .ped-card:nth-child(6) .tag{ background:#eaf6ed; color:#45664e; }
  .alex-landing .ped-grid .ped-card:nth-child(7) .tag{ background:#d7eaf4; color:#176389; }
  .alex-landing .ped-grid .ped-card:nth-child(8) .tag{ background:#ffdfde; color:#b23532; }
  .alex-landing .ped-card h4{ font-size:1.05rem; font-weight:800; color:#3d3e42; padding:0 0 0.5rem; }
  .alex-landing .ped-card p{ font-size:0.92rem; color:#46494b; padding:0; }

  .alex-landing .research-note{
    margin-top:2.4rem;
    padding-top:2rem;
    border-top:1px solid #e2e2e2;
    font-size:0.92rem;
    color:#6d7073;
    max-width:820px;
  }

  /* ---------- Voice section ---------- */
  .alex-landing .voice-panel{
    background:#173a54;
    background:linear-gradient(120deg, #1c4d6b 0%, #0c2635 100%);
    border-radius:1.4rem;
    padding:clamp(2rem,5vw,3rem);
    color:#fff;
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:clamp(2rem,4vw,3rem);
    align-items:center;
  }
  .alex-landing .voice-panel .quotes{ display:flex; flex-direction:column; gap:1rem; }
  .alex-landing .voice-quote{
    background:rgba(255,255,255,0.08);
    border-left:3px solid #36b6be;
    border-radius:0.4rem;
    padding:1rem 1.2rem;
    font-size:1rem;
    font-style:italic;
    color:#f2fbfb;
  }
  .alex-landing .voice-caption{
    margin-top:0.6rem;
    font-size:0.82rem;
    color:rgba(255,255,255,0.6);
    font-style:normal;
  }
  .alex-landing .voice-panel h2{ color:#fff; }
  .alex-landing .voice-panel .lede{ color:rgba(255,255,255,0.85); }

  /* ---------- Human tutor section ---------- */
  .alex-landing .partner-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(2rem,4vw,3.4rem);
    align-items:start;
  }
  .alex-landing .escalation-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.9rem; }
  .alex-landing .escalation-list li{
    display:flex;
    gap:0.8rem;
    align-items:flex-start;
    background:#fff;
    border:1px solid #e2e2e2;
    border-radius:0.8rem;
    padding:0.9rem 1.1rem;
    font-size:0.92rem;
  }
  .alex-landing .escalation-list .marker{
    flex-shrink:0;
    width:1.5rem;height:1.5rem;
    border-radius:50%;
    background:#d8efef;
    color:#1f8f96;
    display:flex;align-items:center;justify-content:center;
    font-weight:800;
    font-size:0.8rem;
  }
  .alex-landing .not-escalate{
    margin-top:1.2rem;
    background:#f5fafa;
    border-radius:0.8rem;
    padding:1rem 1.2rem;
    font-size:0.9rem;
  }
  .alex-landing .not-escalate strong{ color:#3d3e42; }

  .alex-landing .trust-row-2 {
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:1.6rem;
  }
  .alex-landing .trust-pill{
    display:flex;
    align-items:center;
    gap:0.5rem;
    background:#fff;
    border:1px solid #e2e2e2;
    border-radius:2rem;
    padding:0.55rem 1rem;
    font-size:0.85rem;
    font-weight:700;
    color:#15435f;
  }
  .alex-landing .trust-pill .dot{ width:8px;height:8px;border-radius:50%;background:#36b6be; }

  /* ---------- How to add Alex ---------- */
  .alex-landing section.add-alex{ padding-bottom:0; }
  .alex-landing .add-alex .add-alex-intro{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:2rem;
    align-items:center;
    margin-bottom:clamp(2rem,4vw,3rem);
  }
  .alex-landing .add-alex .add-alex-intro .section-head{ margin-bottom:0; }
  .alex-landing .add-alex .add-alex-img{
    display:block;
    justify-self:center;
    width:100%;
    max-width:420px;
    height:auto;
    aspect-ratio:1400 / 990;
  }
  .alex-landing .add-alex .step-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.3rem;
  }
  .alex-landing .add-alex .step-tile{
    background:#18425f;
    border-radius:1.2rem;
    padding:1.6rem 1.4rem 1.4rem;
    color:#fff;
  }
  .alex-landing .add-alex .step-tile .number-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#27b7c5;
    color:#fff;
    font-size:1.4rem;
    font-weight:800;
    margin-bottom:1rem;
  }
  .alex-landing .add-alex .step-tile h4{ color:#fff; }
  .alex-landing .add-alex .step-tile p{ color:rgba(255,255,255,0.88); padding:0; }
  .alex-landing .add-alex .step-tile a{ color:#fff; text-decoration:underline; }
  .alex-landing .add-alex .step-tile a:hover{ color:#8fe3e6; }
  .alex-landing .add-alex .pricing{
    margin-top:1.3rem;
    scroll-margin-top:120px;
    background:#f5fafa;
    border-radius:1rem;
    border:1px solid #d8efef;
  }
  .alex-landing .add-alex .pricing-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    list-style:none;
    cursor:pointer;
    padding:1rem 1.2rem;
    font-size:0.95rem;
    color:#46494b;
  }
  .alex-landing .add-alex .pricing-toggle::-webkit-details-marker{ display:none; }
  .alex-landing .add-alex .pricing-toggle strong{ color:#be3f37; }
  .alex-landing .add-alex .pricing-toggle:hover strong{ color:#27b7c5; }
  .alex-landing .add-alex .pricing-toggle-icon{
    flex-shrink:0;
    width:36px; height:36px;
    border-radius:50%;
    background:#be3f37;
    position:relative;
    transition:transform 0.25s ease-out;
  }
  .alex-landing .add-alex .pricing-toggle-icon::before{
    content:"";
    position:absolute;
    left:50%; top:50%;
    width:10px; height:10px;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:translate(-50%, -65%) rotate(45deg);
  }
  .alex-landing .add-alex .pricing[open] .pricing-toggle-icon{ transform:rotate(180deg); }
  .alex-landing .add-alex .pricing-body{
    padding:0.4rem 1.2rem 1.4rem;
    border-top:1px solid #d8efef;
    color:#46494b;
  }
  .alex-landing .add-alex .pricing-body p{ font-size:0.95rem; padding:0; margin:1rem 0; max-width:72ch; }
  .alex-landing .add-alex .pricing-body .pricing-note{ font-size:0.85rem; color:#6b6e72; margin:0.8rem 0 1.6rem; }
  .alex-landing .add-alex .pricing-table-wrap{
    max-width:860px;
    overflow-x:auto;
    background:#fff;
    border:1px solid #dbe7eb;
    border-radius:0.9rem;
    box-shadow:0 8px 22px rgba(24,66,95,0.07);
  }
  .alex-landing .add-alex .pricing-table{
    width:100%;
    border-collapse:collapse;
    font-size:0.95rem;
    font-variant-numeric:tabular-nums;
  }
  .alex-landing .add-alex .pricing-table th{
    background:#18425f;
    color:#fff;
    font-size:0.85rem;
    font-weight:700;
    letter-spacing:0.02em;
    line-height:1.3;
    text-align:right;
    vertical-align:bottom;
    padding:0.9rem 1.2rem;
    white-space:nowrap;
  }
  .alex-landing .add-alex .pricing-table td{
    padding:0.85rem 1.2rem;
    border-bottom:1px solid #e8eff1;
    color:#3d3e42;
    text-align:right;
    vertical-align:middle;
  }
  .alex-landing .add-alex .pricing-table th:first-child,
  .alex-landing .add-alex .pricing-table td:first-child{ text-align:left; }
  .alex-landing .add-alex .pricing-table td:first-child{ font-weight:700; color:#18425f; }
  .alex-landing .add-alex .pricing-table tbody tr:last-child td{
    border-bottom:0;
    background:#e9f6f7;
    font-weight:700;
    color:#18425f;
  }
  .alex-landing .add-alex .pricing-body > .pricing-table-wrap td:last-child{ font-weight:700; color:#18425f; }
  .alex-landing .add-alex .pricing-panel td:nth-child(3){ font-weight:700; color:#18425f; }
  .alex-landing .add-alex .pricing-table .pricing-save{ font-weight:700; color:#206d72; }
  .alex-landing .add-alex .pricing-table tbody tr:last-child .pricing-save{ color:#206d72; }
  .alex-landing .add-alex .pricing-panel{
    background:#fff;
    border:1px solid #d8efef;
    border-radius:1rem;
    padding:1.4rem 1.5rem 1.6rem;
  }
  .alex-landing .add-alex .pricing-panel h4{ color:#18425f; font-size:1.1rem; margin:0 0 0.4rem; padding:0; }
  .alex-landing .add-alex .pricing-panel p{ margin:0 0 1.2rem; }

  @media (prefers-reduced-motion: no-preference){
    .alex-landing .add-alex .pricing[open] .pricing-body{ animation:alex-pricing-open 0.35s ease-out both; }
    .alex-landing .add-alex .pricing:not([open]) .pricing-toggle-icon::before{ animation:alex-arrow-bounce 2.4s ease-in-out 1s infinite; }
    .alex-landing .add-alex .pricing:not([open]) .pricing-toggle:hover .pricing-toggle-icon::before{ animation-play-state:paused; }
  }
  @keyframes alex-arrow-bounce{
    0%, 40%, 100%{ transform:translate(-50%, -65%) rotate(45deg); }
    10%{ transform:translate(-50%, -25%) rotate(45deg); }
    20%{ transform:translate(-50%, -65%) rotate(45deg); }
    30%{ transform:translate(-50%, -40%) rotate(45deg); }
  }
  @keyframes alex-pricing-open{
    0%{ opacity:0; transform:translateY(-0.4rem); }
    100%{ opacity:1; transform:translateY(0); }
  }

  /* ---------- Closing CTA ---------- */
  .alex-landing .closing{
    background:linear-gradient(120deg, #1c4d6b 0%, #0c2635 100%);
    color:#fff;
    border-radius:1.6rem;
    padding:clamp(2.6rem,6vw,4.2rem);
    text-align:center;
  }
  .alex-landing .closing h2{ color:#fff; }
  .alex-landing .closing .lede{ color:rgba(255,255,255,0.85); max-width:640px; margin:0 auto; padding-bottom:1.8rem; }
  .alex-landing .closing .cta-row{ display:flex; justify-content:center; gap:1.2rem; flex-wrap:wrap; }
  .alex-landing .closing .btn-brick.outline-turquoise{ padding:calc(0.6em - 2px) calc(1.4em - 2px); }
  .alex-landing .closing .fine{ margin-top:1.6rem; font-size:0.85rem; color:rgba(255,255,255,0.55); }

  /* ---------- Bubble decor ---------- */
  .alex-landing #human-tutors,
  .alex-landing #pedagogy{ position:relative; }
  .alex-landing #human-tutors::before,
  .alex-landing #pedagogy::before{
    content:"";
    display:none;
    position:absolute;
    aspect-ratio:5 / 6;
    background:url(/pix/blob-bubbles-turq.svg?v2) no-repeat center / contain;
    pointer-events:none;
  }
  .alex-landing #human-tutors::before{
    top:50%;
    left:calc((50% - 860px) / 2);
    width:min(240px, calc(50% - 860px - 3rem));
    transform:translate(-50%, -50%);
  }
  .alex-landing #pedagogy::before{
    top:clamp(3.2rem,6vw,5.5rem);
    right:max(3%, calc(50% - 860px));
    width:180px;
    transform:scaleX(-1);
  }
  @media (min-width: 1300px){
    .alex-landing #pedagogy::before{ display:block; }
  }
  @media (min-width: 2000px){
    .alex-landing #human-tutors::before{ display:block; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    .alex-landing .hero .fw{ grid-template-columns:1fr; }
    .alex-landing .hero-card{ max-width:480px; }
    .alex-landing .timeline{ grid-template-columns:repeat(2, 1fr); }
    .alex-landing .ped-grid{ grid-template-columns:repeat(2, 1fr); }
    .alex-landing .voice-panel{ grid-template-columns:1fr; }
    .alex-landing .partner-grid{ grid-template-columns:1fr; }
    .alex-landing .callout{ grid-template-columns:1fr; text-align:left; }
    .alex-landing .video-feature{ grid-template-columns:1fr; gap:1.2rem; }
    .alex-landing .photo-feature .photo-img{ aspect-ratio:16 / 9; }
    .alex-landing .add-alex .step-list{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width: 620px){
    .alex-landing .timeline{ grid-template-columns:1fr; }
    .alex-landing .ped-grid{ grid-template-columns:1fr; }
    .alex-landing .stepper .step{ font-size:0.62rem; }
    .alex-landing .photo-feature .photo-frame{ border-radius:1rem; }
    .alex-landing .photo-feature .photo-img{ aspect-ratio:4 / 3; }
    .alex-landing .photo-feature .photo-chip{ right:0.8rem; bottom:0.8rem; padding:0.55rem 0.9rem 0.55rem 0.6rem; gap:0.5rem; }
    .alex-landing .add-alex .step-list{ grid-template-columns:1fr; gap:1rem; }
    .alex-landing .add-alex .add-alex-intro{ grid-template-columns:1fr; }
    .alex-landing .add-alex .add-alex-img{ display:none; }
    .alex-landing .add-alex .pricing-toggle{ padding:0.9rem 1rem; font-size:0.9rem; }
    .alex-landing .add-alex .pricing-body{ padding:0.2rem 1rem 1.2rem; }
    .alex-landing .add-alex .pricing-table{ font-size:0.82rem; }
    .alex-landing .add-alex .pricing-table th{ font-size:0.75rem; letter-spacing:0; white-space:normal; }
    .alex-landing .add-alex .pricing-table th, .alex-landing .add-alex .pricing-table td{ padding:0.65rem 0.55rem; }
    .alex-landing .add-alex .pricing-table-wrap{ border-radius:0.7rem; box-shadow:none; }
    .alex-landing .add-alex .pricing-panel{ padding:1rem 0.8rem 1.1rem; }
  }
  @media (max-width: 380px){
    .alex-landing .add-alex .pricing-table th, .alex-landing .add-alex .pricing-table td{ padding:0.6rem 0.4rem; }
    .alex-landing .add-alex .pricing-panel{ padding:0.9rem 0.6rem 1rem; }
  }