/* The opening: one picture with three subjects, read left to right.
 *
 *   your AI credit   a module under the copy: "Your AI credit" over the amount, and — built into its
 *                    right end — the outlet the white light comes from. The balance is the lamp.
 *   AI-Pay           a glass prism in the middle (its name is set in the glass, large); the white light is
 *                    changed inside it and leaves as four beams
 *   the apps         four soft beams (peach, mint, baby blue, lavender: pastel, never neon), each a
 *                    cone with a bright middle and hazy edges, each ending in the middle of one app's
 *                    round icon. Icon and name are one small unit on a barely-there ground; the four
 *                    stand evenly along the rim of the fan.
 *
 * (Owner, 2026-10-07: the first glance has to show these three and nothing else; it has to look
 * good — it does not have to be physics.) A payment is an event, one at a time and not often: the
 * light brightens along its path, a small amount shows on the beam for a moment, the balance goes
 * down. Nothing about money stays on screen.
 * js/light.js draws the light; what is worked out there and what is drawing is said there.
 * Light needs darkness: this section is a dark stage in both themes (and the bar that floats over it
 * takes the dark colours while it does).
 * Without the script the picture is plain: the copy, the balance and the apps in a row. */
.lux {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(clamp(90px, 16vh, 200px), 1fr) auto;
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
  padding: clamp(10px, 3vh, 40px) 0 clamp(12px, 3vh, 32px);
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(60% 70% at 62% 50%, rgb(255 255 255 / 4.5%), transparent 70%), #111315;
  color: var(--ink);
  text-align: left;
}
/* Without the scroll engine (reduced motion, no JavaScript) the header sits in the page above the stage. In the
 * dark theme that strip was the page's #17191c over the stage's #111315: a straight line between two near-blacks
 * (same fault as under the opening, see the end of cap.css; owner, 2026-10-08). The stage now reaches up behind
 * the header. Light theme: the header stays on pale paper above the stage, as before. */
@media (prefers-color-scheme: dark) {
  html:not(.is-motion) .lux {
    box-shadow: 0 -80px 0 #111315;
  }
}
@media (prefers-color-scheme: light) {
  .lux,
  html.over-top .site-header {
    --page: #17191c;
    --surface: #25282c;
    --surface-subtle: #202327;
    --surface-strong: #30343a;
    --ink: #f2f4f7;
    --muted: #aab2ba;
    --muted-strong: #c8cdd3;
    --border: #3d434a;
    --border-strong: #69727d;
    --accent: #49b5fe;
    --accent-hover: #74c6ff;
    --accent-soft: #22405c;
    --on-accent: #192735;
    --link: #8cc8ff;
    --warning: #f0c583;
    --warning-soft: #41331f;
    --danger: #ffb4b4;
    --danger-soft: #45282c;
    --success: #7ae6af;
    --success-soft: #203e2e;
    --shadow-dialog: 0 8px 20px rgb(0 0 0 / 16%), 0 24px 64px rgb(0 0 0 / 30%);
    --glass-tint: 82%;
    --glass-clear: 68%;
    --canvas-light: rgb(255 255 255 / 3%);
    --canvas-shade: rgb(0 0 0 / 8%);
    --glass-panel-bg: rgb(42 46 52 / 42%);
    --glass-panel-wash: linear-gradient(
      132deg,
      rgb(255 255 255 / 8%),
      transparent 42%,
      rgb(255 255 255 / 2%)
    );
    --glass-popover-bg: rgb(35 39 44 / 94%);
    --glass-bar-bg: rgb(49 54 61 / 58%);
    --glass-input-bg: rgb(255 255 255 / 6%);
    --glass-edge: rgb(255 255 255 / 18%);
    --glass-line: rgb(255 255 255 / 12%);
    --glass-inset: inset 0 1px 0 rgb(255 255 255 / 14%), inset 0 -1px 0 rgb(255 255 255 / 4%);
    --glass-elevation: 0 14px 34px -20px rgb(0 0 0 / 48%), 0 2px 5px rgb(0 0 0 / 6%);
    --glass-rim: rgb(255 255 255 / 34%);
    --glass-highlight: rgb(255 255 255 / 18%);
    --glass-neutral-selection: rgb(73 181 254 / 23%);
    --selection-ink: #cde6ff;
    --selection-border: rgb(140 200 255 / 54%);
    --selection-solid: #254766;
    --glass-shadow: rgb(0 0 0 / 24%);
  }
}
/* The header floats over the page under html.is-motion: leave it room. */
html.is-motion .lux {
  min-height: 100vh;
  min-height: min(
    100svh,
    62vw +
    320px
  ); /* (a tall, narrow window: not a screenful of empty stage under the picture) */
  padding-top: calc(76px + clamp(8px, 3.2vh, 46px));
}
.lux-rays,
.lux-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* The same light again, out of focus: a little glow around the beams. */
.lux-glow {
  opacity: 0.62;
  filter: blur(30px);
}

