/* SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
   The landing page (tracker 44e5b7f531f5, feature 058479e837df). The motion follows opendue.com; the look follows
   docs/specs/WEB_DESIGN_RULES.md: a near-white ground, dark type, ONE accent, hierarchy from type and space.
   This page is served as a static file, outside the Vite bundle, so the app's theme.css and its font picker do not
   reach it: the tokens are declared once here and every rule below reads them.
   Motion rule: nothing is hidden unless the script has put the page in motion mode, so a visitor with no script, or
   who asked for reduced motion, gets the whole page at rest. */

@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-display: swap; src: url(fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 500; font-display: swap; src: url(fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 800; font-display: swap; src: url(fonts/hanken-grotesk-latin-800-normal.woff2) format("woff2"); }

:root {
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ground: #f5f4f0;
  --ink: #14151a;
  --muted: #55565f;
  --line: rgba(20, 21, 26, .14);
  --accent: #a8474e;              /* the app's light-theme accent (theme.css) */
  --ease: cubic-bezier(.37, 0, .63, 1);   /* sine in-out, as motion.js */
  --giant: clamp(46px, 11.6vw, 200px);
  --gutter: clamp(16px, 2.4vw, 32px);
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 16px;
  line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
img { display: block; max-width: 100%; }
.is-missing { visibility: hidden; }      /* a picture that did not load, or the card that held it (home.js) */
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* the ring must show on every ground it can land on: light on the dark closing picture, two-tone on the top bar,
   which floats over all of them */
.start__mask :focus-visible { outline-color: var(--ground); }
.nav :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--ground); }

/* ---------- top bar ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 14px var(--gutter); pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav__pill { display: inline-flex; align-items: center; height: 40px; border-radius: 20px; font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; }
.nav__pill--dark { justify-self: start; background: var(--ink); color: var(--ground); padding: 0 6px; }
.nav__pill--dark a { padding: 8px 16px; text-decoration: none; }
.nav__pill--dark a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav__pill--split { justify-self: end; background: #e4e2dc; padding: 0; }
.nav__pill--split a { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 20px;
  text-decoration: none;
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.nav__pill--split a.is-solid { background: var(--ink); color: var(--ground); }
.nav__brand { justify-self: center; display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.03em;
  height: 40px; padding: 0 14px 0 10px; border-radius: 20px; background: var(--ground); }
.nav__brand img { width: 34px; height: auto; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding: 96px var(--gutter) 40px; display: flex;
  flex-direction: column; align-items: center; text-align: center; overflow: hidden; }
.hero { justify-content: center; }
/* The hero's words stay IN FRONT of the glass that passes behind them. The glass shows dark screens and the words
   are dark, so the words are painted by difference against whatever is behind: the colour below minus the page's
   ground gives exactly the ink on the plain page, and turns light where a dark screen shows through the glass. */
.hero__eyebrow, .hero__title, .hero__desc, .hero__cta { position: relative; z-index: 1; }
.hero__eyebrow, .hero__title, .hero__desc { mix-blend-mode: difference; color: #e1dfd6; }
.hero__eyebrow { margin: 4vh 0 2vh; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.hero__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--giant); line-height: .9;
  letter-spacing: -.045em; text-transform: uppercase; pointer-events: none; }
.hero__line { display: block; }
.hero__desc { margin: 6vh 0 0; max-width: 52ch; font-size: clamp(15px, 1.25vw, 19px); font-weight: 500; }

/* ---------- the glass: a round lens that follows the mouse over a panel picture (home.js writes where and what) ---------- */
.glass { position: fixed; left: 0; top: 0; z-index: 30; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background-color: var(--ink); background-repeat: no-repeat; opacity: 0; transform: translate(-50%, -50%) scale(.6);
  transition: opacity .18s ease, transform .22s var(--ease);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 255, 255, .6), 0 0 0 10px rgba(255, 255, 255, .08),
    inset 0 3px 12px rgba(255, 255, 255, .45), inset 0 -16px 36px rgba(0, 0, 0, .4); }
.glass.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .glass { transition: none; } }

/* THE LENS ZONE (the hero, the pinned words, the cards). Its glass is the zone's first child and sits BEHIND every
   word in the zone; it holds the whole wall of screens drawn larger, and home.js sizes the wall and pulls it so the
   point under the cursor is in the middle. Nothing of the wall is ever drawn outside the glass, and the glass is
   invisible until the cursor is in the zone. Near the line where the zone ends it fades and shrinks by the number
   home.js writes into --lens-fade (1 = full, 0 = gone), so the effect ends without an edge. */
