/* Nemapp website. Palette from the app (Meridian/Theme.swift `M`): pearl and silver, charcoal ink, graphite for dark,
   champagne only as a faint reflection. Type: the system sans (SF Pro on Apple devices), set large and quiet. */
:root {
  --page: #F6F6F4; --white: #FFFFFF; --tile: #ECECEA; --tile-2: #E4E4E2; --line: rgba(0, 0, 0, .09);
  --ink: #1D1D1F; --ink2: #56565B; --ink3: #616166;
  --fill: #1D1D1F; --on-fill: #FFFFFF; --accent: #5F574A; --pos: #2E9A5A;
  --graphite: #121214; --graphite-2: #1B1B1E; --on-dark: #F2F2F0; --on-dark2: #A9A9AE; --dark-line: rgba(255, 255, 255, .10);
  --champagne: #D9C7A3;
  --shadow: 0 1px 2px rgba(20, 20, 18, .06), 0 12px 32px rgba(20, 20, 18, .10);
  --shadow-lg: 0 2px 6px rgba(20, 20, 18, .08), 0 30px 80px rgba(20, 20, 18, .18);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --max: 1120px; --gutter: 32px; --r: 20px; --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #111113; --white: #161618; --tile: #1C1C1F; --tile-2: #232326; --line: rgba(255, 255, 255, .09);
    --ink: #F2F2F0; --ink2: #ADADB2; --ink3: #8E8E93; --fill: #F2F2F0; --on-fill: #161618; --accent: #CFC4AE;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35); --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 30px 80px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.55 var(--sans); color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-weight: 500; margin: 0; letter-spacing: -.022em; line-height: 1.08; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--fill); color: var(--on-fill); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--ink2); }
.fine { font-size: 13.5px; color: var(--ink3); }
.center { text-align: center; }

/* ---------------------------------------------------------------- header */
.site-head { position: sticky; top: 0; z-index: 50; height: 68px; background: color-mix(in srgb, var(--white) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 1px 0 var(--line); transition: background-color .3s, box-shadow .3s, color .3s; }
.head-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; max-width: 1360px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .005em; justify-self: start; }
.brand svg { width: 25px; height: 23px; color: var(--accent); }
.nav { display: flex; gap: 6px; }
.nav a { text-decoration: none; color: var(--ink2); font-size: 15px; padding: 8px 14px; border-radius: 999px; transition: color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.head-cta { justify-self: end; display: flex; align-items: center; gap: 6px; }
.login { text-decoration: none; font-size: 15px; padding: 8px 12px; color: var(--ink); }
.login .tag { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); margin-left: 4px; }
.menu-btn { display: none; justify-self: end; width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; display: block; margin: auto; }
.mobile-nav { display: none; }
/* Over the home hero (only with JS, so the bar is never unreadable): transparent with light text until you scroll. */
.js .site-head.over:not(.scrolled) { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--on-dark); }
.js .site-head.over:not(.scrolled) .nav a, .js .site-head.over:not(.scrolled) .login .tag { color: rgba(242, 242, 240, .78); }
.js .site-head.over:not(.scrolled) .nav a:hover, .js .site-head.over:not(.scrolled) .login { color: #fff; }
.js .site-head.over:not(.scrolled) .brand svg { color: var(--champagne); }
.js .site-head.over:not(.scrolled) .btn-primary { background: #F2F2F0; color: #161618; }
.js .site-head.over:not(.scrolled) :focus-visible { outline-color: var(--champagne); }
.js .site-head.over { position: fixed; left: 0; right: 0; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 999px; font: 500 16px/1 var(--sans);
  text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: transform .25s var(--ease), background-color .2s, color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { height: 38px; padding: 0 18px; font-size: 15px; }
.btn-primary { background: var(--fill); color: var(--on-fill); }
.btn-light { background: #F2F2F0; color: #161618; }
.btn-ghost { color: var(--on-dark); background: rgba(255, 255, 255, .10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-ghost:hover { background: rgba(255, 255, 255, .16); }
.btn-line { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); background: var(--white); }
.btn svg { width: 14px; height: 14px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.link-arrow svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------- atmosphere: our own silver/graphite light, no photographs */
.atmos { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #2A2A2D 0%, #1A1A1C 52%, #0E0E0F 100%); }
.atmos > i { position: absolute; inset: -10% -10% -10% -10%; will-change: transform; }
.atmos .bloom { background: radial-gradient(55% 48% at 50% 4%, rgba(255, 255, 255, .26), rgba(255, 255, 255, .06) 55%, transparent 75%); }
.atmos .horizon { background:
  radial-gradient(150% 95% at 50% 128%, transparent 60%, rgba(236, 236, 232, .55) 60.5%, rgba(236, 236, 232, .12) 62%, transparent 68%),
  radial-gradient(90% 60% at 50% 120%, rgba(220, 220, 216, .28), transparent 70%); }
.atmos .warm { background: radial-gradient(38% 30% at 80% 88%, rgba(217, 199, 163, .20), transparent 70%), radial-gradient(30% 26% at 12% 70%, rgba(201, 201, 199, .10), transparent 70%); }
.atmos .grain { inset: 0; background: url("/img/grain.png"); opacity: .07; mix-blend-mode: overlay; }
@media (prefers-reduced-motion: no-preference) { .atmos .bloom { animation: drift 18s ease-in-out infinite alternate; } }
@keyframes drift { from { translate: -2% 0; } to { translate: 2% 1.5%; } }
.atmos.light { background: linear-gradient(180deg, #FBFBFA 0%, #EDEDEB 60%, #E2E2E0 100%); }
.atmos.light .bloom { background: radial-gradient(55% 50% at 50% 0%, #fff, transparent 70%); }
.atmos.light .horizon { background: radial-gradient(150% 95% at 50% 135%, transparent 60%, rgba(255, 255, 255, .9) 60.6%, rgba(255, 255, 255, .25) 62%, transparent 68%), radial-gradient(90% 60% at 50% 125%, rgba(201, 201, 199, .55), transparent 70%); }
.atmos.light .warm { background: radial-gradient(36% 30% at 82% 80%, rgba(217, 199, 163, .22), transparent 70%); }
.atmos.light .grain { opacity: .05; mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { .atmos.light { background: linear-gradient(180deg, #232326, #161618 60%, #111113); } .atmos.light .bloom { background: radial-gradient(55% 50% at 50% 0%, rgba(255,255,255,.14), transparent 70%); } .atmos.light .horizon { background: radial-gradient(150% 95% at 50% 135%, transparent 60%, rgba(255,255,255,.28) 60.6%, rgba(255,255,255,.06) 62%, transparent 68%); } .atmos.light .grain { mix-blend-mode: overlay; } }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; isolation: isolate; color: var(--on-dark); min-height: min(940px, 100svh); display: grid; grid-template-rows: 1fr auto; text-align: center; }
.hero .atmos { z-index: -1; }
.hero-inner { align-self: center; padding-top: 140px; padding-bottom: 64px; will-change: transform, opacity; }
.hero h1 { font-size: clamp(46px, 7.2vw, 96px); font-weight: 500; letter-spacing: -.038em; line-height: 1.0; max-width: 11.5em; margin: 0 auto; }
.hero .sub { font-size: clamp(18px, 1.7vw, 21px); color: var(--on-dark2); max-width: 32em; margin: 26px auto 0; line-height: 1.5; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 38px; }
.disclosure { padding: 22px 0 26px; font-size: 13px; color: rgba(242, 242, 240, .62); border-top: 1px solid rgba(255, 255, 255, .08); }
.hero.hero-light { color: var(--ink); min-height: min(720px, 86svh); }
.hero.hero-light .sub { color: var(--ink2); }
.hero.hero-light .disclosure { color: var(--ink3); border-top-color: var(--line); }
.hero.short { min-height: 0; }
.hero.short .hero-inner { padding-top: 120px; padding-bottom: 72px; }
.eyebrow { display: block; font-size: 14px; font-weight: 500; color: var(--ink3); margin-bottom: 18px; letter-spacing: 0; }
.hero .eyebrow { color: var(--on-dark2); }
.hero.hero-light .eyebrow { color: var(--ink3); }

/* ---------------------------------------------------------------- product render rising out of the hero */
.render { position: relative; background: #0E0E0F; padding: 0 0 clamp(80px, 10vw, 140px); }
.render .frame { max-width: 1160px; margin: 0 auto; transform-origin: 50% 0; will-change: transform; }
.browser { border-radius: 14px; overflow: hidden; background: #1B1B1E; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 120px rgba(0, 0, 0, .55); }
.browser .bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #202023; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.browser .bar span { width: 10px; height: 10px; border-radius: 50%; background: #3A3A3E; }
.browser.light { background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
.browser.light .bar { background: #F1F1EF; border-bottom-color: var(--line); }
.browser.light .bar span { background: #D3D3D1; }
.render .caption { color: rgba(242, 242, 240, .5); text-align: center; font-size: 13px; margin-top: 22px; }

/* ---------------------------------------------------------------- sections */
.section { padding: clamp(88px, 11vw, 150px) 0; }
.section.tight { padding-top: 0; }
.big-head { text-align: center; max-width: 860px; margin: 0 auto clamp(48px, 6vw, 80px); }
.big-head h2 { font-size: clamp(38px, 5vw, 64px); letter-spacing: -.034em; line-height: 1.04; }
.big-head p { font-size: clamp(18px, 1.6vw, 20px); color: var(--ink2); margin: 22px auto 0; max-width: 34em; }
.dark { background: var(--graphite); color: var(--on-dark); }
.dark .big-head p, .dark .muted { color: var(--on-dark2); }
.dark :focus-visible { outline-color: var(--champagne); }

/* ---------------------------------------------------------------- sticky product walk-through */
.walk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
.walk-intro h2 { font-size: clamp(34px, 3.6vw, 48px); letter-spacing: -.03em; margin-bottom: 18px; }
.walk-intro p { color: var(--on-dark2); max-width: 26em; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 54vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px 28px; position: relative; }
.step::before { content: ""; position: absolute; left: 0; top: 50%; height: 72px; width: 2px; margin-top: -36px; background: var(--dark-line); border-radius: 2px; transition: background-color .4s; }
.step.on::before { background: var(--champagne); }
.step h3 { font-size: 26px; letter-spacing: -.02em; margin-bottom: 10px; transition: color .4s; }
.step p { color: var(--on-dark2); max-width: 26em; margin: 0; transition: color .4s; }
.js .step:not(.on) h3, .js .step:not(.on) p { color: #828287; }
.step .step-shot { display: none; }
.stage { position: sticky; top: calc(50vh - min(330px, 38vh)); height: min(660px, 76vh); display: grid; place-items: center; }
.stage .phone { height: 100%; aspect-ratio: 1206 / 2622; width: auto; }
.phone { position: relative; border-radius: 15% / 7%; padding: 3%; background: linear-gradient(150deg, #5A5A5D, #2A2A2C 30%, #4A4A4D 70%, #232325);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 40px 90px rgba(0, 0, 0, .5); }
.phone.silver { background: linear-gradient(150deg, #F2F2F0, #C2C2BF 35%, #E2E2DF 70%, #B4B4B1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7), var(--shadow-lg); }
.phone .screen { position: relative; height: 100%; border-radius: 12.5% / 5.8%; overflow: hidden; background: #EDEDEB; }
.phone .screen picture { position: absolute; inset: 0; transition: opacity .55s var(--ease), transform .7s var(--ease); }
.phone .screen picture img { width: 100%; height: 100%; object-fit: cover; }
.js .stage .screen picture { opacity: 0; transform: scale(1.03); }
.js .stage .screen picture.on { opacity: 1; transform: none; }
.phone.static .screen { height: auto; }
.phone.static .screen picture { position: static; }

/* ---------------------------------------------------------------- feature tiles (2 columns) */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 28px; }
.tile-art { position: relative; aspect-ratio: 1.5; border-radius: var(--r); overflow: hidden; background: radial-gradient(90% 80% at 30% 0%, #F7F7F5, var(--tile) 60%, var(--tile-2)); }
@media (prefers-color-scheme: dark) { .tile-art { background: radial-gradient(90% 80% at 30% 0%, #26262A, var(--tile) 60%, #161618); } }
.tile-art .frag { position: absolute; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.tile-art .frag img { width: 100%; }
.chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: #1D1D1F; background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 24px rgba(20, 20, 18, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--champagne); flex: none; }
.chip i.ok { background: #2E9A5A; }
.tile h3 { font-size: 20px; letter-spacing: -.012em; margin: 22px 0 6px; }
.tile p { color: var(--ink2); margin: 0; max-width: 30em; }
/* chip placements on tiles */
.cp1 { left: 6%; bottom: 12%; }
.cp2 { right: 6%; top: 12%; }
.cp3 { right: 9%; bottom: 7%; }
/* fragment placements */
.f-send { width: 44%; left: 28%; top: 9%; }
.f-vaults { width: 66%; left: 17%; top: 16%; border-radius: 18px; }
.f-approvals { width: 76%; left: 12%; top: 24%; }
.f-account { width: 64%; left: 18%; top: 13%; }
.f-bizpay { width: 70%; left: 15%; top: 16%; }
.f-pnl { width: 74%; left: 13%; top: 22%; }
.f-limits { width: 62%; left: 19%; top: 10%; }
.f-tx { width: 50%; left: 25%; top: 7%; }
/* entrance: fragments rise, chips land a beat later */
.js .tile-art .frag, .js .tile-art .chip { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js .tile-art .chip { transform: translateY(14px) scale(.96); }
.js .tile-art.in .frag, .js .tile-art.in .chip { opacity: 1; transform: none; }
.js .tile-art.in .chip:nth-of-type(1) { transition-delay: .35s; }
.js .tile-art.in .chip:nth-of-type(2) { transition-delay: .5s; }
.js .tile-art.in .chip:nth-of-type(3) { transition-delay: .65s; }

/* ---------------------------------------------------------------- 3D product render */
.duo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(40px, 6vw, 88px); }
.duo h2 { font-size: clamp(34px, 3.8vw, 52px); letter-spacing: -.032em; margin-bottom: 18px; }
.duo .lead { color: var(--ink2); font-size: 18.5px; max-width: 28em; }
.dark .duo .lead { color: var(--on-dark2); }
.scene { position: relative; height: clamp(440px, 46vw, 620px); perspective: 1800px; }
.scene .rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, -22deg)) rotateZ(4deg); will-change: transform; }
.scene .phone { position: absolute; width: 41%; }
.scene .p1 { left: 14%; top: 4%; transform: translateZ(40px); }
.scene .p2 { left: 50%; top: 14%; transform: translateZ(-30px); }
.scene .chip { transform: translateZ(110px); }
.scene .c1 { left: 2%; top: 58%; }
.scene .c2 { right: 2%; top: 8%; }
.scene .shadow { position: absolute; left: 10%; right: 6%; bottom: -2%; height: 12%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .22), transparent 70%); transform: translateZ(-120px); filter: blur(8px); }

/* ---------------------------------------------------------------- business render with assembling chips */
.assemble { position: relative; max-width: 1080px; margin: 0 auto; }
.assemble .chip { z-index: 2; }
.assemble .a1 { left: -2%; top: 30%; }
.assemble .a2 { right: -3%; top: 14%; }
.assemble .a3 { right: 8%; bottom: -4%; }
.js .assemble .chip { opacity: 0; transform: translateY(18px) scale(.95); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.js .assemble.in .chip { opacity: 1; transform: none; }
.js .assemble.in .a1 { transition-delay: .3s; } .js .assemble.in .a2 { transition-delay: .5s; } .js .assemble.in .a3 { transition-delay: .7s; }

/* ---------------------------------------------------------------- simple lists and grids */
.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.control { padding: 28px 0; border-top: 1px solid var(--line); }
.dark .control { border-top-color: var(--dark-line); }
.control svg { width: 22px; height: 22px; color: var(--accent); margin-bottom: 16px; }
.dark .control svg { color: var(--champagne); }
.control h3 { font-size: 19px; letter-spacing: -.01em; margin-bottom: 8px; }
.control p { margin: 0; color: var(--ink2); font-size: 16px; }
.dark .control p { color: var(--on-dark2); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.plain h3 { font-size: 22px; margin-bottom: 14px; }
.plain ul { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink2); }

/* ---------------------------------------------------------------- CTA band */
.cta-band { position: relative; isolation: isolate; color: var(--on-dark); text-align: center; padding: clamp(110px, 13vw, 170px) 0 0; overflow: hidden; }
.cta-band .atmos { z-index: -1; }
.cta-band h2 { font-size: clamp(40px, 5.4vw, 72px); letter-spacing: -.036em; }
.cta-band p { color: var(--on-dark2); font-size: clamp(18px, 1.6vw, 20px); max-width: 34em; margin: 22px auto 0; }
.cta-band .disclosure { margin-top: clamp(80px, 10vw, 130px); }

/* ---------------------------------------------------------------- prose, FAQ, legal */
.prose > * { max-width: 720px; }
.prose h2 { font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -.02em; margin: 52px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink2); }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 7px 0; }
.table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.table th, .table td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.table td { color: var(--ink2); }
.table-wrap { overflow-x: auto; }
.faq > * { max-width: 820px; margin-left: auto; margin-right: auto; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 24px 44px 24px 0; position: relative; font-size: 20px; font-weight: 500; letter-spacing: -.012em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--ink2); border-bottom: 1.5px solid var(--ink2); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { color: var(--ink2); padding-bottom: 18px; margin: 0; max-width: 40em; }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.panel { background: var(--white); border-radius: var(--r); padding: 30px; box-shadow: 0 0 0 1px var(--line); }
.panel h2, .panel h3 { font-size: 22px; letter-spacing: -.015em; margin-bottom: 10px; }
.panel p { color: var(--ink2); margin: 0; }
.panel svg { width: 22px; height: 22px; color: var(--accent); margin-bottom: 14px; }
.legal-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.legal-sections ul { list-style: none; padding: 0; margin: 14px 0 0; }
.legal-sections li a { display: block; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; }
.legal-sections .fine { margin-top: 14px; }
.legal-doc .meta { color: var(--ink3); font-size: 14px; margin-bottom: 30px; }

/* ---------------------------------------------------------------- footer */
.site-foot { padding: 72px 0 44px; background: var(--page); border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-grid h2 { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink); margin: 6px 0 14px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li a { display: inline-block; padding: 5px 0; text-decoration: none; color: var(--ink2); font-size: 15px; }
.foot-grid li a:hover { color: var(--ink); }
.foot-about p { color: var(--ink2); font-size: 14.5px; max-width: 30em; margin-top: 16px; }
.foot-base { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink3); }
.nf { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 120px 0; }
.nf h1 { font-size: clamp(44px, 6vw, 76px); letter-spacing: -.035em; margin: 10px 0 18px; }

/* ---------------------------------------------------------------- reveal (progressive; visible without JS / with reduced motion) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .08s; } .js .reveal.d2 { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .tile-art .frag, .js .tile-art .chip, .js .assemble .chip { opacity: 1; transform: none; transition: none; }
  .js .stage .screen picture { transition: none; transform: none; }
  .btn, .btn:hover { transition: none; transform: none; }
  .scene .rig { transform: rotateX(10deg) rotateY(-22deg) rotateZ(4deg); }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .nav, .head-cta { display: none; }
  .head-row { grid-template-columns: 1fr auto; }
  .menu-btn { display: grid; place-items: center; }
  .mobile-nav[data-open="true"] { display: block; position: fixed; inset: 68px 0 auto 0; max-height: calc(100dvh - 68px); overflow-y: auto; z-index: 49; color: var(--ink);
    background: var(--white); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 28px; }
  .mobile-nav a.link { display: block; padding: 16px 2px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 22px; font-weight: 500; letter-spacing: -.015em; }
  .mobile-nav .actions { display: grid; gap: 10px; margin-top: 22px; }
  .js .site-head.menu-open { background: var(--white); color: var(--ink); }
  .controls { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .walk, .duo, .two-col, .cards2, .legal-sections { grid-template-columns: 1fr; }
  .walk .stage { display: none; }
  .step { min-height: 0; padding: 36px 0 8px 22px; }
  .js .step:not(.on) h3 { color: var(--on-dark); } .js .step:not(.on) p { color: var(--on-dark2); }
  .step .step-shot { display: block; width: min(260px, 70%); margin: 28px auto 0; }
  .tiles { grid-template-columns: 1fr; gap: 48px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
  .scene { height: 120vw; max-height: 560px; }
  .assemble .a1 { left: 2%; top: auto; bottom: -6%; } .assemble .a2 { right: 2%; top: -5%; } .assemble .a3 { display: none; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .hero-inner { padding-top: 120px; padding-bottom: 48px; }
  .scene .c1 { left: 4%; } .scene .c2 { right: 4%; }
  .actions .btn { flex: 1 1 100%; }
  .controls { grid-template-columns: 1fr; }
  .chip { font-size: 12px; padding: 7px 11px; }
  .tile-art { aspect-ratio: 1.2; }
  .render .frame { margin: 0 -8px; }
}

/* ---------------------------------------------------------------- legal documents */
.legal-banner { margin: 8px 0 28px; padding: 16px 20px; border-radius: 14px; background: color-mix(in srgb, var(--champagne) 22%, var(--white)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--champagne) 55%, transparent); color: var(--ink); font-size: 15.5px; line-height: 1.5; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0 0 36px; padding: 0 0 22px; border-bottom: 1px solid var(--line); }
.legal-meta dt { font-size: 12.5px; color: var(--ink3); }
.legal-meta dd { margin: 2px 0 0; font-size: 15px; font-weight: 500; }
.legal-doc h1 { font-size: clamp(34px, 4vw, 48px); letter-spacing: -.03em; margin: 0 0 24px; }
.legal-doc h3 { font-size: 19px; margin: 28px 0 8px; }
.legal-doc blockquote { margin: 0 0 1em; padding-left: 14px; border-left: 2px solid var(--line); }
.legal-sections li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-top: 1px solid var(--line); }
.legal-sections li a { border-top: 0; }
.section.legal-doc { padding-top: clamp(48px, 6vw, 80px); }