/* =================================================================
   BuiltByTyler — Design System
   Light / minimal · sleek · elegant · thin
   All tokens live in :root so the look can be retuned in one place.
   ================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Palette — Ice / Cyan · clinical high-tech */
  --bg:            #04070C;   /* deep blue-black page */
  --surface:       #0B121C;   /* cards / panels (lifted off the page) */
  --surface-alt:   #070C14;   /* subtle bands */
  --ink:           #EAF3FF;   /* primary text — ice white */
  --muted:         #7C8A9E;   /* secondary text — cool grey */
  --hairline:      rgba(150,200,230,0.22); /* cyan-tinted borders — crisper */
  --hairline-strong: rgba(150,205,235,0.42); /* precise structural lines */
  --tick:          rgba(95,230,255,0.55);  /* engineered corner marks */
  --accent:        #5FE6FF;   /* cyan — primary CTAs / emphasis */
  --accent-warm:   #5FE6FF;   /* price / highlight (unified cyan) */
  --accent-deep:   #2E9BC4;   /* the far end of every accent gradient */
  --accent-soft:   rgba(95, 230, 255, 0.10); /* accent as a wash, not a line */
  --on-accent:     #04070C;   /* text on accent (dark on cyan) */
  --overlay:       rgba(2, 5, 10, 0.74);

  /* Glass — the panel language. Content floats over the 3D world on
     frosted sheets, so the blur values live here and nowhere else. */
  --glass:         rgba(12, 20, 32, 0.58);
  --glass-strong:  rgba(10, 17, 28, 0.80);
  --blur:          blur(16px) saturate(140%);
  --blur-lg:       blur(26px) saturate(150%);

  /* Typography — geometric display, clean body, one elegant serif for
     emphasis. The serif is the whole reason the page reads editorial
     rather than "another dark SaaS template". */
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-accent:  "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale — more range top to bottom. A display size that
     actually commands the page is most of what "elegant" means here. */
  --fs-display: clamp(2.6rem, 7.2vw, 5.6rem);
  --fs-hero:    clamp(2.1rem, 5vw, 3.75rem);
  --fs-h1:      clamp(1.75rem, 3.6vw, 2.9rem);
  --fs-h2:      clamp(1.4rem, 2.6vw, 2.05rem);
  --fs-h3:      clamp(1rem, 1.5vw, 1.22rem);
  --fs-body:    0.95rem;
  --fs-small:   0.79rem;
  --fs-micro:   0.66rem;

  /* Spacing / layout */
  --maxw:       1200px;
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  /* Radii — near-square. The look is engineered, not rounded. */
  --radius:     2px;
  --radius-sm:  1px;
  --radius-lg:  3px;
  --bevel:      7px;          /* corner-cut depth for the "sharp point" motif */

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.4);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.55);
  --shadow-lg: 0 22px 60px rgba(0,0,0,0.65);
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sharp: cubic-bezier(0.16, 0.9, 0.2, 1); /* snappier, more mechanical */

  --nav-h: 58px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.022em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--alt { background: var(--surface-alt); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
/* Leading tick — reads like an instrument label, not a subtitle.
   inline-block keeps any <br> inside the eyebrow wrapping normally. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 0.7rem;
  background: var(--accent);
  vertical-align: middle;
}

.section-head { max-width: 640px; margin: 0 auto clamp(2rem,4vw,3.5rem); text-align: center; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { color: var(--muted); margin-top: 0.75rem; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  border-radius: 0;
  /* Cut bottom-right corner — the sharp, deliberate "point". */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, 0 100%);
  background: var(--accent);
  color: var(--on-accent);
  transition: background .25s var(--ease-sharp), color .25s var(--ease-sharp),
              transform .25s var(--ease-sharp), filter .25s var(--ease-sharp);
}
/* drop-shadow (not box-shadow) so the glow follows the cut corner. */
.btn:hover { transform: translateY(-2px); filter: drop-shadow(0 8px 18px rgba(95,230,255,0.22)); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
  /* Reserve the cut corner for the filled primary CTA; outline buttons
     stay crisp squares so no diagonal reads as an unfinished notch. */
  clip-path: none;
}
.btn--ghost:hover { background: var(--ink); color: var(--on-accent); border-color: var(--ink); filter: none; }

