/* Moved out of the page (no inline styles). Her two fonts, served from this site (no Google): Forum and Onest, OFL licence; Cyrillic, Latin, and the extended set for the rouble sign */
@font-face{font-family:"Forum";font-weight:400;font-display:swap;src:url(../fonts/forum-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Forum";font-weight:400;font-display:swap;src:url(../fonts/forum-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Forum";font-weight:400;font-display:swap;src:url(../fonts/forum-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";font-weight:300;font-display:swap;src:url(../fonts/onest-cyrillic-300-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:300;font-display:swap;src:url(../fonts/onest-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-weight:300;font-display:swap;src:url(../fonts/onest-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url(../fonts/onest-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url(../fonts/onest-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url(../fonts/onest-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";font-weight:500;font-display:swap;src:url(../fonts/onest-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:500;font-display:swap;src:url(../fonts/onest-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-weight:500;font-display:swap;src:url(../fonts/onest-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";font-weight:600;font-display:swap;src:url(../fonts/onest-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:600;font-display:swap;src:url(../fonts/onest-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-weight:600;font-display:swap;src:url(../fonts/onest-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Layout: one long scroll in her colors. Dark forest and cream sections alternate; one pinned
   moment where her three oils gather around a headline; a gold footer with the name across it. */
:root{
  --ink:#344128; --forest:#344128; /* her brand green, the same dark as aromatenergy.com and the classroom */ --cream:#f3eee3; --sage:#c6ceb8; --beige:#d7c6ae; --gold:#bea369; --brown:#5c3c20;
  --display:"Forum","Cormorant Garamond",Georgia,serif;
  --text:"Onest","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* the base is cream; js/landing.js matches the browser's own bars (behind the clock and the buttons) to whatever is at the
   bottom of the screen, so they never sit as a dark green band over a cream section (Angel, 2026-11-02, on his iPhone) */
html,body{margin:0;background:var(--cream);color:var(--cream)}
body{font:300 17px/1.6 var(--text);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.gutter{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.wrap{max-width:1240px;margin:0 auto}
.test-note{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;background:var(--cream);color:var(--ink);font:500 12px var(--text);letter-spacing:.04em;padding:7px 14px;border-radius:99px;box-shadow:0 6px 24px rgba(0,0,0,.25);white-space:nowrap}

/* top bar */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:16px;color:var(--cream);text-shadow:0 1px 12px rgba(31,40,24,.7)}
/* a steady header (the old colour-inverting one got lost over the film): no bar (Angel), only a faint fade behind it
   in the colour of what's underneath: dark over the film and the green sections (cream text), cream over the cream
   sections and gold over the footer (green text), so the menu never sits right on a heading */
.top{transition:transform .35s ease,color .35s ease}
.top::before,.top::after{content:"";position:absolute;inset:0 0 -22px 0;z-index:-1;pointer-events:none;transition:opacity .35s ease}
.top::before{background:linear-gradient(180deg,rgba(31,40,24,.82),rgba(31,40,24,.45) 55%,rgba(31,40,24,0))}
.top::after{background:linear-gradient(180deg,rgba(243,238,227,.96),rgba(243,238,227,.78) 50%,rgba(243,238,227,0));opacity:0}
.top.gold::after{background:linear-gradient(180deg,rgba(190,163,105,.96),rgba(190,163,105,.78) 50%,rgba(190,163,105,0))}
.top.light{color:var(--ink);text-shadow:none}
.top.light::before{opacity:0}
.top.light::after{opacity:1}
.top.away{transform:translateY(-110%)}
.top .school{font:400 13px var(--text);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.top nav{display:flex;gap:22px;align-items:center;font-size:14px}
.top nav a{text-decoration:none;opacity:.85}
.top nav a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:99px;font:500 15px var(--text);text-decoration:none;border:1px solid currentColor;transition:background .25s,color .25s}
.btn .go{display:inline-block;transition:transform .25s}
.btn:hover .go{transform:translate(2px,-2px)}
.btn.solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn.solid:hover{background:var(--gold);border-color:var(--gold)}
.btn.small{min-height:36px;padding:0 14px;font-size:13px}
.top .links a.btn{opacity:1}
.langs{display:flex;gap:4px;font-size:13px}
.langs a,.langs span{padding:4px 9px;border-radius:99px;border:1px solid transparent;text-decoration:none}
.langs [aria-current]{border-color:currentColor}

/* the opening: a short film plays in a rounded window on her green, her logo and the one-word name across its
   lower edge; the window grows by itself to fill the screen, then stays full as you scroll (Angel's pick, 2026-11-02, after the
   sample in the style of casamomo.at); landing.js plays the clips one after another. */
.opening{position:relative;z-index:0;height:200svh;background:var(--ink)} /* one screen of run under the film for the cream curtain */
.opening .stage{position:sticky;top:0;height:100svh;overflow:hidden;color:var(--cream)}
.opening .film{position:absolute;inset:0;clip-path:inset(var(--ct,13%) var(--cs,18%) var(--cb,35%) var(--cs,18%) round var(--cr,999px));background:#2a3420}
.opening video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.opening video.on{opacity:1}
/* a light shade at the bottom of the film so the text reads; most of the work is the soft shadow behind the letters (Angel, 2026-11-02: the old 86% green band at the bottom was an eyesore) */
.opening .veil{position:absolute;inset:0;background:radial-gradient(ellipse 70% 34% at 50% calc(var(--nt,65%) + 6vw),rgba(31,40,24,.55),rgba(31,40,24,.2) 55%,rgba(31,40,24,0) 100%),linear-gradient(180deg,rgba(31,40,24,.12),rgba(31,40,24,0) 26%,rgba(31,40,24,0) 50%,rgba(31,40,24,.32));opacity:var(--e,0);pointer-events:none}
.opening .title{position:absolute;left:0;right:0;top:var(--nt,65%);transform:translateY(-50%);display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,32px);z-index:2}
.brand-mark{flex:none;width:clamp(30px,7vw,128px);aspect-ratio:1;background:var(--gold);
  -webkit-mask:url(../img/mark.png) center/contain no-repeat;mask:url(../img/mark.png) center/contain no-repeat}
.name{font:400 10vw/.85 var(--display);letter-spacing:.005em;white-space:nowrap;margin:0;color:var(--cream);text-shadow:0 1px 3px rgba(31,40,24,.45),0 2px 30px rgba(31,40,24,.75)}
.opening .under{position:absolute;left:0;right:0;top:calc(var(--nt,65%) + 6.5vw);text-align:center;z-index:2;padding:0 20px}
/* "ОНЛАЙН-ШКОЛА" under the name, set like the tagline under the wordmark in her full logo (Angel, 2026-11-02) */
.lockup{position:relative}
.lockup .sub{position:absolute;left:.04em;top:100%;margin:.9vw 0 0;white-space:nowrap;font:400 max(11px,2.5vw)/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 3px rgba(31,40,24,.55),0 1px 16px rgba(31,40,24,.8)}
.opening:has(.sub) .under{top:calc(var(--nt,65%) + 10.5vw)}
.opening .who{font:400 13px var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.opening .line{max-width:36ch;margin:0 auto 22px;font:300 clamp(16px,1.5vw,20px)/1.5 var(--text);opacity:var(--e,0);transform:translateY(calc(var(--k,1) * 14px))}
.opening .who,.opening .line{text-shadow:0 1px 3px rgba(31,40,24,.55),0 2px 22px rgba(31,40,24,.85)}
.opening .btn{opacity:var(--e,0)}
@media (prefers-reduced-motion:reduce){.opening video{transition:none}}
.opening picture,.opening picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* cream statement */
.cream{background:var(--cream);color:var(--ink)}
/* a full-width band: a mountain over a meadow, her tagline across it */
.band{position:relative;display:grid;place-items:center;min-height:clamp(240px,40vw,520px);overflow:hidden;background:var(--ink)}.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(52,65,40,.2),rgba(52,65,40,.52))}.band p{position:relative;z-index:1;margin:0;padding:0 16px;font:400 clamp(30px,5.4vw,74px)/1.1 var(--display);color:var(--cream);text-align:center;letter-spacing:.02em;text-shadow:0 2px 26px rgba(0,0,0,.35)}
.statement{padding-top:clamp(80px,12vw,170px);padding-bottom:clamp(80px,12vw,170px)}
.statement h2{font:300 clamp(30px,4.4vw,64px)/1.15 var(--text);letter-spacing:-.01em;margin:0;max-width:22ch;text-wrap:balance}
.statement h2 em{font:400 1.08em var(--display);font-style:normal;color:#9a7f43} /* deeper gold, 3.3:1 on cream: headline size only */
.statement .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:48px;align-items:end}
.statement .cols p{margin:0;max-width:44ch}
.drop{width:100%;justify-self:end;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--cream);border:1px solid var(--beige)}
.drop video{width:100%;height:100%;object-fit:cover;display:block}

/* the pinned moment: three oils gather around one line */
.oils{position:relative;height:100svh;background:var(--ink)}
.oils .stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.oils h2{font:400 clamp(40px,7vw,120px)/1 var(--display);text-align:center;margin:0;position:relative;z-index:2;text-wrap:balance}
.oils h2 small{display:block;font:300 clamp(15px,1.4vw,19px)/1.5 var(--text);margin-top:22px;opacity:.8}
.plant{position:absolute;z-index:1;width:clamp(120px,17vw,240px);color:color-mix(in srgb,var(--ink) calc(var(--t,1) * 100%),var(--gold));will-change:transform}
.plant svg{width:100%;height:auto;overflow:visible}
.plant figcaption{font:500 14px var(--text);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--on-gold) calc(var(--t,1) * 100%),var(--cream));margin-top:8px;text-align:center;opacity:var(--label,1)}
.plant.lav{left:8%;top:16%}
.plant.berg{right:8%;top:10%}
.plant.vet{right:14%;bottom:5%}

/* modules: three cards in her three colors */
.modules{padding-top:clamp(70px,10vw,140px);padding-bottom:clamp(70px,10vw,140px)}
.section-title{font:400 clamp(36px,5vw,72px)/1 var(--display);margin:0 0 36px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border-radius:18px;padding:26px 26px 30px;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.card .n{font:500 13px var(--text);width:32px;height:32px;border:1px solid currentColor;border-radius:8px;display:grid;place-items:center;opacity:.8;align-self:flex-end}
.card h3{font:400 34px/1.05 var(--display);margin:0 0 10px}
.card p{margin:0;font-size:15.5px;line-height:1.55}
.card svg{width:84px;height:84px}
/* the first card: a light wash of her green instead of the solid dark block (Angel, 2026-11-02: "an eye sore") */
.card.c1{background:rgba(52,65,40,.1);color:var(--forest);box-shadow:inset 0 0 0 1px rgba(52,65,40,.14)}
.card.c2{background:var(--sage);color:var(--ink)}
.card.c3{background:var(--beige);color:var(--brown)}

/* full lesson list */
.outline-sec{background:var(--ink);padding-top:clamp(70px,10vw,130px);padding-bottom:clamp(70px,10vw,130px)}
.outline{list-style:none;margin:0;padding:0;border-top:1px solid rgba(243,238,227,.18)}
.outline li{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(243,238,227,.18)}
.outline .num{font:400 26px var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.outline .t{font-size:clamp(18px,1.8vw,24px);font-weight:300}
.outline .tag{font:500 12px var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--sage);padding:4px 10px;border-radius:99px;white-space:nowrap}
.outline-note{font-size:13px;opacity:.6;margin-top:14px}

/* her story */
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,90px);align-items:center;padding-top:clamp(70px,10vw,140px);padding-bottom:clamp(70px,10vw,140px)}
.story .photo{border-radius:18px;overflow:hidden;aspect-ratio:2/3}
.story .photo img{width:100%;height:100%;object-fit:cover}
.story h2{font:400 clamp(44px,6vw,96px)/.95 var(--display);margin:0 0 26px}
.story p{max-width:46ch;margin:0 0 16px}
.story .lead{font-size:clamp(20px,2vw,26px);line-height:1.4;font-weight:300}

/* how it works, in pictures: watch, practice, get the certificate. Her mark sits behind as a watermark. */
.how{position:relative;overflow:hidden;background:var(--ink);padding-top:clamp(70px,10vw,140px);padding-bottom:clamp(70px,10vw,140px)}
.watermark{position:absolute;width:min(70vw,760px);aspect-ratio:1;right:-12vw;top:50%;transform:translateY(-50%);background:var(--cream);opacity:.05;
  -webkit-mask:url(../img/mark.png) center/contain no-repeat;mask:url(../img/mark.png) center/contain no-repeat;pointer-events:none}
.steps{position:relative;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:clamp(10px,2vw,28px)}
.step{text-align:center}
.step svg{width:min(240px,100%);height:auto;color:var(--cream)}
.step .k{font:400 44px/1 var(--display);color:var(--gold);display:block;margin-top:14px}
.step .w{font-size:14px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.arrow{color:var(--gold);font-size:34px;opacity:.7;justify-self:center;line-height:1}
.closing{border-radius:18px;overflow:hidden;aspect-ratio:16/9;max-width:1100px;margin:0 auto 44px;background:var(--ink);clip-path:inset(var(--wt,0px) var(--ws,0px) var(--wb,0px) var(--ws,0px) round var(--wr,18px))}
.closing video{width:100%;height:100%;object-fit:cover;display:block}

/* price and the first step */
.buy{padding-top:clamp(70px,10vw,140px);padding-bottom:calc(clamp(70px,10vw,140px) + 44px);text-align:center}
.buy h2{font:400 clamp(40px,6vw,92px)/1 var(--display);margin:0 0 18px}
.buy p{max-width:48ch;margin:0 auto 30px}
.buy .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.buy .btn{min-height:52px;padding:0 26px;font-size:16px}
.buy .btn.solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.buy .btn.solid:hover{background:var(--brown);border-color:var(--brown)}
.buy .small-print{font-size:14px;opacity:.7;margin-top:22px}

/* gold footer with the name across it */
footer{position:relative;z-index:3;margin-top:-44px;border-radius:44px 44px 0 0;box-shadow:0 -18px 50px rgba(52,65,40,.16);background:var(--gold);color:var(--brown);overflow:hidden;padding-top:72px;padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;font-size:16px}
.fcols h4{font:500 12px var(--text);letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px;opacity:.8}
.fcols a{display:block;text-decoration:none;margin-bottom:6px;font-size:18px}
.bigname{font:400 12.2vw/.85 var(--display);letter-spacing:.005em;white-space:nowrap;margin:56px 0 18px;color:var(--cream);text-align:center}
.fine{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;opacity:.85}

/* gentle rise for blocks as they arrive (visible without script) */
.js .rise{transform:translateY(28px);opacity:.001;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .9s}
.js .rise.in{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.js .rise{transform:none;opacity:1;transition:none}}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (max-width:600px){.band .sep{display:block;font-size:0;line-height:0}}
@media (max-width:860px){
  .top nav .hide-s{display:none}
  .top .school{display:none} /* the page says it right below; keeps the bar to one line */
  .top nav{gap:12px}
  .btn{white-space:nowrap}
  .opening .under{top:calc(var(--nt,65%) + 9vw)}
  .opening:has(.sub) .under{top:calc(var(--nt,65%) + 9vw + 24px)}
  .steps{grid-template-columns:1fr}
  .arrow{transform:rotate(90deg)}
  .statement .cols{grid-template-columns:1fr}
  .coffee{justify-self:start}
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
  .story{grid-template-columns:1fr}
  .story .photo{max-width:420px}
  .fcols{grid-template-columns:1fr 1fr}
  .plant{width:92px}
  .plant.lav{left:5%;top:7%}
  .plant.berg{right:5%;top:9%}
  .plant.vet{right:auto;left:50%;margin-left:-46px;bottom:3%}
  .oils h2{margin-top:6vh}
  .plant figcaption{font-size:11px}
  .outline li{grid-template-columns:40px 1fr}
  .outline .tag{grid-column:2;justify-self:start}
}

[hidden]{display:none!important}
:root{--on-gold:#2c3622} /* forest, a shade deeper, for small text on gold (5.2:1) */ /* the guide stays hidden until the script shows it */
/* ===================== the scroll scenes (2 Nov 2026), mobile first =====================
   html.js     = script running; html.motion = script running and the visitor has not asked for reduced motion.
   Everything outside .motion is the finished, still state (reduced motion; no script also loads nojs.css). */

/* former inline style attributes */
.btn.ink{color:var(--ink)}
.fill-cream{fill:var(--cream)}.fill-ink{fill:var(--ink)}.fill-forest{fill:var(--forest)}.fill-gold{fill:var(--gold)}
.stroke-gold{stroke:var(--gold)}.stroke-sage{stroke:var(--sage)}.mask-alpha{mask-type:alpha}
html{overflow-x:clip}

/* ---- 2. the cream curtain: the statement rises over the pinned film like a sheet ---- */
main > section:not(.opening){position:relative;z-index:2}
.statement{z-index:3;margin-top:-100svh;border-radius:44px 44px 0 0;box-shadow:0 -26px 60px rgba(20,26,15,.38)}
.handle{position:absolute;top:14px;left:50%;width:56px;height:4px;margin-left:-28px;border-radius:4px;background:var(--gold)}
footer .handle{background:var(--brown);opacity:.45}

/* ---- 1. the drop: Three oils floods gold ---- */
.oils .stage{background:var(--ink)}
.flood{position:absolute;inset:0;z-index:0;background:var(--gold)}  /* finished state: the whole scene is gold */
.tint{color:color-mix(in srgb,var(--on-gold) calc(var(--t,1) * 100%),var(--cream))}
.oils h2 small{opacity:1}
.thread{display:none}
.motion .oils{height:260vh}
.motion .flood{clip-path:circle(0px at 50% 40%)}
.motion .thread{display:block;position:absolute;z-index:3;left:50%;top:0;width:1px;height:var(--th,0px);margin-left:-.5px;background:linear-gradient(180deg,rgba(190,163,105,0),var(--gold));opacity:var(--to,0)}
.motion .bead{position:absolute;left:50%;bottom:-6px;width:16px;height:16px;margin-left:-8px;background:var(--gold);border-radius:50% 0 50% 50%;transform:rotate(-45deg) scale(var(--bs,1));box-shadow:0 0 18px rgba(190,163,105,.6)}

/* ---- 3. the program as a path ---- */
.path{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,80px);align-items:start}
.pc{position:sticky;top:110px}
.ph .section-title{margin-bottom:18px}
.count,.now,.pbar{display:none}
.motion .count{display:block;margin:0;font:400 clamp(80px,9vw,140px)/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.count span{font-size:.36em;color:var(--cream)}
.motion .now{display:block;margin:10px 0 26px;font-size:20px;line-height:1.35;min-height:2.7em;max-width:26ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:99px;border:1px solid rgba(243,238,227,.4);font:500 13px var(--text);letter-spacing:.04em;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.chip.on{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.pl{position:relative;padding-left:34px}
.rail{position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(190,163,105,.22)}
.rail i{position:absolute;inset:0;background:var(--gold);transform-origin:top;transform:scaleY(var(--pp,1))}
.outline li{scroll-margin-top:140px}
.outline .tag{text-decoration:none}
.outline .tag:hover{background:var(--cream)}
.motion .outline li{transition:color .35s}
.motion .outline li.later{color:rgba(243,238,227,.68)}
.motion .outline li.cur .t{color:var(--cream)}
.motion .outline li.cur::before{content:"";position:absolute;left:-40px;width:14px;height:14px;margin-top:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(190,163,105,.25)}
.outline li{position:relative}


/* ---- 5. the ending echoes the opening ---- */
.sline{grid-column:1/-1;position:relative;height:2px;margin-top:30px;background:rgba(190,163,105,.22)}
.sline i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(var(--sp,1))}
.motion .step svg{transition:opacity .5s,transform .5s}
.motion .step .k{transition:color .5s}
.motion .step:not(.lit) svg{opacity:.3;transform:scale(.94)}
.motion .step:not(.lit) .k{color:#9f8d5a}
.motion .arrow{transition:opacity .5s}
.motion .arrow:not(.lit){opacity:.25}
.bigname.rise{transition-duration:1.4s}
.js .bigname.rise:not(.in){transform:translateY(45%)}
@media (prefers-reduced-motion:reduce){.js .bigname.rise:not(.in){transform:none}}

/* ---- 4. where you are / next ---- */
.guide{position:fixed;z-index:25;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px;transition:opacity .35s,transform .35s,visibility 0s}
.guide.off{opacity:0;transform:translateY(18px);visibility:hidden;transition:opacity .35s,transform .35s,visibility 0s .35s}
.g-next{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border:0;border-radius:99px;background:var(--cream);color:var(--ink);font:500 13px/1.2 var(--text);letter-spacing:.02em;box-shadow:0 8px 28px rgba(0,0,0,.22);cursor:pointer;white-space:nowrap}
.g-n{color:var(--brown);font-variant-numeric:tabular-nums}
.g-to{color:#566148}
.g-free{display:none}
@media (prefers-reduced-motion:reduce){.guide,.guide.off{transition:none}}
@media (min-width:861px) and (max-width:1199px){.guide-on .test-note{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
.test-note{transition:bottom .35s}

@media (min-width:861px){
  .motion .how{height:220vh;padding-top:0;padding-bottom:0;overflow:clip} /* clip, not hidden: hidden would break the sticky stage */
  .motion .how-stage{position:sticky;top:0;height:100svh;display:grid;align-items:center;overflow:hidden}
  .motion .how .watermark{position:absolute}
}

/* ================= phones (the main audience) ================= */
@media (max-width:860px){
  .statement{border-radius:28px 28px 0 0}
  footer{border-radius:28px 28px 0 0}
  .motion .oils{height:180vh}   /* shorter, so a thumb-flick doesn't skip it */
  .oils h2 small{margin-top:16px}

  .path{display:block}
  .pc{display:contents}
  .ph{position:sticky;top:0;z-index:5;margin:0 -20px 18px;padding:12px 20px 10px;background:rgba(52,65,40,.96);box-shadow:0 10px 24px rgba(20,26,15,.25);transition:top .35s}
  .top-on .ph{top:var(--hdr,64px)}
  .motion .count{display:inline;font-size:15px;font-family:var(--text);font-weight:500;color:var(--gold)}
  .count span{font-size:1em}
  .motion .now{display:inline;margin:0 0 0 6px;font-size:15px;min-height:0}
  .motion .now::before{content:"· ";color:var(--gold)}
  .motion .pbar{display:block;position:relative;height:2px;margin:10px 0 10px;background:rgba(190,163,105,.22)}
  .pbar i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(var(--pp,1))}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px}
  .chip{flex:none;min-height:36px;padding:0 14px}
  .outline-sec .section-title{margin-bottom:22px}
  .pl{padding-left:22px}
  .motion .outline li.cur::before{left:-28px;width:12px;height:12px}

  .buy .closing{aspect-ratio:4/5;margin:0 -20px 36px;border-radius:0}
  .buy .actions{flex-direction:column;align-items:stretch}
  .buy .btn{justify-content:center;width:100%}

  /* the bottom bar: where you are on the left, Free lesson under the thumb on the right */
  .guide{left:0;right:0;bottom:0;justify-content:space-between;gap:10px;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:var(--cream);border-radius:20px 20px 0 0;box-shadow:0 -10px 30px rgba(20,26,15,.22)}
  .g-next{flex:1;min-width:0;padding:0 8px;background:none;box-shadow:none;text-align:left;overflow:hidden;flex-wrap:wrap;gap:0 6px;font-size:13px}
  .g-next > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .g-to{flex-basis:100%;font-size:12px;font-weight:400}
  .g-sep{display:none}
  .g-free{display:inline-flex;flex:none;min-height:46px;padding:0 18px;background:var(--ink);color:var(--cream);border-color:var(--ink);font-size:14px}
  .guide-on .test-note{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .test-note{font-size:11px;padding:6px 12px}
}

/* phone: lift vetiver so its label clears the test-version pill */
@media (max-width:860px){.plant.vet{bottom:9%}}

/* footer on gold: text a shade deeper so small type passes AA */
footer{color:#3e2615}
.fcols h3{font:500 12px var(--text);letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.fine{opacity:1}
.bigname{color:var(--ink)} /* was cream on gold (2.1:1); forest passes for large type */
/* her mark before the footer name, set as one logo (Angel, 2026-11-03); a little smaller type so mark and name fit the width */
.bigname{display:flex;align-items:center;justify-content:center;gap:.16em;font-size:10.6vw}
.bigname .bigmark{flex:none;width:.8em;height:.8em;background:currentColor;
  -webkit-mask:url(../img/mark.png) center/contain no-repeat;mask:url(../img/mark.png) center/contain no-repeat}
/* social links as round icon buttons with their names (44px tall, easy to tap) */
.fcols a.soc{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:6px}
.soc .ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid currentColor;border-radius:50%;transition:background .2s,color .2s}
.soc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.soc svg .dot{fill:currentColor;stroke:none}
.soc:hover .ic{background:var(--ink);color:var(--gold)}
.js .rise:not(.in){opacity:0} /* was .001: truly hidden until revealed, so checkers skip it */