/* ── Typeface ─────────────────────────────────────────────────────────────
   IBM Plex Sans + IBM Plex Mono, self-hosted. Official IBM packages
   (@ibm/plex-sans 1.1.0, @ibm/plex-mono 2.5.0), SIL Open Font License 1.1 —
   licence text sits beside the files in static/src/fonts/LICENSE.txt.

   Latin1 subsets only, six files, ~122KB total. Self-hosted rather than
   Google-hosted so the pages stop depending on a third party to render text.

   Plex is drawn for technical documentation and reads as engineering rather
   than as a startup landing page, which is the whole point of the change. */

@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/juros_systems_website/static/src/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/juros_systems_website/static/src/fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/juros_systems_website/static/src/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/juros_systems_website/static/src/fonts/IBMPlexSans-Bold-Latin1.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/juros_systems_website/static/src/fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/juros_systems_website/static/src/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2');
}

/* ============================================================================
   Juros Systems — design tokens and components (redesign v2)
   ----------------------------------------------------------------------------
   Loaded by the static marketing pages. Deliberately one plain CSS file: this
   project has no build step, and keeping it that way is why changes ship on a
   push without a module upgrade.

   Direction: engineering drawing, not gaming rig. Power is carried by type
   scale, density and precision — not by glow, gradients or blur. Every surface
   is flat, every border is a hairline, every number is monospaced.
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  /* Ground and surfaces. Kept from the existing brand; the OLED black works. */
  --bg:            #05050a;
  --surface:       #0a0c12;
  --surface-2:     #0e1119;
  --surface-3:     #141824;

  /* Hairlines. The single most important token in this system — structure is
     drawn with 1px rules, the way a spec sheet is. */
  /* Raised from .09/.16. At the original values the rules were technically
     present and practically invisible on most screens, so nothing read as
     separated — spec rows, cards, the footer and every form field all lost
     their edges. Structure in this system is drawn with 1px lines, so if the
     line cannot be seen the layout has no structure. */
  --line:          rgba(255, 255, 255, .17);
  --line-strong:   rgba(255, 255, 255, .32);
  --line-accent:   rgba(7, 179, 213, .35);

  /* Ink */
  --text:          #e9ecf3;
  --text-2:        #9aa3b8;
  --text-3:        #626c85;

  /* Accent. Teal is the brand signal and is used sparingly: one accent per
     screen region, never as decoration. Purple is demoted to the consumer
     product line only — it is no longer a brand colour. */
  --accent:        #07b3d5;
  --accent-ink:    #051318;
  --accent-quiet:  rgba(7, 179, 213, .10);
  --consumer:      #9333ea;
  --consumer-quiet:rgba(147, 51, 234, .12);

  /* Status */
  --warn:          #d98324;
  --tbc:           #6b7280;

  /* Type */
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale — 1.25 ratio, clamped so it survives 390px without a reflow. */
  --t-display: clamp(2.5rem, 1.5rem + 3.8vw, 4.5rem);
  --t-h2:      clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --t-h3:      clamp(1.15rem, 1rem + .6vw, 1.5rem);
  --t-body:    clamp(.95rem, .9rem + .2vw, 1.0625rem);
  --t-micro:   .6875rem;

  /* Spacing — 8px base. Section rhythm is deliberately large. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Radii — small on purpose. Hardware has machined edges, not pill shapes. */
  --r-1: 2px; --r-2: 4px; --r-3: 8px;

  --wrap: 1280px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -.02em; font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.j-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
.j-section { padding-block: clamp(var(--s-8), 6vw, var(--s-10)); }
.j-section + .j-section { border-top: 1px solid var(--line); }

/* Mono microlabel. Used for every section eyebrow, every field name, every
   unit. This single treatment does most of the work of looking technical. */
.j-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}
.j-label--accent { color: var(--accent); }

/* Numbers, prices, part codes. Tabular so columns align down a spec sheet. */
.j-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.j-lede { color: var(--text-2); max-width: 62ch; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); }

/* A hairline rule with a short accent segment — the "technical drawing" motif,
   reused as the section divider and under headings. */