.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ===================================================================
   NAVIGATION  (injected by components.js)
   =================================================================== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  /* Desktop keeps the original floating look at the very top of the page,
     then firms into a frosted bar once scrolled (.is-scrolled). On mobile
     it's always a frosted bar — see the responsive block below. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), height .3s var(--ease);
}
/* Once the page leaves the top, firm the bar up for contrast AND slim it down. */
.site-nav.is-scrolled {
  height: 46px;
  background: rgba(4, 7, 12, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(150, 200, 230, 0.18);
}
/* Keep the nav legible even where backdrop-filter is unsupported. */
.site-nav .brand,
.nav-links a,
.cart-btn { text-shadow: 0 1px 14px rgba(2, 5, 10, 0.6); }
.site-nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.brand b { font-weight: 600; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding-block: 0.4rem;
  transition: color .25s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after,
.nav-links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-links a.is-active { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 1rem; }

/* Lock the page behind the open mobile menu (toggled by main.js). */
html.nav-open, html.nav-open body { overflow: hidden; }

.cart-btn {
  position: relative;
  background: none;
  border: none;
  padding: 0.4rem;
  color: var(--ink);
  display: inline-flex;
}
.cart-btn svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute;
  top: -2px; right: -4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 1px;
  background: var(--accent-warm);
  color: var(--on-accent);
  font-size: 0.62rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0);
  transition: transform .3s var(--ease);
}
.cart-count.is-visible { transform: scale(1); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 28px; height: 28px;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 3px; right: 3px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 8px; }
.nav-toggle span:nth-child(2) { top: 14px; }
.nav-toggle span:nth-child(3) { top: 20px; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  min-height: calc(100vh - var(--nav-h));
  /* Dynamic viewport unit: avoids the layout "jump" on mobile when the
     browser address bar slides in/out. Falls back to vh where unsupported. */
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero__inner { width: 100%; text-align: center; }
/* The entrance now lives in motion.css — the headline is split into words
   by main.js and rises one word at a time ([data-split]). Keeping the old
   blur-and-flash here as well made two animations fight over the same
   element, so the visual treatment stays and the animation left. */
.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.hero h1 em {
  color: var(--accent);
  text-shadow: 0 0 26px rgba(95, 230, 255, 0.32);
}
/* A one-line statement under the headline, above the buttons. */
.hero__sub {
  max-width: 46ch;
  margin: 1.5rem auto 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
}
/* Scoped to the sub-line only. A blanket `.hero p` rule also caught the
   eyebrow — which is a <p> — and out-specified its own font size. */
.hero .eyebrow { margin-bottom: 1.5rem; }
.hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }

/* ===================================================================
   PRODUCT GRID + CARDS
   =================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(95, 230, 255, 0.42); }

/* Engineered corner bracket — a precise L-mark that tightens on hover. */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  z-index: 4;
  width: 14px; height: 14px;
  border-top: 1px solid var(--tick);
  border-left: 1px solid var(--tick);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity .35s var(--ease-sharp), width .35s var(--ease-sharp), height .35s var(--ease-sharp);
}
.card:hover::before { opacity: 1; width: 22px; height: 22px; }

.card__media {
  aspect-ratio: 4 / 3;
  background: var(--surface-alt);
  overflow: hidden;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }

/* ---- Wireframe holograms (home featured grid) ---- */
.card__media.is-holo {
  position: relative;
  background:
    radial-gradient(115% 95% at 50% 58%, #06223a 0%, #04111f 52%, #010305 100%);
}
.card__holo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* soft projection glow behind the model */
.card__media.is-holo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 52% at 50% 56%, rgba(60, 200, 255, 0.22), transparent 72%);
}
/* fine CRT scanlines (static texture only) */
.card__media.is-holo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(110, 220, 255, 0.05) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}

.holo-hud {
  position: absolute;
  left: 0.85rem;
  bottom: 0.7rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(120, 225, 255, 0.85);
  pointer-events: none;
}
.holo-hud::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: #5fe6ff;
  box-shadow: 0 0 6px 1px rgba(95, 230, 255, 0.9);
  vertical-align: middle;
  animation: holo-blink 2.4s steps(1) infinite;
}
@keyframes holo-blink { 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  .holo-hud::before { animation: none; }
}

.card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.card__name { font-size: var(--fs-h3); margin-bottom: 0.2rem; }
.card__tag { font-size: var(--fs-small); color: var(--muted); margin-bottom: 1.1rem; }
.card__row {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.price { font-family: var(--font-display); font-size: 1.35rem; }
.price .soon { font-family: var(--font-body); font-size: var(--fs-small); color: var(--muted); letter-spacing: 0.08em; }

.card__add {
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  padding: 0.55rem 1.15rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background .25s var(--ease-sharp), color .25s var(--ease-sharp), border-color .25s var(--ease-sharp);
  white-space: nowrap;
}
.card__add:hover { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }

.badge {
  display: inline-block;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ===================================================================
   PRODUCT DETAIL
   =================================================================== */
.detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.detail__media {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-alt);
  aspect-ratio: 4 / 3;
}
.detail__media img { width: 100%; height: 100%; object-fit: cover; }
.detail__info { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.detail__info h1 { font-size: var(--fs-h1); margin-bottom: 0.5rem; }
.detail__tag { color: var(--muted); font-size: 1.05rem; margin-bottom: 1.5rem; }
.detail__price { font-family: var(--font-display); font-size: 2rem; margin-bottom: 1.5rem; }
.detail__desc { margin-bottom: 2rem; }
.detail__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 2.25rem; }

.specs { border-top: 1px solid var(--hairline); }
.specs dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 2rem; margin: 1.25rem 0 0; }
.specs dt { font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.specs dd { margin: 0; }

.back-link { font-size: var(--fs-small); letter-spacing: 0.08em; color: var(--muted); display: inline-flex; gap: 0.4rem; margin-bottom: 1.75rem; }
.back-link:hover { color: var(--ink); }

.notice {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-warm);
}

.empty-state { text-align: center; padding-block: clamp(3rem, 10vw, 7rem); }
.empty-state h1 { font-size: var(--fs-h1); margin-bottom: 1rem; }
.empty-state p { color: var(--muted); margin-bottom: 2rem; }

/* ===================================================================
   ABOUT
   =================================================================== */
.about-hero { text-align: center; max-width: 760px; margin-inline: auto; }
.about-hero h1 { font-size: var(--fs-h1); margin-bottom: 1.25rem; }
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 720px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.about-card h3 { font-size: var(--fs-h3); margin-bottom: 0.75rem; }
.about-card p { color: var(--muted); }

