/* =====================================================================
   Zak Novak , portfolio
   TIDELIGHT INTERFACE: sea glass floating over a frosted sheet

   Palette + material authority: design-tokens.css, loaded first.

   THE ONE IDEA THIS FILE IS BUILT ON
   Three layers, and the difference between them is the whole design.
     layer 0  .env     terrain and light. Circuitry, caustics, gradients.
     layer 1  .stage   a thick parent sheet resting above it. Does the
                       backdrop work, so the environment refracts through.
     layer 2  .sg-*    smaller tinted glass floating above the sheet, with
                       its own rim light, interior tint and displaced shadow.
   A control that does not cast a shadow onto its parent is not floating.
   ===================================================================== */

/* ------------------------------- reset ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Layer 0 at page scale: a warm/cool tidal field with light entering
     from the corners. Everything else floats on this. */
  background:
    radial-gradient(58% 40% at 6% 2%, rgba(255, 142, 174, .5), transparent 62%),
    radial-gradient(52% 38% at 97% 9%, rgba(69, 217, 210, .46), transparent 60%),
    radial-gradient(56% 40% at 92% 43%, rgba(118, 87, 246, .34), transparent 62%),
    radial-gradient(50% 36% at 3% 46%, rgba(139, 183, 255, .42), transparent 60%),
    radial-gradient(60% 42% at 88% 88%, rgba(255, 142, 174, .34), transparent 64%),
    radial-gradient(54% 40% at 8% 94%, rgba(69, 217, 210, .34), transparent 62%),
    linear-gradient(154deg, #e4d8d3 0%, #eef0f3 38%, #c9d5e6 100%);
  background-attachment: fixed;
}
img, svg { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.shell {
  width: min(calc(100% - (2 * var(--page-gutter))), var(--page-max));
  margin-inline: auto;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-size-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

/* --------------------------- focus visibility ------------------------ */
/* Deliberately separate from every decorative glow on the page: a solid
   dark ring with a white halo, so it reads on aqua, violet, coral, dark
   media wells and pale glass alike. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-halo);
  border-radius: var(--radius-control);
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent-violet); color: var(--ink-inverse);
  font-weight: 600;
  padding: 14px 22px;
  border-radius: var(--radius-control);
}
.skip:focus { left: 14px; top: 14px; }

/* =====================================================================
   LAYER 0 , environment
   Terrain under the glass: circuit traces, caustic light pools. Blurred
   and desaturated so the trays have something to refract without the
   page turning into noise.
   ===================================================================== */
.env {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.env__caustic,
.env__caustic--alt {
  position: absolute; inset: -10%;
  background: url("../img/ui/sea-glass-caustic-overlay.svg") center / cover no-repeat;
  opacity: .8;
}
.env__caustic--alt { opacity: .62; transform: scaleX(-1) rotate(4deg); }
.env__circuits {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .85;
  filter: blur(.3px);
}
.env__circuits--l { left: 0; right: auto; width: clamp(120px, 18vw, 280px); }
.env__circuits--r { right: 0; left: auto; width: clamp(140px, 22vw, 320px); }
.env--quiet .env__circuits { opacity: .6; }

/* circuit primitives, regraded from neon to sea glass */
.trace path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: miter; opacity: .8; }
.trace .c-cyan    { stroke: var(--accent-aqua); }
.trace .c-purple  { stroke: var(--accent-violet); opacity: .66; }
.trace .c-blue    { stroke: var(--accent-blue); }
.trace .c-magenta { stroke: var(--accent-coral); opacity: .6; }
.trace .c-orange  { stroke: var(--accent-blue); opacity: .5; }
.trace--bus path  { stroke-width: 2.6; opacity: .72; }
.trace--fine path { stroke-width: 1; opacity: .44; }
.trace--pastel path { stroke-width: 1.4; opacity: .66; }

.node circle { fill: var(--canvas-cloud); stroke-width: 1.8; opacity: .85; }
.node .c-cyan { stroke: var(--accent-aqua); }
.node .c-purple { stroke: var(--accent-violet); }
.node .c-blue { stroke: var(--accent-blue); }
.node .c-magenta { stroke: var(--accent-coral); }
.node .c-orange { stroke: var(--accent-blue); }
.node--fine circle { stroke-width: 1; opacity: .3; }
.node--pastel circle { fill: var(--canvas-cloud); stroke-width: 1.4; opacity: .5; }

.chip rect { stroke-width: 1.6; }
.chip .c-cyan    { stroke: var(--accent-aqua);   fill: rgba(69, 217, 210, .08); }
.chip .c-purple  { stroke: var(--accent-violet); fill: rgba(118, 87, 246, .07); }
.chip .c-blue    { stroke: var(--accent-blue);   fill: rgba(139, 183, 255, .08); }
.chip .c-magenta { stroke: var(--accent-coral);  fill: rgba(255, 142, 174, .07); }
.chip .c-orange  { stroke: var(--accent-blue);   fill: rgba(139, 183, 255, .06); }
.chip__pin { fill: none; stroke-width: 1.4; opacity: .5; }
.chip--pastel rect { fill: rgba(255, 255, 255, .5); stroke-width: 1.3; opacity: .5; }
.chip--pastel .chip__pin { stroke-width: 1.2; opacity: .4; }

/* the twinkle survives, at a fraction of its old strength */
.spark circle { opacity: .4; animation: twinkle 6s ease-in-out infinite; }
.spark circle:nth-child(2n) { animation-delay: -1.9s; }
.spark circle:nth-child(3n) { animation-delay: -3.7s; }
@keyframes twinkle { 0%, 100% { opacity: .14; } 50% { opacity: .5; } }

/* =====================================================================
   LAYER 1 , parent glass
   Thick, calm, and doing all the backdrop work on the page.
   ===================================================================== */
section { position: relative; padding-block: var(--space-8); }
.hero { padding-top: clamp(6.5rem, 11vw, 9rem); }

.stage {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-tray);
  border: var(--border-hairline) solid var(--glass-parent-border);
  background:
    linear-gradient(168deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 38%, rgba(214, 226, 240, .2) 100%),
    var(--glass-parent-bg);
  box-shadow: var(--shadow-parent), 0 2px 0 rgba(255, 255, 255, .5) inset;
  -webkit-backdrop-filter: blur(30px) saturate(1.55);
  backdrop-filter: blur(30px) saturate(1.55);
  padding: clamp(1.75rem, 3.4vw, 3.25rem);
  overflow: hidden;
}
/* internal haze , keeps the sheet from reading as a flat white rectangle */
.stage::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 12% -8%, rgba(255, 255, 255, .6), transparent 58%),
    radial-gradient(90% 60% at 96% 108%, rgba(139, 183, 255, .16), transparent 62%);
}
/* the cool lower lip */
.stage::after {
  content: "";
  position: absolute; left: 4%; right: 4%; bottom: 0; height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--glass-parent-edge-cool) 22%, rgba(122, 152, 186, .5) 50%, var(--glass-parent-edge-cool) 78%, transparent);
}
.stage > * { position: relative; z-index: 1; }

