/* ReliFrame marketing site — shared styles.
 *
 * Extracted from index.html so every page shares one stylesheet instead of
 * carrying its own copy. The site has no build step, so a copy per page would
 * be a copy that drifts.
 */

/* ─── CSS Custom Properties ───────────────────────────────────── */
:root {
  --teal-dark:   #085041;
  --teal-mid:    #1D9E75;
  --teal-light:  #5DCAA5;
  --teal-pale:   #9FE1CB;
  --teal-xp:     #E1F5EE;
  --near-black:  #121413;
  --off-white:   #FAFAF8;
  --mid-grey:    #5F5E5A;

  --bg:          #121413;
  --bg-surface:  #181a19;
  --bg-card:     #1c1f1d;
  --border:      rgba(93, 202, 165, 0.12);
  --border-subtle: rgba(255,255,255,0.06);
  --text-primary: #FAFAF8;
  --text-muted:  rgba(250, 250, 248, 0.55);
  /* Deliberately the same value as --text-muted.
   *
   * This was rgba(…, 0.32), which composites to 2.83:1 on --bg — and it is
   * used only for 0.58rem–0.65rem text, the smallest type on the site. There
   * is no alpha that makes a third tier both readable and distinguishable
   * from --text-muted: 0.60 is the first that clears 4.5:1, and by then it IS
   * --text-muted.
   *
   * So the third tier is gone as a colour. It survives as a name, aliased, so
   * the 12 call sites keep their intent and nobody re-lowers it by hand.
   * Hierarchy below --text-muted comes from size and weight, not from fading
   * text out until it cannot be read. */
  --text-dim:    var(--text-muted);

  /* Teal that is legible as TEXT. --teal-light is tuned for the dark ground
     and falls to about 1.9:1 on the light one, so anything a reader has to
     READ (rather than merely notice) uses this instead. Measured, not
     guessed: scratchpad/contrast2.mjs composites alpha and checks both
     schemes. Older components still use --teal-light directly and are below
     4.5:1 in light mode; that is a pre-existing gap, not this token's job. */
  --teal-text:   #5DCAA5;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;

  --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.25);
  --shadow-glow: 0 0 40px rgba(29, 158, 117, 0.18);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:          #FAFAF8;
    --bg-surface:  #f3f7f5;
    --bg-card:     #ffffff;
    --border:      rgba(8, 80, 65, 0.14);
    --border-subtle: rgba(0,0,0,0.07);
    --text-primary: #121413;
    --text-muted:  rgba(18, 20, 19, 0.6);
    --text-dim:    var(--text-muted);   /* see the note in :root */
    --teal-text:   #0B6248;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
    --shadow-glow: 0 0 40px rgba(29, 158, 117, 0.12);
  }
}

/* ─── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input { font-family: inherit; }

/* ─── Typography helpers ──────────────────────────────────────── */
.font-serif   { font-family: 'DM Serif Display', serif; }
.font-mono    { font-family: 'DM Mono', monospace; }
.font-sans    { font-family: 'Outfit', sans-serif; }
.italic       { font-style: italic; }
.teal         { color: var(--teal-mid); }

/* ─── Layout ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 768px) {
  .container { padding: 0 2.5rem; }
}

/* ─── Fade-in animation (Intersection Observer) ───────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-up.delay-1 { transition-delay: 0.1s; }
.fade-up.delay-2 { transition-delay: 0.2s; }
.fade-up.delay-3 { transition-delay: 0.3s; }
.fade-up.delay-4 { transition-delay: 0.4s; }
.fade-up.delay-5 { transition-delay: 0.5s; }

/* ─── Section label ───────────────────────────────────────────── */
.section-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-light);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.section-label::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--teal-mid);
  flex-shrink: 0;
}

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.btn:focus-visible {
  outline: 2px solid var(--teal-mid);
  outline-offset: 3px;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--teal-mid);
  color: var(--near-black);
}
.btn-primary:hover {
  background: var(--teal-light);
  box-shadow: 0 4px 20px rgba(29, 158, 117, 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--teal-pale);
  color: var(--teal-pale);
}

