/*
 * style.css — the only public stylesheet. admin.css loads in addition to
 * this file under /admin/, never instead of it.
 *
 * Section order (do not reorder, do not add a section outside this list):
 *   1. tokens
 *   2. reset and base
 *   3. typography
 *   4. layout
 *   5. components
 *   6. header and nav
 *   7. footer
 *   8. page sections
 *   9. utilities
 *   10. media queries
 */

/*
 * @font-face — self-hosted, latin-subset, variable fonts. All three files
 * live under /assets/fonts/v1/ (same-origin). Never point a url() at an
 * external host: the CSP is default-src 'self' and a font load does not
 * announce a CSP violation the way a script or stylesheet does.
 */

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/v1/hanken-grotesk-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/assets/fonts/v1/schibsted-grotesk-latin.woff2') format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/v1/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ===== TOKENS ===== */

:root {
  --bg: #09090a;
  --panel: #131315;
  --panel2: #101012;
  --line: rgba(255, 255, 255, .08);
  --line2: rgba(255, 255, 255, .07);
  --text: #ededee;
  --muted: #9a9aa1;
  --faint: #8b8b92;
  --orange: #FF7A18;
  --orange-l: #FF9A4D;
  --deep: #F0431F;
  --grad: linear-gradient(135deg, #FF8A3D, #F0431F);
  --danger: #FF6B6B;
  --success: #4ADE80;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --display: 'Schibsted Grotesk', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --max: 1200px;
}

/* ===== RESET AND BASE ===== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}

section {
  scroll-margin-top: 90px;
}

/* ===== TYPOGRAPHY ===== */

h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5.4vw, 4.3rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.025em;
}

h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  font-weight: 700;
}

h4 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
}

body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.lead {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 400;
  line-height: 1.62;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
}

.kicker {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
}

/* ===== LAYOUT ===== */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

section {
  padding: 64px 0;
}

/* ===== COMPONENTS ===== */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--text);
}

.brand .mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--grad);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  color: #0a0a0b;
}

.brand .name {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.3px;
}

.brand .name b {
  color: var(--orange);
  font-weight: 600;
}

.btn-primary,
.btn-lg,
.btn-ghost,
.btn-soft,
.btn-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 500;
  text-decoration: none;
}

.btn-primary {
  font-size: 13px;
  color: #0a0a0b;
  background: var(--grad);
  padding: 10px 18px;
  border-radius: 10px;
  transition: filter .15s, transform .15s;
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-lg {
  font-size: 14px;
  color: #0a0a0b;
  background: var(--grad);
  padding: 14px 24px;
  border-radius: 12px;
  transition: filter .15s, transform .15s;
}

.btn-lg:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn-ghost {
  font-size: 14px;
  color: var(--text);
  border: 1px solid var(--line);
  padding: 14px 24px;
  border-radius: 12px;
  transition: border-color .15s;
}

.btn-ghost:hover {
  border-color: var(--text);
}

.btn-soft {
  font-size: 13.5px;
  color: var(--orange-l);
  border: 1px solid var(--orange);
  padding: 12px 20px;
  border-radius: 11px;
  transition: border-color .15s;
}

.btn-soft:hover {
  border-color: var(--orange-l);
}

.btn-mail {
  font-size: 14.5px;
  color: #0a0a0b;
  background: var(--grad);
  padding: 16px 30px;
  border-radius: 13px;
  transition: filter .15s, transform .15s;
}

.btn-mail:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.eyebrow {
  color: var(--orange-l);
}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.sec-head p {
  font-size: 15px;
  color: var(--muted);
  max-width: 360px;
  margin: 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.card {
  position: relative;
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, transform .18s;
}

.card.featured {
  background: linear-gradient(165deg, color-mix(in srgb, var(--orange) 7%, transparent), var(--panel) 55%);
  border-color: color-mix(in srgb, var(--orange) 22%, transparent);
}

.card:hover {
  border-color: rgba(255, 122, 24, .4);
  transform: translateY(-3px);
}

.card h2,
.card h3,
.card h4 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 10px;
}

.card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange) 25%, transparent);
  color: var(--orange-l);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.ic svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.pill-soon {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--orange-l);
  border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
  padding: 4px 9px;
  border-radius: 999px;
}

.badge {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px 15px;
}

