/* Yennou: site styles. Tokens copied from the app's Theme.swift (lovetree/yennou/Common/Design).
   Lilac background, white cards, Montserrat ExtraBold headlines, the four task colours
   (reflection red, micro lavender, scenario peony, article orchid). Spacing on a 4px scale. */
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url(/fonts/montserrat-medium.woff) format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url(/fonts/montserrat-medium-ext.woff) format("woff"); unicode-range: U+0100-0130, U+0132-0151, U+0154-024F, U+0300-0323, U+0400-045F, U+0490-0491, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(/fonts/montserrat-semibold.woff) format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(/fonts/montserrat-semibold-ext.woff) format("woff"); unicode-range: U+0100-0130, U+0132-0151, U+0154-024F, U+0300-0323, U+0400-045F, U+0490-0491, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url(/fonts/montserrat-bold.woff) format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url(/fonts/montserrat-bold-ext.woff) format("woff"); unicode-range: U+0100-0130, U+0132-0151, U+0154-024F, U+0300-0323, U+0400-045F, U+0490-0491, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap; src: url(/fonts/montserrat-extrabold.woff) format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap; src: url(/fonts/montserrat-extrabold-ext.woff) format("woff"); unicode-range: U+0100-0130, U+0132-0151, U+0154-024F, U+0300-0323, U+0400-045F, U+0490-0491, U+1EA0-1EF9, U+20AB; }

:root {
  --bg: #e3d9ff;
  --surface: #ffffff;
  --soft: #f6f2ff;
  --tint: #eee6ff;
  --ink: #1b1433;
  --sub: #5f5778;
  --muted: #7d70a8;
  --faint: #9c91c0;
  --red: #f75757;      --red-deep: #c93c3c;
  --lavender: #8551e0; --lavender-deep: #6a3cc4;
  --peony: #e0418a;    --peony-deep: #a3205e;
  --orchid: #b13fd1;   --orchid-deep: #7a2496;
  --pink: #ffe1e6;
  --shadow: 0 12px 32px rgba(27, 20, 51, .12);
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", "Hiragino Sans", "PingFang SC", "Apple SD Gothic Neo", sans-serif;
  --max: 1120px;
  --gut: 16px;
  --r-sheet: 40px;
  --r-card: 28px;
  --r-inner: 24px;
  --r-row: 20px;
  color-scheme: light;
}
@media (min-width: 760px) { :root { --gut: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 600 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lavender-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--lavender); outline-offset: 3px; border-radius: 8px; }
main { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
svg { width: 100%; height: 100%; }

/* --------------------------------------------------------- shared bits */
.eyebrow, .label, .feat__k { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.lead { color: var(--sub); font-size: 18px; max-width: 640px; margin-top: 12px; }
.pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.pill--tint { background: var(--tint); }
.tile__go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); padding: 11px; flex: none; }
.more { margin-top: 20px; font-weight: 700; }

