@font-face{font-family:'Heebo';src:url('/assets/heebo.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Fredoka';src:url('/assets/fredoka.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:'Frank Ruhl Libre';src:url('/assets/frank-ruhl-libre.ttf') format('truetype');font-weight:300 900;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/plex-mono.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/plex-mono-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/plex-mono-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Lunara Wordmark';src:url('/assets/wordmark.ttf') format('truetype');font-weight:400;font-display:block}

:root{
  --red:#A61C1C;--red-dark:#8E1818;--rose:#EB8AAE;--lilac:#B8A0C9;--sage:#B8CBA0;
  --cream:#FBF1E8;--paper:#FFFDFA;--line:#F1E4D8;--ink:#4A3F52;--ink-soft:#6F6478;
  --night:#2A2030;--night-raised:#392D41;--on-night:#D9CCDD;
  --lilac-wash:#e7d9df;--sage-wash:#e4e4d0;--rose-wash:#f8e1df;
  --rose-mid:#f4c6d0;--lilac-mid:#d6c4d7;--sage-mid:#d1d9bb;--plum:#4A2747;--rose-ink:#C2557F;
  --lilac-ink:#6B5488;--sage-ink:#5F7440;--hers:#e1e9d7;
  /* Headings: Fredoka, rounded and warm (Raya chose it, 22.10, over the serif that read "too much
     like Claude"). The journal on the phone keeps the journal page's own serif, so it still looks
     like the page she gets. */
  --display:'Fredoka','Heebo',sans-serif;--journal:'Frank Ruhl Libre','Heebo',serif;
  --sans:'Heebo',Arial,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--cream)}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.2}
img{max-width:100%}
a{color:var(--red)}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:12px;top:-80px;z-index:50;background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:12px}
.skip:focus{top:12px}
.wrap{width:min(100% - 40px,1080px);margin-inline:auto}
.narrow{width:min(100% - 40px,720px);margin-inline:auto}
.ltr{direction:ltr;unicode-bidi:isolate}

/* ── header ─────────────────────────────────────────────────────────────── */
.top{background:var(--night);color:var(--cream)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
/* The name as a logo, not a word (Raya, #835): a geometric face in tracked capitals. The file holds
   only the six letters, so the fallback face is what any other character would get. */
.wordmark{font-family:'Lunara Wordmark',var(--display);font-weight:400;font-size:1.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);text-decoration:none;line-height:1;padding-top:.12em}
.nav{display:none;align-items:center;gap:28px}
.nav a:not(.cta){color:var(--on-night);text-decoration:none;padding:6px 0}
.nav a:not(.cta):hover{color:var(--cream)}
.nav a[aria-current=page]{color:var(--cream);box-shadow:0 2px 0 var(--rose)}
.nav .cta{padding:10px 18px;font-size:.97rem}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--cream)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
/* Open, the three lines become an X: the way to close it is where she tapped to open it. */
.menu .x,.menu[open] .bars{display:none}
.menu[open] .x{display:inline}
.menu-panel{position:absolute;inset-inline-end:0;top:52px;z-index:40;min-width:230px;background:var(--night-raised);border-radius:18px;padding:8px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.menu-panel a{display:block;padding:12px 14px;border-radius:12px;color:var(--cream);text-decoration:none}
.menu-panel a[aria-current=page]{background:rgba(251,241,232,.08)}
@media(min-width:860px){.nav{display:flex}.menu{display:none}}

/* ── the one button ─────────────────────────────────────────────────────── */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--red);color:var(--cream);font:600 1.0625rem/1.2 var(--sans);padding:15px 28px;border-radius:999px;text-decoration:none;box-shadow:0 0 0 1px rgba(235,138,174,.4),0 10px 26px -12px rgba(166,28,28,.75);transition:background .15s,transform .15s}
.cta:hover{background:var(--red-dark)}
.cta:active{transform:translateY(1px)}
.cta svg{width:22px;height:22px;fill:currentColor;flex:none}
.trust{margin-top:14px;font-size:.95rem;color:var(--ink-soft)}
.early{margin-top:12px;font-size:.9rem;color:var(--ink-soft);max-width:34em}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{background:var(--night);color:var(--cream);padding:20px 0 56px;overflow:hidden}
.hero-grid{display:grid;gap:44px;align-items:center}
.hero-text{text-align:center}
.emblem{display:block;width:136px;height:136px;border-radius:50%;margin:0 auto 22px;box-shadow:0 0 0 1px rgba(235,138,174,.35),0 0 0 12px rgba(251,241,232,.04)}
.hero h1{font-size:clamp(2.45rem,8.4vw,4rem);line-height:1.1}
.hero h1 mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:var(--rose);text-decoration-thickness:.085em;text-underline-offset:.17em;white-space:nowrap}
.hero .sub{margin-top:16px;font-size:clamp(1.15rem,3.4vw,1.4rem);color:var(--on-night)}
.hero .cta{margin-top:28px}
.hero .trust,.hero .early{color:var(--on-night)}
.hero .early{margin-inline:auto;opacity:.86}
.chat-note{margin-top:12px;text-align:center;font-size:.85rem;color:var(--ink-soft)}
/* On a phone the hero is one column, and its chat came before she knew who Lunara is (Raya, 20.10:
   first get to know her, then the screenshot). There it is left out: the samples further down show
   the real chats once "זה מוכר לך?" has introduced her. */
