/* landing.css — Vokabelly marketing site · orange #E8821E on cream */
:root{
  --cream:#FAF5EC; --cream-2:#F4EDDF; --cream-deep:#EFE5D2; --surface:#FFFFFF; --surface-2:#FFFCF6;
  --ink:#241F18; --ink-2:#6E665A; --ink-3:#A89D8B; --line:#EBE1CF; --line-2:#E2D6BF;
  --orange:#E8821E; --orange-2:#CE6F12; --orange-tint:#FBEAD3; --orange-tint-2:#F7DCB8;
  --dark:#201A13; --dark-2:#2C251B; --violet:#5B5BD6; --green:#2E9E6B; --blue:#2B5BD7;
  --maxw:1200px;
  --shadow-s:0 1px 2px rgba(60,46,20,.05),0 4px 14px rgba(60,46,20,.05);
  --shadow-m:0 2px 6px rgba(60,46,20,.06),0 18px 40px rgba(60,46,20,.10);
  --shadow-l:0 30px 70px rgba(40,28,8,.18);
  --r-s:12px; --r-m:18px; --r-l:26px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--orange-2);}
img,svg{display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--orange-2);}
h2.sec-title{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-1px;margin:14px 0 0;text-wrap:balance;}
.sec-sub{font-size:17px;color:var(--ink-2);margin:14px auto 0;max-width:560px;text-wrap:pretty;}
.center{text-align:center;}

/* ───── buttons ───── */
.btn{appearance:none;border:none;cursor:pointer;font-family:inherit;font-weight:700;display:inline-flex;
  align-items:center;justify-content:center;gap:9px;border-radius:14px;transition:transform .12s ease,box-shadow .12s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--orange);color:#fff;height:54px;padding:0 26px;font-size:16px;
  box-shadow:0 10px 22px rgba(232,130,30,.32);}
.btn-primary:hover{box-shadow:0 14px 30px rgba(232,130,30,.42);}
.btn-ghost{background:var(--surface);color:var(--ink);height:54px;padding:0 24px;font-size:16px;border:1.5px solid var(--line-2);}
.btn-ghost:hover{border-color:var(--orange-tint-2);background:var(--surface-2);}

/* store badges */
.stores{display:flex;flex-wrap:wrap;gap:12px;}
.store{display:flex;align-items:center;gap:11px;background:var(--dark);color:#fff;border-radius:14px;
  padding:11px 18px;transition:transform .12s ease,background .12s ease;}