/* ---------------------------------------------------------------- nav */
.nav { position: sticky; top: 0; z-index: 40; padding: 12px var(--gut) 0; }
.nav__in { max-width: var(--max); margin: 0 auto; height: 64px; display: flex; align-items: center; gap: 16px; background: var(--surface); border-radius: 32px; padding: 0 10px 0 14px; box-shadow: var(--shadow); }
.nav__logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; }
.nav__logo:hover { text-decoration: none; }
.nav__logo img { border-radius: 10px; }
.nav__links { display: none; gap: 4px; margin-inline-start: auto; }
.nav__links a { color: var(--muted); font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 24px; }
.nav__links a:hover { background: var(--tint); color: var(--ink); text-decoration: none; }
.nav__cta { margin-inline-start: auto; background: var(--lavender); color: #fff; font-weight: 800; font-size: 15px; height: 44px; padding: 0 20px; border-radius: 22px; display: inline-flex; align-items: center; white-space: nowrap; }
.nav__cta:hover { background: var(--lavender-deep); text-decoration: none; }
@media (min-width: 860px) { .nav__links { display: flex; } .nav__cta { margin-inline-start: 0; } }

/* -------------------------------------------------------------- badge */
.badge { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border-radius: 999px; height: 52px; padding: 0 22px 0 18px; transition: transform .2s cubic-bezier(.2,.9,.25,1.3); }
.badge:hover { text-decoration: none; transform: scale(.97); }
.badge__apple { width: 22px; height: 26px; }
.badge__txt { display: flex; flex-direction: column; line-height: 1.05; }
.badge__txt small { font-size: 11px; font-weight: 600; opacity: .85; }
.badge__txt b { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.badge--big { height: 60px; padding: 0 26px 0 22px; }
.badge--big .badge__txt b { font-size: 21px; }

/* --------------------------------------------------------------- hero */
.hero { display: grid; gap: 40px; padding: 48px 0 24px; align-items: center; }
.hero__h { font-size: clamp(40px, 6vw, 68px); letter-spacing: -0.045em; line-height: .98; margin-top: 12px; }
.hero__h span { color: var(--lavender); display: block; }
.hero__sub { margin-top: 20px; font-size: 19px; color: var(--sub); max-width: 540px; }
.hero__cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero__note { font-size: 13px; color: var(--muted); font-weight: 700; }
.hero__art { position: relative; height: 560px; max-width: 520px; width: 100%; margin: 0 auto; }
.phone { border-radius: 44px; overflow: hidden; background: var(--surface); padding: 6px; box-shadow: 0 30px 60px rgba(27, 20, 51, .22); }
.phone img { border-radius: 38px; }
.hero .phone { position: absolute; width: 250px; }
.phone--front { left: 4%; top: 30px; z-index: 2; transform: rotate(-3deg); }
.phone--back { right: 2%; top: 0; transform: rotate(5deg); }
.bubble { position: absolute; z-index: 3; left: -2%; bottom: 0; display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: var(--r-row); padding: 10px 16px 10px 10px; box-shadow: var(--shadow); font-weight: 800; font-size: 15px; animation: hop 3.2s cubic-bezier(.2,.9,.25,1.3) infinite; }
.bubble img { width: 52px; }
@keyframes hop { 0%, 80%, 100% { transform: translateY(0); } 88% { transform: translateY(-8px); } }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.1fr 1fr; padding: 72px 0 40px; }
  .hero__art { height: 620px; }
  .hero .phone { width: 280px; }
}
@media (max-width: 480px) {
  .hero__art { height: 470px; }
  .hero .phone { width: 210px; border-radius: 36px; padding: 5px; }
  .hero .phone img { border-radius: 31px; }
}

/* ----------------------------------------------------------- sections */
.sec { padding: 56px 0 8px; }
.h2 { font-size: clamp(32px, 4.8vw, 52px); letter-spacing: -0.04em; margin-top: 10px; max-width: 820px; }
.h3 { font-size: 28px; }
.cards, .feats { display: grid; gap: 16px; margin-top: 28px; }
.card, .feat { background: var(--surface); border-radius: var(--r-card); padding: 24px; }
.card h3, .feat h3 { font-size: 22px; letter-spacing: -0.03em; }
.card p, .feat p:last-child { color: var(--sub); margin-top: 8px; }
.feat .feat__k { color: var(--lavender); }
.feat:nth-child(4n+2) .feat__k { color: var(--red); }
.feat:nth-child(4n+3) .feat__k { color: var(--peony); }
.feat:nth-child(4n+4) .feat__k { color: var(--orchid); }
.feat h3 { margin-top: 8px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } .feats { grid-template-columns: repeat(3, 1fr); } }

/* the four daily moments, drawn like the Today grid */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.tile { position: relative; border-radius: var(--r-card); padding: 16px 16px 72px; min-height: 230px; color: #fff; }
.tile h3 { font-size: 22px; letter-spacing: -0.03em; margin-top: 14px; }
.tile p { margin-top: 8px; font-size: 15px; opacity: .92; }
.tile .tile__go { position: absolute; right: 16px; bottom: 16px; }
.tile--red { background: var(--red); } .tile--red .pill, .tile--red .tile__go { color: var(--red-deep); }
.tile--lavender { background: var(--lavender); } .tile--lavender .pill, .tile--lavender .tile__go { color: var(--lavender-deep); }
.tile--peony { background: var(--peony); } .tile--peony .pill, .tile--peony .tile__go { color: var(--peony-deep); }
.tile--orchid { background: var(--orchid); } .tile--orchid .pill, .tile--orchid .tile__go { color: var(--orchid-deep); }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, 1fr); } .tile { min-height: 300px; } }
@media (max-width: 420px) { .tile h3 { font-size: 19px; } .tile p { font-size: 14px; } }