.j-rule { height: 1px; background: var(--line); position: relative; }
.j-rule::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 1px; background: var(--accent); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.j-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--sans); font-size: .9375rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  padding: 13px 22px; border-radius: var(--r-2);
  border: 1px solid transparent; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  min-height: 48px;
  /* <button> inherits ButtonFace and the platform font; <a> does not. The two
     must render identically, since both are used for the same control. */
  background: transparent;
  -webkit-appearance: none; appearance: none;
  color: inherit;
}
.j-btn--primary { background: var(--accent); color: var(--accent-ink); }
.j-btn--primary:hover { background: #23c9e8; }
.j-btn--ghost { border-color: var(--line-strong); color: var(--text); }
.j-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.j-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.j-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 5, 10, .88);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) { .j-header { backdrop-filter: blur(8px); } }
.j-header__in { display: flex; align-items: center; gap: var(--s-6); min-height: 68px; }
.j-header__logo { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.j-header__logo img { height: 34px; width: auto; }
.j-header__logo .j-logo-mark { display: none; }
.j-nav { display: flex; gap: var(--s-5); margin-left: auto; }
.j-nav a {
  font-size: .875rem; color: var(--text-2); padding: 6px 0;
  border-bottom: 1px solid transparent; transition: color .16s, border-color .16s;
}
.j-nav a:hover, .j-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.j-header__cta { display: flex; gap: var(--s-3); align-items: center; }
/* The header CTA stays on every screen — it is the primary conversion path —
   but takes a shorter label below 560px rather than wrapping to two lines. */
.j-btn__short { display: none; }
.j-btn { white-space: nowrap; }

.j-burger { display: none; position: relative; background: none; border: 1px solid var(--line-strong); border-radius: var(--r-2); color: var(--text); padding: 10px 12px; cursor: pointer; }
/* The visible control is ~38px, under the 44px minimum tap target. Rather than
   inflate the button — which would change the header's proportions — an
   invisible centred pseudo-element carries the hit area out to 44x44. It
   belongs to the button, so taps on it activate the button, and the visible
   border, alignment, focus ring and toggle behaviour are all untouched. */
.j-burger::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.j-hero { position: relative; padding-block: clamp(var(--s-8), 7vw, 140px) clamp(var(--s-8), 6vw, var(--s-10)); overflow: hidden; }
/* Engineering grid, very low contrast. Texture, not decoration. */
.j-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 0%, #000 40%, transparent 100%);
}
.j-hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(var(--s-6), 4vw, var(--s-9)); align-items: center; }
.j-hero h1 { font-size: var(--t-display); font-weight: 600; margin-block: var(--s-4) var(--s-5); }
.j-hero h1 em { font-style: normal; color: var(--accent); }
.j-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.j-hero__figure { position: relative; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--surface); }
.j-hero__figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
/* Corner ticks — machined-edge cue, pure CSS, no images. */
.j-hero__figure::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(255,255,255,.10);
  clip-path: polygon(0 0,26px 0,26px 1px,1px 1px,1px 26px,0 26px,0 0,
                     100% 0,100% 26px,calc(100% - 1px) 26px,calc(100% - 1px) 1px,calc(100% - 26px) 1px,calc(100% - 26px) 0,100% 0,
                     100% 100%,calc(100% - 26px) 100%,calc(100% - 26px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 26px),100% calc(100% - 26px),100% 100%,
                     0 100%,0 calc(100% - 26px),1px calc(100% - 26px),1px calc(100% - 1px),26px calc(100% - 1px),26px 100%,0 100%);
}
.j-hero__caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: linear-gradient(to top, rgba(5,5,10,.92), transparent); }

/* ── Platform cards ───────────────────────────────────────────────────────── */
/* Four categories, four columns — a 3+1 grid strands the fourth card. */
.j-platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-7); }
.j-platform {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--surface); padding: var(--s-5);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.j-platform:hover { border-color: var(--line-strong); background: var(--surface-2); }
.j-platform h3 { font-size: var(--t-h3); margin-block: var(--s-3) var(--s-2); }
.j-platform p { color: var(--text-2); font-size: .9375rem; }
.j-platform__spec { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
/* Sized as a touch target, not just a text link: on a phone this is the card's
   only action, and 44px is the floor. */
.j-platform__link {
  margin-top: var(--s-4); color: var(--accent);
  font-family: var(--sans); font-size: .875rem; font-weight: 500; letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
}
.j-platform__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.j-platform__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The consumer line stays present and legible, marked by its own accent rather
   than by being shrunk into a footnote. */
.j-platform--consumer { border-color: rgba(147,51,234,.22); }
.j-platform--consumer .j-platform__link { color: var(--consumer); }
.j-platform--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--s-6); }
.j-platform--wide > div:first-child { flex: 1; }

