/* Landing page. Wise's language (heavy uppercase display, pill controls, a calculator in the hero,
   big rounded tiles) spoken in Rayya's colours: the mint bead and the forest of the app icon. */

/* Self-hosted (SIL Open Font License) so visitors make no third-party requests. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Amiri"; src: url("/assets/fonts/Amiri-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --deep: #132A13;
  --night: #0D1D0D;
  --forest: #395D38;
  --leaf: #5C7A57;
  --sage: #B3C09B;
  --mist: #E5EFD9;
  --mint: #ACFFAF;
  --ink: #3A4839;
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --arabic: "Amiri", "Geeza Pro", serif;
  --gutter: clamp(20px, 4.5vw, 64px);
  --inset: clamp(8px, 1.4vw, 18px);
  --panel-radius: clamp(28px, 4vw, 48px);
  --max: 1240px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  font: 17px/1.55 var(--body);
  color: var(--deep);
  background: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, canvas, video { display: block; }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--deep); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 20; }
.skip:focus { left: 8px; }

/* The display face: Bricolage at its heaviest optical size, in capitals, set tight. */
.display {
  font-family: var(--display);
  font-weight: 800;
  font-optical-sizing: auto;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--mint); margin-bottom: 18px; }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 20px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease-out), background-color .2s; }
.pill:hover { transform: translateY(-2px); }
.pill-deep { background: var(--deep); color: var(--mint); }
.pill-mint { background: var(--mint); color: var(--deep); }

.store { display: inline-flex; align-items: center; gap: 10px; background: #000; color: #fff; text-decoration: none; border-radius: 16px; padding: 11px 24px 11px 18px; font: 600 22px/1.05 var(--body); letter-spacing: -.01em; transition: transform .2s var(--ease-out); }
.store:hover { transform: translateY(-2px); }
.store svg { width: 28px; height: 28px; fill: currentColor; }
.store small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0; opacity: .85; }

/* Nav: sits on the mint hero, turns white once the hero has scrolled away. */
.nav { position: sticky; top: 0; z-index: 10; background: var(--mist); transition: background-color .3s, box-shadow .3s; }
.nav.is-solid { background: rgba(255, 255, 255, .92); box-shadow: 0 1px 0 rgba(19, 42, 19, .08); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.nav-inner { max-width: var(--max); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 23px var(--display); letter-spacing: -.03em; }
.brand img { border-radius: 10px; }
.nav nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 600; }
.nav nav a { text-decoration: none; padding: 6px 0; }
.nav nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Hero */
.hero { background: var(--mist); padding: clamp(20px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); }
.hero-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-title { font-size: clamp(48px, 7.4vw, 104px); }
.hero-title .line { display: block; overflow: hidden; white-space: nowrap; padding: .02em 0 .05em; margin-bottom: -.05em; }
.hero-title .line > span { display: inline-block; animation: rise 1s var(--ease-out) both; }
.hero-title .line:nth-child(2) > span { animation-delay: .08s; }
.hero-title .line:nth-child(3) > span { animation-delay: .16s; }
.lede { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; max-width: 40ch; margin: 28px 0 32px; color: var(--deep); text-wrap: pretty; animation: fade-up .9s var(--ease-out) .3s both; }
.hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; animation: fade-up .9s var(--ease-out) .4s both; }
.hero-note { font-size: 15px; font-weight: 500; }

