/* YOU.0 — the remaining public pages.
   /start · /apps · /apps/[slug] · /about · /anastasiia · /guides ·
   /guides/[slug] · /search · /contact · /support · and every other page
   entry served by the catch-all.

   House rules held to here: chrome, glass and fine lines; wide letter-spaced
   display type against small tracked interface type; white and black
   environments alternating; colour only as signal. Mobile recomposes — every
   grid below collapses to one column, and nothing is wider than the screen. */

/* ── Page hero (every "pages" entry) ────────────────────────────────────── */
.phero {
  position: relative;
  overflow: clip;
  padding: calc(var(--nav-h) + clamp(3.5rem, 11vw, 8rem)) 0 clamp(3rem, 8vw, 6.5rem);
  isolation: isolate;
}
.phero__art { position: absolute; inset: 0; z-index: -2; }
.phero__art .art { position: absolute; inset: 0; }
/* The cover is an environment, not content: it is veiled enough that the
   display type stays the loudest thing on the page. */
.phero--art::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 42%, color-mix(in srgb, var(--bg) 58%, transparent) 76%, color-mix(in srgb, var(--bg) 42%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 82%, transparent), color-mix(in srgb, var(--bg) 30%, transparent) 35%, color-mix(in srgb, var(--bg) 94%, transparent));
}
.phero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem clamp(2rem, 6vw, 5rem); align-items: start; }
.phero__main { max-width: 46rem; }
.phero__title {
  margin-top: 1.1rem;
  display: grid;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.1rem, 8vw, 6rem);
  letter-spacing: .12em; line-height: .98; text-transform: uppercase;
  /* A long single word (ACCESSIBILITY) must recompose, not be clipped. */
  overflow-wrap: break-word;
}
.phero__sub { margin-top: 1.1rem; font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); font-weight: 300; }
.phero__intro { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1rem, .5vw + .9rem, 1.15rem); color: var(--fg-2); }
.phero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: 2.2rem; }
.phero__statement {
  display: grid; margin-top: 2rem;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.15rem, 2.2vw, 1.9rem); letter-spacing: .16em; line-height: 1.3; text-transform: uppercase;
}
.phero__side { display: grid; gap: var(--s-5); padding-top: .6rem; text-align: right; justify-items: end; }
.phero__side .hud-list--rule li { flex-direction: row-reverse; }
.phero__lines { color: var(--fg-3); }
.phero__mark { position: absolute; left: var(--gutter); bottom: 1.6rem; font-family: var(--font-mark); font-size: var(--fs-hud); color: var(--fg-3); letter-spacing: .2em; }

/* ── Page sections from the entry ──────────────────────────────────────── */
.docsec__list { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.docsec__item { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.2rem clamp(2rem, 6vw, 5rem); align-items: start; }
.docsec__item + .docsec__item { padding-top: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--line); }
.docsec__kicker { color: var(--fg-3); display: flex; gap: var(--s-2); }
.docsec__title { display: grid; text-wrap: balance; margin-top: .9rem; font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h2); letter-spacing: var(--track-display); line-height: 1.08; text-transform: uppercase; }
.docsec__fig { margin-bottom: 1.6rem; }
.docsec__fig .art { aspect-ratio: 16 / 9; }
.docsec__cta { margin-top: 1.4rem; }

/* ── The document body (legal pages and anything with rich text) ───────── */
.doc__inner { display: grid; justify-items: start; }
.doc__prose { max-width: var(--readw); }
.doc__prose h2:first-child { margin-top: 0; }

/* ── /start — the seven levels as an instrument panel ──────────────────── */
/* No overflow clipping here: a clipped ancestor swallows anchor scrolling to
   a level (/start#identity). */
.sysmap__lede { margin-bottom: 2rem; max-width: 40rem; }
.sysmap__tools { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.sysmap__axis { font-family: var(--font-mark); font-size: var(--fs-hud); letter-spacing: .24em; color: var(--fg-3); }

.sysmap__levels { position: relative; }
.sysmap__levels::before {
  content: '';
  position: absolute; left: 13px; top: 2.2rem; bottom: 2.2rem; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}
.level { border-bottom: 1px solid var(--line); }
.level__sum {
  display: grid;
  grid-template-columns: 28px minmax(56px, auto) minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: clamp(.8rem, 2.4vw, 2rem);
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  list-style: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.level__sum::-webkit-details-marker { display: none; }
.level__sum:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.level__sum:focus-visible { outline: 1.5px solid var(--focus); outline-offset: 2px; }
.level__node {
  position: relative; justify-self: center;
  width: 9px; height: 9px; transform: rotate(45deg);
  border: 1px solid var(--line-strong); background: var(--bg);
  transition: background var(--t) var(--ease), border-color var(--t), box-shadow var(--t);
}
.level[open] .level__node { border-color: transparent; background: var(--prism); box-shadow: 0 0 16px -2px rgba(56, 225, 255, .8); }
.level__num { font-family: var(--font-mark); font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: var(--fg-3); transition: color var(--t); }
.level[open] .level__num { color: var(--fg); }
.level__text { display: grid; gap: var(--s-1); min-width: 0; }
.level__name { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.1rem, 2.2vw, 1.8rem); letter-spacing: .22em; text-transform: uppercase; }
.level__q { font-size: var(--fs-small); color: var(--fg-2); letter-spacing: .04em; }
.level__count { font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--fg-3); text-transform: uppercase; white-space: nowrap; }
.level__mark { justify-self: end; color: var(--fg-3); transition: transform var(--t) var(--ease), color var(--t); }
.level[open] .level__mark { transform: rotate(45deg); color: var(--fg); }

