:root{
  --bg:#f4f2ec; --ink:#090909; --body-text:#17223d; --sage:#a3bd8b; --yellow:#ffd400; --card:#f8f6f1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Montserrat",Arial,sans-serif}
a{color:inherit;text-decoration:none}
.site-header{
  position:relative;z-index:20;width:min(1435px,88vw);height:178px;margin:auto;
  display:grid;grid-template-columns:390px 1fr auto;align-items:center;gap:35px
}
.brand{display:flex;align-items:center;gap:18px;font-size:22px;font-weight:700;line-height:1.12}
.brand-mark{
  width:112px;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 112px;
}
.brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.main-nav{display:flex;justify-content:flex-end;gap:54px;font-size:16px;font-weight:400}
.main-nav a{transition:opacity .18s}.main-nav a:hover{opacity:.55}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--sage);border-radius:4px;font-weight:600}
.header-cta{width:280px;height:62px;font-size:18px}
.hero{position:relative;width:min(1435px,88vw);height:690px;margin:auto}
.hero-copy{position:absolute;z-index:6;left:0;top:92px}
.hero-copy h1{margin:0;font-size:62px;line-height:1.16;font-weight:600;letter-spacing:.005em}
.circled{position:relative;display:inline-block}
.circled:after{
  content:"";position:absolute;left:-13px;right:-13px;top:-8px;bottom:-7px;
  border:4px solid var(--yellow);border-radius:50%;transform:rotate(4deg)
}
.hero-copy p{font-size:18px;line-height:1.35;font-weight:500;margin:24px 0 38px}
.hero-cta{width:330px;height:62px;padding:0 25px;font-size:17px;justify-content:space-between}
.arrow{font-size:36px;font-weight:400;line-height:1}
.hero-visual{position:absolute;z-index:3;right:0;top:40px;width:72%;height:515px}
.hero-visual img{position:absolute;z-index:3;width:78%;right:0;bottom:-3px;display:block}
.sage-blob{
  position:absolute;
  z-index:1;
  left:0;
  bottom:0;
  width:46%;
  height:150px;
  background:var(--sage);
  border-radius:150px 150px 0 0;
}
/* Low extension only: it can sit behind the table/paws, never behind the face. */
.sage-blob::after{
  content:"";
  position:absolute;
  left:82%;
  bottom:0;
  width:135%;
  height:48px;
  background:var(--sage);
  border-radius:0 14px 14px 0;
}
.yellow-decoration{
  position:fixed;z-index:0;right:-92px;top:-86px;width:330px;height:360px;background:var(--yellow);
  border-radius:44% 0 34% 50%;transform:rotate(13deg)
}
.yellow-decoration:after{
  content:"";position:absolute;width:160px;height:125px;left:-24px;bottom:-23px;background:var(--yellow);
  border-radius:50% 38% 50% 50%;transform:rotate(-18deg)
}
.white-cutout{
  position:absolute;z-index:2;right:16px;top:83px;width:55px;height:58px;background:var(--bg);
  border-radius:55% 0 0 55%;transform:rotate(-10deg)
}
.benefits{
  position:absolute;z-index:10;left:0;right:0;bottom:0;height:142px;background:var(--card);
  border-radius:12px;box-shadow:0 14px 30px rgba(82,69,39,.17);
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding:0 48px;gap:30px
}
.benefit{display:flex;align-items:center;justify-content:center;gap:17px;font-size:20px;line-height:1.28;font-weight:600}
.benefit svg{width:50px;height:50px;flex:0 0 50px;fill:none;stroke:var(--ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.benefit:nth-child(2) svg{width:42px}
.placeholder{min-height:55vh;display:grid;place-items:center;border-top:1px solid rgba(0,0,0,.06)}
.placeholder h2{font-size:42px}
.menu-toggle{display:none}

@media(max-width:1100px){
 .site-header{grid-template-columns:300px 1fr auto}.main-nav{gap:25px;font-size:13px}
 .header-cta{width:230px;font-size:14px}.hero-copy h1{font-size:51px}.hero-visual{width:67%}
 .benefits{padding:0 25px;gap:15px}.benefit{font-size:16px;gap:10px;font-weight:600}.benefit svg{width:40px;height:40px;flex-basis:40px}
}
@media(max-width:820px){
 .site-header{width:calc(100% - 36px);height:105px;grid-template-columns:1fr auto}
 .brand{font-size:16px}.brand-mark{width:70px;height:58px;flex-basis:70px}.brand-mark img{width:100%;height:100%;object-fit:contain}
 .header-cta{display:none}.menu-toggle{display:flex;flex-direction:column;gap:5px;border:0;background:none;padding:10px}
 .menu-toggle span{display:block;width:25px;height:2px;background:#111}
 .main-nav{display:none;position:absolute;top:90px;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--card);padding:25px;border-radius:10px;box-shadow:0 12px 25px #0002}
 .main-nav.open{display:flex}.hero{width:calc(100% - 36px);height:auto;padding-bottom:25px}
 .hero-copy{position:relative;top:auto;padding-top:40px}.hero-copy h1{font-size:clamp(40px,11vw,58px)}
 .hero-visual{position:relative;top:auto;width:100%;height:390px;margin-top:-20px}.hero-visual img{width:100%}
 .sage-blob{height:110px;width:52%}.sage-blob::after{height:36px;width:120%}.benefits{position:relative;height:auto;grid-template-columns:1fr 1fr;padding:28px;gap:28px}
 .benefit{justify-content:flex-start}.yellow-decoration{width:190px;height:210px;right:-100px}
}
@media(max-width:520px){
 .hero-copy h1{font-size:40px}.hero-copy p{font-size:16px}.hero-cta{width:100%;font-size:14px}
 .hero-visual{height:295px}.benefits{grid-template-columns:1fr}.benefit{font-size:17px;font-weight:600}
}

/* v12: heart from the approved mockup */
.headline-wrap{
  position:relative;
  display:inline-block;
}
.hero-heart{
  position:absolute;
  width:62px;
  height:62px;
  right:-82px;
  top:35px;
  overflow:visible;
}
.hero-heart path{
  fill:none;
  stroke:var(--yellow);
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:rotate(8deg);
  transform-origin:center;
}

@media(max-width:820px){
  .hero-heart{
    width:48px;
    height:48px;
    right:-55px;
    top:30px;
  }
}
@media(max-width:520px){
  .hero-heart{
    width:40px;
    height:40px;
    right:-42px;
    top:24px;
  }
}


/* v13 — use the user's exact combined logo artwork */
.brand-full-logo{
  display:block;
  width:310px;
  height:auto;
  object-fit:contain;
  object-position:left center;
}
.brand{
  overflow:visible !important;
}
@media(max-width:1100px){
  .brand-full-logo{ width:270px; }
}
@media(max-width:820px){
  .brand-full-logo{ width:225px; }
}
@media(max-width:520px){
  .brand-full-logo{ width:190px; }
}

/* v15 — extra breathing room below the pictogram bar */
@media (min-width:821px){
  .hero{
    height:730px;
  }
  .benefits{
    bottom:40px;
  }
}

/* v16 — visible space below pictogram bar on desktop */
@media (min-width:821px){
  .hero{
    height:730px;
  }
  .benefits{
    bottom:80px;
  }
}

/* FINAL APPROVED HOMEPAGE ADJUSTMENTS — 2026-09-17 */
/* Fixed top navigation, keeping the approved logo scale and compact top spacing. */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--bg);
  height:138px;
}

/* The approved single-line yellow oval and heart: same shape, 2x heavier stroke. */
.circled:after{
  border-width:8px;
}
.hero-heart path{
  stroke-width:10;
}

/* Cleaner green patch: one low organic form behind the tiger, with a short rounded tail. */
.sage-blob{
  width:45%;
  height:145px;
  border-radius:150px 150px 0 0;
}
.sage-blob::after{
  left:76%;
  width:92%;
  height:48px;
  border-radius:0 22px 22px 0;
}

/* Cleaner top-right yellow patch: keep it decorative and outside the content area. */
.yellow-decoration{
  position:fixed;
  right:-104px;
  top:-96px;
  width:292px;
  height:330px;
  border-radius:46% 0 36% 52%;
  transform:rotate(10deg);
}
.yellow-decoration:after{
  width:148px;
  height:112px;
  left:-32px;
  bottom:-16px;
  border-radius:52% 44% 52% 50%;
  transform:rotate(-15deg);
}
.white-cutout{
  right:18px;
  top:78px;
  width:48px;
  height:54px;
}

@media (max-width:820px){
  .site-header{height:105px}
  .circled:after{border-width:6px}
  .hero-heart path{stroke-width:8px}
}

/* v17 — match the approved composition at normal (100%) browser zoom.
   The previous build only looked right when Chrome was set to 80%. */
@media (min-width:821px){
  .site-header{height:110px;grid-template-columns:312px 1fr auto;gap:28px}
  .brand-full-logo{width:248px}
  .main-nav{gap:43px;font-size:13px}
  .header-cta{width:224px;height:50px;font-size:14px}

  .hero{height:584px}
  .hero-copy{top:74px}
  .hero-copy h1{font-size:50px}
  .hero-copy p{font-size:15px;margin:19px 0 30px}
  .hero-cta{width:264px;height:50px;padding:0 20px;font-size:14px}
  .arrow{font-size:29px}

  .hero-visual{top:32px;height:412px}
  .sage-blob{height:116px}
  .sage-blob::after{height:38px}

  .benefits{height:114px;bottom:64px;padding:0 38px;gap:24px}
  .benefit{gap:14px;font-size:16px}
  .benefit svg{width:40px;height:40px;flex-basis:40px}
  .benefit:nth-child(2) svg{width:34px}

  /* Requested refinement: lighter doodle strokes and a larger heart. */
  .circled:after{border-width:4px}
  .hero-heart{width:78px;height:78px;right:-98px;top:27px}
  .hero-heart path{stroke-width:5px}
}

/* MASTER REFERENCE — proportions approved from the 2026-09-17 22:21 screenshot.
   Desktop is designed to look like that reference at 100% browser zoom. */
@media (min-width:821px){
  .site-header,
  .hero{
    width:min(1170px, calc(100vw - 80px));
  }

  .site-header{
    height:112px;
    grid-template-columns:390px 1fr auto;
    gap:35px;
  }
  .brand-full-logo{width:250px}
  .main-nav{gap:43px;font-size:13px}
  .header-cta{width:224px;height:50px;font-size:14px}

  .hero{height:650px}
  .hero-copy{top:42px}
  .hero-copy h1{font-size:50px;line-height:1.16}
  .hero-copy p{font-size:15px;margin:24px 0 30px}
  .hero-cta{width:266px;height:52px;padding:0 20px;font-size:14px}
  .arrow{font-size:29px}

  .hero-visual{right:0;top:8px;width:72%;height:500px}
  .hero-visual img{width:78%;right:0;bottom:-3px}
  .sage-blob{width:46%;height:120px}
  .sage-blob::after{left:82%;width:135%;height:38px;border-radius:0 14px 14px 0}

  .benefits{height:114px;bottom:55px;padding:0 38px;gap:24px}
  .benefit{gap:14px;font-size:16px}
  .benefit svg{width:40px;height:40px;flex-basis:40px}
  .benefit:nth-child(2) svg{width:34px}

  /* Final requested doodle refinement: thinner lines, slightly larger heart. */
  .circled:after{
    left:-12px;right:-12px;top:-7px;bottom:-6px;
    border-width:3px;
  }
  .hero-heart{
    width:68px;height:68px;
    right:-92px;top:26px;
  }
  .hero-heart path{stroke-width:3.5px}

  .yellow-decoration{
    right:-104px;top:-96px;width:292px;height:330px;
  }
}

/* v20 check: tighter approved hero spacing + sage footer */
@media (min-width:821px){
  .site-header{height:96px}
  .hero{height:610px}
  .hero-copy{top:34px}
  .hero-visual{top:-10px;height:486px;transform:scale(.97);transform-origin:right top}
  .benefits{bottom:32px}
}

.site-footer{background:#a8bf8f;color:#fff;padding:42px 0 20px;margin-top:0}
.footer-inner{width:min(1170px,calc(100vw - 80px));margin:auto;display:grid;grid-template-columns:1.35fr 1fr;gap:80px;align-items:start}
.footer-brand{max-width:330px}.footer-logo{width:285px;display:block;filter:grayscale(1) brightness(0) invert(1);mix-blend-mode:screen}.footer-brand p{margin:16px 0;font-weight:500}.socials{display:flex;gap:15px}.socials a{color:#fff;text-decoration:none;border:1.5px solid currentColor;width:25px;height:25px;display:grid;place-items:center;border-radius:5px;font-weight:700}
.footer-links{display:grid;grid-template-columns:1fr 1.35fr;gap:55px}.footer-links h3{font-size:20px;margin:7px 0 18px}.footer-links a{display:block;color:#fff;text-decoration:none;margin:0 0 12px;font-size:14px}.footer-links a:hover{text-decoration:underline}
.footer-bottom{width:min(1170px,calc(100vw - 80px));margin:35px auto 0;border-top:1px solid rgba(255,255,255,.65);padding-top:17px;text-align:center;font-size:13px}
@media(max-width:820px){.site-footer{padding:34px 22px 18px}.footer-inner,.footer-bottom{width:100%}.footer-inner{grid-template-columns:1fr;gap:30px}.footer-links{gap:25px}.footer-logo{width:235px}}

/* FINAL HEADER WIDTH FIX — keep the navigation and CTA inside the same 1170px content width. */
@media (min-width:821px){
  .site-header{
    width:min(1170px, calc(100vw - 80px));
    grid-template-columns:280px minmax(0,1fr) 224px;
    gap:28px;
  }
  .main-nav{
    min-width:0;
    gap:35px;
  }
  .header-cta{
    width:224px;
  }
}

/* v21 — final check: remove the cream notch from the yellow decoration
   and use a dedicated transparent white footer logo. */
.white-cutout{display:none !important}
.footer-logo{
  width:285px;
  height:auto;
  display:block;
  filter:none;
  mix-blend-mode:normal;
}
@media (min-width:821px){
  .yellow-decoration{
    overflow:visible;
    right:-104px;
    top:-96px;
    width:292px;
    height:330px;
    background:var(--yellow);
    border-radius:46% 0 36% 52%;
    transform:rotate(10deg);
  }
  .yellow-decoration::after{
    content:"";
    position:absolute;
    width:148px;
    height:112px;
    left:-32px;
    bottom:-16px;
    background:var(--yellow);
    border-radius:52% 44% 52% 50%;
    transform:rotate(-15deg);
  }
}

/* Final footer logo: green tiger sticker + white wordmark */
.footer-logo-lockup{display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;}
.footer-tiger{width:138px;height:auto;display:block;}
.footer-wordmark{color:#fff;font-size:27px;line-height:1;font-weight:800;letter-spacing:-.5px;white-space:nowrap;}
.footer-wordmark span{display:block;font-size:18px;letter-spacing:0;margin-top:8px;}
.footer-logo{display:none!important;}
@media(max-width:820px){.footer-tiger{width:120px}.footer-wordmark{font-size:23px}.footer-wordmark span{font-size:16px}}

/* v23 — anchor sections begin exactly below the sticky header. */
@media (min-width:821px){
  .placeholder{
    scroll-margin-top:96px;
  }
}
@media (max-width:820px){
  .placeholder{
    scroll-margin-top:105px;
  }
}

/* v25 — final yellow corner refinement.
   Add the smooth cream indentation beside the header CTA, matching the approved sketch. */
@media (min-width:821px){
  .yellow-decoration::before{
    content:"";
    position:absolute;
    z-index:2;
    left:-28px;
    top:96px;
    width:64px;
    height:102px;
    background:var(--bg);
    border-radius:0 56% 56% 0;
    transform:rotate(-3deg);
  }
}

/* v26 — remove the top-right yellow decorative patch completely. */
.yellow-decoration{
  display:none !important;
}


/* ABOUT — aligned to the same 1170px site border as header/hero/footer */
.about-section{scroll-margin-top:96px;background:var(--bg);padding:38px 0 86px;border-top:1px solid rgba(0,0,0,.06)}
.about-inner{width:min(1170px,calc(100vw - 80px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:72px;align-items:start}
.about-copy{font-size:16px;line-height:1.55;max-width:650px;color:var(--body-text)}
.about-kicker{display:inline-block;margin:0 0 18px;font-size:15px;font-weight:700;letter-spacing:.12em;border-bottom:4px solid var(--yellow);padding-bottom:5px}
.about-copy h2{margin:0 0 14px;font-size:48px;line-height:1.08;font-weight:700;letter-spacing:-1.2px}
.about-copy h3{margin:24px 0 8px;font-size:24px;line-height:1.2}
.about-copy p{margin:0 0 14px}
.about-lead{font-size:18px;line-height:1.5;color:var(--body-text)}
.about-why{margin-top:28px}
.about-why h3{display:inline-block;margin:0 0 10px;padding:7px 18px 8px 10px;position:relative;z-index:0;font-size:25px}
.about-why h3:before{content:"";position:absolute;z-index:-1;inset:1px -10px -1px -8px;background:var(--yellow);border-radius:48% 42% 52% 45%;transform:rotate(-1.5deg)}
.about-signoff{font-weight:700;font-size:17px;margin-top:17px!important}
.about-photo-wrap{position:relative;min-height:600px;display:flex;align-items:flex-start;justify-content:center;padding-top:20px;overflow:visible}
.about-photo{position:relative;z-index:1;width:470px;height:auto;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 18px rgba(50,45,35,.10))}
@media(max-width:900px){.about-inner{grid-template-columns:1fr;gap:24px}.about-copy{max-width:none}.about-photo-wrap{min-height:540px}}
@media(max-width:820px){.about-section{scroll-margin-top:105px;padding:54px 0 64px}.about-inner{width:calc(100% - 36px)}.about-copy h2{font-size:38px}.about-photo{width:min(390px,82vw);height:auto;aspect-ratio:390/500}.about-photo-wrap{min-height:auto;padding:52px 0 28px}}
@media(max-width:520px){.about-copy h2{font-size:34px}.about-lead{font-size:17px}.about-copy{font-size:15px}.about-copy h3{font-size:21px}}

/* ABOUT v8 — approved portrait with the table retained in the image itself */
.about-photo-wrap{
  min-height:620px;
  padding-top:12px;
  align-items:flex-start;
}
.about-photo{
  width:560px;
  max-width:none;
  height:auto;
  object-fit:contain;
  filter:none;
}
@media(max-width:900px){
  .about-photo{width:100%;max-width:560px;}
  .about-photo-wrap{min-height:auto;}
}
@media(max-width:520px){
  .about-photo{width:100%;max-width:560px;}
}

/* TRIAL LESSON v9 */
.trial-section{background:#f6f4ed;border-top:1px solid #e5e2d9;padding:48px 0 18px;scroll-margin-top:90px}.trial-grid,.trial-footer-strip{max-width:1170px;margin:auto}.trial-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:62px}



/* COURSES SECTION — same visual language as Feedback */
.courses-section{
  scroll-margin-top:96px;
  background:var(--bg);
  padding:42px 0 72px;
  border-top:1px solid rgba(0,0,0,.06);
}
.courses-inner{width:min(1170px,calc(100vw - 80px));margin:0 auto}
.courses-kicker{
  display:inline-block;margin:0 0 18px;font-size:15px;font-weight:700;
  letter-spacing:.12em;border-bottom:4px solid var(--yellow);padding-bottom:5px
}
.courses-section h2{
  margin:0 0 14px;font-size:48px;line-height:1.08;font-weight:700;letter-spacing:-1.2px
}
.courses-lead{
  margin:0 0 30px;color:var(--body-text);font-size:18px;line-height:1.5
}
.courses-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.course-card{
  position:relative;
  min-height:300px;
  background:var(--card);
  border-radius:14px;
  padding:26px 28px 24px;
  box-shadow:0 2px 10px rgba(50,45,35,.035);
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.course-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(50,45,35,.08);
}
.course-icon{
  width:64px;height:64px;border-radius:50%;
  background:#e3edd9;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
}
.course-icon svg{
  width:34px;height:34px;fill:none;stroke:#155b50;stroke-width:2.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.course-number{
  position:absolute;right:25px;top:25px;
  color:#a6b99a;font-size:14px;font-weight:700;letter-spacing:.08em
}
.course-card h3{
  margin:0 0 10px;color:#155b50;font-size:23px;line-height:1.15;font-weight:800
}
.course-card p{
  margin:0;color:var(--body-text);font-size:15px;line-height:1.55;max-width:300px
}
.course-link{
  position:absolute;left:28px;bottom:22px;
  color:#155b50;font-size:15px;font-weight:700;
  display:inline-flex;align-items:center;gap:10px;
}
.course-link span{font-size:25px;font-weight:400;line-height:.8}
.courses-cta{
  display:flex;align-items:center;justify-content:center;gap:70px;margin-top:28px
}
.courses-note{
  display:flex;align-items:flex-end;gap:14px;
  font-family:"Comic Sans MS","Segoe Print",cursive;
  font-size:25px;line-height:1.08;
  transform:rotate(-2deg)
}
.courses-arrow{
  color:var(--yellow);font-family:Arial,sans-serif;font-size:48px;line-height:.8;
  transform:rotate(8deg)
}
@media(max-width:900px){
  .courses-section{padding:54px 0 64px}
  .courses-inner{width:calc(100% - 36px)}
  .courses-section h2{font-size:42px}
  .courses-grid{grid-template-columns:1fr}
  .course-card{min-height:250px}
  .courses-cta{gap:28px}
  .courses-note{font-size:21px}
}
@media(max-width:620px){
  .courses-section{scroll-margin-top:105px;padding:46px 0 55px}
  .courses-section h2{font-size:36px}
  .courses-lead{font-size:17px}
  .courses-lead br{display:none}
  .courses-grid{grid-template-columns:1fr}
  .course-card{min-height:240px;padding:22px}
  .course-link{left:22px}
  .courses-cta{flex-direction:column;align-items:flex-start;gap:22px;margin-top:30px}
  .courses-note{font-size:22px}
  .courses-cta .hero-cta{width:100%;height:58px}
}


/* GRAMMAR SECTION — matches the approved Feedback design */
.grammar-section{
  scroll-margin-top:96px;
  background:var(--bg);
  padding:42px 0 72px;
  border-top:1px solid rgba(0,0,0,.06);
}
.grammar-inner{width:min(1170px,calc(100vw - 80px));margin:0 auto}
.grammar-kicker{
  display:inline-block;margin:0 0 18px;font-size:15px;font-weight:700;
  letter-spacing:.12em;border-bottom:4px solid var(--yellow);padding-bottom:5px
}
.grammar-section h2{
  margin:0 0 14px;font-size:48px;line-height:1.08;font-weight:700;letter-spacing:-1.2px
}
.grammar-lead{margin:0 0 30px;color:var(--body-text);font-size:18px;line-height:1.5}
.grammar-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.grammar-card{
  position:relative;
  min-height:190px;
  background:var(--card);
  border-radius:14px;
  padding:20px 20px 22px;
  box-shadow:0 2px 10px rgba(50,45,35,.035);
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  column-gap:15px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.grammar-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(50,45,35,.08);
}
.grammar-icon{
  width:56px;height:56px;border-radius:50%;
  background:#e3edd9;
  display:flex;align-items:center;justify-content:center;
  grid-row:1 / span 2;
}
.grammar-icon svg{
  width:31px;height:31px;fill:none;stroke:#155b50;stroke-width:2.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.grammar-card-copy{padding-top:2px;padding-right:7px}
.grammar-card h3{
  margin:0 0 7px;color:#155b50;font-size:18px;line-height:1.18;font-weight:800
}
.grammar-card p{
  margin:0;color:var(--body-text);font-size:14px;line-height:1.45
}
.grammar-arrow{
  position:absolute;right:18px;bottom:14px;
  color:#155b50;font-size:25px;line-height:1;font-weight:400;
}
.grammar-more-icon{gap:5px}
.grammar-more-icon span{
  width:6px;height:6px;border-radius:50%;background:#155b50;display:block
}
.grammar-cta{
  display:flex;align-items:center;justify-content:center;gap:70px;margin-top:28px
}
.grammar-cta-note{
  display:flex;align-items:flex-end;gap:14px;
  font-family:"Comic Sans MS","Segoe Print",cursive;
  font-size:25px;line-height:1.08;
  transform:rotate(-2deg)
}
.grammar-cta-arrow{
  color:var(--yellow);
  font-family:Arial,sans-serif;
  font-size:48px;line-height:.8;
  transform:rotate(8deg)
}
@media(max-width:1000px){
  .grammar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .grammar-section{padding:54px 0 64px}
  .grammar-inner{width:calc(100% - 36px)}
  .grammar-section h2{font-size:42px}
  .grammar-card{min-height:0;padding:20px}
  .grammar-cta{gap:28px}
  .grammar-cta-note{font-size:21px}
}
@media(max-width:620px){
  .grammar-section{scroll-margin-top:105px;padding:46px 0 55px}
  .grammar-section h2{font-size:36px}
  .grammar-lead{font-size:17px}
  .grammar-lead br{display:none}
  .grammar-grid{grid-template-columns:1fr}
  .grammar-card{min-height:150px;padding:20px 22px}
  .grammar-cta{flex-direction:column;align-items:flex-start;gap:22px;margin-top:30px}
  .grammar-cta-note{font-size:22px}
  .grammar-cta .hero-cta{width:100%;height:58px}
}


/* FEEDBACK SECTION — Tigra-Digra approved design */
.feedback-section{
  scroll-margin-top:96px;
  background:var(--bg);
  padding:42px 0 72px;
  border-top:1px solid rgba(0,0,0,.06);
}
.feedback-inner{width:min(1170px,calc(100vw - 80px));margin:0 auto}
.feedback-kicker{
  display:inline-block;margin:0 0 18px;font-size:15px;font-weight:700;
  letter-spacing:.12em;border-bottom:4px solid var(--yellow);padding-bottom:5px
}
.feedback-section h2{
  margin:0 0 14px;font-size:48px;line-height:1.08;font-weight:700;letter-spacing:-1.2px
}
.feedback-lead{margin:0 0 30px;color:var(--body-text);font-size:18px;line-height:1.5}
.feedback-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.feedback-card{
  background:var(--card);border-radius:14px;padding:20px 28px 24px;min-height:260px;
  box-shadow:0 2px 10px rgba(50,45,35,.035)
}
.feedback-person{
  display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:16px;
  align-items:center;margin-bottom:17px
}
.student-avatar{
  width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#dce8d0;flex:0 0 auto
}
.student-avatar-photo{background:#e8e1d7}
.student-icon{font-size:43px;line-height:1;transform:translateY(2px)}
.student-avatar-tiger img{
  width:118px;height:74px;object-fit:contain;object-position:center;display:block
}
.feedback-person h3{margin:0 0 4px;color:#155b50;font-size:20px;line-height:1.1;font-weight:800}
.feedback-person p{margin:0;color:#536079;font-size:15px;line-height:1.3}
.quote-mark{
  align-self:start;color:#718c55;font-family:Georgia,serif;font-size:62px;font-weight:800;
  line-height:.72;letter-spacing:-.08em;transform:translateY(5px)
}
.feedback-text{margin:0;color:var(--body-text);font-size:16px;line-height:1.55}
.feedback-cta{
  display:flex;align-items:center;justify-content:center;gap:70px;margin-top:28px
}
.feedback-success-note{
  display:flex;align-items:flex-end;gap:14px;font-family:"Comic Sans MS","Segoe Print",cursive;
  font-size:25px;line-height:1.08;transform:rotate(-2deg)
}
.feedback-arrow{
  color:var(--yellow);font-family:Arial,sans-serif;font-size:48px;line-height:.8;transform:rotate(8deg)
}
.feedback-cta-button{
  width:375px;height:64px;padding:0 26px;justify-content:space-between;font-size:17px
}
.feedback-cta-button .arrow{font-size:34px}

@media(max-width:900px){
  .feedback-section{padding:54px 0 64px}
  .feedback-inner{width:calc(100% - 36px)}
  .feedback-section h2{font-size:42px}
  .feedback-grid{grid-template-columns:1fr 1fr}
  .feedback-card{min-height:0;padding:20px}
  .feedback-person{grid-template-columns:70px minmax(0,1fr) auto;gap:12px}
  .student-avatar{width:68px;height:68px}
  .feedback-text{font-size:16px}
  .feedback-cta{gap:28px}
  .feedback-success-note{font-size:21px}
  .feedback-cta-button{width:320px}
}
@media(max-width:620px){
  .feedback-section{scroll-margin-top:105px;padding:46px 0 55px}
  .feedback-section h2{font-size:36px}
  .feedback-lead{font-size:17px}
  .feedback-lead br{display:none}
  .feedback-grid{grid-template-columns:1fr}
  .feedback-card{padding:20px 22px}
  .feedback-cta{flex-direction:column;align-items:flex-start;gap:22px;margin-top:30px}
  .feedback-success-note{font-size:22px}
  .feedback-cta-button{width:100%;height:58px}
}

.trial-kicker{display:inline-block;font-weight:800;font-size:16px;border-bottom:4px solid #f4c900;padding-bottom:8px;margin-bottom:20px}.trial-intro h2{font-size:52px;line-height:1.03;letter-spacing:-.035em;margin:0 0 20px}.trial-lead{font-size:20px;line-height:1.45;color:#17223d;margin:0}.trial-tiger-wrap{height:270px;position:relative;margin-top:20px;display:flex;align-items:flex-end}.trial-tiger{width:345px;max-width:70%;display:block}.trial-bubble{position:absolute;right:10px;top:20px;border:3px solid #f4c900;border-radius:50%;padding:16px 22px;background:#f6f4ed;font:700 23px/1.12 "Comic Sans MS",cursive;text-align:center;transform:rotate(-4deg)}.trial-benefits{display:grid;gap:18px}.trial-benefit{display:flex;gap:18px;align-items:center}.trial-benefit i{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:25px;flex:0 0 auto}.trial-benefit i.green{background:#b9e5ae}.trial-benefit i.yellow{background:#ffd64e}.trial-benefit i.blue{background:#b7dff1}.trial-benefit strong{font-size:18px}.trial-benefit p{margin:3px 0 0;font-size:15px;color:#26314b}.trial-card{background:#efede6;border-radius:12px;padding:34px 38px 30px}.trial-card-head{display:flex;justify-content:space-between;margin-bottom:20px}.hand-title,.small-progress{font-family:"Comic Sans MS",cursive;font-weight:700}.hand-title{font-size:38px;line-height:.9;transform:rotate(-5deg)}.hand-title:after{content:"";display:block;width:105px;height:5px;background:#f4c900;margin-top:12px;transform:rotate(-7deg)}.small-progress{font-size:20px;line-height:1.05;text-align:center;transform:rotate(-7deg);margin-top:12px}.trial-form{display:grid;gap:18px}.trial-form label{display:grid;gap:8px;font-size:15px;font-weight:700;color:#111a32;position:relative}.trial-form em{color:#c94a4a;font-style:normal}.trial-form input,.trial-form select,.trial-form textarea{box-sizing:border-box;width:100%;border:1px solid #c9cbd0;border-radius:7px;background:#fafafa;padding:15px 16px;font:400 15px inherit;color:#20283d;outline:none}.trial-form input:focus,.trial-form select:focus,.trial-form textarea:focus{border-color:#9dbb86;box-shadow:0 0 0 3px rgba(157,187,134,.16)}.trial-form textarea{height:112px;resize:none;line-height:1.4;padding-bottom:28px}.char-count{position:absolute;right:3px;bottom:-20px;font-size:13px;font-weight:400}.char-count b{font-weight:400}.trial-submit{margin-top:12px;border:0;border-radius:7px;background:#a8c38f;padding:19px 24px;font-size:18px;font-weight:800;cursor:pointer}.trial-submit span{font-size:25px;margin-left:18px}.privacy-note{font-size:12px;line-height:1.45;color:#536079;margin:3px 12px 0}.form-note{font-size:13px;color:#56634c;margin:0}.trial-footer-strip{border-top:2px solid rgba(40,40,40,.08);margin-top:46px;padding:28px 0 4px;display:grid;grid-template-columns:1fr 2.4fr .9fr;align-items:center;gap:25px}.trial-slogan,.see-you{font:700 18px/1.15 "Comic Sans MS",cursive;transform:rotate(-5deg)}.trial-slogan b{color:#f4c900;font-size:36px}.see-you{text-align:right;transform:rotate(-7deg)}.trial-use{display:flex;justify-content:space-around;gap:18px}.trial-use span{display:grid;text-align:center;font-size:27px;color:#15213b}.trial-use small{font:700 10px/1.2 Arial,sans-serif;margin-top:8px}@media(max-width:900px){.trial-grid{grid-template-columns:1fr;padding:0 24px}.trial-footer-strip{margin:42px 24px 0;grid-template-columns:1fr}.trial-use{flex-wrap:wrap}.see-you{text-align:left}.trial-slogan,.see-you{transform:none}}@media(max-width:520px){.trial-grid{padding:0 18px}.trial-intro h2{font-size:38px}.trial-lead{font-size:18px}.trial-tiger-wrap{height:230px}.trial-tiger{width:280px}.trial-bubble{font-size:18px;padding:12px 15px}.trial-card{padding:27px 22px}.hand-title{font-size:31px}.small-progress{font-size:16px}}


/* TRIAL LESSON v11 — compact desktop layout to fit one screen */
@media (min-width: 901px){
  .trial-section{padding:28px 0 10px;min-height:calc(100vh - 100px);box-sizing:border-box}
  .trial-grid{max-width:1170px;grid-template-columns:.98fr 1.02fr;gap:48px}
  .trial-kicker{font-size:15px;padding-bottom:6px;margin-bottom:14px}
  .trial-intro h2{font-size:45px;line-height:1.01;margin-bottom:14px}
  .trial-lead{font-size:17px;line-height:1.45;color:var(--body-text)}
  .trial-tiger-wrap{height:205px;margin-top:8px}
  .trial-tiger{width:320px;max-width:67%}
  .trial-bubble{right:12px;top:18px;font-size:19px;line-height:1.08;padding:12px 18px}
  .trial-benefits{grid-template-columns:repeat(3,1fr);gap:13px;margin-top:4px}
  .trial-benefit{display:grid;justify-items:center;text-align:center;gap:7px;align-content:start}
  .trial-benefit i{width:48px;height:48px;font-size:22px}
  .trial-benefit strong{font-size:14px;white-space:nowrap}
  .trial-benefit p{font-size:12px;line-height:1.25;margin-top:3px}
  .trial-card{padding:24px 30px 20px}
  .trial-card-head{margin-bottom:10px}
  .hand-title{font-size:31px;line-height:.88}
  .hand-title:after{height:4px;width:92px;margin-top:8px}
  .small-progress{font-size:17px;margin-top:8px}
  .trial-form{gap:10px}
  .trial-form label{gap:5px;font-size:13px}
  .trial-form input,.trial-form select{padding:10px 13px;height:42px}
  .trial-form textarea{height:72px;padding:10px 13px 22px}
  .char-count{bottom:-16px;font-size:11px}
  .trial-submit{margin-top:10px;padding:13px 20px;font-size:16px}
  .privacy-note{font-size:10px;line-height:1.3;margin:1px 8px 0}
  .trial-footer-strip{display:none}
}

/* TRIAL LESSON v12 */
.trial-form .field-title{display:inline-flex;align-items:baseline;gap:4px;width:max-content;color:#111a32;font-weight:700}
.trial-form .field-title em{display:inline;color:#c94a4a;font-style:normal;line-height:1}
@media(min-width:901px){.trial-tiger{width:300px;max-width:64%}.trial-tiger-wrap{height:198px}}

/* TRIAL LESSON v13 */
.hand-title{white-space:nowrap;line-height:1;}
.hand-title:after{width:150px;}
.trial-bubble{display:none !important;}
@media(min-width:901px){.hand-title{font-size:31px;}}


/* TRIAL LESSON v14 — approved heading + integrated tiger artwork */
.hand-title{
  position:relative;
  display:inline-block;
  z-index:0;
  padding:7px 18px 9px;
  font-family:inherit;
  font-weight:800;
  font-size:30px;
  line-height:1;
  letter-spacing:-.02em;
  transform:none;
  white-space:nowrap;
}
.hand-title::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-8px;
  right:-8px;
  top:0;
  bottom:0;
  background:#ffd000;
  border-radius:50% 46% 52% 48% / 48% 54% 46% 52%;
  transform:rotate(-2deg);
}
.hand-title::after{display:none !important;}
.trial-bubble{display:none !important;}

@media(min-width:901px){
  .trial-tiger-wrap{
    height:198px;
    margin-top:8px;
    align-items:flex-end;
  }
  .trial-tiger{
    width:390px;
    max-width:82%;
    object-fit:contain;
    object-position:left bottom;
  }
}


/* TRIAL LESSON v15 — wider intro copy + final integrated tiger artwork */
@media(min-width:901px){
  .trial-grid{
    grid-template-columns:1.04fr .96fr;
    gap:44px;
  }
  .trial-lead{
    width:100%;
    max-width:590px;
  }
  .trial-tiger-wrap{
    height:205px;
  }
  .trial-tiger{
    width:410px;
    max-width:82%;
    object-fit:contain;
    object-position:left bottom;
  }
}

/* FINAL trial-section corrections */
.trial-tiger-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}
.trial-tiger{
  display:block;
  margin-left:auto;
  margin-right:auto;
  object-position:center bottom !important;
}
@media(min-width:901px){
  .trial-tiger{width:410px;max-width:82%;}
}

/* Email-enabled trial form + footer email */
.form-honey{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.trial-submit:disabled{opacity:.7;cursor:wait}
.form-note{margin:8px 0 0;font-size:13px;font-weight:600;color:#547343}
.form-note.error{color:#a13b32}
.footer-email{display:inline-block;margin-top:14px;color:#fff;text-decoration:none;font-size:17px}
.footer-email:hover{text-decoration:underline}

/* FINAL footer social icons */
.footer-socials{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0 8px;
}
.footer-socials .social-link{
  width:32px;
  height:32px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.95);
  border-radius:6px;
  color:#fff;
  text-decoration:none;
  transition:transform .15s ease, background .15s ease;
}
.footer-socials .social-link:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.12);
}
.footer-socials svg{
  width:19px;
  height:19px;
  fill:currentColor;
}

/* Remove superseded footer icon row */
.footer-icons,
.social-icons,
.footer-social-icons,
.footer .socials:not(.footer-socials){
  display:none !important;
}

/* FINAL trial form viewport + success notice refinement */
.form-note:not([hidden]){
  box-sizing:border-box;
  width:100%;
  margin:8px 0 0;
  padding:10px 12px;
  background:#fff;
  border:3px solid #f4c900;
  border-radius:0;
  color:#547343;
  font-size:13px;
  font-weight:700;
  line-height:1.3;
}
.form-note.error:not([hidden]){
  border-color:#f4c900;
  color:#a13b32;
}
@media(min-width:901px){
  .trial-section{padding-top:18px;}
  .trial-card{transform:translateY(-8px);padding-top:20px;padding-bottom:14px;}
  .trial-card-head{margin-bottom:7px;}
  .trial-submit{margin-top:6px;padding:9px 20px;font-size:16px;min-height:46px;}
  .trial-submit span{font-size:21px;}
  .privacy-note{margin-top:0;}
  .form-note:not([hidden]){margin-top:6px;padding:8px 10px;font-size:12.5px;}
}


/* FINAL SITE-WIDE ALIGNMENT
   All major desktop sections use the same 1170px content boundary.
   About artwork is contained inside that boundary rather than overflowing it.
   Section body copy uses the same Montserrat scale and body colour.
*/
@media (min-width:901px){
  .about-inner,
  .feedback-inner,
  .trial-grid,
  .trial-footer-strip{
    width:min(1170px,calc(100vw - 80px));
    max-width:1170px;
    margin-left:auto;
    margin-right:auto;
  }

  .about-photo{
    width:100%;
    max-width:100%;
  }

  .about-copy,
  .feedback-text{
    font-family:"Montserrat",Arial,sans-serif;
    font-size:16px;
    line-height:1.55;
  }

  .about-copy,
  .about-lead,
  .feedback-lead,
  .feedback-text,
  .trial-lead{
    color:var(--body-text);
  }
}


/* Vocabulary navigation/header refinement: keep the wider menu comfortable at desktop. */
@media (min-width:901px){
  .site-header{
    grid-template-columns:350px minmax(0,1fr) auto;
    gap:28px;
  }
  .main-nav{gap:36px;}
  .header-cta{margin-right:-70px;}
}
@media (max-width:1250px) and (min-width:901px){
  .site-header{grid-template-columns:330px minmax(0,1fr) auto;}
  .main-nav{gap:24px;font-size:12px;}
  .header-cta{margin-right:-30px;}
}

/* FINAL HEADER WIDTH — match the 1170px content boundary used by all sections. */
@media (min-width:901px){
  .site-header{
    width:min(1170px, calc(100vw - 80px));
    max-width:1170px;
    grid-template-columns:300px minmax(0,1fr) 224px;
    gap:28px;
    margin-left:auto;
    margin-right:auto;
  }
  .main-nav{
    min-width:0;
    justify-content:flex-end;
    gap:35px;
    font-size:13px;
  }
  .header-cta{
    width:224px;
    margin-right:0;
  }
}
@media (max-width:1250px) and (min-width:901px){
  .site-header{grid-template-columns:285px minmax(0,1fr) 224px;}
  .main-nav{gap:24px;font-size:12px;}
}