/* ── Workload selector ────────────────────────────────────────────────────── */
.j-workloads { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.j-workload {
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em;
  padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); color: var(--text-2); cursor: pointer;
  transition: all .16s var(--ease); min-height: 44px;
}
.j-workload:hover { border-color: var(--line-strong); color: var(--text); }
.j-workload[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-quiet); color: var(--accent); }
.j-workload:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.j-workload__result {
  margin-top: var(--s-6); border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: var(--r-2); background: var(--surface); padding: var(--s-5);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-5); align-items: center;
}

/* ── Featured system ──────────────────────────────────────────────────────── */
.j-system { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--surface); margin-top: var(--s-7); }
.j-system__media { position: relative; background: var(--surface-2); }
.j-system__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 4; }
.j-system__badge { position: absolute; top: var(--s-4); left: var(--s-4); background: rgba(5,5,10,.82); border: 1px solid var(--line-strong); border-radius: var(--r-1); padding: 5px 10px; }
.j-system__body { padding: clamp(var(--s-5), 3vw, var(--s-7)); display: flex; flex-direction: column; }
.j-system__price { display: flex; align-items: baseline; gap: var(--s-3); margin-block: var(--s-4) var(--s-5); }
.j-system__price b { font-family: var(--mono); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; }

/* ── Specification table ──────────────────────────────────────────────────── */
.j-specs { width: 100%; border-collapse: collapse; margin-top: var(--s-4); }
.j-specs th, .j-specs td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.j-specs th { width: 40%; font-weight: 500; }
.j-specs td { font-family: var(--mono); font-size: .8125rem; color: var(--text); font-variant-numeric: tabular-nums; }
.j-specs tr:last-child th, .j-specs tr:last-child td { border-bottom: 0; }

/* Placeholder marker. Deliberately visible: unverified data must never be
   mistaken for a specification. */

/* ── Homepage flagship ────────────────────────────────────────────────────
   Editorial, not a datasheet. Deliberately NOT .j-system: that layout carries
   the specification tables on /systems and must keep doing so. Here the
   photograph is the argument and the copy stays out of its way. */
.j-flagship { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(var(--s-5), 4vw, var(--s-8));
  align-items: center; margin-top: var(--s-7); }
.j-flagship__media { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--surface-2); }
.j-flagship__media img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.j-flagship__name { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); font-weight: 600; letter-spacing: -.02em; }
.j-flagship__desc { color: var(--text-2); font-size: 1.0625rem; line-height: 1.65; max-width: 46ch; margin-top: var(--s-4); }
.j-flagship__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

@media (max-width: 900px) {
  .j-flagship { grid-template-columns: 1fr; gap: var(--s-5); }
  .j-flagship__desc { max-width: none; }
}

/* ── Configurator ─────────────────────────────────────────────────────────
   Editorial, not an ecommerce product page. The machine holds the left column
   and stays there while the options are worked through; the right column is a
   single vertical read — identity, choices, what it costs. Options are
   hairline rows rather than cards, so nine of them do not become nine boxes. */
.j-cfg { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(var(--s-5), 4vw, var(--s-8)); align-items: start; }
.j-cfg__media { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--surface-2); }
.j-cfg__media img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

.j-cfg__name { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 600; letter-spacing: -.025em; margin-top: 6px; }
.j-cfg__desc { color: var(--text-2); font-size: 1.0625rem; line-height: 1.65; margin-top: var(--s-4); max-width: 46ch; }

.j-cfg__group { border: 0; padding: 0; margin: var(--s-7) 0 0; }
.j-cfg__legend { display: flex; align-items: baseline; gap: var(--s-3); padding: 0 0 var(--s-3);
  font-size: 1rem; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line); width: 100%; }

.j-cfg__opt { position: relative; border-bottom: 1px solid var(--line); }
.j-cfg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.j-cfg__opt label {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px var(--s-4);
  padding: 16px 16px 16px 34px; min-height: 44px; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
/* Selection marker: a ring that fills, drawn in CSS so there is no icon font. */
.j-cfg__opt label::before {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong);
  transition: border-color .16s, box-shadow .16s;
}
.j-cfg__opt label:hover { background: var(--surface); }
.j-cfg__opt input:checked + label::before { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); }
.j-cfg__opt input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }
.j-cfg__opt-label { color: var(--text-2); font-size: .9375rem; }
.j-cfg__opt input:checked + label .j-cfg__opt-label { color: var(--text); font-weight: 500; }
.j-cfg__opt-meta { grid-column: 1; font-family: var(--mono); font-size: .6875rem; color: var(--text-3); letter-spacing: .04em; }
.j-cfg__opt-delta { grid-row: 1; grid-column: 2; font-family: var(--mono); font-size: .8125rem; color: var(--text-3); white-space: nowrap; }
.j-cfg__opt-delta.is-current { color: var(--accent); }