.level__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: 0 0 clamp(1.8rem, 4vw, 2.8rem) calc(28px + clamp(.8rem, 2.4vw, 2rem));
}
.level__explain .prose { max-width: 34rem; }
.level__links { display: grid; align-content: start; gap: var(--s-3); }
.level__links-title { font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
.level__links-title span { margin-right: .7rem; }

/* ── /apps ─────────────────────────────────────────────────────────────── */
.appstrip__list { display: grid; gap: clamp(.9rem, 1.6vw, 1.3rem); }
.approw {
  --accent: var(--electric);
  position: relative;
  display: grid;
  grid-template-columns: auto 72px minmax(0, 1fr) minmax(0, 12rem) auto;
  gap: 1rem clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
  padding: clamp(1.3rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem);
  background: var(--ink);
  color: var(--fg);
  border: 1px solid var(--line);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.approw::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: .85; }
.approw:hover { border-color: var(--line-strong); transform: translateY(-2px); }
/* An unreleased app is dimmed at the mark, never by fading the whole panel:
   a translucent black panel over a white section goes muddy grey. */
.approw.is-soon::before { opacity: .45; }
.approw.is-soon .approw__mark { opacity: .6; }
.approw__idx { font-size: 1.1rem; color: var(--fg-3); }
.approw__mark { width: 72px; height: 72px; display: grid; place-items: center; }
.approw__logo, .approw__mark .art { width: 72px; height: 72px; background: transparent; }
.approw__mark .art img { object-fit: contain; }
.approw__glyph { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8a9099 42%, #14161a 78%); color: transparent; }
.approw__name { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: .18em; text-transform: uppercase; }
.approw__tag { margin-top: .35rem; font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--fg-3); text-transform: uppercase; }
.approw__sum { margin-top: .8rem; font-size: var(--fs-small); color: var(--fg-2); max-width: 34rem; }
.approw__meta { display: grid; gap: var(--s-2); justify-items: start; }
.approw__plat { color: var(--fg-3); }
.approw__acts { display: grid; gap: var(--s-2); justify-items: stretch; }
.approw__acts .btn { width: 100%; }

/* ── /apps/[slug] ──────────────────────────────────────────────────────── */
.apphero {
  --accent: var(--cyan);
  position: relative; overflow: clip; isolation: isolate;
  padding: calc(var(--nav-h) + clamp(3rem, 8vw, 5.5rem)) 0 clamp(3rem, 7vw, 5rem);
}
.apphero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 70% 60% at 30% 40%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(4, 5, 8, .7), rgba(4, 5, 8, .92));
}
.apphero__inner { display: grid; justify-items: start; }
.apphero__inner > * { max-width: 44rem; }
.apphero__back { margin-bottom: 2rem; }
.apphero__mark { width: clamp(64px, 9vw, 104px); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 1.6rem; }
.apphero__logo, .apphero__mark .art { width: 100%; height: 100%; background: transparent; }
.apphero__mark .art img { object-fit: contain; }
.apphero__glyph { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8a9099 42%, #14161a 78%); color: transparent; }
.apphero__name { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 8vw, 5.5rem); letter-spacing: .14em; line-height: 1; text-transform: uppercase; }
.apphero__tag { margin-top: .9rem; font-size: var(--fs-hud); letter-spacing: var(--track-hud); color: var(--fg-2); text-transform: uppercase; }
.apphero__sum { margin-top: 1.4rem; }
.apphero__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: 1.6rem; }
.apphero__purpose { font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
.apphero__cta { margin-top: 1.8rem; }
.apphero__plat { margin-top: 1.8rem; }

.appbody__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.appfeat { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.appfeat__item { padding: 1.2rem 1.3rem; background: var(--bg); }
.appfeat__num { font-size: 1.1rem; color: var(--fg-3); }
.appfeat__title { margin-top: .5rem; font-size: var(--fs-hud); letter-spacing: var(--track-wide); text-transform: uppercase; }
.appfeat__body { margin-top: .5rem; font-size: var(--fs-small); color: var(--fg-2); }
.appshots__rail { --col: minmax(210px, 1fr); }
.appshots__shot .art { aspect-ratio: 9 / 19.5; border: 1px solid var(--line); }

/* ── /about — the founder block ────────────────────────────────────────── */
.founder__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.founder__portrait .art { aspect-ratio: 4 / 5; }
.founder__kicker { color: var(--fg-3); display: flex; gap: var(--s-2); }
.founder__name { margin-top: 1rem; font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: .14em; line-height: 1.05; text-transform: uppercase; }
.founder__role { margin-top: .8rem; font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--fg-3); text-transform: uppercase; }
.founder__body { margin-top: 1.4rem; }
.founder__short { margin-top: 1rem; font-size: var(--fs-small); color: var(--fg-2); max-width: 34rem; }
.founder__cta { margin-top: 2rem; }

/* ── /anastasiia and any other person page ─────────────────────────────── */
.person { padding: calc(var(--nav-h) + clamp(3rem, 8vw, 5.5rem)) 0 clamp(3rem, 7vw, 5rem); }
.person__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
.person__portrait .art { aspect-ratio: 4 / 5; }
.person__name { margin-top: 1rem; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 6.5vw, 4.6rem); letter-spacing: .14em; line-height: 1; text-transform: uppercase; }
.person__short { margin-top: 1.4rem; }
.person__links { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: 1.8rem; font-size: var(--fs-hud); letter-spacing: var(--track-wide); text-transform: uppercase; }
.person__links a { display: inline-flex; align-items: center; gap: var(--s-2); border-bottom: 1px solid var(--line-strong); padding-bottom: .2rem; }
.person__bodyinner { display: grid; justify-items: start; }
.person__prose { max-width: var(--readw); }

