/* ARCIDEX site sheet. Block 1 is the reference theme sheet with only the accent tokens changed
   (docs/SPEC.md 2.1); block 2 is the reference layout sheet verbatim; block 3 holds the ARCIDEX additions
   (token controls, toast, legal pages, 404). */

/* ===== 1. Theme (reference theme.css, accent re-skinned) ===== */
/* ===== Theme variables ===== */
:root {
  --c-bg: #0A0C0B;
  --c-surface: #101413;
  --c-card: #151A18;
  --c-card-hover: #1B211E;
  --c-viz-panel-bg: rgba(255,255,255,0.012);
  --c-card-gradient: linear-gradient(135deg, rgba(16, 20, 19, 0.7) 0%, rgba(10, 12, 11, 0.8) 100%);
  --c-card-gradient-hover: linear-gradient(160deg, rgba(27, 33, 30, 0.94) 0%, rgba(10, 12, 11, 0.96) 100%);
  --c-card-gradient-strong: linear-gradient(135deg, rgba(16, 20, 19, 0.85) 0%, rgba(10, 12, 11, 0.95) 100%);
  --c-panel-gradient: linear-gradient(180deg, rgba(21, 26, 24, 0.9) 0%, rgba(10, 12, 11, 0.95) 100%);
  --c-border: rgba(255,255,255,0.07);
  --c-border-hover: rgba(255,255,255,0.13);
  --c-border-strong: rgba(255,255,255, 0.189);
  --c-text-primary: #ECF1EF;
  --c-text-secondary: #AEBAB5;
  --c-text-muted: #7E8C87;
  --c-text-strong: #F6FAF8;
  --c-text-subtle: #65726D;
  --c-text-dim: #4C5752;
  --c-header-bg: rgba(10,12,11,0.72);
  --c-page-glow: radial-gradient(60% 50% at 50% 0%, rgba(34,227,115,0.06), rgba(10,12,11,0) 70%);
  --c-scrollbar-thumb: rgba(34, 227, 115, 0.15);
  --c-scrollbar-thumb-hover: rgba(34, 227, 115, 0.3);
  --c-edge-fade: rgba(10,12,11,0.85);
  /* Landing-page composition tokens (scrims, washes, elevation). The
     *-rgb triples let alpha gradients track the theme background. */
  --c-bg-rgb: 10, 12, 11;
  --c-surface-rgb: 16, 20, 19;
  --c-hover-wash: rgba(255,255,255,0.03);
  --c-shadow-elev: 0 40px 120px rgba(0,0,0,0.4);
  --c-hero-tape-opacity: 0.4;
  --c-cta-glow: rgba(var(--c-accent-rgb), 0.07);
  /* ===== Accent (single source; swap these to re-skin) ===== */
  --c-accent: #22E373;
  --c-accent-strong: #17C25F;
  --c-accent-rgb: 34, 227, 115;
  --c-accent-deep-rgb: 23, 194, 95;
  --c-on-accent: #04140D;
}

[data-theme="light"] {
  --c-bg: #f4f6f9;
  --c-surface: #ffffff;
  --c-card: #ffffff;
  --c-card-hover: #eef1f5;
  --c-viz-panel-bg: #ffffff;
  --c-card-gradient: #ffffff;
  --c-card-gradient-hover: #f9fbfd;
  --c-card-gradient-strong: #ffffff;
  --c-panel-gradient: #ffffff;
  --c-border: rgba(var(--c-accent-deep-rgb), 0.22);
  --c-border-hover: rgba(var(--c-accent-deep-rgb), 0.45);
  --c-border-strong: rgba(var(--c-accent-deep-rgb), 0.35);
  --c-text-primary: #0b111a;
  --c-text-secondary: #4a5668;
  --c-text-muted: #596579;
  --c-text-strong: #0b111a;
  --c-text-subtle: #2d3544;
  --c-text-dim: #4a5668;
  --c-header-bg: rgba(244, 246, 249, 0.88);
  --c-page-glow: rgba(var(--c-accent-deep-rgb), 0.12);
  --c-scrollbar-thumb: rgba(var(--c-accent-deep-rgb), 0.25);
  --c-scrollbar-thumb-hover: rgba(var(--c-accent-deep-rgb), 0.45);
  --c-edge-fade: #f4f6f9;
  --c-bg-rgb: 244, 246, 249;
  --c-surface-rgb: 255, 255, 255;
  --c-hover-wash: rgba(11,17,26,0.035);
  --c-shadow-elev: 0 24px 70px rgba(15,23,42,0.10);
  --c-hero-tape-opacity: 0.5;
  --c-cta-glow: transparent;
  /* Dark enough for small status text on white (5.3:1 contrast). */
  --c-accent: #12864A;
  --c-accent-strong: #0E6E3D;
  --c-accent-rgb: 18, 134, 74;
  --c-accent-deep-rgb: 14, 110, 61;
  --c-on-accent: #04140D;
}