/* ---- The combination highlight (about page) ---- */
.about-combine {
  max-width: 720px;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
  text-align: center;
  padding: clamp(1.6rem, 4vw, 2.5rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(11, 18, 28, 0.42);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
}
.about-combine .eyebrow { margin-bottom: 0.6rem; }
.about-combine h3 { font-size: var(--fs-h2); margin-bottom: 1rem; }
.about-combine p { color: var(--muted); max-width: 58ch; margin-inline: auto; }
.about-figure { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); }
.about-figure img { width: 100%; height: 100%; object-fit: cover; }

/* ===================================================================
   CONTACT
   =================================================================== */
.contact-wrap { max-width: 560px; margin-inline: auto; text-align: center; } /* legacy — unused since the contact page was rebuilt */
.contact-wrap h1 { font-size: var(--fs-h1); margin-bottom: 1rem; }
.contact-wrap > p { color: var(--muted); margin-bottom: 2.5rem; }
.contact-list { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; gap: 0.9rem; }
.contact-list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  text-align: left;
}
.contact-list a:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.contact-list svg { width: 22px; height: 22px; flex-shrink: 0; }
.contact-list .c-label { font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display: block; }
.contact-list .c-value { font-size: 1.05rem; }

/* ===================================================================
   FOOTER  (injected by components.js)
   =================================================================== */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
}
.site-footer .brand { font-size: 1rem; }
.footer-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; font-size: var(--fs-small); color: var(--muted); }
.footer-meta a:hover { color: var(--ink); }

/* ===================================================================
   CART DRAWER + TOAST
   =================================================================== */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: var(--overlay);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
  z-index: 200;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0;
  height: 100%; width: min(380px, 90vw);
  background: var(--bg);
  z-index: 201;
  transform: translateX(100%);
  transition: transform .4s var(--ease);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.drawer.is-open { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
.drawer__head h2 { font-size: var(--fs-h3); }
.drawer__close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--muted); }
.drawer__close:hover { color: var(--ink); }
.drawer__body { flex: 1; overflow-y: auto; padding: 1.25rem var(--gutter); }
.drawer__foot { padding: 1.25rem var(--gutter); border-top: 1px solid var(--hairline); }

.cart-line { display: flex; gap: 1rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--hairline); }
.cart-line:last-child { border-bottom: none; }
.cart-line img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-line__info { flex: 1; min-width: 0; }
.cart-line__name { font-size: 0.95rem; }
.cart-line__meta { font-size: var(--fs-small); color: var(--muted); }
.cart-line__remove { background: none; border: none; color: var(--muted); font-size: 0.85rem; }
.cart-line__remove:hover { color: var(--ink); }
.cart-empty { color: var(--muted); text-align: center; padding-block: 3rem; }

.toast {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translate(-50%, 150%);
  background: var(--ink);
  color: var(--on-accent);
  padding: 0.85rem 1.4rem;
  border-radius: 2px;
  border-left: 2px solid var(--accent);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-md);
  z-index: 300;
  transition: transform .45s var(--ease);
  white-space: nowrap;
}
.toast.is-visible { transform: translate(-50%, 0); }

/* ===================================================================
   SCROLL-IN ANIMATION
   =================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  transition: opacity .5s var(--ease-sharp), transform .5s var(--ease-sharp), filter .5s var(--ease-sharp);
}
.reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 860px) {
  .detail { grid-template-columns: 1fr; }
  .detail__info { position: static; }
}

/* ---- Tablet / mobile: collapsed nav ---- */
@media (max-width: 720px) {
  .nav-toggle { display: block; }

  /* Always a visible frosted bar on mobile — content sits right beneath
     it, so it can never be allowed to disappear into the scene. */
  .site-nav {
    background: rgba(4, 7, 12, 0.6);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: rgba(150, 200, 230, 0.12);
  }
  .site-nav.is-scrolled { background: rgba(4, 7, 12, 0.82); }

  /* Larger, finger-friendly tap targets for the cart + menu buttons. */
  .nav-actions { gap: 0.5rem; }
  .cart-btn { padding: 0.55rem; }

  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Frosted dropdown that matches the bar, with a solid floor so the
       links never wash out over the moving scene behind them. */
    background: rgba(6, 10, 18, 0.92);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--hairline);
    padding: 0.25rem var(--gutter) 1rem;
    transform: translateY(-115%);
    transition: transform .4s var(--ease);
    box-shadow: var(--shadow-md);
  }
  .nav-links.is-open { transform: translateY(0); }
  .nav-links li { width: 100%; border-bottom: 1px solid rgba(150, 200, 230, 0.07); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a {
    display: block;
    width: 100%;
    padding-block: 0.95rem;
    font-size: 1rem;
    color: var(--ink);
  }
  .nav-links a::after { display: none; }

  /* Hide the scroll-readout on small screens — keep only the thin
     scroll-progress line up top. */
  .hud__readout { display: none; }
}

