/* Fonts are served from intacta.io (not Google): no extra round trip before a page can draw, and visitors'
   browsers do not contact Google. Mona Sans and Varela Round, SIL Open Font License 1.1 (fonts/OFL-*.txt);
   same files and subsets Google Fonts served. */
/* vietnamese */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(../fonts/mona-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(../fonts/mona-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(../fonts/mona-sans-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;
}
/* hebrew */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/varela-round-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/varela-round-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/varela-round-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/varela-round-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;
}

/* Intacta website — "liquid glass" design (Sept 2026).
   One stylesheet for every public page. Layout is responsive:
   ≥1200px = the approved desktop design, 900–1199px = same layout scaled, <900px = stacked mobile. */

:root {
  --ink: #1C1633;
  --ink-84: rgba(28, 22, 51, 0.84);
  --ink-82: rgba(28, 22, 51, 0.82);
  --ink-80: rgba(28, 22, 51, 0.8);
  --ink-76: rgba(28, 22, 51, 0.76);
  --ink-74: rgba(28, 22, 51, 0.74);
  --ink-72: rgba(28, 22, 51, 0.72);
  --ink-70: rgba(28, 22, 51, 0.7);
  --ink-68: rgba(28, 22, 51, 0.68);
  --ink-66: rgba(28, 22, 51, 0.66);
  --ink-62: rgba(28, 22, 51, 0.62);
  --ink-60: rgba(28, 22, 51, 0.6);
  --ink-42: rgba(28, 22, 51, 0.42);
  --line: rgba(28, 22, 51, 0.1);
  --etch: rgba(28, 22, 51, 0.08);
  --dark: #120D24;
  --violet: #5A3FC4;
  --accent: linear-gradient(135deg, #B08BFF 0%, #FFA36B 100%);
  --pill: rgba(255, 255, 255, 0.42);
  --pill-bd: rgba(255, 255, 255, 0.8);
  --tint: 0.08;        /* glass cards */
  --bd: 4px;
  --lens-tint: 0.08;   /* lens panels */
  --core-blur: 1.9px;
  --paper: 0.9;        /* reading glass for long text */
  --gap: 140px;        /* space between sections, same everywhere */
  --wrap: 1152px;
  --font: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: #EEEAF7;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--ink); text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid #7C4DFF; outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { position: relative; width: min(var(--wrap), calc(100% - 64px)); margin: 0 auto; }

/* ---------- background: the lavender glass picture on top, soft echoes further down ---------- */
.page-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, #EEEAF7 0%, #F2EFF9 50%, #ECE7F6 100%); }
.hero-picture, .lens-copy { overflow: hidden; background: linear-gradient(180deg, #EEEAF7 0%, #F0EDF8 100%); }
.hero-picture { position: absolute; left: 0; top: 0; width: 100%; height: 980px; }
.hero-picture::before, .lens-copy::before {
  content: ""; position: absolute; inset: 0;
  background: url("../images/bg-lavender.jpg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}
.echo {
  position: absolute; left: 0; width: 100%; height: 780px; pointer-events: none; z-index: 0;
  background: url("../images/bg-lavender.jpg") center / cover no-repeat; opacity: 0.9;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.echo.flip-x { transform: scaleX(-1); }
.echo.flip-y { transform: scaleY(-1); opacity: 0.7; }
.echo.low { background-position: 50% 70%; }
main, .site-footer { position: relative; z-index: 1; }
section { position: relative; }
section > .wrap { z-index: 1; }

/* ---------- glass: cards (live blur), lens panels (refracting copy of the picture), paper (readable) ---------- */
.glass {
  position: relative; border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.06) 48%, rgba(255,255,255,0.16) 100%), rgba(255,255,255,var(--tint));
  -webkit-backdrop-filter: blur(var(--bd)) saturate(165%) brightness(1.05);
  backdrop-filter: blur(var(--bd)) saturate(165%) brightness(1.05);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.95), inset 0 -1px 1px rgba(255,255,255,0.5), inset 0 14px 26px -14px rgba(255,255,255,0.55), inset 0 -18px 30px -18px rgba(120,90,190,0.22), 0 24px 50px -26px rgba(76,48,140,0.4);
}
.paper {
  position: relative; border-radius: 28px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.2) 100%), rgba(255,255,255,var(--paper));
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,0.6), 0 24px 50px -26px rgba(76,48,140,0.35);
}
.glass::after, .paper::after, .lens::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(145deg, #fff 0%, rgba(255,255,255,0.35) 22%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.35) 78%, rgba(255,255,255,0.95) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.lens.sweep::after { background-size: 260% 260%; }  /* a still glossy edge; the old drifting shine cost every visitor's graphics chip */
/* Motion plays a few times when a section scrolls into view, then rests on its finished look; it replays when you come back.
   js/site.js adds .is-off while a section is out of view. Endless loops kept laptops' graphics chips busy. */
.is-off:not(.rise), .is-off *:not(.rise), .is-off::after, .is-off *::before, .is-off *::after { animation: none !important; }
.lens { position: relative; border-radius: 32px; box-shadow: 0 24px 50px -22px rgba(76,48,140,0.42); }
.lens-fx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.lens-rim, .lens-core { position: absolute; inset: 0; }
.lens-rim { filter: saturate(1.3) brightness(1.07); }
.lens-core {
  --f: 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--f), #000 calc(100% - var(--f)), transparent 100%), linear-gradient(180deg, transparent 0, #000 var(--f), #000 calc(100% - var(--f)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--f), #000 calc(100% - var(--f)), transparent 100%), linear-gradient(180deg, transparent 0, #000 var(--f), #000 calc(100% - var(--f)), transparent 100%);
  mask-composite: intersect;
  filter: blur(var(--core-blur)) saturate(1.12) brightness(1.03);
}
.lens-copy { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }  /* shown once lined up with the picture (js), so a new page never flashes a squeezed copy */
.lens-tint { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.14) 100%), rgba(255,255,255,var(--lens-tint)); }
.lens-shade { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,0.55), inset 0 16px 28px -16px rgba(255,255,255,0.6), inset 0 -20px 32px -20px rgba(120,90,190,0.26), inset 2px 0 3px rgba(255,150,170,0.18), inset -2px 0 3px rgba(140,190,255,0.22); }
.lens-body { position: relative; }
.lens.frosted { --lens-tint: 0.275; --core-blur: 3.4px; }

