:root{
    --cream:#F2F5EF;
    --cream-2:#F8FBF5;
    --ink:#1B2A1F;
    --ink-soft:#4A5B4F;
    --teal:#6FA02B;
    --teal-dark:#537A20;
    --terracotta:#37A953;
    --terracotta-dark:#357444;
    --gold:#C58B2B;
    --line:#DCE5D6;
    --shadow: 0 20px 45px -20px rgba(27,42,31,0.25);
    --radius: 20px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;scroll-padding-top:72px;}
  section[id], [id]{scroll-margin-top:72px;}
  body{
    margin:0;
    font-family:'Plus Jakarta Sans', sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:600;
    line-height:1.15;
    margin:0 0 .5em;
    color:var(--ink);
  }
  p{margin:0 0 1em;}
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
  .badge{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(111,160,43,0.09);
    color:var(--teal-dark);
    font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;
    padding:7px 14px;border-radius:999px;
  }
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;
    border:2px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn-primary{background:#2F6B3C;color:#fff;box-shadow:0 10px 25px -8px rgba(47,107,60,.55);}
  .btn-primary:hover{background:#22522C;transform:translateY(-2px);}
  .btn-ghost{background:transparent;border-color:var(--teal);color:var(--teal-dark);}
  .btn-ghost:hover{background:var(--teal);color:#fff;transform:translateY(-2px);}
  .btn-light{background:#fff;color:var(--teal-dark);}
  .btn-light:hover{transform:translateY(-2px);}

  /* ---------- draft ribbon ---------- */
  .draft-ribbon{
    background:var(--ink);color:var(--cream-2);
    text-align:center;font-size:13px;font-weight:600;
    padding:9px 16px;letter-spacing:.01em;
  }
  .draft-ribbon strong{color:var(--gold);}

  /* ---------- nav ---------- */
  header{position:sticky;top:0;z-index:40;background:rgba(242,245,239,0.92);backdrop-filter:blur(8px);box-shadow:0 12px 26px -22px rgba(27,42,31,.5);}
  nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1120px;margin:0 auto;}
  .logo{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:700;font-size:20px;}
  .logo-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:16px;}
  .nav-links{display:flex;gap:28px;font-weight:600;font-size:15px;color:var(--ink-soft);}
  .nav-links a:hover{color:var(--teal-dark);}
  .nav-cta{display:flex;align-items:center;gap:16px;}
  .menu-btn{display:none;background:none;border:none;cursor:pointer;padding:6px;}
  .menu-btn span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;}
  @media(max-width:860px){
    .nav-links{position:fixed;inset:64px 0 auto 0;background:var(--cream-2);flex-direction:column;padding:20px 24px;gap:18px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .25s ease;}
    .nav-links.open{transform:translateY(0);}
    .menu-btn{display:block;}
    .nav-cta .btn-ghost{display:none;}
  }

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;padding:64px 0 68px;
    background:
      radial-gradient(120% 95% at 90% 6%, rgba(111,160,43,.09), transparent 58%),
      radial-gradient(72% 62% at 0% 58%, rgba(55,169,83,.075), transparent 66%),
      radial-gradient(70% 60% at 55% 50%, rgba(248,251,245,.85), transparent 70%),
      linear-gradient(180deg, #FAFDF8 0%, var(--cream) 52%, #EAF0E4 86%, var(--cream) 100%);}
  .hero-wash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.72;
    -webkit-mask-image:radial-gradient(92% 78% at 95% 60%, #000 0%, rgba(0,0,0,.4) 28%, transparent 62%),
      linear-gradient(to top, transparent 0%, #000 16%);
    mask-image:radial-gradient(92% 78% at 95% 60%, #000 0%, rgba(0,0,0,.4) 28%, transparent 62%),
      linear-gradient(to top, transparent 0%, #000 16%);
    -webkit-mask-composite:source-in; mask-composite:intersect;}
  .footer-wash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.2;
    -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 62%);
    mask-image:linear-gradient(to top, #000 0%, transparent 62%);}
  .hero-pattern{position:absolute;inset:0;opacity:.5;pointer-events:none;}
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative;}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}
  .hero h1{font-size:clamp(34px,5vw,54px);}
  .hero .lede{font-size:18px;color:var(--ink-soft);max-width:520px;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px;}
  .hero-stats{display:flex;gap:32px;margin-top:26px;flex-wrap:wrap;}
  @media(max-width:900px){
    .hero{padding:40px 0 44px;}
    .hero-stats{gap:22px;margin-top:22px;}
    .hero-card{padding:22px;}
    .avatar-ring{width:112px;height:112px;margin-bottom:14px;}
  }
  @media(max-width:600px){
    .hero{padding:30px 0 34px;}
    .hero-ctas{margin-top:20px;gap:10px;}
    .hero-stats{gap:18px 26px;margin-top:20px;}
    .hero .lede{font-size:16.5px;}
  }
  .hero-stat b{font-family:'Fraunces',serif;font-size:26px;display:block;color:var(--teal-dark);}
  .hero-stat span{font-size:13px;color:var(--ink-soft);}
  .hero-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
  .chip{background:rgba(197,139,43,.15);color:#644312;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;}




  .hero-card{position:relative;background:var(--cream-2);border-radius:28px;padding:24px;
    box-shadow:var(--shadow);border:1px solid var(--line);}
  .avatar-ring{width:140px;height:140px;border-radius:50%;margin:0 auto 18px;
    background:conic-gradient(from 180deg,var(--teal),var(--gold),var(--terracotta),var(--teal));
    display:flex;align-items:center;justify-content:center;padding:6px;}
  .avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--cream-2);}
  .hero-card h3{text-align:center;font-size:22px;margin-bottom:2px;}
  .hero-card .role{text-align:center;color:var(--ink-soft);font-size:14px;margin-bottom:18px;}


  /* ---------- hero direct-contact row ----------
     Anco's call, 2026-08-12: a visitor who wants to talk to her should not have
     to reach the footer to find out how. Instagram / YouTube / WhatsApp sit in
     the hero.

     Preply and iTalki are deliberately NOT in this row. They take 18-33%
     commission, and this site exists to give her a channel that doesn't — so
     putting a marketplace level with the direct channels would charge her for a
     visitor the site just won. They stay in the footer and in the review
     attributions, where they do their real job: proof that she is established.

     44px min-height on every pill: these are the primary touch targets on a
     phone. */
  .hero-connect{margin-top:22px;}
  .hero-connect-label{display:block;font-size:12px;font-weight:800;letter-spacing:.07em;
    text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px;}
  .hero-connect-row{display:flex;flex-wrap:wrap;gap:10px;}
  .conn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;
    border-radius:999px;background:var(--cream-2);border:1px solid var(--line);
    color:var(--ink);font-size:14.5px;font-weight:700;text-decoration:none;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;}
  .conn:hover{transform:translateY(-2px);border-color:var(--brand);
    box-shadow:0 10px 18px -12px rgba(27,42,31,.45);}
  .conn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  .conn .cico{flex:none;display:block;border-radius:4px;}
  .conn-ig{--brand:#C13584;}
  .conn-yt{--brand:#C4302B;}
  .conn-wa{--brand:#1FA855;}
  @media(max-width:600px){
    .hero-connect{margin-top:18px;}
    /* three equal pills on one row. Left to flex-wrap, WhatsApp dropped onto a
       second line by itself, which reads as a mistake rather than a set. */
    .hero-connect-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
    .conn{justify-content:center;padding:9px 6px;font-size:12.5px;gap:6px;}
    .conn .cico{width:18px;height:18px;}
  }
  @media(max-width:360px){
    .conn{font-size:11.5px;gap:4px;padding:9px 4px;}
  }


  /* ---------- folded long lists ----------
     The page ran to 17 screens on a phone, and the tail was repetition: six
     videos and six review cards go single-column below 600px, and the FAQ is 16
     rows. This shows a first batch and puts the rest behind one tap.

     NOTHING IS DELETED. Every card she approved is still in the HTML, still
     crawlable, still there for anyone who taps. The hiding is applied by JS, so
     with JS off the page is exactly as she approved it and no button appears —
     which is also why .fold-hidden is not in the stylesheet as a default. */
  .fold-hidden{display:none !important;}
  .fold-more-wrap{display:flex;justify-content:center;margin-top:14px;}
  .fold-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;
    padding:11px 22px;border-radius:999px;cursor:pointer;
    background:transparent;border:1.5px solid var(--teal);color:var(--teal-dark);
    font-family:inherit;font-size:14.5px;font-weight:700;
    transition:background .16s ease, transform .16s ease;}
  .fold-more:hover{background:rgba(111,160,43,.10);transform:translateY(-2px);}
  .fold-more:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  .fold-more .chev{transition:transform .2s ease;}
  .fold-more[aria-expanded="true"] .chev{transform:rotate(180deg);}
  /* the packages section is dark — the FAQ/reviews variants sit on cream, but
     keep a light variant available in case a fold is ever added there */
  .courses .fold-more{border-color:rgba(255,255,255,.5);color:#fff;}
  .courses .fold-more:hover{background:rgba(255,255,255,.10);}

  /* ---------- section shell ---------- */
  /* ---------- spacing scale ----------
     Was a flat  section{padding:44px 0 84px}  at every width with no mobile
     variant. On a 390px phone that came to ~1,980px of pure vertical space
     (10 sections x 128px + 10 section-heads x 52px) — about 2.3 of the 17
     screens the page ran to. The 44/84 split also read as lopsided: every
     heading sat closer to the section above it than to its own body.
     One scale, three steps. Tune the page's density from here, not inline. */
  :root{ --sec-y-top:36px; --sec-y-bot:40px; --head-gap:26px; --grid-gap:20px; --badge-gap:9px; }
  @media(max-width:900px){ :root{ --sec-y-top:28px; --sec-y-bot:32px; --head-gap:20px; --grid-gap:16px; --badge-gap:8px; } }
  @media(max-width:600px){ :root{ --sec-y-top:18px; --sec-y-bot:22px; --head-gap:14px; --grid-gap:14px; --badge-gap:6px; } }
  section{padding:var(--sec-y-top) 0 var(--sec-y-bot);}
  .section-head{max-width:640px;margin:0 auto var(--head-gap);text-align:center;}
  .section-head .badge{margin-bottom:var(--badge-gap);}
  .section-head h2{font-size:clamp(28px,3.6vw,38px);}
  .section-head p{color:var(--ink-soft);font-size:16.5px;}
  .fade{opacity:1;transform:none;}
  .js .fade{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
  .js .fade.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion: reduce){
    .js .fade{opacity:1;transform:none;transition:none;}
    .vid, .btn{transition:none;}
  }

  /* ---------- about ---------- */
  .about{background:linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 16%, var(--cream-2) 84%, var(--cream) 100%);}
  .about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;}
  @media(max-width:900px){.about-grid{gap:28px;}}
  @media(max-width:600px){.about-grid{gap:22px;}}
  @media(max-width:860px){.about-grid{grid-template-columns:1fr;}}
  /* a square photo is a whole screen of height on a phone */
  @media(max-width:600px){.about-photo{aspect-ratio:16/10;}}
  .about-photo{aspect-ratio:1/1;border-radius:24px;border:1px solid var(--line);background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 60%),
      linear-gradient(150deg,var(--teal) 0%, var(--teal-dark) 60%, #496B1B 100%);
    position:relative;overflow:hidden;box-shadow:var(--shadow);
  }
  .about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .quote{font-family:'Fraunces',serif;font-size:22px;color:var(--teal-dark);margin:18px 0;font-style:italic;}
  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);margin-top:0;}
  @media(max-width:760px){.features{grid-template-columns:1fr;}}
  .feature{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px;}
  @media(max-width:600px){.feature{padding:18px;}.feature .icon{margin-bottom:10px;}}
  .feature .icon{width:46px;height:46px;border-radius:12px;background:rgba(55,169,83,.14);color:var(--terracotta-dark);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .feature h3{font-size:18px;margin-bottom:8px;}
  .feature p{color:var(--ink-soft);font-size:14.5px;margin:0;}

  /* ---------- courses ---------- */
  .courses{color:var(--cream-2);background:var(--ink);}
  .courses h2, .courses h3{color:var(--cream-2);}
  .courses .section-head p{color:#B9C4B2;}
  .courses .section-head .badge{background:rgba(255,255,255,.1);color:var(--gold);}
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);}
  @media(max-width:900px){.plans{grid-template-columns:1fr;}}
  .plan{background:#203225;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;}
  @media(max-width:600px){.plan{padding:20px;}}
  .plan.featured{background:linear-gradient(165deg,var(--teal),var(--teal-dark));border-color:transparent;transform:translateY(-10px);box-shadow:0 25px 50px -20px rgba(0,0,0,.5);}
  .plan-tag{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);}
  .plan.featured .plan-tag{color:#E3ECD6;}
  .plan h3{font-size:22px;margin:10px 0 4px;color:#fff;}
  .plan .price{font-family:'Fraunces',serif;font-size:36px;margin:10px 0;color:#fff;}
  .plan .price span{font-size:14px;font-weight:400;color:#B9C4B2;font-family:'Plus Jakarta Sans',sans-serif;}
  .plan ul{list-style:none;margin:0 0 24px;padding:0;flex:1;}
  .plan li{padding:8px 0;border-top:1px solid rgba(255,255,255,.08);font-size:14.5px;color:#DDE6D6;display:flex;gap:10px;}
  .plan li:first-child{border-top:none;}
  .plan .btn{width:100%;}
  .plan .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5);}
  .plan .btn-ghost:hover{background:#fff;color:var(--teal-dark);border-color:#fff;}
  .plan-note{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:#B9C4B2;text-align:center;}
  .plan.featured .plan-note{color:#E3ECD6;}
  .plan-ask{display:block;margin-top:10px;text-align:center;font-size:13.5px;font-weight:600;color:#DDE6D6;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.38);}
  .plan-ask:hover{color:#fff;text-decoration-color:#fff;}

  /* ---------- testimonials ---------- */
  .testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);}
  @media(max-width:900px){.testimonials-grid{grid-template-columns:1fr;}}
    .t-card{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;}
  /* Anco, 2026-08-12: these are one-line quotes and they were sitting in a 184px
     card. Two-up below 600px so a short review does not own a whole phone row. */
  @media(max-width:600px){
    .testimonials-grid{grid-template-columns:repeat(2,1fr);}
    .t-card{padding:14px;}
    .t-card p{font-size:14px;line-height:1.45;}
    .stars{font-size:12px;margin-bottom:5px;}
    .t-person{gap:8px;margin-top:9px;}
    .t-avatar{width:28px;height:28px;font-size:12.5px;}
    .t-person b{font-size:13px;}
    .t-person span{font-size:11.5px;}
  }
  .t-card .stars{color:var(--gold);letter-spacing:1.5px;margin-bottom:6px;font-size:13px;line-height:1.1;}
  .t-card p{font-size:15px;color:var(--ink-soft);margin-bottom:0;line-height:1.5;}
  .t-person{display:flex;align-items:center;gap:10px;margin-top:10px;}
  .t-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--terracotta),var(--gold));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;}
  .t-person b{font-size:14px;display:block;}
  .t-person span{font-size:12.5px;color:var(--ink-soft);}

  /* ---------- instagram / social ---------- */
  /* the band carries its own padding, so the section around it should not add a second helping */
  .social-wrap{padding-top:var(--grid-gap);padding-bottom:var(--grid-gap);}
  .social{background:linear-gradient(135deg,#285E33,#73511F);color:#fff;text-align:center;border-radius:28px;padding:40px 28px;margin:0 auto;max-width:1120px;}
  @media(max-width:900px){.social{padding:36px 24px;border-radius:22px;}}
  @media(max-width:600px){.social{padding:28px 20px;}}
  .social h2{color:#fff;}
  .social p{color:rgba(255,255,255,.95);max-width:480px;margin:0 auto 24px;}

  /* ---------- review stats strip ---------- */
  .review-stats{
    display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
    max-width:900px;margin:0 auto 40px;
  }
  .rstat{
    display:flex;align-items:center;gap:10px;background:var(--cream-2);
    border:1px solid var(--line);border-radius:999px;padding:12px 22px;
  }
  .rstat b{font-family:'Fraunces',serif;font-size:20px;color:var(--teal-dark);line-height:1;}
  .rstat span{font-size:13.5px;color:var(--ink-soft);}
  .source-note{margin-top:14px;
    text-align:center;font-size:13.5px;color:var(--ink-soft);
    margin-top:28px;
  }
  .source-note a{color:var(--teal-dark);font-weight:700;text-decoration:underline;}

  /* ---------- outcomes ---------- */
  .outcomes{background:linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 16%, var(--cream-2) 84%, var(--cream) 100%);}
  .outcome-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap);max-width:840px;margin:0 auto;}
  @media(max-width:760px){.outcome-list{grid-template-columns:1fr;}}
  .outcome{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:14px 16px;}
  .outcome .tick{flex:none;width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;}
  .outcome p{margin:0;font-size:15px;color:var(--ink-soft);}

  /* ---------- guarantee ---------- */
  .guarantee-wrap{padding:56px 0 44px;}
  .guarantee{max-width:680px;margin:0 auto;text-align:center;padding:44px 40px;border-radius:24px;
    background:linear-gradient(180deg,#F9FCF6,var(--cream-2));
    border:1.5px dashed rgba(197,139,43,.62);
    box-shadow:0 18px 40px -28px rgba(27,42,31,.35);}
  @media(max-width:600px){.guarantee-wrap{padding:64px 0 48px;}.guarantee{padding:34px 24px;}}
  .guarantee .seal{width:58px;height:58px;border-radius:50%;background:rgba(197,139,43,.18);color:#644312;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px;}
  .guarantee h3{font-size:23px;margin-bottom:10px;}
  .guarantee p{color:var(--ink-soft);margin:0;font-size:15px;}

  /* ---------- FAQ ---------- */
  .faq-list{max-width:760px;margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item summary{
    cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
    font-weight:700;font-size:16.5px;color:var(--ink);
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
    font-size:24px;font-weight:400;color:var(--teal);transition:transform .2s ease;
  }
  .faq-item[open] summary::after{content:"–";}
  .faq-item summary:hover{color:var(--teal-dark);}
  .faq-item .answer{padding:0 8px 22px 0;color:var(--ink-soft);font-size:15px;}
  .faq-item .answer p:last-child{margin-bottom:0;}


  /* ---------- Indonesian motifs (original SVG, drawn for this site) ---------- */
  .hero-cloud{position:absolute;pointer-events:none;opacity:.26;}
  .hero-cloud g{stroke:url(#gCloud);}
  .hero-cloud.one{top:6%;right:3%;width:185px;}
  .hero-cloud.two{display:none;}
  @media(max-width:900px){.hero-cloud{display:none;}}
  .feature .icon svg{width:30px;height:30px;}
  .guarantee .seal{background:none;margin-bottom:18px;}
  .guarantee .seal svg{width:58px;height:58px;}
  .outcome .tick{background:none;color:var(--teal);}
  .outcome .tick svg{width:20px;height:20px;}
  .melati-rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 14px;color:var(--gold);}
  .melati-rule svg{width:22px;height:22px;}
  .melati-rule i{display:block;height:1px;width:56px;background:var(--line);}


  /* ---------- free lesson grid ---------- */
  .lessons{background:linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 16%, var(--cream-2) 84%, var(--cream) 100%);}
  .vids{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);}
  @media(max-width:900px){.vids{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:600px){.vids{grid-template-columns:1fr;}}
  .vid{display:block;transition:transform .18s ease;}
  .vid:hover{transform:translateY(-4px);}
  .vid .thumb{display:block;position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
    border:1px solid var(--line);background:var(--cream);box-shadow:var(--shadow);}
  .vid .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .vid .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
  .vid .play::after{content:"";width:52px;height:52px;border-radius:50%;background:rgba(27,42,31,.6);transition:background .18s ease;}
  .vid .play::before{content:"";position:absolute;z-index:2;border-style:solid;
    border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;margin-left:4px;}
  .vid:hover .play::after{background:var(--terracotta);}
  .vid b{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:17px;margin:14px 0 3px;color:var(--ink);}
  .vid .vmeta{display:block;font-size:13.5px;color:var(--ink-soft);}




  /* ---------- invitation for students who don't speak English ---------- */
  .bahasa-invite{max-width:720px;margin:52px auto 0;padding:30px 34px;border-radius:20px;
    background:linear-gradient(180deg,#F9FCF6,var(--cream-2));border:1px solid var(--line);
    box-shadow:0 18px 40px -30px rgba(27,42,31,.35);text-align:center;}
  .bahasa-invite .id-lead{font-family:'Fraunces',serif;font-size:21px;color:var(--teal-dark);margin-bottom:10px;}
  .bahasa-invite .id-body{font-size:15.5px;color:var(--ink);margin-bottom:14px;}
  .bahasa-invite .id-en{font-size:13.5px;color:var(--ink-soft);margin:0;padding-top:14px;border-top:1px solid var(--line);}

  /* ---------- final CTA ---------- */
  .cta-final{text-align:center;}
  .cta-final h2{font-size:clamp(28px,4vw,40px);max-width:620px;margin-left:auto;margin-right:auto;}
  .cta-final .btn-primary{margin-top:8px;padding:16px 34px;font-size:16px;}

  /* ---------- footer ---------- */
  footer{position:relative;overflow:hidden;background:var(--ink);color:#B9C4B2;padding:38px 0 22px;font-size:14px;}
  .footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1);}
  .footer-logo{display:flex;align-items:center;gap:10px;color:#fff;font-family:'Fraunces',serif;font-size:19px;font-weight:700;margin-bottom:10px;}
  .footer-links{display:flex;gap:48px;flex-wrap:wrap;}
  .footer-col h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;}
  .footer-col a{display:block;color:#B9C4B2;margin-bottom:9px;}
  .footer-col a:hover{color:#fff;}

  /* Powered-by credit — tuned for THIS dark, patterned footer specifically.
     The shared snippet's default (background:rgba(127,127,127,.12); color:inherit)
     inherits the muted #838F79 copyright color and nearly disappears against the
     batik wash — so this overrides with an explicit cream-tinted pill instead of
     relying on inheritance. */
  .a2i-line{display:flex;align-items:center;justify-content:center;padding:0 0 18px;}
  .a2i-chip{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;
    padding:10px 18px;border-radius:999px;font-size:13px;line-height:1.3;
    background:rgba(242,245,239,.10);border:1px solid rgba(242,245,239,.30);}
  .a2i-chip .a2i-pre{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;
    font-weight:700;color:rgba(242,245,239,.7);}
  .a2i-chip a{text-decoration:none;}
  .a2i-chip a:hover .a2i-word{text-decoration:underline;}
  .a2i-chip .a2i-word{font-family:Georgia,'Times New Roman',serif;font-weight:600;
    letter-spacing:-.035em;font-size:15px;color:#ECF1E7;white-space:nowrap;}
  .a2i-chip .a2i-word sup{font-size:.7em;font-weight:700;color:#6BE0BB;vertical-align:baseline;
    position:relative;bottom:-.18em;margin-left:1px;}

  .bottom-bar{display:flex;justify-content:space-between;align-items:center;padding-top:22px;flex-wrap:wrap;gap:10px;font-size:13px;color:#838F79;}

  .reach-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
    padding:18px;background:rgba(27,42,31,.55);backdrop-filter:blur(3px);}
  .reach-overlay[hidden]{display:none;}
  .reach-card:focus{outline:none;}
  .reach-card{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);
    width:100%;max-width:430px;padding:24px 22px 20px;position:relative;box-shadow:0 30px 70px -25px rgba(27,42,31,.55);
    max-height:92vh;overflow:auto;}
  .reach-card h3{font-family:'Fraunces',serif;font-size:21px;margin:0 0 4px;padding-right:28px;line-height:1.25;}
  .reach-sub{color:var(--ink-soft);font-size:14px;margin:0 0 16px;}
  .reach-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:50%;
    background:transparent;color:var(--ink-soft);font-size:24px;line-height:1;cursor:pointer;}
  .reach-x:hover{background:rgba(27,42,31,.07);}
  .reach-opt{display:flex;align-items:center;gap:13px;padding:13px 14px;margin-bottom:9px;
    border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);
    min-height:44px;transition:border-color .15s,transform .15s;}
  .reach-opt:hover{border-color:var(--teal);transform:translateY(-1px);}
  .reach-opt:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
  .reach-ico{flex-shrink:0;display:flex;}
  .reach-txt{display:flex;flex-direction:column;flex:1;min-width:0;}
  .reach-txt b{font-size:15px;font-weight:700;}
  .reach-txt em{font-style:normal;font-size:12.5px;color:var(--ink-soft);margin-top:1px;}
  .reach-arrow{color:var(--ink-soft);font-size:22px;line-height:1;}
  .reach-copy{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
  .reach-copy-label{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:6px;}
  .reach-copy p{font-size:13.5px;color:var(--ink);background:rgba(197,139,43,.10);border-radius:10px;
    padding:10px 12px;margin:0 0 9px;line-height:1.5;}
  #reachCopy{width:100%;min-height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;
    font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;}
  #reachCopy:hover{border-color:var(--teal);}
  @media(max-width:600px){ .reach-card{padding:20px 16px 16px;} .reach-card h3{font-size:19px;} }