/* ==========================================================================
   Foldora — /foldora/** (landing EN/TR, legal pages)
   Tokens from the Foldora app: Fold Teal ground, Sheet cards with paper
   shadow, 4px radius, slight tilt. Chivo 500/700/800/900. The teal ground is
   is the light ground; dark mode drops to the app's night teal with dark paper cards.
   ========================================================================== */
:root {
  color-scheme: light dark;
  --teal: #1F5C5A; --teal-2: #2A746F; --teal-3: #3A8E86; --teal-ink: #BFE0DB;
  --sheet: #FFFFFF; --ink: #1F2B2A; --muted: #4A5B59; --mustard: #F2C14E; --coral: #E8654A;
  --on-teal: #F4FAF9; --line: #D5E3E1;
  --paper: 0 1px 1px rgba(0,0,0,.14), 0 6px 14px rgba(0,0,0,.24);
  --card: #FFFFFF; --card-2: #F4F8F7; --card-3: #E6EEED; --link: #17504E;
  --ink-fixed: #1F2B2A; --on-mustard-2: #4D3C10; --on-coral: #FFFFFF; --chip: #1F2B2A;
  --cut: #18504E; --foot-bg: #4FA89D; --foot-ink: #0F3532;
  --store-bg: rgba(21,32,31,.72); --store-bg-cta: rgba(21,32,31,.82);
  --device-frame: #0E2423; --device-rim: #2E4B49; --btn-ghost-bg: #FFFFFF;
  --hills-hero: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 70C240 20 480 90 760 55S1220 20 1440 60V120H0Z' fill='%232A746F' fill-opacity='.55'/></svg>");
  --hills-cta: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'><path d='M0 90C260 30 520 120 820 70S1260 40 1440 90V220H0Z' fill='%232A746F'/><path d='M0 140C200 100 440 170 740 130S1240 100 1440 140V220H0Z' fill='%233A8E86'/><path d='M0 190C300 160 600 210 900 180S1300 170 1440 190V220H0Z' fill='%234FA89D'/></svg>");
  --r: 4px;
  --font: 'Chivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* ---- Dark palette: from the app's dark icon board (ground #0C2221, hills #163E3C / #1D4D4A / #245D59,
   mustard #F5C964, coral #F07A5E). System preference unless the visitor picked a theme. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  --teal: #0C2221; --teal-2: #163E3C; --teal-3: #1D4D4A; --teal-ink: #A9CBC6; --on-teal: #EAF4F2;
  --sheet: #18302E; --ink: #EAF4F2; --muted: #A4BCB8; --mustard: #F5C964; --coral: #F07A5E; --line: #2D4A47;
  --paper: 0 1px 1px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  --card: #18302E; --card-2: #1F3B38; --card-3: #2A4845; --link: #8FDDD1;
  --ink-fixed: #14201F; --on-mustard-2: #3A2D08; --on-coral: #14201F; --chip: #0C2221;
  --cut: #081918; --foot-bg: #245D59; --foot-ink: #E6F3F1;
  --store-bg: #2B4B48; --store-bg-cta: #0C2221;
  --device-frame: #0A1A19; --device-rim: #5B8985; --btn-ghost-bg: #18302E;
  --hills-hero: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 70C240 20 480 90 760 55S1220 20 1440 60V120H0Z' fill='%23163E3C' fill-opacity='1'/></svg>");
  --hills-cta: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'><path d='M0 90C260 30 520 120 820 70S1260 40 1440 90V220H0Z' fill='%23163E3C'/><path d='M0 140C200 100 440 170 740 130S1240 100 1440 140V220H0Z' fill='%231D4D4A'/><path d='M0 190C300 160 600 210 900 180S1300 170 1440 190V220H0Z' fill='%23245D59'/></svg>");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --teal: #0C2221; --teal-2: #163E3C; --teal-3: #1D4D4A; --teal-ink: #A9CBC6; --on-teal: #EAF4F2;
  --sheet: #18302E; --ink: #EAF4F2; --muted: #A4BCB8; --mustard: #F5C964; --coral: #F07A5E; --line: #2D4A47;
  --paper: 0 1px 1px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  --card: #18302E; --card-2: #1F3B38; --card-3: #2A4845; --link: #8FDDD1;
  --ink-fixed: #14201F; --on-mustard-2: #3A2D08; --on-coral: #14201F; --chip: #0C2221;
  --cut: #081918; --foot-bg: #245D59; --foot-ink: #E6F3F1;
  --store-bg: #2B4B48; --store-bg-cta: #0C2221;
  --device-frame: #0A1A19; --device-rim: #5B8985; --btn-ghost-bg: #18302E;
  --hills-hero: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 70C240 20 480 90 760 55S1220 20 1440 60V120H0Z' fill='%23163E3C' fill-opacity='1'/></svg>");
  --hills-cta: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'><path d='M0 90C260 30 520 120 820 70S1260 40 1440 90V220H0Z' fill='%23163E3C'/><path d='M0 140C200 100 440 170 740 130S1240 100 1440 140V220H0Z' fill='%231D4D4A'/><path d='M0 190C300 160 600 210 900 180S1300 170 1440 190V220H0Z' fill='%23245D59'/></svg>");
}
:root[data-theme="light"] { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--teal); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--teal); color: var(--on-teal);
  font-family: var(--font); font-weight: 500; font-size: 17px; line-height: 1.6;
  background-image: radial-gradient(120% 60% at 50% 110%, var(--teal-2) 0, transparent 60%);
  background-repeat: no-repeat;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; border-radius: 2px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--mustard); color: var(--ink-fixed); padding: 10px 14px; border-radius: var(--r); font-weight: 800; }