/* ---- Phones: tighten rhythm + keep everything inside the viewport ---- */
@media (max-width: 540px) {
  /* Hero CTAs stack to full-width pills so they never crowd or clip. */
  .hero__cta { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .hero__cta .btn { width: 100%; }

  /* Let the toast wrap instead of running off-screen on narrow phones. */
  .toast {
    white-space: normal;
    text-align: center;
    max-width: calc(100vw - 2rem);
    left: 1rem;
    right: 1rem;
    transform: translateY(150%);
  }
  .toast.is-visible { transform: translateY(0); }

  /* Roomier card padding reads better at phone width. */
  .card__body { padding: 1.2rem 1.25rem 1.4rem; }

  /* Product detail actions go full-width so buttons don't squeeze. */
  .detail__actions { flex-direction: column; align-items: stretch; }
  .detail__actions .btn { width: 100%; }

  /* Specs: stack label over value instead of a cramped two-column grid. */
  .specs dl { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .specs dt { margin-top: 0.85rem; }
  .specs dd { margin-bottom: 0.25rem; }
}

/* ===================================================================
   REDUCED MOTION
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ===================================================================
   BACKDROP  (assets/js/starfield.js)
   -------------------------------------------------------------------
   A fixed full-viewport star field sits behind all content and dollies
   forward as the page scrolls, so depth is felt everywhere rather than
   only in the hero. It is a field and nothing else — the wireframe
   models that once flew through it were cut for competing with the
   type. Do not put objects back in it.
   =================================================================== */

/* Deep base behind the canvas; the canvas itself is the visible
   backdrop, so the body must be transparent for it to show. */
html { background: var(--bg); }
body { background: transparent; }

#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;          /* behind the legibility veil and all content */
  display: block;
  pointer-events: none; /* never intercept scroll / clicks */
}

/* Legibility veil — a soft vignette between the field and the words.
   Keeps the centre open (full depth) while grounding the edges. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(125% 120% at 50% 32%, transparent 46%, rgba(3, 6, 12, 0.30) 100%),
    linear-gradient(180deg, rgba(3, 6, 12, 0.12) 0%, transparent 18%, transparent 72%, rgba(3, 6, 12, 0.26) 100%);
}

/* Hero stays transparent so the world reads at full depth, with a
   little extra legibility halo directly behind the headline. */
.hero { background: transparent; }
.hero__inner { position: relative; z-index: 1; }
.hero h1,
.hero p { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45); }
.section-head h2 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }

/* Content bands stay light so the wireframe world reads through them — just a
   faint tint + soft blur for a subtle difference, not a dark fill. */
.section--alt {
  background: rgba(7, 12, 20, 0.22);
  backdrop-filter: blur(5px) saturate(125%);
  -webkit-backdrop-filter: blur(5px) saturate(125%);
  border-block: 1px solid rgba(150, 200, 230, 0.06);
}

