/* kleto-next: palette A, chrome + iridescent (DESIGN-TASTE 2026-10-18).
   The UI is monochrome. Colour comes only from the hero scene and the
   matching sheen on two type moments. */

@font-face { font-family: 'Space Grotesk'; src: url('/fonts/SpaceGrotesk-Variable.woff2?v=8e085aa4') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/fonts/SpaceMono-400.woff2?v=fb4a81a2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --bg: #000;
  --surface: #0a0a0a;
  --raise: #111;
  --line: #1f1f1f;
  --line-2: #2e2e2e;
  --mark: #4a4a4a;
  --muted: #a1a1a1;
  --dim: #7c7c7c; /* 4.5:1 or better on #000 to #111 (WCAG AA small text) */
  --ink: #ededed;
  --white: #fff;
  --iri: linear-gradient(100deg, #7cf7ff 0%, #b18cff 35%, #ff9ad5 65%, #fff1a8 100%);
  --shell: 1200px;
  --gutter: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
@media (min-width: 700px) { :root { --gutter: 32px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 'Space Grotesk', Arial, sans-serif;
  font-feature-settings: "ss02", "ss03", "ss04";
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 4px; }
::selection { background: #b18cff; color: #000; }
/* Iridescent selection (js/iri-select.js): the Highlight API paints the
   selection word by word in eight steps across the page. While it is
   active, the native solid violet steps aside. */
html.iri-select ::selection { background: transparent; color: inherit; }
::highlight(iri-0) { background-color: #7cf7ff; color: #000; }
::highlight(iri-1) { background-color: #97c3ff; color: #000; }
::highlight(iri-2) { background-color: #b18cff; color: #000; }
::highlight(iri-3) { background-color: #d893ea; color: #000; }
::highlight(iri-4) { background-color: #ff9ad5; color: #000; }
::highlight(iri-5) { background-color: #ffb4c6; color: #000; }
::highlight(iri-6) { background-color: #ffd2b6; color: #000; }
::highlight(iri-7) { background-color: #fff1a8; color: #000; }

.shell { width: 100%; max-width: calc(var(--shell) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.nowrap { white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--white); color: #000; padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }

/* Annotation type: Space Mono, small and sparse. It names things; it
   never decorates. */
.note { font: 400 11px/1.2 'Space Mono', ui-monospace, monospace; letter-spacing: .03em; color: var(--dim); }

.sheen { background: var(--iri); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 8s linear infinite; }
@keyframes sheen { to { background-position: -200% 0; } }

/* Buttons: white pill, hairline pill. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -.005em;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-solid { background: var(--white); color: #000; }
.btn-solid:hover { box-shadow: 0 0 0 1px #fff, -14px 6px 34px -12px rgba(124,247,255,.7), 14px 8px 34px -12px rgba(255,154,213,.65), 0 10px 44px -10px rgba(177,140,255,.75); transform: translateY(-1px); }
.btn-line { border: 1px solid var(--line-2); background: rgba(255,255,255,.03); backdrop-filter: blur(8px); }
.btn-line:hover { border-color: #555; background: rgba(255,255,255,.07); box-shadow: 0 0 24px -6px rgba(255,255,255,.18), 0 8px 30px -14px rgba(177,140,255,.5); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-block { width: 100%; }
.link { display: inline-flex; gap: 8px; font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 4px; transition: border-color .2s; }
.link:hover { border-color: var(--white); }

/* Header: translucent bar that firms up on scroll. */
.nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.nav.scrolled { background: rgba(0,0,0,.72); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-color: var(--line); }
.nav-row { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo { display: inline-flex; color: var(--white); }
.wordmark { height: 24px; width: auto; }
.nav-links { display: none; margin-left: auto; gap: 32px; font-size: 14px; color: var(--muted); }
.nav-links a:hover { color: var(--white); }
.nav-cta { display: none; }
.burger { margin-left: auto; width: 40px; height: 40px; display: grid; place-content: center; gap: 6px; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--white); transition: transform .3s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.menu { display: grid; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gutter) 24px; background: rgba(0,0,0,.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.menu[hidden] { display: none; }
.menu a { padding: 14px 0; font-size: 22px; border-bottom: 1px solid var(--line); }
.menu a[aria-current="page"] { color: var(--white); }
/* Page lists under the main links (scripts/kleto-next-nav.mjs): a small
   label, then compact links two to a row. */
.menu-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding-top: 20px; }
.menu-label { grid-column: 1 / -1; padding-bottom: 6px; font: 400 11px/1.4 'Space Mono', ui-monospace, monospace; letter-spacing: .03em; color: var(--dim); }
.menu .menu-group a { padding: 10px 0; font-size: 15px; color: var(--muted); }
.menu .menu-group a[aria-current="page"] { color: var(--white); }
@media (min-width: 860px) {
  .nav-links, .nav-cta { display: flex; }
  .nav-cta { display: inline-flex; }
  .burger, .menu { display: none !important; }
}

/* Hero. */
.hero { position: relative; padding: 24px 0 0; }
.hero-grid { display: grid; gap: 8px; align-items: center; }
.hero-copy { position: relative; z-index: 1; }
h1 { font-size: clamp(44px, 11.5vw, 104px); line-height: .95; font-weight: 500; letter-spacing: -.05em; }
.hero-lede { margin-top: 28px; font-size: clamp(19px, 2.2vw, 22px); color: var(--white); letter-spacing: -.01em; }
.hero-sub { margin-top: 8px; color: var(--muted); max-width: 30em; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.scene { position: relative; order: -1; width: min(100%, 360px); aspect-ratio: 1; justify-self: center; margin-bottom: -8px; }
/* Phones: the scene bleeds to the window edge (the hero clips overflow), so
   the machine and its CRT draw as large as the screen allows. The crop
   marks stay on the gutter. */
@media (max-width: 639px) {
  .scene { width: min(100vw, 440px); justify-self: start; margin-inline: calc(50% - min(50vw, 220px)); }
  .scene .view { inset: 16% var(--gutter) 9%; }
}
.scene canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ease);
  /* A feathered rectangle: each axis fades over its outer 8%. The smoke
     and the floor pool reach zero inside it on their own; the feather only
     softens bloom near the edge. c64-scene.js fits the model to it. */
  --fx: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  --fy: linear-gradient(transparent, #000 8%, #000 92%, transparent);
  -webkit-mask: var(--fx), var(--fy);
  -webkit-mask-composite: source-in;
  mask: var(--fx), var(--fy);
  mask-composite: intersect;
}
.scene--live canvas { opacity: 1; }
/* The aurora is the loading state and the no-WebGL fallback. It fades out
   under the canvas once the model is live. */
.scene::before {
  content: ""; position: absolute; inset: 14%; border-radius: 50%; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--ease);
  background:
    radial-gradient(circle at 30% 32%, rgba(124,247,255,.55), transparent 42%),
    radial-gradient(circle at 70% 38%, rgba(255,154,213,.5), transparent 44%),
    radial-gradient(circle at 42% 72%, rgba(177,140,255,.55), transparent 46%),
    radial-gradient(circle at 70% 74%, rgba(255,241,168,.35), transparent 36%);
  filter: blur(36px);
}
.scene--fallback::before { opacity: 1; }
.trust { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding: 20px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.trust ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.trust li::before { content: "✓"; margin-right: 8px; color: var(--white); }
@media (min-width: 900px) {
  .hero { padding-top: 56px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); min-height: min(78vh, 720px); }
  /* The scene bleeds past the content edge into the page margin, up to
     160px and never closer than 24px to the window, and goes landscape, so
     the wide desk layout fills it. */
  .scene {
    --bleed: clamp(0px, 50vw - 624px, 160px);
    order: 0; justify-self: start; width: calc(100% + var(--bleed)); max-width: none; aspect-ratio: 8 / 7; margin: 0 calc(-1 * var(--bleed)) 0 0;
  }
}

/* Sections. */
.section { padding: 96px 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .section { padding: 140px 0; } }
.head { display: grid; gap: 20px; margin-bottom: 48px; }
.head h2, .open h2 { font-size: clamp(36px, 6vw, 64px); line-height: 1; font-weight: 500; letter-spacing: -.04em; }
.head-aside { color: var(--muted); }
@media (min-width: 900px) {
  .head { grid-template-columns: 1fr auto; align-items: end; margin-bottom: 64px; }
  .head-center, .head-stack { grid-template-columns: 1fr; align-content: start; }
}
.head-center { text-align: center; justify-items: center; }

/* Pillars: hairline columns with a pointer spotlight. */
.pillars { display: grid; border-top: 1px solid var(--line); }
.pillar { position: relative; padding: 32px 0; border-bottom: 1px solid var(--line); }
.pillar h3 { margin: 0 0 8px; font-size: 32px; font-weight: 500; letter-spacing: -.03em; }
.pillar > p { color: var(--muted); margin-bottom: 24px; }
.pillar li { padding: 6px 0; font-size: 15px; }
.pillar li::before { content: "↗"; margin-right: 10px; color: var(--dim); }
@media (min-width: 900px) {
  .pillars { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .pillar { padding: 40px 32px 48px; border-bottom: 0; border-left: 1px solid var(--line); }
  .pillar:first-child { border-left: 0; padding-left: 0; }
  .pillar::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(177,140,255,.10), rgba(124,247,255,.04) 35%, transparent 60%);
  }
  .pillar:hover::after { opacity: 1; }
}

/* Open: rows of horizontal service tags framing a centred statement.
   The tags are real list items. site.js copies each list once (aria-hidden)
   and adds .looping, which starts the marquee. Without JS, or under reduced
   motion, each row sits still and scrolls sideways. */
.open { position: relative; isolation: isolate; padding: 72px 0 32px; border-top: 1px solid var(--line); overflow-x: clip; clip-path: inset(-8px 0 0); text-align: center; }
.tags { display: grid; gap: 12px; }
.tag-row { overflow-x: auto; scrollbar-width: none; padding: 10px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent); }
.tag-row::-webkit-scrollbar { display: none; }
/* The edge mask hides anything outside the row, so its focus ring sits inside. */
.tag-row:focus-visible { outline-offset: -2px; border-radius: 22px; }
.looping .tag-row { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tag-belt { display: flex; width: max-content; }
.tag-list { display: flex; width: max-content; align-items: center; gap: 10px; padding: 0 var(--gutter); }
.looping .tag-list { flex-wrap: nowrap; padding: 0 10px 0 0; }
.looping .tag-belt { animation: belt var(--dur, 80s) linear infinite; }
.looping .tag-row:nth-child(even) .tag-belt { animation-direction: reverse; }
.tag-row--design { --dur: 92s; }
.tag-row--build { --dur: 104s; }
.tag-row--ai { --dur: 86s; }
.tag-row--optimize { --dur: 98s; }
.tag-row--stack { --dur: 120s; }
.tag-row:hover .tag-belt, .open.paused .tag-belt { animation-play-state: paused; }
@keyframes belt { to { transform: translate3d(-50%, 0, 0); } }

.tag {
  position: relative; display: inline-flex; align-items: center; gap: 9px; flex: none;
  height: 40px; padding: 0 18px 0 15px; border-radius: 999px; white-space: nowrap;
  font-size: 15px; letter-spacing: -.01em; color: #cfcfcf;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.6);
  transition: color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #5a5a5a; transition: background .3s, box-shadow .3s; }
.tag:hover {
  color: var(--white); border-color: rgba(255,255,255,.32);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.04), 0 0 28px -4px rgba(255,255,255,.28);
}
.tag:hover::before { background: var(--white); box-shadow: 0 0 8px rgba(255,255,255,.9); }

/* Lit tags: an iridescent hairline, a soft aura, a slow shimmer. */
.tag.lit, .tag:has(> input:checked) { color: var(--white); border-color: transparent; background: linear-gradient(180deg, rgba(30,30,34,.9), rgba(12,12,14,.9)); box-shadow: -12px 0 30px -10px rgba(124,247,255,.6), 12px 0 30px -10px rgba(255,154,213,.55), 0 8px 26px -10px rgba(177,140,255,.65); }
.tag.lit::after, .tag:has(> input:checked)::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(100deg, #7cf7ff, #b18cff, #ff9ad5, #fff1a8, #7cf7ff) 0 0 / 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: shimmer 6s linear infinite;
}
.tag.lit::before, .tag:has(> input:checked)::before { background: var(--iri); box-shadow: 0 0 8px rgba(177,140,255,.9); }
.tag.lit:hover { box-shadow: -12px 0 32px -10px rgba(124,247,255,.75), 12px 0 32px -10px rgba(255,154,213,.7), 0 8px 30px -10px rgba(177,140,255,.8); }
@keyframes shimmer { to { background-position: -200% 0; } }

.tag-cat { flex: none; padding: 0 6px 0 14px; font: 400 11px/1 'Space Mono', ui-monospace, monospace; letter-spacing: .03em; color: var(--dim); white-space: nowrap; }
.tag-cat::before { content: "/"; margin-right: 10px; color: var(--line-2); }

/* The stack row is quieter: smaller, mono, no fill. */
.tag-row--stack .tag { height: 32px; padding: 0 14px 0 12px; font: 400 12px/1 'Space Mono', ui-monospace, monospace; letter-spacing: .02em; color: var(--dim); background: transparent; border-color: var(--line); box-shadow: none; }
.tag-row--stack .tag::before { width: 4px; height: 4px; background: #3a3a3a; }
.tag-row--stack .tag:hover { color: var(--ink); border-color: var(--line-2); box-shadow: 0 0 20px -6px rgba(255,255,255,.18); }

.open-copy { position: relative; display: grid; justify-items: center; gap: 20px; padding: 56px var(--gutter) 64px; }
.open-copy::before { content: ""; position: absolute; inset: 0 0; background: radial-gradient(50% 60% at 50% 50%, rgba(177,140,255,.10), rgba(124,247,255,.04) 45%, transparent 75%); z-index: -1; pointer-events: none; }
.open-copy p { color: var(--muted); max-width: 28em; }
.open-foot { display: flex; justify-content: flex-end; margin-top: 24px; }
.tags-toggle { font: 400 11px/1 'Space Mono', monospace; letter-spacing: .1em; color: var(--dim); padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; }
.tags-toggle:hover { color: var(--white); border-color: var(--line-2); }
@media (min-width: 900px) {
  .open { padding: 120px 0 40px; }
  .tags { gap: 16px; }
  .open-copy { padding: 88px var(--gutter) 96px; }
  .tag { height: 44px; font-size: 16px; padding: 0 20px 0 16px; }
  .tag-row--stack .tag { height: 34px; font-size: 12px; }
}

/* Steps: a flow schematic. Each step is a node on one line; arrows run
   Subscribe to Request to Receive, and a return path carries the next
   request back into Request. Lines and arrowheads are pseudo elements and
   aria-hidden spans, so the list reads the same without them. Mobile runs
   the flow down a left rail; desktop runs it along the top. */
.steps { --g: 40px; display: grid; gap: var(--g); padding-bottom: 40px; }
.steps li { position: relative; padding: 0 28px 0 30px; }
.steps li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 9px; height: 9px;
  border: 1px solid var(--muted); background: var(--bg);
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 0; top: 14px; bottom: calc(-1 * var(--g) + 2px); width: 9px; background: var(--mark);
  clip-path: polygon(4px 0, 5px 0, 5px calc(100% - 7px), 9px calc(100% - 7px), 4.5px 100%, 0 calc(100% - 7px), 4px calc(100% - 7px));
}
.steps .node { display: block; font: 400 11px/11px 'Space Mono', ui-monospace, monospace; letter-spacing: .03em; color: var(--muted); }
.steps h3 { margin: 20px 0 8px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.steps p { color: var(--muted); }
.loop { position: absolute; pointer-events: none; border: 0 solid var(--mark); }
.loop-out { left: 4px; right: 0; top: 14px; bottom: -28px; border-width: 0 1px 1px 1px; }
.loop-in { left: 12px; right: 0; top: calc(var(--g) / -2); bottom: calc(-1 * var(--g) - 14px); border-width: 1px 1px 0 0; }
.loop-in::before { content: ""; position: absolute; left: -7px; top: -5px; width: 7px; height: 9px; background: var(--mark); clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.loop .note { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); padding: 0 12px; background: var(--bg); font-size: 10px; line-height: 1; white-space: nowrap; }
@media (min-width: 900px) {
  .steps { --g: 56px; grid-template-columns: repeat(3, 1fr); column-gap: var(--g); padding-bottom: 56px; }
  .steps li { padding: 22px 32px 0 0; border-top: 1px solid var(--mark); }
  .steps li::before { top: -5px; }
  .steps li:not(:last-child)::after {
    left: 100%; top: -5px; bottom: auto; width: calc(var(--g) - 3px); height: 9px;
    clip-path: polygon(0 4px, calc(100% - 7px) 4px, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, calc(100% - 7px) 5px, 0 5px);
  }
  .loop-in { display: none; }
  .loop-out { left: calc(-100% - 1.5 * var(--g)); top: -1px; bottom: -40px; }
  .loop-out::before { content: ""; position: absolute; left: -4px; top: 0; width: 9px; height: 7px; background: var(--mark); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
}

/* FAQ. */
.faq-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 1fr 1.2fr; gap: 64px; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 17px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--muted); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--white); }
.faq details p { padding: 0 0 24px; color: var(--muted); max-width: 36em; }

/* Pricing. */
.plans { display: grid; gap: 16px; max-width: 980px; margin: 0 auto; }
@media (min-width: 860px) { .plans { grid-template-columns: 1fr 1fr; gap: 20px; } }
.plan { position: relative; display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.plan-main { background: linear-gradient(180deg, #121212, #0a0a0a); border-color: transparent; }
.plan-main::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), #7cf7ff, #b18cff, #ff9ad5, #fff1a8, #2a2a2a 40%, #2a2a2a 85%, #7cf7ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: border-spin 8s linear infinite;
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes border-spin { to { --a: 360deg; } }
.plan-top { display: flex; justify-content: space-between; align-items: center; }
.plan h3 { font-size: 16px; font-weight: 500; }
.chip { font: 400 10px/1 'Space Mono', monospace; letter-spacing: .03em; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); }
.price { margin: 36px 0 8px; font-size: clamp(52px, 7vw, 72px); font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.price small { margin-left: 8px; font-size: 14px; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.plan-for { color: var(--muted); padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.plan ul { display: grid; gap: 12px; padding: 24px 0 32px; flex: 1; font-size: 15px; }
.plan li::before { content: "✓"; margin-right: 12px; color: var(--muted); }
.plan-note { margin-top: 14px; text-align: center; font-size: 13px; color: var(--dim); }
.fine { margin-top: 32px; text-align: center; font-size: 13px; color: var(--dim); }

/* Talk. */
.talk { position: relative; overflow-x: clip; clip-path: inset(-8px 0 0); }
.talk::before { content: ""; position: absolute; width: 900px; height: 900px; right: -300px; top: -200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(177,140,255,.14), rgba(124,247,255,.05) 50%, transparent); pointer-events: none;
  /* The section clips 8px above its top edge. The glow reaches zero by that
     line (192px into its box) and feathers in below it, so no edge shows. */
  -webkit-mask: linear-gradient(transparent 192px, #000 480px); mask: linear-gradient(transparent 192px, #000 480px); }
.talk-grid { position: relative; display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .talk-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.talk h2 { margin: 0 0 28px; font-size: clamp(44px, 7vw, 80px); line-height: .98; font-weight: 500; letter-spacing: -.045em; }
.talk-sub { color: var(--muted); margin-bottom: 28px; }
.book { padding: 32px; border-radius: 24px; border: 1px solid rgba(255,255,255,.1); background: rgba(18,18,18,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.book-top { display: flex; gap: 14px; align-items: center; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.book-top strong { display: block; font-weight: 500; }
.book-top span { font-size: 13px; color: var(--muted); }
.book-top .avatar { font-size: 16px; color: #000; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--iri); color: #000; font-weight: 600; }
.book h3 { margin: 0 0 12px; font-size: 32px; font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.book > p:not(.plan-note):not(.meta) { color: var(--muted); }
.meta { display: flex; gap: 20px; margin: 24px 0; font-size: 13px; color: var(--muted); }
.meta span::before { content: "●"; margin-right: 8px; font-size: 8px; vertical-align: 2px; color: var(--white); }

/* Inline booking inside the .book card (js/booking.js). Anchor: the Cal.com
   booker, folded into one column: a day strip, a time grid, a short form.
   Monochrome; the one flourish is the iridescent glow on the chosen day. */
.bk[hidden], .bk-step[hidden], .bk-fallback[hidden] { display: none; }
.bk { display: grid; gap: 16px; }
.bk-step { display: grid; gap: 14px; }
.bk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font: 400 11px/1.4 'Space Mono', ui-monospace, monospace; letter-spacing: .03em; color: var(--muted); }
.bk-tz { letter-spacing: .02em; text-transform: none; color: var(--dim); }
.bk-days { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 14px; scrollbar-width: none; margin: -14px -14px -8px; padding: 14px 14px 18px; }
.bk-days::-webkit-scrollbar { display: none; }
/* More days than fit: the strip fades out at the edge that has more, so the
   cut day reads as a scroller (booking.js sets .more-l and .more-r). */
.bk-days { --fl: 0px; --fr: 0px; -webkit-mask: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); mask: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
.bk-days.more-l { --fl: 48px; }
.bk-days.more-r { --fr: 64px; }
.bk-day {
  flex: none; scroll-snap-align: start; display: grid; justify-items: center; gap: 4px;
  width: 58px; padding: 10px 0; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.02);
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease);
}
.bk-day:hover { border-color: #555; background: rgba(255,255,255,.06); }
.bk-dow, .bk-mon { font: 400 10px/1 'Space Mono', ui-monospace, monospace; letter-spacing: .03em; color: var(--dim); }
.bk-num { font-size: 20px; line-height: 1; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bk-day[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: #000; box-shadow: -6px 2px 16px -6px rgba(124,247,255,.75), 6px 4px 16px -6px rgba(255,154,213,.65), 0 6px 18px -6px rgba(177,140,255,.8); }
.bk-day[aria-pressed="true"] .bk-dow, .bk-day[aria-pressed="true"] .bk-mon { color: #444; }
.bk-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bk-time {
  height: 42px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: -.005em;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease);
}
.bk-time:hover { border-color: var(--white); background: rgba(255,255,255,.07); box-shadow: 0 0 24px -6px rgba(255,255,255,.18), 0 8px 30px -14px rgba(177,140,255,.5); }
.bk-chosen { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(255,255,255,.03); font-size: 15px; }
.bk-change { flex: none; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.bk-change:hover { color: var(--white); border-color: var(--white); }
.bk-field { display: grid; gap: 6px; }
.bk-field > span { font-size: 13px; color: var(--muted); }
.bk-field em { font-style: normal; color: var(--dim); }
.bk-field input, .bk-field textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  color: var(--ink); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s;
}
.bk-field textarea { resize: vertical; min-height: 84px; }
.bk-field input:focus, .bk-field textarea:focus { outline: none; border-color: var(--white); box-shadow: 0 0 0 3px rgba(177,140,255,.22); }
.bk-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bk-msg { font-size: 13px; color: var(--muted); }
.bk-err { color: #ff9ad5; }
.bk-done { justify-items: center; text-align: center; padding: 8px 0; }
.bk-tick { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--iri); color: #000; font-weight: 600; box-shadow: 0 0 30px -6px rgba(177,140,255,.7); }
.bk-big { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.bk-big:focus { outline: none; }
.bk-when { color: var(--ink); }
.bk-sub { color: var(--muted); font-size: 14px; }
.bk-actions { display: grid; gap: 10px; width: 100%; }
.bk-actions [hidden] { display: none; }
.bk-alt { text-align: center; font-size: 13px; color: var(--dim); }
.bk-alt a { color: var(--muted); border-bottom: 1px solid var(--line-2); }
.bk-alt a:hover { color: var(--white); border-color: var(--white); }
@media (max-width: 420px) { .book { padding: 24px 20px; } }

/* Footer: an ISO 7200 style title block. One ruled grid, each cell one
   real value, centred in its box without a field label. The rules are
   the grid's 1px gaps showing the line colour behind the cells. */
.foot { border-top: 1px solid var(--line); padding: 48px 0; font-size: 14px; color: var(--muted); }
.foot .wordmark { height: 22px; }
.tb { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.tb-cell { display: grid; align-content: center; gap: 10px; min-width: 0; padding: 18px; background: var(--bg); }
.tb-cell p { overflow-wrap: anywhere; }
.tb-mark { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: space-between; align-items: center; align-content: center; padding: 22px 18px; }
.tb-mark .link { font-size: 13px; color: var(--muted); }
.tb-title { grid-column: 1 / -1; }
.tb-title p { font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--white); }
.tb-studio, .tb-pages, .tb-model { grid-column: 1 / -1; }
.tb-contact a { color: var(--ink); border-bottom: 1px solid var(--line-2); transition: border-color .2s; }
.tb-contact a:hover { border-color: var(--white); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.tb .foot-links a { color: var(--muted); transition: color .2s; }
.tb .foot-links a:hover, .tb .foot-links a[aria-current="page"] { color: var(--white); }
/* Page lists (scripts/kleto-next-nav.mjs). The label is real information:
   it names the list. */
.tb-group { grid-column: 1 / -1; align-content: start; }
.tb-label { font: 400 11px/1.4 'Space Mono', ui-monospace, monospace; letter-spacing: .03em; color: var(--dim); }
.tb-model p { font-size: 12px; color: var(--dim); }
.tb .tb-model a { white-space: nowrap; color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.tb .tb-model a:hover { color: var(--muted); }
/* The Easter egg (scripts/kleto-next-nav.mjs): a quiet line under the
   copyright that turns iridescent on hover. */
.tb .tb-egg { justify-self: start; font-size: 12px; color: var(--dim); background: var(--iri); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--dim); transition: -webkit-text-fill-color .3s; }
.tb .tb-egg:hover, .tb .tb-egg:focus-visible { -webkit-text-fill-color: transparent; }
@media (min-width: 900px) {
  .tb { grid-template-columns: 1.15fr 1fr 1fr 1fr; grid-auto-flow: row; }
  .tb-mark { grid-column: 1; grid-row: span 2; grid-template-columns: 1fr; align-content: space-between; justify-items: start; padding: 22px 22px 20px; }
  .tb-title { grid-column: 2 / 4; }
  .tb-contact { grid-column: 4; }
  .tb-pages { grid-column: 3; }
  .tb-owner { grid-column: 4; }
  .tb-studio { grid-column: 2; }
  .tb-model { grid-column: 1 / -1; }
  .tb-group--half { grid-column: span 2; }
  .tb-cell { padding: 20px 22px; }
}

/* Glow: iridescent light as punctuation. Black stays black; only the hero
   aura moves, and it moves by transform and opacity alone. */
.hero { isolation: isolate; overflow-x: clip; }
.hero::before {
  content: ""; position: absolute; inset: -64px 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 26% at 30% 14%, rgba(124,247,255,.10), transparent 70%),
    radial-gradient(44% 30% at 62% 26%, rgba(177,140,255,.16), transparent 70%),
    radial-gradient(30% 22% at 76% 40%, rgba(255,154,213,.08), transparent 70%);
  animation: aura 18s var(--ease) infinite alternate;
}
@media (min-width: 900px) {
  .hero::before {
    background:
      radial-gradient(26% 34% at 64% 30%, rgba(124,247,255,.09), transparent 70%),
      radial-gradient(30% 44% at 76% 50%, rgba(177,140,255,.15), transparent 70%),
      radial-gradient(22% 30% at 86% 66%, rgba(255,154,213,.08), transparent 70%),
      radial-gradient(30% 30% at 10% 40%, rgba(177,140,255,.035), transparent 70%);
  }
}
@keyframes aura { from { opacity: .75; transform: translate3d(-1.5%, 0, 0) scale(1); } to { opacity: 1; transform: translate3d(1.5%, -1%, 0) scale(1.04); } }

/* Section tops: an iridescent hairline over the grey rule, fading at both
   ends, with a faint violet bloom beneath it. */
.section, .open, .foot {
  background-image:
    linear-gradient(90deg, transparent, rgba(124,247,255,.7) 25%, rgba(177,140,255,.95) 50%, rgba(255,154,213,.7) 75%, transparent),
    radial-gradient(50% 100% at 50% 0, rgba(177,140,255,.07), transparent 70%);
  background-size: min(760px, 86%) 1px, min(1100px, 100%) 200px;
  background-position: 50% 0, 50% 0;
  background-repeat: no-repeat;
  /* Padding box: the hairline sits on the row just under the grey rule.
     At border-box the opaque border painted over it, so WebKit and
     Firefox never showed it and Chromium only at some subpixel offsets. */
  background-origin: padding-box;
}
.foot { background-size: min(520px, 70%) 1px, min(800px, 100%) 120px; }

/* Headline sheen gets a soft glow of its own. */
.sheen { filter: drop-shadow(0 0 22px rgba(177,140,255,.32)); }

/* Cards: an outer iridescent aura on the monthly plan and the booking card. */
.plan-main { box-shadow: -34px 16px 80px -54px rgba(124,247,255,.4), 34px 28px 80px -54px rgba(255,154,213,.34), 0 26px 100px -56px rgba(177,140,255,.55), 0 0 60px -30px rgba(177,140,255,.25); }
.book { box-shadow: -26px 20px 80px -54px rgba(124,247,255,.32), 26px 30px 90px -54px rgba(177,140,255,.5), 0 0 60px -30px rgba(177,140,255,.22); }

/* Pointer spotlight, shared by the pillars and the cards. */
.plan, .book { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(177,140,255,.09), rgba(124,247,255,.03) 40%, transparent 65%); }
.plan-main { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(177,140,255,.12), rgba(124,247,255,.04) 40%, transparent 65%), linear-gradient(180deg, #121212, #0a0a0a); }

/* Drawing sheet (DESIGN-TASTE 2026-10-18). The page reads as one drafting
   sheet: thin ISO 128 type lines, registration crosshairs where a section
   rule meets the content edge (Vercel's hairline grid), a framed drawing
   view in the hero, a flow schematic and an ISO 7200 style title block.
   Every mark is a pseudo element or an aria-hidden node; none is content. */
.section, .open, .foot { position: relative; }
.section::after, .open::after, .foot::after, .trust::after {
  --x: 11px;
  content: ""; position: absolute; top: calc(var(--x) / -2 - .5px); height: var(--x); pointer-events: none;
  left: calc(max(var(--gutter), (100% - var(--shell)) / 2) - var(--x) / 2);
  right: calc(max(var(--gutter), (100% - var(--shell)) / 2) - var(--x) / 2);
  background:
    linear-gradient(var(--mark), var(--mark)) 0 50% / var(--x) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) 100% 50% / var(--x) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) calc(var(--x) / 2 - .5px) 0 / 1px 100% no-repeat,
    linear-gradient(var(--mark), var(--mark)) calc(100% - var(--x) / 2 + .5px) 0 / 1px 100% no-repeat;
}
.trust { position: relative; }
.trust::after { left: calc(var(--x) / -2); right: calc(var(--x) / -2); }

/* The hero scene is a drawing view: crop marks at the corners, chain
   centre lines (ISO 128 long dash dot) that run past the outline, and a
   faint construction grid that fades out under the model. The canvas
   paints over all of it, so the marks only show around the machine. */
.view {
  --c: var(--mark); --t: 18px;
  position: absolute; inset: 16% 0 9%; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--t) 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--t),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--t),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--t) 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--t),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--t);
  background-repeat: no-repeat;
}
@media (min-width: 900px) { .view { inset: 9% 0; } }
.view::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 50% 50% / 32px 32px,
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 50% 50% / 32px 32px;
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%);
  mask: radial-gradient(closest-side, #000 20%, transparent 100%);
}
.view::after {
  --chain: rgba(255,255,255,.12) 0 22px, transparent 22px 27px, rgba(255,255,255,.12) 27px 30px, transparent 30px 35px;
  content: ""; position: absolute; inset: -14px;
  background:
    repeating-linear-gradient(90deg, var(--chain)) 50% 50% / 100% 1px no-repeat,
    repeating-linear-gradient(180deg, var(--chain)) 50% 50% / 1px 100% no-repeat;
}

/* Reveal: the hero rises in with CSS alone. Below the fold, site.js adds
   .wait and then .in as each block scrolls into view. No JS, no hiding. */
.hero .reveal { animation: rise .9s var(--ease) both; }
/* The headline rises without a fade, so it paints at once and counts as the
   page's largest contentful paint. The lines under it still fade in. */
.hero h1.reveal { animation-name: lift; }
.hero .reveal:nth-child(2) { animation-delay: .08s; }
.hero .reveal:nth-child(3) { animation-delay: .16s; }
.hero .reveal:nth-child(4) { animation-delay: .22s; }
.hero .reveal:nth-child(5) { animation-delay: .28s; }
.hero .trust { animation-delay: .4s; }
.hero > .shell:last-child { padding-bottom: 0; }
.scene { animation: fade 1.6s .1s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes lift { from { transform: translateY(18px); } }
/* site.js marks a section .offscreen while it is out of view; its looping
   animations hold still until it comes back. */
.offscreen, .offscreen::before, .offscreen::after, .offscreen *, .offscreen *::before, .offscreen *::after { animation-play-state: paused !important; }
@keyframes fade { from { opacity: 0; transform: scale(.94); } }
.reveal.wait { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.reveal.wait.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal.wait { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  /* Tags sit still and scroll sideways; the copy and the toggle step aside. */
  .looping .tag-row { overflow-x: auto; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent); }
  .looping .tag-list { padding: 0 var(--gutter); }
  .tag-list[aria-hidden="true"], .tags-toggle { display: none; }
}