/* ==========================================================================
   EVNTS — marketing site
   The owner's landing design (TASK-4.22, 2026-10-01): the tokens, faces and
   values of EVNTS-Landing-Page-and-Web-App-New-UI-main.zip — its
   src/app/globals.css and src/components/landing/*.tsx — hand-written as
   plain CSS with the values its Tailwind utilities compute to. No build
   step, no framework: the site is static files behind a CSP of
   font-src 'self' and script-src 'self'.

   Breakpoints are Tailwind's: sm 640px, md 768px, lg 1024px.
   ========================================================================== */

/* ---------- Faces ----------
   The design's two faces, latin subset, the very files next/font serves it
   (Google Fonts, fetched 2026-10-01), vendored because the CSP is
   font-src 'self'. Manrope is variable on wght (200–800); Bricolage
   Grotesque on opsz (12–96) and wght (200–800), its optical size following
   the rendered size. The fallbacks are next/font's metric-matched Arial, so
   a swap does not move the page. Licences: OFL.txt beside each file. */
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/manrope/manrope-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:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;
  src:url(/assets/fonts/bricolage-grotesque/bricolage-grotesque-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:"Manrope Fallback";src:local(Arial);ascent-override:103.31%;descent-override:29.07%;line-gap-override:0%;size-adjust:103.19%}
@font-face{font-family:"Bricolage Grotesque Fallback";src:local(Arial);ascent-override:88.21%;descent-override:25.61%;line-gap-override:0%;size-adjust:105.43%}

/* ---------- Tokens ----------
   The design's :root palette, radii, elevation and curves. Two values
   differ, both text colours below WCAG AA, by the CTO's standing decision of
   2026-09-19 for every EVNTS surface (F-67, "darken, all surfaces"): ink-3
   #86868b → #69696e and ink-4 #b4b4bb → #69696d. The dark palette keeps the
   design's ink-3 and lifts ink-4 onto it, the same rule mirrored (4.22w-F2). */
:root{
  color-scheme:light;
  --ink:#1d1d1f;
  --ink-2:#4a4a4f;
  --ink-3:#69696e;
  --ink-4:#69696d;
  --on-ink:#ffffff;
  --canvas:#f5f5f7;
  --paper:#ffffff;
  --paper-2:#f5f5f7;
  --paper-3:#e8e8ed;
  --line:#e3e3e8;
  --line-2:#ededf1;
  --accent:#a238ff;
  --accent-ink:#7c1fd6;
  --accent-soft:#f3e8ff;
  --good:#2bb673;
  --danger:#d70015;
  --gold:#c9a24a;
  --scrollbar-thumb:#d6d6dc;--scrollbar-thumb-hover:#c2c2cb;

  --elev-1:0 1px 2px rgb(0 0 0 / 0.05),0 4px 14px rgb(0 0 0 / 0.06);
  --elev-2:0 10px 30px -10px rgb(0 0 0 / 0.18);
  --elev-3:0 30px 60px -20px rgb(0 0 0 / 0.35);

  --radius-xs:8px;--radius-sm:12px;--radius-md:18px;--radius-lg:24px;--radius-xl:32px;--radius-pill:9999px;
  --radius-card:22px;
  /* the gap between cards on the other pages (the landing's gap-4) */
  --gap:16px;

  --ease-evnts:cubic-bezier(0.2,0.7,0.2,1);
  --ease-exit:cubic-bezier(0.4,0,1,1);
  --ease-overshoot:cubic-bezier(0.34,1.42,0.5,1);
  /* Tailwind's default transition curve and duration, which the design's
     `transition-*` utilities use. */
  --ease-tw:cubic-bezier(0.4,0,0.2,1);
  --dur-tw:150ms;

  --font-sans:"Manrope","Manrope Fallback","Inter",ui-sans-serif,system-ui,sans-serif;
  --font-display:"Bricolage Grotesque","Bricolage Grotesque Fallback","Manrope","Manrope Fallback",ui-sans-serif,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  --band:#09090c;
  --prism:radial-gradient(28% 32% at 38% 18%,rgba(162,56,255,0.55),transparent 72%),radial-gradient(24% 28% at 62% 14%,rgba(62,197,255,0.42),transparent 72%),radial-gradient(22% 26% at 52% 34%,rgba(255,95,162,0.34),transparent 72%),radial-gradient(20% 24% at 44% 40%,rgba(255,179,71,0.26),transparent 72%),radial-gradient(18% 22% at 58% 44%,rgba(43,182,115,0.2),transparent 72%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#f5f5f7;--ink-2:#aeaeb2;--ink-3:#8e8e93;--ink-4:#8e8e93;--on-ink:#1d1d1f;
    --canvas:#000000;--paper:#1c1c1e;--paper-2:#2c2c2e;--paper-3:#3a3a3c;--line:#38383a;--line-2:#2c2c2e;
    --accent:#b86bff;--accent-ink:#cf9bff;--accent-soft:#24123a;
    --good:#3ddc97;--danger:#ff6f5e;--gold:#d9b45f;--scrollbar-thumb:#33333c;--scrollbar-thumb-hover:#45454f;
    --elev-1:0 0 0 1px rgb(255 255 255 / 0.045);
    --elev-2:0 14px 34px -14px rgb(0 0 0 / 0.7);
    --elev-3:0 30px 60px -20px rgb(0 0 0 / 0.82);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#f5f5f7;--ink-2:#aeaeb2;--ink-3:#8e8e93;--ink-4:#8e8e93;--on-ink:#1d1d1f;
  --canvas:#000000;--paper:#1c1c1e;--paper-2:#2c2c2e;--paper-3:#3a3a3c;--line:#38383a;--line-2:#2c2c2e;
  --accent:#b86bff;--accent-ink:#cf9bff;--accent-soft:#24123a;
  --good:#3ddc97;--danger:#ff6f5e;--gold:#d9b45f;--scrollbar-thumb:#33333c;--scrollbar-thumb-hover:#45454f;
  --elev-1:0 0 0 1px rgb(255 255 255 / 0.045);
  --elev-2:0 14px 34px -14px rgb(0 0 0 / 0.7);
  --elev-3:0 30px 60px -20px rgb(0 0 0 / 0.82);
}

/* ---------- Base (Tailwind's preflight, the parts the pages rely on) ---------- */
*,*::before,*::after{box-sizing:border-box;border:0 solid}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);
  font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,p,blockquote,figure,ol,ul{margin:0}