.lens-zone { position: relative; }
.lens-zone__glass { position: absolute; z-index: 0; overflow: hidden; }
.lens-zone__glass.is-on { opacity: var(--lens-fade, 1); transform: translate(-50%, -50%) scale(calc(.6 + .4 * var(--lens-fade, 1))); }
.lens-zone__glass::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 3px 12px rgba(255, 255, 255, .45), inset 0 -16px 36px rgba(0, 0, 0, .4); }
.lens-zone__mosaic { position: absolute; left: 0; top: 0; display: grid; grid-auto-rows: 1fr; }
/* each screen at its own pixel size, in the middle of its tile, on the app's dark ground: a picture stretched past its
   own pixels is soft, and the founder asked for crisp words (tracker 2b512d767c3a) */
.lens-zone__mosaic > i { display: block; background-color: #0a0e14; background-size: auto; background-repeat: no-repeat; background-position: center; }
[data-step] { cursor: zoom-in; }
.hero__cta { margin-top: 26px; }
.hero__cta .reveal { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.btn { display: inline-flex; align-items: center; height: 46px; padding: 0 24px; text-decoration: none; cursor: pointer; border: 1px solid var(--ink); border-radius: 23px; background: transparent;
  font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.btn--solid { background: var(--ink); color: var(--ground); }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ground); }

/* ---------- the pinned words ---------- */
.pile { position: relative; }
.pile__pin { padding: 12vh var(--gutter); text-align: center; }
.pile__lead, .pile__words { margin: 0; padding: 0; list-style: none; font-family: var(--font-display); font-weight: 800;
  font-size: var(--giant); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; }
.pile__words { color: var(--accent); }
/* The pinned words stay in front of the glass and readable over a dark screen, like the hero's: the whole block is
   painted by difference against what is behind it. So its two colours are written as (ground minus the colour
   wanted): on the plain page the lead comes out as the ink and the words as the accent, exactly as before, and
   where a dark screen shows through the glass they turn light. */
.pile__pin { mix-blend-mode: difference; }
.pile__pin .pile__lead { color: #e1dfd6; }       /* #f5f4f0 minus the ink #14151a */
.pile__pin .pile__words { color: #4dada2; }      /* #f5f4f0 minus the accent #a8474e */
.pile.is-pinned .pile__pin { position: sticky; top: 0; height: 100vh; padding: 0 var(--gutter); overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; }
.pile.is-pinned .pile__lead, .pile.is-pinned .pile__words { font-size: min(10vw, 13.6vh); }
.pile.is-pinned [data-pile-word] { will-change: transform; }

/* ---------- the page body sits above the footer and ends on corners that home.js flattens ---------- */
#home { position: relative; z-index: 1; background: var(--ground); overflow: clip;
  border-radius: 0 0 var(--round, 0px) var(--round, 0px); }

/* ---------- the card pile: at rest the cards are scattered; in motion mode they wait in a pile ---------- */
.scatter { position: relative; overflow: hidden; overflow: clip; }
.scatter__stage { position: relative; height: 100vh; min-height: 560px; display: grid; place-items: center; }
.scatter__title { position: relative; z-index: 0; margin: 0; text-align: center; font-family: var(--font-display);
  font-weight: 800; font-size: clamp(34px, 6.4vw, 110px); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; }
.scatter__title { mix-blend-mode: difference; color: #e1dfd6; }      /* in front of the glass, as the hero's words are */
.scatter__card { position: absolute; z-index: 1; left: 50%; top: 50%; margin: 0; width: clamp(110px, 15vw, 250px);
  aspect-ratio: 1; border-radius: 16px; perspective: 900px;
  transform: translate(-50%, -50%) translate(var(--x), var(--y)); }
/* THE FLIP IN PLACE (tracker 7495ca2227c1). The founder, 2026-10-04: "when user hovers over it it should do a small flip
   right where it is and show whats needed, right now its making a whole circle". The old turn used the individual rotate property on the tile,
   which applies AFTER the tile's own transform, so it went round the stage's centre. Now an inner flipper turns about the
   tile's own centre; the tile itself keeps its place. The front is the name, the back says what the product does. */
.scatter__flip { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.scatter__card.is-flipped .scatter__flip { transform: rotateY(180deg); }
.scatter__front, .scatter__back { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.scatter__back { transform: rotateY(180deg); padding: 0 14px; background: var(--ink); color: var(--ground); text-align: center;
  font-family: var(--font-body); font-weight: 500; font-size: clamp(12px, 1vw, 15px); line-height: 1.35; letter-spacing: 0; }
/* A FILM CARD (trackers ea8f89222e22, aebdb7ec0a62): a plain name card at rest. Opened, it is a screen in the shape of
   its film over the place it was (home.js gives the size and the place); the film covers the name. It is made larger
   by its width and height, never by a scale: a film stretched by a transform is a soft film. The flip is one small
   turn, edge-on and back, while the faces swap. */
.scatter__card[data-films] { cursor: pointer; }
.scatter__card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ink); opacity: 0; }
.scatter__card.is-open { z-index: 5; width: var(--ow, min(44vw, 640px)); height: var(--oh, auto); aspect-ratio: auto; transform: translate(-50%, -50%) translate(var(--ox, 0px), var(--oy, 0px)); overflow: hidden; background: var(--ink); }
.scatter__card.is-open video { opacity: 1; transition: opacity .01s linear .2s; }
.scatter__card.is-open span { display: none; }
.scatter__note, .scatter__count { position: absolute; bottom: 10px; z-index: 1; padding: 5px 10px; border-radius: 12px; background: var(--ink);
  color: var(--ground); font-size: 12px; font-weight: 500; font-style: normal; letter-spacing: .04em; text-transform: uppercase; display: none; }
.scatter__note { right: 10px; }
.scatter__count { left: 10px; }
.scatter__card.is-open .scatter__note, .scatter__card.is-open .scatter__count { display: block; }
/* the arrows: one each side, half way up; the chevron is two borders of a small square, no icon font */
.scatter__arrow { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ground); display: none; }      /* light on the film's dark ground, so it is seen */
.scatter__arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink); transform: translate(-70%, -50%) rotate(45deg); }
.scatter__arrow--prev { left: 8px; }
.scatter__arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.scatter__arrow--next { right: 8px; }
.scatter__card.is-open .scatter__arrow { display: block; }
.scatter__arrow:hover { background: #e4e2dc; }
.scatter__arrow:focus-visible { outline: 2px solid var(--ground); outline-offset: 2px; }
.scatter__card:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {       /* no turn: the back fades in over the front */
  .scatter__flip { transition: none; transform: none !important; }
  .scatter__back { transform: none; transition: opacity .2s linear; opacity: 0; }
  .scatter__card.is-flipped .scatter__back { opacity: 1; }
}
.scatter__front { padding: 0 10px; text-align: center; line-height: 1.05;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(16px, 2vw, 34px); letter-spacing: -.03em; }
.scatter__card--ink .scatter__front { background: var(--ink); color: var(--ground); }
.scatter__card--accent .scatter__front { background: var(--accent); color: var(--ground); }
.scatter__card--paper .scatter__front { background: #e4e2dc; color: var(--ink); }
.scatter__card:nth-child(1) { --x: -41vw; --y: -20vh; --tilt: -7deg; }
.scatter__card:nth-child(2) { --x: -36vw; --y: 22vh; --tilt: 5deg; }
.scatter__card:nth-child(3) { --x: -22vw; --y: -33vh; --tilt: -3deg; }
.scatter__card:nth-child(4) { --x: -10vw; --y: 33vh; --tilt: 8deg; }
.scatter__card:nth-child(5) { --x: 6vw; --y: -34vh; --tilt: -9deg; }
.scatter__card:nth-child(6) { --x: 37vw; --y: -27vh; --tilt: 4deg; }
.scatter__card:nth-child(7) { --x: 41vw; --y: 8vh; --tilt: -5deg; }
.scatter__card:nth-child(8) { --x: 24vw; --y: 28vh; --tilt: 6deg; }

/* ---------- a title beside a paragraph ---------- */
.copy { max-width: 1160px; margin: 0 auto; padding: 4vh var(--gutter) 16vh; display: grid; grid-template-columns: 1fr 1fr;
  gap: 4vw; align-items: start; }
.copy__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.7vw, 42px);
  line-height: 1.08; letter-spacing: -.025em; }
