:root{
    --bg:#FFFDF3;
    --sage:#8A9785;
    --sage-dark:#6E7A6A;
    --purple:#947EA4;
    --ink:#1F2420;
    --soft:#5B6158;
    --line:#E6E4DB;
    --red:#D62828;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .page{
    max-width:34rem;
    margin:0 auto;
    padding:28px 20px 56px;
    text-align:center;
  }
  h1,h2{
    font-family:'Montserrat',sans-serif;
    margin:0;
    line-height:1.2;
  }
  h1{
    font-size:22px;
    font-weight:800;
    color:var(--purple);
    letter-spacing:-0.01em;
  }
  h2{
    font-size:20px;
    font-weight:800;
    color:var(--purple);
    margin-bottom:18px;
  }
  p{margin:0;}
  strong{font-weight:700;}
  section{margin-top:44px;}
  .sub{margin-top:10px; font-size:14px;}

  /* placeholders */
  .ph{
    border:1.5px dashed rgba(162,91,31,0.55);
    background:rgba(162,91,31,0.06);
    color:#a25b1f;
    font-family:ui-monospace,Menlo,monospace;
    font-size:12px;
    line-height:1.5;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:14px;
  }
  .logo{display:block; width:100%; max-width:260px; height:auto; margin:0 auto; mix-blend-mode:multiply;}
  .hero-img{display:block; width:100%; max-width:420px; height:auto; margin:22px auto 0;}
  .mock-img{display:block; width:100%; height:auto; border-radius:16px;}
  .teacher-img{display:block; width:100%; max-width:320px; aspect-ratio:1/1; object-fit:cover; object-position:50% 18%; margin:0 auto 18px; border-radius:18px;}
  .ph-inline{
    display:inline;
    border:1px dashed rgba(162,91,31,0.55);
    background:rgba(162,91,31,0.07);
    color:#a25b1f;
    font-family:ui-monospace,Menlo,monospace;
    font-size:.85em;
    padding:0 5px;
    border-radius:5px;
  }

  /* badge */
  .bf{
    display:inline-block;
    background:#111;
    color:#fff;
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:13px;
    letter-spacing:.04em;
    padding:5px 12px;
    border-radius:6px;
    margin-top:22px;
  }
  .bf span{color:#ff3b3b;}

  /* CTA */
  .cta{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:56px;
    margin-top:14px;
    padding:0 16px;
    background:var(--sage);
    color:#fff;
    border-radius:16px;
    border:5px solid rgba(138,151,133,0.25);
    background-clip:padding-box;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-decoration:none;
    transition:transform .15s ease, background .15s ease;
  }
  .cta:hover{background:var(--sage-dark); transform:translateY(-1px);}

  /* offer box */
  .offer{
    margin:14px auto 0;
    max-width:300px;
    border:1.5px solid var(--sage);
    border-radius:12px;
    overflow:hidden;
    background:#fff;
  }
  .offer-head{
    background:var(--sage);
    color:#fff;
    font-family:'Montserrat',sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.05em;
    padding:5px 8px;
  }
  .offer-body{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
  }
  .offer-old{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    color:var(--red);
    font-size:14px;
  }
  .offer-old s{font-size:16px;}
  .offer-new{
    background:#f3f2ec;
    border-radius:8px;
    padding:6px 12px;
    text-align:right;
  }
  .offer-new small{display:block; font-size:9px; color:var(--soft); letter-spacing:.04em;}
  .offer-new b{font-family:'Montserrat',sans-serif; font-size:22px; font-weight:800; color:var(--ink);}

  /* testimonials */
  .testi{
    text-align:left;
    border:1px solid var(--line);
    background:#fff;
    border-radius:12px;
    padding:14px;
    margin-bottom:10px;
    display:flex;
    gap:12px;
  }
  .avatar{
    width:44px; height:44px; border-radius:50%;
    flex-shrink:0;
    object-fit:cover;
    border:1.5px dashed rgba(162,91,31,0.55);
    background:rgba(162,91,31,0.06);
  }
  img.avatar{border:none;}
  .stars{color:#F5C518; font-size:13px; letter-spacing:2px;}
  .testi .name{font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; color:#000;}
  .testi .date{font-size:10px; color:var(--soft);}
  .testi p{margin-top:6px; font-size:13.5px; line-height:1.55; color:var(--purple);}

  /* receive list */
  .list{
    list-style:none;
    padding:0;
    margin:22px 0 0;
    text-align:left;
  }
  .list li{
    display:flex;
    gap:10px;
    margin-bottom:12px;
    font-size:13.5px;
  }
  .list li::before{
    content:"✔";
    flex-shrink:0;
    width:18px; height:18px;
    border-radius:4px;
    background:#3FA34D;
    color:#fff;
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:2px;
  }

  /* for whom */
  .whom{
    text-align:left;
    list-style:none;
    padding:0;
    margin:0 0 20px;
  }
  .whom li{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px 14px 12px 44px;
    margin-bottom:8px;
    position:relative;
    font-size:14px;
    font-weight:500;
  }
  .whom li::before{
    content:"";
    position:absolute;
    left:14px; top:50%;
    width:20px; height:20px;
    transform:translateY(-50%);
    border-radius:50%;
    background:var(--sage);
  }
  .whom li::after{
    content:"";
    position:absolute;
    left:21px; top:50%;
    width:5px; height:9px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:translateY(-62%) rotate(45deg);
  }
  .note{
    background:#EAF6E6;
    border:1px solid #bfe2b6;
    border-radius:10px;
    padding:12px 14px;
    font-size:12.5px;
    text-align:left;
    color:#2f4a2c;
  }


  .whom-img{display:block; width:100%; max-width:440px; height:auto; margin:0 auto 20px; mix-blend-mode:multiply;}

  .plist{list-style:none; padding:0; margin:22px 0 0; text-align:center;}
  .plist li{font-size:12.5px; font-weight:600; color:#8A8F85; line-height:2.1;}

  /* teacher */
  .teacher p{
    text-align:left;
    font-size:13.5px;
    margin-bottom:12px;
  }

  /* footer */
  footer{
    margin-top:50px;
    padding-top:22px;
    border-top:1px solid var(--line);
    font-size:11px;
    line-height:1.6;
    color:var(--soft);
    text-align:center;
  }
  footer p{margin-bottom:10px;}
  footer a{color:var(--soft);}