/* steps */
.steps { display: grid; gap: 20px; margin-top: 28px; }
.step { display: flex; gap: 16px; align-items: center; background: var(--surface); border-radius: var(--r-card); padding: 16px; }
.step .phone--sm { width: 118px; flex: none; border-radius: 22px; padding: 4px; box-shadow: none; background: var(--soft); }
.step .phone--sm img { border-radius: 18px; }
.step__n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-size: 15px; }
.step h3 { font-size: 22px; margin-top: 10px; letter-spacing: -0.03em; }
.step p { color: var(--sub); margin-top: 6px; font-size: 16px; }
.step .pill { margin-top: 10px; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { flex-direction: column; align-items: flex-start; padding: 20px; }
  .step .phone--sm { width: 62%; max-width: 220px; align-self: center; border-radius: 32px; padding: 6px; }
  .step .phone--sm img { border-radius: 27px; }
}

/* heart levels */
.journey { background: var(--surface); border-radius: var(--r-sheet); padding: 32px 20px; }
.hearts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; text-align: center; }
.hearts li { display: flex; flex-direction: column; align-items: center; }
.hearts img { width: 100%; max-width: 120px; height: 96px; object-fit: contain; }
.hearts b { margin-top: 10px; font-size: 15px; font-weight: 800; }
.hearts span { font-size: 13px; color: var(--sub); margin-top: 4px; line-height: 1.35; }
@media (min-width: 760px) { .journey { padding: 48px; } .hearts { gap: 20px; } .hearts b { font-size: 18px; } .hearts span { font-size: 14px; } }
@media (max-width: 560px) { .hearts span { display: none; } .hearts b { font-size: 12px; } .hearts img { height: 60px; } }