/* ---------- nav: the same bar on every page ---------- */
.site-nav { position: absolute; z-index: 20; left: 0; right: 0; top: 26px; }
.site-nav .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 56px; padding: 0 10px 0 22px; border-radius: 999px; }
.site-nav .lens { border-radius: 999px; }
.site-nav .lens-core { --f: 10px; }
.brand { position: relative; justify-self: start; display: flex; align-items: center; }
.brand img { height: 26px; width: auto; }
.tabs { position: relative; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.72); font-size: 13.5px; }
.tabs a { position: relative; z-index: 1; height: 34px; padding: 0 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--ink-72); transition: color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.5, 0.5, 1); }
.tabs a.on { color: var(--ink); transform: scale(1.04); }
.tabs a:hover { color: var(--ink); }
.tabs a:active { transform: scale(0.96); }
.tab-lens { position: absolute; top: 4px; left: 4px; width: 0; height: 34px; border-radius: 999px; pointer-events: none; opacity: 0; transform-origin: 50% 50%; transition: opacity 0.2s ease; }  /* the glide is a transform animation (see the script after the nav), so it runs on the graphics thread */
.tab-lens.still { transition: none; }
.tab-lens .tint { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.8); box-shadow: 0 2px 10px rgba(76,48,140,0.18), inset 0 1px 0 #fff; }
.tab-lens .rim { position: absolute; inset: 0; border-radius: 999px; opacity: 0; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.95), inset 0 3px 8px rgba(255,255,255,0.35), inset 2px 0 3px rgba(255,140,140,0.25), inset -2px 0 3px rgba(140,190,255,0.28), 0 10px 26px -6px rgba(76,48,140,0.35); -webkit-backdrop-filter: brightness(1.2) saturate(1.6); backdrop-filter: brightness(1.2) saturate(1.6); }
.nav-actions { position: relative; justify-self: end; display: flex; align-items: center; gap: 16px; }
.nav-actions .login { margin-right: 10px; font-size: 13.5px; color: var(--ink-82); }
.menu { display: none; position: relative; }
.menu > summary { list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--pill); border: 1px solid var(--pill-bd); color: var(--ink); }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { --paper: 0.97; position: absolute; right: 0; top: 50px; width: 220px; padding: 8px; display: flex; flex-direction: column; border-radius: 22px; -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); box-shadow: inset 0 1px 1px #fff, 0 24px 50px -18px rgba(76,48,140,0.45); }
.menu-panel a { padding: 11px 14px; border-radius: 14px; font-size: 15px; color: var(--ink); }
.menu-panel a[aria-current="page"] { background: rgba(255,255,255,0.6); font-weight: 600; }