.j-cfg__fixed { margin-top: var(--s-6); padding: var(--s-5); border: 1px solid var(--line);
  border-radius: var(--r-2); background: var(--surface); }
.j-cfg__fixed dl { display: grid; grid-template-columns: auto 1fr; gap: 10px var(--s-5); margin-top: var(--s-4); }
.j-cfg__fixed dt { color: var(--text-3); font-size: .8125rem; }
.j-cfg__fixed dd { color: var(--text-2); font-size: .8125rem; font-family: var(--mono); text-align: right; }

.j-cfg__summary { margin-top: var(--s-7); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
.j-cfg__summary ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.j-cfg__summary li { display: flex; justify-content: space-between; gap: var(--s-4); padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .875rem; }
.j-cfg__summary li span:first-child { color: var(--text-3); }
.j-cfg__summary li span:last-child { color: var(--text); text-align: right; }
.j-cfg__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--s-5); }
.j-cfg__total b { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem); font-weight: 700; letter-spacing: -.03em; }
.j-cfg__note { color: var(--consumer); font-size: .8125rem; margin-top: var(--s-3); }
.j-cfg__cta { width: 100%; justify-content: center; margin-top: var(--s-5); }
.j-cfg__cta[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 960px) {
  .j-cfg { grid-template-columns: 1fr; }
  /* Image leads, then the work. Sticky is wrong on a phone — it would eat the
     viewport the options need. */
  .j-cfg__media { position: static; }
  .j-cfg__fixed dl { grid-template-columns: 1fr auto; }
}

/* ── Legal ────────────────────────────────────────────────────────────────
   Wraps whatever HTML the company's terms record contains. Styles by element
   rather than class, because that content is authored in Odoo and carries no
   classes of ours. */
.j-legal { max-width: 74ch; margin-top: var(--s-6); color: var(--text-2); font-size: .9375rem; line-height: 1.75; }
.j-legal h1, .j-legal h2, .j-legal h3 { color: var(--text); font-weight: 600; margin-top: var(--s-6); }
.j-legal h1 { font-size: 1.5rem; } .j-legal h2 { font-size: 1.25rem; } .j-legal h3 { font-size: 1.0625rem; }
.j-legal p, .j-legal li { margin-top: var(--s-3); }
.j-legal ul, .j-legal ol { padding-left: 1.25rem; margin-top: var(--s-3); }
.j-legal a { color: var(--accent); }
.j-legal a:hover { text-decoration: underline; }
.j-legal strong, .j-legal b { color: var(--text); font-weight: 600; }
.j-legal table { width: 100%; border-collapse: collapse; margin-top: var(--s-4); }
.j-legal td, .j-legal th { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.j-legal hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

/* ── Cart indicator ───────────────────────────────────────────────────────
   Count comes from /shop/cart/quantity, the same endpoint the old site used,
   so the header agrees with Odoo rather than tracking its own idea of a cart. */
.j-cart { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--text); border: 1px solid var(--line-strong);
  border-radius: var(--r-2); transition: color .16s, border-color .16s; flex-shrink: 0; }
.j-cart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A 1.6px grey stroke at 18px read as an empty box against near-black.
   Brighter, thicker and slightly larger so the icon is actually legible. */
.j-cart svg { width: 21px; height: 21px; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.j-cart:hover { color: var(--accent); border-color: var(--accent); }
.j-cart__n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-size: .625rem; font-weight: 700; line-height: 18px; text-align: center; }
.j-cart__n[hidden] { display: none; }

/* ── Footer ───────────────────────────────────────────────────────────────
   One footer for every page in the new shell. Deliberately sparse: it carries
   navigation and the legal line, and claims nothing about the company that is
   not already documented elsewhere on the site. */
.j-foot { border-top: 1px solid var(--line); margin-top: var(--s-9); padding-block: var(--s-7) var(--s-6); }
.j-foot__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); }
.j-foot__brand img { height: 26px; width: auto; }
.j-foot__brand p { color: var(--text-3); font-size: .8125rem; line-height: 1.6; margin-top: var(--s-4); max-width: 34ch; }
.j-foot h2 { font-family: var(--sans); font-size: .75rem; font-weight: 500; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .07em; }
.j-foot ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 10px; }
.j-foot a { color: var(--text-2); font-size: .875rem; }
.j-foot a:hover { color: var(--text); }
.j-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.j-foot__legal address {
  font-style: normal; color: var(--text-3); font-size: .8125rem;
}
.j-foot__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line);
  color: var(--text-3); font-size: .8125rem; }