/* ===== Light-mode elevation (soft shadows instead of glow) ===== */
[data-theme="light"] .arcidex-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
}
[data-theme="light"] .arcidex-card:hover {
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 8px 20px rgba(15, 23, 42, 0.06);
}

/* ===== Base reset + theme-aware chrome ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background: var(--c-bg);
  color: var(--c-text-primary);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.4;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 0.2s ease, color 0.2s ease;
}
button, input, select, textarea { font: inherit; }
::selection { background: rgba(var(--c-accent-rgb), 0.26); color: #eafffb; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-scrollbar-thumb);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-scrollbar-thumb-hover); }
a { color: inherit; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Clean, on-brand keyboard focus; no jarring default blue box. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-accent-strong); outline-offset: 2px; border-radius: 3px; }
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type=range] { accent-color: var(--c-accent-strong); }

/* ===== 2. Layout (reference layout.css) ===== */
html { scroll-behavior: smooth; }
section[id]:not(#top) { scroll-margin-top: 78px; }
a { text-decoration: none; }
.sx-balance { text-wrap: balance; }
.sx-skip { position: fixed; top: 10px; left: 12px; z-index: 1000; padding: 10px 14px; border-radius: 8px; background: var(--c-card); color: var(--c-text-primary); border: 1px solid var(--c-border-strong); font: 500 13px 'Inter', system-ui, sans-serif; transform: translateY(-150%); transition: transform .16s ease; }
.sx-skip:focus-visible { transform: translateY(0); }
.sx-cta { transition: transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s cubic-bezier(.32,.72,0,1), filter .2s; }
.sx-cta:hover { transform: translateY(-1px); box-shadow: 0 18px 48px rgba(var(--c-accent-rgb),0.30); filter: brightness(1.05); }
.sx-ghost { transition: border-color .2s, background .2s, color .2s; }
.sx-ghost:hover { border-color: var(--c-border-strong); background: var(--c-card-hover); }
.sx-social { transition: color .18s cubic-bezier(.16,1,.3,1), transform .18s cubic-bezier(.16,1,.3,1); }
.sx-social:hover { color: var(--c-text-primary); transform: translateY(-1px); }
.sx-nav { padding: 0 40px; }
.sx-nav-actions { display: flex; align-items: center; gap: 14px; }
.sx-nav-cta { white-space: nowrap; }
.sx-stat-row { display: grid; grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr); justify-content: center; align-items: stretch; width: min(100%,900px); margin: 52px auto 0; }
.sx-stat { min-width: 0; padding: 0 22px; text-align: center; }
.sx-stat-divider { width: 1px; background: var(--c-border); }
[data-pin-reveal] { will-change: opacity, transform; }
/* Pinned problem block: on tall viewports the copy sits above the geometric
 centre (bottom padding grows with the viewport) so it arrives sooner after
 the hero; on short viewports there is no slack, so it centres symmetrically. */
.sx-problem { margin-top: -6vh; }
.sx-pin-box { padding: 56px 40px; }
/* Solution block: same hand-off : starts just inside the problem block's exit
 and seats its copy above centre (the chart makes it tall, so the lift is smaller). */
.sx-solution { margin-top: -6vh; }
@media (max-height: 640px) {
.sx-problem { margin-top: -10vh; }
.sx-pin-box { padding: 40px; }
.sx-solution { margin-top: 0; }
}
.sx-stat-caption { grid-column: 1 / -1; margin-top: 30px; text-align: center; font-family: 'Inter', system-ui, sans-serif; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-subtle); }
/* Products follow the solution block the same way the pinned blocks follow each other. */
/* Desk applications: pinned like the blocks before it : head first, then the
 three cards in sequence through the hold. Below 1400px the grid wraps and
 outgrows a screen, so the block flows and each card reveals as it enters. */