@media(max-width:899px){.hero-chat{display:none}}
.hero .chat-note{color:var(--on-night);opacity:.8}
@media(min-width:900px){
  .hero{padding:44px 0 84px}
  .hero-grid{grid-template-columns:1.08fr .92fr;gap:64px}
  /* Fredoka runs wider than the old serif: sized to its column so the headline stays two lines. */
  .hero h1{font-size:min(3.25rem,calc(5.1vw - 6px))}
  .hero-text{text-align:start}
  .emblem{width:172px;height:172px;margin-inline:0}
  .hero .early{margin-inline:0}
}

/* ── sections ───────────────────────────────────────────────────────────── */
.sec{padding:60px 0}
.sec.lilac{background:var(--lilac-wash)}
.sec.sage{background:var(--sage-wash)}
.sec h2{font-size:clamp(1.85rem,5.4vw,2.55rem);color:var(--red)}
.sec .lead{margin-top:10px;font-size:1.15rem;color:var(--ink-soft);max-width:36em}
.center{text-align:center}
.center .lead{margin-inline:auto}
@media(min-width:900px){.sec{padding:88px 0}}

.more{position:relative;display:inline-block;margin-top:28px;font-weight:500;color:var(--red);text-decoration:none;border-bottom:2px solid var(--rose);padding-bottom:2px}
/* A finger-sized target (44px) around a small link, without moving its underline (mobile review, 22.10). */
.more::before,.share::before{content:'';position:absolute;inset:-10px -8px}
.more::after{content:' ←'}
[dir=ltr] .more::after{content:' →'}
.more:hover{border-bottom-color:var(--red)}

/* "זה מוכר לך?": each of Raya's moments, her words first and then an embroidered picture of it
   (Itai and Raya, 20.10). Her words stay plain text, larger than the body — not chat bubbles (#807). */
.moments{display:grid;gap:40px;margin-top:32px}
.scene{display:grid;gap:20px;align-content:start}
.scene .words p{font-size:clamp(1.1rem,2.9vw,1.25rem);line-height:1.6}
.scene .words p+p{margin-top:14px;font-weight:600;color:var(--red)}
@media(min-width:860px){.moments{grid-template-columns:1fr 1fr;gap:48px}.scene{grid-template-rows:1fr auto;align-content:stretch}}
.answer{display:grid;gap:28px;align-items:center;margin-top:72px}
.answer h3{font-size:clamp(1.7rem,4.8vw,2.4rem);margin-bottom:10px}
/* One line on a phone too (Raya, #850): the line is ~14.3em wide, so it is sized to the screen. */
@media(max-width:859px){.answer h3{white-space:nowrap;font-size:min(1.7rem,calc((100vw - 40px) / 14.8))}}
.answer p{font-size:1.2rem;color:var(--ink-soft)}
.answer .stitch{max-width:440px;margin-inline:auto}
@media(min-width:860px){.answer{grid-template-columns:1.1fr .9fr;gap:56px}.answer .stitch{max-width:none}}
/* The embroidered pictures (images/art/): a piece of the cloth, cut with soft corners. */
.stitch{display:block;width:100%;height:auto;border-radius:28px;box-shadow:0 1px 0 rgba(74,63,82,.06),0 22px 44px -30px rgba(74,63,82,.55)}
.cards{display:grid;gap:16px;margin-top:40px}
/* One sentence each, no title: the words that read like one are bold (Raya, #852–#856). */
.card{border-radius:24px;padding:18px 20px;display:grid;grid-template-columns:46px 1fr;column-gap:16px;align-items:center}
.card .ico{margin:0}
.card p{line-height:1.55;font-size:1.06rem}
.card strong{font-weight:700}
.card.winter{background:var(--rose-mid)}
.card.winter .ico svg{stroke:var(--red)}
.card.spring{background:var(--sage-mid)}
.card.spring .ico svg{stroke:var(--sage-ink)}
.card.autumn{background:var(--lilac-mid)}
.ico{width:46px;height:46px;border-radius:15px;background:var(--paper);display:grid;place-items:center;margin-bottom:14px}
.ico svg{width:25px;height:25px;stroke:var(--lilac-ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}.card{display:block;padding:26px}.card .ico{margin-bottom:16px}}