/* ── /guides ───────────────────────────────────────────────────────────── */
.gfeature { --accent: var(--cyan); }
.gfeature__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.gfeature__art .art { aspect-ratio: 4 / 3; border: 1px solid rgba(255, 255, 255, .12); }
.gfeature__title { margin-top: 1rem; font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: .12em; line-height: 1.04; text-transform: uppercase; }
.gfeature__sub { margin-top: .9rem; font-size: var(--fs-hud); letter-spacing: var(--track-hud); color: var(--fg-2); text-transform: uppercase; }
.gfeature__sum { margin-top: 1.2rem; }
.gfeature__cta { margin-top: 2rem; }

.gcard { --accent: var(--electric); position: relative; background: var(--bg-2); border: 1px solid var(--line); transition: border-color var(--t), transform var(--t) var(--ease); }
.gcard:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.gcard.is-soon .gcard__art { opacity: .7; }
.gcard__link { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.gcard__art { aspect-ratio: 16 / 10; }
.gcard__art .art { height: 100%; }
.gcard__text { padding: 1.2rem 1.2rem 0; }
.gcard__kicker { font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--fg-3); text-transform: uppercase; }
.gcard__title { margin-top: .6rem; font-family: var(--font-display); font-weight: 300; font-size: 1.35rem; letter-spacing: .12em; text-transform: uppercase; }
.gcard__sub { margin-top: .5rem; font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--fg-2); text-transform: uppercase; }
.gcard__sum { margin-top: .8rem; font-size: var(--fs-small); color: var(--fg-2); }
.gcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 1.2rem; }
/* The draft tag belongs on the picture, not on top of the arrow. */

/* ── /guides/[slug] ────────────────────────────────────────────────────── */
.ghero {
  --accent: var(--cyan);
  position: relative; overflow: clip; isolation: isolate;
  padding: calc(var(--nav-h) + clamp(3rem, 8vw, 5.5rem)) 0 clamp(3rem, 7vw, 5rem);
}
.ghero__art { position: absolute; inset: 0; z-index: -2; }
.ghero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 80% 70% at 22% 45%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%),
    linear-gradient(90deg, rgba(4, 5, 8, .94), rgba(4, 5, 8, .72) 55%, rgba(4, 5, 8, .5));
}
.ghero__inner { display: grid; justify-items: start; }
.ghero__inner > * { max-width: 42rem; }
.ghero__back { margin-bottom: 2rem; }
.ghero__title { margin-top: .9rem; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.3rem, 6.5vw, 4.6rem); letter-spacing: .12em; line-height: 1.02; text-transform: uppercase; }
.ghero__sub { margin-top: .9rem; font-size: var(--fs-hud); letter-spacing: var(--track-hud); color: var(--fg-2); text-transform: uppercase; }
.ghero__sum { margin-top: 1.3rem; }
.ghero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: 1.6rem; }
.ghero__cta { margin-top: 1.8rem; }