.sx-products { position: relative; margin-top: -6vh; height: 150vh; }
/* Closing block: flows (no hold), centred in the room above the footer so the
 last screen reads as one composition. */
.sx-access { position: relative; margin-top: -30vh; min-height: calc(100vh - 268px); display: flex; align-items: center; justify-content: center; padding: 96px 40px; background: transparent; }
.sx-access-inner { position: relative; width: 100%; max-width: 720px; margin: 0 auto; text-align: center; will-change: opacity, transform; }
/* Interfaces: a pinned text block after the gallery; four items on one hairline row. */
.sx-iface-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); column-gap: 32px; row-gap: 28px; width: min(100%,1040px); margin: 52px auto 0; text-align: left; }
.sx-iface-item { min-width: 0; border-top: 1px solid var(--c-border); padding-top: 18px; }
.sx-iface-label { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--c-accent); }
.sx-iface-desc { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--c-text-secondary); margin: 8px 0 0; }
@media (max-width: 1020px) { .sx-iface-grid { grid-template-columns: repeat(2,minmax(0,1fr)); width: min(100%,680px); margin-top: 44px; } }
@media (max-width: 520px) {
.sx-iface-grid { grid-template-columns: minmax(0,1fr); row-gap: 16px; margin-top: 34px; }
.sx-iface-item { padding-top: 14px; }
.sx-iface-desc { font-size: 13.5px; line-height: 1.5; }
.sx-interfaces .sx-pin-box { padding: 32px 24px; }
}
@media (max-width: 520px) and (max-height: 780px) {
.sx-interfaces h2 { font-size: 26px !important; }
.sx-interfaces [data-pin-content] > p { font-size: 14px !important; line-height: 1.5 !important; margin-top: 16px !important; }
.sx-iface-grid { row-gap: 8px; margin-top: 22px; }
.sx-iface-item { padding-top: 8px; }
.sx-iface-desc { font-size: 12.5px; line-height: 1.45; margin-top: 4px; }
}
@media (max-width: 640px) { .sx-access { margin-top: -10vh; min-height: 0; padding: 88px 24px 64px; } }
.sx-products-box { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 56px 32px; overflow: hidden; }
.sx-products-inner { width: 100%; will-change: opacity, transform; }
.sx-products-head { position: relative; z-index: 1; max-width: 840px; margin: 0 auto; text-align: center; }
.sx-product-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; max-width: 1440px; margin: 40px auto 0; align-items: stretch; }
.sx-product-card { position: relative; min-width: 0; box-sizing: border-box; padding: 28px; border: 1px solid var(--c-border); border-radius: 16px; background: var(--c-card); box-shadow: 0 20px 60px rgba(var(--c-bg-rgb),0.12); display: grid; grid-template-rows: minmax(132px,auto) 310px; row-gap: 18px; overflow: hidden; }
.sx-product-copy { min-width: 0; text-align: left; }
.sx-product-meta { display: flex; align-items: center; justify-content: flex-start; min-height: 12px; font-family: 'Inter', system-ui, sans-serif; font-size: 11px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; }
.sx-product-descriptor { color: var(--c-accent); font-weight: 500; }
.sx-product-name { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: clamp(28px,2.4vw,38px); line-height: 1.08; letter-spacing: -.03em; color: var(--c-text-primary); margin: 16px 0 0; max-width: none; }
.sx-product-body { width: 100%; font-family: 'Inter', system-ui, sans-serif; font-weight: 300; font-size: clamp(14px,1vw,17px); line-height: 1.52; color: var(--c-text-secondary); margin: 12px 0 0; max-width: none; text-wrap: normal; }
.sx-product-body span { display: inline; white-space: normal; }
.sx-product-viz { min-width: 0; height: 310px; padding: 0; border-top: 1px solid var(--c-border); overflow: hidden; background: transparent; }
.sx-surface-visual { min-width: 0; min-height: 0; }
@media (max-width: 1399px) {
.sx-products { height: auto; padding: clamp(88px,7vw,120px) 24px clamp(120px,10vw,164px); }
.sx-products-box { position: static; height: auto; padding: 0; overflow: visible; }
.sx-product-grid { max-width: 1200px; }
}
@media (max-width: 1020px) {
.sx-products { padding-left: 20px; padding-right: 20px; }
.sx-product-grid { grid-template-columns: minmax(0,1fr); gap: 16px; margin-top: 42px; max-width: 600px; }
.sx-product-card { grid-template-rows: minmax(124px,auto) 280px; row-gap: 16px; }
.sx-product-viz { height: 280px; }
}
@media (max-width: 520px) {
.sx-product-card { padding: 20px; border-radius: 14px; grid-template-rows: minmax(170px,auto) 250px; row-gap: 14px; }
.sx-product-viz { height: 250px; }
.sx-product-meta { letter-spacing: .12em; }
.sx-product-name { margin-top: 20px; font-size: 27px; }
.sx-product-body { font-size: 14px; line-height: 1.55; }
.sx-product-body { text-wrap: balance; }
.sx-product-body span { display: inline; white-space: normal; }
.sx-nav { padding-left: 20px !important; padding-right: 20px !important; }
.sx-nav-actions { gap: 8px; }
.sx-nav-cta { padding: 9px 13px !important; font-size: 12px !important; }
.sx-stat-row { grid-template-columns: minmax(0,1fr); width: min(100%,330px); margin-top: 40px; gap: 26px; }
.sx-stat { padding: 0 16px; }
.sx-stat-divider { display: none; }
.sx-stat-label { font-size: 8.5px !important; letter-spacing: .11em !important; }
.sx-cross-sticky { padding: 44px 20px !important; }
.sx-cross-chart { margin-top: 24px !important; padding: 12px !important; border-radius: 16px !important; }
.sx-cross-canvas { height: clamp(190px,28vh,220px) !important; }
}
@media (max-width: 900px) {
.sx-surfaces-section { height: 300vh !important; }
.sx-surface-panel { flex-basis: min(88vw,540px) !important; padding-left: 10px !important; padding-right: 10px !important; }
[data-surf-spacer] { flex-basis: calc((100vw - min(88vw,540px)) / 2 - clamp(20px,2vw,34px)) !important; }
.sx-surface-card { grid-template-columns: minmax(0,1fr) !important; gap: 16px !important; padding: 20px !important; }
.sx-surface-visual canvas { height: clamp(180px,28vh,220px) !important; }
}
/* A card taller than its band keeps its top edge (kicker + title) instead of
 being centred and clipped at both ends. Browsers without the safe keyword
 keep the inline centring. */