.samples{display:grid;gap:36px;margin-top:36px;align-items:start}
.sample h3{font:600 1.05rem var(--sans);color:var(--ink);text-align:center;margin-bottom:12px}
@media(min-width:960px){.samples{grid-template-columns:repeat(3,1fr);gap:22px}}
.sec .note{margin-top:28px;font-size:.92rem;color:var(--ink-soft);text-align:center}
/* Section grounds beyond the washes (Itai, 20.10: "too stale and weak in colors"). */
.sec.dusk{background:linear-gradient(170deg,var(--rose-mid) 0%,var(--lilac-mid) 100%)}
.sec.dusk .lead,.sec.dusk .note{color:var(--ink)}
.sec.night{background:var(--night);color:var(--cream)}
.sec.night h2{color:var(--cream)}
.sec.night .lead,.sec.night .note{color:var(--on-night)}
.sec.garden{background:var(--sage-mid)}

/* The four seasons, in the logo's medallions — so "את בסוף הסתיו" reads on a first visit. */
.seasons{margin:30px auto 0;text-align:center}
.seasons p{font-size:1.05rem}
.seasons ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:560px;margin:16px auto 0}
.seasons li{display:grid;justify-items:center;gap:2px}
.seasons img{width:clamp(64px,17vw,92px);height:auto;border-radius:50%;margin-bottom:8px;box-shadow:0 12px 22px -14px rgba(74,63,82,.7)}
.seasons b{font:600 1.2rem/1.2 var(--display)}
.seasons span{font-size:.88rem;color:var(--ink-soft)}

/* A picture the bot sends (the ring), and the link it appends after its words. */
.bub.pic{padding:4px 4px 5px}
.bub.pic svg{display:block;width:100%;height:auto;border-radius:11px}
.bub.pic time{padding-inline-end:6px}
.wa-link{color:var(--lilac-ink);text-decoration:underline;text-underline-offset:2px;word-break:break-all}

/* "היומן האישי שלך": the real page, on a phone, on the dark. */
.journal{display:grid;gap:44px;align-items:center}
.jpoints{display:grid;gap:18px;margin-top:28px}
.jpoints li{display:grid;grid-template-columns:18px 1fr;column-gap:14px;align-items:baseline}
.jpoints li::before{content:'';width:14px;height:14px;border-radius:50%;background:var(--rose);grid-row:span 2;transform:translateY(2px)}
.jpoints li.winter::before{background:var(--red);box-shadow:0 0 0 2px var(--cream)}
.jpoints li.autumn::before{background:var(--lilac)}
.jpoints b{font:600 1.25rem/1.3 var(--display);color:var(--cream)}
.jpoints span{color:var(--on-night)}
.journal .note{text-align:start;margin-top:30px}
.phone{width:min(100%,360px);margin:0 auto;padding:11px;border-radius:44px;background:#17111A;box-shadow:0 0 0 1px rgba(235,138,174,.25),0 40px 80px -40px rgba(0,0,0,.9)}
.phone-page{background:var(--cream);color:var(--ink);border-radius:34px;padding:22px 14px 16px;text-align:center;overflow:hidden}
.jp-brand{font:400 .8rem var(--journal);color:var(--ink-soft);letter-spacing:.04em}
.jp-title{font:600 1.35rem/1.2 var(--journal);color:var(--red);margin-bottom:6px}
.phone svg{display:block;width:100%;height:auto}
.jp-legend{margin-top:-2px}
.jp-h{font:600 1.02rem var(--journal);text-align:start;margin:12px 4px 6px}
.carousel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -14px;padding:0 14px 2px}
.carousel::-webkit-scrollbar{display:none}
.carousel .slide{flex:0 0 88%;scroll-snap-align:center}
@media(min-width:900px){.journal{grid-template-columns:1fr 380px;gap:72px}}