ol,ul{list-style:none;padding:0}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit}
img,svg{display:block;vertical-align:middle}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:inherit}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border-radius:0}
button{cursor:pointer;padding:0}
table{border-collapse:collapse}
::selection{background:var(--accent-soft)}
/* The glows behind the landing's pictures reach 40px past their column,
   which in the design makes the page scroll sideways at every width up to
   1440 (scrollWidth 410 at 390, 776 at 768, 1288 at 1280). Clipped here,
   where nothing inside the viewport changes (4.22w-F3). clip, not hidden,
   so no scroll container is made and the anchors still land. */
main{overflow-x:clip}
/* The design's quiet scrollbars, page-wide — and, because this rule is not
   in a layer while the design's no-scrollbar utility is, they win on the
   case-study carousel too, which therefore shows a thin bar as the design's
   does. */
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ==========================================================================
   The nav — the design's, in the hero; its light form on light pages
   ========================================================================== */
.nav{position:relative;color:var(--ink);background:var(--paper)}
.nav.on-dark{position:absolute;inset:0 0 auto 0;z-index:10;color:#fff;background:transparent}
.nav-in{position:relative;max-width:80rem;margin-inline:auto;height:64px;display:flex;align-items:center;gap:24px;padding-inline:20px}
.nav-brand{display:flex;align-items:center;gap:6px}
.nav-brand svg{height:20px;width:auto}
.nav-brand span{font-size:19px;font-weight:900;letter-spacing:-0.03em}
.nav-links{display:none;align-items:center;gap:24px;font-size:14px;line-height:20px;font-weight:500;color:var(--ink-2)}
.nav.on-dark .nav-links{color:rgb(255 255 255 / 0.7)}
.nav-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-cta{display:inline-flex;height:36px;align-items:center;border-radius:var(--radius-pill);padding-inline:16px;font-size:14px;line-height:20px;font-weight:600;transition:transform var(--dur-tw) var(--ease-tw)}
.nav-cta.btn-white{background:#fff;color:#000}
.nav-cta.btn-ink{background:var(--ink);color:var(--on-ink)}
@media (hover:hover){
  .nav-links a:hover{color:var(--ink)}
  .nav.on-dark .nav-links a:hover{color:#fff}
  .nav-cta:hover{transform:scale(1.03)}
}
@media (min-width:640px){.nav-in{padding-inline:32px}}
@media (min-width:768px){.nav-links{display:flex}}

/* ==========================================================================
   The landing (index) — section for section, as the design draws it
   ========================================================================== */
.lp-wrap{max-width:80rem;margin-inline:auto;padding-inline:20px}
@media (min-width:640px){.lp-wrap{padding-inline:32px}}
.lp-ico{width:16px;height:16px;flex:none}

/* shared type */
.lp-eyebrow{font-size:11px;line-height:14px;letter-spacing:0.14em;font-weight:600;text-transform:uppercase;color:var(--ink-3)}
.lp-eyebrow-accent{color:var(--accent)}
.lp-h2{font-family:var(--font-display);font-size:clamp(2rem,1.4rem + 2.4vw,3.25rem);font-weight:600;line-height:1.02;letter-spacing:-0.035em}
.lp-h2-center{text-align:center;line-height:1.5}
.lp-h2-feature{max-width:32rem;font-family:var(--font-display);font-size:clamp(1.75rem,1.3rem + 1.8vw,2.75rem);font-weight:600;line-height:1.05;letter-spacing:-0.03em}
.lp-h2-band{font-family:var(--font-display);font-size:clamp(2.25rem,1.4rem + 3.4vw,4rem);font-weight:600;line-height:1;letter-spacing:-0.04em}
.lp-h2-cases{margin-top:16px;max-width:56rem;font-family:var(--font-display);font-size:clamp(2.25rem,1.4rem + 3.4vw,4.25rem);font-weight:600;line-height:1;letter-spacing:-0.04em}
.lp-body{font-size:18px;line-height:1.625;color:var(--ink-2)}
.lp-body-xl{max-width:36rem}
.lp-body-lg{max-width:32rem}
.lp-body-xxl{margin-top:24px;max-width:42rem}
.lp-stack-6>:not(:last-child){margin-bottom:24px}
.lp-stack-5>:not(:last-child){margin-bottom:20px}
.lp-iris{background-image:linear-gradient(90deg,#a238ff,#ff5fa2 45%,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-strong{font-weight:600;color:var(--ink)}
.lp-who{display:block;font-weight:600;color:var(--ink)}
.lp-where{display:block;color:var(--ink-3)}
.lp-tag{position:absolute;left:12px;top:12px;border-radius:var(--radius-pill);background:rgb(255 255 255 / 0.9);padding:2px 8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.025em;color:#000}

.lp-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
@media (hover:hover){
  .lp-compare:hover{background-color:rgb(255 255 255 / 0.1)}
  .lp-link:hover{text-decoration-line:underline}
}

/* The App Store badge — Apple's own artwork, unaltered (the owner's direction
   of 2026-10-02: every way into the app but the header's button). It takes
   the height of the button it replaced, so the layout keeps its rhythm. */
.store-badge{display:inline-flex;border-radius:8px}
.store-badge img{display:block;width:auto}
.store-badge-48 img{height:48px}
.store-badge-44 img{height:44px}
.lp-plan-badge-row{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.plan-badge{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.plan .plan-badge .btn{width:auto}
/* Every badge has "Open the app" beside it (the owner, 2026-10-02): the
   live app's universal link, in the button the design draws there. */
.get-app{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.get-app .btn{margin:0}
.legal .get-app{margin:8px 0 14px}

/* "Open the app" beside the App Store badge: an EVNTS badge drawn to sit
   with Apple's, as TASK-4.43's email draws its EVNTS badge (approved by the
   CTO, 2026-09-30) — Apple's height, black, its #A6A6A6 outline and corner,
   the EVNTS mark and two lines — in the site's face, as live text. The
   email's metrics are for 40px; --s scales them to the badge beside it. */
.app-badge{--s:1;display:inline-flex;align-items:center;flex:none;height:calc(40px * var(--s));padding:0 calc(12px * var(--s)) 0 calc(10px * var(--s));gap:calc(8px * var(--s));border:1px solid #a6a6a6;border-radius:calc(7px * var(--s));background:#000;color:#fff;font-family:var(--font-sans)}
.app-badge-48{--s:1.2}
.app-badge-44{--s:1.1}
.app-badge svg{width:calc(17px * var(--s));height:calc(22px * var(--s));flex:none}
.app-badge-lines{display:flex;flex-direction:column;justify-content:center}
.app-badge-small{font-size:calc(9px * var(--s));line-height:calc(10px * var(--s));font-weight:500;letter-spacing:0.01em}
.app-badge-big{font-size:calc(15.5px * var(--s));line-height:calc(18px * var(--s));font-weight:600;letter-spacing:-0.01em;white-space:nowrap}

/* the prism, in the dark bands */
.lp-prism{pointer-events:none;position:absolute;inset:0;z-index:-1;background:var(--prism)}

/* ---- Hero ---- */
.lp-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--band);color:#fff;padding-top:64px}
.lp-hero-body{position:relative;max-width:80rem;margin-inline:auto;padding:64px 20px 0;text-align:center}
@media (min-width:640px){.lp-hero-body{padding:96px 32px 0}}
.lp-h1{max-width:56rem;margin:24px auto 0;font-family:var(--font-display);font-size:clamp(2.75rem,1.5rem + 5vw,5.5rem);font-weight:600;line-height:0.95;letter-spacing:-0.04em}
.lp-hero-lead{max-width:42rem;margin:24px auto 0;font-size:18px;line-height:1.625;color:rgb(255 255 255 / 0.7)}
.lp-ctas{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.lp-phone{position:relative;margin-top:48px;display:flex;justify-content:center}
.lp-phone img{height:auto;width:70vw;max-width:440px;transform:translateX(6%)}

/* ---- Glow (behind the collage and each feature picture) ---- */
.lp-glow{position:relative;isolation:isolate}
.lp-glow-light{position:absolute;inset:-40px;z-index:-1}

/* ---- Pitch ---- */
.lp-pitch{max-width:80rem;margin-inline:auto;display:grid;align-items:center;gap:56px;padding:96px 20px}
@media (min-width:640px){.lp-pitch{padding-inline:32px}}
@media (min-width:1024px){.lp-pitch{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lp-collage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}
.lp-tile{position:relative;min-height:128px;overflow:hidden;border-radius:var(--radius-card)}
.lp-tile-big{grid-column:span 2/span 2;grid-row:span 2/span 2}
.lp-tile-wide{grid-column:span 3/span 3}
/* The collage and the case studies show the events' photographs (the owner,
   2026-10-02) in place of the design's generated covers; a fade under a
   title keeps white words readable on a bright picture. */
.lp-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
/* The polo photograph's subject is in its upper part (the owner, 2026-10-02). */
.lp-photo-top{object-position:50% 28%}
.lp-photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,0.65))}
.lp-tile,.lp-case-cover{background:var(--paper-3)}
.lp-tile-title{position:absolute;left:12px;right:12px;bottom:12px;font-size:14px;line-height:20px;font-weight:600;color:#fff;filter:drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))}
.lp-invites{grid-column:span 3/span 3;display:flex;align-items:center;gap:12px;border-radius:var(--radius-card);border:1px solid var(--line);background:var(--paper);padding:16px;box-shadow:var(--elev-1)}
.lp-faces{display:flex}
.lp-faces span{width:32px;height:32px;border-radius:var(--radius-pill);box-shadow:0 0 0 2px var(--paper)}
.lp-faces span+span{margin-left:-8px}
.lp-invites-text{font-size:14px;line-height:20px;color:var(--ink-2)}

/* ---- Quote ---- */
.lp-quote{max-width:64rem;margin-inline:auto;padding:64px 20px}
@media (min-width:640px){.lp-quote{padding-inline:32px}}
.lp-quote blockquote{font-family:var(--font-display);font-size:clamp(1.75rem,1.2rem + 2.2vw,3rem);font-weight:500;line-height:1.12;letter-spacing:-0.03em;color:var(--ink)}
.lp-quote-by{margin-top:24px;display:flex;align-items:center;gap:12px;font-size:14px;line-height:20px}
.lp-initials{display:grid;width:40px;height:40px;place-items:center;border-radius:var(--radius-pill);background:var(--ink);font-size:14px;line-height:20px;font-weight:700;color:var(--on-ink)}

/* ---- Features ---- */
.lp-features{max-width:80rem;margin-inline:auto;scroll-margin-top:32px;padding:96px 20px}
@media (min-width:640px){.lp-features{padding-inline:32px}}
.lp-feature{display:grid;align-items:center;gap:56px}
.lp-feature+.lp-feature{margin-top:112px}
.lp-feature-copy>:not(:last-child){margin-bottom:20px}
@media (min-width:1024px){
  .lp-feature{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-feature-flip .lp-feature-copy{order:2}
  .lp-feature-flip .lp-feature-art{order:1}
}
.lp-bullets>:not(:last-child){margin-bottom:10px}
.lp-bullets li{display:flex;gap:10px;font-size:15px;line-height:20px;letter-spacing:-0.014em;color:var(--ink-2)}
.lp-bullets svg{margin-top:2px;width:16px;height:16px;flex-shrink:0;color:var(--accent)}

/* the feature pictures */
.lp-card{border-radius:var(--radius-card);border:1px solid var(--line);background:var(--paper);box-shadow:0 24px 60px -28px rgba(0,0,0,0.25)}
.lp-card-label{font-size:11px;line-height:14px;letter-spacing:0.006em;font-weight:600;color:var(--ink-3)}
.lp-itinerary{max-width:28rem;margin-inline:auto;padding:20px}
.lp-itin-rows{margin-top:12px}
.lp-itin-rows li{display:flex;align-items:center;gap:12px;padding-block:12px}
.lp-itin-rows li+li{border-top:1px solid var(--line)}
.lp-itin-when{width:40px;flex-shrink:0;text-align:center}
.lp-itin-day{display:block;font-size:10px;line-height:13px;letter-spacing:0.012em;font-weight:600;text-transform:uppercase;color:var(--ink-4)}
.lp-itin-time{display:block;font-size:14px;line-height:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.lp-itin-thumb{width:40px;height:40px;flex-shrink:0;border-radius:var(--radius-lg)}
.lp-itin-what{min-width:0;flex:1 1 0%}
.lp-itin-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.lp-itin-place{display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:14px;letter-spacing:0.006em;color:var(--ink-3)}
.lp-itin-place svg{width:12px;height:12px}
.lp-itin-actions{margin-top:8px;display:flex;gap:8px}
.lp-chip-ink{display:flex;height:36px;flex:1 1 0%;align-items:center;justify-content:center;border-radius:var(--radius-pill);background:var(--ink);font-size:14px;line-height:20px;font-weight:600;color:var(--on-ink)}
.lp-chip-line{display:flex;height:36px;align-items:center;gap:6px;border-radius:var(--radius-pill);border:1px solid var(--line);padding-inline:16px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.lp-chip-line svg{width:14px;height:14px}

.lp-door{max-width:28rem;margin-inline:auto}
.lp-door>:not(:last-child){margin-bottom:12px}
.lp-scanner{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:24px;background:#111113;box-shadow:0 24px 60px -28px rgba(0,0,0,0.5)}
.lp-scanner-frame{position:absolute;inset:0;display:grid;place-items:center}
.lp-scanner-frame>div{position:relative;width:160px;height:160px}
.lp-corner{position:absolute;width:32px;height:32px;border-color:rgb(255 255 255 / 0.8)}
.lp-corner-tl{left:0;top:0;border-left-width:3px;border-top-width:3px;border-top-left-radius:14px}
.lp-corner-tr{right:0;top:0;border-right-width:3px;border-top-width:3px;border-top-right-radius:14px}
.lp-corner-bl{left:0;bottom:0;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:14px}
.lp-corner-br{right:0;bottom:0;border-bottom-width:3px;border-right-width:3px;border-bottom-right-radius:14px}
.lp-queued{position:absolute;right:16px;top:16px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);background:#b26b00;padding:4px 10px;font-size:11px;font-weight:700;color:#fff}
.lp-queued svg{width:12px;height:12px}
.lp-scan-result{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:20px}
.lp-admit{display:flex;align-items:center;gap:10px;border-radius:var(--radius-pill);background:#fff;padding:14px 20px;color:#000;box-shadow:var(--elev-3)}
.lp-admit svg{width:24px;height:24px}
.lp-admit-name{display:block;font-size:14px;line-height:1.25;font-weight:600}
.lp-admit-meta{display:block;font-size:11px;color:rgb(0 0 0 / 0.6)}
.lp-throughput{display:flex;align-items:center;gap:16px;padding:16px 20px}
.lp-throughput-n{font-size:30px;line-height:36px;font-weight:600;letter-spacing:-0.025em;color:var(--ink);font-variant-numeric:tabular-nums}
.lp-throughput-copy{flex:1 1 0%}
.lp-throughput-label{display:block;font-size:11px;line-height:14px;letter-spacing:0.006em;color:var(--ink-3)}
.lp-bar{display:block;height:6px;overflow:hidden;border-radius:var(--radius-pill)}
.lp-bar>*{display:block;height:100%;border-radius:var(--radius-pill)}
.lp-bar-3{margin-top:6px;background:var(--paper-3)}
.lp-bar-3>*{background:var(--ink)}
.lp-bar-2{background:var(--paper-2)}

.lp-room{max-width:32rem;margin-inline:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lp-person{overflow:hidden;text-align:center}
.lp-person-raised{transform:translateY(-16px)}
.lp-handle{display:block;width:32px;height:4px;margin:10px auto 0;border-radius:var(--radius-pill);background:var(--paper-2)}
.lp-person-body{padding:16px 12px 12px}
.lp-avatar{display:grid;width:48px;height:48px;margin-inline:auto;place-items:center;border-radius:var(--radius-pill);font-size:14px;line-height:20px;font-weight:700;color:#fff}
.lp-person-name{margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.lp-person-role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:13px;letter-spacing:0.012em;color:var(--ink-3)}
.lp-say-hi{margin-top:10px;display:inline-flex;height:28px;align-items:center;border-radius:var(--radius-pill);background:var(--ink);padding-inline:12px;font-size:11px;line-height:14px;letter-spacing:0.006em;font-weight:600;color:var(--on-ink)}
.lp-why{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 8px;font-size:10px;line-height:13px;letter-spacing:0.012em;font-weight:600}

.lp-report{max-width:28rem;margin-inline:auto;padding:20px}
.lp-report-head{display:flex;align-items:baseline;justify-content:space-between}
.lp-report-title{font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.lp-report-when{font-size:11px;line-height:14px;letter-spacing:0.006em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lp-report-stats{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;overflow:hidden;border-radius:var(--radius-xl);border:1px solid var(--line);background:var(--line)}
.lp-report-stats>div{background:var(--paper);padding:12px}
.lp-report-k{font-size:10px;line-height:13px;letter-spacing:0.012em;color:var(--ink-3)}
.lp-report-v{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-0.025em;color:var(--ink);font-variant-numeric:tabular-nums}
.lp-gates{margin-top:16px}
.lp-gates>:not(:last-child){margin-bottom:12px}
.lp-gates>li>:not(:last-child){margin-bottom:6px}
.lp-gate-row{display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:20px}
.lp-gate-i{width:16px;font-size:11px;line-height:14px;letter-spacing:0.006em;font-weight:600;color:var(--ink-4);font-variant-numeric:tabular-nums}
.lp-gate-name{flex:1 1 0%;font-weight:500;color:var(--ink)}
.lp-gate-n{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.lp-gate-bar{margin-left:24px}
.lp-gate-bar>*{background:var(--accent)}
.lp-report-foot{margin-top:16px;font-size:11px;line-height:14px;letter-spacing:0.006em;color:var(--ink-4)}

/* ---- Case studies ---- */
.lp-cases{scroll-margin-top:32px;padding-block:96px}
.lp-carousel{margin-top:48px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px 16px}
@media (min-width:640px){.lp-carousel{padding-inline:32px}}
@media (min-width:1024px){.lp-carousel{padding-inline:max(2rem,calc((100vw - 80rem) / 2 + 2rem))}}
.lp-carousel li{width:18rem;flex-shrink:0;scroll-snap-align:start;overflow:hidden;border-radius:var(--radius-card);border:1px solid var(--line);background:var(--paper)}
@media (min-width:640px){.lp-carousel li{width:20rem}}
.lp-carousel a{display:block;height:100%}
.lp-case-cover{position:relative;height:176px}
.lp-case-body{padding:20px}
.lp-case-body>:not(:last-child){margin-bottom:6px}
.lp-case-city{font-size:11px;line-height:14px;letter-spacing:0.006em;font-weight:600;color:var(--ink-3)}
.lp-case-title{font-size:16px;line-height:24px;font-weight:600;color:var(--ink)}
.lp-case-text{font-size:14px;line-height:1.625;color:var(--ink-3)}

/* ---- Integrations ---- */
.lp-integrations{max-width:80rem;margin-inline:auto;scroll-margin-top:32px;padding:96px 20px}
@media (min-width:640px){.lp-integrations{padding-inline:32px}}
.lp-integ-grid{display:grid;gap:48px}
@media (min-width:1024px){.lp-integ-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}}
.lp-tools{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:1024px){.lp-tools{justify-content:flex-end}}
.lp-tools li{border-radius:var(--radius-pill);border:1px solid var(--line);padding:8px 16px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink-2)}
.lp-stats{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;overflow:hidden;border-radius:var(--radius-card);border:1px solid var(--line);background:var(--line)}
@media (min-width:1024px){.lp-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lp-stats>div{background:var(--paper);padding:24px}
.lp-stat-v{font-size:2rem;font-weight:600;letter-spacing:-0.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.lp-stat-l{font-size:14px;line-height:20px;color:var(--ink-3)}

/* ---- Pricing, on the dark band ---- */
.lp-pricing{position:relative;isolation:isolate;scroll-margin-top:32px;overflow:hidden;background:var(--band);padding-block:96px;color:#fff}
.lp-pricing-light{pointer-events:none;position:absolute;inset:0;z-index:-1;background:radial-gradient(30% 45% at 90% 20%,rgba(162,56,255,0.35),transparent 70%),radial-gradient(25% 35% at 80% 60%,rgba(62,197,255,0.22),transparent 70%)}
.lp-pricing-head{max-width:48rem}
.lp-pricing-head>:not(:last-child){margin-bottom:20px}
.lp-pricing-lead{font-size:18px;line-height:1.625;color:rgb(255 255 255 / 0.65)}
.lp-plans{margin-top:48px;display:grid;gap:16px}
@media (min-width:1024px){.lp-plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lp-plan{border-radius:var(--radius-card);border:1px solid rgb(255 255 255 / 0.1);background:rgb(255 255 255 / 0.04);padding:24px}
.lp-plan-featured{border:0;background:#fff;color:#000}
.lp-plan-head{display:flex;align-items:center;gap:8px}
.lp-plan-name{font-size:18px;line-height:28px;font-weight:600}
.lp-plan-badge{border-radius:var(--radius-pill);background:#f3e8ff;padding:2px 8px;font-size:11px;font-weight:700;color:#7a1fd1}
.lp-plan-tag,.lp-plan-cadence{font-size:14px;line-height:20px;color:rgb(255 255 255 / 0.55)}
.lp-plan-featured .lp-plan-tag,.lp-plan-featured .lp-plan-cadence{color:rgb(0 0 0 / 0.55)}
.lp-plan-price{margin-top:20px;display:flex;align-items:baseline;gap:8px}
.lp-plan-amount{font-size:48px;line-height:1;font-weight:600;letter-spacing:-0.04em}
.lp-plan-list{margin-top:24px}
.lp-plan-list>:not(:last-child){margin-bottom:10px}
.lp-plan-list li{display:flex;gap:10px;font-size:14px;line-height:20px}
.lp-plan-list svg{margin-top:2px;width:16px;height:16px;flex-shrink:0;color:rgb(255 255 255 / 0.6)}
.lp-plan-list span{color:rgb(255 255 255 / 0.75)}
.lp-plan-featured .lp-plan-list svg{color:#7a1fd1}
.lp-plan-featured .lp-plan-list span{color:rgb(0 0 0 / 0.75)}
.lp-plan-side{display:flex;flex-direction:column;gap:16px}
.lp-plan-note{flex:1 1 0%;border-radius:var(--radius-card);border:1px solid rgb(255 255 255 / 0.1);background:rgb(255 255 255 / 0.04);padding:24px}
.lp-plan-note-text{margin-top:8px;font-size:14px;line-height:1.625;color:rgb(255 255 255 / 0.6)}
.lp-compare{display:inline-flex;height:44px;align-items:center;justify-content:center;gap:6px;border-radius:var(--radius-pill);border:1px solid rgb(255 255 255 / 0.2);font-size:14px;line-height:20px;font-weight:600;transition:background-color var(--dur-tw) var(--ease-tw)}

/* ---- Community ---- */
.lp-community{max-width:80rem;margin-inline:auto;padding:96px 20px}
@media (min-width:640px){.lp-community{padding-inline:32px}}
.lp-voices{margin-top:48px;display:grid;gap:16px}
@media (min-width:768px){.lp-voices{grid-template-columns:repeat(3,minmax(0,1fr))}.lp-voice-low{transform:translateY(32px)}}
.lp-voice{overflow:hidden;border-radius:var(--radius-card);border:1px solid var(--line);background:var(--paper)}
.lp-voice-band{padding:12px 24px;font-size:11px;line-height:14px;letter-spacing:0.1em;font-weight:700;text-transform:uppercase}
.lp-voice blockquote{padding:20px 24px 0;font-size:16px;line-height:1.625;color:var(--ink)}
.lp-voice figcaption{padding:16px 24px 24px;font-size:14px;line-height:20px}

/* ---- Last invitation ---- */
.lp-final{padding:0 20px 96px}
@media (min-width:640px){.lp-final{padding-inline:32px}}
.lp-final-band{position:relative;isolation:isolate;max-width:80rem;margin-inline:auto;overflow:hidden;border-radius:32px;background:var(--band);padding:80px 24px;text-align:center;color:#fff}
@media (min-width:640px){.lp-final-band{padding-inline:48px}}
.lp-final-ctas{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* ==========================================================================
   The footer — the design's, on every page
   ========================================================================== */
.site-footer{border-top:1px solid var(--line)}
.footer-top{max-width:80rem;margin-inline:auto;display:grid;gap:48px;padding:64px 20px}
@media (min-width:640px){.footer-top{padding-inline:32px}}
@media (min-width:1024px){.footer-top{grid-template-columns:1.4fr repeat(4,1fr)}}
.footer-brand>:not(:last-child){margin-bottom:16px}
.footer-logo{display:flex;align-items:center;gap:6px;color:var(--ink)}
.footer-logo svg{height:24px;width:auto}
.footer-logo span{font-size:21px;font-weight:900;letter-spacing:-0.03em}
.footer-brand p{max-width:20rem;font-size:14px;line-height:1.625;color:var(--ink-3)}
.footer-mail{display:block;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.footer-title{font-size:11px;line-height:14px;letter-spacing:0.12em;font-weight:600;text-transform:uppercase;color:var(--ink-4)}
.site-footer ul{margin-top:16px}
.site-footer ul>:not(:last-child){margin-bottom:10px}
.site-footer li a{font-size:14px;line-height:20px;color:var(--ink-2)}
.footer-bottom{max-width:80rem;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:24px 20px;font-size:11px;line-height:14px;letter-spacing:0.006em;color:var(--ink-4)}
@media (min-width:640px){.footer-bottom{padding-inline:32px}}
@media (hover:hover){
  .footer-mail:hover{text-decoration-line:underline}
  .site-footer li a:hover{color:var(--ink)}
}

/* ==========================================================================
   The other pages — their own words and structure, in the design's tokens
   (derived: the design draws only the landing). The rules, once:
   headings take the display face at the landing's display sizes and
   tracking; body copy is the landing's 18px / 1.625 in ink-2; buttons are
   the landing's pills; cards are the landing's card — paper, a 1px line,
   22px corners — not the old grey fills; a photograph's band takes the
   final CTA's 32px corners; widths and gutters are the landing's.
   ========================================================================== */
.wrap{max-width:80rem;margin-inline:auto;padding-inline:20px}
@media (min-width:640px){.wrap{padding-inline:32px}}
.section{padding-block:96px}
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1023px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.g3{grid-template-columns:1fr}}

/* type */
.h1{font-family:var(--font-display);font-size:clamp(2.25rem,1.4rem + 3.4vw,4rem);font-weight:600;line-height:1;letter-spacing:-0.04em}
.h2{font-family:var(--font-display);font-size:clamp(2rem,1.4rem + 2.4vw,3.25rem);font-weight:600;line-height:1.02;letter-spacing:-0.035em}
.lead{font-size:18px;line-height:1.625;color:var(--ink-2)}
.muted{color:var(--ink-3)}
.small{font-size:14px;line-height:20px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;line-height:14px;letter-spacing:0.14em;font-weight:600;text-transform:uppercase;color:var(--ink-3)}
.eyebrow svg{width:14px;height:14px;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding-inline:20px;border-radius:var(--radius-pill);border:1px solid transparent;font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;transition:transform var(--dur-tw) var(--ease-tw),background-color var(--dur-tw) var(--ease-tw)}
.btn-lg{height:48px;padding-inline:24px;font-size:16px;line-height:24px}
.btn-sm{height:36px;padding-inline:16px}
.btn-ink{background:var(--ink);color:var(--on-ink)}
.btn-white{background:#fff;color:#000}
.btn-ghost{border-color:var(--line);background:var(--paper);color:var(--ink)}
@media (hover:hover){
  .btn-ink:hover,.btn-white:hover{transform:scale(1.03)}
  .btn-ghost:hover{background:var(--paper-2)}
}

/* the page hero */
.page-hero{max-width:80rem;margin-inline:auto;padding:72px 20px 48px;text-align:center}
@media (min-width:640px){.page-hero{padding:96px 32px 56px}}
.page-hero .eyebrow{justify-content:center;margin-bottom:20px}
.page-hero .lead{max-width:42rem;margin:24px auto 0}
.page-hero .sub{margin-top:16px;font-size:14px;line-height:20px;color:var(--ink-3)}
.page-hero .sub a{text-decoration-line:underline;text-underline-offset:3px}

/* photographs */
.photo{position:relative;overflow:hidden;border-radius:var(--radius-card);background:#111;isolation:isolate}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.7));pointer-events:none}

/* the photograph band (pricing, cases, waitlist) — the final CTA's shape */
.banner{position:relative;isolation:isolate;overflow:hidden;min-height:380px;display:grid;align-items:center;border-radius:32px;padding:clamp(24px,4vw,48px);color:#fff}
.banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.3) 60%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 40%)}
.banner .inner{display:grid;gap:24px;align-items:center}
@media (min-width:900px){.banner .inner{grid-template-columns:1fr auto}}
/* Narrower, the headline runs across the whole photograph, so the scrim is even. */
@media (max-width:899px){.banner::before{background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,.5))}}
.banner h2{max-width:16ch;margin-bottom:24px;color:#fff}
.banner .note{display:flex;gap:14px;align-items:center;max-width:360px;padding:12px;border-radius:var(--radius-md);background:rgb(255 255 255 / 0.12);border:1px solid rgb(255 255 255 / 0.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:13px;line-height:1.4;color:rgb(255 255 255 / 0.9)}
.banner .note img{width:84px;height:60px;border-radius:10px;object-fit:cover;flex:none}

/* case-study cards */
.carousel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.post-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1023px){.post-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.post-list{grid-template-columns:1fr}.post-list[style]{grid-template-columns:1fr!important}}
.post{position:relative;display:block}
.post .photo{aspect-ratio:4/3.4}
.post .photo img{transition:transform .6s var(--ease-evnts)}
.post .title{position:absolute;left:16px;right:16px;bottom:14px;color:#fff;font-size:16px;line-height:24px;font-weight:600}
.post .arrow{position:absolute;right:14px;top:14px;width:30px;height:30px;border-radius:var(--radius-pill);background:rgb(255 255 255 / 0.18);border:1px solid rgb(255 255 255 / 0.3);display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .25s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.post .arrow svg{width:13px;height:13px}
.post .meta{padding:14px 2px 0;display:flex;flex-direction:column;gap:8px}
.post .meta .row{display:flex;justify-content:space-between;font-size:11px;line-height:14px;letter-spacing:0.006em;font-weight:600;color:var(--ink-3)}
.post .meta p{font-size:14px;line-height:1.625;color:var(--ink-3)}
@media (hover:hover){.post:hover .arrow{opacity:1}.post:hover .photo img{transform:scale(1.03)}}

/* a case study */
.article{max-width:720px;margin:0 auto;padding:0 20px 96px}
.article .hero-img{aspect-ratio:16/9;margin:32px 0;border-radius:var(--radius-card)}
.article p{font-size:18px;line-height:1.625;color:var(--ink-2);margin:0 0 22px}
.article h2{font-family:var(--font-display);font-size:28px;line-height:1.05;font-weight:600;letter-spacing:-0.03em;margin:40px 0 14px}
.article blockquote{margin:28px 0;padding-left:20px;border-left:3px solid var(--ink);font-family:var(--font-display);font-size:26px;line-height:1.12;font-weight:500;letter-spacing:-0.03em;color:var(--ink)}

/* the legal / content column */
.legal{max-width:760px;margin:0 auto;padding:0 20px 96px}
.legal h2{font-family:var(--font-display);font-size:24px;line-height:1.1;font-weight:600;letter-spacing:-0.03em;margin:40px 0 12px;color:var(--ink)}
.legal p,.legal li{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0 0 14px}
.legal ul{list-style:disc;padding-left:22px}

/* cards */
.feat{padding:24px;border-radius:var(--radius-card);border:1px solid var(--line);background:var(--paper)}
.feat svg{width:22px;height:22px;margin-bottom:14px;color:var(--accent)}
.feat b{display:block;font-size:16px;line-height:24px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.feat p{color:var(--ink-2);font-size:14px;line-height:1.625}

/* pricing page */
.save-pill{display:inline-flex;margin-top:24px;border-radius:var(--radius-pill);background:#f3e8ff;padding:2px 8px;font-size:11px;line-height:16.5px;font-weight:700;color:#7a1fd1}
.toggle{display:inline-flex;align-items:center;gap:12px;margin-top:24px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink-3)}
.toggle span{cursor:pointer}
.toggle .on{color:var(--ink)}
.switch{position:relative;width:46px;height:26px;border-radius:var(--radius-pill);background:var(--ink);transition:background-color .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--paper);transition:transform .3s var(--ease-evnts)}
.switch[aria-checked="true"]::after{transform:translateX(20px)}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:900px;margin:0 auto}
@media (max-width:700px){.plans{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column;border-radius:var(--radius-card);border:1px solid var(--line);background:var(--paper);padding:24px}
.plan.featured{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.plan .name{font-size:18px;line-height:28px;font-weight:600}
.plan .for{color:var(--ink-3);font-size:14px;line-height:20px}
.plan .price{display:flex;align-items:baseline;gap:8px;margin:20px 0 24px}
.plan .price b{font-size:48px;line-height:1;font-weight:600;letter-spacing:-0.04em}
.plan .price span{color:var(--ink-3);font-size:14px;line-height:20px}
.plan .btn{width:100%}
.plan ul{margin-top:24px;font-size:14px;line-height:20px}
.plan ul li+li{margin-top:10px}
.plan ul li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2)}
.plan ul li svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}
.addons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:900px;margin:16px auto 0}
@media (max-width:700px){.addons{grid-template-columns:1fr}}
.addon{display:flex;flex-direction:column;gap:8px;border-radius:var(--radius-card);border:1px solid var(--line);background:var(--paper);padding:24px}
.addon .name{font-size:18px;line-height:28px;font-weight:600}
.addon .price{font-size:14px;line-height:20px;font-weight:600}
.addon p{color:var(--ink-2);font-size:14px;line-height:1.625}
.addon .btn{align-self:flex-start;margin-top:8px}
.compare{max-width:900px;margin:64px auto 0;overflow-x:auto}
.compare table{width:100%;font-size:14px;line-height:20px}
.compare th,.compare td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare th{font-size:11px;line-height:14px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.compare td:first-child{font-weight:600;color:var(--ink)}
.compare td.c{color:var(--ink-2)}
.faq{display:grid;gap:32px}
@media (min-width:900px){.faq{grid-template-columns:.9fr 1.1fr;gap:64px}}
.faq .left{display:flex;flex-direction:column;justify-content:space-between}
.faq .help{display:flex;align-items:center;gap:12px;margin-top:40px;font-size:14px;line-height:20px;color:var(--ink-2)}
.faq .help a{color:var(--ink);text-decoration-line:underline;text-underline-offset:3px}
.help-logo{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:var(--radius-pill);background:var(--ink);color:var(--on-ink)}
.help-logo svg{width:14px;height:18px}
.acc details+details{margin-top:10px}
.acc details{border-radius:var(--radius-card);border:1px solid var(--line);background:var(--paper);overflow:hidden}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-size:16px;line-height:24px;font-weight:600;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{width:22px;height:22px;flex:none;border-radius:var(--radius-pill);background:var(--ink);color:var(--on-ink);display:grid;place-items:center;transition:transform .3s var(--ease-evnts)}
.acc summary .pm::before{content:"+";font-size:16px;line-height:1;font-weight:500}
.acc details[open] summary .pm{transform:rotate(45deg)}
.acc .a{padding:0 20px 20px;font-size:14px;line-height:1.625;color:var(--ink-2);max-width:60ch}

/* waitlist page: the form, whose fields had no rules before (4.22w-F1) */
.wl-join{font-size:14px;line-height:20px;color:var(--ink-2)}
.wl-join b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.wl-form{max-width:640px;margin-inline:auto;text-align:left;display:grid;gap:16px;border-radius:var(--radius-card);border:1px solid var(--line);background:var(--paper);padding:24px;box-shadow:0 24px 60px -28px rgba(0,0,0,0.25)}
.wl-form .roles{display:flex;flex-wrap:wrap;gap:8px}
.wl-form .roles button{border-radius:var(--radius-pill);border:1px solid var(--line);padding:8px 16px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink-2);transition:background-color var(--dur-tw) var(--ease-tw),color var(--dur-tw) var(--ease-tw)}
.wl-form .roles button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}
.wl-form .grid2{display:grid;gap:16px}
@media (min-width:640px){.wl-form .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wl-form label{display:grid;gap:6px}
.wl-form .lbl{font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.wl-form .req{color:var(--danger)}
.wl-form input,.wl-form select,.wl-form textarea{width:100%;min-height:44px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--paper);padding:10px 14px;font-size:15px;line-height:20px;color:var(--ink);transition:border-color var(--dur-tw) var(--ease-tw)}
.wl-form textarea{min-height:96px;resize:vertical}
.wl-form input::placeholder,.wl-form textarea::placeholder{color:var(--ink-3)}
.wl-form input:focus,.wl-form select:focus,.wl-form textarea:focus{border-color:var(--ink-3)}
.wl-form>.btn{justify-self:start}
.wl-form.ok{border-color:var(--good)}
.wl-form.err{border-color:var(--danger);animation:shake .35s var(--ease-evnts)}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.wl-msg{min-height:1.2em;font-size:14px;line-height:20px;color:var(--ink-2)}
.wl-msg.err{color:var(--danger)}
.dl-feats{max-width:80rem;margin:0 auto;padding:clamp(40px,6vw,80px) 20px}
@media (min-width:640px){.dl-feats{padding-inline:32px}}
.wl-perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:960px;margin:0 auto}
@media (max-width:767px){.wl-perks{grid-template-columns:1fr}}
.wl-perks .feat b{display:flex;align-items:center;gap:10px}
.wl-perks .feat .n{width:26px;height:26px;border-radius:var(--radius-pill);background:var(--ink);color:var(--on-ink);display:grid;place-items:center;font-size:12px;font-weight:700}

/* integrations page (the dk- prefix kept) */
.dkpage .lead{color:var(--ink-2)}
.dk-section{padding-block:clamp(48px,7vw,96px)}
.dk-eyebrow{display:inline-block;margin-bottom:20px;font-size:11px;line-height:14px;letter-spacing:0.14em;font-weight:600;text-transform:uppercase;color:var(--ink-3)}
.dk-hero{padding:clamp(56px,9vw,96px) 0 clamp(48px,7vw,96px)}
.dk-hero-grid{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:1024px){.dk-hero-grid{grid-template-columns:1.15fr 1fr}}
.dk-hero .lead{margin-top:24px;max-width:36rem}
.dk-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.dk-props{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.dk-props{grid-template-columns:1fr}}
.dk-prop,.dk-card,.dk-grid .ic-card,.dk-cta{border-radius:var(--radius-card);border:1px solid var(--line);background:var(--paper)}
.dk-prop{padding:20px}
.dk-prop svg{width:20px;height:20px;color:var(--accent);margin-bottom:14px}
.dk-prop b{display:block;font-size:15px;line-height:20px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.dk-prop p{font-size:13px;line-height:1.5;color:var(--ink-3)}
.dk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;border-radius:var(--radius-card);border:1px solid var(--line);background:var(--line)}
@media (max-width:1023px){.dk-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dk-stats li{background:var(--paper);padding:24px;display:flex;flex-direction:column}
.dk-stats b{font-size:2rem;line-height:1.5;font-weight:600;letter-spacing:-0.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.dk-stats span{font-size:14px;line-height:20px;color:var(--ink-3)}
.dk-head{max-width:760px;margin-bottom:clamp(24px,3.4vw,44px)}
.dk-head .lead{margin-top:16px}
.dk-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.dk-flow{grid-template-columns:1fr}}
.dk-card{padding:24px}
.dk-card b{display:block;font-size:16px;line-height:24px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.dk-card p{font-size:14px;line-height:1.625;color:var(--ink-2)}
.dk-card code{font-family:var(--font-mono);font-size:12px;background:var(--paper-2);padding:2px 6px;border-radius:6px;color:var(--ink)}
.dk-n{display:inline-block;margin-bottom:16px;font-size:11px;line-height:14px;letter-spacing:0.14em;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.dk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.dk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dk-grid{grid-template-columns:1fr}}
.dk-grid .ic-card{padding:22px;display:flex;flex-direction:column;gap:4px}
.dk-grid .ic-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ic-mark{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px var(--line)}
.ic-mark img{width:22px;height:22px}
.dk-grid .ic-how{border-radius:var(--radius-pill);border:1px solid var(--line);padding:2px 8px;font-size:10px;line-height:15px;font-weight:700;letter-spacing:0.025em;text-transform:uppercase;color:var(--ink-2)}
.dk-grid b{font-size:16px;line-height:24px;font-weight:600;color:var(--ink)}
.dk-grid .ic-cat{font-size:11px;line-height:14px;letter-spacing:0.006em;font-weight:600;color:var(--ink-3)}
.dk-grid p{font-size:14px;line-height:1.625;color:var(--ink-2);margin-top:6px}
.dk-chips{display:flex;flex-wrap:wrap;gap:8px}
.dk-chips span{border-radius:var(--radius-pill);border:1px solid var(--line);padding:8px 16px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink-2)}
.dk-terminal{background:#0c0c0e;border-radius:var(--radius-card);overflow:hidden;overflow-x:auto;box-shadow:0 24px 60px -28px rgba(0,0,0,0.5)}
.dk-term-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:#141417}
.dk-term-bar span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.16)}
.dk-term-bar b{margin-left:10px;font-family:var(--font-mono);font-size:12px;font-weight:500;color:#8e8e93}
.dk-terminal table{width:100%;font-size:13.5px}
.dk-terminal th,.dk-terminal td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left;vertical-align:top;color:#d5d5da}
.dk-terminal tr:last-child td{border-bottom:0}
.dk-terminal th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8e8e93;font-weight:600}
.dk-terminal code{font-family:var(--font-mono);font-size:12.5px;color:#7ee2a8}
.dk-terminal code.dim{color:#8e8e93;white-space:normal}
.dk-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media (max-width:760px){.dk-duo{grid-template-columns:1fr}}
.dk-sec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.dk-sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dk-sec-grid{grid-template-columns:1fr}}
.dk-fineprint{margin-top:24px;font-size:14px;line-height:20px;color:var(--ink-3)}
.dk-fineprint a{text-decoration-line:underline;text-underline-offset:3px;color:var(--ink-2)}
.dk-cta{padding:clamp(28px,4vw,52px);display:grid;gap:24px;align-items:center}
@media (min-width:900px){.dk-cta{grid-template-columns:1.3fr auto}}
.dk-cta .lead{margin-top:12px;max-width:44ch}
.dk-cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* 404 — a photograph, the landing's nav over it */
.nf{position:relative;isolation:isolate;min-height:100vh;display:grid;place-items:center;text-align:center;padding:120px 20px 60px;color:#fff}
.nf>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.nf::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:-1}
.nf .code{font-family:var(--font-display);font-size:clamp(96px,18vw,220px);letter-spacing:-0.06em;line-height:.9;font-weight:600;opacity:.9}

/* reveal on scroll, on the pages that had it */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-evnts),transform .8s var(--ease-evnts)}
.reveal.in{opacity:1;transform:none}

/* ---------- Motion ----------
   The design's own rule: under reduced motion nothing animates or
   transitions, and nothing scrolls smoothly. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}