.sx-surface-panel { justify-content: safe center !important; }
/* Phones: the gallery band is the viewport minus the section header, so the
 header is compacted and the cards tightened until the tallest card fits. */
@media (max-width: 520px) {
[data-surf-header] { padding: 26px 24px 10px !important; gap: 10px !important; }
.sx-surf-intro { font-size: 14px !important; line-height: 1.5 !important; }
.sx-surf-band { padding-bottom: 14px !important; }
.sx-surface-panel { padding-top: 6px !important; padding-bottom: 6px !important; }
.sx-surface-card { padding: 18px !important; gap: 14px !important; }
.sx-surface-kicker { margin-bottom: 14px !important; }
.sx-surface-card > div > p { margin-top: 12px !important; text-wrap: pretty; } /* long phone paragraphs: no single-word last line (balance stops at six lines) */
.sx-surface-visual canvas { height: clamp(170px,25vh,216px) !important; }
}
/* 320-wide phones: the band cannot hold the intro and a full card, so the
 intro yields and the visuals shorten. */
@media (max-width: 340px) {
.sx-pin-box { padding: 32px 20px !important; }
.sx-stat-row { gap: 14px !important; margin-top: 28px !important; }
.sx-stat-value { font-size: 24px !important; }
.sx-surf-intro { display: none !important; }
.sx-interfaces [data-pin-content] > p { display: none !important; }
.sx-iface-desc { font-size: 12.5px !important; }
[data-surf-header] { padding-bottom: 4px !important; }
.sx-surface-card .sx-surface-visual canvas { height: 124px !important; } /* outranks the short-phone rule below */
}
/* Short laptop viewports (1366×768, 1280×720 browsers): the gallery band is the
 viewport minus the header, so both scale with height until the tallest card fits. */