.copy__text { margin: 0; color: var(--muted); font-size: clamp(16px, 1.3vw, 20px); }

/* ---------- the red section: the name in the middle, the products rising past it (tracker 07e965373dd4) ----------
   At rest (no script, reduced motion, a phone) it is a plain list: the name, then each product with its pictures and
   their names. Pinned (home.js, desktop), the name sits in the middle and each group is a fanned pile of pictures at
   one side, moved by the scroll. The pictures are SVG drawings, so any size is sharp. */
.rise { position: relative; background: var(--accent); color: var(--ground); }
.rise__pin { position: relative; padding: 12vh var(--gutter) 9vh; }
.rise__name { margin: 0 0 8vh; text-align: center; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(44px, 9vw, 150px); line-height: .9; letter-spacing: -.05em; }
.rise__field { max-width: 1160px; margin: 0 auto; display: grid; gap: 9vh; }
.rise__group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rise__product { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.rise__pic { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: #0f1113; outline-offset: 3px; }
.rise__pic:focus-visible { outline: 2px solid var(--ground); }
.rise__pic img { width: 100%; height: auto; }
.rise__pic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: var(--ink); color: var(--ground);
  font-size: 13px; line-height: 1.3; opacity: 0; transition: opacity .15s linear; }
.rise__pic figcaption b { display: block; font-weight: 500; font-size: 15px; }
.rise__pic figcaption span { display: block; color: #c9c7c0; }
.rise__pic:hover figcaption, .rise__pic:focus-visible figcaption { opacity: 1; }
.rise__pic:hover, .rise__pic:focus-visible { z-index: 9; }
.rise:not(.is-pinned) .rise__pic figcaption { opacity: 1; position: static; }
.rise__note { max-width: 96ch; margin: 9vh auto 0; font-size: 13px; text-align: center; color: var(--ground); }
/* pinned: one screen, the name in the middle, the groups at the sides */
.rise.is-pinned .rise__pin { position: sticky; top: 0; height: 100vh; padding: 0; overflow: hidden; overflow: clip; }
.rise.is-pinned .rise__name { position: absolute; left: 0; right: 0; top: 50%; z-index: 2; margin: 0; transform: translateY(-50%); pointer-events: none;
  font-size: clamp(40px, 5.4vw, 96px); }   /* the pictures pass behind the name */
.rise.is-pinned .rise__field { position: absolute; inset: 0; max-width: none; display: block; }
.rise.is-pinned .rise__group { position: absolute; top: 50%; display: block; width: min(29vw, 480px); aspect-ratio: 8 / 5; margin-top: calc(min(29vw, 480px) * -.3125);
  will-change: transform; }      /* home.js writes where it is and how large */
.rise.is-pinned .rise__group--left { left: 4vw; }      /* the group rests clear of the name: seen covering the chart, 2026-10-02 */
.rise.is-pinned .rise__group--right { right: 4vw; }
.rise.is-pinned .rise__product { position: absolute; left: 0; bottom: calc(100% + 34px); white-space: nowrap; opacity: var(--rise-e, 1); font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 2.2vw, 34px); letter-spacing: -.02em; text-transform: none; }
.rise.is-pinned .rise__pic { position: absolute; box-shadow: 0 18px 40px rgba(20, 21, 26, .35); will-change: transform; }
.rise.is-pinned .rise__pic--a { left: 0; top: 0; width: 100%; z-index: 1; }
.rise.is-pinned .rise__pic--b { right: -12%; top: -22%; width: 46%; z-index: 2; }
.rise.is-pinned .rise__pic--c { left: -10%; bottom: -24%; width: 42%; z-index: 3; }
.rise.is-pinned .rise__pic--d { right: 4%; bottom: -32%; width: 34%; z-index: 4; }
.rise.is-pinned .rise__group:hover, .rise.is-pinned .rise__group:focus-within { z-index: 4; }   /* the group being read comes in front of the name */
.rise.is-pinned .rise__pic:hover, .rise.is-pinned .rise__pic:focus-visible { z-index: 9; scale: 1.05; }
.rise.is-pinned .rise__note { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 18px; z-index: 3; margin: 0 auto; pointer-events: none; }
/* a phone keeps two pictures side by side: one a row made the section nine screens long (seen 2026-10-02) */
@media (max-width: 767px) { .rise__group { gap: 10px; } .rise__pic figcaption { padding: 8px 9px; font-size: 12px; } .rise__pic figcaption b { font-size: 13px; } .rise__field { gap: 6vh; } }

/* ---------- the sliding rows and the full list ---------- */
.tools { padding: 16vh 0 14vh; text-align: center; overflow: hidden; overflow: clip; }
.tools .copy__title { padding: 0 var(--gutter); margin-bottom: 6vh; }
.marquee__group { display: flex; flex-wrap: wrap; justify-content: center; flex: none; margin: 0; padding: 0; list-style: none;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 5vw, 84px); line-height: 1.12;
  letter-spacing: -.04em; text-transform: uppercase; }