/* ─── NAV ─────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.nav.scrolled {
  background: rgba(18, 20, 19, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--border-subtle);
}
@media (prefers-color-scheme: light) {
  .nav.scrolled {
    background: rgba(250, 250, 248, 0.88);
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 64px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  text-decoration: none;
}
.nav-logo-mark {
  width: 34px;
  height: 34px;
}
.nav-wordmark {
  font-family: 'DM Serif Display', serif;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.nav-wordmark .reli  { color: var(--text-primary); }
.nav-wordmark .frame { font-style: italic; color: var(--teal-mid); }

/* Nav links */
/* The desktop nav appears at 920px, not the 768px the rest of the site uses.
   Seven links plus the waitlist button need 896px of intrinsic width; at 800px
   the button sat 96px off-screen and could not be clicked. Below 920px the
   hamburger takes over, and every page's mobile menu carries the same links
   and the same CTA, so nothing is lost. Adding an eighth nav link means
   re-measuring this number, not assuming it still holds. */
.nav-links {
  display: none;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}
@media (min-width: 920px) {
  .nav-links { display: flex; }
}
.nav-links a {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover {
  color: var(--text-primary);
  background: var(--border-subtle);
}

/* Nav CTAs */
.nav-ctas {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
}
@media (min-width: 920px) {
  .nav-ctas { display: flex; }
}
.btn-nav-ghost {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.btn-nav-ghost:hover { color: var(--text-primary); border-color: var(--teal-pale); }
.btn-nav-primary {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  background: var(--teal-mid);
  color: var(--near-black);
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.btn-nav-primary:hover { background: var(--teal-light); }

/* Hamburger */
.nav-hamburger {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 8px;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
@media (min-width: 920px) {
  .nav-hamburger { display: none; }
}
.nav-hamburger:hover { background: var(--border-subtle); }
.nav-hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1.5rem 1.25rem;
  background: rgba(18, 20, 19, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-subtle);
}
@media (prefers-color-scheme: light) {
  .nav-mobile { background: rgba(250, 250, 248, 0.97); }
}
.nav-mobile.open { display: flex; }
@media (min-width: 920px) {
  .nav-mobile { display: none !important; }
}
.nav-mobile a {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
  padding: 0.6rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.nav-mobile a:hover { color: var(--text-primary); background: var(--border-subtle); }
.nav-mobile .mobile-ctas {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--border-subtle);
}
.nav-mobile .mobile-ctas a { flex: 1; justify-content: center; }

/* ─── HERO ────────────────────────────────────────────────────── */
.hero {
  padding: 140px 0 80px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .hero { padding: 160px 0 100px; }
}

/* Background radial glow */
.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(29, 158, 117, 0.13) 0%, transparent 70%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 480px;
    gap: 5rem;
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-pale);
  background: rgba(29, 158, 117, 0.06);
  margin-bottom: 1.5rem;
}
.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-mid);
  flex-shrink: 0;
  animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.hero h1 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  max-width: 15ch;
}
.hero h1 em {
  font-style: italic;
  color: var(--teal-mid);
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 48ch;
  margin-bottom: 2.25rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.hero-standards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.std-pill {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 100px;
  border: 1px solid rgba(93, 202, 165, 0.2);
  color: var(--teal-pale);
  background: rgba(29, 158, 117, 0.05);
  white-space: nowrap;
}

/* ─── Hero GSN SVG Diagram ────────────────────────────────────── */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.gsn-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-card), var(--shadow-glow);
  width: 100%;
  max-width: 460px;
  position: relative;
}
.gsn-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.gsn-card-title {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal-light);
}
.gsn-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gsn-badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse-dot 2s ease infinite;
}
.gsn-badge .badge-ok { color: #22c55e; }
.gsn-badge .badge-warn { color: #f59e0b; }

/* The actual SVG diagram inside the card */
.gsn-diagram {
  width: 100%;
  height: auto;
}

/* Node animations
 *
 * The animation is on .gsn-node-fx, the INNER group, never on .gsn-node itself.
 * .gsn-node carries transform="translate(x,y)" in the markup, and a CSS
 * transform does not compose with that attribute — it replaces it. Animating
 * the same element therefore threw away every node's position and stacked all
 * six on the origin, in the top-left corner of the card.
 *
 * transform-box/transform-origin make the scale happen about each node's own
 * centre. Without them an SVG element scales about the SVG viewport origin,
 * which slides the node across the diagram as it grows. */
.gsn-node-fx {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: gsn-node-in 0.4s ease forwards;
}
/* Indices count nodes because .gsn-nodes wraps them. Addressed as direct
 * children of <svg> they shared numbering with <defs> and the edge group. */
.gsn-nodes > .gsn-node:nth-child(1) .gsn-node-fx { animation-delay: 0.2s; }
.gsn-nodes > .gsn-node:nth-child(2) .gsn-node-fx { animation-delay: 0.4s; }
.gsn-nodes > .gsn-node:nth-child(3) .gsn-node-fx { animation-delay: 0.6s; }
.gsn-nodes > .gsn-node:nth-child(4) .gsn-node-fx { animation-delay: 0.8s; }
.gsn-nodes > .gsn-node:nth-child(5) .gsn-node-fx { animation-delay: 1.0s; }
.gsn-nodes > .gsn-node:nth-child(6) .gsn-node-fx { animation-delay: 1.2s; }

@keyframes gsn-node-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* Edge animations */
.gsn-edge {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: gsn-edge-in 0.35s ease forwards;
}
.gsn-edge:nth-child(1) { animation-delay: 0.5s; }
.gsn-edge:nth-child(2) { animation-delay: 0.7s; }
.gsn-edge:nth-child(3) { animation-delay: 0.9s; }
.gsn-edge:nth-child(4) { animation-delay: 1.1s; }
.gsn-edge:nth-child(5) { animation-delay: 1.3s; }
@keyframes gsn-edge-in {
  to { stroke-dashoffset: 0; }
}

/* Validation badges inside diagram */
.gsn-val {
  opacity: 0;
  animation: gsn-val-in 0.3s ease forwards;
}
.gsn-vals > .gsn-val:nth-child(1) { animation-delay: 1.6s; }
.gsn-vals > .gsn-val:nth-child(2) { animation-delay: 1.75s; }
.gsn-vals > .gsn-val:nth-child(3) { animation-delay: 1.9s; }
.gsn-vals > .gsn-val:nth-child(4) { animation-delay: 2.05s; }
@keyframes gsn-val-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── SOCIAL PROOF BAR ────────────────────────────────────────── */
.proof-bar {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  padding: 2rem 0;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .proof-grid { grid-template-columns: repeat(4, 1fr); }
}
.proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}
.proof-stat {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 400;
  color: var(--teal-light);
  line-height: 1;
}
.proof-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── PRODUCT SUITE ───────────────────────────────────────────── */
.suite {
  padding: 100px 0;
}
.suite-header {
  max-width: 540px;
  margin-bottom: 3.5rem;
}
.suite-header h2 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-top: 0.75rem;
}
.suite-header h2 em {
  font-style: italic;
  color: var(--teal-mid);
}

