@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/BricolageGrotesque-variable-latin.woff2) format("woff2");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:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/SchibstedGrotesk-variable-latin.woff2) format("woff2");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:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/DMMono-500-latin.woff2) format("woff2");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}
/* damga.qa, the landing. `Damga Landing.dc.html`, built exactly.
 *
 * Source: 66,186 bytes, SHA-256
 * e7aad914728f997921bc5fd1390490db92618b4065db020442ebf4b883364731.
 *
 * EVERY DECLARATION HERE IS AN INLINE STYLE FROM THAT FILE, MOVED. The CSP is
 * `style-src 'self'`, so a style attribute would be refused; the values are not
 * restyled on the way. Where this file departs from the artboard, it says so
 * where it does, with the ruling. There are four:
 *   1. prefers-reduced-motion stops all five animations (ruled 2026-09-17, the
 *      one addition to the design).
 *   2. Buttons inherit the page font. The artboard's two audience cards are
 *      <button>s that set no font, so their text rendered in Arial.
 *   3. The photo placeholders take the light ink of their label. The artboard's
 *      slot inherited the page's dark ink onto a dark card.
 *   4. The register form's consent tick (see build.mjs).
 */

/* ---- the artboard's <helmet>, and what it inherited from the bundle -------- */
:root {
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, monospace;
  --font-display: "Bricolage Grotesque", "Schibsted Grotesk", sans-serif;
  --tracking-label: .09em;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --accent-from: #5eead4;
  --accent-to: #38bdf8;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #07242b;
  color: #16181d;
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.6;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-optical-sizing: auto; }
a { color: #0e7490; text-decoration: none; }
a:hover { color: #0e6f7a; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #c4271b; outline-offset: 2px; }
/* Departure 2. */
button { font-family: inherit; }
[hidden] { display: none !important; }

@keyframes dgRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes dgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dgGlow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.08); } }
@keyframes dgSweep { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

/* the capsule must never wrap to a second row -- shed content instead */
@media (max-width: 1180px) { [data-nav-links] a:nth-child(n+4) { display: none; } }
@media (max-width: 980px) { [data-nav-links] { display: none; } }
@media (max-width: 760px) { [data-nav-demo] { display: none; } }

/* ---- shared pieces ---------------------------------------------------------- */
.dg { background: #f1f8f9; color: #08282f; min-height: 100%; overflow-x: clip; }

.col { max-width: 1160px; margin: 0 auto; }
.col-wide { position: relative; max-width: 1280px; margin: 0 auto; }

.glass-18 { backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }

/* The two card recipes. Every two-card grid alternates them. */
.rc-light {
  --c-border: 1px solid rgba(13,148,136,.18);
  --c-bg: rgba(255,255,255,.62);
  --c-shadow: 0 30px 64px -44px rgba(8,40,47,.45), inset 0 1px 0 rgba(255,255,255,.88);
  --c-ink: #08282f;
  --c-dim: #3a5c66;
  --c-rule: rgba(13,148,136,.14);
  --c-tag-bg: rgba(13,148,136,.12);
  --c-tag-ink: #0e7490;
}
.rc-deep {
  --c-border: 1px solid rgba(14,116,144,.34);
  --c-bg: linear-gradient(150deg,#115a68,#0f6377 62%,#062a30);
  --c-shadow: 0 34px 70px -34px rgba(6,34,40,.7);
  --c-ink: #f4fbfb;
  --c-dim: rgba(214,240,238,.86);
  --c-rule: rgba(210,245,242,.26);
  --c-tag-bg: rgba(240,251,250,.16);
  --c-tag-ink: #f2fbfa;
}

/* The mark: a notched square, the notch is the brand. */
.mark { position: relative; display: block; flex: none; overflow: hidden; background: linear-gradient(135deg,var(--accent-from),var(--accent-to)); }
.mark > span { position: absolute; display: block; }
.mark-36 { width: 36px; height: 36px; border-radius: 10px 10px 10px 2px; }
.mark-36 > .bowl { left: 9px; top: 9px; width: 12px; height: 19px; border-radius: 0 999px 999px 0; background: var(--nav-knock,#07242b); }
.mark-36 > .stem { left: 6px; top: 9px; width: 3px; height: 19px; background: var(--nav-knock,#07242b); }
.mark-44 { width: 44px; height: 44px; border-radius: 12px 12px 12px 2px; }
.mark-44 > .bowl { left: 11px; top: 11px; width: 15px; height: 23px; border-radius: 0 999px 999px 0; }
.mark-44 > .stem { left: 7px; top: 11px; width: 4px; height: 23px; }
.mark-card > span { background: #0d3c44; }
.mark-foot > span { background: #07242b; }

/* Light sections. */
.sec-light { background: #f1f8f9; padding: clamp(64px,7vw,116px) 32px; }
/* CONTRAST (ruled 2026-09-17: the gate blocks at zero). Every ink changed for that
   ruling is marked with what it measured before, against the rendered composite. */
/* Was #0e7490: 4.46 on #dashboard's gradient top. */
.eb-light { font: 600 13px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #0c6d88; margin: 0 0 20px; }
.h2-light { font-size: clamp(40px,5.4vw,80px); line-height: 1; letter-spacing: -.04em; font-weight: 600; margin: 0 0 20px; color: #08282f; }
.h2-light.m20 { max-width: 20ch; text-wrap: balance; }
.h2-light.m22 { max-width: 22ch; text-wrap: balance; }
.lead-light { font-size: clamp(18px,1.5vw,23px); line-height: 1.5; color: #3a5c66; margin: 0 0 48px; }
.w44 { max-width: 44ch; }
.w46 { max-width: 46ch; }

/* The glass card used by #how, the wallet and #dashboard. */
.glass-card {
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.72);
}

/* ---- the nav ------------------------------------------------------------------- */
.nav-wrap { position: sticky; top: 0; z-index: 60; padding: 16px clamp(14px,1.6vw,26px) 8px; pointer-events: none; }
.nav {
  pointer-events: auto; position: relative; max-width: 1400px; margin: 0 auto;
  border-radius: 999px; border: 1px solid var(--nav-edge,rgba(240,251,250,.32));
  background: var(--nav-bg,rgba(6,32,39,.74));
  backdrop-filter: blur(30px) saturate(175%); -webkit-backdrop-filter: blur(30px) saturate(175%);
  box-shadow: inset 0 1px 0 var(--nav-lip,rgba(240,251,250,.24)), 0 22px 50px -26px rgba(3,26,31,.55);
  transition: background 260ms var(--ease-out,ease), border-color 260ms var(--ease-out,ease);
  padding: 11px 12px 11px clamp(14px,1.4vw,22px);
  display: flex; align-items: center; gap: clamp(12px,1.4vw,26px); flex-wrap: nowrap; min-width: 0;
}
.nav-home { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; cursor: pointer; flex: none; }
.nav-word { font: 600 24px/1 var(--font-display); letter-spacing: -.03em; color: var(--nav-ink,#f4fbfb); }
.nav-links { display: flex; align-items: center; gap: clamp(13px,1.3vw,24px); flex-wrap: nowrap; min-width: 0; overflow: hidden; }
/* 44px to press, the height of the glass they sit in (review 2026-09-18). */
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1 var(--font-sans); white-space: nowrap; cursor: pointer; color: var(--nav-ink-soft,rgba(238,251,250,.96)); }
.nav-links a:hover { color: var(--nav-ink,#f4fbfb); }
.nav-actions { display: flex; align-items: center; gap: clamp(8px,.9vw,16px); margin-left: auto; flex-wrap: nowrap; flex: none; }
.nav-demo {
  font: 600 15px/1 var(--font-sans); white-space: nowrap; color: var(--nav-ink,#f4fbfb);
  background: var(--nav-ghost-bg,rgba(240,251,250,.12)); border: 1px solid var(--nav-ghost-edge,rgba(240,251,250,.36));
  cursor: pointer; padding: 13px 20px; border-radius: 999px; transition: background 200ms var(--ease-out,ease);
}
.nav-demo:hover { background: var(--nav-ghost-hover,rgba(240,251,250,.2)); }
.nav-signin { font: 600 15px/1 var(--font-sans); white-space: nowrap; color: var(--nav-ink,#f4fbfb); background: none; border: 0; cursor: pointer; padding: 13px 6px; }
.nav-register {
  font: 600 15px/1 var(--font-sans); white-space: nowrap; color: #04282e;
  background: linear-gradient(135deg,var(--accent-from),var(--accent-to)); border: 0; cursor: pointer;
  padding: 14px 22px; border-radius: 999px; box-shadow: 0 14px 30px -12px rgba(13,148,136,.75);
}
.nav-track {
  position: absolute; left: clamp(16px,1.6vw,26px); right: clamp(16px,1.6vw,26px); bottom: 5px; height: 2px;
  border-radius: 999px; background: var(--nav-track,rgba(240,251,250,.12)); overflow: hidden;
}
.nav-progress { height: 2px; width: 0%; border-radius: 999px; background: linear-gradient(90deg,var(--accent-from),var(--accent-to)); transition: width 90ms linear; }

/* ---- the hero ------------------------------------------------------------------- */
.lp-hero { position: relative; background: linear-gradient(170deg,#0d3f49 0%,#11525e 24%,#0e5e72 56%,#0b3f52 80%,#062730 100%); overflow: hidden; }
.hero-bloom-a {
  position: absolute; top: -180px; left: 52%; width: 900px; height: 900px; border-radius: 999px;
  background: radial-gradient(circle,rgba(79,209,197,.42),rgba(14,116,144,.16) 46%,transparent 70%);
  animation: dgGlow 9s ease-in-out infinite; pointer-events: none;
}
.hero-bloom-b { position: absolute; bottom: -260px; left: -180px; width: 720px; height: 720px; border-radius: 999px; background: radial-gradient(circle,rgba(45,212,191,.3),transparent 66%); pointer-events: none; }
.hero-grid {
  position: relative; max-width: 1280px; margin: 0 auto;
  padding: calc(var(--nav-h,100px) + clamp(28px,4vw,90px)) 32px clamp(56px,6vw,96px);
  display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: clamp(32px,5vw,72px); align-items: center;
}
.hero-eyebrow { font: 600 13px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #cbf3f0; margin: 0 0 26px; animation: dgFade 900ms ease-out both; }
/* On a phone or beside the card at 820 the eyebrow is two lines whatever is done to it; two EVEN lines,
   "Loyalty infrastructure / for Qatari merchants", not one and a straggler
   (review finding 39). */
@media (max-width: 900px) { .hero-eyebrow { line-height: 1.5; letter-spacing: .1em; text-wrap: balance; } }
.lp-hero h1 { font-size: clamp(46px,7vw,110px); line-height: .94; letter-spacing: -.045em; font-weight: 600; margin: 0 0 28px; color: #f4fbfb; text-wrap: balance; animation: dgRise 1000ms cubic-bezier(.22,1,.36,1) both; }
.sweep {
  background: linear-gradient(100deg,#5eead4,#38bdf8 46%,#bfe9ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  background-size: 200% 100%; animation: dgSweep 9s linear infinite;
}
.hero-sub { font-size: clamp(18px,1.6vw,24px); line-height: 1.5; color: rgba(238,251,250,.96); margin: 0 0 40px; max-width: 36ch; animation: dgRise 1100ms 120ms cubic-bezier(.22,1,.36,1) both; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 48px; animation: dgRise 1200ms 220ms cubic-bezier(.22,1,.36,1) both; }
.btn-hero-primary { font: 600 17px/1 var(--font-sans); color: #04282e; background: linear-gradient(135deg,var(--accent-from),var(--accent-to)); border: 0; cursor: pointer; padding: 20px 34px; border-radius: 18px; box-shadow: 0 22px 44px -16px rgba(79,209,197,.8); }
.btn-hero-ghost { font: 600 17px/1 var(--font-sans); color: #f2fbfa; background: rgba(127,216,212,.12); border: 1px solid rgba(127,216,212,.4); cursor: pointer; padding: 20px 32px; border-radius: 18px; }
.pills { display: flex; flex-wrap: wrap; gap: 14px; }
.pill {
  display: flex; align-items: baseline; gap: 9px; padding: 13px 20px; border-radius: 999px;
  /* Was .12 fill: over the hero's bloom the pills measured 4.21-4.31 in Chrome. */
  border: 1px solid rgba(127,216,212,.34); background: rgba(127,216,212,.06);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(240,251,250,.16);
}
.pill-v { font: 600 19px/1 var(--font-mono); color: #f4fbfb; }
.pill-k { font: 500 13px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #f4fbfb; }
.hero-card-wrap { animation: dgRise 1200ms 320ms cubic-bezier(.22,1,.36,1) both; }
.hero-card {
  padding: clamp(24px,2.4vw,34px); border-radius: 32px;
  background: linear-gradient(150deg,rgba(79,209,197,.26),rgba(14,116,144,.14) 58%,rgba(5,32,38,.62));
  border: 1px solid rgba(127,216,212,.36);
  box-shadow: 0 48px 90px -34px rgba(3,26,31,.9), inset 0 1px 0 rgba(240,251,250,.26);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.hc-head { display: flex; align-items: center; gap: 13px; margin: 0 0 26px; }
.hc-head > div { min-width: 0; }
.hc-recorded { font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #cbf3f0; margin: 0 0 6px; }
.hc-shop { font: 600 21px/1 var(--font-sans); letter-spacing: -.02em; color: #f4fbfb; margin: 0; }
.hc-title { font-size: clamp(28px,2.6vw,40px); line-height: 1.1; letter-spacing: -.03em; font-weight: 600; color: #f4fbfb; margin: 0 0 22px; text-wrap: balance; }
.hc-pips { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; }
.pip { width: 34px; height: 34px; border-radius: 999px; display: block; }
.pip-on { background: linear-gradient(135deg,#5eead4,#38bdf8); border: 0; }
.pip-off { background: rgba(127,216,212,.1); border: 1px solid rgba(127,216,212,.34); }
.hc-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid rgba(127,216,212,.24); }
.hc-left { font: 500 15px/1.4 var(--font-sans); color: rgba(238,251,250,.96); margin: 0; }
.hc-place { font: 600 13px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #d2f5f2; margin: 0; }

/* ---- where we actually are ---------------------------------------------------------- */
.sec-here { background: #f1f8f9; padding: clamp(40px,4vw,64px) 32px 0; }
.here {
  border: 1px solid rgba(13,148,136,.3); border-left: 3px solid #0e7490; background: rgba(255,255,255,.66);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 22px; padding: clamp(24px,2.4vw,34px);
  display: flex; gap: clamp(20px,2.4vw,34px); flex-wrap: wrap; align-items: center;
}
.here-k { font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #08414f; margin: 0; white-space: nowrap; }
.here-b { font-size: clamp(17px,1.5vw,21px); line-height: 1.5; color: #08282f; margin: 0; flex: 1 1 380px; text-wrap: pretty; }

/* ---- #path ----------------------------------------------------------------------- */
.path-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 22px; }
.path-card {
  text-align: left; cursor: pointer; border: var(--c-border); background: var(--c-bg); box-shadow: var(--c-shadow);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding: clamp(28px,2.6vw,42px); border-radius: 30px; display: grid; gap: 18px;
}
.path-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.tag { font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; background: var(--c-tag-bg); color: var(--c-tag-ink); }
.path-mark { font: 600 26px/1 var(--font-display); color: var(--c-ink); }
.path-card h3 { font-size: clamp(26px,2.4vw,38px); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; margin: 0; color: var(--c-ink); }
.path-card p { font-size: 18px; line-height: 1.55; color: var(--c-dim); margin: 0; }

/* ---- #how ------------------------------------------------------------------------ */
.sec-how { background: linear-gradient(180deg,#f1f8f9,#dcecee); }
.lead-light.m56 { margin-bottom: 56px; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 26px; }
.how-card { border-radius: 28px; padding: clamp(26px,2.4vw,38px); box-shadow: 0 28px 60px -40px rgba(8,40,47,.4); }
/* Was var(--accent-from) to var(--accent-to): 1.40 on light glass, failing even the
   3:1 large-text threshold. Ruled: keep the gradient, move its stops into the
   --teal-450 / --teal-500 range of the design system's tokens (5.08 and 7.12). */
.how-n {
  font: 600 clamp(64px,6.5vw,104px)/.85 var(--font-mono); margin: 0 0 22px;
  background: linear-gradient(135deg,#0e7490,#0b5c74);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.how-card h3 { font-size: clamp(23px,1.9vw,30px); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; margin: 0 0 14px; color: #08282f; }
.how-card p.b { font-size: 18px; line-height: 1.6; color: #3a5c66; margin: 0; }

/* ---- #programmes ------------------------------------------------------------------ */
.prog-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 22px; }
.prog-card {
  border: var(--c-border); background: var(--c-bg); border-radius: 30px; padding: clamp(28px,2.6vw,40px);
  display: grid; gap: 20px; align-content: start; box-shadow: var(--c-shadow);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.prog-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.prog-card h3 { font-size: clamp(26px,2.3vw,36px); letter-spacing: -.03em; font-weight: 600; margin: 0; color: var(--c-ink); }
.prog-card .tag { letter-spacing: .09em; white-space: nowrap; }
.prog-body { font-size: 18px; line-height: 1.6; color: var(--c-dim); margin: 0; }
.rows { display: grid; gap: 12px; }
.row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--c-rule); }
.row-k { font: 500 16px/1.4 var(--font-sans); color: var(--c-dim); }
.row-v { font: 600 16px/1.4 var(--font-mono); color: var(--c-ink); text-align: right; }
.unsure {
  margin: 26px 0 0; padding: clamp(24px,2.2vw,34px); border-radius: 26px; border: 1px solid rgba(255,138,107,.4);
  background: linear-gradient(120deg,rgba(255,138,107,.14),rgba(245,194,107,.1));
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
}
.unsure-k { font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #a53c1c; white-space: nowrap; }
.unsure-b { font-size: 18px; line-height: 1.6; color: #1d4a54; margin: 0; flex: 1 1 300px; }

/* ---- the wallet ------------------------------------------------------------------- */
.wallet-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 22px; }
.wallet-card { border-radius: 26px; padding: clamp(24px,2.2vw,34px); box-shadow: 0 28px 60px -40px rgba(8,40,47,.4); }
.card-eb { font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #0e7490; margin: 0 0 16px; }
.wallet-card h3 { font-size: clamp(22px,1.8vw,28px); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; margin: 0 0 12px; color: #08282f; }
.card-b { font-size: 17px; line-height: 1.6; color: #3a5c66; margin: 0; }

/* ---- #advisor ---------------------------------------------------------------------- */
.advisor { position: relative; background: linear-gradient(168deg,#0e444f 0%,#115a68 22%,#0f6377 54%,#0b3f52 78%,#062730 100%); overflow: hidden; }
.adv-bloom-a { position: absolute; top: -140px; right: -120px; width: 700px; height: 700px; border-radius: 999px; background: radial-gradient(circle,rgba(79,209,197,.32),transparent 68%); pointer-events: none; }
.adv-bloom-b { position: absolute; top: 0; left: 0; width: 380px; height: 320px; background: radial-gradient(circle at 0% 0%,rgba(12,74,110,.5),transparent 72%); pointer-events: none; }
.adv-grid { padding: clamp(64px,7vw,120px) 32px; display: grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap: clamp(36px,5vw,72px); align-items: center; }
.eb-dark { font: 600 13px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #cbf3f0; margin: 0 0 22px; }
.h2-dark { font-size: clamp(40px,5.2vw,78px); line-height: .98; letter-spacing: -.042em; font-weight: 600; margin: 0 0 24px; color: #f4fbfb; text-wrap: balance; }
.adv-lead { font-size: clamp(18px,1.55vw,24px); line-height: 1.5; color: rgba(238,251,250,.96); margin: 0 0 40px; max-width: 40ch; }
.adv-steps { display: grid; gap: 20px; margin: 0 0 40px; max-width: 52ch; }
.adv-step { display: flex; gap: 18px; align-items: flex-start; }
.adv-n {
  flex: none; width: 40px; height: 40px; border-radius: 999px;
  /* Was .34/.24 fill with #c2efec ink: 3.48-3.75. */
  background: linear-gradient(135deg,rgba(79,209,197,.16),rgba(56,189,248,.1)); border: 1px solid rgba(210,245,242,.4);
  display: flex; align-items: center; justify-content: center; font: 600 16px/1 var(--font-mono); color: #f4fbfb;
}
.adv-step p { font-size: 18px; line-height: 1.55; color: rgba(238,251,250,.96); margin: 0; }
.adv-step strong { font-weight: 600; color: #f4fbfb; }
.adv-note { font: 500 15px/1.6 var(--font-mono); color: rgba(210,245,242,.84); margin: 0; max-width: 58ch; }
.adv-panel {
  padding: clamp(24px,2.4vw,34px); border-radius: 32px;
  background: linear-gradient(150deg,rgba(79,209,197,.24),rgba(14,116,144,.14) 56%,rgba(5,32,38,.66));
  border: 1px solid rgba(127,216,212,.34);
  box-shadow: 0 48px 90px -34px rgba(3,26,31,.9), inset 0 1px 0 rgba(240,251,250,.26);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.conf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
/* Was #cbf3f0: 4.45. */
.conf-k { font: 600 12px/1 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; color: #eefbf9; margin: 0; }
.conf-v { font: 600 clamp(32px,3vw,46px)/1 var(--font-mono); color: #f4fbfb; }
.conf-bar { height: 8px; border-radius: 999px; background: rgba(5,32,38,.5); overflow: hidden; margin: 0 0 26px; }
.conf-fill { width: 80%; height: 8px; background: linear-gradient(90deg,var(--accent-from),var(--accent-to)); }
.checks { display: grid; gap: 15px; margin: 0 0 26px; }
.check { display: flex; align-items: center; gap: 14px; }
.check-dot { flex: none; width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font: 600 13px/1 var(--font-sans); }
.dot-done { background: linear-gradient(135deg,#5eead4,#38bdf8); border: 0; color: #0d3c44; }
/* Was .14 fill with #d2f5f2 ink: 4.07-4.12. */
.dot-pending { background: rgba(127,216,212,.07); border: 1px solid rgba(127,216,212,.36); color: #f4fbfb; }
.check-k { font: 500 17px/1.3 var(--font-sans); color: #eaf9f8; flex: 1; }
.check-v { font: 500 14px/1.3 var(--font-mono); color: rgba(232,249,248,.96); text-align: right; }
.rec { padding: clamp(18px,1.8vw,24px); border-radius: 22px; background: rgba(5,32,38,.52); border: 1px solid rgba(127,216,212,.26); }
.rec-k { font: 600 11px/1 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; color: #38bdf8; margin: 0 0 14px; }
.rec-b { font-size: 18px; line-height: 1.55; color: #f0fbfa; margin: 0 0 16px; }
.rec-d { font: 500 15px/1.6 var(--font-mono); color: rgba(184,226,224,.88); margin: 0; }

/* ---- #proof ------------------------------------------------------------------------ */
.h2-light.mb48 { margin-bottom: 48px; }
.proof { border: 1px solid rgba(13,148,136,.2); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 34px 70px -44px rgba(8,40,47,.45); }
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(13,148,136,.16); }
.proof-head-old { padding: 22px clamp(20px,2vw,30px); background: #e6f1f2; }
.proof-head-new { padding: 22px clamp(20px,2vw,30px); background: linear-gradient(120deg,rgba(13,148,136,.14),rgba(14,116,144,.12)); }
.proof-head-old p, .proof-head-new p { font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.proof-head-old p { color: #4d6b74; }
.proof-head-new p { color: #08414f; }
.proof-old { padding: clamp(20px,2vw,28px); background: #fff; }
.proof-new { padding: clamp(20px,2vw,28px); background: #f8fcfc; }
.proof-old p, .proof-new p { font-size: 18px; line-height: 1.55; margin: 0; }
.proof-old p { color: #4d6b74; }
.proof-new p { color: #08282f; }

/* ---- #numbers ---------------------------------------------------------------------- */
.numbers { position: relative; background: linear-gradient(172deg,#0d3f49 0%,#115a68 30%,#0f6377 62%,#062a30 88%,#052128 100%); overflow: hidden; }
.num-bloom { position: absolute; bottom: -200px; right: -140px; width: 640px; height: 640px; border-radius: 999px; background: radial-gradient(circle,rgba(45,212,191,.28),transparent 68%); pointer-events: none; }
.num-inner { padding: clamp(64px,7vw,120px) 32px; }
.h2-dark.num-h { margin: 0 0 16px; max-width: 22ch; }
.num-label { font: 500 13px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(210,245,242,.94); margin: 0 0 56px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 22px; margin: 0 0 40px; }
.stat {
  padding: clamp(24px,2.4vw,36px); border-radius: 28px; border: 1px solid rgba(127,216,212,.3);
  background: linear-gradient(150deg,rgba(79,209,197,.16),rgba(5,32,38,.4));
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(240,251,250,.18);
}
.stat-v { font: 600 clamp(46px,5vw,84px)/.9 var(--font-mono); color: #f4fbfb; margin: 0 0 16px; letter-spacing: -.02em; }
.stat-k { font: 600 12px/1.4 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: #d2f5f2; margin: 0 0 10px; }
.stat-b { font-size: 16px; line-height: 1.55; color: rgba(234,249,248,.94); margin: 0; }
.photos { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 20px; }
.photo { border-radius: 26px; overflow: hidden; border: 1px solid rgba(127,216,212,.26); background: rgba(5,32,38,.4); }
/* A photograph in the artboard's slot. The empty slot, with its brief as a caption,
   no longer renders (2026-09-21): the row appears when the photographs exist. */
.slot { display: block; width: 100%; height: 220px; }
.slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-k { font: 600 12px/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: #d2f5f2; margin: 0; padding: 18px 20px; }

/* ---- #dashboard --------------------------------------------------------------------- */
.sec-dash { background: linear-gradient(180deg,#dcecee,#f1f8f9); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px; }
.dash-card { border-radius: 24px; padding: clamp(22px,2vw,30px); box-shadow: 0 24px 54px -40px rgba(8,40,47,.4); }
.dash-card .card-eb { margin: 0 0 14px; }
.dash-card h3 { font-size: clamp(21px,1.7vw,27px); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; margin: 0 0 12px; color: #08282f; }

/* ---- #pricing ------------------------------------------------------------------------ */
.lead-light.mb32 { margin-bottom: 32px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit,minmax(330px,1fr)); gap: 20px; margin-top: 48px; }
.plan {
  border: var(--c-border); background: var(--c-bg); border-radius: 30px; padding: clamp(28px,2.6vw,40px);
  display: grid; gap: 20px; align-content: start; box-shadow: var(--c-shadow);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plan-name { font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-tag-ink); margin: 0; }
.plan-badge { font: 600 10px/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: var(--p-badge-bg); color: var(--p-badge-ink); white-space: nowrap; }
.plan-price { font: 600 clamp(38px,3.6vw,56px)/.95 var(--font-sans); letter-spacing: -.04em; color: var(--c-ink); margin: 0; }
.plan-price > span:first-child { display: block; }
.plan-unit { font: 500 15px/1.4 var(--font-mono); letter-spacing: 0; color: var(--c-dim); }
.plan-body { font-size: 18px; line-height: 1.6; color: var(--c-dim); margin: 0; }
.plan-features { display: grid; gap: 10px; }
.plan-features p { font-size: 17px; line-height: 1.5; color: var(--c-dim); margin: 0; }
.plan-btn { font: 600 17px/1 var(--font-sans); color: var(--p-btn-ink); background: var(--p-btn-bg); border: 0; cursor: pointer; padding: 18px 26px; border-radius: 16px; margin-top: 6px; }
/* Pilot badge fill was .2: "First merchants" 4.33-4.38. */
.plan-pilot { --p-badge-bg: rgba(244,251,251,.1); --p-badge-ink: #f4fbfb; --p-btn-bg: #f4fbfb; --p-btn-ink: #062a30; }
.plan-after { --p-badge-bg: rgba(13,148,136,.12); --p-badge-ink: #0e7490; --p-btn-bg: #08282f; --p-btn-ink: #fff; }

/* ---- the close and the footer --------------------------------------------------------- */
.close { position: relative; background: linear-gradient(160deg,#11525e 0%,#0e5e72 40%,#0d6e85 66%,#062a30 100%); overflow: hidden; }
.close-bloom { position: absolute; top: -220px; left: 40%; width: 820px; height: 820px; border-radius: 999px; background: radial-gradient(circle,rgba(79,209,197,.34),transparent 66%); animation: dgGlow 11s ease-in-out infinite; pointer-events: none; }
.close-inner { position: relative; max-width: 1000px; margin: 0 auto; padding: clamp(80px,9vw,150px) 32px; text-align: center; }
/* Was #d2f5f2: 4.10-4.16 over the close's bloom. */
.close-eb { font: 600 13px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #f4fbfb; margin: 0 0 26px; }
.close h2 { font-size: clamp(44px,6.6vw,104px); line-height: .94; letter-spacing: -.045em; font-weight: 600; margin: 0 0 28px; color: #f4fbfb; text-wrap: balance; }
.close-lead { font-size: clamp(18px,1.6vw,24px); line-height: 1.5; color: rgba(238,251,250,.96); margin: 0 auto 44px; max-width: 44ch; }
.close-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.btn-close-primary { font: 600 18px/1 var(--font-sans); color: #062a30; background: #f4fbfb; border: 0; cursor: pointer; padding: 22px 38px; border-radius: 18px; box-shadow: 0 24px 50px -18px rgba(3,26,31,.7); }
/* Was #f4fbfb on a .12 fill: 4.41. */
.btn-close-ghost { font: 600 18px/1 var(--font-sans); color: #ffffff; background: rgba(240,251,250,.06); border: 1px solid rgba(240,251,250,.4); cursor: pointer; padding: 22px 36px; border-radius: 18px; }

.lp-foot { background: #07242b; padding: clamp(48px,5vw,80px) 32px; }
.foot-brand { display: flex; align-items: center; gap: 14px; margin: 0 0 32px; }
.foot-word { font: 600 30px/1 var(--font-display); letter-spacing: -.03em; color: var(--nav-ink,#f4fbfb); }
.foot-note { font-size: 18px; line-height: 1.6; color: rgba(184,226,224,.84); margin: 0 0 28px; max-width: 56ch; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; padding-top: 16px; border-top: 1px solid rgba(127,216,212,.18); }
/* 44px rows, not 16px words (review finding 37); the row gap and the rule's
   padding give back what the height adds. */
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; font: 500 16px/1 var(--font-sans); color: rgba(184,226,224,.78); }
.foot-links a:hover { color: #f4fbfb; }
.foot-place { font: 500 14px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(210,245,242,.6); margin-left: auto; }
.foot-build { font: 500 12px/1.4 var(--font-mono); color: rgba(210,245,242,.6); margin: 18px 0 0; }

/* ---- the three overlays -------------------------------------------------------------- */
.ov { position: relative; min-height: 88vh; padding: calc(var(--nav-h,100px) + clamp(24px,3vw,70px)) 32px clamp(48px,6vw,96px); background: linear-gradient(168deg,#0d3f49,#0e5e72 56%,#062a30); }
.ov-signin { display: flex; align-items: center; justify-content: center; padding-top: calc(var(--nav-h,100px) + clamp(24px,3vw,60px)); }
.ov-card {
  border-radius: 32px; background: linear-gradient(150deg,rgba(79,209,197,.22),rgba(5,32,38,.6)); border: 1px solid rgba(127,216,212,.34);
  box-shadow: 0 48px 90px -34px rgba(3,26,31,.9), inset 0 1px 0 rgba(240,251,250,.26);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.si-card { width: 100%; max-width: 480px; padding: clamp(28px,3vw,42px); }
.ov-eb { font: 600 12px/1 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; color: #cbf3f0; margin: 0 0 18px; }
.si-card h1 { font-size: clamp(34px,3.6vw,52px); line-height: 1; letter-spacing: -.04em; font-weight: 600; margin: 0 0 16px; color: #f4fbfb; }
.si-body { font-size: 18px; line-height: 1.6; color: rgba(214,240,238,.86); margin: 0 0 34px; }
.fields { display: grid; gap: 18px; margin: 0 0 26px; }
.field { display: grid; gap: 9px; }
/* Was rgba(184,226,224,.84): 3.65-4.25 at 11px, where there is no large-text exemption. */
.field-k { font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(214,240,238,.96); }
.field input { border: 1px solid rgba(127,216,212,.34); background: rgba(5,32,38,.5); padding: 16px 18px; border-radius: 14px; font: 400 17px/1.2 var(--font-sans); color: #f4fbfb; width: 100%; box-sizing: border-box; }
/* The artboard never set one, so each browser used its own: Chrome's #757575 read
   2.33-2.50 on these fields. An omission, not a design choice. */
.field input::placeholder { color: rgba(184,226,224,.74); opacity: 1; }
.btn-ov-primary { width: 100%; font: 600 17px/1 var(--font-sans); color: #04282e; background: linear-gradient(135deg,var(--accent-from),var(--accent-to)); border: 0; cursor: pointer; padding: 19px; border-radius: 16px; margin: 0 0 20px; }
.or { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.or > span.rule { flex: 1; height: 1px; background: rgba(127,216,212,.24); display: block; }
.or > span.word { font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(210,245,242,.7); }
.btn-ov-ghost { width: 100%; font: 600 17px/1 var(--font-sans); color: #f2fbfa; background: rgba(127,216,212,.12); border: 1px solid rgba(127,216,212,.4); cursor: pointer; padding: 19px; border-radius: 16px; margin: 0 0 24px; }
/* "Counter PIN instead" is a link to the till's own sign-in, so it is an <a>
   drawn as the artboard's button. */
/* The sign-in overlay's one button is a link to the till, drawn as the artboard's
   primary button. */
a.btn-ov-primary { display: block; text-align: center; }
a.btn-ov-primary:hover { color: #04282e; }
/* Was rgba(184,226,224,.78): 3.88-4.09 once the sign-in card lost its form and the
   link moved up over the brighter half of the card. */
.btn-back { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1 var(--font-sans); color: rgba(214,240,238,.96); background: none; border: 0; cursor: pointer; padding: 0; }

.reg-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: clamp(32px,5vw,64px); align-items: center; }
.ov-eb.mb20 { margin-bottom: 20px; }
.ov-h1 { font-size: clamp(40px,5vw,74px); line-height: .98; letter-spacing: -.042em; font-weight: 600; margin: 0 0 20px; color: #f4fbfb; text-wrap: balance; }
.ov-lead { font-size: clamp(18px,1.5vw,23px); line-height: 1.5; color: rgba(238,251,250,.96); margin: 0 0 36px; max-width: 40ch; }
.promises { display: grid; gap: 16px; max-width: 44ch; }
.promises p { font-size: 18px; line-height: 1.55; color: rgba(214,240,238,.86); margin: 0; }
.reg-card { padding: clamp(26px,2.6vw,38px); }
.reg-card .fields { gap: 16px; margin: 0 0 24px; }
.reg-card .field { gap: 8px; }
.reg-card .field input { padding: 15px 17px; }
.reg-card .btn-ov-primary { margin: 0 0 18px; }
.reg-terms { font-size: 15px; line-height: 1.55; color: rgba(184,226,224,.76); margin: 0 0 22px; }
/* Departure 4: the consent tick, and what the form says back. */
/* 046, Surface 6. A select and a group of radios, neither of which this page
   had before. Both take the same ink, border and radius as the inputs beside
   them, because a control that looks like the browser's default next to four
   that do not is the tell that a form was extended rather than designed. */
.field select { appearance: none; border: 1px solid rgba(127,216,212,.34); background: rgba(5,32,38,.5); padding: 15px 44px 15px 17px; border-radius: 14px; font: 400 17px/1.2 var(--font-sans); color: #f4fbfb; width: 100%; box-sizing: border-box; background-image: linear-gradient(45deg, transparent 50%, rgba(214,240,238,.9) 50%), linear-gradient(135deg, rgba(214,240,238,.9) 50%, transparent 50%); background-position: right 20px center, right 14px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field select:focus-visible { border-color: #5eead4; outline: none; box-shadow: 0 0 0 3px rgba(94,234,212,.24); }
.field select option { color: #08282f; }

.runs { border: 0; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.runs legend { padding: 0; margin: 0 0 4px; }
/* A 44px row per choice, pressed anywhere on its words (review finding 35):
   the 20px circle was the only thing that looked pressable. */
.runs-opt { display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.5; color: rgba(214,240,238,.9); cursor: pointer; }
.runs-opt input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #5eead4; }
/* The sentence a merchant running their own system sees. Stated, not warned:
   it is an invitation to talk, not a rejection. */
.runs-say { margin: 2px 0 0 32px; font: 400 14px/1.6 var(--font-sans); color: rgba(191,233,255,.92); border-left: 2px solid rgba(94,234,212,.5); padding-left: 12px; }

.consent { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: rgba(214,240,238,.86); }
.consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #5eead4; }
.consent a { color: #bfe9ff; text-decoration: underline; text-underline-offset: 2px; }
.form-say { font-size: 15px; line-height: 1.55; color: #ffd2c4; margin: 0 0 18px; }
.form-done h2 { font-size: clamp(28px,2.6vw,40px); line-height: 1.1; letter-spacing: -.03em; font-weight: 600; color: #f4fbfb; margin: 0 0 12px; }
.form-done p { font-size: 18px; line-height: 1.6; color: rgba(214,240,238,.86); margin: 0 0 22px; }

.demo-inner { max-width: 1160px; margin: 0 auto; }
.ov-h1.m22 { max-width: 22ch; }
.ov-lead.demo-lead { margin: 0 0 44px; max-width: 52ch; }
.facts { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 22px; margin: 0 0 44px; }
.fact { padding: 26px; border-radius: 24px; border: 1px solid rgba(127,216,212,.28); background: linear-gradient(150deg,rgba(79,209,197,.16),rgba(5,32,38,.4)); }
.fact-k { font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #d2f5f2; margin: 0 0 12px; }
.fact-v { font: 600 22px/1.2 var(--font-mono); color: #f4fbfb; margin: 0; }
.demo-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-demo-primary { font: 600 17px/1 var(--font-sans); color: #04282e; background: linear-gradient(135deg,var(--accent-from),var(--accent-to)); border: 0; cursor: pointer; padding: 20px 32px; border-radius: 16px; }
.btn-demo-ghost { font: 600 17px/1 var(--font-sans); color: #f2fbfa; background: rgba(127,216,212,.12); border: 1px solid rgba(127,216,212,.4); cursor: pointer; padding: 20px 30px; border-radius: 16px; }

/* ---- departure 1: reduced motion ------------------------------------------------------ */
/* Ruled 2026-09-17, the one thing added to the design rather than taken from it.
   All five animations stop; the dgRise entrances are instant, not slow. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-eyebrow, .lp-hero h1, .sweep, .hero-sub, .hero-ctas, .hero-card-wrap,
  .hero-bloom-a, .close-bloom { animation: none; }
  .nav, .nav-demo, .nav-progress { transition: none; }
}

/* ---- 2026-09-18: the fork answers, the nav fits a phone, the app is shown --------- */

/* The chosen card says so. The ring is the accent at full strength; the other
   card stays as it was, so switching back is one tap on something unchanged. */
.path-card[aria-pressed="true"] { outline: 3px solid var(--accent-to,#38bdf8); outline-offset: 4px; }
[data-audience] { scroll-margin-top: calc(var(--nav-h,100px) + 12px); }

/* THE NAV AT A PHONE'S WIDTH. Rendered on the live page at 390, "Request an
   account" ran off the right edge of the glass, and the page's own scroll
   measurement passed: the capsule was clipped, not the page. Every control now
   fits at 320, and every target stays 44px tall. */
.nav-signin { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
/* The home mark is a 36px picture in a 44px target: the proof found it tapping at
   36 on every width. */
.nav-home { min-height: 44px; }
.nav-register { min-height: 44px; }
@media (max-width: 520px) {
  .nav-wrap { padding: 10px 10px 6px; }
  .nav { gap: 8px; padding: 6px 6px 6px 12px; }
  .nav-home { gap: 8px; }
  .nav-word { font-size: 20px; }
  .nav-actions { gap: 4px; }
  .nav-signin { font-size: 14px; padding: 0 8px; }
  .nav-register { font-size: 14px; padding: 0 14px; }
}
@media (max-width: 360px) {
  /* The mark alone says Damga; the word goes before a control does. */
  .nav-word { display: none; }
}

/* THE LINKS WERE NEVER HIDDEN. The rules near the top of this file hide the
   section links below 980px, but `[data-nav-links]` and `.nav-links` weigh the
   same and `.nav-links { display: flex }` comes later, so it won: at 390 the nav
   showed "How it w" cut mid-word between the mark and Sign in. Seen by eye on
   2026-09-18, not by any measurement. Restated here, heavier, after both. */
@media (max-width: 1180px) { .nav .nav-links a:nth-child(n+4) { display: none; } }
@media (max-width: 980px) { .nav .nav-links { display: none; } }

/* The real app, in a phone. */
.shot { margin: 0 0 clamp(28px,4vw,56px); display: grid; justify-items: center; gap: 14px; }
.shot-phone {
  width: min(300px, 78vw); padding: 10px; border-radius: 46px;
  background: linear-gradient(160deg,#16414b,#0b262d); box-shadow: 0 40px 80px -40px rgba(4,40,46,.6), inset 0 0 0 1px rgba(255,255,255,.08);
}
.shot-phone img { display: block; width: 100%; height: auto; border-radius: 36px; }
.shot-cap { max-width: 34ch; text-align: center; font: 400 14px/1.5 var(--font-sans); color: var(--ink-soft,#33565f); text-wrap: balance; }
/* damga.qa, the document page: the privacy notice.
 *
 * IN THE LANDING'S LIGHT REGISTER, since the rebuild of 2026-09-17. The privacy
 * notice used to ground in the old clay colour under a teal band, so damga.qa
 * painted two palettes at once; that was ruled to go with the landing, and it
 * has. Same faces as the landing (landing.css sets them on :root), the light
 * section's ground and inks, and the teal eyebrow colour for the mark.
 *
 * Scoped to body.doc so none of it reaches the landing, and loaded after
 * landing.css so the landing's element rules are the base it overrides.
 */
body.doc {
  --seal: #0e7490;
  display: flex; flex-direction: column; min-height: 100vh;
  background: #f1f8f9; color: #08282f;
}
.doc .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: 62ch; margin-inline: auto; padding: 24px 20px;
  padding-top: calc(24px + env(safe-area-inset-top));
}
.doc .lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.doc .lockup svg { width: 24px; height: 24px; display: block; }
.doc .wordmark { font: 600 22px/1 var(--font-display); letter-spacing: -.03em; color: #08282f; }
.doc .lang {
  font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #0e7490;
  padding: 10px 14px; border: 1px solid rgba(13,148,136,.3); border-radius: 999px; text-decoration: none;
}
.doc .lang:hover, .doc .lang:focus-visible { color: #08282f; border-color: rgba(13,148,136,.55); }
.doc main {
  flex: 1; width: 100%; max-width: 62ch; margin-inline: auto;
  padding: 0 20px 96px; display: flex; flex-direction: column; gap: 56px;
}
.doc .hero { padding-top: 32px; }
.doc h1 { margin: 0 0 16px; font-size: clamp(34px,4.4vw,52px); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; color: #08282f; }
html[lang="ar"] .doc h1 { letter-spacing: 0; line-height: 1.3; }
.doc .lede { margin: 0; font-size: clamp(18px,1.5vw,21px); line-height: 1.5; color: #3a5c66; }
.doc h2 { margin: 0 0 12px; font-size: clamp(23px,1.9vw,28px); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; color: #08282f; }
html[lang="ar"] .doc h2 { letter-spacing: 0; }
.doc .block p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: #3a5c66; max-width: 56ch; }
.doc .block p:last-of-type { margin-bottom: 0; }
.doc .notice-version { margin: 24px 0 0; font: 500 13px/1.5 var(--font-mono); color: #3a5c66; }
.doc .foot {
  border-top: 1px solid rgba(13,148,136,.18); color: #3a5c66;
  font: 500 13px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* A fixed white field takes a fixed dark ink, in any register. */
/* Dark ink on the light ground, light ink on the button: always opposite. */