.store:hover{transform:translateY(-2px);background:#15110B;}
.store-ic{color:#fff;}
.store-txt{display:flex;flex-direction:column;line-height:1.15;}
.store-txt small{font-size:10.5px;color:rgba(255,255,255,.7);font-weight:500;letter-spacing:.3px;}
.store-txt b{font-size:16px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;}

/* ───── nav ───── */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,245,236,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,background .2s ease;}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(250,245,236,.92);}
.nav-in{display:flex;align-items:center;gap:18px;height:74px;}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:-.3px;}
/* brand mark — refined flashcard stack (matches app 2.0) */
.logo-mark{position:relative;flex:none;--s:38px;width:var(--s);height:var(--s);}
.logo-mark i{position:absolute;inset:0;border-radius:calc(var(--s)*.26);font-style:normal;}
.logo-mark .lm-b{transform:translate(calc(var(--s)*.13),calc(var(--s)*-.13)) rotate(8deg);background:var(--orange-tint-2);}
.logo-mark .lm-m{transform:translate(calc(var(--s)*.06),calc(var(--s)*-.06)) rotate(4deg);background:#F4B86A;}
.logo-mark .lm-f{background:linear-gradient(150deg,#EF8C28,#D9710F);display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:calc(var(--s)*.42);letter-spacing:.5px;box-shadow:0 4px 10px rgba(216,113,15,.32);}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:30px;}
.nav-links a{font-size:15px;font-weight:600;color:var(--ink-2);transition:color .12s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-cta,.nav-links a.nav-cta{background:var(--orange);color:#fff;border-radius:12px;padding:11px 18px;font-size:14.5px;font-weight:700;
  box-shadow:0 6px 14px rgba(232,130,30,.28);}
.nav-cta:hover{color:#fff;}
.nav-burger{display:none;}

/* ───── hero ───── */
.hero{position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;top:-220px;right:-160px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,130,30,.14),transparent 62%);pointer-events:none;}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;padding:72px 0 84px;}
.hero h1{font-size:clamp(40px,5.4vw,62px);font-weight:800;letter-spacing:-2px;line-height:1.04;margin:18px 0 0;text-wrap:balance;}
.hero h1 .hl{color:var(--orange);}
.hero p.lead{font-size:19px;color:var(--ink-2);margin:22px 0 0;max-width:480px;text-wrap:pretty;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
.hero-proof{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap;}
.stars{color:var(--orange);font-size:15px;letter-spacing:2px;}
.proof-txt{font-size:14px;color:var(--ink-2);font-weight:600;}
.proof-divider{width:1px;height:18px;background:var(--line-2);}
.hero-phone{display:flex;justify-content:center;position:relative;}
.hero-phone::after{content:"";position:absolute;inset:auto 0 -30px;height:70px;
  background:radial-gradient(ellipse 60% 100% at 50% 0,rgba(60,46,20,.12),transparent 70%);}

/* ───── phone frame (landing) ───── */
/* screenshots ship with their own device bezel — the wrapper only positions + shadows */
.phone{width:302px;flex:none;position:relative;filter:drop-shadow(0 30px 60px rgba(40,28,8,.22));}
.phone.lg{width:334px;}
.phone-sb{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:relative;}
.phone-sb .t{font-size:12px;font-weight:700;}
.phone-sb .r{display:flex;gap:4px;align-items:center;}
.phone-notch{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:54px;height:16px;border-radius:10px;background:#0c0a07;}
.phone-body{padding:6px 14px 16px;}
.phone-shot{display:block;width:100%;height:auto;}

/* floating chips on hero phone */
.float-chip{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-m);padding:11px 14px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;z-index:3;}
.float-chip .fc-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;}
.float-chip small{display:block;font-size:11px;font-weight:500;color:var(--ink-2);}
.float-1{top:64px;left:-26px;}
.float-2{bottom:96px;right:-30px;}

/* ───── section rhythm ───── */
section{position:relative;}
.band{background:var(--surface-2);border-block:1px solid var(--line);}
.s-pad{padding:90px 0;}
.s-pad-lg{padding:104px 0;}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px;}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:30px 26px;position:relative;box-shadow:var(--shadow-s);}
.step-n{position:absolute;top:24px;right:26px;font-size:46px;font-weight:800;color:var(--cream-deep);line-height:1;}
.step-ic{width:54px;height:54px;border-radius:16px;background:var(--orange-tint);color:var(--orange-2);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.step h3{font-size:20px;font-weight:800;margin:0 0 8px;letter-spacing:-.3px;}
.step p{font-size:15px;color:var(--ink-2);margin:0;text-wrap:pretty;}

/* feature rows */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:60px 0;}
.feat + .feat{border-top:1px solid var(--line);}
.feat.rev .feat-media{order:2;}
.feat-media{display:flex;justify-content:center;position:relative;}
.feat-badge{display:inline-flex;align-items:center;gap:8px;background:var(--orange-tint);color:var(--orange-2);
  font-size:13px;font-weight:700;border-radius:20px;padding:7px 14px;}
.feat h3{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.8px;margin:16px 0 0;}
.feat p{font-size:17px;color:var(--ink-2);margin:14px 0 0;max-width:440px;text-wrap:pretty;}
.feat-list{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:11px;}
.feat-list li{display:flex;align-items:center;gap:11px;font-size:15.5px;font-weight:600;color:var(--ink);}
.feat-list .ck{width:24px;height:24px;border-radius:8px;background:var(--orange-tint);color:var(--orange-2);display:flex;align-items:center;justify-content:center;flex:none;}

/* situations */
.sit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;}
.sit{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:22px;display:flex;align-items:center;gap:15px;box-shadow:var(--shadow-s);transition:transform .14s ease,box-shadow .14s ease;}
.sit:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);}
.sit-ic{width:48px;height:48px;border-radius:14px;background:var(--cream-deep);display:flex;align-items:center;justify-content:center;font-size:24px;flex:none;}
.sit b{font-size:16px;font-weight:800;display:block;}
.sit>div{text-align:left;}
.sit small{font-size:13px;color:var(--ink-2);}

/* demo */
.demo-stage{margin-top:48px;display:flex;justify-content:center;position:relative;}
.demo-glow{position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 50% 45%,rgba(232,130,30,.16),transparent 70%);pointer-events:none;}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:24px;justify-content:center;margin-top:54px;}
.price{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-l);padding:34px 32px;position:relative;box-shadow:var(--shadow-s);text-align:left;}
.price.pop{border-color:var(--orange);box-shadow:0 24px 56px rgba(232,130,30,.18);}
.price-pop-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;
  font-size:12.5px;font-weight:800;letter-spacing:.5px;border-radius:20px;padding:6px 16px;box-shadow:0 6px 14px rgba(232,130,30,.34);}