.skip-link:focus { top: 12px; }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* header / footer */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; max-width: 1000px; width: 100%; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-teal); }
.brand .mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.wordmark { font-weight: 900; font-size: 24px; letter-spacing: -.05em; line-height: 1; }
.site-header nav { display: flex; align-items: center; gap: 8px; }
.nav-link { text-decoration: none; font-weight: 700; font-size: 15px; padding: 8px 10px; }
.nav-link:hover { text-decoration: underline; }
.pill-btn { text-decoration: none; font-weight: 800; font-size: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.14); color: var(--on-teal); border: 1px solid rgba(255,255,255,.3); }
.pill-btn:hover { background: rgba(255,255,255,.24); }
.site-footer { margin-top: auto; padding: 36px 16px 32px; max-width: 1000px; width: 100%; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 28px; border-top: 1px solid rgba(255,255,255,.18); font-size: 14px; color: var(--teal-ink); }
.site-footer .brand { color: var(--on-teal); }
.site-footer .brand .mark { width: 26px; height: 26px; }
.site-footer .wordmark { font-size: 19px; }
.footer-main { display: flex; flex-direction: column; gap: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-start; }
.footer-links a, .studio a { color: var(--on-teal); }
main { padding-bottom: 48px; }

/* sheet card */
.sheet { background: var(--sheet); color: var(--ink); border-radius: var(--r); box-shadow: var(--paper); }
.sheet a { color: var(--link); font-weight: 700; }

/* store buttons (shared "Soon" state) */
.store-btns { display: flex; flex-wrap: wrap; gap: 12px 14px; justify-content: center; }
.store-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 18px 8px 14px; border-radius: 999px; background: var(--store-bg); color: #fff; cursor: default; user-select: none; }
.store-btn > svg { width: 24px; height: 24px; fill: currentColor; flex: none; opacity: .75; }
.store-btn > span { display: flex; flex-direction: column; text-align: left; line-height: 1.1; opacity: .85; }
.store-btn small { font-size: 11px; font-weight: 700; }
.store-btn b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.store-btn::after { content: "Soon"; position: absolute; top: -10px; right: -8px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: 5px 8px; border-radius: 999px; background: var(--mustard); color: var(--ink-fixed); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
html[lang="tr"] .store-btn::after { content: "Yakında"; }

/* theme toggle (same shape as Duo: moon in light, sun in dark) */
button.pill-btn { font-family: inherit; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: 8px; }
.pill-btn svg { width: 18px; height: 18px; stroke-width: 1.9; flex: none; }
.theme-ico-dark { display: none; }
:root[data-theme="dark"] .theme-ico-light { display: none; }
:root[data-theme="dark"] .theme-ico-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-ico-light { display: none; } :root:not([data-theme="light"]) .theme-ico-dark { display: block; } }

