/* Eunice site — one stylesheet. Tokens first; change a token, not a rule. */

/* Fonts are served from this site (OFL, see fonts/OFL-*.txt): latin subset, the two
   weights the type roles use. No third-party request on a page view. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/manrope-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/manrope-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }

:root {
  /* Ground and ink. The master brand is plain black on white; no warm greys. */
  --white: #ffffff;
  --band: #f5f7fa;          /* the only grey: cool, very light */
  --ink: #111214;
  --text: #1f2430;
  --muted: #5f6b7a;
  --faint: #6a717d;          /* 4.9:1 on white, 4.6:1 on --band: AA for small text */
  --line: #e4e8ef;
  --line-strong: #111214;

  /* Two colours (Sep 2026): the site is ink on white. A desk keeps only a hint of its
     colour, from `-field`: the dot or mark beside its name and its logo glyph. Its `-ink`
     and `-text` are ink and its `-tint` is the neutral band, so text, panels and plates
     are black and white wherever a desk is named. */
  --pm-ink: var(--ink);  --pm-field: #5b82f7;  --pm-tint: var(--band);
  --da-ink: var(--ink);  --da-field: #FA8846;  --da-tint: var(--band);
  --da-text: var(--ink);
  --td-ink: var(--ink);  --td-field: #e0a03a;  --td-tint: var(--band);

  /* Type: Manrope for headings, Inter for everything else. Four roles only.
     The whole scale was taken down 20% (Sep 2026) to leave more air around it:
     spacing is set in px and did not move, so every gap now reads wider against
     smaller text. To undo, multiply each size below, and every literal
     font-size in this file, by 1.25. */
  --font-head: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --quote-bg: #f1efed; /* one warm grey for every quote card, as on eunice.ai */
  --h1: clamp(32px, 4.16vw, 51.2px);
  --h2: clamp(22.4px, 2.32vw, 28.8px);
  --h3: 16.8px;
  --h4: 13.6px;
  --body: 12.8px;
  --small: 12px;
  --caption: 10.4px;

  --wrap: 1312px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --section: clamp(104px, 13vw, 200px);
  --section-tight: clamp(88px, 9.5vw, 140px);
  --radius: 14px;

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0; background: var(--white); color: var(--text);
  font-family: var(--font-body); font-size: var(--body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }
