/* lingualemur.com. Mobile first: unprefixed rules are the phone layout, min-width queries enhance.
   Tokens follow the Washi Sakura card skin so the page and the deck look like one product. */
@font-face { font-family: "Fredoka"; font-weight: 300 700; font-display: swap; src: url("/fonts/fredoka.woff2") format("woff2"); }
@font-face { font-family: "Zen Maru"; font-weight: 500; font-display: swap; src: url("/fonts/zenmaru-500.woff2") format("woff2"); }
@font-face { font-family: "Zen Maru"; font-weight: 700; font-display: swap; src: url("/fonts/zenmaru-700.woff2") format("woff2"); }
@font-face { font-family: "Zen Maru"; font-weight: 900; font-display: swap; src: url("/fonts/zenmaru-900.woff2") format("woff2"); }

:root {
  --paper: #fbf3e6; --card: #fffdf8; --ink: #2b2420; --ink-2: #6b5a4c; --ink-3: #7a6656;
  --verm: #d9412b; --cta: #c7381f; --cta-hi: #d23f25; --cta-edge: #9a2a15;
  --sakura: #f7b3c2; --sakura-bg: #fde9ec; --sakura-sh: #f2c9c0;
  --matcha-bg: #e7efe1; --matcha: #3f6b2b; --amber: #ffb01f; --line: #ead9c5;
  --gut: 16px; --max: 1120px;
  --ease-in: cubic-bezier(.16,1,.3,1); --ease-ui: cubic-bezier(.23,1,.32,1); --ease-pop: cubic-bezier(.34,1.56,.64,1);
  --leaf: 12px 32px 12px 32px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; color: var(--ink); background-color: var(--paper);
  background-image: radial-gradient(rgba(160,120,80,.07) 1px, transparent 1.4px), radial-gradient(rgba(160,120,80,.05) 1px, transparent 1.4px);
  background-size: 18px 18px, 26px 26px; background-position: 0 0, 9px 13px;
  font-family: "Zen Maru", "Hiragino Maru Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
  font-size: 17px; line-height: 1.65; font-weight: 500; overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: "Fredoka", "Zen Maru", sans-serif; font-weight: 600; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.125rem, 1.45rem + 3.1vw, 3.75rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); line-height: 1.12; }
h3 { font-size: 1.25rem; line-height: 1.25; }
p { margin: 0; }
sup { font-size: .45em; vertical-align: super; }
.fnref { text-decoration: none; color: var(--ink-3); padding: 0 2px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 760px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
.kicker { font-family: "Fredoka", sans-serif; font-weight: 600; color: var(--verm); letter-spacing: .08em; font-size: .85rem; margin-bottom: 10px; }
.sub { color: var(--ink-2); font-size: 1.08rem; max-width: 60ch; margin-top: 14px; }
.small { color: var(--ink-3); font-size: .9rem; margin-top: 12px; }
.fine { color: var(--ink-3); font-size: .8rem; line-height: 1.55; margin-top: 14px; }

/* ---------- buttons: Duolingo-style 3D press ---------- */
.btn { display: inline-block; text-decoration: none; border-radius: 16px; background: var(--cta-edge); padding: 0 0 5px; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; font: inherit; }
.btn-face { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 22px; border-radius: 16px;
  background: var(--cta); color: #fff; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.125rem; letter-spacing: .01em;
  transform: translateY(0); transition: transform 120ms var(--ease-ui), background-color 160ms ease; }
.btn:hover .btn-face { background: var(--cta-hi); }
.btn:active .btn-face { transform: translateY(5px); transition-duration: 60ms; }
.btn { box-shadow: none; }
.btn-chip { background: rgba(255,255,255,.2); border-radius: 999px; padding: 2px 10px; font-size: .95rem; }
.btn-sm .btn-face { min-height: 44px; padding: 0 14px; font-size: 1rem; }
.btn-ghost { background: #e3cdb4; }
.btn-ghost .btn-face { background: var(--card); color: var(--ink); border: 2px solid #e3cdb4; min-height: 48px; }
.btn:focus-visible { outline: 3px solid var(--sakura); outline-offset: 3px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 64px;
  padding: 0 var(--gut); background: rgba(251,243,230,.92); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(234,217,197,.7); }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--verm); }
.logo-face { width: 34px; height: 34px; border-radius: 50%; background: var(--sakura-bg); overflow: hidden; display: inline-block; }
.logo-face svg { width: 34px; height: 40px; margin-top: -1px; }
.nav .btn-chip { display: none; }

/* ---------- hero ---------- */
.hero { padding: 28px 0 40px; }
.hero-grid { display: grid; gap: 34px; }
.lede { color: var(--ink-2); font-size: clamp(1.06rem, 1rem + .4vw, 1.25rem); line-height: 1.55; margin-top: 16px; max-width: 34em; }
.hero-cta { margin-top: 22px; }
.hero-art { position: relative; justify-self: center; padding-top: 34px; }
.phone { width: clamp(240px, 64vw, 300px); aspect-ratio: 390 / 844; border-radius: 46px; background: var(--ink); padding: 10px;
  box-shadow: 0 40px 80px -30px rgba(122,72,40,.45), 12px 12px 0 var(--sakura-sh); transform: rotate(3deg); }
.phone-screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--paper); }
.phone-screen video { width: 100%; height: 100%; object-fit: cover; }
.peek { position: absolute; right: -14px; top: -6px; width: 96px; transform: rotate(8deg); }
.peek svg { width: 100%; height: auto; overflow: visible; }
.bubble { position: absolute; right: 70px; top: 0; background: var(--card); color: var(--verm); border: 2px solid var(--verm); border-radius: 16px;
  padding: 4px 12px; font-weight: 900; font-size: 1rem; white-space: nowrap; }