.badge b {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 20px;
  color: var(--orange);
  line-height: 1;
  display: block;
}

.badge span {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  display: block;
}

.phone {
  display: flex;
  justify-content: center;
  position: relative;
}

.phone .frame {
  width: 232px;
  height: 472px;
  border-radius: 42px;
  background: var(--panel2);
  border: 1px solid var(--line);
  padding: 11px;
  position: relative;
}

.phone .island {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 26px;
  background: var(--bg);
  border-radius: 999px;
  z-index: 3;
}

.phone .screen {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--bg);
  display: grid;
  place-items: center;
}

.phone .screen span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
}

.contact-panel {
  background: var(--panel2);
  border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
  border-radius: 24px;
  padding: clamp(36px, 5vw, 64px);
  text-align: center;
  position: relative;
}

.contact-panel h2 {
  font-size: clamp(1.5rem, 4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: 16px;
}

.contact-panel p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 32px;
}

.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11.5px;
  color: #b7b7bd;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 8px;
  transition: color .15s, border-color .15s;
}

.tag:hover {
  color: var(--orange-l);
  border-color: color-mix(in srgb, var(--orange) 45%, transparent);
}

.tag.active {
  color: var(--orange-l);
  border-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 12%, transparent);
}

/*
 * Form Field — COMPONENTS.md -> Form Field. Shared by the contact form and
 * every admin form; render_field() in includes/functions.php is the only
 * emitter of this markup. States: empty, filled, focused, invalid,
 * disabled. Focus always shows a visible --orange outline with a 2px
 * offset per DESIGN.md -> Color (Focus indicator on form controls) — never
 * outline: none, and a focused invalid field shows both the focus outline
 * and the invalid border-color, never one in place of the other.
 */
.field {
  margin-bottom: 24px;
}

.field-label {
  display: block;
  font-size: 14.5px;
  color: var(--text);
  margin-bottom: 8px;
}

.field-input,
.field-textarea,
.field-select {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--text);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  transition: border-color .15s;
}

.field-textarea {
  resize: vertical;
  min-height: 120px;
}

.field-select {
  cursor: pointer;
}

.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--muted);
}

.field-input:focus,
.field-textarea:focus,
.field-select:focus {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.field-input:hover,
.field-textarea:hover,
.field-select:hover {
  border-color: var(--faint);
}

.field-input:disabled,
.field-textarea:disabled,
.field-select:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.field-help {
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 0;
}

.field-error {
  font-size: 13px;
  color: var(--danger);
  margin: 6px 0 0;
}

.field-invalid .field-input,
.field-invalid .field-textarea,
.field-invalid .field-select {
  border-color: var(--danger);
}

/*
 * .hp — API.md -> Contact form submission. Emitted by the contact form
 * directly, not render_field().
 */
.hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
 * Flash Message — COMPONENTS.md -> Flash Message. render_flash() in
 * includes/functions.php is the only emitter of this markup. Rendered
 * above the form it reports on. Colour is never the sole carrier of
 * severity — the message wording states the outcome and role differs
 * between error (role="alert") and success/info (role="status"), per
 * DESIGN.md -> Accessibility.
 */
.flash {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 24px;
  font-size: 15px;
}

.flash-success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, var(--panel));
  border-color: var(--success);
}

.flash-error {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--panel));
  border-color: var(--danger);
}

.flash-info {
  color: var(--muted);
  background: var(--panel2);
  border-color: var(--line);
}

/* ===== HEADER AND NAV ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--line2);
}

.site-header .bar {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

nav.main {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* Below 520px, nav.main becomes the animated reveal panel and .nav-links
   becomes its single grid item -- see the @media (max-width: 520px) block.
   Above that, it stays transparent to layout so nav.main keeps flexing
   directly over the links and the CTA -- see COMPONENTS.md -> Main Nav. */
.nav-links {
  display: contents;
}

nav.main a.link {
  color: #b7b7bd;
  font-size: 14.5px;
  text-decoration: none;
  transition: color .15s;
}

nav.main a.link:hover {
  color: var(--text);
}

nav.main a.link.active {
  color: var(--orange-l);
}

.nav-toggle {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: var(--text);
}