/* screenshots */
.shots { list-style: none; margin: 28px calc(var(--gut) * -1) 0; padding: 0 var(--gut) 16px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.shots::-webkit-scrollbar { display: none; }
.shots li { flex: none; width: 230px; scroll-snap-align: start; }
.shots img { border-radius: 34px; border: 5px solid var(--surface); box-shadow: 0 16px 32px rgba(27, 20, 51, .14); }
@media (min-width: 760px) { .shots li { width: 260px; } }

/* principles (onboarding "Important") */
.principles { display: grid; gap: 12px; margin-top: 28px; }
.principle { background: var(--surface); border-radius: var(--r-row); padding: 18px 20px; }
.principle p:last-child { margin-top: 4px; }
.principle--red .feat__k { color: var(--red); }
.principle--lavender .feat__k { color: var(--lavender); }
.principle--peony .feat__k { color: var(--peony); }
@media (min-width: 760px) { .principles { grid-template-columns: repeat(3, 1fr); } }

/* faq */
.faqs { display: grid; gap: 10px; margin-top: 24px; max-width: 820px; }
.faq { background: var(--surface); border-radius: var(--r-row); padding: 0 20px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 32px 18px 0; font-weight: 800; position: relative; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 24px; color: var(--lavender); }
.faq[open] summary::after { content: "–"; }
.faq p { padding: 0 0 18px; color: var(--sub); }

/* post cards (colored like the Learning stack) */
.pcards { display: grid; gap: 16px; margin-top: 28px; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 14px; border-radius: var(--r-card); padding: 18px 18px 76px; color: #fff; min-height: 190px; transition: transform .2s cubic-bezier(.2,.9,.25,1.3); }
.pcard:hover { text-decoration: none; transform: scale(.98); }
.pcard__t { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.pcard .pill { align-self: flex-start; }
.pcard .tile__go { position: absolute; right: 16px; bottom: 16px; }
.pcard--red { background: var(--red); } .pcard--red .pill, .pcard--red .tile__go { color: var(--red-deep); }
.pcard--lavender { background: var(--lavender); } .pcard--lavender .pill, .pcard--lavender .tile__go { color: var(--lavender-deep); }
.pcard--peony { background: var(--peony); } .pcard--peony .pill, .pcard--peony .tile__go { color: var(--peony-deep); }
.pcard--orchid { background: var(--orchid); } .pcard--orchid .pill, .pcard--orchid .tile__go { color: var(--orchid-deep); }
@media (min-width: 760px) { .pcards { grid-template-columns: repeat(3, 1fr); } }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.chips a { background: var(--surface); color: var(--ink); font-weight: 700; font-size: 15px; padding: 12px 18px; border-radius: 999px; }
.chips a:hover { background: var(--tint); text-decoration: none; }

/* landing "the idea" */
.spot { background: var(--surface); border-radius: var(--r-card); padding: 28px 24px; margin-top: 16px; max-width: 820px; }
.spot > p { color: var(--sub); margin-top: 12px; }
.spot ol { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.spot li { counter-increment: s; background: var(--soft); border-radius: 16px; padding: 14px 16px 14px 56px; position: relative; }
.spot li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--lavender); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.note { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* CTA */
.cta { position: relative; overflow: hidden; margin: 64px 0 32px; background: var(--lavender); color: #fff; border-radius: var(--r-sheet); padding: 40px 24px 200px; }
.cta h2 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.045em; max-width: 620px; }
.cta p { margin-top: 12px; font-size: 18px; opacity: .92; max-width: 520px; }
.cta .badge { margin-top: 24px; background: var(--surface); color: var(--ink); }
.cta__trust { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cta__trust li { background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.cta__heart { position: absolute; right: 24px; bottom: 24px; width: 170px; animation: hop 3.2s cubic-bezier(.2,.9,.25,1.3) infinite; }
@media (min-width: 760px) { .cta { padding: 56px; } .cta__heart { width: 230px; right: 56px; top: 50%; bottom: auto; margin-top: -110px; } }

/* ----------------------------------------------------------- articles */
.post { max-width: 840px; }
.post__head { padding: 40px 0 24px; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.crumbs a { color: var(--muted); }
.post__head .pill { background: var(--lavender); color: #fff; }
.post__head--red .pill { background: var(--red); }
.post__head--peony .pill { background: var(--peony); }
.post__head--orchid .pill { background: var(--orchid); }
.post h1 { font-size: clamp(34px, 5.4vw, 56px); letter-spacing: -0.045em; margin-top: 16px; }
.post__meta { color: var(--muted); font-size: 14px; margin-top: 16px; font-weight: 700; }
.post__card { background: var(--surface); border-radius: var(--r-sheet); padding: 28px 20px; }
@media (min-width: 760px) { .post__card { padding: 48px 56px; } }
.post__lead { font-size: 20px; line-height: 1.5; font-weight: 600; }
.tldr { border-radius: var(--r-inner); padding: 20px; margin-top: 24px; background: var(--tint); }
.tldr .feat__k { color: var(--lavender-deep); }
.tldr p:last-child { margin-top: 6px; font-weight: 600; }
.tldr--red { background: var(--pink); } .tldr--red .feat__k { color: var(--red-deep); }
.tldr--peony { background: #fde4ef; } .tldr--peony .feat__k { color: var(--peony-deep); }
.tldr--orchid { background: #f6e3fb; } .tldr--orchid .feat__k { color: var(--orchid-deep); }
.toc { background: var(--soft); border-radius: var(--r-inner); padding: 20px; margin-top: 16px; }
.toc ol { margin: 8px 0 0; padding-inline-start: 22px; display: grid; gap: 4px; font-size: 16px; }
.post__body { font-weight: 500; font-size: 18px; line-height: 1.7; color: #2a2245; }
.post__body h2 { font-size: clamp(26px, 3.4vw, 32px); margin: 44px 0 14px; color: var(--ink); scroll-margin-top: 96px; }
.post__body h3 { font-size: 21px; margin: 28px 0 10px; letter-spacing: -0.02em; color: var(--ink); }
.post__body p { margin: 0 0 16px; }
.post__body ul, .post__body ol { margin: 0 0 18px; padding-inline-start: 24px; display: grid; gap: 8px; }
.post__body li::marker { color: var(--lavender); font-weight: 800; }
.post__body a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(133, 81, 224, .35); }
.post__body blockquote { margin: 24px 0; padding: 18px 22px; border-radius: var(--r-row); background: var(--soft); font-weight: 700; font-size: 19px; color: var(--ink); border-inline-start: 6px solid var(--lavender); }
.try { margin: 24px 0; padding: 20px 22px; border-radius: var(--r-inner); background: var(--lavender); color: #fff; }
.try .feat__k { color: rgba(255, 255, 255, .8); }
.try p:last-child { margin: 6px 0 0; font-weight: 700; }
.tbl { overflow-x: auto; margin: 8px 0 20px; border-radius: var(--r-row); background: var(--soft); }
.tbl table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; }
.tbl th, .tbl td { text-align: start; padding: 12px 14px; vertical-align: top; }
.tbl th { font-weight: 800; background: var(--tint); color: var(--ink); }
.tbl tr + tr td { border-top: 1px solid var(--tint); }
.appcard { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; background: var(--tint); border-radius: var(--r-inner); padding: 20px; margin: 36px 0 8px; }
.appcard img { width: 72px; }
.appcard__t { display: flex; flex-direction: column; flex: 1 1 220px; }
.appcard__t b { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.appcard__t span { color: var(--sub); font-size: 15px; }
.post__faq { margin-top: 40px; }
.post__faq h2, .related h2 { font-size: 28px; }
.post__faq .faq { background: var(--soft); }
.sources { margin-top: 36px; }
.sources h2 { font-size: 16px; color: var(--sub); letter-spacing: 0; }
.sources ol { margin: 8px 0 0; padding-inline-start: 20px; font-size: 14px; display: grid; gap: 4px; font-weight: 500; }
.sources a { color: var(--sub); text-decoration: underline; }
.post__next { margin-top: 28px; color: var(--sub); font-size: 15px; }
.post__next a { font-weight: 800; }
.related { margin-top: 48px; }

/* glossary */
.terms { margin: 0; display: grid; gap: 4px; }
.term { padding: 18px 0; border-bottom: 1px solid var(--tint); scroll-margin-top: 96px; }
.term dt h2 { font-size: 22px; letter-spacing: -0.02em; }
.term dd { margin: 6px 0 0; color: var(--sub); font-weight: 500; }
.term:target { background: var(--soft); border-radius: var(--r-row); padding-inline: 16px; }

/* blog index */
.blog__head { padding: 48px 0 8px; }
.blog h1 { font-size: clamp(40px, 6.4vw, 68px); letter-spacing: -0.045em; margin-top: 10px; }
.bcards { display: grid; gap: 16px; margin: 28px 0 48px; }
.bcard { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border-radius: var(--r-card); padding: 22px 22px 80px; color: var(--ink); transition: transform .2s cubic-bezier(.2,.9,.25,1.3); }
.bcard:hover { text-decoration: none; transform: scale(.985); }
.bcard .pill { align-self: flex-start; color: #fff; }
.bcard__t { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.bcard__d { color: var(--sub); font-size: 15px; font-weight: 500; }
.bcard .tile__go { position: absolute; right: 18px; bottom: 18px; color: #fff; }
.bcard--red .pill, .bcard--red .tile__go { background: var(--red); }
.bcard--lavender .pill, .bcard--lavender .tile__go { background: var(--lavender); }
.bcard--peony .pill, .bcard--peony .tile__go { background: var(--peony); }
.bcard--orchid .pill, .bcard--orchid .tile__go { background: var(--orchid); }
@media (min-width: 760px) { .bcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bcards { grid-template-columns: repeat(3, 1fr); } }
.lost { width: 120px; margin-bottom: 16px; }

/* -------------------------------------------------------------- footer */
.foot { margin-top: 48px; padding: 0 var(--gut) calc(110px + env(safe-area-inset-bottom)); }
.foot__in { max-width: var(--max); margin: 0 auto; background: var(--surface); border-radius: var(--r-sheet); padding: 32px 24px; display: grid; gap: 28px; }
.foot__brand p { color: var(--sub); margin: 12px 0 18px; font-size: 15px; }
.foot__col { display: grid; gap: 10px; align-content: start; }
.foot__col a { color: var(--ink); font-weight: 700; font-size: 15px; }
.foot__note { max-width: var(--max); margin: 20px auto 0; font-size: 13px; color: var(--sub); font-weight: 500; padding: 0 8px; }
.foot__base { max-width: var(--max); margin: 12px auto 0; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 500; padding: 0 8px; }
.foot__base a { color: var(--muted); }
.langs summary { cursor: pointer; font-weight: 700; }
.langs__list { display: grid; gap: 6px; margin-top: 10px; }
@media (min-width: 760px) { .foot { padding-bottom: 40px; } .foot__in { grid-template-columns: 2fr 1fr 1fr; padding: 40px 48px; } }

/* sticky mobile CTA, styled like the app's floating tab bar */
.sticky { display: none; }
@media (max-width: 759px) {
  .sticky { display: flex; align-items: center; gap: 12px; position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; background: var(--surface); border-radius: 32px; padding: 8px 8px 8px 10px; box-shadow: 0 12px 32px rgba(27, 20, 51, .2); transition: transform .35s cubic-bezier(.32,.72,0,1), opacity .35s ease; }
  .sticky img { border-radius: 12px; }
  .sticky__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .sticky__t b { font-size: 15px; font-weight: 800; }
  .sticky__t span { font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky__btn { margin-inline-start: auto; background: var(--lavender); color: #fff; font-weight: 800; font-size: 15px; height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 22px; white-space: nowrap; }
  .sticky.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
}

/* right-to-left (Arabic) */
[dir="rtl"] .tile__go svg, [dir="rtl"] .badge + .tile__go svg { transform: scaleX(-1); }
[dir="rtl"] .tile .tile__go, [dir="rtl"] .pcard .tile__go { right: auto; left: 16px; }
[dir="rtl"] .bcard .tile__go { right: auto; left: 18px; }
[dir="rtl"] .faq summary { padding: 18px 0 18px 32px; }
[dir="rtl"] .faq summary::after { right: auto; left: 0; }
[dir="rtl"] .spot li { padding: 14px 56px 14px 16px; }
[dir="rtl"] .spot li::before { left: auto; right: 14px; }
[dir="rtl"] .cta__heart { right: auto; left: 24px; }
[dir="rtl"] .hero__h, [dir="rtl"] .h2, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3,
:lang(zh-Hant) h1, :lang(zh-Hant) h2, :lang(zh-Hant) h3, :lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(hi) h1, :lang(hi) h2, :lang(hi) h3 { letter-spacing: 0; line-height: 1.25; }
:lang(th) .hero__h, :lang(hi) .hero__h, :lang(ja) .hero__h, :lang(zh-Hans) .hero__h, :lang(zh-Hant) .hero__h, :lang(ko) .hero__h { line-height: 1.2; }

/* consent banner (analytics.js) */
#sml-consent { position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; display: flex; justify-content: center; }
.sml-c__in { background: var(--surface); color: var(--ink); border-radius: var(--r-inner); padding: 20px; max-width: 640px; box-shadow: 0 12px 40px rgba(27, 20, 51, .25); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.sml-c__in p { font-size: 14px; color: var(--sub); flex: 1 1 280px; font-weight: 500; }
.sml-c__btns { display: flex; gap: 8px; margin-inline-start: auto; }
.sml-c__btns button { border: 0; border-radius: 999px; height: 44px; padding: 0 20px; font: 800 15px var(--font); cursor: pointer; background: var(--tint); color: var(--ink); }
.sml-c__btns #sml-accept { background: var(--ink); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}
.langs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: 14px; }
.langs__list a { color: var(--ink); font-weight: 600; }
.langs__list a[aria-current] { color: var(--lavender); font-weight: 800; }