.stage__head { max-width: var(--reading-width); margin-bottom: var(--space-6); }
.stage__lede {
  margin-top: var(--space-3);
  color: var(--ink-secondary);
  max-width: var(--reading-width);
}
.section-title {
  font-size: var(--font-size-section);
  line-height: var(--line-heading);
  color: var(--ink-primary);
}

/* =====================================================================
   LAYER 2 , floating sea glass
   Shared physics: rim light top-left, colour pooling bottom-right,
   displaced shadow beneath, and a caustic smear on the parent surface.
   ===================================================================== */
.sg {
  position: relative;
  border-radius: var(--radius-control);
  border: var(--border-hairline) solid var(--glass-pearl-edge);
  background: var(--glass-pearl-bg);
  box-shadow: var(--shadow-float);
  transform: var(--lift-rest);
  transition:
    transform var(--duration-medium) var(--ease-glass),
    box-shadow var(--duration-medium) var(--ease-glass),
    border-color var(--duration-medium) var(--ease-glass),
    background var(--duration-medium) var(--ease-glass);
}
/* convex top sheen */
.sg::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .1) 34%, transparent 62%);
}
/* the light pool this object throws onto the sheet below it */
.sg::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: -14px; height: 26px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  filter: blur(11px);
  opacity: .55;
  background: var(--pool, rgba(118, 87, 246, .3));
  transition: opacity var(--duration-medium) var(--ease-glass),
              bottom var(--duration-medium) var(--ease-glass);
}
.sg:hover { transform: var(--lift-hover); box-shadow: var(--shadow-float-hover); }
.sg:hover::after { opacity: .78; bottom: -18px; }
.sg:active { transform: var(--lift-pressed); box-shadow: var(--shadow-float); }
.sg:active::after { opacity: .4; bottom: -8px; }

/* tints , each is a distinct material, not one class with a hue swap */
.sg--aqua   { background: var(--glass-aqua-bg);   border-color: var(--glass-aqua-edge);   --pool: rgba(69, 217, 210, .42); }
.sg--violet { background: var(--glass-violet-bg); border-color: var(--glass-violet-edge); --pool: rgba(118, 87, 246, .42); color: var(--ink-inverse); }
.sg--coral  { background: var(--glass-coral-bg);  border-color: var(--glass-coral-edge);  --pool: rgba(255, 142, 174, .42); }
.sg--blue   { background: var(--glass-blue-bg);   border-color: var(--glass-blue-edge);   --pool: rgba(139, 183, 255, .42); }
.sg--pearl  { background: var(--glass-pearl-bg);  border-color: var(--glass-pearl-edge);  --pool: rgba(120, 140, 170, .26); }
/* milky reading surface , for text that has to be comfortable, not pretty */
.sg--milk   { background: var(--glass-reading-bg); border-color: var(--glass-reading-border); --pool: rgba(120, 140, 170, .2); }

/* --------------------------------- nav ------------------------------- */
.nav { position: absolute; inset: 0 0 auto 0; z-index: 60; }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.brand {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: 0 6px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.72rem, .95vw, .84rem);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.brand__name, .brand__role { white-space: nowrap; }
.brand__slash { color: var(--accent-violet); }
.brand__role { color: var(--ink-secondary); }