@media (max-width: 760px) {
  .j-foot__in { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ── Cookie notice ────────────────────────────────────────────────────────
   Not a second consent system. It writes the SAME website_cookies_bar cookie,
   in the same JSON shape, that Odoo's own bar writes on layout pages, so one
   decision covers the whole domain and the Google tag stays gated on it. */
.j-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--bg); border-top: 1px solid var(--line-strong);
  padding: var(--s-4) var(--s-5);
}
.j-cookie[hidden] { display: none; }
.j-cookie__in { max-width: var(--wrap); margin-inline: auto; display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--s-4); justify-content: space-between; }
.j-cookie p { color: var(--text-2); font-size: .875rem; margin: 0; flex: 1 1 320px; }
.j-cookie__btns { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.j-cookie .j-btn { min-height: 44px; }

/* ── Mobile navigation ────────────────────────────────────────────────────── */
/* Hidden entirely above the breakpoint — the desktop header is untouched.
   The panel is absolutely positioned against the sticky header rather than
   inserted in flow, so opening it cannot shift the page or widen it. */
.j-mobile-nav { display: none; }

@media (max-width: 768px) {
  .j-mobile-nav {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: var(--s-2) var(--s-5) var(--s-5);
    /* Closed. visibility rather than display so the panel can transition, and
       so it is properly removed from the accessibility tree while shut. */
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  }

  .j-mobile-nav.is-open {
    visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  }

  .j-mobile-nav a:not(.j-btn) {
    display: block; padding: 14px 0;
    font-size: .9375rem; color: var(--text-2);
    border-bottom: 1px solid var(--line);
    transition: color .16s;
  }
  .j-mobile-nav a:not(.j-btn):hover,
  .j-mobile-nav a:not(.j-btn)[aria-current="page"] { color: var(--text); }
  .j-mobile-nav a:not(.j-btn):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* The CTA is a button, not another row — it keeps the primary action
     visually distinct from navigation the way it is in the desktop header. */
  .j-mobile-nav .j-btn {
    display: flex; justify-content: center;
    margin-top: var(--s-4); width: 100%;
  }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .j-platforms { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .j-hero__grid { grid-template-columns: 1fr; }
  .j-platforms { grid-template-columns: repeat(2, 1fr); }
  .j-system { grid-template-columns: 1fr; }
  .j-platform--wide { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
  .j-nav, .j-header__cta .j-btn--ghost { display: none; }
  .j-burger { display: inline-flex; margin-left: auto; }
  .j-header__in { gap: var(--s-3); }
  .j-workload__result { grid-template-columns: 1fr; gap: var(--s-4); }
}
@media (max-width: 560px) {
  .j-platforms { grid-template-columns: 1fr; }
  .j-btn__full { display: none; }
  .j-btn__short { display: inline; }
  .j-header__cta .j-btn { padding-inline: 14px; }
  .j-hero__actions .j-btn { flex: 1 1 100%; justify-content: center; }
  .j-specs th { width: 46%; }
}

/* Motion is opt-out. Reveals only ever animate opacity and a short translate. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Secondary product strip ──────────────────────────────────────────────
   The consumer line stays reachable without competing with the compute
   categories: one hairline row, no card, no accent fill. Present, not loud. */
.j-secondary {
  margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2);
  background: transparent; padding: var(--s-4) var(--s-5);
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
}
.j-secondary p { color: var(--text-2); font-size: .9375rem; flex: 1 1 320px; }
.j-secondary a { color: var(--text); font-family: var(--sans); font-size: .9375rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.j-secondary a:hover { color: var(--accent); }

/* ── Engineering process ──────────────────────────────────────────────────── */
.j-process { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: var(--s-7); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.j-step { padding: var(--s-5) var(--s-4); border-right: 1px solid var(--line); position: relative; background: var(--surface); }
.j-step:last-child { border-right: 0; }
.j-step__n { font-family: var(--mono); font-size: var(--t-micro); color: var(--accent); letter-spacing: .14em; }
.j-step h3 { font-size: .9375rem; margin-block: var(--s-3) var(--s-2); letter-spacing: -.01em; }
.j-step p { font-size: .8125rem; color: var(--text-3); line-height: 1.5; }
/* A hairline that runs the row, the way a process diagram is drawn. */
.j-process::after { content: ""; }

/* ── Architecture / thermal schematic ─────────────────────────────────────── */
.j-arch { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-6), 4vw, var(--s-8)); align-items: center; margin-top: var(--s-7); }
.j-arch__fig { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); padding: var(--s-5); }
.j-arch__fig svg { width: 100%; height: auto; display: block; }
.j-arch__list { display: grid; gap: var(--s-4); }
.j-arch__item { border-left: 2px solid var(--line-strong); padding-left: var(--s-4); }
.j-arch__item h3 { font-size: 1rem; margin-bottom: 4px; }
.j-arch__item p { color: var(--text-2); font-size: .9375rem; }

/* ── Platforms row ────────────────────────────────────────────────────────── */
.j-plat-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.j-chip {
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 10px 16px; color: var(--text-2); background: var(--surface);
}

/* ── Final CTA ────────────────────────────────────────────────────────────── */
.j-final { text-align: center; }
.j-final h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); margin-block: var(--s-4) var(--s-5); }
.j-final .j-hero__actions { justify-content: center; }