/* "מה אפשר לשאול אותה": tiles of different sizes and seasons, a picture each. Not cards that read
   as more chat bubbles (Raya, #829), and not one list either (Itai, 20.10). */
.bento{display:grid;gap:14px;margin-top:32px}
.bento li{display:flex;flex-direction:column;gap:16px;border-radius:26px;padding:22px;min-height:190px}
.bento .pic{display:flex;align-items:center;min-height:96px}
.bento b{display:block;font:600 1.22rem/1.3 var(--display)}
.bento p{margin-top:4px;color:var(--ink-soft);line-height:1.5}
.bento .ico{width:84px;height:84px;border-radius:26px;margin:0}
.bento .ico svg{width:48px;height:48px;stroke-width:1.3}
.t-ring{background:var(--night);color:var(--cream)}
.t-ring p{color:var(--on-night)}
.t-ring .pic{min-height:170px}
.ring{width:170px;height:170px}
.ring circle{fill:none;stroke-width:13}
.ring .winter{stroke:var(--red)}.ring .spring{stroke:var(--sage)}.ring .summer{stroke:var(--rose)}.ring .autumn{stroke:var(--lilac)}
.ring .now{fill:var(--cream);stroke:var(--night);stroke-width:3}
.ring text{fill:var(--cream);font:700 28px var(--mono);text-anchor:middle}
.ring text.lbl{font:400 12px var(--sans);fill:var(--on-night)}
.t-date{background:var(--rose-mid)}
.leaf{width:100px;height:100px}
.leaf rect{fill:var(--paper)}
.leaf rect,.leaf path{stroke:var(--ink);stroke-width:2.4;fill-opacity:1;stroke-linecap:round}
.leaf path{fill:none}
.leaf .mark{fill:none;stroke:var(--red);stroke-width:3}
.leaf text{fill:var(--ink);font:600 21px var(--mono);text-anchor:middle}
.t-voice{background:var(--sage-mid)}
.voice{width:170px;height:80px}
.voice .pill{fill:var(--paper)}
.voice .play,.voice .wave rect{fill:var(--sage-ink)}
.t-heart{background:var(--lilac-mid)}
.t-heart .ico svg{stroke:var(--lilac-ink)}
.t-sprout{background:var(--paper);border:1px solid var(--line)}
.t-sprout .ico{background:var(--sage-wash)}
.t-sprout .ico svg{stroke:var(--sage-ink)}
.t-strip{background:var(--rose-wash)}
.strip28{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px;width:100%;max-width:460px}
.strip28 i{aspect-ratio:1;border-radius:6px}
.strip28 .winter{background:var(--red)}.strip28 .spring{background:var(--sage)}.strip28 .summer{background:var(--rose)}.strip28 .autumn{background:var(--lilac)}
.strip28 .today{box-shadow:0 0 0 2px var(--rose-wash),0 0 0 4px var(--ink)}
@media(min-width:620px){.bento{grid-template-columns:1fr 1fr}.t-ring,.t-strip{grid-column:span 2}}
/* On a phone: compact colored rows, a small picture beside the words (Raya, #860). */
@media(max-width:619px){
  .bento{gap:10px}
  .bento li{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:14px;min-height:0;padding:14px 16px;border-radius:20px}
  .bento .pic,.t-ring .pic{min-height:0;justify-content:center}
  .ring,.leaf{width:64px;height:64px}
  .ring text{transform:translateY(9px)}
  .ring text.lbl{display:none}
  .voice{width:64px;height:30px}
  .bento .ico{width:54px;height:54px;border-radius:17px}
  .bento .ico svg{width:30px;height:30px;stroke-width:1.5}
  .strip28{grid-template-columns:repeat(7,1fr);gap:2px;width:58px}
  .strip28 i{border-radius:2px}
  .strip28 .today{box-shadow:0 0 0 1px var(--rose-wash),0 0 0 2px var(--ink)}
  .bento b{font-size:1.08rem}
  .bento p{font-size:.95rem;margin-top:2px}
}
.bento .t-strip .pic{width:100%}
@media(min-width:980px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento .t-ring{grid-column:span 2;grid-row:span 2;justify-content:space-between;padding:30px}
  .t-ring .pic{flex:1;justify-content:center}
  .ring{width:230px;height:230px}
  .t-ring b{font-size:1.6rem}
  .bento .t-strip{grid-column:span 4;flex-direction:row;align-items:center;gap:36px;min-height:0;padding:26px 30px}
  .bento .t-strip .pic{flex:0 0 46%;min-height:0}
}