.marquee__group li { padding: 0 .32em; white-space: nowrap; }
.marquee--back { color: var(--accent); }
.tools__more { margin: 7vh 0 0; }
.tools__list { max-width: 1160px; margin: 6vh auto 0; padding: 0 var(--gutter); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 28px 24px; text-align: left; }
.tools__list[hidden] { display: none; }
.tools__list h4 { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); }
.tools__list ul { margin: 0; padding: 0; list-style: none; }
.tools__list li { padding: 3px 0; }

/* ---------- private per account ---------- */
.private { padding: 15vh var(--gutter); border-top: 1px solid var(--line); overflow: hidden; overflow: clip; }
.private__title { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 8.6vw, 150px); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; }
.private__half { display: inline-block; }
.private__half--r { color: var(--accent); }
.private__points { max-width: 1160px; margin: 10vh auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; }
.private__points h4 { margin: 0 0 8px; font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.private__points p { margin: 0; color: var(--muted); }

/* ---------- the closing picture, seen through a window that opens ---------- */
.start__mask { position: relative; height: 100vh; min-height: 560px; display: grid; place-items: center; overflow: hidden;
  background: var(--ink); color: var(--ground);
  clip-path: inset(var(--mask-y, 0%) var(--mask-x, 0%) round var(--mask-r, 0px)); }
.start__mask > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.start__over { position: relative; padding: 0 var(--gutter); text-align: center; }
.start__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--giant); line-height: .9;
  letter-spacing: -.045em; text-transform: uppercase; }