.suite-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .suite-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .suite-grid { grid-template-columns: repeat(3, 1fr); }
}

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.product-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.product-card.live {
  border-color: rgba(29, 158, 117, 0.3);
}
.product-card.live:hover {
  border-color: rgba(29, 158, 117, 0.55);
  box-shadow: var(--shadow-card), 0 0 24px rgba(29, 158, 117, 0.1);
}
.product-card.indev {
  border-color: rgba(245, 158, 11, 0.2);
}
.product-card.indev:hover {
  border-color: rgba(245, 158, 11, 0.4);
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  background: rgba(29, 158, 117, 0.1);
  color: var(--teal-mid);
}
.product-card.indev .card-icon {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
}
.product-card.planned .card-icon {
  background: rgba(255,255,255,0.04);
  color: var(--mid-grey);
}

.card-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.card-desc {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
}
.badge-live {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.badge-indev {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.22);
}
.badge-planned {
  background: rgba(255,255,255,0.04);
  color: var(--mid-grey);
  border: 1px solid var(--border-subtle);
}
.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Plan badges. The suite used to badge apps Live / In development / Planned,
   which understated the product: every app listed is built. What actually
   varies is which plan includes it, so that is what the badge now says. */
.badge-community {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.badge-pro {
  background: rgba(29, 158, 117, 0.08);
  color: var(--teal-mid);
  border: 1px solid rgba(29, 158, 117, 0.28);
}
.product-card.community { border-color: rgba(34, 197, 94, 0.22); }
.product-card.community:hover { border-color: rgba(34, 197, 94, 0.4); }
.product-card.professional { border-color: rgba(29, 158, 117, 0.18); }
.product-card.professional:hover {
  border-color: rgba(29, 158, 117, 0.45);
  box-shadow: var(--shadow-card), 0 0 24px rgba(29, 158, 117, 0.08);
}

.suite-note {
  margin-top: 1.75rem;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-muted);
  max-width: 46rem;
}