/* The copy: across the top — the headline on the left; what it costs, the button and the consent
 * line on the right, level with the headline's foot. The picture has everything under it. */
.lux-copy {
  position: relative;
  z-index: 2;
  grid-row: 1; /* (the middle row is the picture's: nothing in the flow stands in it) */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto auto;
  justify-items: start;
  gap: clamp(8px, 1.6vh, 16px) clamp(24px, 5vw, 80px);
  width: min(1120px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  pointer-events: none; /* (it lies over the picture: only its own controls take the pointer) */
}
.lux-copy :is(a, button) {
  pointer-events: auto;
}
.lux-copy > .lux-top {
  grid-area: 1 / 1 / auto / -1;
}
.lux-copy > .lux-h1 {
  grid-area: 2 / 1 / span 3;
  align-self: end;
}
.lux-copy > :is(.lux-lede, .lux-cta, .lux-ok) {
  grid-column: 2;
}
.lux-copy > .lux-lede {
  align-self: end;
}
/* Where the product stands today, said first. */
.lux-top {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  justify-self: stretch;
}
.lux-beta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 5px 16px 5px 5px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning-soft) 62%, transparent);
  color: var(--ink);
  font-size: clamp(13.5px, 0.74rem + 0.3vw, 15.5px);
  font-weight: 500;
  line-height: 1.3;
}
.lux-beta .beta-chip {
  padding: 3px 11px;
  border-color: transparent;
  background: var(--warning);
  color: var(--page);
  font-size: clamp(12.5px, 0.7rem + 0.26vw, 14px);
  font-weight: 700;
  white-space: nowrap;
}
/* The pause control for the payments: a small round button that belongs to the picture — the script
 * puts it under the apps (its words are for screen readers; the two bars say it). */
