html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 72px; }
h1, h2 { text-wrap: balance; }

/* Sticky header with section menu */
.top { position: sticky; top: 0; z-index: 20; padding: 14px 0; transition: background .3s, box-shadow .3s; }
.top.scrolled { background: rgba(26,11,59,.93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.menu { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.menu a { display: block; padding: 8px 14px; border-radius: var(--mh-radius-pill); font-size: 15px; font-weight: 500; color: var(--mh-text-muted); text-decoration: none; transition: color .2s, background .2s; }
.menu a:hover { color: var(--mh-text); }
.menu a[aria-current="true"] { color: var(--mh-text); background: rgba(255,255,255,.09); }
.menu-btn { display: none; }
@media (max-width: 759px) {
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 500; color: var(--mh-text);
    background: rgba(255,255,255,.08); border: 0; border-radius: var(--mh-radius-pill); padding: 9px 16px; cursor: pointer; }
  .menu-btn svg { width: 18px; height: 18px; }
  .menu { position: absolute; top: 100%; left: 16px; right: 16px; flex-direction: column; padding: 8px; border-radius: var(--mh-radius-md);
    background: rgba(34,16,74,.97); box-shadow: 0 20px 50px -10px rgba(0,0,0,.6); }
  .menu a { padding: 13px 16px; font-size: 17px; border-radius: 12px; }
  .js .menu:not(.open) { display: none; }
}

/* Phone frame */
.phone { position: relative; width: min(280px, 68vw); padding: 9px; border-radius: 46px;
  background: #12072e; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 40px 90px -20px rgba(0,0,0,.7), 0 0 80px -10px var(--mh-glow); }
.phone .screen { position: relative; overflow: hidden; border-radius: 37px; }
.phone img { display: block; width: 100%; height: auto; }
.phone.cut { padding-bottom: 0; border-radius: 46px 46px 0 0;
  -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); }
.phone.cut .screen { border-radius: 37px 37px 0 0; }

/* Fans: phones stacked in one grid cell, angled and overlapping. They swing out when revealed. */
.fan { display: grid; place-items: center; }
.fan > * { grid-area: 1 / 1; transition: transform 1.1s cubic-bezier(.2,.75,.2,1); }
.fan .back { width: min(240px, 58vw); filter: brightness(.85); }
.fan .front { z-index: 1; }
.hero-fan .front { transform: translateX(-16%) rotate(-6deg); }
.hero-fan .back { transform: translate(38%, 7%) rotate(9deg); }
.privacy-fan .front { transform: translateX(12%) rotate(5deg); }
.privacy-fan .back { transform: translate(-40%, 6%) rotate(-8deg); }
.tilt-r { transform: rotate(5deg); }
.tilt-l { transform: rotate(-5deg); }
.js .fan.reveal:not(.in) > * { transform: none; }

/* Hero */
.hero { display: grid; gap: 56px; align-items: center; padding-block: 24px 80px; }
.hero h1 { margin: 0; font-size: clamp(44px, 11vw, 84px); line-height: 1; font-weight: 600; letter-spacing: -.025em; }
.hero .lede { margin: 20px 0 0; max-width: 30ch; font-size: clamp(18px, 2.4vw, 21px); line-height: 1.5; color: var(--mh-text-muted); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 36px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: var(--mh-radius-pill);
  background: var(--mh-gradient-sunset); color: #fff; font-weight: 700; font-size: 19px; text-decoration: none;
  box-shadow: 0 10px 30px -8px rgba(196,42,85,.6); transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(196,42,85,.75); }
.sun { background: var(--mh-gradient-sunset-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta .where { font-size: 15px; color: var(--mh-text-faint); }

/* Beta waitlist form */
.join { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; max-width: 460px; }
.join input[type=email] { direction: ltr; flex: 1 1 220px; min-width: 0; font: inherit; font-size: 17px; color: var(--mh-text); padding: 14px 20px;
  border-radius: var(--mh-radius-pill); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.join input[type=email]::placeholder { color: var(--mh-text-faint); opacity: .8; }
.join input[type=email]:focus { outline: none; border-color: var(--mh-heat-ink); box-shadow: 0 0 0 3px rgba(255,143,163,.25); }
.join .btn { border: 0; cursor: pointer; font-family: inherit; flex: 0 0 auto; }
.join.busy .btn { opacity: .7; cursor: progress; }
/* Off-screen with clip, never a big left offset: on the RTL page that adds 10,000px of scrollable width and phones open on blank space. */
.join .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.join-msg { min-height: 1.5em; margin: 12px 0 0; font-size: 16px; color: var(--mh-heat-ink); }
.join-msg.ok { color: var(--mh-text); font-size: 19px; font-weight: 600; }
.hero .where { margin: 6px 0 0; font-size: 14px; color: var(--mh-text-faint); max-width: 46ch; }
.hero .where a { color: var(--mh-text-muted); }
@media (max-width: 479px) { .join .btn { flex: 1 1 100%; justify-content: center; } }
.stage { position: relative; isolation: isolate; padding-top: clamp(60px, 16vw, 100px); }
.ar-word { position: absolute; z-index: -1; left: 50%; top: 0; transform: translateX(-50%);
  font-family: var(--mh-font-arabic); font-weight: 800; font-size: clamp(120px, 38vw, 220px); line-height: 1; white-space: nowrap;
  background: var(--mh-gradient-sunset-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .35; user-select: none; animation: breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: translateX(-50%) scale(.97); } to { transform: translate(-50%, -8px) scale(1.03); } }
/* Match toast: pops in once the phones have fanned out, then floats */
.toast { position: absolute; z-index: 3; inset-inline-start: 0; bottom: 14%; display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 10px; border-radius: 22px; background: rgba(255,255,255,.96); color: var(--mh-ink);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.6); font-size: 14px; line-height: 1.3; }
.toast img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.toast .heart { position: absolute; inset-inline-start: 38px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mh-gradient-sunset); color: #fff; box-shadow: 0 0 0 2px #fff; }
.toast .heart svg { width: 12px; height: 12px; }
.toast strong { display: block; font-weight: 600; font-size: 15px; }
.toast small { font-size: 13px; color: var(--mh-ink-muted); }
.js .toast { opacity: 0; transform: translateY(14px) scale(.92); }
.js .toast.show { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.3,1.5,.5,1); animation: bob 5s ease-in-out .8s infinite alternate; }
@keyframes bob { to { transform: translateY(-8px); } }
@media (max-width: 879px) { .toast { left: 0; right: 0; margin: 0 auto; width: max-content; bottom: 6%; } }

@media (min-width: 880px) { .hero { grid-template-columns: 1fr 1fr; padding-block: 40px 120px; } }

/* Full-bleed photo band */
.band { position: relative; height: clamp(380px, 72vh, 620px); overflow: hidden; display: flex; align-items: flex-end; }
.band .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 62%; transform: scale(1.12); transition: transform 6s cubic-bezier(.2,.6,.2,1); }
.band.in .bg { transform: scale(1); }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--mh-bg) 0%, rgba(26,11,59,0) 22%, rgba(26,11,59,0) 45%, rgba(26,11,59,.92) 100%); }
.band .wrap { position: relative; z-index: 1; padding-bottom: clamp(32px, 7vw, 72px); }
.band h2 { margin: 0; max-width: 14ch; font-size: clamp(36px, 7.5vw, 68px); line-height: 1.02; font-weight: 600; letter-spacing: -.025em; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.band-print { position: absolute; z-index: 2; inset-inline-end: max(16px, calc((100% - 1120px) / 2 + 32px)); bottom: clamp(40px, 8vw, 80px); width: clamp(130px, 22vw, 260px); transform: rotate(6deg); }
@media (max-width: 719px) { .band-print { top: 72px; bottom: auto; width: 34vw; } }
.band .place { display: block; margin-top: 14px; font-size: 14px; color: var(--mh-text-muted); }

/* Daylight sections: sand, plum ink, heat-pink as the only accent */
.day { background: var(--mh-sand); color: var(--mh-ink); position: relative; isolation: isolate; }
.day::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mh-grain); opacity: .16; mix-blend-mode: multiply; pointer-events: none; }
.day .moment p { color: var(--mh-ink-muted); }
.day .phone { box-shadow: 0 0 0 1px rgba(42,18,64,.12), 0 34px 70px -24px rgba(42,18,64,.55); }
.day a:focus-visible, .day button:focus-visible { outline-color: var(--mh-ink); }