/* ─── INDUSTRIES MATRIX ───────────────────────────────────────── */
/* A CSS grid, not a <table>: index.html loads site.css ONLY, and every table
   rule on this site lives in page.css. A <table> here would render unstyled.
   The row vocabulary mirrors .mockup-row so the two read as one system. */
.industries { padding: 5rem 0; background: var(--bg-surface); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }

.ind-table { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.5rem; }

.ind-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  transition: border-color 0.2s ease;
}
.ind-row:hover { border-color: rgba(29, 158, 117, 0.35); }
@media (min-width: 800px) {
  /* industry | standard | analyses. The analyses column takes the slack. */
  .ind-row { grid-template-columns: 11rem 11rem 1fr; align-items: baseline; }
}

.ind-name { font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 500; color: var(--text-primary); }
.ind-std {
  font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--teal-text);
}
.ind-analyses { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Required vs typical, distinguished by weight rather than by colour alone —
   the difference has to survive a monochrome print and a colour-blind reader. */
.ind-chip {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ind-chip:hover { border-color: var(--teal-mid); color: var(--text-primary); }
.ind-chip.req {
  border-color: rgba(29, 158, 117, 0.4);
  background: rgba(29, 158, 117, 0.08);
  color: var(--teal-text);
  font-weight: 500;
}
.ind-chip.req:hover { border-color: var(--teal-mid); }

.ind-key {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin-top: 1.5rem; font-size: 0.8rem; color: var(--text-muted);
}
.ind-key span { display: inline-flex; align-items: center; gap: 0.4rem; }
.ind-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ind-key .k-req { background: rgba(29, 158, 117, 0.35); border: 1px solid rgba(29, 158, 117, 0.5); }
.ind-key .k-typ { background: transparent; border: 1px solid var(--border); }

.ind-note { margin-top: 1.5rem; font-size: 0.85rem; font-weight: 300; color: var(--text-muted); max-width: 46rem; }
.ind-note a { color: var(--teal-text); }

/* ─── PLATFORM ────────────────────────────────────────────────── */
/* Deliberately NOT cards. These are shared capabilities rather than twelve
   more products, and boxing them would read as another app grid. */
.platform { padding: 5rem 0; }
.platform-lede {
  margin-top: 1rem;
  max-width: 44rem;
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-muted);
}
.platform-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 3rem;
  margin-top: 3rem;
}
@media (min-width: 768px) { .platform-grid { grid-template-columns: repeat(2, 1fr); } }
.platform-group h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-mid);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.platform-group ul { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }
.platform-group li {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-muted);
  padding-left: 1rem;
  position: relative;
}
.platform-group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal-mid);
  opacity: 0.5;
}
.platform-group li b { font-weight: 500; color: var(--text-primary); }

/* ─── FEATURES ────────────────────────────────────────────────── */
.features {
  padding: 100px 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.features-header {
  margin-bottom: 3.5rem;
}
.features-header h2 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 0.75rem;
  max-width: 20ch;
}