.nav__links { display: flex; gap: var(--space-2); }
.nav__links a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: var(--border-hairline) solid transparent;
  font-size: var(--font-size-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-primary);
  transition: background var(--duration-fast) var(--ease-glass),
              border-color var(--duration-fast) var(--ease-glass),
              box-shadow var(--duration-fast) var(--ease-glass);
}
.nav__links a:hover {
  background: var(--glass-pearl-bg);
  border-color: var(--glass-pearl-edge);
  box-shadow: var(--shadow-float);
}

.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer;
  border-radius: var(--radius-control);
  border: var(--border-hairline) solid var(--glass-pearl-edge);
  background: var(--glass-pearl-bg);
  box-shadow: var(--shadow-float);
}
.nav__toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink-primary); }
.nav__mobile {
  position: relative; z-index: 60;
  display: flex; flex-direction: column; gap: var(--space-1);
  margin: 0 var(--gutter);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  border: var(--border-hairline) solid var(--glass-parent-border);
  background: var(--glass-parent-bg-strong);
  box-shadow: var(--shadow-parent);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
}
.nav__mobile[hidden] { display: none; }
.nav__mobile a {
  display: flex; align-items: center;
  min-height: 48px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-control);
  font-size: var(--font-size-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nav__mobile a:hover { background: rgba(255, 255, 255, .5); }

/* ------------------------------- buttons ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border: var(--border-hairline) solid var(--glass-pearl-edge);
  border-radius: var(--radius-pill);
  background: var(--glass-pearl-bg);
  box-shadow: var(--shadow-float);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-size-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transform: var(--lift-rest);
  transition: transform var(--duration-medium) var(--ease-glass),
              box-shadow var(--duration-medium) var(--ease-glass),
              background var(--duration-medium) var(--ease-glass);
}
.btn--lg { min-height: 56px; padding: 0 var(--space-6); font-size: var(--font-size-body); text-transform: none; letter-spacing: .01em; }
.btn--violet {
  /* A flat wash across the whole face rather than a gradient tail: white on
     raw --accent-violet sits at 4.63:1, and the tail left most of the button
     at the undarkened value. This keeps the colour and buys real headroom. */
  background:
    linear-gradient(168deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(rgba(14, 8, 38, .2), rgba(14, 8, 38, .2)),
    var(--accent-violet);
  border-color: var(--glass-violet-edge);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-float), var(--glow-violet);
}
.btn--violet:hover { transform: var(--lift-hover); box-shadow: var(--shadow-float-hover), var(--glow-violet); }
.btn--pearl:hover { transform: var(--lift-hover); box-shadow: var(--shadow-float-hover); }
.btn--violet:active, .btn--pearl:active { transform: var(--lift-pressed); box-shadow: var(--shadow-float); }
.btn--aqua {
  background: linear-gradient(168deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 44%), var(--accent-aqua);
  border-color: var(--glass-aqua-edge);
  color: var(--ink-primary);
  box-shadow: var(--shadow-float), var(--glow-aqua);
}
.btn--aqua:hover { transform: var(--lift-hover); box-shadow: var(--shadow-float-hover), var(--glow-aqua); }