@media (max-height: 780px) and (min-width: 901px) {
[data-surf-header] { gap: 10px !important; }
.sx-surface-card { padding-top: clamp(20px,3.6vh,46px) !important; padding-bottom: clamp(20px,3.6vh,46px) !important; }
.sx-surface-visual canvas { height: clamp(220px,36vh,400px) !important; }
}
@media (max-height: 780px) and (min-width: 521px) {
.sx-cross-sticky { padding-top: 40px !important; padding-bottom: 40px !important; }
.sx-cross-chart { margin-top: 20px !important; }
.sx-cross-canvas { height: clamp(250px,34vh,300px) !important; }
}
@media (max-width: 520px) and (max-height: 780px) {
[data-surf-header] { padding-top: 18px !important; padding-bottom: 6px !important; gap: 8px !important; }
.sx-surf-band { padding-bottom: 10px !important; }
.sx-surf-intro { font-size: 14px !important; line-height: 1.5 !important; }
[data-surf-header] h2 { font-size: 20px !important; }
.sx-surface-panel { padding-top: 0 !important; padding-bottom: 0 !important; }
.sx-cross-sticky { padding-top: 30px !important; padding-bottom: 30px !important; }
.sx-cross-chart { margin-top: 18px !important; }
.sx-cross-canvas { height: 180px !important; }
.sx-surface-card { gap: 8px !important; padding: 12px !important; }
.sx-surface-kicker { margin-bottom: 10px !important; }
.sx-surface-card h3 { font-size: 23px !important; }
.sx-surface-card > div > p { margin-top: 10px !important; font-size: 13px !important; line-height: 1.5 !important; }
.sx-surface-visual canvas { height: 184px !important; }
.sx-surface-visual > div > div { padding-top: 7px !important; padding-bottom: 7px !important; }
}
/* Short viewports: the solution copy is taller than the box, so anchor it to
 the top (keeps eyebrow + heading intact) and shrink the chart to fit. */