/* Cards read as glass panels suspended over the field. */
.card {
  background: rgba(11, 18, 28, 0.62);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.card:hover { background: rgba(15, 24, 38, 0.76); }

/* About cards + contact links pick up the same frosted treatment. */
.contact-list a {
  background: rgba(11, 18, 28, 0.58);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

/* Footer floats above the world too. */
.site-footer {
  background: rgba(6, 11, 18, 0.62);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

/* Scroll cue — a thin "dive in" prompt anchored to the hero. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 1;
  pointer-events: none;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, rgba(95, 230, 255, 0.9), transparent);
  animation: cue-fall 2.4s var(--ease) infinite;
}
@keyframes cue-fall {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  35%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  70%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue::after { animation: none; }
}

/* ===================================================================
   HUD  (injected by components.js, driven by initHud() in main.js)
   -------------------------------------------------------------------
   A minimal instrument layer over the whole viewport: a hairline
   scroll-progress bar, a live callout naming the craft you're flying
   past, and a scroll readout. All faint, mono, and click-through.
   =================================================================== */
.hud {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.hud__progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}
#hud-bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #5fe6ff, #d6f6ff);
  box-shadow: 0 0 8px rgba(95, 230, 255, 0.6);
  transition: transform .12s linear;
}

.hud__readout {
  position: absolute;
  right: var(--gutter);
  bottom: 1.4rem;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  opacity: 0.62;
}

@media (prefers-reduced-motion: reduce) {
  #hud-bar { transition: none; }
}

/* ===================================================================
   PRODUCT CARDS — spec-sheet detailing
   =================================================================== */
.price,
.detail__price,
.detail__price + * { font-variant-numeric: tabular-nums; }

/* Index tag (01, 02 …) */
.card__index {
  position: absolute;
  top: 1rem;
  left: 1.15rem;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  color: rgba(245, 245, 243, 0.7);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* Thin accent rule that draws in along the card top on hover */
.card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, #5fe6ff, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
  z-index: 3;
}
.card:hover::after { transform: scaleX(1); }

.card__add { display: inline-flex; align-items: center; }

/* ===================================================================
   MEDIA PLACEHOLDERS — replace the old product photos with a clean
   cyan reticle on a dark panel (matches the wireframe holograms).
   =================================================================== */
.card__media.is-placeholder,
.detail__media.is-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(115% 95% at 50% 58%, #06223a 0%, #04111f 52%, #010305 100%);
}
.card__media.is-placeholder::after,
.detail__media.is-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(110, 220, 255, 0.05) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
.reticle {
  width: 42%;
  max-width: 130px;
  color: rgba(120, 225, 255, 0.5);
  filter: drop-shadow(0 0 6px rgba(95, 230, 255, 0.35));
}

/* Detail media frame holds either a hologram canvas or a placeholder. */
.detail__media { position: relative; }
.detail__media.is-holo {
  background: radial-gradient(115% 95% at 50% 58%, #06223a 0%, #04111f 52%, #010305 100%);
}

/* Cart line thumbnail (no photos) */
.cart-line__thumb {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: radial-gradient(120% 120% at 50% 40%, #0a2336, #04111f);
  border: 1px solid var(--hairline);
}

/* ===================================================================
   BUILD PACKAGES  (shop.html#packages)
   =================================================================== */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: stretch;
}
.package {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.85rem 1.6rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(11, 18, 28, 0.62);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.package:hover {
  transform: translateY(-4px);
  border-color: rgba(95, 230, 255, 0.3);
  box-shadow: var(--shadow-md);
}
.package__head {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--hairline);
}
.package__badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(95, 230, 255, 0.35);
  border-radius: 0;
  padding: 0.22rem 0.72rem;
}
.package__name { font-size: var(--fs-h3); }
.package__price {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-variant-numeric: tabular-nums;
}
.package__blurb { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.package__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  flex: 1;
}
.package__list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: var(--fs-small);
  color: var(--ink);
}
.package__list li::before {
  content: "›";
  position: absolute;
  left: 0.1rem;
  color: var(--accent);
}
.package .btn { margin-top: 0.5rem; }

/* ===================================================================
   INCLUDED WITH EVERY BUILD  (shop.html)
   =================================================================== */
.included {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(0.9rem, 2.2vw, 1.5rem);
}
.included li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(11, 18, 28, 0.5);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.included li:hover { border-color: rgba(95, 230, 255, 0.28); transform: translateY(-2px); }
.included svg {
  width: 26px; height: 26px;
  flex-shrink: 0;
  color: var(--accent);
  filter: drop-shadow(0 0 5px rgba(95, 230, 255, 0.4));
}
.included__title {
  display: block;
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
  color: var(--ink);
}
.included__desc {
  display: block;
  font-size: var(--fs-micro);
  color: var(--muted);
  margin-top: 0.15rem;
}

/* Highlighted build-walkthrough video (shop.html) */
.build-video { margin: clamp(1.5rem, 4vw, 2.75rem) auto 0; max-width: 760px; }
.build-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-alt);
  box-shadow: var(--shadow-md);
}
.build-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.build-video figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* One-line reassurance on each product detail page */
.detail__included {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail__included b { color: var(--accent); font-weight: 400; }

/* ===================================================================
   ORDER MODAL  (build packages → main.js)
   =================================================================== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--overlay);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
  z-index: 210;
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }

.order-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -46%);
  width: min(440px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(1.6rem, 4vw, 2.25rem);
  background: rgba(11, 18, 28, 0.94);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(95, 230, 255, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 60px rgba(40, 160, 210, 0.15);
  z-index: 211;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s var(--ease);
}
.order-modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.order-modal__close {
  position: absolute; top: 0.8rem; right: 1rem;
  background: none; border: none; color: var(--muted);
  font-size: 1.6rem; line-height: 1;
}
.order-modal__close:hover { color: var(--ink); }
.order-modal__title { font-size: var(--fs-h3); margin: 0.2rem 0 0.3rem; }
.order-modal__price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: 0 0 1.25rem;
}

.order-form { display: grid; gap: 0.85rem; }
.order-field { display: grid; gap: 0.35rem; }
.order-field > span {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.order-field input,
.order-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink);
  background: rgba(4, 7, 12, 0.6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  resize: vertical;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.order-field input:focus,
.order-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(95, 230, 255, 0.15);
}
.order-form__note {
  font-size: var(--fs-micro);
  color: var(--muted);
  line-height: 1.5;
  margin: 0.3rem 0 0;
}
.order-form .btn { margin-top: 0.3rem; }

/* ===================================================================
   ABOUT — portrait treatment
   A headshot framed as part of the system: layered cyan rings, a soft
   glow, faint scanlines, and a mono ID caption. Not "just pasted".
   =================================================================== */
.about-hero--split {
  max-width: 980px;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}
.about-hero--split h1 { margin-bottom: 1.25rem; }

.portrait { position: relative; margin: 0; }
.portrait__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: radial-gradient(120% 100% at 50% 30%, #0a2336, #04111f);
  box-shadow:
    0 0 0 1px rgba(95, 230, 255, 0.32),   /* crisp inner ring */
    0 0 0 7px rgba(95, 230, 255, 0.06),   /* faint matte ring */
    0 26px 70px rgba(0, 0, 0, 0.6),       /* depth */
    0 0 55px rgba(40, 160, 210, 0.20);    /* cyan glow */
}
.portrait__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.04) saturate(0.95);
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.portrait:hover .portrait__frame img { transform: scale(1.045); filter: contrast(1.06) saturate(1); }
/* cyan light from above + fine scanlines so it sits in the world */
.portrait__frame::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(95, 230, 255, 0.14), transparent 60%);
  mix-blend-mode: screen;
}
.portrait__scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(110, 220, 255, 0.045) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
.portrait__cap {
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-mono);
}
.portrait__name {
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.portrait__role {
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 640px) {
  .about-hero--split {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    max-width: 460px;
  }
  .portrait { width: min(280px, 78%); }
}

/* =================================================================
   CHECKOUT — policy page, order terms, consent. Added 2026-09-03.
   Uses the existing ice/cyan tokens; introduces no new colours.
   ================================================================= */
.policy { max-width: 68ch; }
.policy h1 { font-size: var(--fs-h1); margin: 0 0 .75rem; }
.policy h2 {
  font-size: var(--fs-h3); font-family: var(--font-display); font-weight: 400;
  letter-spacing: -.015em; margin: 2.75rem 0 .75rem;
  padding-top: 1.25rem; border-top: 1px solid var(--hairline);
}
.policy p, .policy li { color: var(--muted); }
.policy b, .policy a { color: var(--ink); }
.policy a { text-decoration: underline; text-underline-offset: .18em;
            text-decoration-color: var(--hairline-strong); }
.policy a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.policy ul, .policy ol { padding-left: 1.15rem; }
.policy li { margin-bottom: .5rem; }
.policy .lead { color: var(--ink); }

.policy-table { list-style: none; padding: 0; margin: 1rem 0 1.5rem;
                border-top: 1px solid var(--hairline); }
.policy-table li {
  display: flex; justify-content: space-between; gap: 1.5rem; margin: 0;
  padding: .7rem 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-small);
}
.policy-table .k { font-family: var(--font-mono); font-size: var(--fs-micro);
                   letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.policy-table .v { color: var(--ink); text-align: right; }

.policy-steps { counter-reset: step; list-style: none; padding-left: 0; }
.policy-steps li { position: relative; padding-left: 2.25rem; margin-bottom: .9rem; }
.policy-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: .05rem;
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  border: 1px solid var(--hairline-strong); color: var(--accent);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
}
.policy-updated { font-family: var(--font-mono); font-size: var(--fs-micro);
                  letter-spacing: .08em; color: var(--muted); margin-top: 3rem; }