/* Both icons stay in the document and are stacked on top of each other
   inside the button's own box, so the swap is a cross-fade on opacity
   rather than a display:none / display:block flip -- the button never
   resizes and neither glyph shifts. Centered with fixed offsets, not a
   translate transform, so prefers-reduced-motion's transform: none
   !important cannot knock the icon off-center -- see DESIGN.md -> Motion. */
.nav-toggle svg {
  position: absolute;
  top: 11px;
  left: 11px;
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}

.nav-toggle .icon-bars {
  opacity: 1;
}

.nav-toggle[aria-expanded="true"] .icon-bars {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  opacity: 1;
}

/* ===== FOOTER ===== */

footer {
  border-top: 1px solid var(--line2);
  background: #0b0b0c;
}

.foot-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 48px;
  padding-bottom: 40px;
}

.foot-brand {
  max-width: 300px;
}

.foot-brand .brand {
  margin-bottom: 16px;
}

.foot-brand p {
  font-size: 14px;
  line-height: 1.6;
  color: #8c8c93;
  margin: 0;
}

.foot-cols {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.foot-cols h4 {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: #7b7b82;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 16px;
}

.foot-links {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14px;
  color: #b7b7bd;
}

.foot-links a {
  text-decoration: none;
  color: inherit;
  transition: color .15s;
}

.foot-links a:hover {
  color: var(--text);
}

.socials {
  display: flex;
  gap: 14px;
}

.socials a {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: #b7b7bd;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}

.socials a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.socials a:hover {
  color: var(--text);
  border-color: var(--orange);
}

.foot-bottom {
  border-top: 1px solid var(--line);
}

.foot-bottom .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
}

.foot-bottom a {
  text-decoration: none;
  color: inherit;
  transition: color .15s;
}

.foot-bottom a:hover {
  color: #b7b7bd;
}

/* ===== PAGE SECTIONS ===== */

/* ----- home ----- */

.home-hero {
  padding: 72px 0 56px;
}

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
}

.home-hero-copy {
  container-type: inline-size;
}

.home-hero-copy h1 {
  font-size: min(4.3rem, 9.7cqi);
}

.home-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 26px;
}

.home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-chip {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 7px 13px;
  border-radius: 8px;
}

.home-hero-art {
  display: flex;
  justify-content: center;
  position: relative;
}

.home-hero-art img {
  width: clamp(260px, 32vw, 360px);
  height: auto;
  display: block;
}

.home-hero-badge {
  bottom: 4px;
  left: -10px;
}

.home-spotlight-panel {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 52px);
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.home-spotlight-copy {
  flex: 1 1 340px;
  min-width: 280px;
}

.home-spotlight-copy h2 {
  margin: 8px 0 16px;
}

.home-spotlight-copy p {
  color: var(--muted);
  max-width: 440px;
  margin: 0 0 28px;
}

.home-spotlight .phone {
  flex: 0 0 auto;
}

.home-spotlight .screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-about-grid {
  display: flex;
  gap: 56px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.home-about-art {
  flex: 0 0 auto;
}

.home-about-art img {
  width: 248px;
  height: auto;
  display: block;
}

.home-about-copy {
  flex: 1 1 420px;
  min-width: 300px;
}

.home-about-copy h2 {
  margin-bottom: 8px;
}

.home-about-role {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--faint);
  margin: 0 0 22px;
}

.home-about-copy p {
  color: var(--muted);
  max-width: 560px;
  margin: 0 0 18px;
}

.home-about-copy p:last-of-type {
  margin-bottom: 0;
}

.home-contact {
  padding-bottom: 80px;
}