.start__text { margin: 22px 0 0; font-size: clamp(16px, 1.4vw, 22px); }
.start__cta { margin-top: 28px; display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn--light { background: var(--ground); border-color: var(--ground); color: var(--ink); }
.btn--ghost { border-color: var(--ground); color: var(--ground); }

/* ---------- the footer lies under the end of the page ---------- */
.foot { position: relative; z-index: 0; margin-top: -120px; padding: calc(120px + 9vh) var(--gutter) 26px;
  background: #e4e2dc; color: var(--ink); }
.foot__brand { margin: 0 0 6vh; font-family: var(--font-display); font-weight: 800; font-size: clamp(54px, 16.5vw, 300px);
  line-height: .85; letter-spacing: -.055em; }
.foot__row { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: 13px; color: var(--muted); }
.foot__links { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------- motion mode: set by home.js, never under reduced motion ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .05em .02em 0; margin: -.05em -.02em 0; }
.c { display: inline-block; }
.js-motion [data-split] .c { transform: translateY(150%); transition: transform 1.667s var(--ease); }
.js-motion.is-in [data-split] .c { transform: none; }

/* reached-on-scroll: letters rise, paragraphs come up, the two title halves meet */
.js-motion [data-rise] .c { transform: translateY(160%); transition: transform .9s var(--ease); }
.js-motion [data-rise].is-seen .c { transform: none; }
.js-motion [data-reveal]:not([data-rise]):not(.private__title) { opacity: 0; transform: translateY(50px);
  transition: opacity 1s var(--ease) .3s, transform 1s var(--ease) .3s; }
.js-motion [data-reveal]:not([data-rise]):not(.private__title).is-seen { opacity: 1; transform: none; }
.js-motion .private__half { opacity: 0; transition: transform 1s cubic-bezier(.3, 1.3, .5, 1) .2s, opacity .3s linear .2s; }
.js-motion .private__half--l { transform: translateX(-25rem); }
.js-motion .private__half--r { transform: translateX(25rem); }
.js-motion .is-seen .private__half { opacity: 1; transform: none; }

.js-motion .scatter__card { transition: transform 2s var(--ease); }
.js-motion .scatter__card.is-open { transition: transform .3s var(--ease), width .3s var(--ease), height .3s var(--ease); }   /* a film card opens and closes briskly */
.js-motion .scatter:not(.is-out) .scatter__card { transform: translate(-50%, -50%) rotate(var(--tilt)); }
.js-motion .scatter__title { transition: opacity 1.2s var(--ease) .4s; }
.js-motion .scatter:not(.is-out) .scatter__title { opacity: 0; transition-delay: 0s; }


.js-motion .marquee { display: flex; width: max-content; animation: slide var(--marquee-s, 40s) linear infinite; }
.js-motion .marquee--back { animation-direction: reverse; }
.js-motion .marquee:hover { animation-play-state: paused; }   /* a visitor can stop a row to read it */
.js-motion .marquee__group { flex-wrap: nowrap; }
@keyframes slide { to { transform: translateX(calc(-100% / 3)); } }

.ln { display: block; overflow: hidden; }
.ln > span { display: block; }
.js-motion .ln > span { transform: translateY(300%); transition: transform 1.667s var(--ease) .333s; }
.js-motion .ln:nth-child(2) > span { transition-delay: .633s; }
.js-motion .ln:nth-child(3) > span { transition-delay: .933s; }
.js-motion.is-in .ln > span { transform: none; }

.reveal { display: inline-block; }
.js-motion .reveal { clip-path: inset(0 50%); transition: clip-path 1.5s var(--ease) .2s; }
.js-motion.is-in .reveal { clip-path: inset(-8px); }      /* room for the focus ring of the buttons inside */


@media (max-width: 767px) {
  .nav { grid-template-columns: auto 1fr; }
  .nav__pill--dark { display: none; }
  .nav__brand { justify-self: start; font-size: 19px; }
  .nav__pill--split a { padding: 0 13px; }
  .hero { padding-top: 84px; }
  .hero__title { font-size: clamp(40px, 13.4vw, 110px); }
  .ln { display: inline; overflow: visible; }
  .ln > span { display: inline; }
  .js-motion .ln > span { transform: none; }
  .pile__lead, .pile__words { font-size: clamp(30px, 10.4vw, 90px); }      /* "Option trading" must fit a phone */
  .scatter__card { width: 25vw; border-radius: 12px; }
  .scatter__card:nth-child(1) { --x: -34vw; --y: -17vh; }
  .scatter__card:nth-child(2) { --x: -34vw; --y: 18vh; }
  .scatter__card:nth-child(3) { --x: -17vw; --y: -33vh; }
  .scatter__card:nth-child(4) { --x: -8vw; --y: 33vh; }
  .scatter__card:nth-child(5) { --x: 12vw; --y: -36vh; }
  .scatter__card:nth-child(6) { --x: 34vw; --y: -22vh; }
  .scatter__card:nth-child(7) { --x: 35vw; --y: 14vh; }
  .scatter__card:nth-child(8) { --x: 20vw; --y: 31vh; }
  .copy { grid-template-columns: 1fr; gap: 18px; padding-bottom: 10vh; }
  .private__points { grid-template-columns: 1fr; gap: 26px; }
  .js-motion .private__half--l { transform: translateX(-60vw); }
  .js-motion .private__half--r { transform: translateX(60vw); }
}
/* The smallest phones: the top bar keeps the mark and both buttons, and drops the written name (the link still says
   it to a screen reader). Seen at 320 px on 2026-10-01: the buttons ran off the right edge. */
@media (max-width: 420px) {
  .nav__brand span { display: none; }
  .nav__brand { padding: 0 8px; }
}

/* ---------- the pages beside the landing page: Products, About, Help, Contact (tracker 8a4493242b36) ----------
   Plain reading pages on the same ground, type and accent. No script: nothing here moves or waits to be shown. */
.nav__pill--dark a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.page { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter) 12vh; }
.page__head { padding: clamp(120px, 20vh, 220px) 0 8vh; }
.page__eyebrow { margin: 0 0 18px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.page__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 7.4vw, 112px); line-height: .94;
  letter-spacing: -.04em; text-transform: uppercase; }