/* ---------- buttons, pills, type ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 19px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; border: 0; }
.btn svg { width: 14px; height: 14px; }
.btn-dark { background: var(--dark); color: #fff; box-shadow: 0 10px 24px -8px rgba(18,13,36,0.6), inset 0 1px 0 rgba(255,255,255,0.14); }
.btn-dark.sm { height: 38px; padding: 0 16px; font-size: 13.5px; box-shadow: none; }
.btn-dark[aria-current="page"] { box-shadow: 0 0 0 3px rgba(176,139,255,0.5); }
.btn-pill { background: var(--pill); border: 1px solid var(--pill-bd); color: var(--ink); font-weight: 500; padding: 0 18px; }
.press { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.2); }
.press:hover { transform: translateY(-1px) scale(1.02); }
.press:active { transform: scale(0.97); }
.press svg { transition: transform 0.3s ease; }
.press:hover svg { transform: translateX(2px); }
.link { transition: opacity 0.2s ease; }
.link:hover { opacity: 0.65; }
.lift { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lift:hover { transform: translateY(-4px); }
.eyebrow { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--pill); border: 1px solid var(--pill-bd); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-82); }
.h1 { margin-top: 16px; font-size: 40px; line-height: 1.08; font-weight: 600; font-stretch: 104%; letter-spacing: -0.035em; color: var(--ink); }
.h1 span, .h2 span { display: block; }
.h1 .soft { color: var(--ink-70); }
.h2 { margin-top: 12px; font-size: 30px; line-height: 1.08; font-weight: 600; font-stretch: 104%; letter-spacing: -0.03em; }
.h2 .soft { color: var(--ink-60); }
.lede { margin-top: 16px; max-width: 520px; font-size: 15px; line-height: 1.62; color: var(--ink-80); text-wrap: pretty; }
.grad { font-family: "Varela Round", var(--font); font-weight: 400; background: linear-gradient(90deg, #8c52ff 0%, #ff914d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }  /* the logo's typeface and colours */
.ctas { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.proof { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--ink-68); }
.proof span { display: inline-flex; align-items: center; gap: 8px; }
.dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sec { padding-top: var(--gap); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.sec-head .lead { margin-bottom: 3px; max-width: var(--lead-w, 330px); font-size: 13.5px; line-height: 1.6; color: var(--ink-68); }
.grid { margin-top: 24px; display: grid; gap: 14px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.num { font-size: 30px; line-height: 1; font-weight: 700; font-stretch: 108%; letter-spacing: -0.05em; background: linear-gradient(180deg, #1C1633 0%, rgba(28,22,51,0.28) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: var(--pill); border: 1px solid var(--pill-bd); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-66); }
.smoked { background: rgba(18,16,30,0.42); border: 1px solid rgba(255,255,255,0.3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; }
.fine { font-size: 11px; color: var(--ink-72); text-shadow: 0 0 2px rgba(255,255,255,0.95), 0 0 10px rgba(255,255,255,0.9); }

/* ---------- hero ---------- */
.hero { padding-top: var(--hero-top, 176px); }
.hero .text { padding: 38px 40px 36px; display: flex; flex-direction: column; align-items: flex-start; }
.hero-home { --hero-top: 176px; }  /* same start height as the first panel on every other page */
.hero-home .row { display: grid; grid-template-columns: minmax(0, 620fr) minmax(0, 476fr); gap: 56px; align-items: stretch; }
.hero-home .h1 { margin-top: 0; font-size: 38px; }
.hero-home .text { padding: 40px 40px 38px; }
.hero-home .lede { margin-top: 18px; }
.hero-home .ctas { margin-top: 28px; }
.film-col { position: relative; display: flex; flex-direction: column; }
.hero-home .row > .lens { min-height: 326px; }
.hero-home .row > .lens.frosted { --lens-tint: 0.7; --core-blur: 8px; }  /* founder: a bit less see-through */
/* founder: less see-through panels on Home, Workflow and Security (Legal: top panel only) */
main:has(.hero-home) .glass, .solid main .glass { --tint: 0.78; -webkit-backdrop-filter: none; backdrop-filter: none; }  /* fixed frosting: a live blur here made scrolling heavy */
.solid main .lens { --lens-tint: 0.7; --core-blur: 8px; }
.lens.solid-panel { --lens-tint: 0.7; --core-blur: 8px; }
.film { flex: 1; position: relative; min-height: 220px; }
.film .screen { position: absolute; inset: 10px; border-radius: 24px; overflow: hidden; background: var(--dark); box-shadow: 0 18px 40px -22px rgba(18,13,36,0.55); }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.film-caption { position: absolute; left: 0; right: 0; top: 100%; margin-top: 14px; padding: 0 12px; text-align: center; }
.film-caption .line { font-size: 13.5px; line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-shadow: 0 0 2px rgba(255,255,255,0.95), 0 0 12px rgba(255,255,255,0.9); }
.film-caption .line span { display: block; font-weight: 500; color: var(--ink-72); }
.film-caption .fine { margin-top: 5px; font-size: 10.5px; color: var(--ink-60); }
.split { display: grid; grid-template-columns: minmax(0, 588fr) minmax(0, 540fr); gap: 24px; align-items: stretch; }
.split > .lens { display: flex; flex-direction: column; }
.window { position: relative; flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.window-top { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 6px; }
.ticks { display: flex; gap: 6px; }
.ticks span { width: 8px; height: 8px; border-radius: 50%; background: rgba(28,22,51,0.16); }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: var(--pill); border: 1px solid var(--pill-bd); font-size: 11px; font-weight: 500; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #2FBF7F; box-shadow: 0 0 10px rgba(47,191,127,0.75); }
.panes { flex: 1; min-height: 250px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pane { position: relative; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 14px 30px -18px rgba(76,48,140,0.55); }
.pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pane::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55); }
.pane .label { position: absolute; z-index: 1; left: 9px; top: 9px; padding: 4px 10px; border-radius: 999px; font-size: 11px; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.metrics.wide-last { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
.metric { padding: 10px 12px; border-radius: 14px; background: var(--pill); border: 1px solid var(--pill-bd); }
.metric b { display: block; font-size: 19px; line-height: 1.1; font-weight: 600; font-stretch: 104%; letter-spacing: -0.03em; }
.metric span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; color: var(--ink-66); }
.controls { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.control { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--pill); border: 1px solid var(--pill-bd); }
.icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.95); box-shadow: 0 6px 14px -8px rgba(76,48,140,0.45); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.icon svg { width: 17px; height: 17px; }
.icon.sm { width: 32px; height: 32px; background: var(--pill); border-color: var(--pill-bd); box-shadow: none; }
.icon.sm svg { width: 15px; height: 15px; }
.control b { display: block; font-size: 13px; font-weight: 600; }
.control span span, .control > span > span:last-child { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--ink-70); }

/* ---------- home sections ---------- */
.study { position: relative; height: 380px; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px -26px rgba(76,48,140,0.45); cursor: ew-resize; }
.study > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { position: absolute; inset: 0; background: #fff; clip-path: inset(0 100% 0 0); }
.ba-before img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 54px 44px 96px; object-fit: contain; }
.ba-line { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.ba-line::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: rgba(255,255,255,0.95); box-shadow: 0 0 14px rgba(76,48,140,0.35); }
.ba-line span { position: absolute; left: -17px; top: 50%; margin-top: -17px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.94); box-shadow: 0 6px 18px -6px rgba(28,22,51,0.5); display: flex; align-items: center; justify-content: center; }
.ba-line svg { width: 16px; height: 16px; }
.study:not(.scrub) .ba-before { animation: e-wipe 10s cubic-bezier(0.65, 0, 0.3, 1) 2; animation-delay: var(--d, 0s); }
.study:not(.scrub) .ba-line { animation: e-wipe-line 10s cubic-bezier(0.65, 0, 0.3, 1) 2; animation-delay: var(--d, 0s); }
.study.scrub .ba-before { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.study.scrub .ba-line { opacity: 1; transform: translateX(var(--p, 0%)); }
.study .cat { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 11px; }
.study figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: 16px; background: rgba(18,16,30,0.46); border: 1px solid rgba(255,255,255,0.28); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.thumb { position: relative; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #fff; overflow: hidden; }
.thumb img { position: absolute; left: 5px; top: 5px; width: 26px; height: 26px; object-fit: contain; }
.study figcaption b { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.study figcaption span span { display: block; font-size: 11px; color: rgba(255,255,255,0.84); }
.step { height: 250px; padding: 20px; display: flex; flex-direction: column; }
.step.short { height: 240px; }
.step h3 { margin-top: 12px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.step p { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-72); }
.step .foot { margin-top: auto; padding-top: 14px; }
.slots { display: flex; align-items: center; gap: 6px; }
.slot { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 1px dashed rgba(28,22,51,0.3); display: flex; align-items: center; justify-content: center; color: var(--ink-70); }
.slot svg { width: 11px; height: 11px; }
.slot.photo { border: 0; background: #fff; overflow: hidden; animation: e-ping 2.2s ease-out 3; }
.slot.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.slots small { margin-left: 4px; font-size: 11px; color: var(--ink-64, rgba(28,22,51,0.64)); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--pill); border: 1px solid var(--pill-bd); font-size: 11px; }
.chip img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.chip .on { position: absolute; inset: -1px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--dark); color: #fff; font-weight: 600; opacity: 0; animation: e-chipon 6s ease 2; }
.chips .chip:first-child .on { opacity: 1; }  /* resting: first scene selected */
.chips .chip:nth-child(2) .on { animation-iteration-count: 2.6667; }  /* all three chips finish together */
.chips .chip:nth-child(3) .on { animation-iteration-count: 2.3333; }
.chip.words { padding: 4px 9px; }
.chip.words svg { width: 11px; height: 11px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.tile { position: relative; height: 38px; border-radius: 9px; overflow: hidden; background: var(--pill); border: 1px solid var(--pill-bd); }
.tile .shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%); animation: e-shimmer 1.8s ease-in-out 7; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: e-tile 7s cubic-bezier(0.3, 0.7, 0.3, 1) 1.5 both; }  /* ends with the images showing */
.trust { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 32px; row-gap: 24px; align-items: start; }
.trust .intro p { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--ink-72); }
.trust .items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.item { padding: 16px; display: flex; gap: 12px; }
.item h3, .item h4 { font-size: 14px; font-weight: 600; }
.item p { margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--ink-70); }
.cta-sec { padding-bottom: var(--gap); }
.cta { width: min(640px, 100%); margin: 0 auto; border-radius: 32px; }
.cta .inner { padding: 42px 44px 34px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta h2 { margin-top: 14px; font-size: 38px; line-height: 1.06; font-weight: 600; font-stretch: 104%; letter-spacing: -0.035em; }
.cta h2:first-child { margin-top: 0; }
.cta h2 span { display: block; }
.cta h2 .soft { color: var(--ink-62); }
.cta p { margin-top: 14px; max-width: 430px; font-size: 14px; line-height: 1.6; color: var(--ink-76); }
.goo { position: relative; margin-top: 16px; width: 420px; max-width: 100%; height: 84px; }
.goo .blobs { position: absolute; inset: 0; filter: url(#e-goo); }
.goo .blobs span { position: absolute; background: #1C1633; }
.goo .pill { left: calc(50% - 90px); top: 16px; width: 180px; height: 52px; border-radius: 26px; }
.goo .d1 { left: calc(50% + 52px); top: 27px; width: 30px; height: 30px; border-radius: 50%; animation: e-drop 5s cubic-bezier(0.6, 0, 0.3, 1) 2; }
.goo .d2 { left: calc(50% - 74px); top: 29px; width: 26px; height: 26px; border-radius: 50%; animation: e-drop2 6.5s cubic-bezier(0.6, 0, 0.3, 1) 2; }
.goo a { position: absolute; left: calc(50% - 90px); top: 16px; width: 180px; height: 52px; border-radius: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-size: 14.5px; font-weight: 600; }
.goo a svg { width: 15px; height: 15px; }
.cta .link { margin-top: 2px; font-size: 13px; color: var(--ink-76); }

/* ---------- inner pages ---------- */
.list-card { padding: 24px; }
.list-card h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.list-card > p { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink-72); }
.bullets { margin-top: 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bullets li { display: flex; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--ink-74); }
.bullets .dot { margin-top: 7px; }
.strip { margin-top: 14px; }
.strip .cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip .cell { padding: 18px 20px; }
.strip .cell + .cell { border-left: 1px solid var(--etch); box-shadow: inset 1px 0 0 rgba(255,255,255,0.6); }
.strip b { display: block; font-size: 14px; font-weight: 600; }
.strip span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.55; color: var(--ink-68); }
.qa { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 14px; }
.qa-copy { padding: 26px; }
.qa-copy h3 { font-size: 21px; line-height: 1.22; font-weight: 600; font-stretch: 104%; letter-spacing: -0.025em; }
.qa-copy p { margin-top: 12px; font-size: 13.5px; line-height: 1.65; color: var(--ink-72); }
.gates { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gates li { display: flex; flex-direction: column; }
.gates .glass { flex: 1; border-radius: 18px; }
.principle { min-height: 250px; padding: 20px; display: flex; flex-direction: column; }
.principle h3 { margin-top: auto; padding-top: 22px; font-size: 15.5px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.principle p { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-72); }
.bento { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bento .a { grid-column: 1; grid-row: 1; }
.bento .b { grid-column: 2; grid-row: 1 / span 2; }
.bento .c { grid-column: 1; grid-row: 2; }
.band { margin-top: 24px; }
.band .cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.band .cell { padding: 22px 24px; }
.band .cell:nth-child(2n) { border-left: 1px solid var(--etch); box-shadow: inset 1px 0 0 rgba(255,255,255,0.6); }
.band .cell:nth-child(n+3) { border-top: 1px solid var(--etch); }
.band .cell:nth-child(n+3):nth-child(2n) { box-shadow: inset 1px 0 0 rgba(255,255,255,0.6), inset 0 1px 0 rgba(255,255,255,0.6); }
.band .cell:nth-child(n+3):nth-child(2n+1) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.band b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.band span { display: block; margin-top: 7px; font-size: 13px; line-height: 1.6; color: var(--ink-72); }

/* ---------- legal center ---------- */
.hero-legal .lens { width: min(660px, 100%); }
.docs-head { display: flex; align-items: center; justify-content: space-between; }
.docs-head .count { font-size: 12px; color: var(--ink-64, rgba(28,22,51,0.64)); font-variant-numeric: tabular-nums; }
.doc-list { margin: 16px 0 0; padding: 6px; list-style: none; }
.doc-list li + li { border-top: 1px solid var(--etch); }
.doc-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 20px 22px; border-radius: 16px; transition: background 0.3s ease; }
.doc-row:hover { background: rgba(255,255,255,0.55); }
.doc-row .num { font-size: 34px; }
.doc-row .title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.doc-row h2 { font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.doc-row p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-74); }
.doc-row .arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--pill); border: 1px solid var(--pill-bd); display: flex; align-items: center; justify-content: center; }
.doc-row .arrow svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.doc-row:hover .arrow svg { transform: translateX(3px); }
.badge { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: rgba(176,139,255,0.14); border: 1px solid rgba(176,139,255,0.35); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); }
.contact { width: min(640px, 100%); margin: 0 auto; border-radius: 28px; }
.contact .inner { padding: 32px 40px; text-align: center; }
.contact h2 { font-size: 26px; line-height: 1.15; font-weight: 600; font-stretch: 104%; letter-spacing: -0.03em; }
.contact p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-76); }
.mail { font-weight: 600; background: linear-gradient(90deg, #7C4DFF 0%, #F0773A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- legal documents (markup is shared with the app's Legal Center, keep class names) ---------- */
.doc-hero { padding-top: 176px; }
.doc-hero .lens { width: min(660px, 100%); }
.doc-hero .container { padding: 30px 40px 32px; display: flex; flex-direction: column; align-items: flex-start; }
.back-link { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px; border-radius: 999px; background: var(--pill); border: 1px solid var(--pill-bd); font-size: 12.5px; font-weight: 500; }
.back-link svg { width: 13px; height: 13px; }
.doc-hero h1 { margin-top: 16px; font-size: 40px; line-height: 1.08; font-weight: 600; font-stretch: 104%; letter-spacing: -0.035em; }
.doc-hero .meta { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--ink-72); font-variant-numeric: tabular-nums; }
.doc-hero .meta .sep { color: rgba(28,22,51,0.35); }
.doc-wrap, .sp-wrap { padding: 20px 0 90px; }
.doc-wrap .doc-grid, .sp-wrap .container { width: min(var(--wrap), calc(100% - 64px)); margin: 0 auto; }
.doc-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.toc { position: sticky; top: 24px; padding: 20px 18px 16px; border-radius: 20px; --paper: 0.76; }
.toc-label { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-62); }
.toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1px; }
.toc a { display: flex; gap: 10px; padding: 5px 8px; border-radius: 8px; font-size: 12.5px; line-height: 1.4; color: var(--ink-80); transition: background 0.2s ease; }
.toc a:hover { background: rgba(28,22,51,0.06); }
.toc .tn { flex-shrink: 0; min-width: 18px; color: var(--ink-42); font-variant-numeric: tabular-nums; }
.doc-content { padding: 52px 64px 56px; }
.doc-content .lead { font-size: 16px; line-height: 1.7; color: rgba(28,22,51,0.9); }
.doc-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.doc-section h2 { display: flex; gap: 12px; font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.doc-section h2 .n { color: rgba(28,22,51,0.4); font-weight: 500; font-variant-numeric: tabular-nums; }
.doc-section p { margin-top: 12px; font-size: 14.5px; line-height: 1.75; color: var(--ink-80); }
.doc-section p strong, .doc-section li strong { font-weight: 600; color: var(--ink); }
.doc-section ul { margin-top: 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.doc-section li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.7; color: var(--ink-80); }
.doc-section li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
a.inl { color: var(--violet); text-decoration: underline; text-decoration-color: rgba(90,63,196,0.35); text-underline-offset: 2px; }
.callout, .sp-note { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: rgba(176,139,255,0.1); border: 1px solid rgba(176,139,255,0.3); }
.callout p, .sp-note p { margin-top: 0; font-size: 14px; line-height: 1.7; color: var(--ink-82); }
.sp-note p + p { margin-top: 10px; }
.sp-wrap .container { padding: 44px 48px 48px; }
.sp-intro { max-width: 760px; font-size: 16px; line-height: 1.7; color: rgba(28,22,51,0.9); }
.sp-table { margin-top: 28px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,0.55); }
.sp-head, .sp-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 0.8fr); gap: 24px; padding: 16px 22px; align-items: start; }
.sp-head { border-bottom: 1px solid var(--line); background: rgba(28,22,51,0.03); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-62); }
.sp-row + .sp-row { border-top: 1px solid var(--etch); }
.sp-name { font-size: 14.5px; font-weight: 600; }
.sp-entity { margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--ink-62); }
.sp-purpose { font-size: 14px; line-height: 1.6; color: var(--ink-80); }
.sp-loc { font-size: 13px; line-height: 1.5; color: var(--ink-68); }
.sp-note { margin-top: 24px; max-width: 760px; }