/* Order modal — lead time / shipping summary */
.order-terms { list-style: none; padding: 0; margin: 0 0 1.25rem;
               border-top: 1px solid var(--hairline); }
.order-terms li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-small);
}
.order-terms span { font-family: var(--font-mono); font-size: var(--fs-micro);
                    letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.order-terms b { color: var(--ink); font-weight: 400; text-align: right; }

.order-consent { display: flex; gap: .6rem; align-items: flex-start;
                 margin: .25rem 0 1rem; font-size: var(--fs-small); color: var(--muted); }
.order-consent input { margin-top: .28rem; accent-color: var(--accent); flex: 0 0 auto; }
.order-consent a { color: var(--ink); text-decoration: underline;
                   text-underline-offset: .18em; }
.order-consent a:hover { color: var(--accent); }
.order-consent[hidden] { display: none; }


/* ===================================================================
   ELEVATION PASS — the sophistication layer
   -------------------------------------------------------------------
   Everything below refines the existing system rather than replacing
   it: a bigger display size, an editorial serif for emphasis, a real
   glass-panel language, and the components the Software Solutions
   page needs. Motion lives in motion.css, never here.
   =================================================================== */

/* ---------- Editorial emphasis ----------
   The serif italic is a PAGE-OPENER device only: it belongs at display
   and h1 scale, where the contrast with Space Grotesk reads as editorial.
   Applied to an h2 or h3 it just looks like the wrong font fell in, so
   below h1 the emphasis is carried by colour and weight instead. */
h1 em, .display em, .accent-serif {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  /* The serif has a larger x-height than Space Grotesk, so it is nudged
     up a touch to sit on the same optical baseline. */
  font-size: 1.08em;
}

/* Sub-headline emphasis: same typeface, just lit. */
h2 em, h3 em, h4 em, p em, li em {
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
}

/* A display headline — larger and tighter than h1, for page openers. */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
}
.display em { font-weight: 400; }

/* Gradient ink for a single emphasised word. Kept to one per page. */
.grad {
  background: linear-gradient(96deg, var(--ink) 8%, var(--accent) 52%, var(--accent-deep) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Section heads ----------
   The centred head still exists; this adds a left-aligned editorial
   variant with the rule that draws itself in (motion.css [data-draw]). */
.section-head--left { text-align: left; margin-inline: 0; max-width: 760px; }
.section-head--wide { max-width: 820px; }
.section-head h2 em { font-size: 1.05em; }

.rule {
  display: block;
  height: 1px;
  width: 100%;
  border: 0;
  margin: clamp(2.5rem, 6vw, 4.5rem) 0;
  background: linear-gradient(90deg, var(--hairline-strong), transparent 72%);
}

/* ---------- Glass panel ----------
   The one surface treatment for content that floats over the 3D world. */
.glass {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

/* Engineered corner ticks — four short marks instead of a heavy frame.
   Applied to any .ticked surface. */
.ticked { position: relative; }
.ticked::before,
.ticked::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--tick);
  opacity: 0.7;
  pointer-events: none;
}
.ticked::before { top: -1px;    left: -1px;  border-right: 0; border-bottom: 0; }
.ticked::after  { bottom: -1px; right: -1px; border-left: 0;  border-top: 0;    }

/* ---------- Content stacking ----------
   Content sits above the star-field canvas, which is at z-index -2.

   There is deliberately no grain overlay. A fixed, full-viewport
   pseudo-element with mix-blend-mode: overlay forces the compositor to
   re-blend every text layer beneath it on each scroll frame, and the
   result was visible shimmer on the type. Texture is not worth
   unreadable headlines. */
main, header, footer { position: relative; z-index: 1; }


/* ===================================================================
   SOFTWARE SOLUTIONS PAGE
   =================================================================== */

/* ---- Page opener ---- */
.svc-hero {
  padding-block: clamp(5rem, 14vh, 9rem) clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
}
.svc-hero__inner { max-width: 900px; }
.svc-hero .display { margin-bottom: 1.5rem; }
.svc-hero__lead { max-width: 56ch; font-size: clamp(1rem, 1.5vw, 1.18rem); color: var(--muted); }
.svc-hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.25rem; }

/* ---- Services: an asymmetric bento, not a row of equal boxes ---- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.15rem);
}
.svc-card {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
/* The first card is the flagship — it takes the full width and reads
   like a statement rather than an item in a list. */