.price-name{font-size:15px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-2);}
.price-amt{display:flex;align-items:baseline;gap:6px;margin:14px 0 2px;}
.price-amt .num{font-size:54px;font-weight:800;letter-spacing:-2px;line-height:1;}
.price-amt .per{font-size:16px;color:var(--ink-2);font-weight:600;}
.price-note{font-size:14px;color:var(--ink-3);font-weight:600;}
.price ul{list-style:none;padding:0;margin:24px 0;display:flex;flex-direction:column;gap:13px;}
.price li{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--ink);}
.price li .ck{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;}
.price li.free-ck .ck{background:var(--cream-deep);color:var(--green);}
.price li.pop-ck .ck{background:var(--orange-tint);color:var(--orange-2);}
.price li.noads{font-weight:800;}
.price .btn{width:100%;}
.price-foot{text-align:center;font-size:14px;color:var(--ink-3);margin-top:24px;}

/* faq */
.faq-list{max-width:760px;margin:48px auto 0;display:flex;flex-direction:column;gap:0;}
.faq{border-bottom:1px solid var(--line);}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;background:none;border:none;
  cursor:pointer;font-family:inherit;text-align:left;padding:24px 4px;font-size:18px;font-weight:700;color:var(--ink);}
.faq-toggle{width:30px;height:30px;border-radius:9px;background:var(--cream-deep);color:var(--orange-2);display:flex;
  align-items:center;justify-content:center;flex:none;transition:transform .2s ease,background .2s ease;}