.home-contact-form {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

.home-contact-form .btn-primary {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.home-contact-alt {
  font-size: 14px;
  color: var(--muted);
  margin-top: 24px;
}

.home-contact-alt a {
  color: var(--orange-l);
}

/* ----- services ----- */

.services-head {
  padding-bottom: 24px;
}

.services-head .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.services-head h1 {
  margin-bottom: 16px;
}

.services-head .lead {
  color: var(--muted);
  max-width: 560px;
}

.services-list {
  padding-top: 24px;
}

.services-list .wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.services-item {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.services-item-icon {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.services-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

.services-item-body .services-item-snippet {
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0 0 14px;
}

.services-item-body .services-item-desc {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

.services-empty p {
  color: var(--muted);
  font-size: 15.5px;
}

.services-cta {
  padding-bottom: 80px;
}

/* ----- apps ----- */

.apps-head {
  padding-bottom: 24px;
}

.apps-head .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.apps-head h1 {
  margin-bottom: 16px;
}

.apps-head .lead {
  color: var(--muted);
  max-width: 560px;
}

.apps-filter {
  padding-top: 0;
  padding-bottom: 24px;
}

.apps-filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.apps-grid-section {
  padding-top: 24px;
  padding-bottom: 80px;
}

/*
 * App Card — COMPONENTS.md -> App Card, redesigned 2026-08-13. Root is
 * `.card .app-card`, inheriting the base Card surface, border, radius,
 * hover, and title scale; nothing below restates any of those. Colours map
 * to DESIGN.md -> Color's App mockup literals table; this card introduces
 * no hex literal.
 */
.app-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  max-width: 330px;
}

.app-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.app-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--panel), var(--panel2));
  flex: none;
  display: grid;
  place-items: center;
}

.app-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-card-icon-initial {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  color: var(--orange-l);
}

.app-card p {
  margin: 0 0 18px;
  flex: 1;
}

.app-card-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.badge-platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 8px;
}

.badge-platform svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.app-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid var(--line2);
}

.app-card-category {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
}

.app-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--orange-l);
}

.app-card-cta svg {
  width: 14px;
  height: 14px;
}

.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.badge-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

.badge-status-live {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 32%, transparent);
  background: color-mix(in srgb, var(--success) 8%, transparent);
}

.badge-status-live .badge-status-dot {
  background: var(--success);
}

.badge-status-dev {
  color: var(--orange-l);
  border-color: color-mix(in srgb, var(--orange) 32%, transparent);
  background: color-mix(in srgb, var(--orange) 8%, transparent);
}

.badge-status-dev .badge-status-dot {
  background: var(--orange-l);
}

.badge-status-archived {
  color: var(--faint);
  border-color: color-mix(in srgb, var(--faint) 32%, transparent);
  background: color-mix(in srgb, var(--faint) 8%, transparent);
}

.badge-status-archived .badge-status-dot {
  background: var(--faint);
}

.apps-empty p {
  color: var(--muted);
  font-size: 15.5px;
  margin: 0 0 10px;
}

.apps-empty a {
  color: var(--orange-l);
  text-decoration: none;
}

.apps-empty a:hover {
  text-decoration: underline;
}

.apps-breadcrumb {
  padding: 32px 0 0;
  font-family: var(--mono);
  font-size: 12.5px;
}

.apps-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.apps-breadcrumb a:hover {
  color: var(--orange-l);
}

.apps-breadcrumb span[aria-hidden] {
  color: var(--faint);
  margin: 0 8px;
}

.apps-breadcrumb span[aria-current] {
  color: var(--faint);
}

/*
 * App Detail — SCREENS.md -> App Detail, COMPONENTS.md -> App Detail Hero,
 * Screenshot Gallery, Tech Tag List, App Spec Table, Review Card, External
 * Link List, redesigned 2026-08-13 from docs/new_app_updates/app.html.
 * Section wrappers keep the .apps- prefix; repeated pieces inside take
 * .app-, mirroring how .site-card- was named. Colours map to DESIGN.md ->
 * Color's App mockup literals table; nothing below introduces a hex
 * literal the table does not already resolve.
 */
.apps-hero {
  padding: 32px 0 64px;
}

.app-hero-banner {
  position: relative;
  height: clamp(260px, 34vw, 400px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel2);
  display: grid;
  place-items: center;
}

.app-hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 9, 10, 0) 40%, var(--bg) 100%);
  pointer-events: none;
}

.app-hero-banner-placeholder {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--faint);
}

.app-hero-identity {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: -68px;
  padding: 0 8px 0 14px;
}

.app-hero-icon {
  width: 132px;
  height: 132px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--panel), var(--panel2));
  flex: none;
  display: grid;
  place-items: center;
}

.app-hero-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-hero-icon-initial {
  font-family: var(--display);
  font-weight: 700;
  font-size: 52px;
  color: var(--orange-l);
}

.app-hero-info {
  flex: 1 1 320px;
  min-width: 280px;
  padding-bottom: 6px;
}

.app-hero-info .badge-status {
  margin-bottom: 12px;
}

.app-hero-info h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  margin: 0 0 10px;
}

