/* The Saudi riyal sign (U+20C1) is newer than the faces the site uses. It has a family of its own
   (assets/fonts/riyal-*.woff, OFL) first in every stack, used for that one character only: added
   to the site's own families instead, it took the bold Arabic weights' place and they never loaded. */
@font-face { font-family: Riyal; src: url(/assets/fonts/riyal-regular.woff) format("woff"); font-weight: 100 550; unicode-range: U+20C1; font-display: swap; }
@font-face { font-family: Riyal; src: url(/assets/fonts/riyal-bold.woff) format("woff"); font-weight: 551 1000; unicode-range: U+20C1; font-display: swap; }
  /*
    Bricks site, v4.
    Type: Urbanist (the wordmark's face) for display, Geist for text, Bricolage for money only.
    Scale (desktop): display 88, h2 60, h3 28, lead 20, body 18, small 15.
    Colour: neutral page; each container lit softly by one of the app's budget colours.
    Shape: buttons and chips are pills, containers 36px, photos 28px, app cards 20px.
  */
  :root {
    --bg: #FFFFFF; --surface: #F3F3F1; --card: #FFFFFF; --ink: #0E0E10; --ink-2: #5C5C62; --ink-3: #8E8E94; --line: rgba(14, 14, 16, 0.09);
    --cta: #0E0E10; --cta-ink: #FAFAF8; --good: #17824F;
    --peach: #F5AC8C; --sun: #F8CB72; --green: #96CE9A; --lav: #B0A8EE; --sky: #92C0E8; --pink: #F2A0BA;
    --tint: 24%; --pool: 0.8;
    --card-shadow: 0 24px 50px -20px rgba(40, 32, 20, 0.30), 0 8px 16px -8px rgba(40, 32, 20, 0.12);
    --ground: rgba(40, 32, 20, 0.22);
    --brick: url(/img/brick-light.svg);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0B0B0C; --surface: #161618; --card: #1C1C1F; --ink: #F3F3F0; --ink-2: #A2A2A8; --ink-3: #6E6E74; --line: rgba(243, 243, 240, 0.1);
      --cta: #F3F3F0; --cta-ink: #0B0B0C; --good: #4CC98A; --tint: 12%; --pool: 0.4;
      --card-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.07);
      --ground: rgba(0, 0, 0, 0.6); --brick: url(/img/brick-dark.svg); color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0B0B0C; --surface: #161618; --card: #1C1C1F; --ink: #F3F3F0; --ink-2: #A2A2A8; --ink-3: #6E6E74; --line: rgba(243, 243, 240, 0.1);
    --cta: #F3F3F0; --cta-ink: #0B0B0C; --good: #4CC98A; --tint: 12%; --pool: 0.4;
    --card-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.07);
    --ground: rgba(0, 0, 0, 0.6); --brick: url(/img/brick-dark.svg); color-scheme: dark;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.6 Riyal, Geist, Almarai, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  img, video { display: block; max-width: 100%; }
  a { color: inherit; }
  button { font: inherit; color: inherit; }
  .wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px; }
  h1, h2 { font-family: Riyal, Urbanist, Geist, Almarai, sans-serif; font-weight: 800; letter-spacing: -0.04em; margin: 0; text-wrap: balance; }
  h1 { font-size: clamp(46px, 6.2vw, 88px); line-height: 0.98; }
  h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; }
  h3 { font-family: Riyal, Urbanist, Geist, Almarai, sans-serif; font-weight: 700; font-size: clamp(23px, 2.1vw, 28px); line-height: 1.14; letter-spacing: -0.025em; margin: 0; }
  p { margin: 0; text-wrap: pretty; }
  .lead { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; color: var(--ink-2); }
  .money { font-family: Riyal, "Bricolage Grotesque", Geist, Almarai, sans-serif; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .ph, .ph-fill { line-height: 1; }

  /* Icons: Hugeicons inlined as SVG, sized and coloured like text. */
  .ph { display: inline-block; line-height: 0; font-style: normal; }
  .ph > svg { width: 1em; height: 1em; display: block; }

  /* Light page, light app. Dark page, dark app. */
  .dark-only { display: none !important; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .light-only { display: none !important; } :root:not([data-theme="light"]) .dark-only { display: block !important; } }
  :root[data-theme="dark"] .light-only { display: none !important; }
  :root[data-theme="dark"] .dark-only { display: block !important; }

  .render { width: 100%; height: auto; filter: drop-shadow(0 40px 46px var(--ground)); }
  .pool { position: absolute; border-radius: 50%; filter: blur(70px); opacity: var(--pool); pointer-events: none;
    background: conic-gradient(from 200deg, var(--peach), var(--sun), var(--green), var(--sky), var(--lav), var(--peach)); }
  /* A small piece of the app's language: a card that sits beside a phone or on a photo. */
  .chip { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -18px rgba(20, 16, 10, 0.32); font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink); white-space: nowrap; }
  .chip .who { width: 38px; height: 30px; flex: none; background: center / contain no-repeat; }
  .chip .ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 19px; color: var(--ink); background: color-mix(in srgb, var(--c, var(--green)) 30%, var(--card)); }
  .chip small { display: block; color: var(--ink-2); font-size: 13px; font-weight: 400; margin-top: 1px; }
  .chip > .money { font-size: 17px; margin-inline-start: auto; padding-inline-start: 20px; }
  .money.good { color: var(--good); }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; font: 500 17px/1 Riyal, Geist, Almarai, sans-serif; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s, background-color 0.2s; }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: scale(0.98); }
  .btn-primary { background: var(--cta); color: var(--cta-ink); }
  .btn-quiet { background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
  .btn-sm { height: 40px; padding: 0 18px; font-size: 15px; }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

  /* Nav */
  .nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.5) blur(20px); -webkit-backdrop-filter: saturate(1.5) blur(20px); transition: box-shadow 0.3s; }
  .nav.scrolled { box-shadow: 0 1px 0 var(--line); }
  .nav .wrap { height: 68px; display: flex; align-items: center; gap: 40px; }
  .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
  .logo .mark { width: 32px; height: 25px; background: var(--brick) center / contain no-repeat; }
  .logo .word { font-family: Riyal, Urbanist, Geist, Almarai, sans-serif; font-weight: 800; font-size: 25px; letter-spacing: -0.03em; }
  .nav-links { display: flex; gap: 30px; }
  .nav-links a { text-decoration: none; font-size: 15px; color: var(--ink-2); transition: color 0.2s; }
  .nav-links a:hover { color: var(--ink); }
  .nav-end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
  .icon-btn { width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; font-size: 19px; }
  .icon-btn:hover { background: var(--surface); color: var(--ink); }
  .icon-btn .ph-sun { display: none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon-btn .ph-sun { display: block; } :root:not([data-theme="light"]) .icon-btn .ph-moon { display: none; } }
  :root[data-theme="dark"] .icon-btn .ph-sun { display: block; }
  :root[data-theme="dark"] .icon-btn .ph-moon { display: none; }

  /* Hero: one soft container; the phone walks through the app, one card at a time beside it. */
  /* Full width: the colour runs edge to edge; the content stays on the page's grid. */
  .hero { padding: 0; --gutter: max(40px, calc((100vw - 1280px) / 2 + 40px)); }
  .hero > .wrap { max-width: none; padding: 0; }
  .hero-box { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; min-height: min(800px, calc(100dvh - 68px)); padding: 0 var(--gutter);
    background: var(--bg); }
  .hero-copy { position: relative; z-index: 2; padding: 64px 0 120px; }
  .hero-copy .lead { margin-top: 24px; max-width: 30ch; }
  .hero-copy .ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
  .show { position: relative; align-self: stretch; min-height: 0; }
  .show .pool { left: 18%; right: 18%; bottom: 4%; height: 22%; }
  .show .frames { position: absolute; left: 50%; top: 50%; height: 100%; aspect-ratio: 1120 / 1600; translate: -50% -50%; }
  .show .frames img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  .show .frames img.on { opacity: 1; }
  /* the card sits in the clear space left of the phone, just touching its frame (the phone spans 21% to 80% of the shot) */
  .show .chips { position: absolute; right: 76%; top: 62%; width: 300px; height: 90px; }
  .show .chips .chip { left: auto; right: 0; }
  .show .chip { position: absolute; left: 0; top: 0; opacity: 0; translate: 0 calc(var(--dir, 1) * 8px); transition: opacity 0.15s cubic-bezier(0.4, 0, 1, 1), translate 0.15s cubic-bezier(0.4, 0, 1, 1); pointer-events: none; }
  .show .chip.on { opacity: 1; translate: 0 0; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; }
  /* The hero's timeline: a label and a thin track per screen; the current one fills as it plays. */
  .steps-dots { position: absolute; left: var(--gutter); bottom: 44px; display: grid; grid-template-columns: repeat(5, 80px); gap: 12px; z-index: 2; }
  .steps-dots button { all: unset; cursor: pointer; display: grid; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink-3); transition: color 0.3s; }
  .steps-dots button::after { content: ""; height: 3px; border-radius: 3px; background: linear-gradient(var(--ink), var(--ink)) 0 0 / var(--p, 0%) 100% no-repeat, color-mix(in srgb, var(--ink) 14%, transparent); }
  .steps-dots button:hover { color: var(--ink-2); }
  .steps-dots button.done { --p: 100%; }
  .steps-dots button.on { color: var(--ink); animation: fill var(--dur, 3.4s) linear forwards; }
  .steps-dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 6px; }
  @property --p { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
  @keyframes fill { from { --p: 0%; } to { --p: 100%; } }

  .facts ul { list-style: none; margin: 0; padding: 32px 0 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 16px 32px; }
  .facts li { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 16px; }
  .facts .ph { font-size: 22px; color: var(--ink); }

  section.block { padding: 150px 0 0; }

  .photo { position: relative; border-radius: 28px; overflow: hidden; background: var(--surface); }
  .photo > img { width: 100%; height: 100%; object-fit: cover; }

  /* How it works */
  .story { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; margin-top: 64px; }
  .story-stage { position: sticky; top: 100px; height: calc(100dvh - 140px); max-height: 800px; border-radius: 36px; overflow: hidden; background: color-mix(in srgb, var(--c, var(--peach)) var(--tint), var(--bg)); transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
  .shotset { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
  .shotset.on { opacity: 1; transform: none; }
  /* One frame for every step: the phone's top sits 6% down the panel and the panel cuts it just below the screen's bottom controls. */
  .shotset .phone { position: absolute; height: 116%; top: -2.5%; left: 50%; aspect-ratio: 3 / 4; translate: -50% 0; }
  .shotset .phone img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 40px var(--ground)); }
  .steps { list-style: none; margin: 0; padding: 0; }
  .steps li { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: 0.3; transition: opacity 0.5s; }
  .steps li.on { opacity: 1; }
  .steps li:first-child { padding-top: 120px; }
  .steps .num { font: 600 15px Riyal, Geist, Almarai, sans-serif; color: var(--ink-2); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
  .steps .num i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
  .steps p { margin-top: 16px; color: var(--ink-2); max-width: 32ch; }
  .steps .mobile-shot { display: none; }

  /* The problem */
  /* the problems, set like an editorial list: a strong rule, a number, the point */
  .pains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 40px; margin-top: 64px; counter-reset: pain; }
  .pain { position: relative; padding-top: 26px; border-top: 2px solid var(--ink); counter-increment: pain; }
  .pain::before { content: counter(pain, decimal-leading-zero); display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 40px; font-variant-numeric: tabular-nums; }
  .pain .ph { position: absolute; top: 24px; right: 0; font-size: 20px; color: var(--ink-3); }
  .pain h3 { font-size: 22px; letter-spacing: -0.01em; }
  .pain p { margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 30ch; }

  /* The answer: two real moments */
  .moments { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; margin-top: 56px; }
  .moments figure { margin: 0; aspect-ratio: auto; height: 620px; }
  .moments .chip { position: absolute; left: 24px; right: 24px; bottom: 24px; max-width: none; }

  /* Groups */
  .groups-grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 20px; margin-top: 64px; }
  .panel { border-radius: 36px; padding: 48px; overflow: hidden; position: relative; background: color-mix(in srgb, var(--c) var(--tint), var(--bg)); }
  .panel p { color: var(--ink-2); margin-top: 12px; max-width: 32ch; }
  .panel-main { grid-row: span 2; min-height: 820px; --c: var(--green); }
  .panel-main .render { position: absolute; width: 104%; left: -2%; bottom: -60px; }
  /* Friends: a photo that fills the panel, words over a soft shade */
  .panel-photo { padding: 0; min-height: 400px; color: #fff; }
  .panel-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .panel-photo { display: flex; align-items: flex-end; }
  .panel-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 8, 6, 0.66) 0%, rgba(10, 8, 6, 0.18) 42%, transparent 60%); }
  .panel-photo .over { position: relative; z-index: 1; padding: 40px 44px; }
  .panel-photo p { color: rgba(255, 255, 255, 0.88); }
  /* Split it your way: a real split that changes method */
  .panel-split { --c: var(--sky); }
  .split { margin-top: 24px; background: var(--card); border-radius: 22px; padding: 20px; box-shadow: var(--card-shadow); }
  .split-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 600; }
  .split-head .money { font-size: 22px; }
  .split-bar { display: flex; gap: 4px; height: 12px; margin: 16px 0 14px; }
  .split-bar span { border-radius: 6px; flex: 1 1 0; transition: flex-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
  .split-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .split-people div { display: grid; justify-items: center; gap: 2px; font-size: 13px; color: var(--ink-2); text-align: center; }
  .split-people i { width: 38px; height: 30px; background: center / contain no-repeat; }
  .split-people .money { font-size: 16px; color: var(--ink); }
  /* Same timeline as the hero: a label over a thin track that fills while that method shows. */
  .ways { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; align-items: end; }
  .ways button { all: unset; cursor: pointer; display: grid; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink-3); white-space: nowrap; transition: color 0.3s; }
  .ways button::after { content: ""; height: 3px; border-radius: 3px; background: linear-gradient(var(--ink), var(--ink)) 0 0 / var(--p, 0%) 100% no-repeat, color-mix(in srgb, var(--ink) 14%, transparent); }
  .ways button:hover { color: var(--ink-2); }
  .ways button.done { --p: 100%; }
  .ways button.on { color: var(--ink); animation: fill 2.6s linear forwards; }
  .ways button:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 6px; }

  /* Brick, in someone's hand */
  .brick-row { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: center; }
  .brick-row .photo { aspect-ratio: 3 / 2; }
  .brick-row .photo .chip { position: absolute; left: 28px; top: 28px; max-width: 360px; }
  .brick-row .lead { margin-top: 24px; max-width: 34ch; }
  /* A real exchange with Brick, in the app's own bubbles. */
  .convo { margin-top: 36px; padding: 22px; border-radius: 28px; background: var(--card); box-shadow: var(--card-shadow); display: grid; gap: 12px; max-width: 460px; }
  .msg { display: flex; align-items: flex-end; gap: 10px; }
  .msg p { margin: 0; padding: 11px 15px; border-radius: 20px; font-size: 15px; line-height: 1.45; max-width: 34ch; }
  .msg.brick p { background: var(--surface); border-bottom-left-radius: 6px; }
  .msg.you { justify-content: flex-end; }
  .msg.you p { background: var(--cta); color: var(--cta-ink); border-bottom-right-radius: 6px; }
  .msg .av { width: 34px; height: 27px; flex: none; background: var(--brick) center / contain no-repeat; }
  .msg .money { font-size: 15px; }
  .convo .msg { opacity: 0; transform: translateY(10px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .convo.in .msg { opacity: 1; transform: none; }
  .convo.in .msg:nth-child(2) { transition-delay: 0.5s; }
  .convo.in .msg:nth-child(3) { transition-delay: 1.1s; }

  /* Privacy */
  .privacy { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: center; }
  .privacy .photo { aspect-ratio: 4 / 5; }
  .privacy .lead { margin-top: 20px; max-width: 34ch; }
  .privacy a.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; font-weight: 500; text-decoration: none; }
  .privacy a.more:hover { text-decoration: underline; text-underline-offset: 4px; }

/*
  A tile with a link is one card: anywhere on it opens the page. The link
  stretches over the whole figure (one link, one tab stop, read once by a
  screen reader), rather than the photo being a second link to the same place.

  Hovered, it answers without changing colour: the photo eases in a touch,
  the card over it rises a little higher off it, the tile picks up a soft
  shadow, and the arrow steps forward. Slow and small, the way a printed card
  lifts when a finger reaches for it. Only where there is a pointer that can
  hover; with reduced motion, only the shadow.
*/
.answers figure:has(a.more) { position: relative; }
.answers figure a.more::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: 32px; }
.answers figure:has(a.more) .tile { transition: box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), translate 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.answers figure:has(a.more) .tile > img { transition: scale 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.answers figure:has(a.more) .tile > :is(.fcard, .notes, .linkpill) { transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.answers figure a.more .ph { transition: translate 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) and (pointer: fine) {
  .answers figure:has(a.more):hover .tile { translate: 0 -4px; }
  .answers figure:has(a.more):hover .tile > img { scale: 1.035; }
  .answers figure:has(a.more):hover .tile > :is(.fcard, .notes, .linkpill) { translate: 0 -6px; }
  .answers figure:has(a.more):hover a.more .ph { translate: 4px 0; }
  [dir="rtl"] .answers figure:has(a.more):hover a.more .ph { translate: -4px 0; }
}
/* Reached by keyboard: the same lift, and a ring round the tile. */
.answers figure:has(a.more:focus-visible) .tile { outline: 2px solid var(--ink); outline-offset: 4px; }
.answers figure a.more:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .answers figure:has(a.more):hover :is(.tile, .tile > img, .tile > .fcard, .tile > .notes, .tile > .linkpill, a.more .ph) { translate: none; scale: none; }
}
  /* promises: bare icons on hairline rows, like every list on the site */
  .promises { display: grid; margin-top: 40px; border-top: 1px solid var(--line); max-width: 560px; }
  .promise { display: grid; grid-template-columns: 24px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
  .promise .ph { font-size: 22px; color: var(--ink); margin-top: 2px; }
  .promise h3 { font-size: 20px; }
  .promise p { margin-top: 6px; color: var(--ink-2); font-size: 16.5px; line-height: 1.5; }

  /* Questions */
  .faq { max-width: 860px; margin: 0 auto; }
  .faq h2 { text-align: center; margin-bottom: 48px; }
  .faq details { border-top: 1px solid var(--line); }
  .faq details:last-of-type { border-bottom: 1px solid var(--line); }
  .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .ph { font-size: 20px; color: var(--ink-2); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  .faq details[open]:not(.closing) summary .ph { transform: rotate(45deg); }
  .faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 12px; }
  .faq details p { padding: 0 0 28px; padding-inline-end: 48px; color: var(--ink-2); margin-top: -6px; }

  /* Get it */
  .get { margin-top: 150px; }
  .get .panel { --c: var(--peach); padding: 88px 88px 0; display: grid; grid-template-columns: 1fr 0.9fr; gap: 48px; min-height: 580px; }
  .get .panel > div:first-child { padding-bottom: 88px; align-self: center; }
  .get .lead { margin-top: 22px; max-width: 30ch; }
  .platforms { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
  .platform { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px 0 16px; border-radius: 12px; background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
  .platform .logo-mark { width: 26px; height: 26px; flex: none; }
  .platform small { display: block; font-size: 12px; opacity: 0.7; line-height: 1.2; }
  .platform b { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
  .get .art { position: relative; }
  .get .art .pool { left: 10%; right: 10%; bottom: 0; height: 40%; }
  .get .art .render { position: absolute; width: 100%; left: 0; top: -20px; }

  footer { padding: 96px 0 48px; }
  footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-top: 48px; border-top: 1px solid var(--line); }
  footer h4 { margin: 0 0 16px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
  footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  footer a { text-decoration: none; color: var(--ink-2); font-size: 15px; }
  footer a:hover { color: var(--ink); }
  footer .tag { color: var(--ink-2); font-size: 15px; margin-top: 14px; }
  footer .legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 64px; color: var(--ink-3); font-size: 14px; }

  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--d, 0s); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .steps li, .shotset, .story-stage, .show .frames img, .show .chip, .hero-box, .split-bar span, .convo .msg { transition: none; }
    .convo .msg { opacity: 1; transform: none; }
    .ways button.on { animation: none; --p: 100%; }
    .steps-dots button.on { animation: none; --p: 100%; }
  }

  @media (max-width: 1080px) {
    .wrap { padding: 0 24px; }
    .nav-links { display: none; }
    .hero { --gutter: 24px; }
    .hero-box { grid-template-columns: 1fr; min-height: 0; }
    .hero-copy { text-align: center; padding: 56px 0 0; }
    .hero-copy .lead { margin-inline: auto; }
    .hero-copy .ctas { justify-content: center; }
    .show { height: 680px; margin-top: 24px; }
    .show .chips { right: auto; left: 50%; translate: -50% 0; top: -60px; }
    .show .chips .chip { right: auto; left: 0; }
    .show .frames { top: calc(50% + 40px); }
    .steps-dots { position: relative; left: auto; bottom: auto; justify-content: center; padding: 0 0 32px; grid-template-columns: repeat(5, 64px); gap: 10px; }
    .facts ul { grid-template-columns: repeat(2, auto); justify-content: center; }
    .brick-row, .privacy { grid-template-columns: 1fr; gap: 48px; }
    .privacy .photo { aspect-ratio: 16 / 10; }
    .story { grid-template-columns: 1fr; gap: 0; margin-top: 48px; }
    .story-stage { display: none; }
    .steps li, .steps li:first-child { min-height: 0; opacity: 1; padding: 0 0 72px; }
    .steps .mobile-shot { display: block; position: relative; margin-top: 28px; border-radius: 28px; background: color-mix(in srgb, var(--c) var(--tint), var(--bg)); aspect-ratio: 4 / 5; overflow: hidden; }
    .steps .mobile-shot img { position: absolute; left: 50%; top: -3%; height: 116%; width: auto; translate: -50% 0; filter: drop-shadow(0 30px 30px var(--ground)); }
    .groups-grid { grid-template-columns: 1fr; }
    .pains { grid-template-columns: 1fr 1fr; gap: 48px 32px; }
    .moments { grid-template-columns: 1fr; }
    .moments figure { height: 520px; }
    .panel-main { min-height: 680px; }
    .get .panel { grid-template-columns: 1fr; padding: 64px 48px 0; }
    .get .panel > div:first-child { padding-bottom: 0; }
    .get .art { height: 460px; }
    .get .art .render { width: 70%; left: 15%; }
  }
  @media (max-width: 640px) {
    body { font-size: 17px; }
    .wrap { padding: 0 16px; }
    .nav .btn-sm { display: none; }
    .hero { --gutter: 16px; }
    .hero-copy { padding-top: 44px; }
    .hero-copy .ctas .btn { flex: 1 1 100%; }
    .show { height: 560px; }
    .show .chips { width: 290px; }
    .steps-dots { grid-template-columns: repeat(5, 1fr); width: 100%; }
    .steps-dots button { font-size: 12px; text-align: center; }
    .facts ul { grid-template-columns: 1fr 1fr; justify-content: stretch; gap: 14px 16px; }
    .facts li { font-size: 15px; }
    section.block { padding-top: 104px; }
    .brick-row .photo { aspect-ratio: 4 / 3; }
    .brick-row .photo .chip { left: 14px; top: 14px; right: 14px; max-width: none; }
    .panel { padding: 32px 26px; border-radius: 28px; }
    .panel-photo { padding: 0; min-height: 420px; }
    .panel-photo .over { padding: 28px 26px; }
    .panel-main { min-height: 560px; }
    .ways { gap: 8px; }
    .ways button { font-size: 12.5px; white-space: normal; }
    .pains { grid-template-columns: 1fr; gap: 40px; }
    .pain::before { margin-bottom: 20px; }
    .moments figure { height: 440px; }
    .moments .chip { left: 14px; right: 14px; bottom: 14px; }
    .faq summary { font-size: 18px; }
    .get { margin-top: 104px; }
    .get .panel { padding: 48px 26px 0; }
    .get .art { height: 330px; }
    .get .art .render { width: 92%; left: 4%; }
    footer .cols { grid-template-columns: 1fr 1fr; }
    footer .cols > div:first-child { grid-column: 1 / -1; }
  }

/* ---------- Features menu ---------- */
.menu { position: relative; }
.menu > button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink-2); transition: color 0.2s; }
.menu > button:hover, .menu.open > button { color: var(--ink); }
.menu > button .ph { font-size: 13px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.menu.open > button .ph { transform: rotate(180deg); }
.menu > button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.menu-panel { position: absolute; top: calc(100% + 16px); left: -20px; width: 620px; padding: 8px; border-radius: 20px;
  display: grid; grid-template-columns: 1fr 228px; gap: 8px; color: var(--ink);
  background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 2px 4px rgba(14, 14, 16, 0.04), 0 24px 48px -16px rgba(14, 14, 16, 0.22);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(0.985); transform-origin: 40px 0;
  transition: opacity 0.2s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s; }
.menu.open .menu-panel { opacity: 1; visibility: visible; transform: none; }
.menu-list { display: grid; align-content: start; gap: 2px; }
.menu-list a, .menu-list .soon { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px; text-decoration: none; color: var(--ink); transition: background 0.15s; }
.menu-list :is(a, .soon):hover, .menu-list :is(a, .soon):focus-visible, .menu-list :is(a, .soon).on { background: var(--surface); outline: none; }
.menu-list .ic { width: 36px; height: 36px; display: grid; place-items: center; font-size: 20px; color: var(--ink-2); transition: color 0.15s; }
.menu-list :is(a, .soon):hover .ic, .menu-list :is(a, .soon):focus-visible .ic, .menu-list :is(a, .soon).on .ic { color: var(--ink); }
.menu-list b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.menu-list small { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.35; margin-top: 1px; }
/* the app screen of the feature under the pointer, rising from the foot of a tinted panel */
.menu-preview { position: relative; border-radius: 14px; overflow: hidden; isolation: isolate; }
.menu-preview .pv { position: absolute; inset: 0; background: color-mix(in srgb, var(--c) 34%, var(--card)); opacity: 0; transition: opacity 0.35s; }
.menu-preview .pv.on { opacity: 1; }
.menu-preview img { position: absolute; left: -16%; width: 132%; top: 10%; height: auto; translate: 0 14px; transition: translate 0.6s cubic-bezier(0.16, 1, 0.3, 1); filter: drop-shadow(0 18px 22px rgba(14, 14, 16, 0.18)); }
.menu-preview .pv.on img { translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .menu-preview .pv, .menu-preview img { transition: none; } }
.nav-links .menu { display: inline-flex; }
.nav-links a.here { color: var(--ink); }

/* ---------- Photo tiles with the app's cards floating over them ---------- */
.tile { position: relative; border-radius: 32px; overflow: hidden; background: var(--surface); isolation: isolate; }
.tile > img.bg, .tile .slide > img.bg, .tile > img.fg, .tile .slide > img.fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
/* The people sit in front of the cards: photo, then cards, then the cut-out people. */
.tile > img.fg, .tile .slide > img.fg { z-index: 3; pointer-events: none; }
/*
  Cards over photos: small, light and exact, like a widget lifted off the phone.
  A frosted face, a hairline edge, a lit top edge and a shadow in three layers
  (contact, near, far) so each card sits at a believable height above the photo.
*/
.fcard, .note, .linkpill {
  --face: color-mix(in srgb, var(--card) 90%, transparent);
  --edge: rgba(14, 14, 16, 0.06);
  --lift: 0 1px 1px rgba(30, 22, 12, 0.05), 0 8px 18px -8px rgba(30, 22, 12, 0.22), 0 30px 60px -28px rgba(30, 22, 12, 0.42);
  background: var(--face); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 1px var(--edge), var(--lift);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.fcard, .note, .linkpill) { --face: color-mix(in srgb, var(--card) 86%, transparent); --edge: rgba(255, 255, 255, 0.09); --lift: 0 1px 1px rgba(0, 0, 0, 0.3), 0 8px 18px -8px rgba(0, 0, 0, 0.5), 0 30px 60px -24px rgba(0, 0, 0, 0.8); } }