.svc-card--wide { grid-column: span 6; }
.svc-card--third { grid-column: span 2; }
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 0% 0%, var(--accent-soft), transparent 58%);
  opacity: 0;
  transition: opacity var(--m-slow, .48s) var(--m-ease, ease);
  pointer-events: none;
}
.svc-card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-strong);
  box-shadow: var(--m-lift, var(--shadow-md));
}
.svc-card:hover::before { opacity: 1; }
.svc-card svg { width: 26px; height: 26px; color: var(--accent); stroke-width: 1.2; }
.svc-card h3 { font-size: var(--fs-h3); }
.svc-card p { color: var(--muted); font-size: var(--fs-small); margin: 0; }

.svc-card__no {
  position: absolute;
  top: clamp(1.5rem, 2.6vw, 2.25rem);
  right: clamp(1.5rem, 2.6vw, 2.25rem);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--muted);
  opacity: 0.5;
}

/* Tag chips listing what a service actually covers. */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0; padding: 0; list-style: none; }
.chips li {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline);
  padding: 0.25rem 0.55rem;
  transition: border-color var(--m-mid, .28s) var(--m-ease, ease), color var(--m-mid, .28s) var(--m-ease, ease);
}
.svc-card:hover .chips li { border-color: var(--hairline-strong); color: var(--ink); }

/* ---- Alternating feature rows ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split + .split { margin-top: clamp(3.5rem, 8vw, 6.5rem); }
.split--flip .split__text { order: 2; }
.split__text h3 { font-size: var(--fs-h2); margin-bottom: 1rem; }
.split__text p { color: var(--muted); }
.split__list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.55rem; }
.split__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-small);
  color: var(--muted);
}
.split__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
}

/* ---- Browser-chrome mock: the visual for "we build the website" ---- */
.window {
  border: 1px solid var(--hairline);
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.window__bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--hairline);
  background: rgba(6, 11, 19, 0.7);
}
.window__dots { display: flex; gap: 0.35rem; }
.window__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--hairline-strong); }
.window__url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--hairline);
  padding: 0.22rem 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.window__body { padding: clamp(1.1rem, 2.4vw, 1.8rem); display: grid; gap: 0.75rem; }
/* Skeleton bars that stand in for a page layout without faking a
   screenshot of work that does not exist. */
.skel { height: 8px; background: linear-gradient(90deg, rgba(150,200,230,.20), rgba(150,200,230,.06)); }
.skel--title { height: 18px; width: 62%; background: linear-gradient(90deg, var(--accent), transparent 80%); opacity: .75; }
.skel--wide { width: 100%; }
.skel--mid { width: 84%; }
.skel--short { width: 46%; }
.skel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.5rem; }
.skel-box { aspect-ratio: 4 / 3; border: 1px solid var(--hairline); background: rgba(150,200,230,.05); }

/* ---- Process steps ---- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  counter-reset: s;
}
.step {
  padding: clamp(1.35rem, 2.2vw, 1.85rem);
  border: 1px solid var(--hairline);
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  position: relative;
}
.step:hover { border-color: var(--hairline-strong); transform: translateY(-3px); }
.step::before {
  counter-increment: s;
  content: "0" counter(s);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.step h4 { font-size: 1rem; margin-bottom: 0.5rem; }
.step p { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.step__when {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
}

/* ---- Pricing tiers ---- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.85rem, 1.8vw, 1.35rem);
  align-items: stretch;
}
.tier {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  border: 1px solid var(--hairline);
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  position: relative;
}
.tier:hover { border-color: var(--hairline-strong); transform: translateY(-3px); box-shadow: var(--m-lift, var(--shadow-md)); }
.tier--feature {
  border-color: rgba(95, 230, 255, 0.38);
  background: linear-gradient(180deg, rgba(95, 230, 255, 0.055), var(--glass) 42%);
}
.tier__badge {
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 0.28rem 0.7rem;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tier__name { font-size: var(--fs-h3); }
.tier__for { font-size: var(--fs-small); color: var(--muted); margin: 0.15rem 0 0; }
.tier__price {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tier__price small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.5rem;
}
.tier__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; flex: 1; }
.tier__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-small);
  color: var(--muted);
}
.tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 5px;
  border-left: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(-45deg);
}
.tier .btn { margin-top: 0.5rem; }

.pricing-note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--muted);
}
.pricing-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.pricing-note a:hover { color: var(--accent); }

/* ---- Outcome / capability stats ---- */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.proof {
  background: rgba(7, 12, 20, 0.72);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  text-align: center;
}
.proof:hover { background: rgba(12, 20, 32, 0.82); }
.proof b {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.proof span {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Stack strip ---- */
.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}
.stack li {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline);
  padding: 0.4rem 0.75rem;
  transition: color var(--m-mid, .28s) var(--m-ease, ease), border-color var(--m-mid, .28s) var(--m-ease, ease);
}
.stack li:hover { color: var(--accent); border-color: var(--hairline-strong); }