/* Photos as prints: white border, slight angle */
.print { display: block; height: auto; border: 6px solid #fff; border-radius: 14px; box-shadow: 0 24px 50px -20px rgba(42,18,64,.55); }

/* Who it's for */
.who { display: grid; gap: 48px; align-items: center; padding-block: 80px; }
.who .ar { display: block; text-align: start; font-family: var(--mh-font-arabic); font-weight: 800; font-size: 44px; line-height: 1; color: var(--mh-heat-on-sand); margin-bottom: 8px; }
.who h2 { margin: 0 0 28px; font-size: clamp(30px, 6vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; }
.who ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.who li { color: var(--mh-ink-muted); font-size: 17px; max-width: 40ch; }
.who strong { display: block; color: var(--mh-ink); font-weight: 600; font-size: 19px; margin-bottom: 2px; }
.collage { position: relative; margin: 0; height: clamp(330px, 92vw, 520px); }
.collage .a { position: absolute; width: 44%; left: 2%; top: 4%; transform: rotate(-7deg); }
.collage .b { position: absolute; width: 38%; right: 4%; top: 0; transform: rotate(6deg); }
.collage .c { position: absolute; z-index: 1; width: 56%; left: 24%; bottom: 0; transform: rotate(-2deg); }
@media (min-width: 880px) { .who { grid-template-columns: 1.05fr .95fr; gap: 64px; padding-block: 112px; } }

/* Feature moments */
.moment { display: grid; gap: 48px; align-items: center; padding-block: 80px; }
.moment h2 { margin: 0; font-size: clamp(30px, 6vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; max-width: 18ch; }
.moment p { margin: 18px 0 0; max-width: 40ch; color: var(--mh-text-muted); font-size: 18px; }
.moment .visual { display: grid; place-items: center; }
@media (min-width: 880px) {
  .moment { grid-template-columns: 1fr 1fr; gap: 64px; padding-block: 112px; }
  .moment.flip .copy { order: 2; }
}

/* Out: phone with an event print overlapping its corner */
.stack { position: relative; isolation: isolate; display: grid; place-items: center; }
.stack .print { position: absolute; z-index: 1; width: min(230px, 48vw); left: 50%; top: 78%; margin-left: max(-290px, -50vw + 12px); transform: rotate(-8deg); }

.stack .print.portrait { width: min(170px, 36vw); top: 50%; }

/* Modes switcher: the same pills as the app */
.modes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.modes button { font: inherit; font-size: 16px; font-weight: 500; padding: 9px 18px; border-radius: var(--mh-radius-pill); cursor: pointer;
  color: var(--mh-text-muted); background: var(--mh-surface-2); border: 1px solid transparent; transition: background .25s, color .25s; }
.modes button[aria-pressed="true"] { background: var(--mh-heat); color: #fff; }
.modes button:hover { color: var(--mh-text); }
.mode-line { min-height: 3.2em; margin-top: 18px !important; color: var(--mh-text) !important; font-size: 19px !important; }
.mode-line.swap { animation: swap .35s ease; }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } }

/* Blur-until-match toggle over the People screen */
.switch { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 10px 18px 10px 10px; border-radius: var(--mh-radius-pill);
  background: var(--mh-surface-2); border: 0; color: var(--mh-text); font: inherit; font-size: 16px; cursor: pointer; }
.switch .track { width: 46px; height: 28px; border-radius: 14px; background: var(--mh-line); position: relative; transition: background .25s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .25s; }
.switch[aria-checked="true"] .track { background: var(--mh-heat); }
.switch[aria-checked="true"] .track::after { transform: translateX(18px); }
.veil { position: absolute; border-radius: 13px 13px 0 0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  background: rgba(26,11,59,.25); transition: opacity .45s; }
.blur-off .veil { opacity: 0; }
.v1 { left: 4%; width: 44.5%; top: 18%; height: 22%; }
.v2 { left: 51.6%; width: 44.5%; top: 18%; height: 22%; }
.v3 { left: 4%; width: 44.5%; top: 47.9%; height: 22%; }
.v4 { left: 51.6%; width: 44.5%; top: 47.9%; height: 22%; }
.v5 { left: 4%; width: 44.5%; top: 77.7%; height: 9.6%; }
.v6 { left: 51.6%; width: 44.5%; top: 77.7%; height: 9.6%; }

/* Trust strip */
.trust { padding-block: 56px 24px; }
.trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
.trust li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--mh-text-muted); }
.trust svg { flex: none; width: 22px; height: 22px; color: var(--mh-text-faint); }
.trust .lux svg { color: var(--mh-lux); }
@media (min-width: 880px) { .trust ul { grid-template-columns: repeat(4, auto); justify-content: space-between; } }