:root[data-theme="dark"] :is(.fcard, .note, .linkpill) { --face: color-mix(in srgb, var(--card) 86%, transparent); --edge: rgba(255, 255, 255, 0.09); --lift: 0 1px 1px rgba(0, 0, 0, 0.3), 0 8px 18px -8px rgba(0, 0, 0, 0.5), 0 30px 60px -24px rgba(0, 0, 0, 0.8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.fcard, .note, .linkpill) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px var(--edge), var(--lift); } }
:root[data-theme="dark"] :is(.fcard, .note, .linkpill) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px var(--edge), var(--lift); }
@media (prefers-reduced-transparency: reduce) { .fcard, .note, .linkpill { --face: var(--card); } }
.fcard { position: absolute; z-index: 2; color: var(--ink); border-radius: 20px; padding: 16px 18px; transform: rotate(var(--r, 0deg)); font-size: 14px; line-height: 1.35; }
/* a second card tucked behind: the stack the app keeps its cards in */
.fcard.stacked::after { content: ""; position: absolute; left: 6%; right: 6%; top: 100%; height: 8px; border-radius: 0 0 14px 14px; background: var(--face); box-shadow: 0 0 0 1px var(--edge), 0 14px 24px -14px rgba(30, 22, 12, 0.35); }
.fcard .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fcard .hd { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.fcard .hd small { display: block; font-weight: 400; color: var(--ink-2); font-size: 12.5px; letter-spacing: 0; margin-top: 1px; }
.fcard .big { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; margin-top: 12px; }
.fcard .muted { color: var(--ink-2); font-size: 12.5px; }
.fcard .ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; color: color-mix(in srgb, var(--c, var(--green)) 45%, var(--ink)); background: color-mix(in srgb, var(--c, var(--green)) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--green)) 30%, transparent); flex: none; }
.fcard .av { width: 34px; height: 27px; flex: none; background: center / contain no-repeat; }
.fcard .items { margin-top: 12px; display: grid; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.fcard .items .row span:last-child { color: var(--ink); }
.fcard .items .row span:last-child { font-family: Riyal, "Bricolage Grotesque", Geist, Almarai, sans-serif; font-weight: 700; }
.fcard .total { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 14px; }
.fcard .total b.money { font-size: 18px; }
.seg { display: flex; gap: 3px; height: 8px; margin: 14px 0 12px; }
.seg span { border-radius: 5px; }
.legend { display: grid; grid-template-columns: 1fr auto; gap: 5px 18px; font-size: 12.5px; color: var(--ink-2); }
.legend b { font-family: Riyal, "Bricolage Grotesque", Geist, Almarai, sans-serif; color: var(--ink); text-align: right; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 8px; }
.stack { display: flex; }
.stack i { width: 30px; height: 24px; margin-inline-end: -8px; background: center / contain no-repeat; }
.linkpill { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border-radius: 999px; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.linkpill i.av { width: 34px; height: 27px; background: center / contain no-repeat; }
.linkpill .ph { font-size: 16px; color: var(--ink-3); }

/* Frosted card over a photo */
.glass { position: absolute; z-index: 2; color: #fff; border-radius: 22px; padding: 18px 20px; background: rgba(28, 24, 20, 0.36); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.glass .muted { color: rgba(255, 255, 255, 0.78); font-size: 13px; }
.glass .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); margin-top: 10px; overflow: hidden; }
.glass .bar span { display: block; height: 100%; border-radius: 3px; background: #fff; }
@media (prefers-reduced-transparency: reduce) { .glass { background: rgba(28, 24, 20, 0.85); } }

/* Notifications arriving one after another */
.notes { position: absolute; z-index: 2; left: 7%; right: 12%; top: 7%; height: 150px; }
.note { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 3px 12px; align-items: start; padding: 13px 15px; border-radius: 20px; color: var(--ink);
  opacity: 0; transform: translateY(-14px) scale(0.96); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.note .av { width: 34px; height: 27px; background: var(--brick) center / contain no-repeat; grid-row: span 2; margin-top: 2px; }
.note b { font-size: 14px; }
.note time { font-size: 12px; color: var(--ink-3); }
.note p { grid-column: 2 / 4; font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.4; }
.note.on { opacity: 1; transform: none; z-index: 3; }
.note.was { opacity: 1; transform: translateY(14px) scale(0.94); z-index: 2; filter: brightness(0.96); }
.note.was2 { opacity: 1; transform: translateY(26px) scale(0.88); z-index: 1; filter: brightness(0.92); }
.note.was p, .note.was b, .note.was time, .note.was .av, .note.was2 p, .note.was2 b, .note.was2 time, .note.was2 .av { opacity: 0; }

/* Photo carousels: the photo crossfades, its card changes with it */
.carousel .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.carousel .slide.on { opacity: 1; }
.carousel .slide .glass, .carousel .slide .fcard { opacity: 0; translate: 0 12px; transition: opacity 0.6s 0.25s, translate 0.8s 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.carousel .slide.on .glass, .carousel .slide.on .fcard { opacity: 1; translate: 0 0; }
.tile-label { position: absolute; z-index: 3; left: 0; right: 0; top: 26px; text-align: center; color: #fff; font-weight: 600; font-size: 18px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }

/* Tracks under a carousel, like the hero's */
.cycle-nav { position: absolute; z-index: 4; left: 28px; right: 28px; bottom: 24px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.cycle-nav button { all: unset; cursor: pointer; display: grid; gap: 8px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.cycle-nav button::after { content: ""; height: 3px; border-radius: 3px; background: linear-gradient(#fff, #fff) 0 0 / var(--p, 0%) 100% no-repeat, rgba(255, 255, 255, 0.3); }
.cycle-nav button.done { --p: 100%; }
.cycle-nav button.on { color: #fff; animation: fill var(--dur, 3.2s) linear forwards; }
.cycle-nav button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }

/* People in a group, as the app draws them */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pills span { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #0e0e10; font-size: 14px; font-weight: 500; }
.pills i { width: 30px; height: 24px; background: center / contain no-repeat; }

/* ---------- Home: the answer, one tile per pain ---------- */
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 24px; margin-top: 56px; }
.answers figure { margin: 0; }
.answers .tile { aspect-ratio: 5 / 4; }
.answers figcaption { margin-top: 22px; }
.answers figcaption p { color: var(--ink-2); margin-top: 8px; max-width: 40ch; }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 500; font-size: 16px; text-decoration: none; color: var(--ink); }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Use cases */
.cases { margin-top: 56px; }
.cases .tile { aspect-ratio: 16 / 8; }
.cases .carousel::after { display: none; }
/* the story under the photo, and the tracks beside it */
.cases-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px; align-items: end; margin-top: 28px; }
.caps { display: grid; }
.cap { grid-area: 1 / 1; opacity: 0; translate: 0 8px; transition: opacity 0.5s, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.cap.on { opacity: 1; translate: 0 0; }
.cap p { color: var(--ink-2); margin-top: 8px; max-width: 46ch; }
.cases .cycle-nav { position: static; padding-bottom: 6px; }
.cases .cycle-nav button { color: var(--ink-3); }
.cases .cycle-nav button.on { color: var(--ink); }
.cases .cycle-nav button::after { background: linear-gradient(var(--ink), var(--ink)) 0 0 / var(--p, 0%) 100% no-repeat, var(--line); }
.cases .cycle-nav button:focus-visible { outline-color: var(--ink); }

/* ---------- Feature pages ---------- */
.f-hero { padding: 40px 0 0; }
.f-hero .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
/* eyebrow: a bare icon and the feature's name, the colour only as a short rule under it */
.f-hero h1 { font-size: clamp(42px, 5.2vw, 72px); line-height: 1; }
.f-hero .lead { margin-top: 24px; max-width: 34ch; }
.f-hero .ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.f-hero .tile { aspect-ratio: 1 / 1; }
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.point { padding: 30px 28px; border-radius: 28px; background: var(--surface); }
.point .ph { font-size: 24px; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--bg); margin-bottom: 24px; }
.point h3 { font-size: 21px; }
.point p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; align-items: stretch; }
.duo .tile { min-height: 560px; }
.next { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.next a { display: grid; gap: 14px; padding: 22px; border-radius: 24px; background: var(--surface); text-decoration: none; transition: background-color 0.2s; }
.next a:hover { background: color-mix(in srgb, var(--c) 22%, var(--surface)); }
.next .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, var(--c) 32%, var(--bg)); }
.next b { font-size: 17px; }
.next small { color: var(--ink-2); font-size: 14px; display: block; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .note, .carousel .slide, .carousel .slide .glass, .carousel .slide .fcard, .cap { transition: none; }
  .cycle-nav button.on { animation: none; --p: 100%; }
}
@media (max-width: 1080px) {
  .nav-links { display: flex; gap: 22px; }
  .nav-links > a:not(.keep) { display: none; }
  .menu-panel { position: fixed; top: 76px; left: 16px; right: 16px; width: auto; grid-template-columns: 1fr; }
  .menu-preview { display: none; }
  .answers { grid-template-columns: 1fr; gap: 48px; }
  .f-hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .points { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .next { grid-template-columns: 1fr 1fr; }
  .cases .tile { aspect-ratio: 4 / 5; }
  .cases-foot { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
  .answers .tile { aspect-ratio: 4 / 5; }
  .fcard { padding: 14px 16px; border-radius: 18px; }
  .fcard .big { font-size: 24px; }
  .notes { left: 5%; right: 5%; }
  .cycle-nav { left: 16px; right: 16px; }
  .next { grid-template-columns: 1fr; }
  .duo .tile { min-height: 460px; }
}
.carousel::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(0deg, rgba(10, 8, 6, 0.45), transparent); pointer-events: none; }
@media (max-width: 640px) {
  .tile .fcard { width: auto !important; left: 14px !important; right: 14px !important; max-width: 340px; }
  .tile .fcard .items .row:nth-child(n+3) { display: none; }
  .cycle-nav button { font-size: 11.5px; }
  /* On a phone the photo is narrow: every card goes to the foot of it, below the faces. */
  .tile:not(.cards-top) .fcard { top: auto !important; bottom: 14px !important; }
  .tile:not(.cards-top) .notes { top: auto !important; bottom: 12px !important; left: 14px !important; right: 14px !important; height: 104px; }
  /* a photo of hands, no faces: the card stays at the top and nothing is laid over it */
  .tile.cards-top .fcard { top: 14px !important; bottom: auto !important; }
  .tile.cards-top > img.fg { display: none !important; }
}

/* ---------- Deep feature sections ---------- */
.deep { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 56px; }
.deep.flip > :first-child { order: 2; }
.deep .copy h3 { font-size: clamp(26px, 2.6vw, 34px); }
.deep .copy p { color: var(--ink-2); margin-top: 14px; max-width: 38ch; }
/* points: bare icons on hairline rows, no boxes */
.deep .copy ul { list-style: none; padding: 0; margin: 30px 0 0; display: grid; border-top: 1px solid var(--line); max-width: 460px; }
.deep .copy li { display: grid; grid-template-columns: 22px 1fr; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); line-height: 1.45; }
.deep .copy li b { display: block; color: var(--ink); font-weight: 600; font-size: 16px; margin-bottom: 2px; }
.deep .copy li .ph { font-size: 20px; color: var(--ink); margin-top: 1px; }
.stagec { position: relative; border-radius: 36px; overflow: hidden; background: color-mix(in srgb, var(--c, var(--peach)) var(--tint), var(--bg)); aspect-ratio: 1 / 1.08; display: grid; place-items: center; }
.stagec .phone1 { width: 72%; }
.stagec .pair { position: relative; width: 100%; height: 100%; }
.stagec .pair img { position: absolute; width: 60%; }
.stagec .pair img.a { left: -2%; top: 6%; }
.stagec .pair img.b { right: -2%; top: 14%; }
.stagec img.render { filter: drop-shadow(0 34px 34px var(--ground)); }

/* A straight-on phone whose page scrolls as the section passes. */
.scrollsec { position: relative; }
.scrollsec .sticky { position: sticky; top: 90px; align-self: start; }
.scroller { position: relative; width: min(100%, 420px); margin: 0 auto; aspect-ratio: 1050 / 1400; }
.scroller > img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 40px 40px var(--ground)); }
.scroller .screen { position: absolute; left: 24.65%; right: 24.65%; top: 8.67%; bottom: 8.67%; border-radius: 13.7% / 6.3%; overflow: hidden; background: #F0F0F0; }
/* the app's own page colour: Transactions and Payments are see-through on it, with their light between */
:root[data-theme="dark"] .scroller .screen { background: #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scroller .screen { background: #000; } }
.scroller .screen .body { position: absolute; left: 0; right: 0; z-index: 1; will-change: transform; }
.scroller .screen img { display: block; width: 100%; height: auto; }
.scroller .screen .top { position: absolute; left: 0; right: 0; top: 0; z-index: 2; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent); mask-image: linear-gradient(to bottom, #000 58%, transparent); }
.scroller .screen .body { top: 0 !important; }
.scroller .screen .bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.scrollsec .track { display: grid; gap: 0; }
.scrollsec .track .item { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.32; transition: opacity 0.4s; }
.scrollsec .track .item.on { opacity: 1; }
.scrollsec .track .item h3 { font-size: clamp(24px, 2.4vw, 32px); }
.scrollsec .track .item p { color: var(--ink-2); margin-top: 12px; max-width: 36ch; }
.scrollsec .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 40px; }
.scrollsec .stagec { aspect-ratio: auto; height: calc(100dvh - 150px); max-height: 820px; }
.scrollsec .stagec .scroller { height: 92%; width: auto; }

@media (max-width: 1080px) {
  .deep { grid-template-columns: 1fr; gap: 32px; }
  .deep.flip > :first-child { order: 0; }
  .scrollsec .grid { grid-template-columns: 1fr; gap: 0; }
  .scrollsec .sticky { top: 70px; z-index: 1; }
  .scrollsec .stagec { height: 62vh; }
  .scrollsec .track { position: relative; z-index: 2; }
  .scrollsec .track .item { min-height: 0; opacity: 1; padding: 22px 22px; margin: 0 0 40vh; border-radius: 22px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--card-shadow); }
}
@media (prefers-reduced-motion: reduce) { .scrollsec .track .item { transition: none; } }

/* A wide photo moment inside a feature page */
.tile.moment { aspect-ratio: 3 / 2; margin-top: 48px; }
@media (max-width: 720px) { .tile.moment { aspect-ratio: 4 / 5; } }

/* Budgets: three square photos in a row, each at its own shape */
.limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.limits .tile { aspect-ratio: 1 / 1; }
.limits .fcard .hd { --c: inherit; }
.fcard .bar { height: 6px; border-radius: 3px; margin-top: 10px; overflow: hidden; background: var(--line); }
.fcard .bar span { display: block; height: 100%; border-radius: 3px; background: var(--ink); }
@media (max-width: 900px) { .limits { grid-template-columns: 1fr; max-width: 480px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu-preview .pv { background: color-mix(in srgb, var(--c) 20%, var(--card)); } }
:root[data-theme="dark"] .menu-preview .pv { background: color-mix(in srgb, var(--c) 20%, var(--card)); }
/* the photo version of the menu preview */
.menu-preview img.photo { left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; translate: 0; filter: none; scale: 1.06; transition: scale 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.menu-preview .pv.on img.photo { scale: 1; }
/* a feature on its way: no page yet, a quiet badge */
.menu-list .soon { cursor: default; }
.menu-list .soon em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: 2px 8px; margin-inline-start: 6px; vertical-align: 2px; }
.menu-list .soon .ic span { opacity: 0.85; }

/* Three equal ways to do one thing */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.trio figure { margin: 0; }
.trio .stagec { aspect-ratio: 1 / 1.05; }
.trio .stagec .phone1 { width: 82%; }
.trio figcaption h3 { margin-top: 24px; font-size: clamp(22px, 2vw, 26px); }
.trio figcaption p { color: var(--ink-2); margin-top: 8px; max-width: 34ch; }
.trio ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; border-top: 1px solid var(--line); }
.trio li { display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.trio li b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.trio li .ph { font-size: 18px; color: var(--ink); margin-top: 1px; }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; gap: 48px; max-width: 480px; } }

.menu-preview .pv:has(img.photo) { background: transparent; }
.fcard.limit { padding: 12px 14px 13px; }
.fcard.limit .hd { gap: 10px; }
.fcard.limit .hd > span:nth-child(2) { flex: 1; min-width: 0; }
.fcard.limit .amt { text-align: right; font-weight: 400; }
.fcard.limit .amt b { display: block; font-size: 17px; }
.fcard.limit .amt small { font-size: 12px; }
.fcard.limit .bar { margin-top: 10px; height: 5px; }
/* on a phone, photo cards keep their head and total: short enough to stay under the faces */
@media (max-width: 640px) { .tile .fcard .items { display: none; } .tile .fcard .total { margin-top: 8px; } }

/* Hero, Log step: the voice phone in front; the scanner and the typed expense, as bare screens
   without a frame, slide out from behind it to each side, smaller and a step back. */
.show .frames img[data-sub="0"] { z-index: 2; }
.show .frames img.side { inset: 27% auto auto 33.5%; width: 33%; height: auto; max-width: none; z-index: 1;
  border-radius: 13% / 6.4%; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -18px rgba(20, 16, 10, 0.35);
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
/* closing: quick and quiet, back behind the main phone */
.show .frames img.side { opacity: 0; transform: none; will-change: transform, opacity; transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
/* opening: one long soft glide out */
.hero-box.log-open .show .frames img.side.on { opacity: 1; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-box.log-open .show .frames img.side[data-sub="1"] { transform: translateX(-118%) rotate(-3deg); }
.hero-box.log-open .show .frames img.side[data-sub="2"] { transform: translateX(118%) translateY(6%) rotate(3deg); transition-delay: 0.08s; }
/* while the side phones are out, the group eases left and a touch smaller so all three fit */
.show .frames { transition: scale 1.1s cubic-bezier(0.22, 1, 0.36, 1), translate 1.1s cubic-bezier(0.22, 1, 0.36, 1); }

.show .chips { z-index: 4; }
@media (max-width: 640px) { .tile .fcard .big + .row { display: none; } .tile .fcard .big { margin-top: 8px; } }


/* Cards: level, never tilted, and icons stand bare (no tinted boxes) */
.fcard { transform: translateZ(0) !important; }
.fcard .ico, .chip .ico { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; font-size: 20px; color: var(--ink); }
.fcard .hd { gap: 10px; }
.chip { gap: 11px; }
.chip .ico { padding-inline-start: 6px; }
.fcard .items .row span:last-child { font-variant-numeric: tabular-nums; }
.fcard .items .row.muted span { font-size: 13px; color: var(--ink-3); }
.fcard .row.total b:first-child { font-weight: 600; }
@media (max-width: 640px) { .tile .fcard .row + .row.total { display: none; } }

/* the app's light from above, fixed, UNDER the page (as in the app): the page is see-through
   where it is bare, so the light shows there and nowhere else */
/* the camera notch, above everything on the screen: nothing scrolling may ever cover it
   (measured from the app's screenshots: 1206x2622, x 415-790, y 42-151) */
.scroller .screen .notch { position: absolute; z-index: 5; left: 34.41%; width: 31.18%; top: 1.6%; height: 4.2%; border-radius: 999px; background: #000; pointer-events: none; }
.scroller .screen .tint { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: 0 0 / 100% 100% no-repeat; }

/* layering: the screen on show is always on top; the side screens live underneath, so leaving
   Log they slide back under the main phone and only then vanish */
.show .frames img.on:not(.side), .show .frames img[data-sub="0"] { z-index: 2; }
.show .frames img.side { z-index: 1; transition: opacity 0.2s linear 0.4s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

/* every notification the same size: one line of title, one line of text */
.note { height: 76px; box-sizing: border-box; }
.note b, .note p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.notes { height: 96px; }
@media (max-width: 640px) { .tile:not(.cards-top) .notes { height: 96px !important; } }

/* ---------- Phones: one considered layout, not the desktop squeezed ---------- */
@media (max-width: 900px) {
  /* Scrolling phones: the phone pins at the top; under it, one caption at a time in a fixed
     place, changing as the page inside the phone moves. Nothing floats over the screen. */
  .scrollsec .grid { display: block; height: calc(100svh + var(--n, 3) * 55svh); margin-top: 28px; }
  .scrollsec .sticky { position: sticky; top: 72px; z-index: 1; }
  .scrollsec .stagec { height: 56svh; max-height: 560px; }
  .scrollsec .stagec .scroller { height: 94%; }
  /* the phone's box reaches down over the caption's place, so the two stop being pinned at the
     same moment and leave together */
  .scrollsec .sticky { margin-bottom: calc(26svh + 20px); }
  .scrollsec .track { position: sticky; top: calc(72px + min(56svh, 560px) + 20px); z-index: 2; display: grid; height: 26svh; margin-top: calc(-26svh - 20px + 20px); }
  .scrollsec .track .item { grid-area: 1 / 1; min-height: 0; margin: 0; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0;
    opacity: 0; translate: 0 10px; transition: opacity 0.35s, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
  .scrollsec .track .item.on { opacity: 1; translate: 0 0; }
  .scrollsec .track .item h3 { font-size: 22px; }
  .scrollsec .track .item p { margin-top: 8px; font-size: 16px; }
}
@media (max-width: 640px) {
  section.block { padding-top: 84px; }
  .wrap { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  h2 { text-wrap: balance; }
  .lead { text-wrap: pretty; }
  /* tap targets of at least 44px */
  .steps-dots button, .cycle-nav button { min-height: 44px; align-content: end; }
  .ways button { min-height: 40px; }
  .faq summary, .faq button { min-height: 52px; }
  .deep { margin-top: 40px; gap: 28px; }
  .deep .stagec, .trio .stagec { border-radius: 28px; }
  .deep .copy h3 { font-size: 24px; }
  .tile, .tile.moment { border-radius: 24px; }
  .f-hero h1 { text-wrap: balance; }
  .get .panel { padding: 44px 22px 0; }
  .get .art { height: 330px; }
  .get .art .render { width: 96%; left: 2%; }
  .platforms .platform { flex: 0 0 auto; white-space: nowrap; }
  /* one card per photo on a phone: the invite pill makes room for the balance */
  .tile .linkpill { display: none; }
}
@media (max-width: 380px) { .steps-dots button { font-size: 11px; } .fcard { font-size: 13px; } }
button, a { -webkit-tap-highlight-color: transparent; }

/* Switching theme: one calm crossfade of the whole page */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.theme-fade, .theme-fade * { transition: background-color 0.4s, color 0.4s, border-color 0.4s, box-shadow 0.4s !important; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------- Hero on a phone: copy, one button, then the app in a tinted panel ---------- */
@media (max-width: 640px) {
  .hero-copy { padding-top: 36px; }
  .hero-copy h1 { font-size: clamp(36px, 10.4vw, 44px); line-height: 1.04; text-wrap: balance; }
  .hero-copy .lead { margin-top: 16px; font-size: 16px; max-width: 32ch; }
  .hero-copy .ctas { margin-top: 26px; }
  .hero-copy .ctas .btn { flex: 0 0 auto; padding-inline: 32px; }
  /* the panel crops a large phone at its foot: the screen is the picture, not the device */
  .show { height: min(124vw, 500px); margin-top: 32px; border-radius: 28px; overflow: hidden; isolation: isolate;
    background: color-mix(in srgb, var(--c) 24%, var(--bg)); transition: background-color 0.6s; }
  .show .pool { display: none; }
  .show .frames { top: 6%; translate: -50% 0; height: 132%; }
  /* the card sits at the panel's foot (it lives in the frames box: 6% down, 132% tall) */
  .show .chips { top: calc(71.2% - 66px); bottom: auto; left: 50%; right: auto; width: min(calc(100vw - 64px), 340px); height: 64px; translate: -50% 0; z-index: 4; }
  .show .chip { width: 100%; box-sizing: border-box; }
  .steps-dots { padding: 18px 0 8px; }
  .facts ul { padding-top: 24px; }
}

/* touch: the phone follows the finger a little while it is dragged, and the bar pauses */
@media (max-width: 1080px) {
  .show { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
  .show .frames { translate: calc(-50% + var(--drag, 0px)) 0; transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
  .hero-box.held .steps-dots button.on { animation-play-state: paused; }
}
@media (max-width: 1080px) and (min-width: 641px) { .show .frames { translate: calc(-50% + var(--drag, 0px)) -50%; } }
/* the assistant tile: a question and Brick's answer, and a quiet coming-soon badge */
.fcard .ask { margin-top: 12px; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: var(--surface); font-size: 13.5px; color: var(--ink); }
.fcard .ans { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.soon-pill { display: inline-block; vertical-align: 4px; margin-inline-start: 8px; padding: 3px 10px; border-radius: 999px; font: 600 12px/1.4 Riyal, Geist, Almarai, sans-serif; letter-spacing: 0.02em; color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 640px) { .tile .fcard .ask { display: none; } }

/* ---------- Language switch: an icon, and a small menu of the languages ---------- */
.langs { position: relative; }
.langs-panel { position: absolute; top: calc(100% + 10px); right: 0; min-width: 168px; padding: 6px; border-radius: 16px; display: grid; gap: 2px; z-index: 20;
  background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(14, 14, 16, 0.25);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.18s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s; }
.langs.open .langs-panel { opacity: 1; visibility: visible; transform: none; }
.langs-panel a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 15px; color: var(--ink); text-decoration: none; }
.langs-panel a:hover, .langs-panel a:focus-visible { background: var(--surface); outline: none; }
.langs-panel a[aria-current]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.langs-panel a:lang(ar) { font-family: Riyal, Almarai, sans-serif; }
[dir="rtl"] .langs-panel { right: auto; left: 0; }

/* ---------- Arabic: right to left, in Almarai (the app's Arabic face) ---------- */
html[lang="ar"] body { font-family: Riyal, Almarai, Geist, system-ui, sans-serif; line-height: 1.75; }
html[lang="ar"] :is(h1, h2, h3, h4, .logo .word, b, strong) { letter-spacing: 0; }
html[lang="ar"] :is(h1, h2) { font-family: Riyal, Almarai, sans-serif; font-weight: 800; line-height: 1.25; }
html[lang="ar"] h3 { font-family: Riyal, Almarai, sans-serif; font-weight: 800; line-height: 1.4; }
html[lang="ar"] .logo .word { font-family: Riyal, Urbanist, Almarai, sans-serif; letter-spacing: -0.03em; }
html[lang="ar"] .lead, html[lang="ar"] p { line-height: 1.8; }
html[lang="ar"] .money { direction: ltr; unicode-bidi: isolate; }
html[lang="ar"] .soon-pill, html[lang="ar"] .menu-list .soon em { font-family: Riyal, Almarai, sans-serif; letter-spacing: 0; }
/* arrows point the way the text reads */
[dir="rtl"] .ph-arrow-right svg { transform: scaleX(-1); }
[dir="rtl"] .menu-foot .ph, [dir="rtl"] a.more:hover .ph { translate: 0; }
/* things placed from the left in English start from the right */
[dir="rtl"] .steps-dots { left: auto; right: var(--gutter); }
[dir="rtl"] .menu-panel { left: auto; right: -20px; transform-origin: calc(100% - 40px) 0; }
[dir="rtl"] .deep .copy li, [dir="rtl"] .trio li, [dir="rtl"] .promise { text-align: right; }
@media (max-width: 1080px) { [dir="rtl"] .steps-dots { right: auto; } }

/* ---------- Privacy policy: the site's type and colours, a reading column, contents beside it ---------- */
.legal-head { padding: 96px 0 0; }
.legal-head h1 { font-size: clamp(44px, 6vw, 80px); }
.legal-head .lead { margin-top: 16px; color: var(--ink-3); }
.legal { padding: 56px 0 120px; }
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 72px; align-items: start; }
.legal aside { position: sticky; top: 96px; }
.legal-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.legal aside ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.legal aside li { counter-increment: toc; }
.legal aside a { display: grid; grid-template-columns: 26px 1fr; padding: 6px 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); text-decoration: none; }
.legal aside a::before { content: counter(toc); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.legal aside a { position: relative; transition: color 0.2s; }
.legal aside a:hover, .legal aside a.on { color: var(--ink); }
/* the section being read: its entry in full ink, its number too, and a short line beside it */
.legal aside a.on { font-weight: 600; }
.legal aside a.on::before { color: var(--ink); }
.legal aside a::after { content: ""; position: absolute; inset-inline-start: -14px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--ink); opacity: 0; transform: scaleY(0.4); transition: opacity 0.25s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.legal aside a.on::after { opacity: 1; transform: none; }
.legal-body { font-size: 17px; }
.legal-body h2 { font-size: clamp(24px, 2.2vw, 30px); margin: 64px 0 14px; scroll-margin-top: 96px; }
.legal-body h3 { font-size: 19px; margin: 28px 0 8px; }
.legal-body p, .legal-body li { color: var(--ink-2); line-height: 1.7; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body ul { padding-inline-start: 20px; }
.legal-body li + li { margin-top: 6px; }
.legal-body a { color: var(--ink); text-underline-offset: 3px; }
.legal-body .summary { border-radius: 24px; padding: 8px 32px 20px; background: var(--surface); }
.legal-body .summary h2 { margin-top: 24px; }
.legal-body .table { overflow-x: auto; margin: 16px 0; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.legal-body th, .legal-body td { text-align: start; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid var(--line); color: var(--ink-2); line-height: 1.55; }
.legal-body th { color: var(--ink); font-weight: 600; }
[dir="rtl"] .legal-body th, [dir="rtl"] .legal-body td { padding: 14px 0 14px 16px; }
@media (max-width: 960px) {
  .legal-grid { grid-template-columns: 1fr; gap: 40px; }
  .legal aside { position: static; padding: 20px 22px; border-radius: 20px; background: var(--surface); }
  .legal aside ol { columns: 2; column-gap: 24px; display: block; }
}
@media (max-width: 640px) {
  .legal-head { padding-top: 56px; }
  .legal aside ol { columns: 1; }
  .legal-body .summary { padding: 4px 20px 16px; }
}
/* right to left: progress bars fill from the right, and the Log screens open the other way round */
[dir="rtl"] .steps-dots button::after, [dir="rtl"] .cycle-nav button::after, [dir="rtl"] .ways button::after { background-position: 100% 0, 0 0; }
[dir="rtl"] .hero-box.log-open .show .frames img.side[data-sub="1"] { transform: translateX(118%) rotate(3deg); }
[dir="rtl"] .hero-box.log-open .show .frames img.side[data-sub="2"] { transform: translateX(-118%) translateY(6%) rotate(-3deg); }
[dir="rtl"] .show .chips { right: auto; left: 76%; }
[dir="rtl"] .show .chips .chip { right: auto; left: 0; }
@media (max-width: 1080px) { [dir="rtl"] .show .chips { left: 50%; } }
html[lang="ar"] .logo .word { font-family: Riyal, Almarai, sans-serif; font-weight: 800; letter-spacing: 0; }
.langs-panel a:lang(en) { font-family: Riyal, Geist, Almarai, system-ui, sans-serif; }
@media (max-width: 640px) { .f-hero .tile .fcard .hd small { display: none; } .f-hero .tile .fcard { padding: 10px 14px; } }
.legal-grid > * { min-width: 0; }
/* the preview photos are clipped by the panel's own shape, so a scaling photo never shows past its corners */
.menu-preview { clip-path: inset(0 round 14px); }
.menu-preview .pv, .menu-preview img.photo { border-radius: 14px; }
.menu-preview img.photo { left: 0; top: 0; width: 100%; height: 100%; }
/* right to left: the first of two phones stands on the right, as the eye starts there */
[dir="rtl"] .stagec .pair img.a { left: auto; right: -2%; }
[dir="rtl"] .stagec .pair img.b { right: auto; left: -2%; }


/* ---------- Scrolling without blinks (Safari and Chrome) ----------
   A frosted card inside something fading in has nothing behind it to blur until the fade ends, so
   it blinks when the fade finishes. Photos that carry cards slide in without fading, and every
   frosted layer, the top bar included, keeps its own steady layer. The look is unchanged. */
.reveal:has(.fcard, .note, .linkpill, .chip) { opacity: 1; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.settled { transition: none; transform: none; will-change: auto; }


/* ---------- The menu on narrow screens: a button in the bar drops a curtain over the whole page;
   the features rise into place in the site's display type, one line after another, and the
   ways out (the two stores, Privacy, FAQ) wait at the foot. ---------- */
.burger { display: none; }
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1) 0.12s, visibility 0s 0.67s; }
.sheet.open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s; }
html.sheet-open { overflow: hidden; }
.sheet:focus { outline: none; }
.sheet-top { flex: none; height: 68px; display: flex; align-items: center; justify-content: space-between; }
.sheet-close .ph { rotate: -90deg; transition: rotate 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.sheet.open .sheet-close .ph { rotate: 0deg; }
/* one centred column; inside it the rows read from the start, like the rest of the site */
.sheet-main { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; justify-content: safe center; padding: 8px 24px 16px; }
.sheet-feats { list-style: none; margin: 0; padding: 0; width: min(440px, 100%); }
.sheet-feats li { position: relative; }
/* hairlines between the rows, drawn in from the start as the rows arrive */
.sheet-feats li + li::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--line); transform-origin: 0 0; scale: 0 1; transition: scale 0.2s; }
[dir="rtl"] .sheet-feats li + li::before { transform-origin: 100% 0; }
.sheet.open .sheet-feats li + li::before { scale: 1 1; transition: scale 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(0.3s + var(--i) * 55ms); }
.sheet-row-link { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: center; padding: 15px 2px; color: var(--ink); text-decoration: none;
  opacity: 0; translate: 0 16px; transition: opacity 0.2s, translate 0.25s; }
.sheet.open .sheet-row-link { opacity: 1; translate: 0 0; transition: opacity 0.6s calc(0.26s + var(--i) * 55ms), translate 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(0.26s + var(--i) * 55ms); }
.sheet-row-link .nm { grid-column: 1; font: 800 clamp(24px, 7vw, 30px) / 1.15 Riyal, Urbanist, Geist, Almarai, sans-serif; letter-spacing: -0.03em; }
.sheet-row-link small { grid-column: 1; margin-top: 3px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.sheet-row-link .ph { grid-column: 2; grid-row: 1 / 3; font-size: 20px; color: var(--ink-3); transition: translate 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s; }
/* the page you are on: a short line in its colour under the name, like the kicker on each page */
.sheet-row-link[aria-current] .nm { justify-self: start; padding-bottom: 7px; margin-bottom: 4px; background: linear-gradient(var(--c), var(--c)) 0 100% / 32px 3px no-repeat; }
[dir="rtl"] .sheet-row-link[aria-current] .nm { background-position: 100% 100%; }
.sheet-row-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 12px; }
.sheet-row-link:active .ph { translate: 4px 0; color: var(--ink); }
[dir="rtl"] .sheet-row-link:active .ph { translate: -4px 0; }
@media (hover: hover) {
  .sheet-feats:hover .sheet-row-link:not(.soon) .nm { color: var(--ink-3); transition: color 0.25s; }
  .sheet-feats:hover .sheet-row-link:not(.soon):hover .nm { color: var(--ink); }
  .sheet-row-link:hover .ph { translate: 4px 0; color: var(--ink); }
  [dir="rtl"] .sheet-row-link:hover .ph { translate: -4px 0; }
}
/* the assistant is on its way: the same row, quieter, and no way in yet */
.sheet-row-link.soon .nm { color: var(--ink-3); }
.sheet-row-link.soon em { grid-column: 2; grid-row: 1 / 3; white-space: nowrap; font: 600 11px/1.4 Riyal, Geist, Almarai, sans-serif; font-style: normal; letter-spacing: 0.02em; color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: 3px 9px; }
.sheet-foot { flex: none; display: grid; justify-items: center; gap: 16px; padding-top: 8px; max-width: 488px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.sheet-foot .sheet-stores { width: 100%; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-foot .sheet-stores .platform { justify-content: center; height: 56px; padding: 0 14px; white-space: nowrap; }
@media (max-width: 359px) { .sheet-foot .sheet-stores { grid-template-columns: 1fr; } }
.sheet-links { display: flex; gap: 24px; white-space: nowrap; }
.sheet-links a { font-size: 16px; color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
.sheet-links a:hover { color: var(--ink); }
/* the quieter parts fade up just behind the names */
.sheet-foot { opacity: 0; translate: 0 14px; transition: opacity 0.2s, translate 0.25s; }
.sheet.open .sheet-foot { opacity: 1; translate: 0 0; transition: opacity 0.6s calc(0.32s + var(--i) * 60ms), translate 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(0.32s + var(--i) * 60ms); }
html[lang="ar"] .sheet-row-link .nm { font-family: Riyal, Almarai, sans-serif; letter-spacing: 0; line-height: 1.45; font-size: clamp(22px, 6.4vw, 27px); }
html[lang="ar"] .sheet-row-link.soon em { font-family: Riyal, Almarai, sans-serif; letter-spacing: 0; }
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .burger { display: grid; }
}
@media (min-width: 1081px) { .sheet { display: none; } }
@media (max-height: 700px) { .sheet-row-link small { display: none; } .sheet-row-link { padding: 11px 2px; } }
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.open { clip-path: none; transition: opacity 0.2s, visibility 0s 0.2s; opacity: 0; }
  .sheet.open { opacity: 1; transition: opacity 0.2s, visibility 0s; }
  .sheet :is(.sheet-row-link, .sheet-foot), .sheet .sheet-feats li::before { translate: none; scale: none; opacity: 1; transition: none; }
}

/* ---------- Hero on a tablet: the phone's design, larger. The app in a tinted panel, the phone
   cropped at its foot, the card resting on that foot, the steps just below. ---------- */
@media (min-width: 641px) and (max-width: 1080px) {
  .show { width: min(100%, 760px); height: min(72vw, 600px); margin: 40px auto 0; border-radius: 36px; overflow: hidden; isolation: isolate;
    background: color-mix(in srgb, var(--c) 24%, var(--bg)); transition: background-color 0.6s; }
  .show .pool { display: none; }
  /* the frames box starts 6% down and is 150% of the panel tall, so the panel's foot is at 62.7% of it */
  .show .frames { top: 6%; height: 150%; translate: calc(-50% + var(--drag, 0px)) 0; }
  .show .chips { top: calc(62.7% - 72px - 28px); bottom: auto; left: 50%; right: auto; width: 400px; height: 72px; translate: -50% 0; z-index: 4; }
  .show .chips .chip { left: 0; right: auto; width: 100%; box-sizing: border-box; padding: 12px 22px 12px 14px; font-size: 16px; }
  .show .chip small { font-size: 14px; }
  .steps-dots { padding: 24px 0 8px; }
}

/* Photo cards on a tablet: the desktop places each at a share of the photo's width, which leaves a
   card with rows too narrow to read once the photo is the width of the screen. A floor keeps them
   whole. (On a phone every card spans the photo, side to side, the same way.) */
@media (min-width: 641px) and (max-width: 1080px) {
  .tile .fcard { min-width: min(300px, calc(100% - 28px)); }
  .tile .fcard:has(.items, .rows, .row + .row) { min-width: min(330px, calc(100% - 28px)); }
  /* a wide, short photo has no room for the rows above the faces: the total says it, as on a phone */
  .tile.moment .fcard .items { display: none; }
  .tile.moment .fcard .total { margin-top: 8px; }
}

/* A link to a section (Privacy, FAQ) lands with the section's own content just under the bar, not
   with its top padding, and the end of the section before, in view: the margin takes back the
   padding (150px, 84px on a phone) less a calm gap below the 68px bar. */
section.block[id] { scroll-margin-top: calc(68px + 56px - 80px - 150px); }
@media (max-width: 640px) { section.block[id] { scroll-margin-top: calc(68px + 36px - 80px - 84px); } }

/* ---------- Frost that cannot blink ----------
   A live backdrop-filter makes the browser read back and blur whatever is behind an element on
   every frame it scrolls. On a busy GPU (many tabs, Arc's translucent window) Chromium can drop that
   layer for a frame, and the card or the bar blinks out. So:
   - a card on a photo carries its own blurred copy of the part of the photo under it (.frost, laid
     out by site.js), and its live blur is switched off: the same look, nothing read back;
   - the top bar still has to blur the page live, but the blur sits on a layer behind its content,
     so if that layer is ever late the logo and links stay where they are. */
.frosted { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; isolation: isolate; }
.frost { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.frost::before { content: ""; position: absolute; inset: -40px; background: var(--fi) var(--fp) / var(--fs) no-repeat; filter: blur(20px) saturate(1.5); }
.frost::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--face); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .frost::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); } }
:root[data-theme="dark"] .frost::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(20px); backdrop-filter: saturate(1.5) blur(20px); }

/* During the theme fade the bar is plain page content (see the theme switch in site.js). */
.nav.pinned { position: relative; } /* keeps its place in the page, so nothing under it moves */

/* Hero cards: a line that does not fit wraps to a second line instead of running past the card
   (the Arabic lines are longer), the amount keeps its line, and on a phone or tablet the card
   stands on the panel's foot, so a taller card grows upwards rather than being cut off. */
.show .chip { white-space: normal; }
.show .chip > span:not(.who):not(.ico):not(.money) { flex: 1 1 auto; min-width: 0; text-wrap: balance; }
.show .chip > .money { flex: none; white-space: nowrap; }
@media (max-width: 1080px) { .show .chips .chip { top: auto; bottom: 0; } }
/* the smallest phones: a wider card, tighter spacing, the title on one line, the line under it in two at most */
@media (max-width: 380px) {
  .show .chips { width: calc(100vw - 56px); }
  .show .chips .chip { gap: 9px; padding: 9px 12px 9px 9px; font-size: 14px; }
  .show .chip .who { width: 32px; height: 26px; }
  .show .chip small { font-size: 12px; }
  .show .chip > .money { font-size: 15px; padding-inline-start: 8px; }
  .show .chip > span:not(.who):not(.ico):not(.money) { white-space: nowrap; }
  .show .chip > span:not(.who):not(.ico):not(.money) small { white-space: normal; }
}