/* -------------------------------- hero ------------------------------- */
.stage--hero { padding-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr);
  gap: var(--space-4);
  align-items: end;
}
.hero__copy { align-self: center; padding-bottom: var(--space-4); }
.hero__title {
  margin-top: var(--space-3);
  font-size: clamp(2.9rem, 5.6vw, 5.1rem);
  line-height: var(--line-tight);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero__sub {
  margin-top: var(--space-4);
  max-width: 46ch;
  color: var(--ink-secondary);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.hero__figure { position: relative; margin-bottom: calc(var(--space-5) * -1); margin-right: calc(var(--space-4) * -1); }
/* Environmental lighting only. The photograph carries no filter of its
   own , the face, beard, skin and clothing are exactly as shot. Deleting
   this block returns the portrait to a bare cut-out. */
.hero__figure::before {
  content: "";
  position: absolute; inset: 2% -12% 16% -14%;
  z-index: 0;
  background:
    radial-gradient(44% 40% at 54% 26%, rgba(118, 87, 246, .34), transparent 68%),
    radial-gradient(56% 48% at 40% 62%, rgba(69, 217, 210, .26), transparent 66%),
    radial-gradient(32% 30% at 74% 54%, rgba(255, 142, 174, .26), transparent 70%);
  filter: blur(26px);
}
.hero__figure img {
  position: relative; z-index: 1;
  width: 100%; height: auto;
  /* Stops are percentages of the asset's own height and stay tied to its
     1122x1402 aspect ratio. Unchanged since the first build. */
  --fig-fade: linear-gradient(to bottom,
    #000 0%, #000 48%,
    rgba(0, 0, 0, .86) 58%,
    rgba(0, 0, 0, .56) 67%,
    rgba(0, 0, 0, .24) 74%,
    rgba(0, 0, 0, .06) 79%,
    transparent 84%);
  -webkit-mask-image: var(--fig-fade);
  mask-image: var(--fig-fade);
}

/* proof beads , small sea glass riding the lower edge of the hero sheet */
.beads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.bead {
  padding: var(--space-4);
  border-radius: var(--radius-control);
  border: var(--border-hairline) solid var(--glass-pearl-edge);
  background: var(--glass-pearl-bg);
  box-shadow: var(--shadow-float);
  position: relative;
}
.bead::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .7), transparent 52%);
}
.bead b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.bead span {
  display: block;
  margin-top: var(--space-2);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-secondary);
}
.bead--violet b { color: var(--accent-violet); }
.bead--aqua   b { color: #128e88; }
.bead--coral  b { color: #c94a72; }
.bead--blue   b { color: #3d6fbf; }

/* =====================================================================
   FEATURED PRODUCTS , the loudest thing after the hero
   ===================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
}
.product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: var(--border-hairline) solid var(--glass-pearl-edge);
  background: var(--glass-reading-bg);
  box-shadow: var(--shadow-float);
  position: relative;
  transform: var(--lift-rest);
  transition: transform var(--duration-medium) var(--ease-glass),
              box-shadow var(--duration-medium) var(--ease-glass);
}
.product::after {
  content: "";
  position: absolute; left: 10%; right: 10%; bottom: -16px; height: 30px;
  border-radius: 50%;
  z-index: -1;
  filter: blur(14px);
  opacity: .5;
  background: var(--pool, rgba(118, 87, 246, .32));
  transition: opacity var(--duration-medium) var(--ease-glass), bottom var(--duration-medium) var(--ease-glass);
}
.product:hover { transform: var(--lift-hover); box-shadow: var(--shadow-float-hover); }
.product:hover::after { opacity: .8; bottom: -20px; }
.product:focus-within { box-shadow: var(--shadow-float-hover); }
.product--aqua   { --pool: rgba(69, 217, 210, .4);  --tint: var(--accent-aqua); --tint-ink: #0f7d78; }
.product--violet { --pool: rgba(118, 87, 246, .4);  --tint: var(--accent-violet); --tint-ink: #5a3fd6; }
.product--coral  { --pool: rgba(255, 142, 174, .4); --tint: var(--accent-coral); --tint-ink: #c14268; }
.product--blue   { --pool: rgba(139, 183, 255, .4); --tint: var(--accent-blue); --tint-ink: #3a68b8; }

.product__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--media-well-bg);
  border-bottom: var(--border-hairline) solid rgba(255, 255, 255, .5);
}
.product__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.product__status {
  align-self: flex-start;
  margin-bottom: var(--space-3);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: var(--border-hairline) solid var(--glass-pearl-edge);
  background: rgba(255, 253, 250, .84);
  box-shadow: 0 6px 14px rgba(30, 26, 40, .14);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-primary);
}
.product__status::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 26%, transparent);
}
.product__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5) var(--space-5) var(--space-4); }
.product__title {
  font-size: var(--font-size-product);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.product__hook { margin-top: var(--space-3); color: var(--ink-secondary); font-size: .96rem; }
.product__proof {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid rgba(120, 130, 150, .2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tint-ink);
}
.product__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.product__actions .btn { min-height: 46px; }
/* A prototype label may run to several lines (see `label()` in site.js). The
   base .btn is a single-line pill, so a stacked label needs its own centring
   and a tighter leading, and the pill radius has to relax into a rounded box
   once the control is taller than it is wide. */
.product__actions .btn br + br,
.product__actions .btn { text-align: center; }
.product__actions .btn:has(br) {
  flex-direction: column;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  border-radius: var(--radius-md, 16px);
  line-height: 1.15;
}

/* =====================================================================
   SYSTEMS UNDERNEATH , small floating selectors above one shared card.
   The closest structural translation of the reference.
   ===================================================================== */


.sys {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  text-align: left;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-primary);
}
.sys__dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex: none;
  background: var(--tint, var(--accent-blue));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint, var(--accent-blue)) 22%, transparent);
}
.sys--aqua   { --tint: var(--accent-aqua); }
.sys--violet { --tint: var(--accent-violet); }
.sys--coral  { --tint: var(--accent-coral); }
.sys--blue   { --tint: var(--accent-blue); }
/* Selected state carries a fill, a heavier border, a check glyph and a
   weight change , never colour on its own. */
.sys[aria-selected="true"] {
  background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .3) 46%), color-mix(in srgb, var(--tint) 26%, rgba(255, 255, 255, .7));
  border-color: color-mix(in srgb, var(--tint) 62%, white);
  border-width: 2px;
  font-weight: 700;
  transform: translateY(-2px);
  box-shadow: var(--shadow-float-hover);
}
.sys[aria-selected="true"]::after { opacity: .85; }
.sys__name { min-width: 0; }
.sys__check { margin-left: auto; opacity: 0; flex: none; width: 16px; height: 16px; color: var(--ink-primary); }
.sys[aria-selected="true"] .sys__check { opacity: 1; }