/* A picture beside its words: privacy, Lunaro. */
.split{display:grid;gap:36px;align-items:center}
.split > .stitch{max-width:380px;margin-inline:auto}
@media(min-width:880px){.split{grid-template-columns:.85fr 1.15fr;gap:64px}.split > .stitch{max-width:none}}
.points{display:grid;gap:18px;margin-top:28px}
.point{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;font-size:1.15rem}
.point .ico{width:52px;height:52px;margin:0;background:var(--paper);border-radius:50%}
.point .ico svg{stroke:var(--sage-ink)}

/* Lunaro: his own band, on his own ground — big, not a pale card (Itai, 20.10). His name stays the
   heading, big (#830); on the plum it is rose, the one color that carries on it. */
.lunaro-band{background:radial-gradient(120% 140% at 100% 0%,var(--plum) 0%,var(--night) 70%);color:var(--cream);overflow:hidden}
.lunaro-band h2.name{color:var(--rose);font-size:clamp(3rem,10vw,5.2rem);line-height:1}
.lunaro-band p.title{margin-top:14px;font:600 clamp(1.35rem,3.8vw,1.8rem)/1.3 var(--display);color:var(--cream);max-width:20em}
.lunaro-band p{margin-top:12px;color:var(--on-night);max-width:32em;font-size:1.1rem}
/* "בקרוב" as a red sticker set on a slant beside his name (Raya, #844) — the small rose tag stays
   in the menu. */