/* ---- FAQ (native <details>, no JS) ---- */
.faq { max-width: 780px; margin-inline: auto; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink);
  transition: color var(--m-mid, .28s) var(--m-ease, ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 1.5rem;
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  transform: rotate(45deg);
  transition: transform var(--m-mid, .28s) var(--m-ease, ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { color: var(--muted); font-size: var(--fs-small); padding: 0 2.5rem 1.35rem 0; margin: 0; }

/* ---- Closing CTA band ---- */
.cta-band {
  text-align: center;
  padding: clamp(2.75rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(95, 230, 255, 0.09), transparent 62%),
    var(--glass-strong);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  position: relative;
}
.cta-band h2 { font-size: var(--fs-h1); margin-bottom: 1rem; }
.cta-band p { color: var(--muted); max-width: 52ch; margin-inline: auto; }
.cta-band__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

/* ===================================================================
   SOFTWARE PAGE — RESPONSIVE
   =================================================================== */
@media (max-width: 980px) {
  .svc-card, .svc-card--third { grid-column: span 3; }
  .svc-card--wide { grid-column: span 6; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .tier-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__text { order: 0; }
}
@media (max-width: 620px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card, .svc-card--wide, .svc-card--third { grid-column: span 1; }
  .steps { grid-template-columns: 1fr; }
  .svc-hero__cta { flex-direction: column; align-items: stretch; }
  .svc-hero__cta .btn { width: 100%; }
  .cta-band__actions { flex-direction: column; align-items: stretch; }
  .cta-band__actions .btn { width: 100%; }
}

/* Plan handoff line on contact.html (?plan=…). The generic .notice is an
   uppercase micro-label — fine for a two-word status, unreadable for a
   sentence — so the carried-over plan gets its own readable treatment. */
#plan-notice {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 46ch;
  margin: 0 auto 2rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--accent);
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  text-align: left;
}
#plan-notice b { color: var(--ink); font-weight: 400; }
#plan-notice[hidden] { display: none; }

/* ===================================================================
   ABOUT — tenets list
   A numbered column of principles beside the prose. Reads as a spec
   sheet rather than another paragraph, which is the point: it is the
   part of the page a skimming visitor actually stops on.
   =================================================================== */
.tenets {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: tenet;
  border-top: 1px solid var(--hairline);
}
.tenets li {
  position: relative;
  padding: 1.15rem 0 1.15rem 2.6rem;
  border-bottom: 1px solid var(--hairline);
}
.tenets li::before {
  counter-increment: tenet;
  content: "0" counter(tenet);
  position: absolute;
  left: 0;
  top: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--accent);
}
.tenets b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}
.tenets span { color: var(--muted); font-size: var(--fs-small); }

/* ===================================================================
   CONTACT — a switchboard page
   Deliberately unlike About: two big routes in, then channels and
   expectations side by side. Nothing here is a centred column of prose.
   =================================================================== */
.contact-page { padding-top: clamp(4rem, 11vh, 7rem); }

.contact-top { max-width: 860px; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.contact-top .display { margin-bottom: 1.25rem; }
.contact-top__lead { max-width: 56ch; color: var(--muted); font-size: clamp(0.98rem, 1.4vw, 1.12rem); }

/* --- the two routes --- */
.route-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.85rem, 1.8vw, 1.35rem);
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.route {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.75rem, 3vw, 2.6rem);
  border: 1px solid var(--hairline);
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  overflow: hidden;
  transition: transform var(--m-mid, .28s) var(--m-ease, ease),
              border-color var(--m-mid, .28s) var(--m-ease, ease),
              box-shadow var(--m-mid, .28s) var(--m-ease, ease);
}
.route::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 0% 0%, var(--accent-soft), transparent 58%);
  opacity: 0;
  transition: opacity var(--m-slow, .48s) var(--m-ease, ease);
  pointer-events: none;
}
.route:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-strong);
  box-shadow: var(--m-lift, var(--shadow-md));
}
.route:hover::before { opacity: 1; }
.route__no {
  position: absolute;
  top: clamp(1.75rem, 3vw, 2.6rem);
  right: clamp(1.75rem, 3vw, 2.6rem);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--muted);
  opacity: 0.5;
}
.route svg {
  width: 28px; height: 28px;
  color: var(--accent);
  stroke-width: 1.2;
  transition: transform var(--m-slow, .48s) var(--m-ease, ease);
}
.route:hover svg { transform: translateY(-2px) scale(1.05); }
.route h2 { font-size: var(--fs-h3); }
.route p { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.route__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
}
.route__go {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  transition: transform var(--m-mid, .28s) var(--m-ease, ease);
}
.route:hover .route__go { transform: translateX(4px); }

/* --- channels + expectations --- */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* This page owns its contact list; reset the old centred-column rules. */
.contact-page .contact-list { margin-bottom: 0; }

.next-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: ns;
  border-top: 1px solid var(--hairline);
}
.next-steps li {
  position: relative;
  padding: 0.95rem 0 0.95rem 2.4rem;
  border-bottom: 1px solid var(--hairline);
}
.next-steps li::before {
  counter-increment: ns;
  content: counter(ns);
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 1.45rem; height: 1.45rem;
  display: grid; place-items: center;
  border: 1px solid var(--hairline-strong);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
}
.next-steps b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 0.97rem; }
.next-steps span { color: var(--muted); font-size: var(--fs-small); }

.contact-loc {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
}

@media (max-width: 860px) {
  .route-grid,
  .contact-split { grid-template-columns: 1fr; }
}

/* The route the visitor arrived on, when they came from a pricing tier.
   Marked rather than merely relabelled, so the eye lands on it first. */
.route.is-picked {
  border-color: rgba(95, 230, 255, 0.42);
  background: linear-gradient(180deg, rgba(95, 230, 255, 0.06), var(--glass) 46%);
}

/* A tier CTA that has become a live Stripe checkout. Marked so the
   difference between "pay now" and "send an enquiry" is visible before
   the click, not after it. */
.tier .btn.is-checkout::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 0.1rem;
  flex: 0 0 auto;
  background: currentColor;
  /* A padlock, so the button reads as payment rather than navigation. */
  -webkit-mask: var(--lock) center / contain no-repeat;
  mask: var(--lock) center / contain no-repeat;
}
:root {
  --lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.pricing-note__secure { display: block; margin-top: 0.5rem; }
.pricing-note__secure b { color: var(--ink); font-weight: 400; }