/* legal pages */
.legal-main { padding-top: 12px; }
.legal-head { padding: 8px 4px 22px; }
.eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mustard); }
.legal-head h1 { margin: 0; font-size: clamp(32px, 8vw, 46px); font-weight: 900; letter-spacing: -.04em; line-height: 1.05; }
.lede { margin: 12px 0 0; color: var(--teal-ink); font-size: 18px; font-weight: 500; }
.lede a { color: var(--on-teal); font-weight: 800; }
.prose.sheet { padding: 26px 24px; transform: rotate(-.35deg); }
.prose section + section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.prose h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.prose p { margin: 0 0 12px; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0; padding-left: 22px; }
.prose li { margin: 0 0 10px; }
.prose li:last-child { margin-bottom: 0; }
.prose strong { font-weight: 800; }
.prose a { overflow-wrap: anywhere; }

/* support FAQ */
.faq-list { display: grid; gap: 14px; }
.faq-item { background: var(--sheet); color: var(--ink); border-radius: var(--r); box-shadow: var(--paper); padding: 0 18px; }
.faq-item:nth-child(odd) { transform: rotate(.4deg); }
.faq-item:nth-child(even) { transform: rotate(-.4deg); }
.faq-item summary { cursor: pointer; padding: 16px 0; font-weight: 800; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--mustard); color: var(--ink-fixed); display: grid; place-items: center; font-weight: 900; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0 0 16px; color: var(--muted); }
.faq-item a { color: var(--link); font-weight: 700; }
.contact-callout { margin: 24px 4px 0; font-weight: 700; color: var(--teal-ink); }
.contact-callout a { color: var(--on-teal); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .prose.sheet { padding: 20px 16px; }
  .store-btns { gap: 10px; width: 100%; }
  .store-btn { flex: 1 1 calc(50% - 5px); justify-content: center; padding-left: 10px; padding-right: 10px; min-height: 52px; }
  .store-btn b { font-size: 15px; }
  .store-btn::after { right: -4px; }
  .nav-link { padding: 8px 4px; }
  #theme-toggle { padding: 8px 11px; }
  #theme-toggle .tt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ==========================================================================
   Landing (/foldora/, /foldora/tr/). Same bones as the other app landings
   (hero, chapters, steps, FAQ, CTA, footer), dressed in Foldora's paper.
   ========================================================================== */
.foldora-landing main { padding-bottom: 0; overflow-x: clip; }
.lwrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.foldora-landing .site-header { max-width: 1120px; padding: 16px 20px; }
.foldora-landing .site-footer { max-width: 1120px; margin-top: 0; padding-left: 20px; padding-right: 20px; }
.foldora-landing .site-footer { position: relative; z-index: 1; }

.chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: var(--on-teal); font-size: 13.5px; font-weight: 800; letter-spacing: .01em; line-height: 1.2; }
.chip .dot { width: 10px; height: 10px; border-radius: 2px; background: var(--mustard); rotate: 12deg; box-shadow: 0 2px 4px rgba(0,0,0,.3); flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 26px; border-radius: var(--r); background: var(--coral); color: var(--on-coral); font-weight: 900; font-size: 18px; text-decoration: none; box-shadow: var(--paper); transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-2px) rotate(-.6deg); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 1px rgba(0,0,0,.14), 0 2px 4px rgba(0,0,0,.2); }
.btn.ghost { background: var(--btn-ghost-bg); color: var(--ink); }
.pen { display: inline-block; background: var(--mustard); color: var(--ink-fixed); padding: 0 .16em .04em; border-radius: 3px; rotate: -1.2deg; box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 5px 10px rgba(0,0,0,.25); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sub { margin: 0; font-size: clamp(19px, 2vw, 24px); font-weight: 800; color: var(--teal-ink); line-height: 1.3; letter-spacing: -.01em; }

/* ---- hero ---- */
.hero { position: relative; padding: clamp(20px, 4vw, 48px) 0 clamp(72px, 10vw, 132px); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; background: var(--hills-hero) bottom/100% 100% no-repeat; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; position: relative; z-index: 1; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero h1 { margin: 6px 0 0; font-size: clamp(44px, 7.4vw, 92px); font-weight: 900; letter-spacing: -.045em; line-height: 1.04; }
.hero h1 .w { display: inline-block; margin: 0 .04em .06em 0; }
.hero h1 .w-coral { background: var(--coral); color: var(--on-coral); padding: 0 .14em .03em; border-radius: 4px; rotate: 1.6deg; box-shadow: var(--paper); }
.hero h1 .w-mustard { background: var(--mustard); color: var(--ink-fixed); padding: 0 .14em .03em; border-radius: 4px; rotate: -1.4deg; box-shadow: var(--paper); }
.hero .lede { margin: 0; max-width: 52ch; font-size: clamp(17px, 1.5vw, 19px); color: var(--on-teal); opacity: .92; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 6px; }
.hero-law { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 0; padding: 0; font-size: 14px; font-weight: 800; color: var(--teal-ink); }
.hero-law span { display: inline-flex; align-items: center; gap: 8px; }
.hero-law i { width: 14px; height: 14px; border-radius: 2px; rotate: 10deg; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.hero-law i.coral { background: var(--coral); } .hero-law i.mustard { background: var(--mustard); } .hero-law i.white { background: #fff; }

.hero-visual { position: relative; display: grid; place-items: center; padding: 28px 0 12px; }
.hero-visual::before { content: ""; position: absolute; inset: 6% -2% 2%; border-radius: 4px; background: var(--cut); rotate: -2.5deg; box-shadow: inset 0 3px 8px rgba(0,0,0,.35); }
.crane { position: absolute; right: -2%; top: 0; width: clamp(80px, 11vw, 124px); z-index: 3; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); animation: flutter 5s ease-in-out infinite; }
.toast { background: var(--card); color: var(--ink); font-weight: 900; font-size: 17px; padding: 10px 18px; border-radius: 3px; box-shadow: 0 1px 1px rgba(0,0,0,.14), 0 8px 18px rgba(0,0,0,.3); position: absolute; z-index: 4; rotate: -4deg; }
.hero-visual .toast { left: -2%; top: 38%; }
.toast.float { animation: bob 6s ease-in-out infinite; }
@keyframes flutter { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(-8px, 10px) rotate(3deg); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* phone */
.device { position: relative; z-index: 2; width: min(290px, 70vw); aspect-ratio: 390 / 844; border-radius: 40px; padding: 9px; background: var(--device-frame); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 28px 50px rgba(0,0,0,.4), inset 0 0 0 2px var(--device-rim); }
.device .scr { display: block; width: 100%; height: 100%; border-radius: 32px; background: var(--teal); }
.device .island { position: absolute; z-index: 3; top: 18px; left: 50%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 99px; background: #050B0B; }
.tilt-r { rotate: 2deg; } .tilt-l { rotate: -2deg; }
.hero-visual .device { width: min(310px, 64vw); }

/* ---- chapters ---- */
.ch { position: relative; padding: clamp(64px, 9vw, 120px) 0; }
.ch.deep { background: var(--cut); box-shadow: inset 0 6px 10px -4px rgba(0,0,0,.35), inset 0 -6px 10px -4px rgba(0,0,0,.25); }
.ch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ch.flip .ch-copy { order: 2; }
.ch-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ch h2, .sec h2, .cta h2 { margin: 6px 0 0; font-size: clamp(34px, 4.6vw, 60px); font-weight: 900; letter-spacing: -.04em; line-height: 1.04; }
.ch .body { margin: 0; max-width: 52ch; font-size: clamp(17px, 1.3vw, 19px); opacity: .94; }
.ch-points { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ch-points li { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 17px; }
.ch-points svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 3px; background: var(--card); color: var(--ink); box-shadow: 0 1px 1px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.22); }
.ch-points li:nth-child(odd) svg { rotate: -3deg; } .ch-points li:nth-child(even) svg { rotate: 2deg; }
.ch-visual { position: relative; display: grid; place-items: center; min-height: 380px; }

/* swipe stage */
.swipe-stage { position: relative; width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; gap: 34px; padding-top: 6px; }
.swipe-stage .tiles { display: flex; gap: 10px; }
.tile { width: 62px; height: 62px; background: var(--mustard); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 900; color: var(--ink-fixed); border-radius: 3px; box-shadow: 0 1px 1px rgba(0,0,0,.14), 0 5px 10px rgba(0,0,0,.28); transform-origin: top; animation: unf 3.6s cubic-bezier(.3,1.3,.5,1) infinite; }
@keyframes unf { 0%, 62% { transform: perspective(300px) rotateX(-95deg); } 74%, 100% { transform: perspective(300px) rotateX(0); } }
.swipe-wheel { position: relative; width: 240px; height: 240px; border-radius: 50%; background: var(--card); box-shadow: 8px 8px 0 var(--coral), 16px 16px 0 var(--mustard), 0 18px 36px rgba(0,0,0,.3); }
.swipe-wheel text { fill: var(--ink); }
.swipe-wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.swipe { stroke-dasharray: 260; animation: swipe 3.6s ease-in-out infinite; }
@keyframes swipe { 0%, 8% { stroke-dashoffset: 260; } 55%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.swipe-wheel .hand { left: 112px; top: 46px; width: 54px; height: 64px; inset: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); animation: hand 3.6s ease-in-out infinite; }
@keyframes hand { 0%, 8% { transform: translate(0, 0); } 30% { transform: translate(78px, 134px); } 55%, 80% { transform: translate(-78px, 134px); } 100% { transform: translate(-78px, 134px); opacity: 0; } }
.paused .tile, .paused .swipe, .paused .hand, .paused .crane, .paused .toast { animation-play-state: paused; }

/* worlds + daily stages */
.worlds-stage, .daily-stage { padding: 12px 0 20px; }
.worlds-stage .device, .daily-stage .device { width: min(290px, 68vw); }
.moment { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; background: var(--card); color: var(--ink); padding: 12px 20px 12px; border-radius: 4px; line-height: 1; }
.moment b { font-size: clamp(38px, 4.4vw, 56px); font-weight: 900; letter-spacing: -.04em; }
.moment span { margin-top: 4px; font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.moment.m1 { left: 0; top: 8%; rotate: -4deg; box-shadow: 6px 6px 0 var(--coral), 0 14px 26px rgba(0,0,0,.3); }
.moment.m2 { right: 0; top: 24%; rotate: 3deg; background: var(--mustard); box-shadow: 6px 6px 0 var(--coral), 0 14px 26px rgba(0,0,0,.3); }
.moment.m2 span { color: var(--on-mustard-2); }
.moment.m2 b { color: var(--ink-fixed); }
.chaps { position: absolute; z-index: 4; right: -2%; bottom: 2%; margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; width: min(190px, 44%); }
.chap { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; background: var(--card); color: var(--ink); border-radius: 3px; box-shadow: var(--paper); font-size: 12px; font-weight: 700; }
.chap b { font-size: 15px; font-weight: 900; }
.chap span { color: var(--muted); }
.chap:nth-child(1) { rotate: -1.4deg; } .chap:nth-child(2) { rotate: 1deg; } .chap.now { rotate: -.8deg; box-shadow: 6px 6px 0 var(--mustard), 0 10px 22px rgba(0,0,0,.32); }
.daily-stage .toast { right: 2%; bottom: 20%; rotate: 4deg; font-size: 20px; background: var(--mustard); color: var(--ink-fixed); }

/* ---- sections ---- */
.sec { padding-top: clamp(56px, 8vw, 100px); padding-bottom: 8px; }
.sec-head { margin-bottom: clamp(26px, 4vw, 44px); }
.sec-head.center { text-align: center; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: s; }
.step { position: relative; background: var(--card); color: var(--ink); border-radius: 4px; padding: 30px 24px 26px; box-shadow: var(--paper); }
.step:nth-child(1) { rotate: -1.2deg; box-shadow: 6px 6px 0 var(--coral), 0 12px 24px rgba(0,0,0,.3); }
.step:nth-child(2) { rotate: .8deg; box-shadow: 6px 6px 0 var(--mustard), 0 12px 24px rgba(0,0,0,.3); }
.step:nth-child(3) { rotate: -.6deg; box-shadow: 6px 6px 0 var(--coral), 0 12px 24px rgba(0,0,0,.3); }
.step .num { position: absolute; top: -18px; left: 20px; width: 40px; height: 44px; display: grid; place-items: center; background: var(--mustard); border-radius: 3px; font-size: 24px; font-weight: 900; rotate: -4deg; box-shadow: var(--paper); }
.step h3 { margin: 6px 0 8px; font-size: 30px; font-weight: 900; letter-spacing: -.03em; }
.step p { margin: 0; color: var(--muted); font-size: 17px; }

.more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 28px; }
.paper-card { background: var(--card); color: var(--ink); border-radius: 4px; padding: 26px 24px; box-shadow: var(--paper); display: flex; flex-direction: column; gap: 12px; }
.paper-card:nth-child(1) { rotate: -.7deg; } .paper-card:nth-child(2) { rotate: .6deg; } .paper-card:nth-child(3) { rotate: .5deg; } .paper-card:nth-child(4) { rotate: -.6deg; }
.paper-card h3 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 900; letter-spacing: -.03em; }
.paper-card h3 svg { width: 34px; height: 34px; padding: 6px; border-radius: 3px; background: var(--mustard); color: var(--ink-fixed); flex: none; rotate: -4deg; }
.paper-card > p { margin: 0; color: var(--muted); font-size: 16.5px; }
.wb-entry { margin-top: auto; padding: 14px 16px; background: var(--card-2); border-left: 5px solid var(--mustard); display: flex; flex-direction: column; gap: 2px; }
.wb-entry small { font-size: 11px; font-weight: 900; letter-spacing: .1em; color: var(--muted); }
.wb-entry b { font-size: 24px; font-weight: 900; } .wb-entry em { font-size: 13px; font-weight: 700; color: var(--muted); font-style: italic; }
.wb-entry span { font-size: 15px; color: var(--muted); }
.lg-head { display: flex; flex-direction: column; margin-top: 4px; } .lg-head b { font-size: 18px; font-weight: 900; } .lg-head small { font-size: 13px; font-weight: 700; color: var(--muted); }
.lg-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lg-list .row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--card-2); border-radius: 3px; font-weight: 800; font-size: 15px; }
.lg-list .rk { width: 16px; color: var(--muted); }
.lg-list .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card-3); font-size: 11px; font-weight: 900; }
.lg-list .nm { flex: 1; } .lg-list .pt { font-weight: 900; }
.lg-list .row.you { background: var(--mustard); rotate: -1deg; box-shadow: 4px 4px 0 var(--coral); }
.lg-list .row.you .av { background: var(--ink-fixed); color: var(--mustard); }
.lg-list .row.you { color: var(--ink-fixed); }
.lg-list .row:first-child .av { background: var(--coral); color: var(--on-coral); }
.widgets { display: flex; gap: 14px; margin-top: auto; }
.wg { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 4px; box-shadow: var(--paper); min-height: 118px; }
.wg small { font-size: 10.5px; font-weight: 900; letter-spacing: .1em; }
.wg b { font-size: 34px; font-weight: 900; line-height: 1.1; letter-spacing: -.03em; margin-top: auto; }
.wg span { font-size: 13px; font-weight: 700; }
.wg-daily { background: var(--mustard); rotate: -1.5deg; } .wg-daily small, .wg-daily span { color: var(--on-mustard-2); } .wg-daily b { color: var(--ink-fixed); } .wg-daily b { font-size: 26px; }
.wg-streak { background: var(--teal); color: #fff; rotate: 1.5deg; } .wg-streak small, .wg-streak span { color: var(--teal-ink); }
.langs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 9px; }
.lang-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 3px; background: var(--card-2); font-weight: 800; font-size: 15px; box-shadow: inset 0 0 0 1.5px var(--line); }
.lang-pill small { font-size: 10.5px; font-weight: 900; letter-spacing: .06em; padding: 3px 6px; border-radius: 2px; background: var(--chip); color: #fff; }
.lang-pill:nth-child(3n+1) small { background: var(--coral); color: var(--on-coral); } .lang-pill:nth-child(3n+2) small { background: var(--teal); }

.faq-list.narrow { max-width: 780px; margin: 0 auto; }

.cta { padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(88px, 12vw, 150px); position: relative; }
.cta-card { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; background: var(--card); color: var(--ink); border-radius: 4px; padding: 44px 28px 36px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; rotate: -.8deg; box-shadow: 10px 10px 0 var(--mustard), 0 20px 40px rgba(0,0,0,.35); }
.cta-tape { position: absolute; top: -14px; left: 50%; margin-left: -40px; width: 80px; height: 26px; background: rgba(242,193,78,.85); rotate: 3deg; }
.cta-mark { width: 96px; height: 96px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.cta-card h2 { font-size: clamp(28px, 4vw, 44px); margin: 4px 0 0; }
.cta-card p { margin: 0; max-width: 46ch; color: var(--muted); font-size: 18px; }
.cta-card .hero-cta { justify-content: center; margin-top: 10px; }
.cta-card .store-btn { background: var(--store-bg-cta); }
.cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: min(220px, 28vw); pointer-events: none; z-index: 0;
  background: var(--hills-cta) bottom/100% 100% no-repeat; }
.foldora-landing .site-footer { border-top: 0; background: var(--foot-bg); max-width: none; padding-left: max(20px, calc((100vw - 1120px) / 2 + 20px)); padding-right: max(20px, calc((100vw - 1120px) / 2 + 20px)); color: var(--foot-ink); }
.foldora-landing .site-footer .brand, .foldora-landing .site-footer .footer-links a, .foldora-landing .site-footer .studio a { color: var(--foot-ink); }
.foldora-landing .site-footer .studio { color: var(--foot-ink); }

/* scroll reveal (only when JS is on) */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.js .rv.d1 { transition-delay: .14s; }
.js .rv.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hero-grid, .ch-grid { grid-template-columns: 1fr; }
  .ch.flip .ch-copy { order: 0; }
  .hero-visual { margin-top: 16px; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .more-grid { grid-template-columns: 1fr; }
  .ch-visual { min-height: 0; }
}
@media (max-width: 640px) {
  .lwrap { padding: 0 16px; }
  .foldora-landing .site-header { padding: 12px 16px; }
  .hero h1 { font-size: clamp(40px, 12.6vw, 56px); }
  .hero-cta .btn { width: 100%; }
  .hero-visual .toast { left: 0; }
  .moment.m1 { left: -2px; } .moment.m2 { right: -2px; }
  .chaps { position: static; width: 100%; margin-top: 22px; grid-template-columns: 1fr; }
  .worlds-stage { display: flex; flex-direction: column; align-items: center; }
  .worlds-stage .moment { top: auto; }
  .worlds-stage .m1 { top: 3%; } .worlds-stage .m2 { top: 22%; }
  .cta-card { padding: 40px 20px 30px; box-shadow: 7px 7px 0 var(--mustard), 0 20px 40px rgba(0,0,0,.35); }
  .foldora-landing .site-footer { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .swipe, .hand, .crane, .toast.float { animation: none; }
  .tile { transform: none; } .swipe { stroke-dashoffset: 0; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}