.app-hero-info .lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 560px;
  margin: 0;
}

.app-hero-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 0 8px;
}

.app-hero-platforms {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.app-hero-platforms .badge-platform {
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: 10px;
}

.app-hero-cta {
  gap: 11px;
}

.app-hero-cta svg {
  width: 20px;
  height: 20px;
}

.app-hero-cta-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.app-hero-cta-kicker {
  font-family: var(--mono);
  font-size: 10px;
  opacity: .75;
}

.app-hero-cta-store {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
}

.apps-gallery {
  padding: 0 0 64px;
}

.apps-gallery .eyebrow {
  display: block;
  margin-bottom: 20px;
}

.app-gallery-rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 6px 4px 22px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--orange) 40%, transparent) transparent;
}

.app-gallery-rail::-webkit-scrollbar {
  height: 8px;
}

.app-gallery-rail::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--orange) 35%, transparent);
  border-radius: 999px;
}

.app-gallery-rail::-webkit-scrollbar-track {
  background: transparent;
}

.app-shot {
  flex: none;
  scroll-snap-align: start;
}

.app-shot-bezel {
  position: relative;
  width: 236px;
  height: 494px;
  border-radius: 42px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 10px;
}

.app-shot-island {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 24px;
  background: var(--bg);
  border-radius: 999px;
  z-index: 3;
}

.app-shot-screen {
  width: 100%;
  height: 100%;
  border-radius: 31px;
  overflow: hidden;
  background: var(--bg);
}

.app-shot-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.apps-about-tech {
  padding: 0 0 64px;
}

.apps-about-tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  gap: 48px;
}

.app-about .eyebrow,
.app-tech .eyebrow {
  display: block;
  margin-bottom: 20px;
}

.app-about h2 {
  margin: 0 0 20px;
}

.app-about p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 18px;
}

.app-about p:last-child {
  margin-bottom: 0;
}

.app-tech-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 52px);
}

.app-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.app-tech-tags:last-child {
  margin-bottom: 0;
}

.app-spec-table {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.app-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line2);
}

.app-spec-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.app-spec-label {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--faint);
}

.app-spec-value {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  text-align: right;
}

.apps-reviews {
  padding: 0 0 64px;
}

.apps-reviews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.apps-reviews-head .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.apps-reviews-head h2 {
  margin: 0;
}

.apps-reviews-link {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--orange-l);
  text-decoration: none;
  white-space: nowrap;
}

.apps-reviews-link:hover {
  text-decoration: underline;
}

.apps-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.app-review-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.app-review-stars {
  display: flex;
  gap: 2px;
  color: var(--faint);
}

.app-review-star {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.app-review-star.is-filled {
  fill: var(--orange-l);
  stroke: var(--orange-l);
}

.app-review-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.app-review-card p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
  margin: 0;
  flex: 1;
}

.app-review-response {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  font-size: 13.5px;
}

.app-review-response strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
}

.app-review-response p {
  color: var(--muted);
  margin: 0;
}

.app-review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: #0a0a0b;
  flex: none;
}

.app-review-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.app-review-territory {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
}

.apps-links {
  padding: 0 0 80px;
}

.apps-links .eyebrow {
  display: block;
  margin-bottom: 20px;
}

.apps-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.app-link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}

.app-link-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange) 22%, transparent);
  color: var(--orange-l);
  display: grid;
  place-items: center;
  flex: none;
}

.app-link-card-icon svg {
  width: 20px;
  height: 20px;
}

.app-link-card-body {
  flex: 1;
  min-width: 0;
}

.app-link-card-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.app-link-card-domain {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
  margin-top: 2px;
}

.app-link-card-arrow {
  width: 16px;
  height: 16px;
  color: var(--faint);
  flex: none;
}

.sites-head {
  padding-bottom: 24px;
}

.sites-head .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.sites-head h1 {
  margin-bottom: 16px;
}

.sites-head .lead {
  color: var(--muted);
  max-width: 560px;
}

.sites-grid-section {
  padding-top: 24px;
  padding-bottom: 80px;
}

/*
 * Website Card — COMPONENTS.md -> Website Card, browser-chrome redesign
 * (2026-08-13). Root is `.card .site-card`, inheriting the base Card
 * surface, border, radius, hover, and title scale; nothing below restates
 * any of those. Colours map to DESIGN.md -> Color's mockup-to-token table;
 * #1a1a1d (browser header bar) and the three traffic-light dot colours are
 * the only hex literals this card is permitted, per that table.
 */