.faq.open .faq-toggle{transform:rotate(45deg);background:var(--orange);color:#fff;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.faq-a-in{padding:0 4px 24px;font-size:16px;color:var(--ink-2);max-width:660px;text-wrap:pretty;}

/* final cta */
.final{background:linear-gradient(135deg,var(--dark),#3A2F20);color:#fff;border-radius:32px;padding:64px 48px;text-align:center;position:relative;overflow:hidden;}
.final::before{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:520px;height:320px;background:radial-gradient(ellipse,rgba(232,130,30,.34),transparent 65%);}
.final h2{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-1px;margin:0;position:relative;text-wrap:balance;}
.final p{font-size:18px;color:rgba(255,255,255,.78);margin:16px auto 0;max-width:480px;position:relative;}
.final .stores{justify-content:center;margin-top:30px;position:relative;}
.final .store{background:#fff;color:var(--dark);}
.final .store-ic{color:var(--dark);}
.final .store-txt small{color:var(--ink-2);}
.final .store:hover{background:var(--cream);}

/* footer */
.footer{background:var(--dark);color:#fff;margin-top:0;}
.footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding:64px 0 40px;}
.footer .brand{color:#fff;}
.footer .logo-mark .lm-f{box-shadow:none;}
.footer-col h4{font-size:12.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 16px;}
.footer-col a{display:block;font-size:15px;color:rgba(255,255,255,.78);margin-bottom:11px;transition:color .12s ease;}
.footer-col a:hover{color:#fff;}
.footer-about{font-size:14.5px;color:rgba(255,255,255,.6);margin:14px 0 0;max-width:240px;}
.footer-store{display:flex;flex-direction:column;gap:10px;}
.footer-store .store{background:rgba(255,255,255,.08);}
.footer-store .store:hover{background:rgba(255,255,255,.14);}
.footer-bar{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;text-align:center;font-size:13.5px;color:rgba(255,255,255,.5);}

/* reveal — kept as a no-op hook; content is always visible (no JS-gated hiding) */
.reveal{opacity:1;transform:none;}

/* responsive */
@media(max-width:920px){
  .hero-in{grid-template-columns:1fr;gap:40px;text-align:center;padding:54px 0 64px;}
  .hero p.lead{margin-inline:auto;}.hero-cta,.hero-proof{justify-content:center;}
  .hero::before{display:none;}
  .feat{grid-template-columns:1fr;gap:34px;padding:48px 0;}
  .feat.rev .feat-media{order:0;}
  .feat p{margin-inline:auto;}
  .steps{grid-template-columns:1fr;}
  .sit-grid{grid-template-columns:1fr 1fr;}
  .price-grid{grid-template-columns:1fr;}
  .footer-in{grid-template-columns:1fr 1fr;gap:32px;}
  .nav-links{display:none;}
}
@media(max-width:560px){
  .wrap{padding:0 20px;}
  .sit-grid{grid-template-columns:1fr;}
  .footer-in{grid-template-columns:1fr;}
  .final{padding:48px 24px;}
}

/* ───── legal + form pages ───── */
.legal{max-width:820px;margin:0 auto;padding:64px 28px 88px;}
.legal h1{font-size:clamp(30px,4vw,40px);font-weight:800;letter-spacing:-1px;margin:0 0 10px;}
.legal-date{font-size:14px;color:var(--ink-3);font-weight:600;margin:0 0 40px;}
.legal h2{font-size:21px;font-weight:800;letter-spacing:-.3px;margin:38px 0 14px;color:var(--ink);}
.legal p,.legal li{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 12px;}
.legal ul{padding-left:22px;margin:0 0 18px;}
.legal li{margin-bottom:8px;}
.legal strong{color:var(--ink);font-weight:700;}
.legal a{color:var(--orange-2);text-decoration:underline;}
.legal a:hover{color:var(--orange);}

.form-page{max-width:620px;margin:0 auto;padding:64px 28px 88px;}
.form-page h1{font-size:clamp(28px,4vw,36px);font-weight:800;letter-spacing:-.8px;margin:0 0 28px;}

/* honeypot — off-screen, must stay invisible to humans */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

.form-field{margin-bottom:20px;}
.form-field label{display:block;margin-bottom:7px;font-size:14.5px;font-weight:700;color:var(--ink);}
.form-field input,
.form-field textarea{width:100%;padding:12px 14px;background:var(--surface);color:var(--ink);
  border:1.5px solid var(--line-2);border-radius:var(--r-s);font-size:16px;font-family:inherit;line-height:1.5;}
.form-field input:focus,
.form-field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,130,30,.18);}
.form-field .field-error,.field-error{color:#C0392B;font-size:13.5px;font-weight:600;margin-top:6px;}
.char-counter{text-align:right;font-size:13px;color:var(--ink-3);margin-top:6px;}
.char-counter.low{color:#C0392B;}

.success-message{padding:18px 20px;background:#EAF7F0;border:1.5px solid rgba(46,158,107,.35);
  border-radius:var(--r-m);color:var(--green);font-weight:600;}
.success-message p{margin:0;}
.error-message{padding:18px 20px;background:#FDECEA;border:1.5px solid rgba(192,57,43,.3);
  border-radius:var(--r-m);color:#C0392B;font-weight:600;margin-bottom:20px;}
.error-message p{margin:0;}

/* ───── mobile nav affordance ───── */
/* the design collapses .nav-links to display:none below 920px with no replacement —
   this restores navigation on phones using the design's own .nav-burger hook */
.nav-burger{background:none;border:none;padding:0;width:40px;height:40px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.nav-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);}
@media(max-width:920px){
  .nav-burger{display:flex;margin-left:auto;}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-m);flex-direction:column;
    align-items:stretch;gap:14px;padding:18px 28px 22px;margin-left:0;}
  .nav-links.open{display:flex;}
  .nav-links a.nav-cta{text-align:center;}
}

/* ───── language switcher ───── */
/* the design has no UK/EN control — this adds one in-brand, for both the light
   nav and the dark footer bar. Below 920px it collapses into the burger dropdown
   along with the rest of .nav-links. */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;margin:0;
  background:var(--cream-deep);border:1px solid var(--line);border-radius:999px;}
.lang-switch button{appearance:none;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.4px;
  color:var(--ink-3);padding:5px 11px;border-radius:999px;line-height:1;
  transition:color .15s,background .15s;}
.lang-switch button:hover{color:var(--ink);}
.lang-switch button[aria-current="true"]{background:var(--surface);color:var(--orange-2);
  box-shadow:var(--shadow-s);cursor:default;}
.lang-switch button:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

/* dark footer variant */
.footer .lang-switch{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);}
.footer .lang-switch button{color:rgba(255,255,255,.62);}
.footer .lang-switch button:hover{color:#fff;}
.footer .lang-switch button[aria-current="true"]{background:rgba(255,255,255,.14);color:#fff;
  box-shadow:none;}

/* the bar now holds the copyright plus the switcher */
.footer-bar{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;}

@media(max-width:920px){
  .nav-links .lang-switch{align-self:center;}
}