.sys-card { padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--radius-card); }
.sys-card__status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .72);
  border: var(--border-hairline) solid rgba(255, 255, 255, .9);
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.sys-card__status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tint, var(--accent-blue));
}
.sys-card h3 {
  margin-top: var(--space-3);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.1;
}
.sys-card p { margin-top: var(--space-3); color: var(--ink-secondary); max-width: 62ch; }
.sys-card__meta {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid rgba(120, 130, 150, .2);
  font-size: .78rem;
  color: var(--ink-secondary);
}

/* ========================== CAPABILITIES ============================= */
.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.cap {
  display: flex; align-items: baseline; gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--space-4);
  text-align: left;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-primary);
}
.cap__n { font-family: var(--font-display); font-size: .74rem; letter-spacing: .12em; color: var(--ink-secondary); }
.cap[aria-pressed="true"] {
  background: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .34) 46%), color-mix(in srgb, var(--accent-aqua) 30%, rgba(255, 255, 255, .7));
  border-color: color-mix(in srgb, var(--accent-aqua) 64%, white);
  border-width: 2px;
  transform: translateY(-2px);
  box-shadow: var(--shadow-float-hover);
}
.cap[aria-pressed="true"] .cap__n { color: var(--ink-primary); }
.cap-readout {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-control);
  border: var(--border-hairline) solid var(--glass-reading-border);
  background: var(--glass-reading-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  color: var(--ink-secondary);
  min-height: 3.4rem;
  max-width: var(--reading-width);
}

/* ============================== METHOD =============================== */
.method-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.step { padding: var(--space-5); border-radius: var(--radius-card); }
.step__n {
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  color: var(--ink-secondary);
}
.step h3 { margin-top: var(--space-2); font-size: 1.2rem; letter-spacing: -0.01em; text-transform: uppercase; }
.step p { margin-top: var(--space-3); font-size: .9rem; color: var(--ink-secondary); }
.step--aqua   { --pool: rgba(69, 217, 210, .38); }
.step--violet { --pool: rgba(118, 87, 246, .34); }
.step--coral  { --pool: rgba(255, 142, 174, .36); }
.step--blue   { --pool: rgba(139, 183, 255, .38); }

/* ============================== CONTACT ============================== */
.form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: start; }
.form__fields { display: grid; gap: var(--space-2); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.form input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
  border: var(--border-hairline) solid var(--glass-reading-border);
  background: var(--glass-reading-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-float);
  font-size: .96rem;
  color: var(--ink-primary);
  transition: border-color var(--duration-fast) var(--ease-glass), box-shadow var(--duration-fast) var(--ease-glass);
}
.form input::placeholder { color: var(--ink-secondary); }
.form input:focus { border-color: var(--accent-violet); }
.form input:user-invalid { border-color: var(--signal-error); }
.form__action { display: flex; align-items: flex-start; }
.form__status { margin-top: var(--space-2); min-height: 1.4rem; font-size: .88rem; font-weight: 600; color: #17724b; }
.form__status[data-state="error"] { color: #a5273f; }

/* ============================== FOOTER =============================== */
.foot { padding-block: var(--space-5); }
.foot__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding-top: var(--space-5);
  border-top: var(--border-hairline) solid rgba(120, 130, 150, .22);
}
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.foot__links a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-label);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-secondary);
}
.foot__links a:hover { color: var(--ink-primary); background: rgba(255, 255, 255, .5); }

/* ======================= PRODUCT DRAWER + RUNBOOK ===================== */
.drawer { position: fixed; inset: 0; z-index: 120; }
.drawer[hidden] { display: none; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(30, 26, 40, .34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(680px, 100%);
  overflow-y: auto;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-left: var(--border-hairline) solid var(--glass-parent-border);
  border-radius: var(--radius-tray) 0 0 var(--radius-tray);
  background:
    linear-gradient(168deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .2) 40%, rgba(214, 226, 240, .3) 100%),
    var(--canvas-cloud);
  box-shadow: -40px 0 90px rgba(40, 36, 50, .28);
  animation: drawer-in var(--duration-medium) var(--ease-glass);
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer__close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  cursor: pointer;
  border-radius: 50%;
  border: var(--border-hairline) solid var(--glass-pearl-edge);
  background: var(--glass-pearl-bg);
  box-shadow: var(--shadow-float);
}
.drawer__close svg { width: 20px; height: 20px; }
.drawer__body { padding-right: 56px; }
.drawer__eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-secondary); }
.drawer__title { margin-top: var(--space-2); font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.02; letter-spacing: -0.03em; }
.drawer__summary { margin-top: var(--space-3); color: var(--ink-secondary); }
.drawer__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* runbook preview: numbered sea-glass steps beside one reading surface */
.rb { margin-top: var(--space-5); }
.rb__bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rb__steps { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.rb__step {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700; font-size: .82rem;
  border-radius: 14px;
}
.rb__step[aria-current="true"] {
  /* The convex sheen has to stay off the glyph: at .5 white it lifted the
     top half of the chip to near-white and the numeral fell to 1.7:1. */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(rgba(14, 8, 38, .2), rgba(14, 8, 38, .2)),
    var(--accent-violet);
  border-color: var(--glass-violet-edge);
  color: var(--ink-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-float-hover), var(--glow-violet);
}
/* The shared .sg convex sheen is 72% white , fine behind dark text, fatal
   behind white. Any glass carrying inverse text gets a gentler one. */
.rb__step[aria-current="true"]::before {
  background: linear-gradient(155deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 40%);
}
.rb__progress { flex: 1; min-width: 120px; height: 6px; border-radius: 999px; background: rgba(120, 140, 170, .22); overflow: hidden; }
.rb__progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-aqua), var(--accent-violet)); transition: width var(--duration-medium) var(--ease-glass); }
.rb__count { font-size: .78rem; font-weight: 600; color: var(--ink-secondary); white-space: nowrap; }