@media (max-width: 1024px) {
  .j-process { grid-template-columns: repeat(3, 1fr); }
  .j-step:nth-child(3) { border-right: 0; }
  .j-step:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .j-arch { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .j-process { grid-template-columns: 1fr; }
  .j-step { border-right: 0; border-bottom: 1px solid var(--line); }
  .j-step:last-child { border-bottom: 0; }
  /* SYSTEMS sits under JUROS and stops resolving below ~34px, and a 189px
     lockup crowds the CTA and menu button on a 390px bar. Show the glyph
     alone instead of shrinking the wordmark into a smear. */
  .j-header__logo .j-logo-lockup { display: none; }
  .j-header__logo .j-logo-mark { display: block; height: 30px; }
}

/* ── Hero motion ──────────────────────────────────────────────────────────
   Restrained on purpose. Three things move, all slowly, none competing:
   the engineering grid drifts, one faint scan line passes, and the data-path
   nodes pulse. Everything is CSS or SVG — no JS — so motion never becomes a
   dependency for the content being visible.

   Every animation starts from its hidden state INSIDE the keyframes, never on
   the element. If animations are disabled outright, the element is already in
   its final visible state and nothing disappears. */

@keyframes j-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 64px 64px, 64px 64px; }
}
.j-hero::before { animation: j-grid-drift 90s linear infinite; }

/* A single scan pass. Low opacity, long interval — it reads as instrumentation
   rather than decoration. */
.j-hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(7,179,213,.055) 55%, transparent);
  animation: j-scan 14s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes j-scan {
  0%        { transform: translateY(-160px); opacity: 0; }
  8%        { opacity: 1; }
  55%       { opacity: 1; }
  70%, 100% { transform: translateY(680px); opacity: 0; }
}

/* Compute field canvas. Sits behind the hero content, masked so it fades out
   at the edges and stays concentrated around the product. */
.j-hero__field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  mask-image: radial-gradient(ellipse 84% 78% at 68% 48%, #000 40%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse 84% 78% at 68% 48%, #000 40%, transparent 84%);
}
.j-hero__grid { z-index: 1; }
@media (max-width: 760px) {
  .j-hero__field { mask-image: radial-gradient(ellipse 90% 46% at 50% 26%, #000 20%, transparent 76%);
                   -webkit-mask-image: radial-gradient(ellipse 90% 46% at 50% 26%, #000 20%, transparent 76%); }
}

/* Entrance. Short, small distance, staggered — a settle, not a slide show. */
@keyframes j-rise { from { opacity: 0; transform: translateY(14px); } }
.j-hero__grid > div > * { animation: j-rise .7s var(--ease) backwards; }
.j-hero__grid > div > *:nth-child(1) { animation-delay: .04s; }
.j-hero__grid > div > *:nth-child(2) { animation-delay: .10s; }
.j-hero__grid > div > *:nth-child(3) { animation-delay: .16s; }
.j-hero__grid > div > *:nth-child(4) { animation-delay: .22s; }
@keyframes j-fig { from { opacity: 0; transform: translateY(18px) scale(.995); } }
.j-hero__figure { animation: j-fig .9s var(--ease) .12s backwards; }

@media (prefers-reduced-motion: reduce) {
  .j-hero::before, .j-hero::after { animation: none !important; }
  .j-hero::after { opacity: 0; }
}

/* ── Architecture schematic ───────────────────────────────────────────────── */
.j-arch__fig svg { max-height: none; }
/* Narrow screens: trade card padding for diagram width, so schematic labels
   stay legible instead of scaling into illegibility. */
@media (max-width: 560px) { .j-arch__fig { padding: var(--s-3); } }
.j-concept {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--line); border-radius: var(--r-1); padding: 2px 6px;
  margin-left: var(--s-2); vertical-align: middle;
}
.j-arch__item h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   Section compositions — deliberately different from one another.

   The previous version gave every section the same three-part opening: mono
   eyebrow, large bold heading, teal rule. Repeated six times that reads as a
   template rather than a designed page. Each section below now has its own
   composition, and the mono eyebrow survives in only two places where it
   carries real meaning.
   ════════════════════════════════════════════════════════════════════════ */

/* Section heads, three registers rather than one. */
.j-head--major h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); font-weight: 600; max-width: 20ch; }
.j-head--quiet  h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); font-weight: 600; letter-spacing: -.015em; }
.j-head--quiet  { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
                  border-bottom: 1px solid var(--line); padding-bottom: var(--s-4); flex-wrap: wrap; }