.bubble::after { content: ""; position: absolute; right: -9px; bottom: 8px; border: 7px solid transparent; border-left-color: var(--verm); border-right: 0; }

/* ---------- works-with strip ---------- */
.works { padding: 6px 0 26px; }
.works-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.works-label { color: var(--ink-3); font-size: .9rem; margin-right: 4px; width: 100%; }
.chip { background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 12px; font-family: "Fredoka", sans-serif; font-weight: 500; font-size: .92rem; }

/* ---------- problem ---------- */
.problem { padding: 64px 0; }
.problem h2 { margin-bottom: 18px; }
.problem p + p { margin-top: 14px; }
.statement { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); line-height: 1.2; margin: 34px 0 30px !important; }
.statement em { font-style: normal; color: var(--verm); }
.strike { position: relative; display: inline-block; color: var(--ink-3); }
.strike::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: .16em; background: var(--verm); border-radius: 4px;
  transform: rotate(-4deg) scaleX(1); transform-origin: left center; }

/* ---------- ladder ---------- */
.ladder { padding: 64px 0; background: var(--card); border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
.ladder-grid { display: grid; gap: 36px; }
.pts { display: grid; gap: 22px; margin-top: 26px; }
.pt h3 { margin-bottom: 6px; }
.pt p { color: var(--ink-2); }
.timeline { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--leaf); box-shadow: 6px 6px 0 var(--sakura-sh); padding: 22px 20px; }
.tl-title { font-family: "Fredoka", sans-serif; font-weight: 600; margin-bottom: 14px; }
.timeline ol { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px dashed #e3cdb4; display: grid; gap: 16px; }
.timeline li { position: relative; display: grid; gap: 2px; }
.timeline li::before { content: ""; position: absolute; left: -28px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--sakura); border: 2px solid var(--card); }
.timeline li:last-child::before { background: var(--verm); }
.tl-when { font-family: "Fredoka", sans-serif; font-weight: 600; color: var(--verm); }
.tl-what { color: var(--ink-2); }
.tl-note { color: var(--ink-3); font-size: .85rem; margin-top: 14px; }