.rb__panel { margin-top: var(--space-4); padding: clamp(1.1rem, 2.2vw, 1.75rem); border-radius: var(--radius-card); }
.rb__chapter { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.02em; }
.rb__layer { margin-top: var(--space-4); }
.rb__layer:first-of-type { margin-top: var(--space-3); }
.rb__label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-secondary);
}
.rb__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--layer-tint, var(--accent-aqua)); }
.rb__layer--you  { --layer-tint: var(--accent-coral); }
.rb__layer--what { --layer-tint: var(--accent-aqua); }
.rb__layer--hood { --layer-tint: var(--accent-violet); }
.rb__layer p { margin-top: var(--space-2); color: var(--ink-primary); }
.rb__layer--hood p { color: var(--ink-secondary); }
.rb__nav { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.rb__nav .btn { min-height: 46px; }
.rb__nav .btn[disabled] { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }
.rb__hood-toggle { margin-top: var(--space-4); }

.drawer__foot { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-hairline) solid rgba(120, 130, 150, .22); }
.drawer__foot dt { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-secondary); }
.drawer__foot dd { margin: var(--space-2) 0 0; color: var(--ink-secondary); }

body.is-locked { overflow: hidden; }

/* ------------------------------- reveal ------------------------------ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-glass), transform var(--duration-slow) var(--ease-glass); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================= responsive ============================ */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
  .beads { grid-template-columns: repeat(2, 1fr); }
  .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__figure { max-width: 460px; margin-inline: auto; }
  .hero__figure img {
    --fig-fade: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0, 0, 0, .5) 88%, transparent 100%);
    -webkit-mask-image: var(--fig-fade);
    mask-image: var(--fig-fade);
  }
  .product-grid { grid-template-columns: 1fr; }
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form { grid-template-columns: 1fr; }
  .form__action .btn { width: 100%; }
  .drawer__panel { border-radius: var(--radius-tray) var(--radius-tray) 0 0; top: 4vh; width: 100%; }
}

@media (max-width: 560px) {
  .beads { grid-template-columns: 1fr; }
  .cap-grid { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .foot__inner { flex-direction: column; align-items: flex-start; }
  .brand { font-size: .68rem; }
  .brand__slash { display: none; }
  .brand__role { flex-basis: 100%; }
}

/* ---------------------- reduced blur on small screens ---------------- */
/* Blur is the expensive part. Parents keep a lighter one; the decorative
   sheens come off entirely. */
@media (max-width: 720px) {
  .stage {
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    background: linear-gradient(168deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .2) 40%, rgba(214, 226, 240, .26) 100%), var(--glass-parent-bg-strong);
  }
  .sg::after, .product::after { display: none; }
  .env__caustic, .env__caustic--alt { opacity: .3; }
}

/* -------------------------- no-blur fallback ------------------------- */
/* Deterministic opaque stand-ins. Without these the whole page reads as
   washed-out text on a gradient. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stage,
  .nav__mobile {
    background: linear-gradient(168deg, rgba(255, 255, 255, .96), rgba(244, 246, 250, .98));
  }
  .drawer__scrim { background: rgba(30, 26, 40, .6); }
  .product__status { background: var(--canvas-cloud); }
  .sg--aqua   { background: color-mix(in srgb, var(--accent-aqua) 34%, white); }
  .sg--violet { background: var(--accent-violet); }
  .sg--coral  { background: color-mix(in srgb, var(--accent-coral) 40%, white); }
  .sg--blue   { background: color-mix(in srgb, var(--accent-blue) 36%, white); }
  .sg--pearl,
  .sg--milk,
  .product,
  .form input,
  .cap-readout { background: var(--canvas-cloud); }
}

/* ---------------------------- reduced motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .drawer__panel { animation: none; }
  .sg:hover, .product:hover, .btn:hover { transform: none; }
  .sg:hover::after, .product:hover::after { bottom: -14px; }
  .sys[aria-selected="true"], .cap[aria-pressed="true"], .rb__step[aria-current="true"] { transform: none; }
}

/* =====================================================================
   DEEPER PAGES
   Same materials, same tokens, same rhythm , no second visual system.
   ===================================================================== */

/* active navigation state: a filled pill plus a weight change, so it is
   never carried by colour alone */
.nav__links a[aria-current="page"] {
  background: var(--glass-pearl-bg);
  border-color: var(--glass-pearl-edge);
  box-shadow: var(--shadow-float);
  font-weight: 700;
}
.nav__mobile a[aria-current="page"] { background: rgba(255, 255, 255, .55); font-weight: 700; }
.foot__links a[aria-current="page"] { color: var(--ink-primary); font-weight: 700; }