.sites-grid-section .cards {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.site-card {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.site-card-frame {
  padding: 10px 10px 0;
}

.site-card-browser {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel2);
}

.site-card-browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: #1a1a1d;
  border-bottom: 1px solid var(--line2);
}

.site-card-lights {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.site-card-light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.site-card-light-red {
  background: #ff5f57;
}

.site-card-light-yellow {
  background: #febc2e;
}

.site-card-light-green {
  background: #28c840;
}

.site-card-address {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-card-lock {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
}

.site-card-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg);
  display: grid;
  place-items: center;
}

.site-card-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-card-shot-placeholder {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
  text-align: center;
  padding: 0 16px;
}

.site-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}

.site-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.site-card-title-row h3 {
  margin-bottom: 0;
}

.site-card-category {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--orange-l);
  border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
  background: color-mix(in srgb, var(--orange) 7%, transparent);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.site-card-body p {
  margin: 0 0 22px;
  flex: 1;
}

.site-card-body .btn-soft {
  align-self: flex-start;
}

.site-card-body .btn-soft svg {
  width: 14px;
  height: 14px;
}

.sites-empty p {
  color: var(--muted);
  font-size: 15.5px;
  margin: 0;
}

/* ----- blog ----- */

.blog-head {
  padding-bottom: 24px;
}

.blog-head .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.blog-head h1 {
  margin-bottom: 16px;
}

.blog-head .lead {
  color: var(--muted);
  max-width: 560px;
}

.blog-head-back {
  margin: 0;
}

.blog-head-back a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
}

.blog-head-back a:hover {
  color: var(--orange-l);
}

.blog-filter {
  padding-bottom: 8px;
}

.blog-filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-grid-section {
  padding-top: 24px;
  padding-bottom: 80px;
}

.post-card {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.post-card-image {
  aspect-ratio: 16 / 9;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 28px;
}

.post-card-no-image .post-card-body {
  padding-top: 28px;
}

.badge-category {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 4px 9px;
  border-radius: 8px;
  margin-bottom: 14px;
  transition: color .15s, border-color .15s;
}

.badge-category:hover {
  color: var(--orange-l);
  border-color: color-mix(in srgb, var(--orange) 45%, transparent);
}

.badge-category-newsletter {
  color: var(--orange-l);
  font-weight: 600;
  border-color: color-mix(in srgb, var(--orange) 45%, transparent);
}

.post-card-body h3 {
  margin: 0 0 10px;
}

.post-card-body h3 a {
  color: inherit;
  text-decoration: none;
}

.post-card-body h3 a:hover {
  color: var(--orange-l);
}

.post-card-body p {
  flex: 1;
}

.post-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.post-card-date {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  margin-top: 16px;
}

.blog-empty p {
  color: var(--muted);
  font-size: 15.5px;
  margin: 0;
}

.blog-empty a {
  color: var(--orange-l);
  text-decoration: none;
}

.blog-empty a:hover {
  text-decoration: underline;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
}

.pagination a {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 9px;
  transition: color .15s, border-color .15s;
}

.pagination a:hover {
  color: var(--orange-l);
  border-color: color-mix(in srgb, var(--orange) 45%, transparent);
}

.pagination-status {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--faint);
}

/* ----- blog post ----- */

.blog-post-breadcrumb {
  padding: 32px 0 0;
  font-family: var(--mono);
  font-size: 12.5px;
}

.blog-post-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.blog-post-breadcrumb a:hover {
  color: var(--orange-l);
}

.blog-post-breadcrumb span[aria-hidden] {
  color: var(--faint);
  margin: 0 8px;
}

.blog-post-breadcrumb span[aria-current] {
  color: var(--faint);
}

.blog-post-head {
  padding: 24px 0 40px;
}

.blog-post-head .wrap {
  max-width: 760px;
}

.blog-post-head .badge-category {
  margin-bottom: 20px;
}

.blog-post-head h1 {
  margin-bottom: 18px;
}

.blog-post-date {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--faint);
  margin-bottom: 20px;
}

.blog-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-post-image {
  padding: 0 0 40px;
}

