:root{
  --bg:#fbfaf7;
  --surface:#ffffff;
  --ink:#151515;
  --muted:#656565;
  --line:#e7e4dc;
  --accent:#1d5f4a;
  --accent-soft:#e9f2ee;
  --max:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}
a{color:inherit}
.wrap{width:min(var(--max), calc(100% - 40px)); margin:0 auto}
header{
  position:sticky; top:0; z-index:10;
  background:rgba(251,250,247,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
nav{height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px; text-decoration:none}
.mark{
  width:34px;height:34px;border-radius:10px;background:var(--accent);
  display:grid;place-items:center;color:white;font-weight:800;
}
.navlinks{display:flex;align-items:center;gap:22px;font-size:14px}
.navlinks a{text-decoration:none;color:#333}
.navlinks a:hover{color:var(--accent)}
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:10px;background:var(--accent);color:white;
  text-decoration:none;font-weight:700;border:1px solid var(--accent)
}
.cta.secondary{background:transparent;color:var(--accent)}
.hero{padding:96px 0 70px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.eyebrow{font-weight:800;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:12px}
h1{font-size:clamp(44px,7vw,78px);line-height:.98;letter-spacing:-.045em;margin:14px 0 22px}
h2{font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-.03em;margin:0 0 18px}
h3{font-size:20px;margin:0 0 10px}
.lead{font-size:20px;color:var(--muted);max-width:650px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:26px;box-shadow:0 12px 35px rgba(0,0,0,.045)
}
.preview{padding:24px}
.sheet{
  background:white;border:1px solid var(--line);border-radius:16px;padding:22px;
  box-shadow:0 8px 24px rgba(0,0,0,.06); transform:rotate(1.5deg)
}
.sheet .row{height:46px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}
.sheet .math{font-size:24px;font-weight:700}
.sheet .answer{width:110px;height:26px;border:2px solid #d6d6d6;border-radius:6px}
.badge{display:inline-flex;background:var(--accent-soft);color:var(--accent);font-weight:700;padding:7px 10px;border-radius:999px;font-size:13px}
.section{padding:72px 0;border-top:1px solid var(--line)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step-num{font-size:13px;font-weight:800;color:var(--accent);margin-bottom:12px}
.muted{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.notice{padding:18px 20px;background:var(--accent-soft);border-radius:14px;color:#21483b}
footer{padding:38px 0 46px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{text-decoration:none}
.page{padding:68px 0 90px}
.prose{max-width:780px}
.prose h1{font-size:48px}
.prose h2{font-size:28px;margin-top:40px}
.prose p,.prose li{color:#3e3e3e}
.price-card{max-width:520px}
.price{font-size:50px;font-weight:800;letter-spacing:-.04em;margin:8px 0}
.small{font-size:13px}
ul.clean{padding-left:20px}
@media (max-width:800px){
  .navlinks a:not(.cta){display:none}
  .hero{padding-top:62px}
  .hero-grid,.split,.grid3{grid-template-columns:1fr}
  .hero-grid{gap:34px}
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
}
.lang-switch button{
  border:0;
  background:transparent;
  padding:7px 10px;
  border-radius:999px;
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  color:var(--muted);
}
.lang-switch button.active{
  background:var(--accent);
  color:#fff;
}
html[dir="rtl"] body{
  text-align:right;
}
html[dir="rtl"] .navlinks,
html[dir="rtl"] .footer-links,
html[dir="rtl"] .actions,
html[dir="rtl"] .brand{
  direction:rtl;
}
html[dir="rtl"] ul.clean{
  padding-left:0;
  padding-right:20px;
}
@media (max-width:900px){
  .navlinks{gap:10px}
  .navlinks > a:not(.cta){display:none}
}

/* Early-access CTA: keep the button anchored to the edge instead of floating
   in the middle of a 50/50 grid. Works in both LTR and RTL. */
.access-card{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:40px;
  align-items:center;
}
.access-copy{
  max-width:760px;
}
.access-copy h2{
  max-width:720px;
}
.access-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
html[dir="rtl"] .access-action{
  justify-content:flex-start;
}

@media (max-width:800px){
  .access-card{
    grid-template-columns:1fr;
    gap:22px;
  }
  .access-action,
  html[dir="rtl"] .access-action{
    justify-content:flex-start;
  }
}

.contact-channel-title{margin-top:22px}


/* How-it-works: physical layout stays video-left / loop-right in every locale. */
.how-layout{
  display:grid;
  grid-template-columns:minmax(300px, .95fr) minmax(420px, 1.05fr);
  gap:44px;
  align-items:stretch;
  direction:ltr;
}
.how-video{
  grid-column:1;
  padding:24px;
  min-height:100%;
  direction:inherit;
}
.how-video-shell{
  width:min(100%, 320px);
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:34px;
  background:linear-gradient(180deg, #fff 0%, #f6f3ec 100%);
  padding:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
}
.how-video-screen{
  aspect-ratio:9 / 19.5;
  border-radius:24px;
  background:linear-gradient(180deg, #f9f7f2 0%, #ece7dc 100%);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.how-video-play{
  width:74px;
  height:74px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.92);
  color:var(--accent);
  font-size:28px;
  padding-left:5px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.how-loop{
  grid-column:2;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-right:64px;
  direction:rtl;
}
html[dir="ltr"] .how-loop{direction:ltr}
.how-step{
  position:relative;
  min-height:170px;
  z-index:1;
}
.how-step h3{font-size:clamp(28px,2.7vw,34px);margin-bottom:20px}
.how-step p{font-size:18px;line-height:1.6;margin:0}
.how-step .step-num{font-size:16px;margin-bottom:18px}

/* Return arrow: starts beside step 03 and terminates beside step 01. */
.loop-arrow{
  position:absolute;
  top:8px;
  right:0;
  bottom:8px;
  width:76px;
  color:#7dd7a8;
  pointer-events:none;
  z-index:0;
}
.loop-arrow svg{display:block;width:100%;height:100%;overflow:visible}
.loop-return-path,
.loop-return-head{
  fill:none;
  stroke:currentColor;
  stroke-width:8;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.loop-return-path{opacity:.92}

@media (max-width:980px){
  .how-layout{
    grid-template-columns:1fr;
    gap:28px;
  }
  .how-video{grid-column:1;grid-row:1}
  .how-loop{grid-column:1;grid-row:2}
  .how-video-shell{width:min(100%,360px)}
}
@media (max-width:800px){
  .how-loop{padding-right:0}
  .loop-arrow{display:none}
  .how-step{min-height:auto}
  .how-step h3{font-size:22px;margin-bottom:12px}
  .how-step p{font-size:16px}
}