/* ------------------------------ page hero ---------------------------- */
.page-hero { padding-top: clamp(6.5rem, 11vw, 9rem); }
.stage--pagehero { padding-block: clamp(2rem, 4vw, 3.5rem); }
.page-title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  line-height: var(--line-tight);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.page-lede {
  margin-top: var(--space-4);
  max-width: var(--reading-width);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink-secondary);
}

/* quiet cross-links and caveats under a tray */
.stage__note { margin-top: var(--space-4); font-size: .88rem; color: #4d4954; max-width: var(--reading-width); }
.stage__more {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-violet);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-violet) 40%, transparent);
}
.stage__more:hover { border-bottom-color: var(--accent-violet); }

/* ----------------------------- products ------------------------------ */
.product__collision {
  margin-top: var(--space-3);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}
.product__collision b { color: var(--ink-primary); font-weight: 700; }
/* lab entries have no verified screenshot, so they carry a tinted head
   instead of a media well rather than a grey placeholder box */
.product--nomedia .product__body { padding-top: var(--space-5); }
.product--nomedia::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--tint), transparent);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.product-grid--lab { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --------------------------- AI statement ---------------------------- */
.stage--statement { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.statement {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.55;
  max-width: 68ch;
  color: var(--ink-primary);
}
.statement__short {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid rgba(120, 130, 150, .22);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  color: #533ac9;
  max-width: 62ch;
}

/* ---------------------------- model roles ---------------------------- */
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.model { padding: var(--space-5); border-radius: var(--radius-card); }
.model h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
.model p { margin-top: var(--space-3); font-size: .92rem; color: var(--ink-secondary); }

/* -------------------------- article feature -------------------------- */
.stage--article { padding-block: clamp(2rem, 3.6vw, 3rem); }
.feature-title {
  margin-top: var(--space-2);
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.feature-excerpt {
  margin: var(--space-4) 0 var(--space-5);
  max-width: var(--reading-width);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  color: var(--ink-secondary);
}

/* ----------------------------- product DNA --------------------------- */
.dna-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
}
.dna-strip .dna {
  min-height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-primary);
}
.dna-strip .dna[aria-pressed="true"] {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(rgba(14, 8, 38, .2), rgba(14, 8, 38, .2)),
    var(--accent-violet);
  border-color: var(--glass-violet-edge);
  color: var(--ink-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-float-hover), var(--glow-violet);
}
.dna-strip .dna[aria-pressed="true"]::before {
  background: linear-gradient(155deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 40%);
}
.dna__arrow { color: var(--ink-secondary); font-size: 1.1rem; }
.dna-readout {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-control);
  border: var(--border-hairline) solid var(--glass-reading-border);
  background: var(--glass-reading-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  color: var(--ink-secondary);
  min-height: 3.2rem;
  max-width: var(--reading-width);
}

/* ------------------------------ related ------------------------------ */
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.related__card { display: flex; flex-direction: column; padding: var(--space-5); border-radius: var(--radius-card); }
.related__card h3 { font-size: 1.05rem; }
.related__card p { margin: var(--space-3) 0 var(--space-4); font-size: .92rem; color: var(--ink-secondary); flex: 1; }

/* ------------------------------ article ------------------------------ */
.article { padding-top: clamp(6.5rem, 11vw, 9rem); }
.stage--reading { max-width: 46rem; margin-inline: auto; padding: clamp(2rem, 4vw, 3.5rem); }
.crumb { margin-bottom: var(--space-4); }
.crumb a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .82rem; font-weight: 600; color: var(--ink-secondary);
}
.crumb a:hover { color: var(--ink-primary); }
.article__title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.article__body { margin-top: var(--space-5); }
.article__body p {
  margin-bottom: var(--space-4);
  font-size: clamp(1.02rem, 1.25vw, 1.12rem);
  line-height: 1.72;
  color: var(--ink-primary);
}
.pull {
  margin: var(--space-5) 0;
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent-violet);
}
.pull p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.article__steps { margin: 0 0 var(--space-4); padding-left: 0; counter-reset: step; }
.article__steps li {
  position: relative;
  margin-bottom: var(--space-2);
  padding-left: 2.4rem;
  font-size: clamp(1.02rem, 1.25vw, 1.12rem);
  line-height: 1.6;
}
.article__steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: .1em;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--glass-aqua-bg);
  border: var(--border-hairline) solid var(--glass-aqua-edge);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
}
.article__foot {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-hairline) solid rgba(120, 130, 150, .22);
}

/* ------------------------------ contact ------------------------------ */
.intent { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.intent__legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-secondary);
}
.intent__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.intent__btn {
  min-height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: .9rem; font-weight: 600;
  color: var(--ink-primary);
}
.intent__btn[aria-pressed="true"] {
  background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .3) 46%), color-mix(in srgb, var(--accent-aqua) 30%, rgba(255, 255, 255, .7));
  border-color: color-mix(in srgb, var(--accent-aqua) 62%, white);
  border-width: 2px;
  font-weight: 700;
  transform: translateY(-2px);
  box-shadow: var(--shadow-float-hover);
}
.form input[readonly] { color: var(--ink-secondary); }