.features-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .features-layout {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.feature-item {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(29, 158, 117, 0.1);
  color: var(--teal-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.feature-copy h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.feature-copy p {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Mockup panel */
.features-mockup {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.mockup-topbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mockup-dot.red    { background: #ef4444; opacity: 0.7; }
.mockup-dot.amber  { background: #f59e0b; opacity: 0.7; }
.mockup-dot.green  { background: #22c55e; opacity: 0.7; }
.mockup-topbar-title {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-left: auto;
}
.mockup-rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mockup-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.7fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
}
.mockup-row.header-row {
  background: transparent;
  padding-bottom: 0.25rem;
}
.mockup-row.header-row span {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mockup-row.linked {
  border-color: rgba(29, 158, 117, 0.2);
  background: rgba(29, 158, 117, 0.03);
}
.mockup-row.warn {
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.03);
}
.mockup-cell-main {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-primary);
}
.mockup-cell-mono {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--text-muted);
}
.mockup-cell-link {
  font-size: 0.72rem;
  color: var(--teal-light);
}
.mockup-cell-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.57rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
}
.cb-green { background: rgba(34,197,94,0.12); color: #4ade80; }
.cb-amber { background: rgba(245,158,11,0.12); color: #fbbf24; }
.cb-grey  { background: rgba(255,255,255,0.05); color: var(--mid-grey); }

/* ─── STANDARDS STRIP ─────────────────────────────────────────── */
.standards {
  padding: 72px 0;
}
.standards-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .standards-inner {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }
}
.standards-label-col {
  flex-shrink: 0;
}
.standards-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.std-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-card);
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.std-tag:hover {
  color: var(--teal-pale);
  border-color: rgba(93, 202, 165, 0.35);
  background: rgba(29, 158, 117, 0.06);
}

/* ─── CTA SECTION ─────────────────────────────────────────────── */
.cta-section {
  padding: 100px 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
}
.cta-inner {
  max-width: 580px;
}
.cta-inner h2 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.cta-inner h2 em {
  font-style: italic;
  color: var(--teal-mid);
}
.cta-sub {
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.cta-sub strong {
  color: var(--teal-pale);
  font-weight: 400;
}
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ─── FOOTER ──────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border-subtle);
  padding: 3.5rem 0 2rem;
  background: var(--bg);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 3rem;
  }
}
.footer-brand {}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.footer-logo-mark { width: 28px; height: 28px; }
.footer-wordmark {
  font-family: 'DM Serif Display', serif;
  font-size: 1.15rem;
  line-height: 1;
}
.footer-wordmark .reli  { color: var(--text-primary); }
.footer-wordmark .frame { font-style: italic; color: var(--teal-mid); }

.footer-tagline {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-muted);
  margin-bottom: 1rem;
  max-width: 26ch;
}
.footer-domain {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--teal-pale);
}

.footer-col-title {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1rem;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.footer-links a {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--text-muted);
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--teal-pale); }

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.footer-copy {
  font-family: 'DM Mono', monospace;
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

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

/* ─── Skip link ───────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--teal-mid);
  color: var(--near-black);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.875rem;
  z-index: 200;
  transition: top 0.15s;
}
.skip-link:focus { top: 1rem; }

/* ─── Focus styles ────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--teal-mid);
  outline-offset: 3px;
}

/* ─── Divider line ────────────────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border-subtle);
}

/* The suite grid used to hold five cards, so at two columns the fifth sat
   alone and this rule centred it. There are twelve now — divisible by both
   two and three — so nothing is orphaned, and the rule would instead stretch
   a card that has a neighbour. Removed rather than adjusted: an :nth-child
   trick here would break again on the next app. */

/* ─── Reduced motion ──────────────────────────────────────────────
 *
 * The site had no prefers-reduced-motion handling at all. Everything here is
 * decoration — entrance fades, the GSN diagram assembling itself, a pulsing
 * badge dot — so for a reader who has asked for less movement the right
 * answer is to show the finished state immediately, not a faster version of
 * the same motion.
 *
 * Written as explicit end states rather than `animation: none`, because these
 * elements start at opacity 0 and would otherwise stay invisible. */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .gsn-node-fx,
  .gsn-val {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .gsn-edge {
    stroke-dashoffset: 0;
    animation: none;
  }
  .gsn-badge .dot { animation: none; }

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