.name-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.lunaro-band p.soon.stamp{margin:0;max-width:none;transform:rotate(-9deg);background:var(--red);color:var(--cream);font:700 clamp(1rem,2.6vw,1.25rem)/1 var(--sans);letter-spacing:.02em;padding:10px 20px;border-radius:12px;box-shadow:0 0 0 2px rgba(235,138,174,.55),0 14px 26px -12px rgba(0,0,0,.7)}
.btn-ghost{display:inline-block;margin-top:28px;padding:13px 26px;border-radius:999px;border:1.5px solid rgba(251,241,232,.55);color:var(--cream);font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.btn-ghost::after{content:' ←'}
.btn-ghost:hover{background:var(--cream);color:var(--plum)}
.duo{position:relative;margin:0 0 56px}
.duo .stitch{box-shadow:0 40px 70px -40px rgba(0,0,0,.9)}
.float-bub{position:absolute;inset-block-end:-44px;inset-inline-start:-6px;max-width:min(330px,88%);background:#fff;color:var(--ink);border-radius:18px;border-start-start-radius:5px;padding:12px 14px 12px;font-size:.92rem;line-height:1.5;box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.float-bub b{display:block;font-size:.8rem;color:var(--rose-ink);margin-bottom:2px}
.lunaro-band .float-bub p{margin:0;max-width:none;font-size:inherit;color:var(--ink)}
.lunaro-band .float-bub p+p{margin-top:.5em}
@media(max-width:879px){.duo{margin-bottom:0}.float-bub{position:relative;inset:auto;margin:-56px 14px 0 auto;margin-inline:14px auto}}
@media(min-width:880px){.lunaro-band .split{grid-template-columns:1fr 1fr}.float-bub{inset-inline-start:-36px}}

/* "coming soon": a small rose tag (the home page's Lunaro band sets it as a red sticker, #844) */
.soon{display:inline-block;font:600 .72rem/1 var(--sans);letter-spacing:.04em;color:var(--ink);background:var(--rose);border-radius:999px;padding:4px 9px;vertical-align:middle}

.quotes{display:grid;gap:16px;margin-top:30px}
.quotes blockquote{margin:0;background:var(--paper);border-radius:22px;padding:24px;font-family:var(--display);font-size:1.2rem;line-height:1.5}
.quotes cite{display:block;margin-top:12px;font:400 .95rem var(--sans);color:var(--ink-soft);font-style:normal}
@media(min-width:760px){.quotes{grid-template-columns:repeat(3,1fr)}}

.faq{display:grid;gap:10px;margin-top:28px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:0 20px}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-weight:600;font-size:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;font:400 1.5rem/1 var(--mono);color:var(--red)}
.faq details[open] summary::after{content:'−'}
.faq .a{padding-bottom:18px}
.faq .a p+p{margin-top:8px}

.closing h2{color:var(--ink);font-size:clamp(1.9rem,3.4vw,2.6rem);max-width:17em;margin-inline:auto}
/* One line, no break, wherever the screen is wide enough to hold it (Raya, #842). */
@media(min-width:900px){.closing h2{max-width:none;white-space:nowrap}}
.closing p{margin-top:12px;font-size:1.15rem;color:var(--ink-soft)}
.closing .cta{margin-top:28px}
.share{position:relative;display:block;width:fit-content;margin:20px auto 0;color:var(--ink-soft);font-size:.98rem}
/* The home page ends where it began: on the dark, with the moon. The footer below is the same
   dark, so a hairline is all that parts them. */
.closing.night{padding-bottom:72px;border-bottom:1px solid var(--night-raised)}
.closing.night h2{color:var(--cream)}
.closing.night p,.closing.night .trust,.closing.night .share{color:var(--on-night)}
.closing .stitch.wide{max-width:720px;margin:0 auto 44px}

/* ── the WhatsApp mock-up ───────────────────────────────────────────────── */
.chat{max-width:372px;margin-inline:auto;border-radius:26px;overflow:hidden;background:#F3E7DC;border:1px solid rgba(74,63,82,.1);box-shadow:0 26px 60px -30px rgba(0,0,0,.6);font-size:.95rem;line-height:1.5;color:var(--ink);text-align:start}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--night-raised);color:var(--cream)}
.chat-head img{width:38px;height:38px;border-radius:50%;flex:none}
.chat-head b{display:block;font-weight:600;font-size:1rem;line-height:1.25}
.chat-head span{display:block;font-size:.78rem;color:var(--on-night)}
.chat-body{display:flex;flex-direction:column;gap:9px;padding:14px 12px 16px}
.chip{align-self:center;background:rgba(74,63,82,.1);color:var(--ink-soft);font-size:.76rem;padding:3px 10px;border-radius:8px}
.msg{position:relative;max-width:88%;display:flex;flex-direction:column;gap:5px}
.msg.in{align-self:flex-start}
.msg.out{align-self:flex-end}
.bub{padding:8px 11px 5px;border-radius:14px;background:#fff;box-shadow:0 1px 1px rgba(74,63,82,.12);overflow-wrap:anywhere}
.msg.in .bub{border-start-start-radius:4px}
.msg.out .bub{background:var(--hers);border-start-end-radius:4px}
.bub p+p{margin-top:.55em}
.bub time{display:block;text-align:end;direction:ltr;font:400 .66rem/1.6 var(--mono);color:var(--ink-soft)}
.qr{display:flex;flex-direction:column;gap:5px}
.qr span{background:#fff;border-radius:12px;padding:8px 10px;text-align:center;font-weight:500;color:var(--lilac-ink);box-shadow:0 1px 1px rgba(74,63,82,.12)}
.chat.anim .chip,.chat.anim .msg{opacity:0;transform:translateY(6px)}
.chat.anim .show{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}
.chat.anim .msg.typing{opacity:1;transform:none}
.chat.anim .msg.typing>*{visibility:hidden}
.chat.anim .msg.typing::before{content:'•••';position:absolute;inset-block-start:0;inset-inline-start:0;display:grid;place-items:center;width:58px;height:32px;border-radius:14px;background:#fff;color:var(--ink-soft);letter-spacing:3px;box-shadow:0 1px 1px rgba(74,63,82,.12);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{color:var(--line)}}

/* ── inner pages ────────────────────────────────────────────────────────── */
.page-head{padding:44px 0 4px}
.page-head h1{font-size:clamp(2.15rem,7vw,3.1rem);color:var(--red)}
.page-head .lead{margin-top:12px;font-size:1.2rem;color:var(--ink-soft)}
.prose{padding:8px 0 64px}
.prose h2{font-size:clamp(1.45rem,4.2vw,1.75rem);margin:44px 0 12px}
.prose p+p{margin-top:10px}
.prose .chat{margin-top:26px}
.dots li{position:relative;padding-inline-start:22px;margin-top:10px}
.dots li::before{content:'';position:absolute;inset-inline-start:0;top:.68em;width:8px;height:8px;border-radius:50%;background:var(--rose)}
.dots.sage li::before{background:var(--sage-ink)}
.tiles{display:grid;gap:14px;margin-top:8px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px}
.tile h2,.tile h3{font-size:1.22rem;margin:0 0 6px}
.tile .more{margin-top:14px}
@media(min-width:760px){.tiles.two{grid-template-columns:1fr 1fr}}
.aside{margin-top:16px;padding:14px 18px;border-radius:16px;background:var(--sage-wash)}
.end{background:var(--lilac-wash);padding:52px 0;text-align:center}
.end .trust{color:var(--ink-soft)}
.solo{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:40px 0;text-align:center}
.solo.dark{background:var(--night);color:var(--cream)}
.solo.dark p{color:var(--on-night)}
.solo.dark .trust{color:var(--on-night)}
.solo.dark a:not(.cta){color:var(--on-night)}
.solo h1{font-size:clamp(2rem,7vw,3rem)}
.solo p{margin:14px auto 0;max-width:32em;font-size:1.12rem}
.solo .cta{margin-top:28px}
.solo .fine{margin-top:26px;font-size:.92rem}

/* ── legal ──────────────────────────────────────────────────────────────── */
.legal-meta{margin-top:10px;font-size:.92rem;color:var(--ink-soft)}
.legal-meta a{margin-inline-start:10px}
.plain{margin-top:26px;background:var(--sage-wash);border-radius:24px;padding:26px 24px}
.plain dt{font-weight:600;margin-top:16px}
.plain dt:first-child{margin-top:0}
.plain .dots li{margin-top:8px}
.plain .dots li:first-child{margin-top:0}
.plain .more{margin-top:24px}
.legal .intro{margin-top:12px;padding:16px 20px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
.legal section{margin-top:26px}
.legal section h2{font:600 1.15rem var(--sans);margin:0 0 6px}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{background:var(--night);color:var(--on-night);padding:48px 0 112px;font-size:.98rem}
.foot-grid{display:grid;gap:30px}
.foot .wordmark{display:inline-block;margin-bottom:8px;color:var(--cream)}
.foot h2{font:600 .85rem var(--sans);letter-spacing:.05em;color:var(--cream);margin-bottom:8px}
.foot a{color:var(--on-night);text-decoration:none}
.foot li a{display:block;padding:10px 0}
.foot a:hover{color:var(--cream)}
.foot .fine{margin-top:34px;padding-top:20px;border-top:1px solid var(--night-raised);font-size:.9rem}
.foot .fine p+p{margin-top:6px}
@media(min-width:760px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
@media(min-width:860px){.foot{padding-bottom:48px}}
.foot.bare{padding-bottom:48px}

/* ── the button that follows her down the page (mobile) ─────────────────── */
.sticky{position:fixed;inset-inline:0;bottom:0;z-index:30;display:flex;justify-content:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(251,241,232,.94);border-top:1px solid var(--line);transition:transform .25s ease,visibility .25s}
.sticky .cta{width:100%;max-width:440px}
.sticky.off,.sticky.away{transform:translateY(110%);visibility:hidden}
@media(min-width:860px){.sticky{display:none}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}