p, h1, h2, h3, h4, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pm-ink); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Type roles ---------- */
.h1 { font-family: var(--font-head); font-weight: 400; font-size: var(--h1); line-height: 1.04; letter-spacing: -0.035em; color: var(--ink); }
.h2 { font-family: var(--font-head); font-weight: 400; font-size: var(--h2); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); }
.h3 { font-family: var(--font-head); font-weight: 400; font-size: var(--h3); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.h4 { font-family: var(--font-head); font-weight: 500; font-size: var(--h4); line-height: 1.35; color: var(--ink); }
.lead { font-size: 13.6px; line-height: 1.6; color: var(--muted); max-width: 34em; }
.body { font-size: 13.6px; line-height: 1.6; }
.small { font-size: var(--small); line-height: 1.5; }
.caption { font-size: var(--caption); line-height: 1.45; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
/* A small label (footer columns, the logos row): plain words, never capitals. */
.label { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--ink); line-height: 1.4; }
.desk-text--private-markets { color: var(--pm-ink); }
.desk-text--digital-assets { color: var(--da-text); }
.desk-text--token-disclosure { color: var(--td-ink); }
.placeholder { color: var(--faint) !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--sm { min-height: 36px; padding: 0 16px; font-size: 11.2px; }
.btn--dark { background: #1a1b1e; color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #eef1f6; color: var(--ink); }
.btn--outline { background: #fff; color: var(--ink); border-color: #cfd5de; }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--outline-light:hover { border-color: #fff; color: #fff; }
/* "Book demo" in its desk's colour (the one place colour fills a control, by the owner's
   choice, Oct 2026). Private Markets blue is deepened a step so white text reads at
   4.5:1; orange and gold carry ink text instead. Company pages stay ink. */
.btn--desk-general { background: #1a1b1e; color: #fff; }
.btn--desk-general:hover { background: #000; color: #fff; }
.btn--desk-private-markets { background: #3f66e0; color: #fff; }
.btn--desk-private-markets:hover { background: #3457c4; color: #fff; }
.btn--desk-digital-assets { background: var(--da-field); color: var(--ink); }
.btn--desk-token-disclosure { background: var(--td-field); color: var(--ink); }
.btn--desk-digital-assets:hover, .btn--desk-token-disclosure:hover { filter: brightness(.94); color: var(--ink); }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.more { display: inline-flex; align-items: center; gap: 6px; font-size: 11.2px; color: var(--ink); }
.more::after { content: ''; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .15s ease; }
.more:hover::after { transform: translateX(3px); }
.linklike { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }

/* ---------- Navigation ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; position: relative; }
.nav::after { content: ''; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: var(--line-strong); }
.lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.lockup:hover { color: var(--ink); }
.lockup__desk { font-family: var(--font-head); font-size: 13.6px; }
.lockup svg { display: block; }
/* The glyph in the logo takes the section's colour: ink on the company pages, blue
   on private markets, orange on digital assets and token disclosure. The wordmark stays ink. */
.logo__glyph { fill: var(--glyph, currentColor); }
.lockup--private-markets { --glyph: var(--pm-field); }
.lockup--digital-assets, .lockup--token-disclosure { --glyph: var(--da-field); }
.lockup__rule { width: 1px; height: 20px; background: #c9cfd9; margin-inline: 4px; }
.nav__links { display: flex; font-size: 12px; }
.nav__links a { color: var(--text); padding: 6px 0; }
.nav__links a:hover { color: var(--muted); }
/* Three menus. Each label is a link to its landing page; the panel under it opens on
   hover or keyboard focus in CSS alone, and the chevron toggles it for touch. */
.menus { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.menu { position: relative; display: flex; align-items: center; gap: 2px; }
.menu.is-current > .menu__top, .menu__top[aria-current="page"] { color: var(--ink); font-weight: 500; }
.menu__toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0; }
.menu__toggle svg { transition: transform .2s ease; }
.menu__panel { position: absolute; top: 100%; left: -14px; z-index: 30; min-width: 240px; list-style: none; margin: 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 40px rgba(17,18,20,.08); visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.menu__panel a { display: block; padding: 9px 10px; border-radius: 4px; white-space: nowrap; }
.menu__panel a:hover { background: var(--band); color: var(--ink); }
.menu:hover > .menu__panel, .menu:focus-within > .menu__panel, .menu.is-open > .menu__panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.menu:hover > .menu__toggle svg, .menu.is-open > .menu__toggle svg { transform: rotate(180deg); }
/* Escape closes a panel even while the pointer or focus is still inside it. */
.menu.is-closed > .menu__panel { visibility: hidden; opacity: 0; }
.nav__mobile-extra { display: none; }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__menu { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; align-items: center; justify-content: center; color: var(--ink); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: end; padding-top: clamp(48px, 7vw, 96px); padding-bottom: 8px; }
.hero__text { padding-bottom: clamp(24px, 4vw, 56px); }
.hero__text .h1 { margin-bottom: 24px; }
.hero__text .lead + .lead, .hero__text .lead + .body, .hero__text .body + .body { margin-top: 14px; }
.hero--short { grid-template-columns: 1fr; padding-bottom: 0; }
.hero--pm { padding-bottom: var(--section-tight); }
.hero__visual { position: relative; }
/* Product hero (Figma, Site v5): the screenshot in a frosted glass frame on a photo field,
   running off the field's right and bottom edges. Every corner is rounded alike. */
.hero__visual--field { height: clamp(320px, 34vw, 480px); }
.hero__visual--field .wf { width: 100%; height: 100%; aspect-ratio: auto; border-radius: var(--radius); }
/* Proof under a product hero: a client's words in one half, and one big figure with its
   line under it, centred in the other; a hairline on top. */
.trustline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: var(--section-tight); border-top: 1px solid var(--line); }
/* The same air above the proof as below it, so it sits centred between hairline and band. */
.trustline + .band { margin-top: var(--section-tight); }
.trustline__figure { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.trustline .h1 { font-variant-numeric: tabular-nums; }
.trustline .lead { max-width: 22em; }
@media (max-width: 760px) { .trustline { grid-template-columns: minmax(0, 1fr); } }


/* ---------- Sections ---------- */
.section { padding-block: var(--section) 0; }
.section--tight { padding-top: var(--section-tight); }
.band { background: var(--band); padding-block: var(--section); margin-top: var(--section); }
.band + .band { margin-top: 0; }
.band + .section:not(.band) { padding-top: var(--section); }
.band + .section--tight:not(.band) { padding-top: var(--section-tight); }
.shead { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 48px; }
.shead__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.shead { align-items: center; }

.grid { display: grid; gap: 32px 28px; }
.grid--1 { grid-template-columns: minmax(0, 1fr); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 22px; }

/* Desk labels */
.desk { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.desk .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Each desk's mark and dot in its bright colour, so which desk a label names shows at a glance. */
.desk--private-markets .dot { background: var(--pm-field); } .desk--private-markets .mark { fill: var(--pm-field); }
.desk--digital-assets .dot { background: var(--da-field); } .desk--digital-assets .mark { fill: var(--da-field); }
.desk--token-disclosure .dot { background: var(--td-field); } .desk--token-disclosure .mark { fill: var(--td-field); }
.desk--private-markets, .tag--private-markets { color: var(--pm-ink); }
.desk--digital-assets, .tag--digital-assets { color: var(--da-text); }
.desk--token-disclosure, .tag--token-disclosure { color: var(--td-ink); }
.desk--company, .tag--company { color: var(--ink); }

/* Audience cards and facts: a rule on top, never a box. */
/* A card that leads to a personalised page is the link, not the words inside it. */
/* A fact is told apart by its drawing, so it carries no rule of its own (owner's call, Oct 2026). */
.fact { display: flex; flex-direction: column; gap: 8px; }
.facts { margin-top: 64px; row-gap: 56px; }
/* A row of facts that opens its section needs no gap above it: the section padding is the gap. */
.facts:first-child { margin-top: 0; }
/* The fact's picture (art.ts): line drawing in ink, a soft tint for what matters. */
.art { display: block; width: 96px; height: 64px; margin: 4px 0 10px; color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.art .t { fill: #e6eaf2; }
.art .f { fill: currentColor; stroke: none; }
.art .x { stroke-width: 2.2; }
.fact .h4 { font-family: var(--font-head); font-weight: 400; font-size: 16px; letter-spacing: -.01em; }

/* Quotes */
.quotes { margin-top: 0; }
.quote { display: flex; flex-direction: column; gap: 16px; background: var(--quote-bg); border-radius: 10px; padding: 24px; }
.quote__desk .mark { flex: 0 0 auto; }
/* A touch darker than the desk inks, to keep 4.5:1 on the grey card (orange 5.0, amber 5.9). */
.quote__text { font-family: var(--font-mono); font-size: 14.4px; line-height: 1.6; letter-spacing: -.01em; color: var(--ink); }
/* A pull quote (pullQuote): the one quote a page gives the stage. On ink, large, with
   the opening mark in the desk's colour so it reads as a quote before a word is read. */
.pullquote { position: relative; margin: 0; padding: clamp(40px, 6vw, 88px) clamp(24px, 7vw, 112px); background: #16171b; color: #fff; border-radius: var(--radius); }
.pullquote__mark { display: block; height: .5em; margin-bottom: 8px; font-family: var(--font-head); font-size: clamp(96px, 10vw, 160px); line-height: .9; color: var(--pm-field); }
.pullquote--digital-assets .pullquote__mark { color: var(--da-field); }
.pullquote--token-disclosure .pullquote__mark { color: var(--td-field); }
.pullquote__text { margin: 0; font-family: var(--font-head); font-weight: 300; font-size: clamp(24px, 3.2vw, 44px); line-height: 1.2; letter-spacing: -.025em; max-width: 24em; text-wrap: balance; }
.pullquote__who { display: flex; align-items: center; gap: 14px; margin-top: clamp(24px, 3vw, 40px); font-size: 15px; color: rgba(255,255,255,.72); }
.pullquote__who::before { content: ""; width: 32px; height: 1px; background: rgba(255,255,255,.5); }

/* Logos: "Clients" and "Partners". The grey caption on the left, then the firms
   drifting slowly left in a loop; both rows share the label width, so their logos
   start on one line, and every logo sits on the row's vertical centre. */
.partners { display: flex; flex-direction: column; gap: 48px; margin-top: var(--section); }
.partners + .quotes { margin-top: var(--section); }
/* Clients, their words, then the firms we work with: the quotes between two logo rows.
   A quote after a row of facts takes the same air. */
.logos + .quotes, .quotes + .logos, .facts + .quotes { margin-top: var(--section-tight); }
.logos { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 32px; align-items: center; }
.logos__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logos__track { display: flex; width: max-content; animation: logos 90s linear infinite; }
.logos__view:hover .logos__track { animation-play-state: paused; }
.logos__list { display: flex; align-items: center; gap: 72px; padding-right: 72px; }
.logos__list li { display: flex; align-items: center; height: 40px; }
/* Each firm's own logo, all in one grey so none outshouts the others. */
.logos__list img { display: block; filter: brightness(0); opacity: .78; }
@keyframes logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logos__view { -webkit-mask-image: none; mask-image: none; }
  .logos__track { animation: none; width: auto; }
  .logos__list { flex-wrap: wrap; gap: 24px 48px; padding-right: 0; }
  .logos__list[aria-hidden] { display: none; }
}
/* Home: the proof block runs logos, numbers, logos, badges, with the same air between. */
.proof > .logos:first-child { margin-top: 0; }
.numbers + .logos { margin-top: clamp(96px, 13vw, 192px); }
/* The investors: a statement on the left, the backers' logos in an open 2×2 wall on the right,
   in step with the numbers block above. */
.backers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 7vw, 112px); align-items: center; margin-top: clamp(96px, 13vw, 192px); }
.backers__lead .h2 { max-width: 14em; }
.backers__lead .small { margin-top: 16px; max-width: 30em; }
.backers__wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; list-style: none; margin: 0; padding: 0; }
.backers__wall li { display: flex; align-items: center; height: 112px; }
.backers__wall img { display: block; filter: brightness(0); opacity: .78; }
.team + .backers { margin-top: var(--section-tight); }
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 7vw, 112px); align-items: center; margin-top: clamp(96px, 13vw, 192px); }
.numbers__lead img { display: block; width: auto; height: 44px; filter: brightness(0); }
.numbers__lead .h2 { margin-top: 20px; max-width: 14em; }
.numbers__lead .small { margin-top: 10px; }
.numbers__rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.numbers__rows li:last-child { border-bottom: 1px solid var(--line); }
.numbers__rows .small { text-align: right; max-width: 30em; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(64px, 8vw, 120px); }
.badges li { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 10.4px; letter-spacing: .04em; color: var(--ink); }

/* ---------- Plates (product imagery) ---------- */
.plate { border-radius: var(--radius); overflow: hidden; }
.plate img { width: 100%; height: auto; }
/* A screenshot is raised off the page with rounded corners and a shadow, whichever desk it
   belongs to: no coloured panels. */
.plate--none, .plate--private-markets, .plate--digital-assets, .plate--token-disclosure { border-radius: 12px; box-shadow: 0 24px 60px rgba(17,18,20,.14), 0 2px 8px rgba(17,18,20,.06); }
/* Pause and play for the film: a pause glyph while it plays, a play triangle when paused. */

/* ---------- Feature rows ---------- */
/* A feature row is a block of its own: it gets the same space above it as a section. */
section.feature { padding-top: var(--section); }
/* Text and visual take equal halves, so the rhythm holds when rows alternate sides. */
.feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; }
.feature--flip .feature__text { order: 2; }
.feature--flat { align-items: start; }
.feature__text .h2 { margin-bottom: 20px; }
.feature__text .body + .bullets { margin-top: 20px; }
.bullets { display: flex; flex-direction: column; gap: 12px; color: var(--muted); font-size: var(--small); }
.bullets li { position: relative; padding-left: 20px; }
.bullets li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--pm-ink); }
.steps { background: var(--pm-tint); border-radius: var(--radius); padding: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
.steps li { display: flex; flex-direction: column; gap: 8px; }
/* Colour belongs to the desk: these carry the tint of whichever one they sit on. */
.steps--digital-assets { background: var(--da-tint); }
.steps--digital-assets li::before { color: var(--da-ink); }
.bullets--digital-assets li::before { background: var(--da-ink); }
.steps--token-disclosure { background: var(--td-tint); }
.steps--token-disclosure li::before { color: var(--td-ink); }
/* A film on a photograph, full width under a feature's text and visual. */
.feature__stage { grid-column: 1 / -1; }
/* A film under a section's facts, with the same air as between blocks. */
.section-stage { margin-top: var(--section-tight); }
.stage { margin: 0; }
.stage .wf { border-radius: var(--radius); }
.bullets--token-disclosure li::before { background: var(--td-ink); }

/* Token Disclosure band */
.band--td { background: var(--td-tint); }
.td-title { display: flex; align-items: center; gap: 12px; }

/* ---------- Home tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 40px; color: #fff; padding: 28px 0 0 28px; min-height: 420px; border-radius: 4px; }
.tile:hover { color: #fff; }
/* Both product tiles are ink; the desk shows only in its glyph. */
.tile--private-markets, .tile--digital-assets { background: var(--ink); }
.tile--private-markets .tile__title .mark { fill: var(--pm-field); }
.tile--digital-assets .tile__title .mark { fill: var(--da-field); }
/* The drawing breaks out: larger than the card and cropped by its bottom-right corner.
   It sits flat; pointing at the card tilts it. */
.tile__shot { display: block; width: 100%; margin: auto 0 -14% 10%; border-radius: 8px 0 0 0; overflow: hidden; background: rgba(255,255,255,.25); padding: 8px 0 0 8px; box-shadow: 0 32px 64px rgba(0,0,0,.4); transform-origin: 0 0; transform: perspective(1600px); transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.tile:hover .tile__shot, .tile:focus-visible .tile__shot { transform: perspective(1600px) rotateX(12deg) rotateY(-14deg) rotateZ(3deg); }
.tile__shot img { height: auto; border-radius: 4px 0 0 0; }
.tile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-right: 28px; }
.tile__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 20.8px; letter-spacing: -.015em; }
.tile__text { display: block; margin-top: 10px; font-size: 11.2px; line-height: 1.5; color: rgba(255,255,255,.9); max-width: 34em; }
.tile .btn--light { flex: 0 0 auto; }
.tile:hover .btn--light { background: #eef1f6; }

/* ---------- Insights ---------- */
/* Featured insights: the cover image, and over it the desk, type, date and title. */
.icards { gap: 20px; margin-bottom: 48px; }
.icard { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--ink); color: #fff; isolation: isolate; }
.icard--plain.icard--private-markets { background: var(--pm-ink); }
.icard--plain.icard--digital-assets { background: var(--da-ink); }
.icard--plain.icard--token-disclosure { background: var(--td-ink); }
.icard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.icard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(17,18,20,.94) 0%, rgba(17,18,20,.84) 34%, rgba(17,18,20,.35) 62%, rgba(17,18,20,0) 86%); }
.icard--plain::after { background: none; }
.icard__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 26px); }
.icard__meta { font-size: 12px; color: rgba(255,255,255,.88); }
.icard__desk { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
/* On the dark card each desk shows in its bright colour (all above 5:1 on it). */
.icard__desk { color: #fff; }
.icard--private-markets .icard__desk .mark { fill: var(--pm-field); }
.icard--digital-assets .icard__desk .mark { fill: var(--da-field); }
.icard--token-disclosure .icard__desk .mark { fill: var(--td-field); }
.icard__title { font-family: var(--font-head); font-size: clamp(17px, 1.5vw, 20.8px); line-height: 1.25; letter-spacing: -.01em; color: #fff; }
a.icard:hover { color: #fff; }
a.icard:hover .icard__img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .icard__img { transition: none; } }
.irows { border-bottom: 1px solid var(--line); }
/* One featured insight: the card on the left, the list beside it. */
.ifeature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.irow { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.irow__date { font-size: 10.4px; color: var(--muted); }
.irow__title { font-size: 12.8px; color: var(--ink); }
.irow__tag { font-size: 12px; text-align: right; }
.all { margin-top: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #cfd5de; background: #fff; font-size: 11.2px; cursor: pointer; }
.chip span { color: var(--faint); margin-left: 4px; }
.chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.is-on span { color: rgba(255,255,255,.6); }
.chip--private-markets.is-on { background: var(--pm-ink); border-color: var(--pm-ink); }
.chip--digital-assets.is-on { background: var(--da-ink); border-color: var(--da-ink); }
.chip--token-disclosure.is-on { background: var(--td-ink); border-color: var(--td-ink); }
.empty { padding: 24px 0; }

/* ---------- Events ---------- */
/* Every row the same height: the note keeps room for two lines whether it needs them or not. */
.event { display: grid; grid-template-columns: 160px minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); }
.event__when { font-size: 11.2px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.event__soon::before { content: '·'; margin-right: 6px; color: var(--muted); }
.event__soon { font-size: 11.2px; color: var(--pm-ink); }
.event__note { font-size: var(--small); min-height: 2lh; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* A post with no standfirst: an empty note has no baseline to line up, so it sits at the top. */
.event__note:empty { align-self: start; }
/* A row that goes somewhere is one link, the whole row: a tap target its full height. */
.event--link { color: var(--ink); text-decoration: none; }
.event--link:hover { color: var(--ink); }
.event--link:hover .event__name { text-decoration: underline; text-underline-offset: 3px; }
.event__in { display: inline-flex; vertical-align: -0.1em; margin-right: 8px; color: var(--muted); }
.event__in svg { width: 0.9em; height: 0.9em; }
.event--link:hover .event__in { color: var(--ink); }

/* ---------- People ---------- */
/* Bio: slides down on hover, focus or tap. Grid rows animate height without measuring it. */
/* Welcome: a centred hero, the product over the City below it. */
.hero-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(56px, 8vw, 112px); }
.hero-center__title { font-size: clamp(40px, 6vw, 76px); max-width: 14em; }
.hero-center__lead { margin-top: 20px; font-size: 20.4px; max-width: none; text-wrap: balance; }
@media (min-width: 961px) { .hero-center__lead { white-space: nowrap; } }
.hero-center__buttons { justify-content: center; margin-top: 32px; }
.hero-center__visual { width: 100%; max-width: 1120px; margin: clamp(40px, 6vw, 72px) auto 0; }
.hero-center__visual .wf { border-radius: var(--radius); }

/* Who we work with: each desk sets its accent. */
.who--private-markets { --accent: var(--pm-ink); --accent-tint: var(--pm-tint); }
.who--digital-assets { --accent: var(--da-ink); --accent-tint: var(--da-tint); }
.who--token-disclosure { --accent: var(--td-ink); --accent-tint: var(--td-tint); }
.who--wide-intro .who__intro { grid-column: 1 / -1; padding-bottom: 8px; }
.who.who--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.who__intro { display: flex; flex-direction: column; gap: 14px; padding: 8px 12px 24px 0; }
.who > li { display: flex; }
.who__card { display: flex; flex-direction: column; gap: 12px; width: 100%; min-height: 280px; padding: 28px 24px; border-radius: 20px; background: #fff; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.who__card--link:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(17,18,20,.08); color: var(--ink); }
.who__card .art { margin: 0 0 12px -4px; }
.who__title { font-family: var(--font-head); font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.who__card--link { position: relative; }
.who__card--link::after { content: '→'; position: absolute; top: 24px; right: 24px; color: var(--accent); transition: transform .2s ease; }
.who__card--link:hover::after { transform: translateX(3px); }
/* A card that says where it goes: the line at its foot is the cue, not the corner arrow. */
.who__card--more::after { content: none; }
.who__more { margin-top: auto; padding-top: 16px; font-size: var(--small); font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.who__more span { display: inline-block; transition: transform .2s ease; }
.who__card--more:hover .who__more span { transform: translateX(3px); }
.who__line { font-size: var(--small); line-height: 1.5; color: var(--muted); }
.who__needs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.who__needs span { padding: 5px 10px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-size: var(--caption); line-height: 1.3; }

/* Welcome page */
.story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-bottom: 48px; }
.story .h2 { margin-bottom: 16px; }
.story .body + .body { margin-top: 12px; }
/* Home: why the company is called Eunice. One readable column. */
.why { max-width: 40em; }
.why .body + .body { margin-top: 12px; }
@media (max-width: 1100px) { .story { grid-template-columns: minmax(0, 1fr); } }

/* The team: one plain grid, everyone the same. Portrait, name, role, LinkedIn. */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; list-style: none; margin: 0; padding: 0; }
.team__person { display: flex; flex-direction: column; gap: 4px; }
.team__face { aspect-ratio: 1; margin-bottom: 12px; border-radius: var(--radius); overflow: hidden; background: #eef0f3; display: flex; align-items: center; justify-content: center; }
.team__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.team__initials { font-family: var(--font-head); font-size: 28px; color: var(--faint); }
.team__face--open { background: none; border: 1.5px dashed #c9cfd9; }
.team__in { display: inline-flex; width: 24px; height: 24px; margin-top: 6px; color: var(--muted); }
.team__in:hover { color: var(--ink); }
.team__hiring .more { margin-top: 6px; }
@media (max-width: 1100px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } }
/* The integrations strip: logos drift left to right, slowly; still for reduced motion. */
.strip { overflow: hidden; border-bottom: 1px solid var(--line); background: #fff; }
.strip__track { display: flex; width: max-content; animation: strip 60s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip__row { display: flex; align-items: center; gap: 56px; list-style: none; margin: 0; padding: 12px 28px; }
.strip__row img { height: 20px; width: auto; filter: grayscale(1); opacity: .7; }
@keyframes strip { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

/* ---------- Company, careers ---------- */
.rules { display: flex; flex-direction: column; }
.rules li { display: grid; grid-template-columns: minmax(0, 1fr); padding: 18px 0; border-top: 1px solid var(--line); }
.rules b { font-weight: 500; color: var(--ink); }
.rules span { color: var(--text); }
.foote__text { display: flex; flex-direction: column; gap: 16px; color: var(--text); max-width: 40em; }

/* ---------- Long-form copy: job descriptions, blog posts ----------
   Imported from the live site as plain markup (src/lib/rich-text.ts); styled here with
   the four type roles only. */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; font-size: var(--small); color: var(--muted); }
.crumbs a { display: inline-block; padding-block: 4px; margin-block: -4px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--text); }
.prose { max-width: 44em; color: var(--text); }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-family: var(--font-head); font-weight: 400; font-size: var(--h3); line-height: 1.3; color: var(--ink); margin-top: 40px; }
.prose h3 { font-family: var(--font-head); font-weight: 500; font-size: var(--h4); line-height: 1.35; color: var(--ink); margin-top: 32px; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose strong { font-weight: 500; color: var(--ink); }
/* Padding makes an inline link a full tap target without moving the text. */
.prose a { padding-block: 4px; color: var(--pm-ink); text-decoration: underline; text-underline-offset: 3px; }
.irow__title a { display: inline-block; padding-block: 5px; margin-block: -5px; }
.prose ul, .prose ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose blockquote { border-left: 2px solid var(--line-strong); padding-left: 16px; color: var(--muted); }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--band); padding: 1px 4px; border-radius: 4px; }
.prose pre { background: var(--band); padding: 16px; border-radius: 8px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose img { height: auto; border-radius: 8px; }
.prose figcaption { font-size: var(--caption); color: var(--muted); margin-top: 8px; }

/* ---------- CTA ---------- */
/* The closing call to action, on every page: the work-email line, centred on white, with
   any other way forward beside it. */
.cta { display: flex; justify-content: center; }
.cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; max-width: 100%; }
/* "Book demo": a pill, drawn with a hairline, holding the work email and the button. */
.ask { display: flex; align-items: center; gap: 4px; width: 480px; max-width: 100%; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.ask:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.ask__field { flex: 1; min-width: 0; }
.ask__field input { width: 100%; min-height: 44px; padding: 0 16px; border: 0; background: transparent; font: inherit; font-size: var(--body); color: var(--ink); }
.ask__field input::placeholder { color: var(--muted); }
.ask__field input:focus { outline: none; }
.ask .btn { flex: none; }
@media (max-width: 480px) { .ask__field input { padding: 0 10px 0 14px; } .ask .btn { padding: 0 16px; } }
/* Sent: the line becomes the thank-you, in the same pill. */
.ask__msg { display: none; flex: 1; align-items: center; min-height: 44px; margin: 0; padding: 0 16px; font-size: var(--body); color: var(--ink); }
.ask.is-done .ask__field, .ask.is-done .btn { display: none; }
.ask.is-done .ask__msg { display: flex; }

/* ---------- Footer ---------- */
.footer { margin-top: var(--section); padding-bottom: 32px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(6, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--line); padding-top: 40px; }
.footer__brand p { margin-top: 16px; font-size: 11.2px; color: var(--muted); max-width: 22em; }
.footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 11.2px; align-items: flex-start; }
.footer__col .label { font-size: 8.8px; margin-bottom: 4px; }
.footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 10.4px; color: var(--muted); }
.footer__legal-links { display: flex; gap: 16px; }

/* ---------- Cookie consent (only when Google Analytics is on) ----------
   A white bar on the page's foot, separated by a hairline on top, like every other block. */
.consent { position: fixed; inset: auto 0 0; z-index: 40; background: #fff; border-top: 1px solid var(--line); }
.consent__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-block: 16px; }
.consent__inner .small { margin: 0; max-width: 64ch; }
.consent__inner .buttons { margin: 0; }

/* ---------- Product mock-up (the reporting stand-in, until there is a screenshot) ---------- */

/* ---------- Talk-to-us dialog ---------- */
.dialog { border: 0; padding: 0; border-radius: 16px; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-shadow: 0 40px 100px rgba(17,18,20,.3); color: var(--text); }
.dialog::backdrop { background: rgba(17,18,20,.45); }
.dialog__in { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.dialog__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.dialog__close { width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.dialog__close:hover { color: var(--ink); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 10.4px; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; font-size: 12px; color: var(--ink); background: #fff; border: 1px solid #cfd5de; border-radius: 8px; padding: 11px 12px; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--pm-ink); outline-offset: 0; border-color: transparent; }
.form__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.form__note { font-size: 10.4px; color: var(--muted); }
.dialog__done { display: none; }
.dialog.is-done .form, .dialog.is-done .dialog__lead { display: none; }
.dialog.is-done .dialog__done { display: block; }
/* One fieldset per form variant; only the active one is enabled, shown and submitted. */
.form__fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border: 0; margin: 0; padding: 0; min-width: 0; }
.form__fields[hidden] { display: none; }
/* The honeypot: present for bots that fill every input, absent for everyone else. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field [aria-invalid="true"] { border-color: #b3261e; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Article template: posts, jobs, legal ---------- */
/* After the live eunice.ai pages: a rounded card holds the breadcrumb, tag, title and
   date beside the cover; the text follows in one reading column. */
.article { padding-top: clamp(32px, 5vw, 72px); }
.acard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: clamp(24px, 3.5vw, 40px); border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.acard--solo { grid-template-columns: minmax(0, 1fr); }
.acard__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.acrumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: var(--caption); color: var(--muted); margin-bottom: clamp(8px, 4vw, 72px); }
.acrumbs a { display: inline-block; padding: 4px 2px; margin: -4px -2px; color: var(--text); }
.acrumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acrumbs [aria-current] { color: var(--da-text); }
.tag-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--small); color: var(--ink); background: #fff; }
.tag-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.tag-pill--video::before { background: #e5322d; }
.tag-pill--article::before { background: var(--ink); }
.tag-pill--press::before { background: var(--pm-ink); }
.acard__title { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -.02em; }
.acard__date { font-size: var(--small); color: var(--muted); }
.acard__media { min-width: 0; }
.acard__cover { display: block; position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: var(--band); }
.acard__cover img { width: 100%; height: auto; display: block; }
.acard__video, .acard__video:hover { color: #fff; }
.acard__play { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: 999px; background: rgba(17, 18, 20, .82); font-size: var(--small); font-weight: 500; }
.acard__play::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
/* A job's right side: what the role is and how to apply. */
.apanel { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 32px); border-radius: 20px; background: var(--pm-tint); }
.apanel__label { font-size: 12px; color: var(--pm-ink); }
.apanel__what { font-family: var(--font-head); font-size: 18px; line-height: 1.4; color: var(--ink); }
.apanel__facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.apanel__facts div { display: flex; flex-direction: column; gap: 2px; }
.apanel__facts dt { font-size: 12px; color: var(--muted); }
.apanel__facts dd { margin: 0; font-size: var(--small); color: var(--ink); }
.aread { max-width: 800px; margin: clamp(40px, 6vw, 72px) auto 0; }
.aread__lead { font-size: 20px; line-height: 1.5; color: var(--ink); margin-bottom: 32px; }
.aread .prose { max-width: none; }
.aread .prose h2 { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.2; letter-spacing: -.015em; margin-top: 48px; }
.aread__after { margin-top: 40px; }
/* Legal notices: one plain column, left-aligned, no card. */
.article--plain .acard { padding: 0; border: 0; border-radius: 0; }
.article--plain .acrumbs { margin-bottom: 8px; }
.article--plain .aread { margin-left: 0; margin-top: 40px; }

/* ---------- List cards: /blog/, /careers/ ---------- */
/* Open roles: a plain list with room around each (title, then where). */
.jobs { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.jobs__role { display: inline-flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: clamp(16px, 1.45vw, 20px); line-height: 1.45; }
.jobs__role:hover { color: var(--muted); }
.jobs__role:hover .jobs__title { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; list-style: none; margin: 0; padding: 0; }
.lcard { display: flex; flex-direction: column; gap: 12px; height: 100%; color: var(--ink); }
.lcard__media { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--band); }
.lcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
a.lcard:hover .lcard__media img { transform: scale(1.02); }
.lcard__tile { display: flex; align-items: flex-end; width: 100%; height: 100%; padding: 18px; background: var(--pm-tint); color: var(--pm-ink); font-family: var(--font-head); font-size: 20px; }
.lcard__link { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.lcard__meta { font-size: 12px; color: var(--faint); }
.lcard__title { font-family: var(--font-head); font-size: 16px; line-height: 1.35; letter-spacing: -.01em; }
.lcard__text { font-size: var(--small); color: var(--muted); line-height: 1.5; }
a.lcard:hover .lcard__title, .lcard__link:hover .lcard__title { text-decoration: underline; text-underline-offset: 3px; }
.lcard__actions { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 4px; }

/* ---------- Welcome: intro band ---------- */
.band--ink { background: #16171b; color: #fff; margin-top: var(--section); padding-bottom: var(--section); }
.intro__lead { font-family: var(--font-head); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -.015em; max-width: 26em; }

/* ---------- Path (path()): a journey on one line ----------
   The line joins the stops; each stop is a dot on it, then its number, title and text.
   --path-ink is the line and dots: ink on white, white on the ink band. With --onward
   the line runs past the last stop and fades out, and that stop is a ring, still open. */
.path { --path-ink: var(--ink); --path-muted: var(--muted); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; }
.band--ink .path { --path-ink: #fff; --path-muted: rgba(255,255,255,.72); }
.path::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--path-ink); opacity: .35; }
.path--onward::before { right: calc(-1 * var(--gutter)); background: linear-gradient(90deg, var(--path-ink) 0 68%, transparent); }
.path__stop { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 34px; padding-right: 8%; }
.path__stop::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--path-ink); }
.path--onward .path__stop:last-child::before { background: transparent; border: 1.5px solid var(--path-ink); box-sizing: border-box; box-shadow: 0 0 0 5px color-mix(in srgb, var(--path-ink) 12%, transparent); }
.path__title { font-family: var(--font-head); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.25; letter-spacing: -.01em; color: var(--path-ink); }
.path__text { margin: 0; font-size: var(--body); line-height: 1.6; color: var(--path-muted); max-width: 30em; }

/* ---------- Welcome: the people strip ---------- */
@media (prefers-reduced-motion: reduce) { .who__card { transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .who, .who.who--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menus { gap: 18px; }
  .nav__links { font-size: 11.2px; }
  /* Six link columns beside the brand leaves each about 110px here, which is
     narrower than the longest label. Give the brand its own row instead. */
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .backers { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .backers__wall li { height: 88px; }
  /* Tablet and phone: the cover drops under the date, inside the card. */
  .acard { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .acrumbs { margin-bottom: 12px; }
  /* The path turns and runs down the left. */
  .path { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .path::before, .path--onward::before { left: 6px; right: auto; top: 6px; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--path-ink) 0 80%, transparent); }
  .path__stop { padding: 0 0 0 36px; }
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: #fff; flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px; border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(17,18,20,.08); }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 12px 0; font-size: 12.8px; border-bottom: 1px solid var(--line); }
  /* In the menu panel every group is open: the label, then its items indented. */
  .menus { flex-direction: column; gap: 0; }
  .menu { flex-direction: column; align-items: stretch; }
  .menu__top { font-weight: 500; color: var(--ink); }
  .menu__toggle { display: none; }
  .menu__panel { position: static; visibility: visible; opacity: 1; transform: none; min-width: 0; padding: 0 0 0 16px; border: 0; box-shadow: none; background: none; }
  .menu__panel a { border-radius: 0; }
  .menu.is-closed > .menu__panel { visibility: visible; opacity: 1; }
  .nav__mobile-extra { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
  .nav__mobile-extra .btn { align-self: flex-start; }
  .nav__mobile-extra a { color: var(--muted); }
  .nav__menu { display: inline-flex; }
  .hero, .feature, .ifeature { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature__text { order: 0; }
  .hero__visual--field { height: clamp(240px, 56vw, 380px); }
  .hero__visual--field .wf { --u: 1.5cqw; }
  .grid--3, .grid--4, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbers { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .event { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .event__note { min-height: 0; -webkit-line-clamp: unset; line-clamp: none; }
  .logos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .partners { gap: 40px; }
}

/* Small screens: the -20% scale was set for a desktop reading distance. Here the
   single column already supplies the air, so body-level type goes back up while
   the headings keep the reduced scale. Links also get vertical padding: at
   desktop sizes a footer link is an 11px-tall target, which is not tappable. */
@media (max-width: 960px) {
  :root { --h3: 19px; --h4: 15px; --body: 15px; --small: 14px; --caption: 12px; }
  .lead, .body { font-size: 15.5px; }
  .label, .kicker { font-size: 11px; }
  .btn { font-size: 14px; }
  .btn--sm { font-size: 13px; }
  .more { font-size: 13px; padding-block: 7px; }
  .nav__links a { font-size: 15px; }
  .footer__col { font-size: 13px; }
  .footer__col a, .footer__col .linklike { padding-block: 8px; }
  .lockup { padding-block: 8px; }
  .footer__legal { font-size: 12px; }
  .footer__legal-links a { display: inline-block; padding-block: 8px; }
}

/* A touch device wider than the mobile layout — tablet landscape and up — keeps
   the desktop layout but still needs targets a finger can hit. */
@media (pointer: coarse) and (min-width: 961px) {
  .footer__col a, .footer__col .linklike, .footer__legal-links a { display: inline-block; padding-block: 8px; }
  .menu__toggle { width: 28px; height: 28px; }
  .more { padding-block: 7px; }
  .lockup { padding-block: 8px; }
}

@media (max-width: 600px) {
  .who, .who.who--three { grid-template-columns: minmax(0, 1fr); }
  .who__card { min-height: 0; }
  .hero-center__buttons .btn { width: 100%; justify-content: center; }
  .acard { padding: 20px; border-radius: 20px; gap: 24px; }
  .acard__text { gap: 16px; }
  .acard__title { font-size: 32px; }
  .aread__lead { font-size: 18px; }
  .apanel .buttons .btn { width: 100%; justify-content: center; }
  .lcards { grid-template-columns: minmax(0, 1fr); }
  .nav__actions .btn--dark { display: none; }
  .grid--2, .grid--3, .grid--4, .grid--5, .grid--6, .steps, .form, .form__fields { grid-template-columns: minmax(0, 1fr); }
  .shead { flex-direction: column; gap: 6px; }
  .irow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .irow__tag { text-align: left; order: -1; }
  .tile__head { flex-direction: column; align-items: flex-start; }
  .tile { min-height: 0; }
  .dialog__in { padding: 24px; }
}

/* ---------- Pages ported from the live site: MiCA Whitepaper, Security ----------
   These two keep the live page's look — its warm neutrals, sizes and dark band —
   rather than the house rules above, so they read as they do on eunice.ai today.
   Values are measured from the live page at 1440, 810 and 390 px, and the breakpoints
   are the live page's (1199 and 809). The live orange is --da-field; only the
   highlight behind white text is darker, so that it passes WCAG AA large text.
   MiCA type is the live size taken down 20%, like the rest of the site (never under
   12px for running text). */
:root {
  --port-ink: #292929;
  --port-text: #383737;
  --port-stone: #f1efed;
  --port-sand: #f2f0ee;
  --port-card: #f5f5f5;
  --port-mark: #e46a2a;     /* white on it: 3.3:1, AA for large text */
}
.mica-v { display: none; }
@media (min-width: 1200px) { .mica-v--d { display: inline; } }
@media (min-width: 810px) and (max-width: 1199px) { .mica-v--t { display: inline; } }
@media (max-width: 809px) { .mica-v--p { display: inline; } }
.mica-mark { background: var(--port-mark); color: #fff; padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mica-accent { color: var(--da-field); }
.mica-h2 { font-family: var(--font-head); font-size: 38.4px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--port-ink); }

/* Hero */
.mica-hero { padding-top: 72px; display: flex; flex-direction: column; align-items: flex-start; }
.mica-hero__title { font-family: var(--font-head); font-size: 54.4px; font-weight: 400; line-height: 1.2; letter-spacing: -.01em; color: var(--port-ink); }
.mica-hero__sub { margin-top: 20px; max-width: 800px; font-size: 16px; line-height: 1.5; color: var(--port-text); }
.mica-btn { margin-top: 40px; min-height: 48px; padding: 0 24px; font-size: 13.6px; background: var(--port-ink); }

/* Why issuers love us: four stone tiles, the product shot above the words. */
.mica-why { padding-top: 160px; }
.mica-why__grid { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mica-tile { background: var(--port-stone); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; }
.mica-tile__art { height: 380px; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
.mica-tile__img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.mica-tile__title { font-family: var(--font-head); font-size: 22.4px; font-weight: 500; line-height: 1.1; color: var(--port-ink); }
.mica-tile__body { margin-top: 12px; font-size: 13.6px; line-height: 1.5; color: rgba(41, 41, 41, .8); max-width: 572px; }

/* How it works: one card per step, image and words alternating sides. On a wide
   screen the cards stack as you scroll, as they do on the live page. */
.mica-steps { padding-top: 160px; padding-bottom: var(--section-tight); }
.mica-steps .mica-h2 { text-align: center; }
.mica-steps__list { margin: 64px auto 0; max-width: 1044px; display: flex; flex-direction: column; gap: 24px; }
.mica-step { position: sticky; top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 470px; align-items: center; min-height: 478px; background: #fff; border-radius: 16px; overflow: hidden; }
.mica-step__text { padding: 40px 56px; }
.mica-step--flip { grid-template-columns: 470px minmax(0, 1fr); }
.mica-step--flip .mica-step__art { order: -1; }
.mica-step__title { margin-top: 24px; font-family: var(--font-head); font-size: 22.4px; font-weight: 400; line-height: 1.1; color: var(--port-ink); }
.mica-step__points { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; max-width: 349px; }
.mica-step__points li { position: relative; padding-left: 26px; font-size: 13.6px; line-height: 1.7; color: #0a0a0a; }
.mica-step__points li::before { content: ''; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; background: var(--da-field);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.mica-step__art { position: relative; height: 100%; min-height: 478px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mica-step__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mica-step__shot { position: relative; height: auto; }
.mica-step__shot--80 { width: 80%; }
.mica-step__shot--90 { width: 90%; }
.mica-step__shot--76 { width: 76%; }
.mica-step__logo { position: relative; width: 64%; background: var(--port-stone); border-radius: 15px; padding: 22px 29px; display: flex; justify-content: center; }
.mica-step__logo-img { width: 72%; height: auto; }

/* Trust Center band */
.mica-trust { background: var(--port-ink); color: var(--port-stone); padding-block: var(--section); }
.mica-trust__title { max-width: 820px; margin-bottom: 20px; font-family: var(--font-head); font-size: 38.4px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--port-stone); }
.mica-trust .btn { font-size: 11.2px; }
.mica-trust__cards { margin-top: 140px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px; }
.mica-trust__icon { width: 28px; height: 28px; }
.mica-trust__card-title { margin-top: 56px; font-family: var(--font-head); font-size: 19.2px; font-weight: 400; line-height: 1.25; color: var(--port-stone); }
.mica-trust__card-body { margin-top: 12px; font-size: 13.6px; line-height: 1.5; color: var(--port-stone); }
.mica-apply { margin-top: 140px; background: #fff; border-radius: 8px; padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.mica-apply__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 258px)); gap: 58px; }
.mica-apply__title { font-size: 16px; line-height: 1.5; color: var(--port-text); }
.mica-apply__body { margin-top: 4px; font-size: 13.6px; line-height: 1.5; color: var(--port-text); }
.mica-apply__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: none; }
.mica-apply__cta .btn { background: var(--port-ink); }
.mica-apply__note { font-size: 12px; line-height: 1.4; color: var(--port-text); }

/* Security */
.sec-hero { padding-top: 72px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.sec-hero__title { font-family: var(--font-head); font-size: 68px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--port-ink); }
.sec-hero__lead { margin-top: 40px; max-width: 590px; font-size: 16px; line-height: 1.5; color: rgba(41, 41, 41, .72); }
.sec-hero__lead strong { font-weight: 500; color: rgba(41, 41, 41, .9); }
.sec-cards { margin-top: 120px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; max-width: calc(1240px + 2 * var(--gutter)); }
.sec-card { background: var(--port-card); border-bottom: 1px solid var(--port-ink); padding: 16px; min-height: 260px; display: flex; flex-direction: column; }
.sec-card__icon { width: 40px; height: 40px; border-radius: 4px; background: var(--port-ink); display: flex; align-items: center; justify-content: center; }
.sec-card__icon-img { width: 18px; height: 20px; }
.sec-card__title { margin-top: auto; padding-top: 56px; font-family: var(--font-head); font-size: 28px; font-weight: 400; line-height: 1.1; color: var(--port-ink); }
.sec-card__body { margin-top: 12px; font-size: 16px; line-height: 1.5; color: rgba(56, 55, 55, .85); max-width: 573px; }
.sec-compliance { margin-top: var(--section); background: var(--port-sand); padding-block: var(--section-tight); text-align: center; }
.sec-compliance__title { font-family: var(--font-head); font-size: 44px; font-weight: 500; line-height: 1.2; color: var(--port-ink); }
.sec-compliance__sub { margin-top: 16px; font-size: 16px; line-height: 1.5; color: rgba(41, 41, 41, .72); }
.sec-badges { margin-top: 64px; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 110px; }
.sec-badge { display: flex; flex-direction: column; align-items: center; gap: 28px; min-width: 150px; }
.sec-badge__art { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; position: relative; }
.sec-badge__name { font-family: var(--font-head); font-size: 24px; font-weight: 500; line-height: 1.25; color: var(--port-ink); }
.sec-badge__lock { width: 42px; height: 54px; }
.sec-badge__svg, .sec-gdpr__stars { width: 120px; height: 120px; }
.sec-soc2 { width: 104px; height: 104px; margin: 8px; border-radius: 50%; border: 8px solid #8f8f8f; flex-direction: column; gap: 4px; }
.sec-soc2__org { font-size: 10px; line-height: 1; color: var(--port-ink); padding-bottom: 5px; border-bottom: 1px solid #b5b5b5; }
.sec-soc2__name { font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--port-ink); }
.sec-gdpr__name { position: absolute; font-size: 18px; font-weight: 500; color: rgba(41, 41, 41, .9); }

/* Tablet: the live page's 810–1199 layout. */
@media (max-width: 1199px) {
  .mica-hero__sub { font-size: 13.6px; }
  .mica-tile__art { height: 260px; }
  .mica-steps__list { max-width: none; }
  .mica-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 350px; }
  .mica-step--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mica-step__art { min-height: 350px; }
  .mica-step__text { padding: 32px 24px; }
  .mica-trust__cards { gap: 40px; }
  .mica-trust__card-title { font-family: var(--font-body); font-size: 16px; }
  .mica-apply { padding: 32px 24px; }
  .mica-apply__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .mica-apply__title { font-size: 13.6px; }
  .mica-apply__body, .mica-apply__note { font-size: 12px; }
}

/* Phone: the live page's layout below 810. */
@media (max-width: 809px) {
  .mica-hero__title { font-size: 38.4px; }
  .sec-hero__title { font-size: 48px; }
  .mica-h2, .mica-trust__title { font-size: 25.6px; font-weight: 400; }
  .mica-why { padding-top: 120px; }
  .mica-why__grid { margin-top: 40px; grid-template-columns: minmax(0, 1fr); }
  .mica-tile__art { height: 240px; }
  .mica-tile__title { font-size: 19.2px; }
  .mica-steps { padding-top: 120px; }
  .mica-steps__list { margin-top: 40px; }
  .mica-step, .mica-step--flip { position: static; grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .mica-step--flip .mica-step__art { order: 0; }
  .mica-step__text { padding: 12px 0 32px; }
  .mica-step__art { min-height: 357px; border-radius: 16px; }
  .mica-trust__cards { margin-top: 80px; grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .mica-trust__card-title { margin-top: 20px; }
  .mica-apply { margin-top: 80px; flex-direction: column; align-items: stretch; }
  .mica-apply__steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mica-apply__body { font-size: 13.6px; }
  .mica-apply__title { font-size: 13.6px; }
  .mica-apply__note { font-size: 12px; }
  .sec-hero__title br { display: none; }
  .sec-cards { margin-top: 80px; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sec-badges { gap: 48px 24px; }
  .sec-badge { min-width: 0; width: calc(50% - 12px); }
  .sec-badge__name { font-size: 16px; }
}

/* ---------- Reveal on scroll ----------
   Blocks ease up into place as they scroll into view (site.js adds .reveal only to
   what starts below the fold, only with JavaScript, never with reduced motion). */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.is-in { opacity: 1; transform: none; }
/* A row of facts arrives one card at a time, so each credential gets its own moment. */
.facts > .reveal { transition-delay: calc(var(--i, 0) * 220ms); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- The product, drawn (ui.ts) ----------
   One window for every drawing: the glyph and a breadcrumb, a rail of line icons, one
   view. Sizes are in --u (container units), so a drawing reads the same on a tile, a
   plate or a hero. Hairlines, four type sizes, ink on white; the desk colour (--hint)
   marks only the one thing that matters. Motion: one easing, one nine-second loop. The
   view settles in, the accent lands last, holds, and everything fades out together. */
.wf { --hint: var(--ink); --hint-soft: #eceef2; --u: 1.3cqw; --wf-line: #eceff3; --wf-soft: #f4f6f9; --wf-ease: cubic-bezier(.22,.61,.36,1);
  container-type: inline-size; position: relative; display: block; aspect-ratio: 4 / 3; background: var(--band) center / cover no-repeat; border-radius: 14px; overflow: hidden; color: var(--ink); text-align: left; letter-spacing: -.01em; }
.wf--private-markets, .wf--company { --hint: var(--pm-field); --hint-soft: color-mix(in srgb, var(--pm-field) 16%, #fff); }
/* The frame: each desk's background art, blurred and quiet, shows only as a thin border
   round the window (4% a side, about 15% of the drawing). The product is the rest. */
.wf--company { background-image: url('/assets/img/art-dunes.jpg'); }
.wf--private-markets { background-image: url('/assets/img/art-ridges.jpg'); }
.wf--digital-assets, .wf--token-disclosure { background-image: url('/assets/img/hero-crypto.jpg'); }
.wf--digital-assets { --hint: var(--da-field); --hint-soft: color-mix(in srgb, var(--da-field) 18%, #fff); }
.wf--token-disclosure { --hint: var(--td-field); --hint-soft: color-mix(in srgb, var(--td-field) 22%, #fff); }
.wf p { margin: 0; }
.wf ul { list-style: none; margin: 0; padding: 0; }
.wf b { font-weight: 500; }
.wf__win { position: absolute; inset: 4%; display: grid; grid-template-columns: calc(var(--u) * 5.4) minmax(0, 1fr); grid-template-rows: calc(var(--u) * 5) minmax(0, 1fr); background: #fff; border-radius: calc(var(--u) * 1.2); box-shadow: 0 0 0 1px rgba(17,18,20,.06), 0 calc(var(--u) * .4) calc(var(--u) * 1) rgba(17,18,20,.04), 0 calc(var(--u) * 2.4) calc(var(--u) * 6) rgba(17,18,20,.10); overflow: hidden; font-size: calc(var(--u) * 1.6); line-height: 1.5; }
/* Figures line up (dates, pages, ticks); Inter's tabular set also widens hyphens, so it stays on numbers only. */
.wf__table li > span:last-child, .wf__ticks, .wf__cite, .wf__dochead span { font-variant-numeric: tabular-nums; }
.wf__ico { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Chrome: the glyph, the breadcrumb, a search field and you. */
.wf__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(var(--u) * 1.2); min-width: 0; padding: 0 calc(var(--u) * 1.8); border-bottom: 1px solid var(--wf-line); color: var(--muted); font-size: calc(var(--u) * 1.3); white-space: nowrap; }
.wf__glyph { flex: none; width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.6); color: var(--ink); }
.wf__crumb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wf__crumb b { color: var(--ink); }
.wf__search { display: inline-flex; align-items: center; width: 22%; height: calc(var(--u) * 2.4); padding: 0 calc(var(--u) * .8); border-radius: calc(var(--u) * .7); background: var(--wf-soft); color: #aab2bf; }
.wf__search .wf__ico { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); }
.wf__me { flex: none; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border-radius: 50%; background: linear-gradient(135deg, #e4e8ef, #cfd6e0); }
.wf__rail { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.1); padding-top: calc(var(--u) * 1.6); border-right: 1px solid var(--wf-line); }
.wf__r { position: relative; display: grid; place-items: center; width: calc(var(--u) * 3); height: calc(var(--u) * 3); border-radius: calc(var(--u) * .7); color: #aab2bf; transition: color .6s var(--wf-ease), background .6s var(--wf-ease); }
.wf__r.is-on { color: var(--ink); background: var(--wf-soft); }
.wf__view { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 2.4) calc(var(--u) * 3); overflow: hidden; }

/* Text sizes: title, body (the window's), meta, micro. */
.wf__head { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 1.5); }
.wf__head b { font-size: calc(var(--u) * 1.9); letter-spacing: -.02em; }
.wf__head span:not(.wf__btn), .wf__meta, .wf__scope, .wf__foot { color: var(--muted); font-size: calc(var(--u) * 1.3); }
.wf__btn { display: inline-flex; align-items: center; gap: calc(var(--u) * .5); padding: calc(var(--u) * .4) calc(var(--u) * 1.1); border-radius: calc(var(--u) * .7); box-shadow: inset 0 0 0 1px var(--wf-line); color: var(--ink); font-size: calc(var(--u) * 1.3); }
.wf__btn .wf__ico { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); }

/* A citation: a quiet page mark. The one that matters takes the desk's tint, last. */
.wf__cite { position: relative; flex: none; padding: calc(var(--u) * .15) calc(var(--u) * .7); border-radius: calc(var(--u) * .5); background: var(--wf-soft); color: var(--muted); font-size: calc(var(--u) * 1.25); line-height: 1.4; white-space: nowrap; }
.wf__cite--hot { background: var(--hint-soft); color: var(--ink); animation: wf-hot 9s var(--wf-ease) var(--d, 0s) infinite both; }
.wf__cite--hot::after { content: ""; position: absolute; left: calc(var(--u) * .7); right: calc(var(--u) * .7); bottom: calc(var(--u) * .1); height: 1px; background: var(--hint); transform-origin: left; animation: wf-line 9s var(--wf-ease) var(--d, 0s) infinite both; }

/* Ask: the question types itself and is sent; the answer settles, line by line. */
.wf__q { display: flex; align-items: center; gap: calc(var(--u) * .4); padding: calc(var(--u) * .9) calc(var(--u) * .9) calc(var(--u) * .9) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.1); box-shadow: inset 0 0 0 1px var(--wf-line), 0 calc(var(--u) * .4) calc(var(--u) * 1.2) rgba(17,18,20,.04); font-size: calc(var(--u) * 1.75); }
.wf__typed { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wf__typed span { animation: wf-type 9s steps(42, end) infinite both; }
.wf__caret { flex: none; width: 1px; height: calc(var(--u) * 2); margin-right: auto; background: var(--ink); animation: wf-blink 1.1s steps(1) infinite; }
.wf__send { flex: none; display: grid; place-items: center; width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); border-radius: calc(var(--u) * .8); background: var(--ink); color: #fff; animation: wf-press 9s var(--wf-ease) infinite both; }
.wf__send .wf__ico { width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); stroke-width: 1.8; }
.wf__scope { margin-top: calc(var(--u) * -.6); padding-left: calc(var(--u) * 1.6); }
.wf__answer { display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); padding-left: calc(var(--u) * 1.6); border-left: 2px solid var(--wf-line); }
.wf__arow { display: flex; align-items: baseline; gap: calc(var(--u) * 1.6); }
.wf__arow p { flex: 1; min-width: 0; }
.wf__foot { display: flex; align-items: center; gap: calc(var(--u) * .9); padding-top: calc(var(--u) * 1.2); border-top: 1px solid var(--wf-line); }
.wf__docs { display: inline-flex; color: #aab2bf; }
.wf__docs .wf__ico { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); margin-right: calc(var(--u) * -.5); fill: #fff; }

/* Read: a reading pass down the page; the passage is marked and cited in the margin. */
.wf__doc { display: grid; grid-template-columns: calc(var(--u) * 4) minmax(0, 1fr) calc(var(--u) * 14); gap: calc(var(--u) * 2.4); align-items: start; }
.wf__pages { display: flex; flex-direction: column; gap: calc(var(--u) * .9); }
.wf__pages i { aspect-ratio: 3 / 4; border-radius: calc(var(--u) * .35); background: var(--wf-soft); box-shadow: inset 0 0 0 1px var(--wf-line); }
.wf__pages i.is-on { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.wf__page { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 1); min-width: 0; }
.wf__page::after { content: ""; position: absolute; left: calc(var(--u) * -1); right: calc(var(--u) * -1); top: 0; height: 22%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--hint) 9%, transparent), transparent); pointer-events: none; animation: wf-scan-page 9s var(--wf-ease) infinite both; }
.wf__dochead { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 1); padding-bottom: calc(var(--u) * .9); border-bottom: 1px solid var(--wf-line); color: var(--muted); font-size: calc(var(--u) * 1.25); white-space: nowrap; }
.wf__dochead b { overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-size: calc(var(--u) * 1.45); }
.wf__h { margin-top: calc(var(--u) * .3) !important; font-weight: 500; }
.wf__clause { color: var(--text); font-size: calc(var(--u) * 1.45); line-height: 1.65; }
.wf mark { color: var(--ink); border-radius: calc(var(--u) * .25); background: linear-gradient(var(--hint-soft), var(--hint-soft)) no-repeat left / 100% 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; animation: wf-mark 9s var(--wf-ease) infinite both; }
.wf__gap { padding: calc(var(--u) * .8) calc(var(--u) * 1.1); border: 1px dashed #b4bccb; border-radius: calc(var(--u) * .6); color: var(--ink); font-size: calc(var(--u) * 1.45); }
.wf__ln { display: block; height: calc(var(--u) * .6); border-radius: calc(var(--u) * .3); background: #eef1f5; }
.wf__ln--s { width: 58%; }
.wf__ln--h { width: 32%; height: calc(var(--u) * .8); margin-top: calc(var(--u) * .7); background: #dfe4eb; }
.wf__margin { position: relative; margin-top: calc(var(--u) * 7.2); display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .6); color: var(--muted); font-size: calc(var(--u) * 1.3); }
.wf__margin::before { content: ""; position: absolute; right: calc(100% + var(--u) * .5); top: calc(var(--u) * 1.05); width: calc(var(--u) * 1.9); height: 1px; background: var(--hint); transform-origin: right; animation: wf-line 9s var(--wf-ease) var(--d, 0s) infinite both; }

/* Monitor: the watched list, a scan along the timeline, and the one change as a diff. */
.wf__table { width: 54%; font-size: calc(var(--u) * 1.35); }
.wf__table li { display: grid; grid-template-columns: 1fr 1.3fr .8fr; gap: calc(var(--u) * 1); align-items: center; padding: calc(var(--u) * .7) 0; border-top: 1px solid var(--wf-line); color: var(--muted); }
.wf__table li span:first-child { color: var(--ink); }
.wf__table li span:last-child { text-align: right; }
.wf__table .wf__th { border-top: 0; padding-top: 0; font-size: calc(var(--u) * 1.15); color: var(--muted); }
.wf__table .wf__th span:first-child { color: var(--muted); }
/* The ask view's table answer (Digital Assets): four columns, the decision cited. */
.wf__table--ask { width: 100%; padding-left: calc(var(--u) * 1.6); border-left: 2px solid var(--wf-line); }
.wf__table--ask li { grid-template-columns: .7fr 2fr .7fr 1.5fr; }
.wf__table--ask li > .wf__cite { justify-self: end; }
.wf__status { display: inline-flex; align-items: center; gap: calc(var(--u) * .6); color: var(--ink); }
.wf__status i, .wf__tag i { width: calc(var(--u) * .7); height: calc(var(--u) * .7); border-radius: 50%; background: var(--hint); }
.wf__track { position: relative; display: flex; justify-content: space-between; align-items: center; height: calc(var(--u) * 2); }
.wf__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--wf-line); }
.wf__track i { position: relative; width: calc(var(--u) * .7); height: calc(var(--u) * .7); border-radius: 50%; background: #d5dbe3; }
.wf__track i.is-flag { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); background: var(--hint); animation: wf-pulse 9s ease-out infinite both; }
.wf__scan { position: absolute; z-index: 1; top: 50%; left: 0; width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); margin: calc(var(--u) * -.55) 0 0 calc(var(--u) * -.2); border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--ink), 0 0 0 calc(var(--u) * .5) rgba(17,18,20,.06); animation: wf-scan 9s var(--wf-ease) infinite both; }
.wf__ticks { display: flex; justify-content: space-between; margin-top: calc(var(--u) * .6); color: var(--muted); font-size: calc(var(--u) * 1.15); }
.wf__card { position: absolute; right: calc(var(--u) * 3); top: 50%; width: 38%; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .5); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1); background: #fff; box-shadow: 0 0 0 1px rgba(17,18,20,.06), 0 calc(var(--u) * 1.2) calc(var(--u) * 3.2) rgba(17,18,20,.10); font-size: calc(var(--u) * 1.35); transform: translateY(-62%); animation: wf-rise 9s var(--wf-ease) infinite both; }
.wf__tag { display: inline-flex; align-items: center; gap: calc(var(--u) * .5); color: var(--muted); font-size: calc(var(--u) * 1.15); }
.wf__card b { font-size: calc(var(--u) * 1.55); }
.wf__diff { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: calc(var(--u) * .9); width: 100%; margin-top: calc(var(--u) * .4) !important; padding-top: calc(var(--u) * .8); border-top: 1px solid var(--wf-line); }
.wf__diff span { color: var(--muted); }
.wf del { position: relative; color: var(--muted); text-decoration: none; }
.wf del::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: 1px; background: currentColor; transform-origin: left; animation: wf-strike 9s var(--wf-ease) infinite both; }
.wf ins { text-decoration: none; color: var(--ink); background: var(--hint-soft); border-radius: calc(var(--u) * .3); padding: 0 calc(var(--u) * .4); justify-self: start; }

/* Report: your template; each value arrives as a placeholder, then the words, then its source. */
.wf__rep { font-size: calc(var(--u) * 1.4); margin-top: calc(var(--u) * -.4); }
.wf__rep li { display: grid; grid-template-columns: 1fr 1.25fr auto; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * .85) 0; border-top: 1px solid var(--wf-line); }
.wf__rep li > span:first-child { color: var(--muted); }
.wf__val { position: relative; }
.wf__val > span { animation: wf-val 9s var(--wf-ease) var(--d, 0s) infinite both; }
.wf__sk { position: absolute; left: 0; top: 50%; width: 70%; height: calc(var(--u) * .7); margin-top: calc(var(--u) * -.35); border-radius: calc(var(--u) * .35); background: linear-gradient(90deg, #eef1f5 30%, #f8f9fb 50%, #eef1f5 70%) 0 0 / 300% 100%; animation: wf-sk 9s var(--wf-ease) var(--d, 0s) infinite both, wf-shimmer 1.4s linear infinite; }

/* The shared loop: one easing; items step in 120ms apart. --d carries a row's delay to
   everything inside it. */
.wf__in { animation: wf-in 9s var(--wf-ease) var(--d, 0s) infinite both; }
.wf__l1 { --d: .12s; } .wf__l2 { --d: .24s; } .wf__l3 { --d: .36s; } .wf__l4 { --d: .48s; } .wf__l5 { --d: .6s; }
.wf__d4 { --d: 1.75s; } .wf__d5 { --d: 1.9s; } .wf__d6 { --d: 2.05s; } .wf__d7 { --d: 2.25s; } .wf__d8 { --d: 2.4s; }
@keyframes wf-in { 0% { opacity: 0; transform: translateY(calc(var(--u) * .6)); filter: blur(2px); } 8%, 92% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: none; filter: none; } }
@keyframes wf-type { 0%, 3% { clip-path: inset(0 100% 0 0); } 18%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes wf-blink { 50% { opacity: 0; } }
@keyframes wf-press { 0%, 18% { transform: none; } 19.5% { transform: scale(.88); } 22%, 100% { transform: none; } }
@keyframes wf-hot { 0%, 36% { background: var(--wf-soft); color: var(--muted); } 44%, 92% { background: var(--hint-soft); color: var(--ink); } 100% { background: var(--wf-soft); color: var(--muted); } }
@keyframes wf-line { 0%, 40% { transform: scaleX(0); } 50%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes wf-mark { 0%, 26% { background-size: 0% 100%; } 40%, 92% { background-size: 100% 100%; } 100% { background-size: 0% 100%; } }
@keyframes wf-scan-page { 0%, 4% { transform: translateY(-100%); opacity: 0; } 8% { opacity: 1; } 26% { transform: translateY(420%); opacity: 1; } 30%, 100% { transform: translateY(420%); opacity: 0; } }
@keyframes wf-scan { 0%, 6% { left: 0; opacity: 0; } 9% { opacity: 1; } 32% { left: 83.333%; opacity: 1; } 36%, 100% { left: 83.333%; opacity: 0; } }
@keyframes wf-pulse { 0%, 33% { box-shadow: 0 0 0 0 transparent; } 34% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hint) 40%, transparent); } 46%, 100% { box-shadow: 0 0 0 calc(var(--u) * 1.6) transparent; } }
@keyframes wf-rise { 0%, 36% { opacity: 0; transform: translateY(-56%); filter: blur(2px); } 46%, 92% { opacity: 1; transform: translateY(-62%); filter: none; } 100% { opacity: 0; transform: translateY(-62%); filter: none; } }
@keyframes wf-strike { 0%, 50% { transform: scaleX(0); } 56%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes wf-sk { 0%, 12% { opacity: 1; } 20%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wf-val { 0%, 13% { opacity: 0; } 21%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wf-shimmer { to { background-position: -150% 0; } }

/* On a home tile the window is a wide crop. */
.tile__shot .wf { --u: .8cqw; aspect-ratio: 16 / 9; border-radius: 4px 0 0 0; }
.tile__shot .wf__win { inset: 5% 4% -8%; }

/* The film: one window, its scenes stacked in the view. site.js steps data-step and puts
   is-on on the scene in view, which plays that scene's animations once. Scenes cross
   with a fade, a hair of scale and a blur that clears. */
.wf--film { --u: .9cqw; aspect-ratio: 16 / 9; }
.wf__scene { grid-area: 2 / 2; opacity: 0; visibility: hidden; transform: scale(1.012); filter: blur(3px); transition: opacity .4s var(--wf-ease), transform .7s var(--wf-ease), filter .4s var(--wf-ease), visibility 0s .4s; }
.wf__scene.is-on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .55s var(--wf-ease), transform .8s var(--wf-ease), filter .55s var(--wf-ease); }
/* Between scenes the view and its breadcrumb fade out together, then the next fades in. */
.wf--film .wf__crumb { transition: opacity .35s var(--wf-ease); }
.wf--film.is-leaving .wf__scene.is-on { opacity: 0; filter: blur(3px); }
.wf--film.is-leaving .wf__crumb { opacity: 0; }
.wf--film .wf__scene:not(.is-on) * { animation: none !important; }
.wf--film .wf__scene.is-on * { animation-duration: 8s; animation-iteration-count: 1; animation-fill-mode: backwards; }
.wf--film .wf__scene.is-on .wf__caret { animation-duration: 1.1s; animation-iteration-count: infinite; }
.wf--film .wf__scene.is-on .wf__sk { animation-duration: 8s, 1.4s; animation-iteration-count: 1, infinite; }
.wf--film.is-paused * { animation-play-state: paused !important; }
.wf--film .wf__crumb b { display: none; }
.wf--film[data-step="0"] .wf__c0, .wf--film[data-step="1"] .wf__c1, .wf--film[data-step="2"] .wf__c2, .wf--film[data-step="3"] .wf__c2 { display: inline; }
.wf--film[data-step="0"] .wf__r0, .wf--film[data-step="1"] .wf__r1, .wf--film[data-step="2"] .wf__r2, .wf--film[data-step="3"] .wf__r2 { color: var(--ink); background: var(--wf-soft); }
.wf__close { position: absolute; inset: 0; display: grid; place-content: center; padding: 0 12%; background: color-mix(in srgb, #fff 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: center; opacity: 0; visibility: hidden; transition: opacity .9s var(--wf-ease), visibility 0s .9s; }
.wf__close p { font-family: var(--font-head); font-weight: 300; font-size: calc(var(--u) * 5); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.wf__close span { display: inline-block; opacity: 0; transform: translateY(calc(var(--u) * .8)); filter: blur(3px); transition: opacity .7s var(--wf-ease), transform .9s var(--wf-ease), filter .7s var(--wf-ease); }
.wf--film[data-step="3"] .wf__close { opacity: 1; visibility: visible; transition: opacity .9s var(--wf-ease); }
.wf--film[data-step="3"] .wf__close span { opacity: 1; transform: none; filter: none; }
.wf--film[data-step="3"] .wf__close span:nth-child(2) { transition-delay: .25s; }
.wf--film[data-step="3"] .wf__close span:nth-child(3) { transition-delay: .5s; }
@media (max-width: 720px) {
  .wf--film { --u: 1.45cqw; aspect-ratio: 4 / 3; }
  .wf--film .wf__win { inset: 3%; }
  .wf__search { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wf *, .wf *::before, .wf *::after { animation: none !important; transition: none !important; }
  .wf__page::after, .wf__scan, .wf__sk { display: none; }
}