/* ---------------------------- responsive ----------------------------- */
@media (max-width: 1024px) {
  .model-grid, .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .product-grid--lab { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .model-grid, .related-grid { grid-template-columns: 1fr; }
  .dna__arrow { display: none; }
  .dna-strip .dna, .intent__btn { width: 100%; justify-content: center; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dna-readout, .related__card, .model, .intent__btn, .dna-strip .dna { background: var(--canvas-cloud); }
  .dna-strip .dna-strip .dna[aria-pressed="true"] { background: var(--accent-violet); }
}

/* =====================================================================
   SPLIT EXPLORER
   Two sibling pieces of sea glass on the same field: a large selector
   card and a smaller context card. Not one dashboard rectangle with a
   dividing line.
   ===================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 3.4fr) minmax(300px, 1fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}
.split__selector, .split__context { min-width: 0; }
/* the context card fills its whole track, with metadata settling at the foot */
.split__context { display: flex; flex-direction: column; }

.split__body { margin-top: var(--space-5); }

/* category rail */
.split__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-primary);
}
.tab__n {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink-secondary);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: rgba(120, 140, 170, .16);
}
.tab[aria-selected="true"] {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(rgba(14, 8, 38, .2), rgba(14, 8, 38, .2)),
    var(--accent-violet);
  border-color: var(--glass-violet-edge);
  color: var(--ink-inverse);
  font-weight: 700;
  transform: translateY(-2px);
  box-shadow: var(--shadow-float-hover), var(--glow-violet);
}
.tab[aria-selected="true"]::before {
  background: linear-gradient(155deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 40%);
}
.tab[aria-selected="true"] .tab__n { background: rgba(255, 255, 255, .26); color: var(--ink-inverse); }

/* items for the active category only */
.split__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
  align-content: start;
}
.split__items:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 6px; border-radius: var(--radius-control); }
.split__items .sys { width: 100%; min-height: 56px; }
.split__items .sys__name { line-height: 1.35; }

/* context card interior */
.split__context .sys-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
.split__context .sys-card::before, .split__context .sys-card::after { display: none; }
.split__context .sys-card__meta { margin-top: auto; padding-top: var(--space-4); }

@media (max-width: 1200px) {
  .split__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Stack when the context card would get too narrow to read. Chosen on
   content fit rather than a device name. */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__items { min-height: 0 !important; }
}
@media (max-width: 620px) {
  .split__items { grid-template-columns: 1fr; }
  .split__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .tab { flex: 0 0 auto; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tab { background: var(--canvas-cloud); }
  .tab[aria-selected="true"] { background: var(--accent-violet); }
}

/* =====================================================================
   FOUNDER CREDIT + CREATORS
   ===================================================================== */

.creator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
.creator { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-card); padding: 0; }
.creator__portrait {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(168deg, rgba(118, 87, 246, .16), rgba(69, 217, 210, .14));
  border-bottom: var(--border-hairline) solid rgba(255, 255, 255, .6);
}
.creator__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* a held seat should read as deliberate, not as a broken image */
.creator__portrait--empty {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.4) 0 12px, rgba(255,255,255,0) 12px 24px),
    linear-gradient(168deg, rgba(139, 183, 255, .2), rgba(255, 142, 174, .16));
}
.creator__initial {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -.03em;
  color: rgba(23, 21, 27, .28);
}
.creator__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.creator__role { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-secondary); }
.creator__name {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  letter-spacing: -.025em;
  line-height: 1.05;
}
.creator__bio { margin-top: var(--space-3); font-size: .92rem; line-height: 1.6; color: var(--ink-secondary); }
.creator__meta {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-secondary);
}
.creator--open .creator__name { color: var(--ink-secondary); }

@media (max-width: 1024px) { .creator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .creator-grid { grid-template-columns: 1fr; } }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .creator { background: var(--canvas-cloud); }
}

/* ------------------------------ brand marks -------------------------- */
.brand__lockup {
  height: clamp(20px, 2.1vw, 27px);
  width: auto;
}
/* the lantern carries the hero now, so it gets the portrait's slot but not
   the portrait's bottom fade, which existed to dissolve a photograph */
.hero__figure .hero__mark {
  width: min(100%, 400px);
  height: auto;
  margin-inline: auto;
  -webkit-mask-image: none;
  mask-image: none;
  filter: drop-shadow(0 24px 46px rgba(40, 36, 50, .18));
}
.hero__figure:has(.hero__mark)::before { opacity: .8; }
@media (max-width: 860px) { .hero__figure .hero__mark { width: min(76%, 330px); } }

/* ------------------------------- byline ------------------------------ */
.article__byline {
  /* deliberately normal inline text rather than a flex row: the link then
     sits inside a line of prose, which is where the WCAG target-size
     exception actually applies */
  margin-top: var(--space-3);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-secondary);
}
.article__byline-by { text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 700; margin-right: 4px; }
.article__byline a {
  color: var(--ink-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-violet) 45%, transparent);
}
.article__byline a:hover { border-bottom-color: var(--accent-violet); }
.article__byline-sep { color: var(--accent-violet); margin-inline: 6px; }