.page__lead { margin: 28px 0 0; max-width: 60ch; font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; }
.page__block { display: grid; grid-template-columns: 1fr 1.5fr; gap: 6vw; padding: 44px 0; border-top: 1px solid var(--line); }
.page__block h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.7vw, 42px); line-height: 1.1;
  letter-spacing: -.02em; }
.page__body > :first-child { margin-top: 0; }
.page__body p { margin: 0 0 16px; max-width: 62ch; color: var(--muted); font-size: clamp(16px, 1.2vw, 19px); }
.page__body p strong { color: var(--ink); font-weight: 500; }
.page__body a { text-underline-offset: 3px; }
.page__body a:hover { color: var(--accent); }
.page__tools { margin: 22px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.page__tools li { padding: 12px 0; border-top: 1px solid var(--line); }
.page__tools b { display: block; font-weight: 500; }
.page__tools span { display: block; color: var(--muted); font-size: 15px; }
.page__note { margin: 0; padding: 28px 0 0; border-top: 1px solid var(--line); max-width: 78ch; font-size: 14px; color: var(--muted); }
.page__mail { font-size: clamp(19px, 1.9vw, 28px); font-weight: 500; letter-spacing: -.01em; overflow-wrap: anywhere; }
.page details { border-top: 1px solid var(--line); }
.page details:last-of-type { border-bottom: 1px solid var(--line); }
.page summary { padding: 18px 0; cursor: pointer; font-size: clamp(17px, 1.4vw, 21px); font-weight: 500; }
.page details > p { margin: 0 0 18px; max-width: 62ch; color: var(--muted); font-size: clamp(16px, 1.2vw, 19px); }
.page__cta { display: flex; flex-wrap: wrap; gap: 12px; padding: 44px 0 0; border-top: 1px solid var(--line); }
.foot--plain { margin-top: 0; padding-top: 9vh; }

/* ---------- the Products list (tracker 68e7deee164e) ----------
   The founder's reference, MEASURED in a headless browser (docs/research/landing/PRODUCTS_REFERENCE_JJETTAS_2026-10-04.md):
   one giant title across the page, then a quiet list of names, one per row, each row opening in place. Layout and timings
   are the reference's; the look (ground, ink, accent, Hanken Grotesk) is ours. At rest (no script) every row is open and
   nothing is hidden: the closed state exists only under .is-live, which productsList.js sets. */
.page--wide { max-width: none; padding: 84px var(--edge) 12vh; }
:root { --edge: clamp(24px, 3.34vw, 48px); --ease-out: cubic-bezier(.16, 1, .3, 1);
  --mono: "JetBrains Mono", Consolas, monospace; }
/* the reference's look, in our own files (founder 2026-10-04; WEB_DESIGN_RULES "The Products page follows its reference"):
   Anton (OFL, a drawn condensed face; the founder said yes to downloading it) for the title, and OFL JetBrains Mono for
   the row names, licences beside them; both cut and written by scripts/dev/make_products_assets.py */
@font-face { font-family: "Anton"; font-weight: 400; font-display: swap; src: url(fonts/anton-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }
/* the reference's layout in the landing page's own colours: the founder, 2026-10-04, "change to color that match the
   landing page I dont want the beign color" -- the sand ground, the grain and the wash went; html.ref only scopes Anton */
/* the display token is Anton inside the page body only: the brand in the top bar and the footer keep their face */
html.ref .page--wide, .page--ref { --font-display: "Anton", "Hanken Grotesk", Arial, sans-serif; }
/* the About page in the same format (epic 71ca164eb41f): the slot for the founder's film, and the measured figures */
.about__slot { display: grid; place-items: center; width: min(100%, 640px); aspect-ratio: 16 / 9; margin: 28px 0 0; background: var(--ink);
  color: var(--ground); font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.about__numbers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 32px; margin: 8px 0 0; }
.about__fig { min-width: 0; }
.about__numbers dt { font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); line-height: 1; }
.about__numbers dd { margin: 6px 0 0; color: var(--muted); }
.about__numbers small { display: block; font-size: 12px; }
.plist__text .about__source { margin-top: 28px; font-size: 13px; }
/* the loading screen (productsLoader.js): dark, the mark brightening with the percentage, then a slanted wipe to the
   right (measured: the left edge runs 0% -> 118% with an 18% slant, about 0.7 s). With no script it goes by itself. */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: var(--ink); color: var(--ground); animation: loader-wipe .7s cubic-bezier(.65, 0, .35, 1) 1.2s forwards; }