@keyframes rise { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes card-in { from { opacity: 0; transform: translateY(40px) scale(.96); } }

/* Try-it card */
.try {
  background: var(--deep); color: var(--mist);
  border-radius: 32px; padding: clamp(20px, 2.2vw, 28px);
  box-shadow: 0 40px 80px -40px rgba(13, 29, 13, .65), 0 2px 0 rgba(255, 255, 255, .06) inset;
  animation: card-in 1s var(--ease-out) .25s both;
  width: 100%; max-width: 470px; justify-self: end;
}
.try-head { margin-bottom: 18px; }
.try-title { font: 800 22px/1.1 var(--display); letter-spacing: -.02em; color: #fff; }
.try-sub { font-size: 14px; color: var(--sage); margin-top: 4px; }

.field { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.field legend { font-size: 13px; font-weight: 600; color: var(--sage); padding: 0; margin-bottom: 8px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip input, .segments input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(229, 239, 217, .2); transition: background-color .2s, color .2s, box-shadow .2s; }
.chip svg { width: 22px; height: 22px; border-radius: 6px; }
.chip input:checked + span { background: var(--mint); color: var(--deep); box-shadow: none; }
.chip input:focus-visible + span, .segments input:focus-visible + span { outline: 3px solid var(--mint); outline-offset: 2px; }

.segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: rgba(229, 239, 217, .08); }
.segments span { display: block; text-align: center; padding: 7px 0; border-radius: 999px; font: 700 16px var(--display); cursor: pointer; transition: background-color .2s, color .2s; }
.segments input:checked + span { background: var(--mint); color: var(--deep); }

.stage { position: relative; margin: 8px -6px 0; }
.tap {
  display: flex; flex-direction: column; align-items: center; width: 100%;
  background: radial-gradient(70% 60% at 50% 62%, rgba(172, 255, 175, .09), transparent 70%);
  border: 0; border-radius: 24px; padding: 14px 0 12px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.tap:focus-visible { outline: 3px solid var(--mint); outline-offset: -3px; }
.tap-ar { font: 36px/1.35 var(--arabic); color: #fff; }
.tap-tr { font-size: 13px; color: var(--sage); }
.ring { position: relative; width: 320px; max-width: 100%; aspect-ratio: 320 / 250; margin-top: 2px; }
.ring canvas { width: 100%; height: 100%; }
.count { position: absolute; left: 0; right: 0; top: 37%; display: grid; justify-items: center; pointer-events: none; }
.count b { font: 800 58px/1 var(--display); color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.count b.bump { animation: bump .28s var(--ease-out); }
.count small { font-size: 13px; color: var(--sage); margin-top: 2px; }
@keyframes bump { 40% { transform: scale(1.12); color: var(--mint); } }
.tap-hint { font-size: 13px; font-weight: 600; color: var(--mint); margin-top: 2px; }

.done {
  position: absolute; inset: -16px 0 0; z-index: 1; border-radius: 24px;
  background: radial-gradient(80% 70% at 50% 40%, #1C3A1C, var(--deep));
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px 16px;
  animation: done-in .6s var(--ease-out) both;
}
.done[hidden] { display: none; }
.done .portal { width: 200px; height: 200px; margin: -8px 0 -4px; }
.done-title { font: 800 30px/1 var(--display); letter-spacing: -.02em; color: #fff; text-transform: uppercase; }
.done-sub { font-size: 15px; color: var(--sage); margin: 6px 0 14px; }
@keyframes done-in { from { opacity: 0; transform: scale(.97); } }

.summary { margin-top: 12px; }
.summary > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; border-top: 1px solid rgba(229, 239, 217, .12); }
.summary dt { font-size: 14px; color: var(--sage); }
.summary dd { font: 700 17px var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper output { min-width: 62px; text-align: center; }
.stepper button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(229, 239, 217, .1); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background-color .2s; }
.stepper button:hover:not(:disabled) { background: rgba(172, 255, 175, .25); }
.stepper button:disabled { opacity: .35; cursor: default; }

/* Trust strip */
.trust-inner { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.trust-item svg { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: var(--mint); fill: none; stroke: var(--deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.trust-item h2 { font: 800 22px/1.15 var(--display); letter-spacing: -.02em; margin-bottom: 8px; }
.trust-item p { color: var(--ink); max-width: 34ch; }

/* Film: real app footage in a dark panel */
.film { margin: 0 var(--inset); background: var(--deep); color: var(--mist); border-radius: var(--panel-radius); overflow: hidden; }
.film-inner { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 7vw, 112px); align-items: center; }
.film-title { font-size: clamp(42px, 6.2vw, 92px); color: #fff; margin-bottom: clamp(28px, 4vw, 48px); }
.film-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; max-width: 520px; }
.film-steps button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 1fr; gap: 4px; width: 100%; padding: 16px 0; cursor: pointer; }
.film-steps button:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; border-radius: 8px; }
.step-name { font: 800 26px/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: rgba(229, 239, 217, .45); transition: color .3s; }
.step-text { color: var(--sage); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease-out), opacity .4s; }
.step-bar { display: block; height: 3px; border-radius: 3px; background: rgba(229, 239, 217, .14); margin-top: 10px; overflow: hidden; }
.step-bar i { display: block; height: 100%; width: 100%; background: var(--mint); transform-origin: left; transform: scaleX(var(--p, 0)); }
.film-steps li.is-on .step-name { color: #fff; }
.film-steps li.is-on .step-text { max-height: 4em; opacity: 1; }

.film-device { display: grid; justify-items: center; gap: 16px; }
.device {
  width: 300px; height: 620px; border-radius: 52px; padding: 10px;
  background: linear-gradient(145deg, #2F4A2E, #0A140A 60%);
  box-shadow: 0 0 0 1.5px rgba(229, 239, 217, .12) inset, 0 60px 90px -40px rgba(0, 0, 0, .7), 0 0 120px -30px rgba(172, 255, 175, .25);
  animation: float 7s ease-in-out infinite;
}

/* Phone scenes, ported from the original hero. Sizes follow the app at 280 points wide. */
.screen {
  --paper: #F3F6EE; --olive: #778643; --muted: #4E4E4E;
  position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden;
  background: var(--mist); color: var(--forest); font-family: var(--body);
}
.island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 92px; height: 27px; border-radius: 20px; background: #000; z-index: 3; }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transition: opacity .5s ease; padding: 0 22px; }
.scene.is-on { opacity: 1; }
.micro { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--olive); }
.micro.muted { color: #8C968A; letter-spacing: .02em; text-transform: none; font-weight: 500; font-size: 12px; }
.screen .btn-primary { display: block; background: var(--forest); color: #fff; border-radius: 16px; padding: 14px; font-size: 15px; font-weight: 600; transition: transform .15s; }
.screen .btn-primary.is-pressed { transform: scale(.95); }
.screen .btn-primary.small { padding: 11px 26px; font-size: 14px; margin-top: 18px; }
.screen .btn-text { font-size: 15px; font-weight: 500; padding: 10px; }

.scene-shield { justify-content: center; }
.shield-mark { border-radius: 15px; margin-bottom: 26px; }
.shield-title { font: 600 25px/1.22 var(--body); margin-bottom: 12px; }
.shield-sub { font-size: 13px; color: var(--muted); }
.shield-actions { position: absolute; left: 20px; right: 20px; bottom: 40px; display: grid; gap: 8px; }

.scene-breathe { padding-top: 66px; background: var(--paper); }
.breath { position: relative; display: grid; place-items: center; }
.sphere { width: 210px; height: 210px; }
.breath-label { position: absolute; font: 600 19px var(--body); }
.breath-title { font: 700 26px var(--body); letter-spacing: -.02em; margin-top: 22px; }
.breath-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.breath-actions { position: absolute; left: 20px; right: 20px; bottom: 36px; display: grid; gap: 6px; }
.btn-capsule { display: block; border-radius: 999px; padding: 15px; font-size: 15px; font-weight: 600; background: rgba(57, 93, 56, .14); color: #8C968A; transition: background-color .35s, color .35s, transform .15s; }
.btn-capsule.is-open { background: var(--forest); color: #fff; }
.btn-capsule.is-pressed { transform: scale(.95); }

.scene-count { padding-top: 62px; background: var(--paper); }
.arabic { font: 34px/1.5 var(--arabic); margin-top: 8px; direction: rtl; }
.meaning { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.demo-beads { width: 210px; height: 210px; margin-bottom: 14px; }

.scene-done { padding-top: 58px; }
.goal { font-size: 13px; font-weight: 600; }
.demo-portal { width: 236px; height: 236px; margin: 20px 0 16px; }
.demo-done-title { font: 700 22px var(--display); letter-spacing: -.02em; }
.demo-done-sub { font-size: 13px; color: var(--muted); }

.film-toggle { border: 0; background: rgba(229, 239, 217, .1); color: var(--mist); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.film-toggle:hover { background: rgba(229, 239, 217, .18); }
@keyframes float { 50% { transform: translateY(-10px) rotate(-.6deg); } }

/* Adhkar marquee */
.adhkar { overflow: hidden; padding: clamp(40px, 5vw, 64px) 0; }
.adhkar-track { display: flex; width: max-content; animation: drift 60s linear infinite; }
.adhkar-set { display: flex; }
.adhkar figure { margin: 0 clamp(28px, 4vw, 56px); text-align: center; white-space: nowrap; }
.adhkar p { font: clamp(36px, 4vw, 52px)/1.45 var(--arabic); color: var(--deep); }
.adhkar figcaption { font-size: 14px; font-weight: 500; color: var(--forest); }
@keyframes drift { to { transform: translateX(-33.333%); } }

/* Feature tiles */
.features-inner { max-width: var(--max); margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(72px, 9vw, 128px); }
.features-title { font-size: clamp(40px, 6vw, 88px); max-width: 13ch; margin-bottom: clamp(32px, 5vw, 56px); }
.tiles { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.tile { grid-column: span 5; border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; height: 640px; }
.tile-wide { grid-column: span 7; flex-direction: row; }
.tile-flip { flex-direction: row-reverse; }
.tile-copy { padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px) 24px; }
.tile-wide .tile-copy { flex: 1 1 0; }
.tile h3 { font: 800 clamp(28px, 2.6vw, 38px)/1 var(--display); text-transform: uppercase; letter-spacing: -.012em; margin-bottom: 12px; }
.tile p { max-width: 38ch; }
.tile-mist { background: var(--mist); }
.tile-mist p { color: var(--ink); }
.tile-sage { background: var(--sage); }
.tile-deep { background: var(--deep); color: #fff; }
.tile-deep p { color: var(--sage); }

/* Screenshots stand in a phone bezel, cropped by the tile's bottom edge. */
/* --show is how much of the screen, from the top, must stay in view (the counter ring, the whole calendar).
   The phone shrinks until that part fits above the tile's bottom edge. */
.tile-shot { flex: 1 1 0; min-height: 0; display: flex; justify-content: center; align-items: flex-start; padding: 8px 28px 0; container-type: size; }
.tile-wide .tile-shot { padding-top: 48px; }
.tile-shot img { width: min(290px, 100%, calc((100cqh - 12px) * 600 / 1305 / var(--show, .6))); height: auto; aspect-ratio: 600 / 1305; border-radius: 40px; box-shadow: 0 0 0 9px var(--deep), 0 40px 60px -20px rgba(13, 29, 13, .45); }
.tile-deep .tile-shot img { box-shadow: 0 0 0 9px #050C05, 0 0 0 10px rgba(229, 239, 217, .14), 0 40px 60px -20px rgba(0, 0, 0, .6); }
.tile-wide .tile-art { flex: 1 1 0; }

.art-apps { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; }
.ui-list { width: 100%; max-width: 260px; background: #fff; border-radius: 18px; padding: 4px 14px; box-shadow: 0 24px 40px -24px rgba(19, 42, 19, .45); }
.ui-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 15px; font-weight: 500; color: #222; }
.ui-row + .ui-row { border-top: 1px solid rgba(57, 93, 56, .1); }
.ui-row small { font-size: 12px; color: #8C968A; }
.ico { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.ico svg { width: 100%; height: 100%; display: block; }
.ui-row:nth-child(2) .ico { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.ico-cat { background: var(--mist); position: relative; }
.ico-cat::before { content: ""; position: absolute; inset: 6px; border-radius: 3px; background: radial-gradient(circle at 25% 25%, var(--forest) 3px, transparent 3.5px), radial-gradient(circle at 75% 25%, var(--forest) 3px, transparent 3.5px), radial-gradient(circle at 25% 75%, var(--forest) 3px, transparent 3.5px), radial-gradient(circle at 75% 75%, var(--forest) 3px, transparent 3.5px); }
.tick { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--forest) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ui-pills { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ui-pill { font-size: 13px; font-weight: 600; background: #fff; color: var(--forest); padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.ui-pill.strong { background: var(--deep); color: var(--mint); }

/* Portal moment */
.moment { background: var(--night); color: var(--mist); }
.moment-inner { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 9vw, 128px) var(--gutter); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.portal-large { width: min(460px, 80vw); height: auto; aspect-ratio: 1; }
.moment-title { font-size: clamp(44px, 6.4vw, 96px); color: #fff; margin-bottom: 24px; }
.moment-copy p { font-size: clamp(17px, 1.5vw, 20px); color: var(--sage); max-width: 40ch; }

/* Privacy */
.privacy { margin: clamp(56px, 8vw, 112px) var(--inset) 0; background: var(--mist); border-radius: var(--panel-radius); }
.privacy-inner { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--gutter); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.shield { width: min(320px, 70vw); margin: 0 auto; animation: hover 6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes hover { 50% { transform: translateY(-12px) rotate(2deg); } }
.privacy-title { font-size: clamp(40px, 5.4vw, 80px); margin-bottom: 32px; }
.promises { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 18px; max-width: 56ch; }
.promises li { color: var(--ink); padding-left: 34px; position: relative; }
.promises li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--deep) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ACFFAF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.promises strong { color: var(--deep); }
.text-link { font-weight: 700; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* FAQ */
.faq-inner { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 9vw, 128px) var(--gutter); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-title { font-size: clamp(40px, 5.4vw, 80px); position: sticky; top: 96px; }
.faq-list { border-top: 1.5px solid var(--deep); }
.faq-list details { border-bottom: 1px solid rgba(19, 42, 19, .16); }
.faq-list summary { cursor: pointer; list-style: none; padding: 22px 52px 22px 0; font-weight: 600; font-size: 18px; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; font: 400 22px/1 var(--body); transition: transform .3s var(--ease-out), background-color .2s; }
.faq-list details[open] summary::after { transform: rotate(45deg); background: var(--mint); }
.faq-list summary:hover::after { background: var(--mint); }
.faq-list details p { color: var(--ink); padding: 0 52px 24px 0; max-width: 62ch; }

/* Get the app */
.get { position: relative; z-index: 1; margin: 0 var(--inset) var(--inset); background: var(--mist); border-radius: var(--panel-radius); }
.get-inner { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.get-title { font-size: clamp(42px, 6.4vw, 100px); margin-bottom: 32px; max-width: 12ch; }
.fine { font-size: 14px; margin-top: 16px; }
.qr { background: #fff; border-radius: 28px; padding: 22px 22px 16px; text-align: center; box-shadow: 0 30px 60px -30px rgba(19, 42, 19, .45); rotate: 3deg; }
.qr img { width: 168px; height: 168px; }
.qr figcaption { font-size: 13px; font-weight: 600; margin-top: 10px; }

/* Footer */
.footer { background: var(--deep); color: var(--mist); margin-top: calc(var(--panel-radius) * -1); padding-top: var(--panel-radius); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 48px; display: grid; grid-template-columns: 1fr auto; gap: 24px 32px; align-items: end; font-size: 15px; }
.footer-brand { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.footer-brand img { border-radius: 10px; grid-row: span 2; }
.footer-word { font-size: 28px; color: #fff; }
.footer-brand p:last-child { font-size: 14px; color: var(--sage); }
.footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer nav a { text-decoration: none; }
.footer nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.copyright { font-size: 13px; color: var(--sage); }

/* Scroll reveals, enabled by home.js so the page reads fine without scripts. */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .tiles .reveal:nth-child(2), .js .trust-item:nth-child(2) { transition-delay: .08s; }
.js .trust-item:nth-child(3) { transition-delay: .16s; }


@media (max-width: 1020px) {
  .hero-inner { grid-template-columns: 1fr; }
  .try { justify-self: start; }
  .film-inner, .moment-inner, .privacy-inner, .faq-inner { grid-template-columns: 1fr; }
  .faq-title { position: static; }
  .tile, .tile-wide { grid-column: span 12; height: auto; }
  .tile-wide, .tile-flip { flex-direction: column; }
  /* Stacked tiles grow to fit: the phone keeps a set width and the tile shows exactly --show of it. */
  .tile-shot, .tile-wide .tile-shot { --phone: min(290px, 70vw); flex: none; height: calc(var(--phone) * 1305 / 600 * var(--show) + 8px); padding-top: 8px; container-type: normal; }
  .tile-shot img { width: var(--phone); }
  .moment-inner { justify-items: center; text-align: center; }
  .moment-copy p { margin: 0 auto; }
  .privacy-art { order: -1; }
  .shield { width: min(220px, 50vw); }
}

@media (max-width: 760px) {
  .nav nav { display: none; }
  .nav-cta { margin-left: auto; }
  .hero-title { font-size: calc(15.6vw - 7px); }
  .trust-inner { grid-template-columns: 1fr; }
  .try { max-width: none; }
  /* The phone keeps its app-sized layout and scales down as one piece. */
  .film-device { --phone-scale: .76; }
  .device { transform-origin: top center; scale: var(--phone-scale); margin-bottom: calc(620px * (var(--phone-scale) - 1)); }
  .film-title { margin-bottom: 20px; }
  .film-steps button { padding: 9px 0; }
  .step-name { font-size: 20px; }
  .step-text { font-size: 15px; }
  .step-bar { margin-top: 6px; }
  .get-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; align-items: start; }
  .faq-list summary { font-size: 17px; }
  .chips { flex-wrap: nowrap; gap: 6px; }
  .chip span { font-size: 13px; gap: 6px; padding: 6px 10px 6px 6px; }
  .chip svg { width: 20px; height: 20px; }
}

/* Nobody scans a QR code on the phone they would scan it with. */
@media (hover: none) and (pointer: coarse) { .qr { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}