/* ---------- inside (bento) ---------- */
.inside { padding: 64px 0; }
.bento { display: grid; gap: 14px; margin-top: 28px; grid-template-columns: minmax(0, 1fr); }
.cell { border-radius: var(--leaf); padding: 20px; border: 1.5px solid var(--line); background: var(--card); min-width: 0; }
.cell h3 { margin-bottom: 6px; }
.cell p { color: var(--ink-2); }
.cell .big { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 3rem; line-height: 1; color: var(--verm); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.cell-sakura { background: var(--sakura-bg); border-color: #f6cdd6; }
.cell-matcha { background: var(--matcha-bg); border-color: #d4e0cb; }
.cell-matcha .big { color: var(--matcha); }
.cell-dots { background-color: var(--paper); }
.cell-ink { background: var(--ink); border-color: var(--ink); }
.cell-ink h3 { color: #fff; } .cell-ink p { color: #e7dccd; }
.cell-card { padding: 14px; box-shadow: 6px 6px 0 var(--sakura-sh); }
.demo { border-radius: 22px; overflow: hidden; border: 8px solid var(--ink); background: var(--paper); height: 560px; max-width: 360px; margin: 0 auto; }
.demo iframe { width: 100%; height: 100%; border: 0; }
.demo-ctrl { display: grid; gap: 10px; justify-items: center; text-align: center; margin-top: 14px; }
.demo-hint { color: var(--ink-2); font-size: .95rem; }
.bonus { display: flex; gap: 16px; align-items: center; margin-top: 18px; background: var(--card); border: 1.5px dashed #e3cdb4; border-radius: var(--leaf); padding: 18px; }
.bonus p { color: var(--ink-2); margin-top: 4px; }
.hanko { flex: 0 0 auto; width: 56px; height: 56px; border: 3px solid var(--verm); border-radius: 10px; color: var(--verm); font-weight: 900;
  display: grid; place-items: center; font-size: 1.05rem; transform: rotate(-6deg); }

/* ---------- comparison ---------- */
.compare { padding: 64px 0; }
.ctable { margin-top: 26px; border-radius: 20px; background: var(--card); border: 1.5px solid var(--line); overflow: hidden; }
.chead, .crow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.chead > div:first-child { display: none; }
.chead > div { padding: 14px 12px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: .98rem; min-width: 0; }
.ch-ll { background: var(--sakura-bg); color: var(--verm); position: relative; }
.ch-duo { color: var(--ink-2); }
.stamp { display: none; }
.cfeat { grid-column: 1 / -1; padding: 12px 12px 2px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: .95rem; color: var(--ink); }
.cll, .cduo { display: flex; gap: 6px; align-items: flex-start; padding: 6px 12px 14px; min-width: 0; overflow-wrap: anywhere; font-size: .92rem; line-height: 1.45; }
.cll { background: var(--sakura-bg); color: var(--ink); }
.cduo { color: var(--ink-2); }
.crow:nth-child(odd) .cfeat, .crow:nth-child(odd) .cduo { background: rgba(251,243,230,.6); }
.crow:nth-child(odd) .cfeat { background: linear-gradient(90deg, rgba(251,243,230,.6), rgba(251,243,230,.6)); }
.mk { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mk.yes { stroke: var(--matcha); }
.mk.no { stroke: #b6a594; }
.mk.neu { fill: #c9b8a6; stroke: none; }
.ccaption { margin-top: 18px; color: var(--ink-2); }

/* ---------- price / receipt ---------- */
.price { padding: 64px 0; background: var(--sakura-bg); }
.price-grid { display: grid; gap: 34px; }
.price-copy p { color: var(--ink-2); margin-top: 14px; }
.steps { margin: 22px 0 0; padding-left: 22px; display: grid; gap: 10px; color: var(--ink-2); }
.steps b { color: var(--ink); }
.receipt { background: var(--card); padding: 22px 20px 30px; transform: rotate(-1.5deg); box-shadow: 6px 6px 0 var(--sakura-sh);
  -webkit-mask: radial-gradient(10px 7px at 50% 100%, transparent 98%, #000) 50% 100% / 20px 100% repeat-x;
          mask: radial-gradient(10px 7px at 50% 100%, transparent 98%, #000) 50% 100% / 20px 100% repeat-x;
  max-width: 440px; justify-self: center; width: 100%; }
.r-head { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.2rem; border-bottom: 2px dashed var(--line); padding-bottom: 10px; margin-bottom: 8px; }
.r-line, .r-total { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dotted var(--line); font-size: .98rem; }
.r-line span:last-child, .r-total span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.r-ll { color: var(--verm); font-weight: 700; }
.r-total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 6px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.15rem; }
.r-note { color: var(--ink-3); font-size: .78rem; margin-top: 10px; }

/* ---------- FAQ ---------- */
.faq { padding: 64px 0; }
.faq-grid { display: grid; gap: 22px; }
.faq-lemur { display: none; }
.qa { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; margin-bottom: 10px; }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 56px;
  padding: 12px 16px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.05rem; }
.qa summary::-webkit-details-marker { display: none; }
.plus { flex: 0 0 22px; height: 22px; position: relative; }
.plus::before, .plus::after { content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 2.5px; border-radius: 2px; background: var(--verm); transition: transform 200ms var(--ease-ui); }
.plus::after { transform: rotate(90deg); }
.qa[open] .plus::after { transform: rotate(0); }
.qa p { padding: 0 16px 16px; color: var(--ink-2); }

/* ---------- final + checkout ---------- */
.final { position: relative; background: var(--ink); color: #fff; padding: 72px 0 80px; overflow: hidden; }
.torn { position: absolute; left: 0; right: 0; top: -1px; height: 16px; background: var(--paper);
  -webkit-mask: radial-gradient(12px 9px at 50% 0, #000 98%, transparent) 50% 0 / 24px 100% repeat-x;
          mask: radial-gradient(12px 9px at 50% 0, #000 98%, transparent) 50% 0 / 24px 100% repeat-x; }
.final-grid { position: relative; display: grid; gap: 30px; }
.final-copy p { color: #e7dccd; margin-top: 12px; }
.final-lemur { width: 108px; margin-bottom: 8px; }
.final-lemur svg { width: 100%; height: auto; overflow: visible; }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; color: #f3ebe0; }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 16px; height: 9px; border-left: 3px solid var(--sakura); border-bottom: 3px solid var(--sakura); transform: rotate(-45deg); }
.checkout-card { background: var(--card); color: var(--ink); border-radius: 22px; padding: 16px; box-shadow: 8px 8px 0 #4a3d36; min-width: 0; }
.co-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-family: "Fredoka", sans-serif; font-weight: 600; padding: 4px 4px 12px; border-bottom: 1.5px solid var(--line); margin-bottom: 10px; }
.co-price { color: var(--verm); font-size: 1.4rem; white-space: nowrap; }
.co-price small { font-size: .8rem; color: var(--ink-3); }
#whop-checkout { min-height: 380px; }
.co-note { color: var(--ink-3); font-size: .85rem; text-align: center; margin-top: 10px; }
.done { text-align: center; padding: 20px 8px; }
.done p { color: var(--ink-2); margin: 8px 0 16px; }
.petals { position: absolute; inset: 0; pointer-events: none; }
.petal { position: absolute; top: -24px; width: 16px; height: 16px; opacity: 0; }
.petal svg { width: 100%; height: 100%; fill: var(--sakura); }
.p1 { left: 8%; } .p2 { left: 22%; } .p3 { left: 37%; } .p4 { left: 51%; } .p5 { left: 63%; } .p6 { left: 74%; } .p7 { left: 86%; } .p8 { left: 94%; }

/* ---------- footer ---------- */
.foot { padding: 40px 0 120px; }
.fns { color: var(--ink-3); font-size: .8rem; line-height: 1.55; padding-left: 18px; margin: 18px 0 0; display: grid; gap: 8px; }

/* ---------- sticky mobile bar ---------- */
.sticky { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 8px 8px 8px 16px; box-shadow: 0 12px 30px -12px rgba(122,72,40,.45);
  transform: translateY(140%); transition: transform 320ms var(--ease-in); }
.sticky.on { transform: none; }
.sticky-txt { font-family: "Fredoka", sans-serif; font-weight: 500; }
.sticky-txt b { color: var(--verm); font-weight: 600; }

/* ---------- motion (only when html.mo: never for reduced motion, bots or ?static=1) ---------- */
.mo .rv { opacity: 0; transform: translateY(16px); transition: opacity 560ms var(--ease-in), transform 560ms var(--ease-in); transition-delay: var(--d, 0ms); }
.mo .rv.in, .mo.shown .rv { opacity: 1; transform: none; }
.mo .strike::after { transform: rotate(-4deg) scaleX(0); transition: transform 520ms var(--ease-ui) 300ms; }
.mo .statement.in .strike::after, .mo.shown .strike::after { transform: rotate(-4deg) scaleX(1); }
.mo .phone { animation: ll-phone 700ms var(--ease-in) both; }
.mo .peek { animation: ll-peek 520ms var(--ease-pop) 380ms both; }
.mo .peek .ll-wave { transform-box: fill-box; transform-origin: 0% 100%; animation: ll-wave 1s ease-in-out 900ms 2; }
.mo .peek .ll-eyes, .mo .faq-lemur .ll-eyes { transform-box: fill-box; transform-origin: center; animation: ll-blink 4.6s 2s 4; }
.mo .peek .ll-tail, .mo .final-lemur .ll-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: ll-sway 2.6s ease-in-out 4; }
.mo .bubble { animation: ll-bubble 460ms var(--ease-pop) 1000ms both; transform-origin: 100% 100%; }
.mo .final.in .petal { animation: ll-fall 6s linear 1 forwards; }
.mo .final.in .p2 { animation-delay: .6s; } .mo .final.in .p3 { animation-delay: 1.4s; } .mo .final.in .p4 { animation-delay: .3s; }
.mo .final.in .p5 { animation-delay: 1s; } .mo .final.in .p6 { animation-delay: 1.8s; } .mo .final.in .p7 { animation-delay: .8s; } .mo .final.in .p8 { animation-delay: 2.2s; }
.mo .final .final-lemur { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease-in), transform 600ms var(--ease-pop); }
.mo .final.in .final-lemur, .mo.shown .final .final-lemur { opacity: 1; transform: none; }
@keyframes ll-phone { from { opacity: 0; transform: translateY(40px) rotate(0deg); } to { opacity: 1; transform: rotate(3deg); } }
@keyframes ll-peek { from { opacity: 0; transform: translate(-30px, 40px) rotate(-10deg); } to { opacity: 1; transform: rotate(8deg); } }
@keyframes ll-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-24deg); } }
@keyframes ll-blink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.08); } }
@keyframes ll-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes ll-bubble { from { opacity: 0; transform: scale(0) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes ll-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: .9; } 100% { opacity: 0; transform: translate(-50px, 700px) rotate(420deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }

/* ---------- tablet and up ---------- */
@media (min-width: 640px) {
  :root { --gut: 24px; }
  .nav .btn-chip { display: inline; }
  .works-label { width: auto; }
  .chead, .crow { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1.2fr); }
  .chead > div:first-child { display: block; }
  .cfeat { grid-column: auto; padding: 16px 14px; }
  .cll, .cduo { padding: 16px 14px; font-size: .96rem; }
  .crow:nth-child(odd) .cfeat { background: rgba(251,243,230,.6); }
  .stamp { display: block; position: absolute; right: 8px; top: -14px; width: 40px; transform: rotate(10deg); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 18px; }
  .demo-ctrl { justify-items: start; text-align: left; }
}
@media (min-width: 960px) {
  :root { --gut: 32px; }
  body { font-size: 18px; }
  .hero { padding: 56px 0 72px; }
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 56px; }
  .phone { width: clamp(260px, 26vw, 312px); }
  .problem, .ladder, .inside, .compare, .price, .faq { padding: 112px 0; }
  .ladder-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: start; gap: 64px; }
  .timeline { position: sticky; top: 96px; }
  .pts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 34px; }
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(180px, auto); }
  .cell-card { grid-column: 1 / 3; grid-row: 1 / 3; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 64px; }
  .faq-grid { grid-template-columns: minmax(0, .45fr) minmax(0, 1fr); gap: 56px; }
  .faq-side { position: sticky; top: 100px; align-self: start; }
  .faq-lemur { display: block; width: 150px; margin-top: 24px; }
  .faq-lemur svg { width: 100%; height: auto; }
  .final-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .sticky { display: none; }
}

/* =====================================================================
   v2: centered mobile layout, card demo section, on-brand motion layer.
   Base rules here are the phone layout; the 960px block restores the
   left-aligned two-column desktop. Motion lives only under html.mo.
   ===================================================================== */

/* ---------- centered on phones and tablets ---------- */
.hero-copy, .works-row, .problem .narrow, .ladder-copy, .try-copy, .inside h2, .inside .sub, .compare h2, .compare .sub, .ccaption,
.price-copy, .faq-side, .final-copy, .cell, .bonus { text-align: center; }
.lede, .sub { margin-left: auto; margin-right: auto; }
.hero-cta { display: flex; flex-direction: column; align-items: center; }
.works-row { justify-content: center; }
.bonus { flex-direction: column; }
.steps, .ticks, .try-pts { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; }
.timeline { max-width: 420px; margin: 0 auto; }
.final-lemur, .cell-lemur { margin-left: auto; margin-right: auto; }

/* ---------- hero extras ---------- */
mark.hl { color: inherit; background: linear-gradient(transparent 60%, rgba(247,179,194,.8) 60%, rgba(247,179,194,.8) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
  padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.try-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; color: var(--verm); font-family: "Fredoka", sans-serif;
  font-weight: 600; text-decoration: none; }
.try-link .arrow { display: inline-block; }
.hero { position: relative; overflow: hidden; }
.hero-petals { position: absolute; inset: 0; pointer-events: none; }
.hero-petals .petal { opacity: 0; }
.hero .wrap { position: relative; }

/* ---------- try (card demo) ---------- */
.try { padding: 64px 0; position: relative; }
.try-grid { display: grid; gap: 30px; }
.try-pts { list-style: none; padding: 0; margin: 22px auto 0; display: grid; gap: 10px; color: var(--ink-2); }
.try-pts li { display: flex; gap: 10px; align-items: center; }
.tp-ico { flex: 0 0 34px; height: 34px; border: 2.5px solid var(--verm); color: var(--verm); border-radius: 8px; display: grid; place-items: center;
  font-weight: 900; transform: rotate(-5deg); background: var(--card); }
.try-art { position: relative; justify-self: center; }
.phone-flat { transform: none; width: clamp(280px, 86vw, 350px); }
.phone-flat iframe { width: 100%; height: 100%; border: 0; display: block; }
.try-lemur { position: absolute; left: -46px; bottom: 60px; width: 92px; transform: rotate(-8deg); }
.try-lemur svg { width: 100%; height: auto; overflow: visible; }

/* ---------- bento lemur + hover ---------- */
.cell-lemur { width: 70px; margin-bottom: 8px; }
.cell-lemur svg { width: 100%; height: auto; }
.cell { transition: transform 300ms var(--ease-ui), box-shadow 300ms var(--ease-ui); }
@media (hover: hover) {
  .cell:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 6px 8px 0 var(--sakura-sh); }
  .cell:nth-child(even):hover { transform: translateY(-4px) rotate(.6deg); }
  .btn:hover .btn-chip { animation: ll-wiggle 600ms var(--ease-ui); }
  .chip { transition: transform 200ms var(--ease-pop); } .chip:hover { transform: translateY(-3px) rotate(-3deg); }
}

/* ---------- timeline stamp, receipt stamp ---------- */
.timeline li { padding-right: 46px; }
.tl-stamp { position: absolute; right: 0; top: -4px; width: 40px; height: 40px; border: 3px solid var(--verm); border-radius: 8px; color: var(--verm);
  font-weight: 900; font-size: 1.3rem; display: grid; place-items: center; transform: rotate(-10deg); background: var(--card); }
.receipt { position: relative; }
.paid { position: absolute; right: 18px; bottom: 52px; border: 3px solid var(--verm); color: var(--verm); border-radius: 10px; padding: 4px 10px;
  font-weight: 900; font-size: 1.05rem; line-height: 1.1; text-align: center; transform: rotate(-12deg); background: rgba(255,253,248,.85); }
.paid small { display: block; font-family: "Fredoka", sans-serif; font-size: .6rem; letter-spacing: .14em; }

/* ---------- fun bits that work everywhere ---------- */
.tapme { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tapme.hop { animation: ll-hop 700ms var(--ease-pop); }
.say { position: absolute; z-index: 60; pointer-events: none; background: var(--card); color: var(--verm); border: 2px solid var(--verm); border-radius: 14px;
  padding: 3px 10px; font-weight: 900; font-size: .95rem; white-space: nowrap; animation: ll-say 1500ms var(--ease-pop) forwards; }
.spark { position: fixed; z-index: 70; width: 14px; height: 14px; pointer-events: none; }
.spark svg { width: 100%; height: 100%; fill: var(--sakura); }
.faq-lemur.react .ll-head { transform-box: fill-box; transform-origin: 50% 90%; animation: ll-tilt 700ms var(--ease-ui); }
.qa[open] p { animation: ll-open 320ms var(--ease-in); }

/* ---------- motion layer ---------- */
.mo mark.hl { background-size: 0% 100%; animation: ll-mark 800ms var(--ease-ui) 650ms forwards; }
.mo .try-link .arrow { animation: ll-bob 1.2s ease-in-out 1.6s 4; }
.mo .hero.live .hero-petals .petal { animation: ll-drift 11s linear infinite; }
.mo .hero-petals .p1 { left: 6%; animation-delay: 0s !important; } .mo .hero-petals .p2 { left: 18%; animation-delay: 3.1s !important; }
.mo .hero-petals .p3 { left: 33%; animation-delay: 6.2s !important; } .mo .hero-petals .p4 { left: 47%; animation-delay: 1.6s !important; }
.mo .hero-petals .p5 { left: 61%; animation-delay: 4.7s !important; } .mo .hero-petals .p6 { left: 74%; animation-delay: 8.1s !important; }
.mo .hero-petals .p7 { left: 86%; animation-delay: 2.4s !important; } .mo .hero-petals .p8 { left: 95%; animation-delay: 9.3s !important; }
.mo .rv.pop { transform: scale(.6) rotate(-6deg); transition: opacity 300ms ease, transform 520ms var(--ease-pop); transition-delay: var(--d, 0ms); }
.mo .rv.pop.in, .mo.shown .rv.pop { transform: none; }
.mo .statement.in em.pop { display: inline-block; animation: ll-jelly 800ms var(--ease-pop) 850ms both; }
.mo .timeline li::before { transform: scale(0); transition: transform 420ms var(--ease-pop); transition-delay: calc(var(--i, 0) * 170ms + 250ms); }
.mo .timeline.in li::before, .mo.shown .timeline li::before { transform: scale(1); }
.mo .timeline .tl-stamp { opacity: 0; }
.mo .timeline.in .tl-stamp, .mo.shown .timeline .tl-stamp { animation: ll-thump 520ms var(--ease-pop) 1250ms both; }
.mo .crow .mk.yes path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 500ms var(--ease-ui) 280ms; }
.mo .crow.in .mk.yes path, .mo.shown .crow .mk.yes path { stroke-dashoffset: 0; }
.mo .ctable .stamp { opacity: 0; }
.mo .ctable.in .stamp, .mo.shown .ctable .stamp { animation: ll-thump-r 520ms var(--ease-pop) 500ms both; }
.mo .receipt.rv { opacity: 1; transform: rotate(-1.5deg); clip-path: inset(0 0 100% 0); transition: clip-path 1100ms cubic-bezier(.77,0,.175,1); }
.mo .receipt.rv.in, .mo.shown .receipt.rv { clip-path: inset(0 0 -20px 0); }
.mo .receipt .paid { opacity: 0; }
.mo .receipt.in .paid, .mo.shown .receipt .paid { animation: ll-thump 520ms var(--ease-pop) 1250ms both; }
.mo .bonus.in .hanko { animation: ll-thump 520ms var(--ease-pop) 300ms both; }
.mo .try-art.rv { transform: translateY(30px) rotate(-2deg); }
.mo .try-art.rv.in { transform: none; }
.mo .try-art.in .try-lemur { animation: ll-peek-l 600ms var(--ease-pop) 500ms both; }
.mo .try-art.in .try-lemur .ll-wave { transform-box: fill-box; transform-origin: 0% 100%; animation: ll-wave 1s ease-in-out 1200ms 2; }
.mo .cell.in .cell-lemur .ll-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: ll-sway 2.6s ease-in-out 3; }
.mo .try-lemur .ll-eyes, .mo .cell-lemur .ll-eyes { transform-box: fill-box; transform-origin: center; animation: ll-blink 4.2s 1.5s 5; }
@keyframes ll-mark { to { background-size: 100% 100%; } }
@keyframes ll-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes ll-drift { 0% { opacity: 0; transform: translate(0, -20px) rotate(0); } 8% { opacity: .85; } 50% { transform: translate(-40px, 45vh) rotate(260deg); }
  92% { opacity: .7; } 100% { opacity: 0; transform: translate(20px, 92vh) rotate(520deg); } }
@keyframes ll-jelly { 0% { transform: scale(1); } 30% { transform: scale(1.25, .8); } 50% { transform: scale(.88, 1.12); } 70% { transform: scale(1.06, .95); } 100% { transform: none; } }
@keyframes ll-thump { 0% { opacity: 0; transform: scale(2.4) rotate(-24deg); } 70% { opacity: 1; transform: scale(.92) rotate(-10deg); } 100% { opacity: 1; transform: rotate(-12deg); } }
@keyframes ll-thump-r { 0% { opacity: 0; transform: scale(2.2) rotate(30deg); } 70% { opacity: 1; transform: scale(.9) rotate(8deg); } 100% { opacity: 1; transform: rotate(10deg); } }
@keyframes ll-peek-l { from { opacity: 0; transform: translate(40px, 20px) rotate(10deg); } to { opacity: 1; transform: rotate(-8deg); } }
@keyframes ll-hop { 0% { transform: translateY(0); } 30% { transform: translateY(4px) scale(1.06, .92); } 60% { transform: translateY(-22px) scale(.96, 1.05); } 100% { transform: translateY(0); } }
@keyframes ll-say { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.4); } 18% { opacity: 1; transform: translate(-50%, -6px) scale(1); } 80% { opacity: 1; transform: translate(-50%, -12px); } 100% { opacity: 0; transform: translate(-50%, -22px); } }
@keyframes ll-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes ll-tilt { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-9deg); } 70% { transform: rotate(4deg); } }
@keyframes ll-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- desktop: left aligned, two columns ---------- */
@media (min-width: 960px) {
  .hero-copy, .ladder-copy, .try-copy, .price-copy, .faq-side, .final-copy { text-align: left; }
  .hero-copy .lede, .try-copy .sub, .price-copy .sub { margin-left: 0; }
  .hero-cta { align-items: flex-start; }
  .steps, .ticks, .try-pts { margin-left: 0; }
  .final-lemur { margin-left: 0; }
  .timeline { max-width: none; }
  .try { padding: 112px 0; }
  .try-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 56px; }
  .try-lemur { left: -70px; width: 110px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) { .bonus { flex-direction: row; text-align: left; } .cell { text-align: left; } .cell-lemur { margin-left: 0; } }
/* try lemur: peeks over the phone's top edge on small screens, sits beside it on desktop */
.try-art { padding-top: 56px; }
.try-lemur { left: 10px; top: 0; bottom: auto; width: 84px; transform: rotate(-6deg); }
@media (min-width: 960px) { .try-art { padding-top: 0; } .try-lemur { left: -70px; top: auto; bottom: 60px; width: 110px; } }
.try-art { padding-top: 84px; }
/* comparison header lemur: sit fully inside the header cell so the table's rounded clip never cuts it */
@media (min-width: 640px) {
  .ch-ll { padding-right: 56px !important; }
  .stamp { top: 50%; margin-top: -21px; right: 12px; width: 36px; }
}