.blog-post-image .wrap {
  max-width: 900px;
}

.blog-post-image img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  display: block;
}

.blog-post-body {
  padding: 0 0 56px;
}

.blog-post-body .wrap {
  max-width: 760px;
}

.blog-post-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 40px 0 18px;
}

.blog-post-body h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  margin: 32px 0 14px;
}

.blog-post-body p {
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 20px;
}

.blog-post-body ul,
.blog-post-body ol {
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 20px 1.4em;
}

.blog-post-body li {
  margin-bottom: 8px;
}

.blog-post-body a {
  color: var(--orange-l);
}

.blog-post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  margin: 24px 0;
  display: block;
}

.blog-post-body blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--orange);
  background: var(--panel2);
  border-radius: 0 12px 12px 0;
  color: var(--muted);
}

.blog-post-body pre {
  margin: 24px 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--panel2);
  border: 1px solid var(--line);
  overflow-x: auto;
}

.blog-post-body code {
  font-family: var(--mono);
  font-size: 13.5px;
}

.blog-post-footer {
  padding: 0 0 56px;
}

.blog-post-footer .wrap {
  max-width: 760px;
}

.blog-related {
  padding: 0 0 80px;
}

.blog-related h2 {
  margin-bottom: 24px;
}

/* ----- privacy policy ----- */

.privacy-head {
  padding-bottom: 24px;
}

.privacy-head .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.privacy-head h1 {
  margin-bottom: 16px;
}

.privacy-head .lead {
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 12px;
}

.privacy-updated {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 13px;
}

.privacy-toc {
  padding-top: 0;
  padding-bottom: 24px;
}

.privacy-toc .wrap {
  max-width: 760px;
}

.privacy-toc nav {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 28px;
}

.privacy-toc ol {
  margin: 0;
  padding-left: 1.2em;
  color: var(--muted);
}

.privacy-toc li {
  margin-bottom: 8px;
}

.privacy-toc li:last-child {
  margin-bottom: 0;
}

.privacy-toc a {
  color: var(--orange-l);
  text-decoration: none;
}

.privacy-toc a:hover {
  text-decoration: underline;
}

.privacy-body {
  padding-top: 24px;
  padding-bottom: 0;
}

.privacy-body .wrap {
  max-width: 760px;
}

.privacy-body section {
  margin-bottom: 48px;
}

.privacy-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0 0 18px;
}

.privacy-body p {
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 20px;
}

.privacy-body ul {
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 20px 1.4em;
}

.privacy-body li {
  margin-bottom: 8px;
}

.privacy-back-top {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.privacy-back-top:hover {
  color: var(--orange-l);
}

.privacy-cta {
  padding-top: 0;
  padding-bottom: 80px;
}

/* ===== UTILITIES ===== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ===== MEDIA QUERIES ===== */

@media (max-width: 720px) {
  nav.main {
    gap: 18px;
  }

  nav.main a.link {
    font-size: 13.5px;
  }

  .home-hero {
    padding-top: 48px;
  }

  .home-hero-grid {
    grid-template-columns: 1fr;
  }

  .home-about-grid {
    gap: 32px;
  }

  .services-item {
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 520px) {
  .site-header .bar {
    height: 64px;
  }

  .nav-toggle {
    display: flex;
  }

  nav.main {
    display: grid;
    grid-template-rows: 0fr;
    align-items: start;
    overflow: hidden;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: grid-template-rows .25s ease, border-color .25s ease;
  }

  nav.main.open {
    grid-template-rows: 1fr;
    border-bottom-color: var(--line2);
  }

  /* The reveal's real content: a grid item that resolves to its own
     intrinsic height, clipped by nav.main's overflow while its row track is
     collapsed. This is what makes the open animation end exactly at the
     menu's actual height instead of a fixed pixel ceiling -- see
     COMPONENTS.md -> Main Nav and DESIGN.md -> Motion. The closed panel is
     also dropped out of hit-testing here: opacity never suppresses pointer
     events on its own -- see DESIGN.md -> Motion, Hit-testing. */
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  nav.main.open .nav-links {
    opacity: 1;
    pointer-events: auto;
  }

  nav.main a.link {
    display: block;
    padding: 16px 28px;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }

  nav.main .btn-primary {
    margin: 16px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
    transform: none !important;
  }
}