.j-head--quiet p { color: var(--text-3); font-size: .9375rem; }

/* ── Systems index — an editorial catalogue, not a card grid ─────────────── */
.j-index { margin-top: var(--s-6); border-top: 1px solid var(--line); }
.j-row {
  display: grid; grid-template-columns: 1.15fr 1fr auto;
  gap: var(--s-5); align-items: baseline;
  padding: clamp(var(--s-5), 3vw, var(--s-7)) 0; border-bottom: 1px solid var(--line);
  transition: background .2s var(--ease);
}
.j-row:hover { background: rgba(255,255,255,.015); }
.j-row h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); font-weight: 600; }
.j-row__meta { margin-top: var(--s-2); color: var(--text-3); font-family: var(--mono); font-size: .8125rem; }
.j-row p { color: var(--text-2); font-size: .9375rem; }
.j-row__go { color: var(--accent); font-weight: 500; font-size: .9375rem; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap; }
.j-row__go:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Workload selector — a selection interface, not a row of pills ──────── */
.j-select { margin-top: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.j-select__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.j-opt {
  text-align: left; background: transparent; border: 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--s-4) var(--s-5); cursor: pointer; color: var(--text-2);
  transition: background .16s var(--ease), color .16s var(--ease);
  min-height: 76px; font-family: var(--sans);
}
.j-opt:hover { background: rgba(255,255,255,.02); color: var(--text); }
.j-opt[aria-pressed="true"] { background: var(--accent-quiet); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.j-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.j-opt b { display: block; font-size: .9375rem; font-weight: 500; }
.j-opt span { display: block; margin-top: 3px; font-family: var(--mono); font-size: .6875rem; color: var(--text-3); letter-spacing: .02em; }
.j-select__out { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5); background: var(--surface); flex-wrap: wrap; }
.j-select__out p { flex: 1 1 300px; color: var(--text); }

/* ── Engineering — a process line, not six boxes ────────────────────────── */
.j-line { margin-top: var(--s-7); position: relative; }
.j-line::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); }
.j-line__steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-4); }
.j-tick { position: relative; padding-top: var(--s-6); }
.j-tick::before {
  content: ""; position: absolute; top: 3px; left: 0; width: 9px; height: 9px;
  border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong);
}
.j-tick--key::before { border-color: var(--accent); background: var(--accent); }
.j-tick h3 { font-size: .9375rem; font-weight: 600; margin-bottom: 4px; }
.j-tick p { font-size: .8125rem; color: var(--text-3); line-height: 1.5; }
.j-tick--key p { color: var(--text-2); }

/* ── Platforms — editorial columns, not tag pills ───────────────────────── */
.j-plats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7); margin-top: var(--s-6); }
.j-plats section { border-top: 1px solid var(--line-strong); padding-top: var(--s-4); }
.j-plats h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: var(--s-3); }
.j-plats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.j-plats li { font-family: var(--mono); font-size: .8125rem; color: var(--text-2); }

