/* Approved full-bleed hero, rebuilt as separate HTML artwork and real UI. */
body{position:relative}
.opening-world{position:absolute;top:0;left:0;width:100%;height:var(--opening-height,890px);overflow:hidden;pointer-events:none;z-index:0;isolation:isolate;background:#f7f9e9}
.opening-world img{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none}
.world-sky{inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;opacity:.88;z-index:0}
.world-mist{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 58% 42% at 25% 47%,#fffef3bd 0%,#fffef35c 62%,transparent 100%)}
.world-riverbank{inset:0;width:100%;height:100%;object-fit:fill;z-index:2}
.world-torii{width:15%;height:48%;object-fit:contain;right:-1.5%;bottom:12%;z-index:3}
.world-canopy-left{width:48%;height:auto;left:0;top:-20px;z-index:4}
.world-canopy-right{width:28%;height:100%;right:-1%;top:0;object-fit:fill;z-index:4}
.nav{height:clamp(130px,10.8vw,166px);max-width:1536px;padding:0 6.5%;background:transparent;gap:30px;z-index:10}
.nav .wordmark{width:clamp(210px,17.25vw,265px);height:auto}
.nav nav{gap:clamp(20px,2.2vw,34px)}
.nav nav a{font-size:clamp(12px,1.05vw,16px);font-weight:500;color:#062e34}
.nav .nav-download{font-size:clamp(12px,1.05vw,16px);padding:18px 24px;border-radius:9px;background:#003233;gap:20px}
.new-hero{--ink:#002b2c;--leaf:#4b8235;position:relative;z-index:1;isolation:auto;max-width:1536px;height:clamp(600px,47.4vw,728px);min-height:0;display:grid;grid-template-columns:44% 56%;gap:0;padding:0 6.5%;margin:0 auto;overflow:visible;background:transparent}
.new-hero::before{display:none}
.hero-copy{align-self:start;min-width:0;padding:clamp(42px,4vw,62px) 0 0;z-index:5}
.hero-copy .eyebrow{font-size:clamp(11px,.93vw,14px);font-weight:800;letter-spacing:.12em;line-height:1.5;margin-bottom:clamp(20px,1.7vw,26px);color:#216d25}
.new-hero h1{font-size:clamp(60px,5.7vw,88px);font-weight:900;line-height:.96;letter-spacing:-.055em;color:#002b2c;white-space:normal}
.new-hero h1 em{display:block;color:#4b8235}
.hero-copy .hero-intro{font-size:clamp(17px,1.43vw,22px);line-height:1.5;color:#4b6176;max-width:550px;margin-top:24px}
.hero-actions{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:25px;margin-top:34px}
.hero-actions .primary-cta{font-size:clamp(13px,1.05vw,16px);font-weight:750;padding:19px 23px;border-radius:10px;gap:20px;background:#003334;color:#fff;box-shadow:0 6px 12px #173e3230;white-space:nowrap}
.hero-actions .secondary-cta{font-size:clamp(13px,1.05vw,16px);font-weight:750;color:#002d33;white-space:nowrap;gap:14px;border-bottom-color:#395954;padding-block:7px}
.hero-copy .hero-note{font-size:clamp(12px,.98vw,15px);line-height:1.6;color:#4b6176;max-width:none;margin-top:14px}
.hero-visual{height:100%;width:100%;max-width:none;min-width:0;margin:0;align-self:start;isolation:auto}
.hero-device{width:clamp(180px,14.3vw,220px);max-width:none;padding:5px;border-radius:34px;border:2px solid #53584d;box-shadow:0 9px 18px #082f3238;transform-origin:bottom center}
.hero-device .device-screen{border-radius:27px}
.hero-today{left:0;right:auto;top:95px;transform:rotate(-5deg);z-index:1}
.hero-tutor{left:60%;right:auto;top:90px;transform:rotate(5deg);z-index:2}
.hero-video{width:clamp(210px,16.93vw,260px);max-width:none;left:24.5%;top:50px;transform:rotate(0deg);z-index:3}
.hero-mochi{width:clamp(92px,7.8vw,120px);height:auto;max-width:none;left:calc(24.5% + clamp(105px,8.465vw,130px));top:-43px;transform:translateX(-50%);z-index:5}
.orbit-label{display:none}
.visual-sticker{right:-1%;bottom:55px;left:auto;top:auto;font-size:clamp(23px,1.95vw,30px);line-height:1.2;padding:17px 21px;background:#f4fbdc;border:1px solid #e4edc7;border-radius:8px 15px 8px 12px;transform:rotate(-9deg);box-shadow:0 7px 15px #1a3f2833;color:#062f2e;white-space:nowrap}
.visual-sticker small{font-size:clamp(11px,.98vw,15px);font-weight:500;line-height:1.5;margin-top:6px}
.hero-visual .motion-toggle{top:auto;bottom:12px;right:auto;left:0;z-index:8;font-size:9px;padding:6px 9px;background:#fffef3d9}
.hero-leaves .leaf-1{left:-25%;top:4%;width:30px}.hero-leaves .leaf-2{left:12%;top:5%;width:28px}.hero-leaves .leaf-3{right:18%;top:2%;width:27px}.hero-leaves .leaf-4{right:1%;top:36%;width:26px}.hero-leaves .leaf-5{left:-67%;bottom:9%;width:36px}.hero-leaves .leaf-6{left:-28%;bottom:26%;width:28px}
.benefit-band{position:relative;z-index:1;border:0;background:#f5faef}
.benefit-inner{max-width:1536px;margin:auto;padding:28px 6.5%;gap:0}
.benefit{gap:20px;padding-inline:25px}
.benefit:first-child{padding-left:0}
.benefit h2{font-size:16px;line-height:1.4;color:#082f32}
.benefit p{font-size:14px;line-height:1.6;color:#50637a;max-width:230px}
.benefit svg{width:40px;height:40px;color:#26752f;flex:none}
@media(min-width:1537px){.new-hero{max-width:1536px}.nav{max-width:1536px}.world-sky{object-position:center}.world-canopy-left{max-width:850px}.world-canopy-right{max-width:500px}.world-riverbank{object-fit:cover;object-position:bottom}.world-torii{max-width:270px}}
@media(min-width:681px) and (max-width:1100px){
 .nav{height:112px;padding-inline:5%;gap:18px}.nav .wordmark{width:195px}.nav nav{gap:18px}.nav nav a{font-size:11px}.nav .nav-download{font-size:12px;padding:14px 17px;gap:12px}
 .new-hero{height:570px;padding-inline:5%;grid-template-columns:44% 56%}
 .hero-copy{padding-top:48px}.hero-copy .eyebrow{font-size:9px;letter-spacing:.08em;margin-bottom:20px}
 .new-hero h1{font-size:clamp(39px,5.6vw,61px);line-height:1.02}
 .hero-copy .hero-intro{font-size:15px;line-height:1.6;max-width:330px;margin-top:22px}
 .hero-actions{flex-wrap:wrap;gap:12px 18px;margin-top:25px}.hero-actions .primary-cta{font-size:12px;padding:16px 17px;gap:14px}.hero-actions .secondary-cta{font-size:12px}.hero-copy .hero-note{font-size:11px;max-width:300px}
 .hero-device{width:34%;padding:4px;border-radius:25px}.hero-device .device-screen{border-radius:19px}.hero-today{left:3%;top:105px}.hero-tutor{left:auto;right:1%;top:100px}.hero-video{width:40%;left:29%;top:70px}
 .hero-mochi{left:49%;top:-6px;width:90px}.visual-sticker{font-size:20px;right:0;bottom:60px;padding:14px 16px}.visual-sticker small{font-size:11px}
 .world-canopy-left{width:55%;top:-32px}.world-canopy-right{width:30%}.world-torii{width:17%;height:42%;bottom:13%}
 .benefit-inner{padding:26px 5%}.benefit{gap:11px;padding-inline:14px}.benefit h2{font-size:12px}.benefit p{font-size:11px}.benefit svg{width:30px;height:30px}
}
@media(max-width:900px) and (min-width:681px){.nav nav{display:none}.nav .nav-download{margin-left:auto}.nav .menu{display:flex}.nav nav.open{display:flex;flex-direction:column;position:absolute;top:88px;left:5%;right:5%;padding:22px;background:#fffef4f5;border:1px solid #dae3ce;border-radius:12px;box-shadow:0 6px 20px #173b2420}}
@media(max-width:680px){
 .nav{height:112px;padding:0 6%;gap:12px}.nav .wordmark{width:190px}.nav nav{display:none}.nav .nav-download{margin-left:auto;font-size:10px;padding:12px;gap:8px}.nav .menu{display:flex}.nav nav.open{display:flex;flex-direction:column;position:absolute;top:92px;left:5%;right:5%;padding:22px;background:#fffef4f5;border:1px solid #dae3ce;border-radius:12px}
 .new-hero{height:auto;min-height:0;display:flex;flex-direction:column;gap:26px;padding:15px 6% 20px;overflow:hidden}
 .hero-copy{padding:0;width:100%;max-width:590px;align-self:center}.hero-copy .eyebrow{font-size:9px;line-height:1.6;margin-bottom:18px;letter-spacing:.1em}
 .new-hero h1{font-size:clamp(34px,8.9vw,58px);line-height:1.02}.hero-copy .hero-intro{font-size:15px;line-height:1.7;max-width:520px;margin-top:22px}
 .hero-actions{flex-wrap:wrap;gap:14px 18px;margin-top:25px}.hero-actions .primary-cta{font-size:12px;padding:16px 17px;gap:14px}.hero-actions .secondary-cta{font-size:12px}.hero-copy .hero-note{font-size:11px;margin-top:15px}
 .hero-visual{width:100%;max-width:520px;height:clamp(365px,95vw,520px);margin:0 auto;flex:none;isolation:auto}
 .hero-device{width:35%;max-width:none;padding:3px;border-radius:22px}.hero-device .device-screen{border-radius:16px}.hero-today{left:6%;top:78px;transform:rotate(-5deg)}.hero-tutor{left:auto;right:6%;top:78px;transform:rotate(5deg)}.hero-video{width:40%;left:30%;top:50px;transform:none}
 .hero-mochi{width:76px;left:50%;top:-7px}.visual-sticker{font-size:16px;padding:10px 13px;right:3%;bottom:5px}.visual-sticker small{font-size:9px}.hero-visual .motion-toggle{bottom:7px;left:0;font-size:8px;padding:5px 7px}
 .world-sky{object-position:50% top;object-fit:cover}.world-mist{background:linear-gradient(180deg,#fffdf529 0%,#fffdf5bb 20%,#fffdf5dc 42%,#fffdf520 64%,transparent 80%)}
 .world-canopy-left{width:88%;top:-24px}.world-canopy-right{width:38%;height:60%;right:-7%;top:0}.world-torii{width:26%;height:35%;right:-2%;bottom:9%}.world-riverbank{height:70%;top:auto;bottom:0;width:155%;left:-30%;object-fit:fill}
 .hero-leaves .leaf-1{left:5%;top:3%;width:22px}.hero-leaves .leaf-2{left:25%;top:-2%;width:20px}.hero-leaves .leaf-3{right:9%;top:7%;width:21px}.hero-leaves .leaf-4{right:0;top:35%;width:21px}.hero-leaves .leaf-5{left:0;bottom:12%;width:25px}.hero-leaves .leaf-6{left:15%;bottom:2%;width:21px}
 .benefit-inner{grid-template-columns:1fr 1fr;padding:25px 6%;gap:24px 0}.benefit{padding-inline:12px;gap:12px}.benefit:nth-child(3){padding-left:0}.benefit h2{font-size:12px}.benefit p{font-size:11px}.benefit svg{width:29px;height:29px}
}
@media(max-width:390px){.nav .wordmark{width:150px}.nav .nav-download{font-size:9px;padding:10px}.nav{gap:9px}.hero-copy .eyebrow{font-size:8px}.hero-copy .hero-intro{font-size:14px}.hero-actions .primary-cta{font-size:11px}.hero-actions .secondary-cta{font-size:11px}}
/* Match the reference's two-line title with the real Avenir letter widths. */
.new-hero h1{font-size:clamp(56px,5.15vw,79px);letter-spacing:-.06em;white-space:nowrap}
.hero-copy .hero-intro{font-size:clamp(16px,1.3vw,20px);max-width:570px;line-height:1.55}
@media(min-width:1101px){.hero-today{left:6%}}
@media(min-width:681px) and (max-width:1100px){.new-hero h1{font-size:clamp(36px,5.1vw,56px)}.hero-copy .hero-intro{font-size:15px;max-width:330px}}
@media(max-width:680px){.new-hero h1{font-size:clamp(34px,8.9vw,58px)}.hero-copy .hero-intro{font-size:15px;max-width:520px;line-height:1.7}.world-canopy-left{mask-image:linear-gradient(#000 0%,#000 30%,transparent 54%)}}
@media(max-width:390px){.hero-copy .hero-intro{font-size:14px}}
@media(max-width:350px){.nav{padding-inline:5%;gap:8px}.nav .wordmark{width:130px}.nav .nav-download{padding:9px 8px}}
@media(min-width:1101px){.hero-mochi{width:clamp(100px,8.8vw,135px);top:calc(50px - clamp(76px,6.688vw,102.6px))}}

/* Keep supporting copy legible over the illustrated riverbank. */
.hero-copy .hero-intro{color:#405466}
.hero-copy .hero-note{display:table;position:relative;color:#294536;font-weight:600;font-size:clamp(13px,.98vw,15px);line-height:1.6;background:#fffdf2f5;padding:4px 9px;border-radius:6px;box-shadow:0 0 14px 8px #fffdf2c7;max-width:100%}

/* A feathered clearing follows the copy at every breakpoint; scenery stays full bleed. */
.hero-copy{position:relative;isolation:isolate}
.hero-copy::before{content:"";position:absolute;inset:-28px -70px -34px -55px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse closest-side,#fffdf4ed 0%,#fffdf4df 65%,#fffdf49c 84%,#fffdf400 100%);filter:blur(12px)}
@media(max-width:680px){.hero-copy::before{inset:-24px -32px -28px;background:radial-gradient(ellipse closest-side,#fffdf4ed 0%,#fffdf4df 70%,#fffdf499 87%,#fffdf400 100%);filter:blur(10px)}}

/* Phone screens keep an open reading area and a detailed landscape below. */
@media(max-width:680px){
 .world-canopy-right{mask-image:linear-gradient(#000 0%,#000 12%,#0009 28%,transparent 48%);filter:saturate(.88)}
 .hero-copy .eyebrow{font-size:10px;line-height:1.6;letter-spacing:.08em}
 .hero-copy .hero-intro{font-size:15px;line-height:1.65}
}

/* Keep the existing world, with quieter edges and fewer moving accents. */
.world-canopy-left{width:42%;top:-35px;opacity:.86;filter:saturate(.82) contrast(.94)}
.world-canopy-right{width:24%;right:-3%;opacity:.84;filter:saturate(.82) contrast(.94)}
.world-riverbank{filter:saturate(.82) contrast(.92)}
.hero-leaves .leaf-2,.hero-leaves .leaf-4,.hero-leaves .leaf-6{display:none}
@media(min-width:681px) and (max-width:1100px){.world-canopy-left{width:48%;top:-40px}.world-canopy-right{width:27%;right:-3%}}
@media(max-width:680px){
 .world-canopy-left{width:78%;top:-30px;opacity:.8}
 .world-canopy-right{width:34%;right:-9%;opacity:.78}
 .hero-leaves .leaf-3{display:none}
}

/* Give the headline letter shapes room to read clearly. */
.new-hero h1{letter-spacing:-.025em;font-size:clamp(54px,4.9vw,75px)}
@media(min-width:681px) and (max-width:1100px){.new-hero h1{font-size:clamp(34px,4.8vw,53px)}}
@media(max-width:680px){.new-hero h1{font-size:clamp(30px,8.5vw,55px)}}