.loader.is-live { animation: none; }
.loader.is-out { animation: loader-wipe .7s cubic-bezier(.65, 0, .35, 1) forwards; pointer-events: none; }
.loader__mark { width: 68px; height: auto; opacity: calc(.3 + .7 * var(--p, 0)); filter: grayscale(1) brightness(1.6); }
.loader__pct { min-height: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
@keyframes loader-wipe { from { clip-path: polygon(0% 0, 100% 0, 100% 100%, -18% 100%); } to { clip-path: polygon(118% 0, 100% 0, 100% 100%, 100% 100%); visibility: hidden; } }
/* the top bar keeps its own ground, so the page does not show through it when scrolled (seen 2026-10-04) */
.nav--solid { background: rgba(245, 244, 240, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* the giant title: as wide as the page, fading out towards its foot (the reference: 54..419 px of a 900 px window) */
.plist-title { position: relative; margin: 0 0 20px; font-family: var(--font-display); font-weight: 400; font-size: calc((100vw - 2 * var(--edge)) * .267);
  line-height: .83; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; text-align: left; color: var(--ink);
  -webkit-mask-image: linear-gradient(#000 36%, transparent 90%); mask-image: linear-gradient(#000 36%, transparent 90%); }
.plist-lead { margin: 56px 0 28px; }
/* the rows */
.plist { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.plist__item { position: relative; border-top: 1px solid var(--line); }
.plist__head { position: relative; margin: 0; font-size: inherit; font-weight: inherit; }
.plist__btn { display: flex; align-items: center; width: 100%; padding: clamp(.85rem, 1vw, 1.5rem) 0; border: 0; background: transparent;
  text-align: left; font-family: var(--mono); font-size: clamp(13px, 1.05vw, 17px); font-weight: 400; line-height: 1.6;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.plist__btn::before { content: "+"; display: none; width: 1ch; margin-right: 14px; font-weight: 400; color: var(--muted); }
.plist__btn::after { content: attr(data-tag); margin-left: 24px; font-size: clamp(11px, .84vw, 13px); letter-spacing: .1em; color: var(--muted); opacity: .75; }
.plist__panel { min-width: 0; }
.plist__inner { min-width: 0; }
.plist__text { padding: 4px 0 40px; }
.plist__text p { max-width: 640px; color: var(--ink); font-size: clamp(16px, 1.32vw, 25px); line-height: 1.5; }
/* the films of an open row: tall, side by side, running off the right edge; drag or swipe sideways */
.plist__strip { display: flex; gap: 16px; margin-right: calc(-1 * var(--edge)); padding: 0 var(--edge) clamp(40px, 4.45vw, 64px) 0;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.plist__strip::-webkit-scrollbar { display: none; }
.plist__strip.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.plist__strip[hidden], .plist__card[hidden] { display: none; }
.plist__card { position: relative; flex: none; height: clamp(240px, 30vw, 518px); aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 0;
  overflow: hidden; background: var(--ink); scroll-snap-align: start; cursor: inherit; }
.plist__card video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.plist__card:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.plist__play { position: absolute; right: 12px; bottom: 12px; padding: 5px 10px; border-radius: 12px; background: var(--ground); color: var(--ink);
  font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; opacity: 0; transition: opacity .3s linear; }
.plist__card:hover .plist__play, .plist__card:focus-visible .plist__play { opacity: 1; }
@media (hover: none) { .plist__play { opacity: 1; } }
/* the hover strip: small posters on the right of the row the pointer is on (desktop only; productsList.js makes them) */
.plist__peek { position: absolute; top: 50%; right: calc(-1 * var(--edge)); z-index: 3; display: flex; align-items: center; gap: 8px;
  transform: translateY(-50%); pointer-events: none; visibility: hidden; transition: visibility 0s linear .2s; }
.plist__peek-card { display: block; height: clamp(64px, 7vw, 132px); aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; background: var(--ink);
  box-shadow: 0 10px 26px rgba(20, 21, 26, .3); opacity: 0; transform: translateX(28px); transition: opacity .2s linear; }
.plist__peek-card img { width: 100%; height: 100%; object-fit: cover; }
.plist__item.is-peek .plist__peek { visibility: visible; transition: none; }
.plist__item.is-peek .plist__peek-card { animation: plist-strip-in .48s var(--ease-out) var(--sd, 0ms) both; }
@keyframes plist-strip-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
/* live: the rows come in, closed rows fold away, the open row grows */
.plist.is-entering > .plist__item { animation: plist-row-in .7s var(--ease-out) var(--row, 0ms) both; }
@keyframes plist-row-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.plist.is-live .plist__btn { transition: padding .3s cubic-bezier(0, 0, .2, 1), background-color .3s cubic-bezier(0, 0, .2, 1); }
.plist.is-live .plist__panel { display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .52s var(--ease-out), visibility 0s linear .52s; }
.plist.is-live .is-open > .plist__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .52s var(--ease-out), visibility 0s; }
.plist.is-live .plist__inner { min-height: 0; overflow: hidden; }
.plist.is-live .plist__text { opacity: 0; transform: translateY(-14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.plist.is-live .is-open .plist__text { opacity: 1; transform: none; }
.plist.is-live .plist__card { opacity: 0; transform: translateY(26px); transition: opacity .38s ease var(--out, 0ms), transform 0s linear .52s; }
.plist.is-live .is-open .plist__card { opacity: 1; transform: none;
  transition: opacity .56s var(--ease-out) var(--in, 0ms), transform .56s var(--ease-out) var(--in, 0ms); }
.plist.is-live .is-open .plist__card.is-carried { transition: none; }
@media (hover: hover) {      /* a phone keeps :hover on the row it tapped, so the bar would stick there (seen 2026-10-04) */
  .plist.is-live .plist__btn:hover { padding-left: 16px; padding-right: 16px; background: #fff; }      /* pure white, as the reference (founder's choice) */
  .plist.is-live .plist__btn::after { opacity: 0; transition: opacity .3s linear; }
  .plist.is-live .plist__btn:hover::after, .plist.is-live .is-open .plist__btn::after { opacity: .75; }
}
/* reduced motion: the list still opens and closes, at once */
.plist.is-still .plist__btn, .plist.is-still .plist__panel, .plist.is-still .plist__text, .plist.is-still .plist__card { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .plist .plist__btn, .plist .plist__panel, .plist .plist__text, .plist .plist__card, .plist .plist__btn::after { transition: none !important; }
  .plist .plist__item, .plist .plist__peek-card { animation: none !important; }
  .loader { display: none; }
}
/* the large player: the same film with sound, over a dimmed page */
.plist__player { width: min(92vw, 1180px); max-width: none; padding: 0; border: 0; border-radius: 8px; overflow: visible; background: var(--ink); color: var(--ground); }
.plist__player[open] { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 40; }
.plist__player::backdrop { background: rgba(20, 21, 26, .72); }
.plist__player video { display: block; width: 100%; height: auto; max-height: 80vh; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--ink); }
.plist__close { position: absolute; right: 0; bottom: calc(100% + 10px); height: 36px; padding: 0 16px; border: 0; border-radius: 18px;
  background: var(--ground); color: var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.plist__close:focus-visible { outline: 2px solid var(--ground); outline-offset: 3px; }
/* the sound button: bottom right, 40 px round, four bars that move while sound is on (the reference's place and size) */
.sound { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(245, 244, 240, .25); border-radius: 50%; background: rgba(20, 21, 26, .62); color: var(--ground); }
.sound[hidden] { display: none; }
.sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sound__bars { display: flex; align-items: flex-end; gap: 2.5px; height: 14px; }
.sound__bars i { display: block; width: 2px; height: 25%; border-radius: 1px; background: currentColor; opacity: .6; }
.sound.is-on .sound__bars i { opacity: 1; animation: sound-eq .9s ease-in-out infinite alternate; }
.sound.is-on .sound__bars i:nth-child(2) { animation-delay: .13s; }
.sound.is-on .sound__bars i:nth-child(3) { animation-delay: .26s; }
.sound.is-on .sound__bars i:nth-child(4) { animation-delay: .39s; }
@keyframes sound-eq { from { height: 18%; } to { height: 95%; } }
@media (max-width: 767px) {
  .page--wide { padding-top: 76px; }
  .plist-title { margin-bottom: 14px; }
  .plist__btn { font-size: 16px; padding: 12px 0; }
  .plist__btn::before { display: inline-block; transition: transform .3s var(--ease-out); }
  .plist .is-open .plist__btn::before { transform: rotate(45deg); }
  .plist__btn::after { margin-left: auto; padding-left: 12px; font-size: 12px; opacity: .6; }
  .plist__strip { gap: 12px; scroll-snap-type: x mandatory; cursor: auto; }
  .plist__card { width: 84vw; height: auto; }
  .plist__player { width: 100vw; border-radius: 0; }
  .plist__player video { border-radius: 0; }
  .plist__close { right: var(--gutter); }
  .sound { right: 16px; bottom: 16px; }
}
@media (max-width: 767px) {
  .page__block { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
  .page__tools { grid-template-columns: 1fr; }
}