@media (max-width: 1024px) {
  .j-row { grid-template-columns: 1fr; gap: var(--s-4); }
  .j-select__grid { grid-template-columns: repeat(2, 1fr); }
  .j-line::before { display: none; }
  .j-line__steps { grid-template-columns: repeat(4, 1fr); }
  .j-tick { padding-top: var(--s-5); border-top: 1px solid var(--line); }
  .j-tick::before { top: -5px; }
  .j-plats { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 560px) {
  .j-select__grid { grid-template-columns: 1fr; }
  .j-opt { border-right: 0; }
  .j-line__steps { grid-template-columns: 1fr; }
  .j-row { grid-template-columns: 48px 1fr; }
}

/* ── Engineer request dialog ──────────────────────────────────────────────
   Opened from "Chat with an Engineer". Deliberately not the live-chat widget:
   this submits a support request that becomes a Helpdesk ticket. */
.j-dialog[hidden] { display: none; }
.j-dialog {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: var(--s-4);
  background: rgba(3, 4, 8, .72);
}
.j-dialog__panel {
  width: min(560px, 100%); max-height: min(88vh, 900px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
}
.j-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-2); }
.j-dialog__head h2 { font-size: 1.5rem; font-weight: 600; }
.j-dialog__sub { color: var(--text-2); font-size: .9375rem; margin-bottom: var(--s-5); }
.j-x {
  background: none; border: 1px solid var(--line); border-radius: var(--r-2);
  color: var(--text-2); width: 36px; height: 36px; cursor: pointer; flex-shrink: 0;
  font-family: var(--sans); font-size: 1rem; line-height: 1;
}
.j-x:hover { border-color: var(--line-strong); color: var(--text); }
.j-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.j-field { margin-bottom: var(--s-4); }
.j-field label { display: block; font-size: .8125rem; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.j-field label .req { color: var(--accent); }
.j-field input, .j-field select, .j-field textarea {
  width: 100%; font-family: var(--sans); font-size: .9375rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-2); padding: 11px 13px; min-height: 46px;
}
.j-field textarea { min-height: 116px; resize: vertical; line-height: 1.55; }
.j-field input:focus, .j-field select:focus, .j-field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface-3);
}
.j-field--half { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.j-field--half > div { margin: 0; }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.j-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.j-dialog__foot { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-5); flex-wrap: wrap; }
.j-dialog__note { color: var(--text-3); font-size: .8125rem; flex: 1 1 200px; }
.j-alert {
  border: 1px solid rgba(217,131,36,.4); background: rgba(217,131,36,.08);
  border-radius: var(--r-2); padding: 11px 14px; color: #f0b46a;
  font-size: .875rem; margin-bottom: var(--s-4);
}
.j-done { text-align: left; }
.j-done h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: var(--s-3); }
.j-done p { color: var(--text-2); margin-bottom: var(--s-3); }
.j-done__ref {
  display: inline-block; font-family: var(--mono); font-size: .8125rem;
  color: var(--text-2); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 7px 12px; margin-bottom: var(--s-5);
}
@media (max-width: 560px) { .j-field--half { grid-template-columns: 1fr; } }

/* Hero field, v2 — the same technique carried further: the mask opens up so
   the field reaches most of the hero instead of hugging the product, and a
   soft teal ground sits behind the workstation to lift it off the black. */
.j-hero__field--v2 {
  mask-image: radial-gradient(ellipse 100% 94% at 66% 48%, #000 46%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 100% 94% at 66% 48%, #000 46%, transparent 92%);
}
.j-hero:has(.j-hero__field--v2)::after { display: none; }  /* the scan pass is redundant now */
.j-hero:has(.j-hero__field--v2) { position: relative; }
/* The atmospheric ground is static, so it belongs in CSS rather than being
   repainted every frame — that fill alone cost most of the frame budget. */
.j-hero:has(.j-hero__field--v2)::before {
  background-image:
    radial-gradient(ellipse 58% 54% at 66% 46%, rgba(7,179,213,.06), rgba(7,179,213,.015) 45%, transparent 70%),
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
}
.j-hero:has(.j-hero__field--v2) .j-hero__figure { box-shadow: 0 0 90px -34px rgba(7,179,213,.32); }
@media (max-width: 760px) {
  .j-hero__field--v2 {
    mask-image: radial-gradient(ellipse 100% 56% at 50% 28%, #000 34%, transparent 88%);
    -webkit-mask-image: radial-gradient(ellipse 100% 56% at 50% 28%, #000 34%, transparent 88%);
  }
}

/* Comparison table — the Core range reads as a range, so it is one table
   rather than three near-identical cards. */
.j-compare thead th { font-family: var(--sans); font-size: .75rem; font-weight: 500;
  color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; padding-bottom: var(--s-3); }
.j-compare td { white-space: nowrap; padding-right: var(--s-6); }
.j-compare td:last-child { padding-right: 0; }
.j-compare thead th { padding-right: var(--s-6); }
.j-compare tbody th { width: auto; padding-right: var(--s-5); white-space: nowrap; }