/* Scroll reveal: only hides things once JS is known to be running */
.js .reveal:not(.fan):not(.band) { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in:not(.fan):not(.band) { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ar-word, .mode-line.swap, .js .toast.show { animation: none; }
  .js .toast { transition: none; }
  .js .reveal:not(.fan):not(.band) { opacity: 1; transform: none; transition: none; }
  .fan > *, .btn, .veil, .switch .track, .switch .track::after, .top { transition: none; }
  .band .bg { transform: none; transition: none; }
}

/* Language switch */
.top .wrap { gap: 8px; }
.top nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.lang { padding: 8px 14px; border-radius: var(--mh-radius-pill); font-size: 15px; font-weight: 600; color: var(--mh-text); text-decoration: none; background: rgba(255,255,255,.08); }
.lang:hover { background: rgba(255,255,255,.14); }
.lang:lang(ar) { font-family: var(--mh-font-arabic); font-size: 16px; }
.lang:lang(en) { font-family: var(--mh-font-body); }

/* Arabic page */
:root:lang(ar) body { font-family: var(--mh-font-arabic); font-size: 18px; }
:root:lang(ar) h1, :root:lang(ar) h2 { font-family: var(--mh-font-arabic); font-weight: 800; letter-spacing: 0; line-height: 1.25; }
:root:lang(ar) .hero h1 { line-height: 1.15; }
:root:lang(ar) .lede, :root:lang(ar) .moment p, :root:lang(ar) .who li { line-height: 1.8; }
:root:lang(ar) .btn, :root:lang(ar) .modes button, :root:lang(ar) .switch, :root:lang(ar) .menu a, :root:lang(ar) .menu-btn { font-family: var(--mh-font-arabic); }
.en-word { font-family: var(--mh-font-display) !important; font-weight: 700 !important; letter-spacing: -.03em; font-size: clamp(90px, 26vw, 170px) !important; opacity: .28 !important; }

/* Out: the desert print sits on the right of the short Out screen, clear of the event title */
#out .stack { padding-bottom: 120px; }
#out .stack .print { left: auto; margin-left: 0; right: max(4px, calc(50% - 230px)); top: auto; bottom: 0; transform: rotate(6deg); }

:root:lang(ar) .join input[type=email] { text-align: right; }
:root:lang(ar) .join input[type=email]::placeholder { text-align: right; }