.lux-toggle {
  position: absolute;
  top: auto;
  right: max(var(--gutter), calc((100% - 1120px) / 2));
  bottom: clamp(8px, 2.2vh, 22px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 5%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
  color: var(--muted);
}
.lux.is-live .lux-toggle {
  right: auto;
  bottom: auto;
}
.lux-toggle:hover {
  color: var(--ink);
}
.lux-toggle .ctl-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.lux-toggle[hidden] {
  display: none;
}
/* Whole weights only (the Mac's system fonts come in fixed weights; an in-between value is drawn a
 * full step heavier there). Smaller than a headline usually is: the picture is the headline. */
.lux-h1 {
  width: max-content;
  max-width: 100%;
  margin: clamp(2px, 1vh, 10px) 0 0;
  color: var(--ink);
  font-size: clamp(2rem, min(4.2vw, 8.4vh), 4.1rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.lux-h1 .h-line {
  display: block;
  white-space: nowrap;
}
.lux-h1 .h-accent {
  color: var(--link);
}
/* The benefit: nothing recurring, each request charged on its own. */
.lux-lede {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.1rem, min(0.86rem + 0.7vw, 3.6vh), 1.5rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.lux-lede b {
  font-weight: 600;
}
.lux-cta {
  display: grid;
  margin-top: clamp(0px, 0.8vh, 8px);
}
/* Under the button, small: what keeps the sharing in your hands. (It has to be on this screen: the
 * headline does not say that an app needs your consent.) */
.lux-ok {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.4;
}
/* Phones only: the link to the developer side (wider screens have it in the top bar). */
.lux-foot {
  position: relative;
  z-index: 2;
  grid-row: 3;
  display: none;
  width: min(1120px, 100% - 2 * var(--gutter));
  margin: 0 auto;
  font-size: 12px;
}

/* Everything the script places: the balance, the prism's handle and symbol, the ends of the beams. */
.lux-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* The balance: a module — whose it is and what it is, over how much — with the outlet of the light
 * built into its right end: the balance is the lamp, not a caption beside one. The white light itself
 * is drawn on the canvas and starts under the outlet. */
.lux-src {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: clamp(0.7rem, 1.2vw, 1.3rem);
  padding: clamp(0.6rem, 1.5vh, 0.95rem) clamp(0.55rem, 0.8vw, 0.8rem) clamp(0.6rem, 1.5vh, 0.95rem)
    clamp(1rem, 1.5vw, 1.45rem);
  border-radius: clamp(1.2rem, 2.2vw, 1.75rem);
  background: linear-gradient(
    96deg,
    rgb(255 255 255 / 4%),
    rgb(255 255 255 / 8%) 62%,
    rgb(255 255 255 / 22%)
  );
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 13%),
    inset -2.6rem 0 2.4rem -1.7rem rgb(255 255 255 / 34%),
    0 1.4rem 3rem -1.6rem rgb(0 0 0 / 80%);
  color: #fff;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
}
.lux-src > :not(.lux-lens) {
  grid-column: 1;
}
.lux-title {
  order: -1; /* (above the amount) */
  font-size: clamp(15px, 0.8rem + 0.42vw, 20px);
  font-weight: 600;
  letter-spacing: -0.012em;
}
.lux-amount {
  --lh: 1.08;
  display: block;
  margin-top: 0.12em;
  font-size: clamp(1.9rem, 1.05rem + 2vw, 3.2rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: var(--lh);
  /* (a glow on the figure as a whole: one on the digits themselves is cut by their reels' windows) */
  filter: drop-shadow(0 0 10px rgb(255 255 255 / 42%)) drop-shadow(0 0 30px rgb(255 255 255 / 22%));
}
.lux-amount .odo-frac::before,
.lux-amount .odo-frac::after {
  display: none;
}
/* Read as "$28.75"; the last four places are there — a single request moves them — but small. */
.lux-amount .odo-frac .reel:nth-child(n + 3) {
  color: rgb(255 255 255 / 78%);
  font-size: 0.44em;
  font-weight: 500;
}
.lux-label {
  margin-top: 0.3em;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
/* the outlet: a white-hot disc in the module's end; the light starts under it */
.lux-lens {
  grid-area: 1 / 2 / span 3;
  width: clamp(2rem, 1.3rem + 1.5vw, 3rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fff 46%,
    rgb(255 255 255 / 82%) 60%,
    rgb(255 255 255 / 22%) 72%,
    rgb(255 255 255 / 0%) 73%
  );
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 30%),
    0 0 1.6rem 0.35rem rgb(255 255 255 / 60%),
    0 0 4.6rem 1.1rem rgb(255 255 255 / 24%);
}
/* Whose prism it is: a zone in the glass, below the light, for the brand's mark (the script places it
 * and gives it its size: --zone-w, --zone-h, --zone-f). What stands in it is part of the glass — set
 * in it like the engraving inside a block of crystal: white, soft, lit by the light that passes — not
 * a badge laid on top.
 * For now it holds the name in the page's own typeface, as large as the prism allows: AI over Pay
 * (one line where the prism stands tilted). A real mark can replace it without touching anything
 * else: put a one-colour <svg> or <img> inside .lux-mark in place of .lux-word. */
.lux-mark {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--zone-w, 140px);
  height: var(--zone-h, 100px);
  pointer-events: none;
  translate: -50% -50%;
}
.lux-word {
  display: grid;
  justify-items: center;
  /* glass with the colours in it: a breath of the four beams across the letters, brighter at the
   * top of each line, a little see-through; a dark line above every stroke and a light one below, as
   * something set into glass has */
  background:
    linear-gradient(180deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 0%) 85%),
    linear-gradient(100deg, #ffe3d6 6%, #d8f6e8 36%, #dbeaff 66%, #e8e0ff 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: var(--zone-f, 56px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.92;
  white-space: nowrap;
  opacity: 0.82;
  filter: drop-shadow(0 -0.6px 0.3px rgb(0 0 0 / 45%)) drop-shadow(0 0.7px 0 rgb(255 255 255 / 30%))
    drop-shadow(0 0 0.22em rgb(255 255 255 / 16%));
}
.lux-mark.is-line .lux-word {
  display: block;
  letter-spacing: -0.02em;
}
.lux-mark.is-line .lux-word > :first-child::after {
  content: "-";
}
/* (two other ways of setting the name, to compare: ?mark=white — plain white with a glow;
 * ?mark=etch — grey, frosted. To be removed once one is chosen.) */
.lux-mark[data-look="white"] .lux-word {
  background: none;
  color: rgb(255 255 255 / 88%);
  opacity: 1;
  filter: none;
  text-shadow:
    0 0 0.1em rgb(255 255 255 / 45%),
    0 0 0.55em rgb(200 225 255 / 30%);
}
.lux-mark[data-look="etch"] .lux-word {
  background: linear-gradient(180deg, rgb(255 255 255 / 80%), rgb(255 255 255 / 30%));
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 1;
  filter: drop-shadow(0 -0.6px 0.3px rgb(0 0 0 / 50%)) drop-shadow(0 0.7px 0 rgb(255 255 255 / 26%));
}
.lux-mark > :is(svg, img) {
  max-width: 100%;
  max-height: 100%;
  opacity: 0.86;
  filter: brightness(0) invert(1) drop-shadow(0 0 0.5em rgb(200 225 255 / 40%));
}
/* The wordmark set into the glass (2026-10-08): letters a little see-through, the ribbon in its own
 * colours. The letter shapes already carry the ribbon's cut, so no white band is drawn on the dark stage. */
.lux-mark > svg.lux-logo {
  width: 100%;
  height: auto;
  max-height: 100%;
  opacity: 0.94;
  filter: drop-shadow(0 -0.6px 0.3px rgb(0 0 0 / 40%)) drop-shadow(0 0 0.6em rgb(200 225 255 / 22%));
}
.lux-logo-ink {
  fill: rgb(255 255 255 / 88%);
}
/* An app: an endpoint — a round icon with its name right beside it, one small unit on a ground that
 * is barely there. The beam ends in the middle of the icon, and the icon is lit in the beam's colour
 * (--hue: the icon; --beam: the light, read by js/light.js), brightest on the side the light comes
 * from (--bx, --by, set by the script). */
.lux-apps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lux-app {
  --hue: 255 255 255;
  --beam: 255 255 255;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.28em 1.05em 0.28em 0.28em;
  border-radius: 999px;
  background: rgb(255 255 255 / 4.5%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
  color: var(--ink);
  font-size: var(--name, 16px);
  white-space: nowrap;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Soft colours, top to bottom: peach, mint, baby blue, lavender. */
.lux-app:nth-child(1) {
  --hue: 255 206 178;
  --beam: 255 178 146;
}
.lux-app:nth-child(2) {
  --hue: 170 240 208;
  --beam: 126 230 184;
}
.lux-app:nth-child(3) {
  --hue: 170 212 255;
  --beam: 128 188 255;
}
.lux-app:nth-child(4) {
  --hue: 206 190 255;
  --beam: 176 154 255;
}
.lux-ico {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at var(--bx, 6%) var(--by, 50%),
    #fff,
    rgb(var(--hue)) 46%,
    rgb(var(--hue) / 86%)
  );
  box-shadow:
    0 0 0 0.16em rgb(var(--hue) / 18%),
    0 0 1.5em 0.1em rgb(var(--hue) / 42%);
  color: #101a22;
  transition:
    box-shadow 0.3s,
    scale 0.35s var(--motion-ease);
}
.lux-ico svg {
  width: 48%;
  height: 48%;
  stroke-width: 2.1;
}
.lux-name {
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
/* (where a name has a shorter form and room is short, that one is shown) */
.lux:is(.is-below, .is-tight) .lux-name[data-short] {
  max-width: none;
  font-size: 0;
}
.lux:is(.is-below, .is-tight) .lux-name[data-short]::after {
  content: attr(data-short);
  font-size: var(--name, 13px);
}
/* Under the copy: the beams come down to the icons; each name stands under its icon. */
.lux.is-below .lux-app {
  flex-direction: column;
  gap: 0.34em;
  padding: 0.3em 0.5em 0.42em;
  border-radius: 1.15em;
  text-align: center;
}
.lux.is-below .lux-name {
  line-height: 1.25;
}
/* … and the balance's small print may take two lines. */
.lux.is-below .lux-label {
  max-width: 9.6em;
  white-space: normal;
  line-height: 1.3;
  text-wrap: balance;
}
/* It has just used AI: the icon takes the light for a moment. */
.lux.is-live .lux-app.is-on .lux-ico {
  scale: 1.1;
  box-shadow:
    0 0 0 0.2em rgb(var(--hue) / 34%),
    0 0 1.9em 0.3em rgb(var(--hue) / 70%);
}
/* What the names are: sample apps — a small line above the first of them. (Without it the four names
 * would read as things AI-Pay does itself.) */
.lux-cap {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}
.lux:not(.is-live) .lux-cap {
  position: relative;
}
/* What that use cost: a small amount on the beam, a little before its icon, for a moment only — in the
 * one warm tone that belongs to money. Nothing about money stays on screen. */
.lux-fee {
  --warm: 255 214 170;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgb(20 19 18 / 88%);
  box-shadow: inset 0 0 0 1px rgb(var(--warm) / 60%);
  color: rgb(var(--warm));
  font-size: clamp(11.5px, 0.62rem + 0.24vw, 13.5px);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  translate: -50% -50%;
}
.lux-fee[hidden] {
  display: none;
}

/* Without the script: no canvas picture; the balance and the names stand in a row under the copy. */
.lux:not(.is-live) .lux-stage {
  position: relative;
  inset: auto;
  grid-area: 2 / 1;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  gap: 14px 22px;
  width: min(1120px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.lux:not(.is-live) .lux-apps {
  display: contents;
}
.lux:not(.is-live) :is(.lux-src, .lux-app) {
  position: relative;
}
/* (scripts are on their way: the plain row is not shown first, only to jump to the picture) */
html.is-motion .lux:not(.is-live) .lux-stage {
  visibility: hidden;
}
.lux:not(.is-live) .lux-mark {
  display: none;
}

/* Arriving. */
html.is-motion .lux-h1 .h-line {
  animation: lux-rise 0.8s var(--motion-ease) backwards;
}
html.is-motion .lux-h1 .h-line:nth-child(2) {
  animation-delay: 0.08s;
}
html.is-motion .lux.is-live :is(.lux-rays, .lux-glow, .lux-stage) {
  animation: lux-fade 0.9s 0.15s backwards;
}
@keyframes lux-rise {
  from {
    opacity: 0;
    transform: translateY(0.18em);
  }
}
@keyframes lux-fade {
  from {
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .lux {
    grid-template-rows: auto minmax(420px, 1fr) auto; /* (the script asks for the height its picture needs) */
  }
  .lux-copy {
    grid-template-rows: none;
    justify-items: stretch;
  }
  .lux-copy > :is(.lux-top, .lux-h1, .lux-lede, .lux-cta, .lux-ok) {
    grid-area: auto / 1 / auto / -1;
    align-self: auto;
  }
  .lux-h1 {
    font-size: clamp(1.9rem, 9.4vw, 3rem);
  }
  .lux-h1 .h-line {
    white-space: normal;
    text-wrap: balance;
  }
  .lux-copy {
    grid-template-columns: minmax(
        0,
        1fr
      ); /* (enlarged text wraps instead of running off the screen) */
  }
  .lux-lede .nb {
    white-space: normal;
  }
  .lux-amount {
    font-size: min(1.75rem, 8.6vw);
  }
  .lux-cta,
  .lux-cta .btn {
    width: 100%;
  }
  .lux-foot {
    display: block;
  }
}
@media (pointer: coarse) {
  .lux-toggle {
    width: 44px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lux-ico,
  .lux-name {
    transition: none;
  }
}

/* A forced palette would take the light and the glass away: the stage keeps its own colours (they
 * are high in contrast as they are); its controls follow the palette. */
@media (forced-colors: active) {
  .lux {
    forced-color-adjust: none;
  }
  .lux-copy :is(a, button),
  .lux-toggle {
    forced-color-adjust: auto;
  }
}