/* ---------- book a demo ---------- */
.demo { display: grid; grid-template-columns: 456px minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 110px; }
.pitch { padding: 38px 36px 36px; }
.pitch .h1 .grad { display: inline; }
.pitch-points { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.point { display: flex; gap: 14px; align-items: flex-start; }
.point .icon { width: 34px; height: 34px; }
.point .icon svg { width: 16px; height: 16px; }
.point h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.point p { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--ink-72); }
.quote { margin-top: 26px; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,0.42); border: 1px solid rgba(255,255,255,0.85); }
.quote p { font-size: 14px; font-style: italic; line-height: 1.6; color: var(--ink-84); }
.card-demo { padding: 34px 40px; }
.step-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 11.5px; color: var(--ink-62); font-variant-numeric: tabular-nums; }
.step-bar .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(176,139,255,0.14); border: 1px solid rgba(176,139,255,0.35); color: var(--violet); font-weight: 600; }
.step-bar .pill i { width: 6px; height: 6px; border-radius: 50%; background: #7C4DFF; box-shadow: 0 0 6px rgba(124,77,255,0.6); }
.card-demo h2 { margin-top: 22px; font-size: 26px; line-height: 1.15; font-weight: 600; font-stretch: 104%; letter-spacing: -0.03em; }
.card-demo .sub { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-72); }
.form { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field > .label { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-80); }
.req { color: #D9622B; font-size: 11px; }
.in { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(28,22,51,0.14); background: rgba(255,255,255,0.78); font: inherit; font-size: 14px; color: var(--ink); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.in::placeholder { color: var(--ink-42); }
.in:focus { outline: none; border-color: rgba(124,77,255,0.6); background: #fff; box-shadow: 0 0 0 3px rgba(176,139,255,0.28); }
textarea.in { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.select { position: relative; }
.select .in { padding-right: 38px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.select svg { position: absolute; right: 14px; top: 15px; width: 14px; height: 14px; pointer-events: none; color: rgba(28,22,51,0.55); }
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip { position: relative; cursor: pointer; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,0.55); border: 1px solid rgba(28,22,51,0.12); color: var(--ink); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.cat-chip:hover { background: rgba(255,255,255,0.9); }
.cat-chip:has(input:checked) { background: var(--dark); border-color: var(--dark); color: #fff; }
.cat-chip input { position: absolute; opacity: 0; pointer-events: none; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check input { flex-shrink: 0; margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--dark); cursor: pointer; }
.check span { font-size: 13px; line-height: 1.5; color: var(--ink-74); }
.check a { color: var(--violet); text-decoration: underline; text-decoration-color: rgba(90,63,196,0.35); text-underline-offset: 2px; }
.form-error { padding: 10px 12px; border-radius: 12px; background: rgba(217,98,43,0.08); border: 1px solid rgba(217,98,43,0.3); font-size: 13px; color: #9A3C12; }
.submit { margin-top: 4px; width: 100%; height: 48px; justify-content: center; font-size: 14.5px; }
.submit svg { width: 15px; height: 15px; }
.submit .btn-spinner { display: none; animation: spin 0.8s linear infinite; }
.submit[data-loading="true"] .btn-arrow { display: none; }
.submit[data-loading="true"] .btn-spinner { display: inline-block; }
.submit[disabled] { opacity: 0.7; cursor: not-allowed; }
.trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 11.5px; color: var(--ink-66); }
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row svg { width: 12px; height: 12px; color: var(--violet); }
.success { display: none; padding: 24px 4px 4px; text-align: center; }
.success.shown { display: block; }
.success .check-circle { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: rgba(176,139,255,0.16); border: 1px solid rgba(176,139,255,0.45); display: flex; align-items: center; justify-content: center; color: var(--violet); }
.success .check-circle svg { width: 28px; height: 28px; }
.success h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.success > p { margin: 10px auto 0; max-width: 32rem; font-size: 14px; line-height: 1.6; color: var(--ink-74); }
.success strong { font-weight: 600; color: var(--ink); }
.next { margin-top: 26px; text-align: left; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,0.6); border: 1px solid var(--etch); }
.next h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-60); }
.next ol { margin-top: 10px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.55; color: rgba(28,22,51,0.78); }

/* ---------- footer ---------- */
.site-footer .wrap { padding: 18px 0 34px; border-top: 1px solid rgba(28,22,51,0.12); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.site-footer .left { display: flex; align-items: center; gap: 12px; }
.site-footer img { height: 18px; width: auto; }
.site-footer .left span { font-size: 12px; color: var(--ink-60); }
.site-footer nav { display: flex; align-items: center; gap: 18px; font-size: 12.5px; }
.site-footer nav a { color: var(--ink-72); }

/* ---------- motion ---------- */
@keyframes e-drop { 0%, 12% { transform: translate3d(0,0,0) scale(0.6); } 45%, 55% { transform: translate3d(110px,0,0) scale(1); } 88%, 100% { transform: translate3d(0,0,0) scale(0.6); } }
@keyframes e-drop2 { 0%, 20% { transform: translate3d(0,0,0) scale(0.5); } 55%, 62% { transform: translate3d(-110px,0,0) scale(0.82); } 92%, 100% { transform: translate3d(0,0,0) scale(0.5); } }
@keyframes e-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes e-wipe { 0%, 55% { clip-path: inset(0 100% 0 0); } 66%, 84% { clip-path: inset(0 50% 0 0); } 95%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes e-wipe-line { 0%, 55% { transform: translateX(0); opacity: 0; } 57% { opacity: 1; } 66%, 84% { transform: translateX(50%); opacity: 1; } 95% { transform: translateX(0); opacity: 1; } 97%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes e-ping { 0% { box-shadow: 0 0 0 0 rgba(124,77,255,0.45); } 70%, 100% { box-shadow: 0 0 0 12px rgba(124,77,255,0); } }
@keyframes e-chipon { 0%, 30% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes e-tile { 0%, 6% { opacity: 0; transform: scale(0.86); } 14%, 78% { opacity: 1; transform: scale(1); } 88%, 100% { opacity: 0; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@supports (animation-timeline: view()) {
  @keyframes e-rise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  .rise { animation: e-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .chip .on { opacity: 0; }
  .chips .chip:first-child .on { opacity: 1; }
  .tile img { opacity: 1; }
}

/* ---------- 900–1199px: same layout, tighter ---------- */
@media (max-width: 1199px) {
  :root { --gap: 112px; }
  .trust { grid-template-columns: 240px minmax(0, 1fr); }
  .qa { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .doc-content { padding: 44px 48px 48px; }
}

/* ---------- <900px: stacked mobile ---------- */
@media (max-width: 899px) {
  :root { --gap: 80px; }
  .wrap { width: calc(100% - 32px); }
  .site-nav { top: 14px; }
  .site-nav .bar { grid-template-columns: minmax(0, 1fr) auto; padding: 0 8px 0 18px; height: 54px; }
  .tabs, .nav-actions .login { display: none; }
  .menu { display: block; }
  .nav-actions { gap: 8px; }
  .hero, .hero-home, .doc-hero { --hero-top: 104px; padding-top: 104px; }
  .hero-home .row, .split, .demo, .trust, .qa, .doc-grid, .bento { grid-template-columns: minmax(0, 1fr); }
  .hero-home .row { gap: 16px; }
  .film { flex: none; aspect-ratio: 16 / 9.4; }
  .film-caption { position: static; margin-top: 12px; }
  .hero-home .row > .lens { min-height: 0; }
  .hero .text, .hero-home .text { padding: 28px 22px 26px; }
  .h1, .hero-home .h1, .doc-hero h1 { font-size: 30px; }
  .h2 { font-size: 26px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cols-2, .cols-3, .cols-4, .trust .items, .gates, .row2, .strip .cells, .band .cells { grid-template-columns: minmax(0, 1fr); }
  .strip .cell + .cell, .band .cell:nth-child(n) { border-left: 0; border-top: 1px solid var(--etch); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
  .strip .cell:first-child, .band .cell:first-child { border-top: 0; box-shadow: none; }
  .bento .a, .bento .b, .bento .c { grid-column: auto; grid-row: auto; }
  .study { height: 320px; }
  .step, .step.short, .principle { height: auto; min-height: 0; }
  .step .foot { margin-top: 16px; }
  .principle h3 { margin-top: 0; }
  .cta .inner { padding: 32px 22px 28px; }
  .cta h2 { font-size: 30px; }
  .toc { position: static; }
  .doc-wrap .doc-grid, .sp-wrap .container { width: calc(100% - 32px); }
  .doc-content { padding: 28px 22px 32px; }
  .sp-wrap .container { padding: 26px 20px; }
  .sp-head { display: none; }
  .sp-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pitch, .card-demo { padding: 26px 20px; }
  .doc-row { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 12px; }
  .doc-row .num { font-size: 26px; }
  .doc-row .arrow { display: none; }
  .contact .inner { padding: 26px 20px; }
  .metrics.wide-last { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* lens feather per element */
.film .lens-core { --f: 18px; }
.film { border-radius: 32px; }