@media (max-height: 640px) and (min-width: 521px) {
.sx-cross-sticky { align-items: flex-start !important; padding: 40px 40px 24px !important; }
.sx-cross-chart { margin-top: 18px !important; }
.sx-cross-canvas { height: clamp(150px, calc(100vh - 300px), 260px) !important; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.sx-cta, .sx-ghost, .sx-social, [data-reveal] { transition-duration: .01ms !important; }
}

/* ===== 3. ARCIDEX additions (token controls, brand mark, toast, legal pages, 404) ===== */
/* Brand mark: a PNG cut from the logo. 22px in the nav, 20px in the footer, 6px radius (SPEC 2.1). */
.sx-mark { display: block; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; object-fit: cover; }
.sx-mark-sm { width: 20px; height: 20px; border-radius: 5px; }
/* Buy $ARCIDEX and Copy CA: one module (js/shell-token.js), two homes (nav row, footer). While the coin's
   fields in js/config.js are blank they render as visible, disabled controls carrying a "Soon" tag. */
.sx-token-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sx-token { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--c-border); background: transparent; color: var(--c-text-secondary); font: 500 13px/1 'Inter', system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; cursor: pointer; text-decoration: none; }
.sx-token:hover { color: var(--c-text-primary); }
.sx-token[aria-disabled="true"] { cursor: not-allowed; color: var(--c-text-muted); }
.sx-token[aria-disabled="true"]:hover { border-color: var(--c-border); background: transparent; color: var(--c-text-muted); }
.sx-soon { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: rgba(var(--c-accent-rgb), .12); color: var(--c-accent); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
/* Header space is a budget: below 640px the pair lives in the footer only; the toggle and the CTA always survive. */
@media (max-width: 640px) { .sx-nav-actions .sx-token-controls { display: none; } }
@media (max-width: 520px) { .sx-token { height: 32px; padding: 0 11px; font-size: 12px; } }
.sx-footer-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Legal pages: a plain article in the site tokens under the same nav. */
.sx-legal { position: relative; max-width: 720px; margin: 0 auto; padding: 132px 40px 96px; }
.sx-legal-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: 'Inter', system-ui, sans-serif; font-size: 10px; letter-spacing: 0.24em; color: var(--c-accent); font-weight: 500; margin-bottom: 22px; text-transform: uppercase; }
.sx-legal-eyebrow span { width: 22px; height: 1px; background: var(--c-accent); opacity: 0.45; }
.sx-legal h1 { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -0.03em; color: var(--c-text-primary); margin: 0; }
.sx-legal-meta { font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 300; color: var(--c-text-subtle); margin: 14px 0 0; }
.sx-legal h2 { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; color: var(--c-text-primary); margin: 44px 0 12px; }
.sx-legal p, .sx-legal li { font-family: 'Inter', system-ui, sans-serif; font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--c-text-secondary); margin: 0 0 14px; }
.sx-legal ul { padding-left: 22px; margin: 0 0 14px; }
.sx-legal li { margin-bottom: 8px; }
.sx-legal a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.sx-legal .sx-legal-lead { font-size: clamp(16px, 1.4vw, 18px); color: var(--c-text-secondary); margin-top: 28px; }
@media (max-width: 520px) { .sx-legal { padding: 108px 20px 64px; } .sx-legal h2 { margin-top: 36px; } .sx-legal p, .sx-legal li { font-size: 15px; } }
/* 404: one centred block in the hero tokens. */
.sx-notfound { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 40px 96px; text-align: center; }
.sx-notfound-inner { max-width: 640px; }
.sx-notfound h1 { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: clamp(34px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.035em; color: var(--c-text-primary); margin: 0; }
.sx-notfound p { font-family: 'Inter', system-ui, sans-serif; font-weight: 300; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: var(--c-text-secondary); max-width: 480px; margin: 22px auto 0; }
.sx-notfound-actions { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
@media (max-width: 520px) { .sx-notfound { padding: 100px 20px 64px; } }
/* The hero title is one line longer than the reference's; below 420px it steps down so "Robinhood Chain" never breaks mid-name. */
@media (max-width: 420px) { #top h1 { font-size: 36px !important; } }
@media (max-width: 340px) { #top h1 { font-size: 32px !important; } #top p { font-size: 14px !important; } }

/* ---------------------------------------------------------------------------------------------
   Touch targets on phones and small tablets. The reference is built for a mouse: its footer links,
   theme toggle and nav button are 16 to 35px tall, which is under the 40px a finger needs. Desktop
   keeps the reference sizes exactly; only coarse-pointer widths grow, and the text links grow by
   padding that a negative margin cancels, so nothing moves on the page.
   --------------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  footer a {
    min-height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    margin: 0 -6px;
  }
  .sx-nav a[aria-label^="ARCIDEX"] { min-height: 40px; }
  .sx-nav button[aria-label^="Switch to"] { height: 40px !important; width: 40px !important; }
  .sx-nav-cta { min-height: 40px; }
}

/* Short laptop viewports (1440x640, 1440x780): the desk applications block holds a full screen, but
   two cards with a 310px visual are taller than 640px of viewport, so the heading was clipped by the
   sticky box. Scale the visual and the padding with the height until the block fits. */
@media (max-height: 820px) and (min-width: 1400px) {
  .sx-products-box { padding: 24px 32px; }
  .sx-products-head h2 { font-size: clamp(26px, 3.2vw, 42px); }
  .sx-product-grid { margin-top: 24px; }
  .sx-product-card { padding: 22px; grid-template-rows: minmax(118px, auto) clamp(170px, 30vh, 310px); row-gap: 12px; }
  .sx-product-viz { height: clamp(170px, 30vh, 310px); }
}

/* Short phones (375x640): the problem block's stat row and its caption did not fit the pinned box. */
@media (max-width: 520px) and (max-height: 700px) {
  .sx-problem .sx-pin-box { padding: 24px 20px; }
  .sx-problem h2 { font-size: 26px !important; }
  .sx-problem [data-pin-content] > p { font-size: 14px !important; line-height: 1.5 !important; margin-top: 14px !important; }
  .sx-problem .sx-stat-row { margin-top: 22px !important; gap: 12px !important; }
  .sx-problem .sx-stat-value { font-size: 23px !important; }
  .sx-problem .sx-stat-label { margin-top: 6px !important; }
  .sx-stat-caption { margin-top: 14px; }
}

/* 1440x640: the solution block's sticky box was 4px short of its own content. */
@media (max-height: 660px) and (min-width: 1200px) {
  .sx-cross-sticky { padding-bottom: 18px !important; }
  .sx-cross-canvas { height: clamp(150px, calc(100vh - 320px), 250px) !important; }
}