.gbody__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 24rem); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.gbody__side { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.capture {
  display: grid; gap: var(--s-2);
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--glass-strong);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-glass);
}
.capture::before { content: ''; height: 2px; background: var(--prism); margin: calc(clamp(1.3rem, 3vw, 2rem) * -1) calc(clamp(1.3rem, 3vw, 2rem) * -1) .6rem; }
.capture__eyebrow { font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--fg-3); text-transform: uppercase; }
.capture__eyebrow span { margin-right: .6rem; }
.capture__title { font-family: var(--font-display); font-weight: 300; font-size: 1.35rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.15; }
.capture__note { font-size: var(--fs-small); color: var(--fg-2); margin-bottom: .6rem; }
.capture .field + .field { margin-top: .8rem; }
.capture__submit { width: 100%; margin-top: 1.1rem; }
.capture__fine { font-size: var(--fs-micro); letter-spacing: .08em; color: var(--fg-3); margin-top: .8rem; line-height: 1.6; text-transform: none; }
.capture__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.capture--done { gap: var(--s-3); justify-items: start; }

/* The thing asked for opens straight under the hero — no long white gap
   between the request and what was promised. */
.gdeliver { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.gdeliver__ok { max-width: 44rem; margin-bottom: 0; }
.gdeliver__frame { margin-top: 1.5rem; }
.gdeliver__open { margin-top: 1rem; }
.gdeliver__file { margin-top: 1.5rem; }
.gdeliver + .gbody { padding-top: clamp(2.5rem, 6vw, 4rem); }

/* ── /search ───────────────────────────────────────────────────────────── */
.srch { padding: calc(var(--nav-h) + clamp(2.5rem, 7vw, 4.5rem)) 0 clamp(2.5rem, 6vw, 4rem); }
.srch__inner { display: grid; justify-items: start; }
.srch__kicker { color: var(--fg-3); }
.srch__form { display: flex; width: 100%; max-width: 46rem; margin-top: 1.2rem; border: 1px solid var(--line-strong); background: var(--glass); }
.srch__form input {
  flex: 1; min-width: 0; min-height: 60px; padding: 0 1.1rem;
  background: transparent; border: 0; color: var(--fg);
  font-family: var(--font-display); font-weight: 300; font-size: clamp(1rem, 2vw, 1.35rem); letter-spacing: .12em; text-transform: uppercase;
  text-overflow: ellipsis;
}
.srch__form input::placeholder { color: var(--fg-3); }
.srch__form input:focus { outline: none; }
.srch__form:focus-within { border-color: var(--fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.srch__form button { display: inline-flex; align-items: center; gap: var(--s-3); padding: 0 1.4rem; background: var(--btn-bg); color: var(--btn-fg); border: 0; font-size: var(--fs-hud); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; }
.srch__count { margin-top: 1.2rem; font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--fg-3); text-transform: uppercase; }
.srch__group + .srch__group { margin-top: clamp(2rem, 4vw, 3rem); }
.srch__group-title { font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--fg-3); text-transform: uppercase; padding-bottom: .7rem; border-bottom: 1px solid var(--line-strong); }
.srch__group-title span { margin-right: .7rem; }
.srch__group-title em { font-style: normal; float: right; }
.srch__empty { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.srch__suggest { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ── /contact and /support ─────────────────────────────────────────────── */
.msg__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.msg__hud { margin-top: 1rem; }
.msg__aside { margin-top: 1.8rem; }
.msg__form { padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.msg__form .btn { margin-top: 1.4rem; }
.msg__fine { margin-top: 1rem; font-size: var(--fs-micro); letter-spacing: .08em; color: var(--fg-3); line-height: 1.6; }
.msg__done { display: grid; gap: var(--s-4); justify-items: start; }

/* ── Mobile: recompose, never shrink ───────────────────────────────────── */
@media (max-width: 960px) {
  .appbody__grid, .gbody__grid, .msg__grid, .founder__grid, .person__grid, .gfeature__grid { grid-template-columns: minmax(0, 1fr); }
  .gbody__side { position: static; }
  .founder__grid, .person__grid { gap: var(--s-5); }
  .approw { grid-template-columns: auto 56px minmax(0, 1fr); grid-template-areas: 'idx mark text' 'meta meta meta' 'acts acts acts'; }
  .approw__idx { grid-area: idx; }
  .approw__mark { grid-area: mark; width: 56px; height: 56px; }
  .approw__mark .art, .approw__logo { width: 56px; height: 56px; }
  .approw__text { grid-area: text; }
  .approw__meta { grid-area: meta; flex-direction: row; }
  .approw__acts { grid-area: acts; grid-auto-flow: column; justify-content: start; }
  .approw__acts .btn { width: auto; }
}

@media (max-width: 860px) {
  .phero__inner { grid-template-columns: minmax(0, 1fr); }
  .phero__side { justify-items: start; text-align: left; padding-top: 0; }
  .phero__side .hud-list--rule li { flex-direction: row; }
  .phero--art::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 62%, transparent), color-mix(in srgb, var(--bg) 88%, transparent) 55%, var(--bg)); }
  .docsec__item { grid-template-columns: minmax(0, 1fr); }
  .level__panel { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
}

@media (max-width: 640px) {
  /* Tighter tracking on the narrowest screens so a long word still fits. */
  .phero__title, .ghero__title, .apphero__name, .person__name { letter-spacing: .07em; }
  .level__sum { grid-template-columns: 22px auto minmax(0, 1fr) 18px; row-gap: var(--s-1); }
  .level__count { grid-column: 3 / -1; justify-self: start; }
  .level__mark { grid-row: 1; grid-column: 4; }
  .sysmap__levels::before { left: 10px; }
  .srch__form { flex-wrap: wrap; }
  .srch__form input { flex-basis: 100%; min-height: 52px; }
  .srch__form button { flex: 1; justify-content: center; min-height: 48px; }
  .srch__suggest { grid-template-columns: minmax(0, 1fr); }
  .approw { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'idx mark' 'text text' 'meta meta' 'acts acts'; }
  .appshots__rail { --col: 62vw; }
}

/* ── /glossary ───────────────────────────────────────────────────────────── */
/* The same words the Lesson panels show, read end to end. This is also where
   a term's link goes with scripts off, so every term carries its own id. */
.gloss { display: grid; gap: clamp(2rem, 4vw, 3rem); max-width: var(--readw); }
.gloss__term { scroll-margin-top: calc(var(--nav-h) + 3rem); padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--line); }
.gloss__term:first-child { border-top: 0; padding-top: 0; }
.gloss .gloss__term .gloss__name { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; font-size: clamp(1.2rem, 2.4vw, 1.7rem); letter-spacing: .12em; line-height: 1.15; }
.gloss__def { margin-top: 1rem; color: var(--fg-2); line-height: 1.65; }
.gloss__def p + p { margin-top: .8rem; }
.gloss__principle {
  margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-weight: 500; line-height: 1.5; width: fit-content;
  color: var(--electric);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .gloss__principle {
    background-image: var(--prism);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ── YOUNIVERSE ───────────────────────────────────────────────────────────
   Where upgrades are bought (see youniversePage). One card for everything
   on sale, so a course, a guide, a journey and a Code pack read as the same
   kind of thing; on a phone each is a row — picture left, words right — so
   the whole shelf is a few thumb-lengths, not a scroll of posters. */
.shop-plus .sec-head, .shop-band .sec-head { margin-bottom: var(--s-5); }
.shop-plans { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.shop-plan {
  position: relative; display: grid; gap: var(--s-3); align-content: start;
  padding: var(--pad-card); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
  background: linear-gradient(158deg, rgba(255, 255, 255, .06), transparent 70%);
}
.shop-plan::before { content: ''; position: absolute; left: 16px; right: 16px; top: -1px; height: 2px; background: var(--prism); }
.shop-plan__term { font-size: var(--fs-hud); letter-spacing: var(--track-hud); color: #b4bac2; }
.shop-plan__price { font-family: var(--font-mark); font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1; }
.shop-plan__price small { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .12em; color: #b4bac2; }
.shop-plan__list { display: grid; gap: .3rem; padding-left: 1.1rem; font-size: var(--fs-small); color: #c9ced6; }
.shop-band + .shop-band { border-top: 1px solid var(--line); }
.shop-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.shop-card__link {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, .55);
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease);
}
.shop-card__link:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.shop-card__art { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.shop-card__art .art { position: absolute; inset: 0; }
.shop-card__text { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem 1rem; flex: 1; min-width: 0; }
.shop-card__kind { font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--fg-3); }
.shop-card__title { font-family: var(--font-display); font-weight: 300; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.shop-card__sum { font-size: var(--fs-small); color: var(--fg-2); line-height: 1.45; }
.shop-card__foot { margin-top: auto; padding-top: .45rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); }
.shop-card__foot:empty { display: none; }
.shop-card__price { font-family: var(--font-mark); font-size: 1.15rem; line-height: 1; }
.shop-card__state { font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--fg-3); }
/* PROTOCOLS (routes/pages.js, protocolCard) — the RESET app's cards, on the
   YOUNIVERSE's dark ground beside YOU.0+'s plans, and painted like them: a
   surface, not glass. The colour is the Codes' own — a rule in one segment
   per Code, in the order they run, each its own ramp light to dark, and each
   Code's number wearing its ramp. Under each Code, what it is to the visitor:
   FREE, OWNED, or its own price. */
.shop-protocols .sec-head { margin-bottom: var(--s-5); }
.protocols { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
/* Two across on a wide screen: the four read as a square, not three and a
   stray. */
@media (min-width: 820px) { .protocols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.protocol {
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0;
  padding: var(--pad-card); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
  background: linear-gradient(158deg, rgba(255, 255, 255, .06), transparent 70%);
  scroll-margin-top: 4rem;
}
.protocol:target { border-color: rgba(255, 255, 255, .42); }
.protocol__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
/* The name in the brand's display type, as the Courses' are (Arian,
   2026-09-26: "Protocols is still in the old website's font"): Maverix
   Light, wide. It was weight 400, which Maverix does not have, so it drew in
   the Medium. Sized to the card, so the longest word never breaks. */
.protocol { container-type: inline-size; }
.protocol h3.protocol__name { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: min(1.3rem, 5.4cqw); letter-spacing: .12em; line-height: 1.15; text-transform: uppercase; overflow-wrap: normal; }
.protocol__time { flex: none; font-size: var(--fs-hud); letter-spacing: var(--track-hud); color: #b4bac2; text-transform: uppercase; white-space: nowrap; }
.protocol__time .mark-num { font-size: 1.3em; letter-spacing: .04em; color: #fff; }
.protocol__tagline { margin: 0; font-size: var(--fs-hud); letter-spacing: .2em; line-height: 1.7; text-transform: uppercase; color: #c9ced6; }
.protocol__rule { display: flex; gap: 4px; height: 2px; }
.protocol__rule i { flex: 1; border-radius: 2px; background: linear-gradient(90deg, var(--ra), var(--rb)); }
.protocol__seq { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-2); }
.protocol__step { display: grid; justify-items: start; gap: 5px; }
.protocol__code {
  display: inline-flex; align-items: center; gap: .5em; min-height: 40px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #fff;
  transition: border-color var(--t-fast);
}
.protocol__code:hover { border-color: rgba(255, 255, 255, .42); }
.protocol__num { font-family: var(--font-mark); font-size: 1.1em; letter-spacing: .04em; color: var(--ra); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .protocol__num { background-image: linear-gradient(90deg, var(--ra), var(--rb)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
.protocol__tag { padding-left: 15px; font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: #9aa1ab; }
.protocol__tag--price { font-family: var(--font-mark); font-size: 1.05rem; letter-spacing: .02em; line-height: 1; color: var(--ra); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .protocol__tag--price { background-image: linear-gradient(135deg, var(--ra), var(--rb)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
  /* On the dark card a deep number (GROUND's navy) is lifted; the hue stays
     the card's (BRAND-RULES §3). */
  .env--dark :is(.protocol__num, .protocol__tag--price) {
    background-image: linear-gradient(135deg, var(--ra), var(--rb));
    background-image: linear-gradient(135deg, oklch(from var(--ra) max(l, .7) c h), oklch(from var(--rb) max(l, .6) c h));
  }
}
.protocol__desc { margin: 0; font-size: var(--fs-small); line-height: 1.65; color: #c9ced6; }
.protocol__foot { margin-top: auto; padding-top: var(--s-2); }
.protocol__note { margin: 0; font-size: var(--fs-hud); letter-spacing: var(--track-hud); color: #b4bac2; }

@media (max-width: 600px) {
  .shop-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .shop-card__link { flex-direction: row; }
  .shop-card__art { flex: 0 0 92px; aspect-ratio: auto; min-height: 92px; }
  .shop-card__text { padding: .7rem .85rem; gap: .25rem; }
  .shop-card__title { font-size: .82rem; }
  .shop-card__sum { font-size: .78rem; }
}

/* ── THE YOUNIVERSE, ONE ROW PER SECTION ────────────────────────────────
   Arian, 2026-09-26: "Journeys, courses, protocols.. etc all the individual
   sections in YOUNIVERSE have them scroll/extend horizontally, that way it's
   cleaner." Each section is one row that slides sideways and snaps to its
   cards, lined up with the page's edge at rest and running out to the screen's
   edge as it moves, with a sliver of the next card showing so the row says
   there is more. The Series ladder is not one of them: "kill the horizontal
   feature and fit all 4 series in a square" (2026-09-23). */
.page-youniverse :is(.grid--journeys, .grid--courses, .protocols, .shop-band .grid--codes, .shop-grid, .shop-apps .apps__cards) {
  display: flex; gap: clamp(.9rem, 2vw, 1.4rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) .75rem;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.page-youniverse :is(.grid--journeys, .grid--courses, .protocols, .shop-band .grid--codes, .shop-grid, .shop-apps .apps__cards) > * {
  flex: 0 0 var(--rail-w, min(80vw, 330px)); min-width: 0; scroll-snap-align: start;
}
.page-youniverse .grid--courses, .page-youniverse .protocols { --rail-w: min(84vw, 380px); }
.page-youniverse .shop-band .grid--codes { --rail-w: min(42vw, 210px); }
.page-youniverse .shop-grid { --rail-w: min(72vw, 290px); }
.page-youniverse .shop-apps .apps__cards { --rail-w: min(40vw, 190px); }

/* THE APPS (routes/pages.js, appsBand), moved here from the front page with
   their look: each app its own phone screen, its screenshots taking turns on
   it (app.js), its name and line under it; an app with no screenshots shows
   its mark on the same screen. A surface, so it paints: no glass, no shadow. */
.page-youniverse .card-app--screen { background: none; border: 0; color: var(--ink); }
.page-youniverse .card-app--screen:hover { border: 0; }
.page-youniverse .card-app--screen .card__link { padding: 0 0 .5rem; min-height: 0; }
.page-youniverse .card-app__screen {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 1320 / 2868;
  border-radius: 13% / 6%;
  background: var(--ink); border: 1px solid rgba(10, 12, 18, .1);
}
.page-youniverse .card-app__shot { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.page-youniverse .card-app__shot.is-on { opacity: 1; }
.page-youniverse .card-app__shot picture, .page-youniverse .card-app__shot img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.page-youniverse .card-app__screen--mark { display: grid; place-items: center; }
.page-youniverse .card-app--screen .card-app__logo { margin: 0; }
.page-youniverse .card-app--screen .card-app__title { margin-top: 1rem; }
.page-youniverse .card-app--screen .card-app__tag { color: var(--fg-3); }
@media (prefers-reduced-motion: reduce) { .page-youniverse .card-app__shot { transition: none; } }

/* ── THE TOOLS OF LIGHT ROW (routes/pages.js, toolCardLight) ────────────
   Tall painted cards, each in its own two-colour wash, on the dark ground;
   the picture inset in the site's soft corner and the card's corner that
   corner plus its own padding, so the two curves run together. */
.tol-rail { --rail-w: min(84vw, 360px); }
.page-youniverse .tol-rail {
  display: flex; gap: clamp(.9rem, 2vw, 1.4rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) .75rem;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.page-youniverse .tol-rail > * { flex: 0 0 var(--rail-w); min-width: 0; scroll-snap-align: start; }
.tol-card { container-type: inline-size; --tol-pad: 12px; border-radius: calc(var(--r-soft) + var(--tol-pad)); background: linear-gradient(150deg, var(--ta), var(--tb)); color: #16161d; }
.tol-card__link { display: flex; flex-direction: column; align-items: center; height: 100%; padding: var(--tol-pad) var(--tol-pad) 1.6rem; text-align: center; color: inherit; }
.tol-card__art { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r-soft); overflow: hidden; isolation: isolate; display: grid; place-items: center; }
.tol-card__art .art, .tol-card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tol-card .geo :is(path, circle, ellipse, line, polygon, polyline) { fill: none; stroke: currentColor; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.tol-card__form { width: 58%; height: auto; color: rgba(22, 22, 29, .2); }
.tol-card__kicker { margin-top: 1.5rem; font-size: .62rem; line-height: 1.4; letter-spacing: .22em; text-transform: uppercase; color: rgba(22, 22, 29, .72); }
/* h3 in the selector, and the card around it: rhythm.css sizes every h3
   (h3:not([class*="hero"])) and outranks one class. */
/* In the brand's display type, as every other row's names (Arian,
   2026-09-26: "Update all of the fonts to match our current fonts"), sized
   to the card so the longest name takes two lines and no word breaks. */
.tol-card h3.tol-card__title { margin-top: .7rem; padding-inline: .6rem; font-family: var(--font-display); font-weight: 300; font-size: min(1.4rem, 5.5cqw); line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; text-wrap: balance; overflow-wrap: normal; }
.tol-card__sum { margin-top: 1rem; padding-inline: .9rem; max-width: 30ch; font-size: .88rem; line-height: 1.5; color: rgba(22, 22, 29, .78); }
.tol-card__mark { margin-top: auto; padding-top: 1.5rem; display: inline-flex; color: #16161d; }
.tol-card__glyph { width: 30px; height: 30px; }

/* ── THE YOUNIVERSE SEARCH (routes/pages.js, the hero; youniverse-find.js) ──
   Arian, 2026-09-26: "a rounded edge search bar that says what are you
   looking for in a soft gradient". A control, so glass, in a capsule; its
   edge and its words in the soft prism, the edge brightening to the full one
   while it is in use. */
.yu-find { margin-top: clamp(1.5rem, 3.4vw, 2.4rem); width: min(100%, 38rem); }
.yu-find__bar {
  position: relative; display: flex; align-items: center; gap: .75rem;
  min-height: 58px; padding: 0 1.3rem; border-radius: var(--r-pill); cursor: text;
  border: 1px solid transparent;
  background: linear-gradient(rgba(17, 19, 27, .78), rgba(17, 19, 27, .78)) padding-box, var(--prism-soft) border-box;
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
}
.yu-find__bar:focus-within { background: linear-gradient(rgba(17, 19, 27, .72), rgba(17, 19, 27, .72)) padding-box, var(--prism) border-box; }
.yu-find__icon { display: inline-flex; flex: none; color: rgba(255, 255, 255, .72); }
.yu-find__input {
  flex: 1; min-width: 0; min-height: 56px; padding: 0; border: 0; outline: none; background: transparent;
  color: #fff; font-family: var(--font-ui); font-size: 16px; letter-spacing: .12em; text-transform: uppercase;
}
.yu-find__input::-webkit-search-cancel-button { filter: invert(1) opacity(.55); cursor: pointer; }
.yu-find__hint {
  position: absolute; inset-inline: calc(1.3rem + 18px + .75rem) 1.3rem; top: 50%; translate: 0 -50%;
  pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .8rem; letter-spacing: .24em; text-transform: uppercase;
  color: #d9d2ff;
  background: linear-gradient(90deg, #ffc4ee, #c9b9ff 35%, #a4e9ff 68%, #e4ffb3);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.yu-find__input:not(:placeholder-shown) + .yu-find__hint { visibility: hidden; }
.yu-find__none { margin: .9rem 0 0 1.3rem; font-size: var(--fs-hud); letter-spacing: var(--track-hud); color: var(--fg-2); }

/* ── A CODE PACK AS ITS VIEW (routes/pages.js, the CODE PACKS row) ──────
   Arian, 2026-09-26, with the paywall of THE SEVEN ENERGY CENTERS: "this
   should be the view for the 7 Energy Centers code pack". Its cards fanned
   over its form on its first Code's ground, as its paywall opens
   (views/paywall.js, fanOf) — held still here: the float and the turn are the
   paywall's. Wider than a Code, so the fan has room, and the card is the
   container, so the fan scales with it. */
.page-youniverse .shop-band .grid--packs { --rail-w: min(84vw, 360px); }
.card-pack.card-code--tall .card-code__art { aspect-ratio: 5 / 4; }
.card-pack__ground {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  /* The paywall's own ground (paywall.css, --pw-canvas): the Code's colour
     taken most of the way to night, its accent glowing behind the fan. */
  background:
    radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--pw-accent, #8b93a0) 26%, transparent), transparent),
    linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .24)),
    color-mix(in srgb, var(--pw-bg, #16161d) 30%, #05060b);
}
.card-pack .pw__art { width: 100%; height: 100%; perspective: none; }
.card-pack .pw__form { inset: -8% 6%; }
.card-pack :is(.pw__fan, .pw__card, .pw__glow, .pw__form .geo) { animation: none; }
.card-pack .pw__fan { --fan-w: 27cqw; --fan-step: 11cqw; --fan-turn: 8deg; --fan-drop: 1.4cqw; }
.card-pack .pw__fan--many { --fan-w: 23cqw; --fan-step: 8.6cqw; --fan-turn: 6deg; --fan-drop: 1cqw; }
.card-pack .pw__card { border-radius: 1.8cqw; }

/* THE APPS' STATE (views/ui.js, appCard): a line under the app's own words,
   not a dashed box laid over them. And the name in the brand's display type,
   as every other row's (Arian, 2026-09-26: "Update all of the fonts"). */
.page-youniverse .card-app--screen .card__state { position: static; display: block; margin-top: .45rem; padding: 0; border: 0; background: none; font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--fg-3); }
.page-youniverse .card-app--screen .card__state svg { display: none; }
.page-youniverse .card-app--screen h3.card-app__title { font-family: var(--font-display); font-weight: 300; letter-spacing: .12em; }

/* A protocol's rule, one segment per Code in its own colours, lifted where a
   deep colour would vanish on the dark card (000 RESET's black), as its
   number is (BRAND-RULES §3). */
.env--dark .protocol__rule i {
  background: linear-gradient(90deg, var(--ra), var(--rb));
  background: linear-gradient(90deg, oklch(from var(--ra) max(l, .7) c h), oklch(from var(--rb) max(l, .6) c h));
}