/* ============================================================
   Dynamico Systems — 2026 redesign
   Design system inspired by premiercs.com:
   pale-lavender canvas, inset near-black rounded panels,
   Outfit type at display sizes, teal→blue electric accents,
   [ bracketed ] eyebrows, pill CTAs with arrow chips.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --canvas: #e8ebf4;          /* pale lavender-grey page background */
  --canvas-deep: #dde1ee;
  --panel: #06070c;           /* near-black inset panel */
  --panel-2: #0b0d15;
  --ink: #0a0b10;             /* text on light */
  --ink-soft: #3c4152;
  --paper: #ffffff;
  --mist: rgba(255,255,255,.62);      /* text on dark, muted */
  --mist-soft: rgba(255,255,255,.38);
  --teal: #28d3b4;
  --teal-deep: #0da88c;
  --blue: #3e8bff;
  --indigo: #12183a;
  --grad: linear-gradient(94deg, #28d3b4, #3e8bff);
  --glow-teal: rgba(31, 201, 169, .32);
  --glow-blue: rgba(38, 74, 214, .38);
  --danger: #ff5d5d;
  --radius-panel: 26px;
  --radius-card: 18px;
  --radius-pill: 999px;
  --gutter: clamp(20px, 4vw, 56px);
  --panel-inset: clamp(6px, 1vw, 14px);
  --section-y: clamp(64px, 9vw, 130px);
  --max: 1240px;
  --nav-h: 90px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  overflow-x: clip; /* clip (not hidden) keeps position:sticky working and stops layout-viewport expansion on phones */
}
@media (max-width: 640px) {
  .glow { width: 90vw !important; height: 90vw !important; } /* oversized glows expand the layout viewport on phones */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1,h2,h3,h4,h5,h6 { margin: 0 0 .5em; font-weight: 400; line-height: 1.08; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
::selection { background: rgba(40,211,180,.35); }
:focus-visible { outline: 3px solid #17b598; outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .panel :focus-visible { outline-color: #4fe0c4; }

.d1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 350; }
.d2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 350; }
.d3 { font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 400; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft); }
.on-dark .lead { color: var(--mist); }
.small { font-size: .88rem; }

.container { width: min(100% - 2*var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .82rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: .45em 1.1em; border: 1px solid rgba(10,11,16,.18);
  border-radius: var(--radius-pill); margin-bottom: 1.6em;
  background: rgba(255,255,255,.5);
}
.eyebrow::before { content: '['; color: var(--teal-deep); font-weight: 600; }
.eyebrow::after  { content: ']'; color: var(--teal-deep); font-weight: 600; }
.on-dark .eyebrow { color: var(--mist); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); }
.on-dark .eyebrow::before, .on-dark .eyebrow::after { color: var(--teal); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 2px;
  border: 0; border-radius: var(--radius-pill);
  font-weight: 500; font-size: 1rem; line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn > .btn-label {
  background: var(--grad); color: #04110d;
  padding: 1em 1.5em; border-radius: var(--radius-pill);
}
.btn > .btn-chip {
  width: 3em; height: 3em; border-radius: 50%;
  background: var(--grad); display: grid; place-items: center;
  color: #04110d; flex: none;
}
.btn > .btn-chip svg { width: 1em; height: 1em; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(40,211,180,.55); }
.btn.ghost > .btn-label { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px rgba(10,11,16,.3); }
.btn.ghost > .btn-chip { background: rgba(10,11,16,.08); color: inherit; }
.on-dark .btn.ghost > .btn-label { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.on-dark .btn.ghost > .btn-chip { background: rgba(255,255,255,.1); }
.btn.ghost:hover { box-shadow: 0 10px 30px -14px rgba(0,0,0,.5); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* text link */
.tlink { font-weight: 600; color: #0b6e5c; border-bottom: 1px solid transparent; transition: border-color .15s; }
.tlink:hover { border-color: currentColor; }
.on-dark .tlink { color: var(--teal); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 120;
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: box-shadow .25s ease;
}
.site-header.scrolled { box-shadow: 0 1px 0 rgba(10,11,16,.08), 0 12px 32px -20px rgba(10,11,16,.25); }
.nav-bar {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 30px;
}
.nav-logo { flex: none; display: flex; align-items: center; }
.nav-logo img { height: 62px; width: auto; display: block; }
@media (min-width: 1081px) and (max-width: 1240px) { .nav-logo img { height: 54px; } }
@media (max-width: 1080px) { .nav-logo img { height: 50px; } }
@media (max-width: 420px) { .nav-logo img { height: 44px; } }
.nav-menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-menu > .nav-item { position: relative; }
.nav-menu a.nav-link, .nav-menu button.nav-link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: .62em 1em; border-radius: var(--radius-pill);
  color: var(--ink-soft); font-weight: 500; font-size: .97rem;
  background: none; border: 0;
  transition: background .15s, color .15s;
}
.nav-menu a.nav-link:hover, .nav-menu button.nav-link:hover,
.nav-item.open > .nav-link { background: rgba(10,11,16,.07); color: var(--ink); }
.nav-link .caret { width: .6em; height: .6em; transition: transform .2s; }
.nav-item.open .caret { transform: rotate(180deg); }
.nav-cta { margin-left: 8px; }
.nav-cta .btn > .btn-label { padding: .78em 1.3em; font-size: .95rem; }
.nav-cta .btn > .btn-chip { width: 2.5em; height: 2.5em; }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 250px; padding: 10px;
  background: var(--paper); border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(10,20,40,.28), 0 0 0 1px rgba(10,11,16,.06);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-item.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: .65em .9em; border-radius: 10px;
  font-size: .95rem; color: var(--ink-soft); font-weight: 450;
}
.dropdown a:hover { background: rgba(40,211,180,.12); color: var(--ink); }
.dropdown .dd-note { font-size: .78rem; color: #565d75; padding: .2em .9em .4em; }
.dropdown .dd-tag { font-size: .68rem; font-weight: 600; letter-spacing: .06em; color: var(--teal-deep); background: rgba(40,211,180,.14); border-radius: 6px; padding: .15em .5em; margin-left: .5em; vertical-align: 1px; }

.nav-burger { display: none; margin-left: auto; background: none; border: 0; padding: 10px; }
.nav-burger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: transform .25s, opacity .25s; }

@media (max-width: 1080px) {
  .nav-menu {
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 110;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--paper); padding: 18px var(--gutter) 26px;
    box-shadow: 0 30px 60px -20px rgba(10,20,40,.3);
    display: none; max-height: calc(100dvh - var(--nav-h)); overflow: auto;
  }
  body.nav-open .nav-menu { display: flex; }
  .nav-burger { display: block; }
  .nav-cta { margin: 12px 0 0; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; padding: 0 0 6px 16px; display: none; min-width: 0;
  }
  .nav-item.open .dropdown { display: block; }
  body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Dark inset panel ---------- */
.panel {
  background: var(--panel); color: #fff;
  border-radius: var(--radius-panel);
  margin-inline: var(--panel-inset);
  position: relative; overflow: hidden; /* clips glows */
}
.panel + .panel { margin-top: var(--panel-inset); }

/* radial glows */
.glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.glow.teal { background: radial-gradient(closest-side, var(--glow-teal), transparent 70%); }
.glow.blue { background: radial-gradient(closest-side, var(--glow-blue), transparent 70%); }
.glow.warm { background: radial-gradient(closest-side, rgba(255,183,98,.16), transparent 70%); }

/* ---------- Hero ---------- */
.hero { padding-top: 0; }
.hero .panel { text-align: center; padding: clamp(70px, 9vw, 130px) 0 0; }
/* Premier-style: the dark hero starts as an inset rounded card and expands to
   full bleed as you scroll (scrubbed by JS; this is the resting/no-JS state).
   The backdrop is the original dynamicosystems.com hero artwork (blue gradient
   with flowing lines) under a dark overlay that keeps the type readable. */
.hero .panel[data-scrub="hero-clip"] {
  margin-inline: 0; border-radius: 0;
  clip-path: inset(10px 3.5vw 44px round 28px);
  background:
    linear-gradient(180deg, rgba(5,8,20,.42) 0%, rgba(5,8,20,.62) 55%, rgba(6,7,12,.92) 100%),
    url(../img/bg-hero.webp) center top / cover no-repeat,
    var(--panel);
}
@media (prefers-reduced-motion: reduce) {
  .hero .panel[data-scrub="hero-clip"] { clip-path: inset(6px 2vw 24px round 28px); }
}
.hero-inner { position: relative; z-index: 2; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .9rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 1.4em;
}
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); font-weight: 350; color: #fff; margin-bottom: .3em; }
.hero h1 .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 450; }
.hero .sub { max-width: 640px; margin: 0 auto 2em; color: var(--mist); font-size: clamp(1.02rem, 1.5vw, 1.2rem); }
.hero .btn-row { justify-content: center; }
.hero-shot { position: relative; z-index: 2; margin-top: clamp(48px, 6vw, 84px); }
.hero-shot .laptop { max-width: 980px; margin-inline: auto; }

/* laptop frame */
.laptop { position: relative; }
.laptop .screen {
  background: #10121c; border-radius: 18px; padding: 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 60px 120px -40px rgba(0,0,0,.8);
  overflow: hidden;
}
.laptop .screen img, .laptop .screen video { border-radius: 10px; width: 100%; display: block; }
.laptop .screen .yt { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.laptop .screen .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Premier-style scrubbed rise: the laptop starts low with the screen zoomed in,
   and settles as you scroll. JS drives the transforms; will-change keeps it smooth. */
[data-scrub="laptop"] .laptop { will-change: transform; }
[data-scrub="laptop"] .laptop .screen > img,
[data-scrub="laptop"] .laptop .screen > video { will-change: transform; transform-origin: 50% 18%; }
[data-parallax] { will-change: transform; }
.laptop .base {
  height: 14px; margin: 0 -3.5%; border-radius: 0 0 16px 16px;
  background: linear-gradient(#2a2e3e, #14161f);
}
.laptop .base::before {
  content: ''; display: block; width: 14%; height: 5px; margin: 0 auto;
  background: #0a0c12; border-radius: 0 0 8px 8px;
}

/* ---------- Compat / logo strip ---------- */
.strip { padding: clamp(40px, 6vw, 70px) 0; text-align: center; }
.strip h5 { font-size: 1rem; font-weight: 450; color: var(--mist); margin-bottom: 1.8em; }
.strip-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; }
.strip-logos span {
  font-size: 1.08rem; font-weight: 550; color: #fff;
  border: 1.5px solid rgba(255,255,255,.32); border-radius: var(--radius-pill);
  padding: .8em 1.6em; background: rgba(255,255,255,.09);
  box-shadow: 0 8px 24px -14px rgba(0,0,0,.6);
}

/* ---------- Split headline row (Premier style) ---------- */
.split-head {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px;
  align-items: end; margin-bottom: clamp(40px, 6vw, 70px);
}
.split-head .side { color: var(--ink-soft); }
.on-dark .split-head .side { color: var(--mist); }
.split-head .side .btn { margin-top: 1.2em; }
@media (max-width: 860px) { .split-head { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 22px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } }

.card {
  border-radius: var(--radius-card); padding: 28px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(10,11,16,.05), 0 18px 44px -30px rgba(10,20,40,.25);
}
.on-dark .card {
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.card h4 { font-size: 1.22rem; font-weight: 500; margin-bottom: .5em; }
.card p { color: var(--ink-soft); font-size: .97rem; margin-bottom: 0; }
.on-dark .card p { color: var(--mist); }
.card.card-dark { background: var(--panel); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 18px 44px -24px rgba(10,20,40,.45); }
.card.card-dark p { color: var(--mist); }
.card.card-dark .tlink { color: var(--teal); }
.card-dark .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.card .rule { width: 44px; height: 2px; background: var(--grad); border: 0; margin: 1em 0; }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: rgba(40,211,180,.13); color: var(--teal-deep);
}
.on-dark .card-icon { background: rgba(40,211,180,.12); color: var(--teal); }
.card-icon svg { width: 22px; height: 22px; }

/* feature checklist */
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding: .42em 0 .42em 1.9em; position: relative; color: var(--ink-soft); }
.on-dark .checks li { color: var(--mist); }
.checks li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 1.05em; height: 1.05em; border-radius: 50%;
  background: var(--grad);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.7 5.9-4.2 4.9a.75.75 0 0 1-1.13.02L4.3 8.6a.75.75 0 1 1 1.1-1.02l1.5 1.6 3.66-4.28a.75.75 0 0 1 1.14.99z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stats.six { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
@media (max-width: 860px) { .stats.six { grid-template-columns: repeat(2, 1fr); } }
.stat .num {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 400; line-height: 1.05;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .lbl { color: var(--mist); font-size: .95rem; margin-top: .4em; }
.light .stat .lbl { color: var(--ink-soft); }

/* ---------- Feature tabs ---------- */
.tabs { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .tabs { grid-template-columns: 1fr; } }
.tab-list { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--nav-h) + 20px); }
@media (max-width: 900px) { .tab-list { position: static; flex-direction: row; flex-wrap: wrap; } }
.tab-list button {
  text-align: left; background: none; border: 0; border-radius: 12px;
  padding: .8em 1.1em; font-size: 1.02rem; font-weight: 450; color: var(--mist-soft);
  transition: background .15s, color .15s;
}
.tab-list button:hover { color: #fff; }
.tab-list button.active { background: rgba(255,255,255,.07); color: #fff; }
.tab-list button.active { box-shadow: inset 2.5px 0 0 var(--teal); }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeUp .35s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Media rows (alternating) ---------- */
.media-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px);
  align-items: center; padding-block: clamp(28px, 4vw, 48px);
}
.media-row.rev > .m-media { order: 2; }
.media-row > * { min-width: 0; } /* grids must let code samples shrink, not inflate the viewport */
@media (max-width: 860px) { .media-row, .media-row.rev { grid-template-columns: 1fr; } .media-row.rev > .m-media { order: 0; } }
.m-media img { border-radius: 14px; }
.m-media.framed img {
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 90px -40px rgba(0,0,0,.85);
}
.light .m-media.framed img {
  box-shadow: 0 1px 0 rgba(10,11,16,.06), 0 34px 70px -36px rgba(10,20,40,.4);
}
.m-copy h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 400; }
.m-copy .lead { font-size: 1.05rem; }

/* ---------- Accordion (FAQ) ---------- */
.accordion { border-top: 1px solid rgba(10,11,16,.12); }
.on-dark .accordion { border-color: rgba(255,255,255,.12); }
.acc-item { border-bottom: 1px solid rgba(10,11,16,.12); }
.on-dark .acc-item { border-color: rgba(255,255,255,.12); }
.acc-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  background: none; border: 0; text-align: left;
  padding: 1.2em 0; font-size: 1.12rem; font-weight: 450; color: inherit;
}
.acc-q .acc-x {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(40,211,180,.14); color: var(--teal-deep);
  transition: transform .25s;
}
.on-dark .acc-q .acc-x { color: var(--teal); }
.acc-item.open .acc-x { transform: rotate(45deg); }
.acc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.acc-item.open .acc-a { grid-template-rows: 1fr; }
.acc-a > div { overflow: hidden; }
.acc-a p, .acc-a ul, .acc-a ol { color: var(--ink-soft); }
.on-dark .acc-a p, .on-dark .acc-a ul, .on-dark .acc-a ol { color: var(--mist); }
.acc-a > div > :last-child { margin-bottom: 1.4em; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-card); box-shadow: 0 1px 0 rgba(10,11,16,.05), 0 18px 44px -30px rgba(10,20,40,.25); }
table.ds { width: 100%; border-collapse: collapse; background: var(--paper); min-width: 640px; color: var(--ink); }
table.ds th, table.ds td { padding: .85em 1.1em; text-align: left; font-size: .95rem; border-bottom: 1px solid rgba(10,11,16,.07); }
table.ds thead th { background: var(--indigo); color: #fff; font-weight: 500; position: sticky; top: 0; }
table.ds td.yes { color: #0b6e5c; font-weight: 600; }
table.ds td.no { color: #b6bccf; }
table.ds tr.group td { background: #eef0f7; font-weight: 600; color: var(--ink); letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; }
table.ds tbody tr:hover td { background: rgba(40,211,180,.055); }
table.ds tr.group:hover td { background: #eef0f7; }

/* ---------- Forms ---------- */
.field { position: relative; margin-bottom: 20px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 1em 1.1em; font: inherit; color: inherit;
  background: var(--paper); border: 1.5px solid rgba(10,11,16,.16); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal-deep); box-shadow: 0 0 0 3px rgba(40,211,180,.2);
}
.field label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: .45em; color: var(--ink-soft); }
.form-status { min-height: 1.4em; font-weight: 500; }
.form-status.ok { color: var(--teal-deep); }
.form-status.err { color: var(--danger); }
.hp-field { position: absolute; left: -9999px; opacity: 0; }

/* ---------- Footer ---------- */
.site-footer { padding: var(--panel-inset); }
.site-footer .panel { padding: clamp(48px, 6vw, 80px) 0 0; overflow: hidden; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px;
  padding-bottom: 50px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 72px; width: auto; margin-bottom: 20px; }
@media (max-width: 640px) { .footer-brand img { height: 60px; } }
.footer-brand p { color: var(--mist); font-size: .95rem; max-width: 300px; }
.footer-col h6 { font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mist-soft); margin-bottom: 1.2em; }
.footer-col a { display: block; padding: .32em 0; color: var(--mist); font-size: .95rem; }
.footer-col a:hover { color: var(--teal); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 22px 0; display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  color: var(--mist-soft); font-size: .85rem;
}
.footer-bottom a { color: var(--mist); }
.footer-bottom a:hover { color: var(--teal); }
.footer-mega {
  font-size: clamp(3.4rem, 12vw, 10.5rem); font-weight: 500; line-height: .9;
  text-align: center; letter-spacing: -.03em;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.015));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-top: .25em; margin-bottom: -.08em; user-select: none;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero .panel { padding: clamp(64px, 8vw, 110px) 0; }
.page-hero .hero-inner { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: .25em; }
.page-hero .sub { color: var(--mist); max-width: 720px; font-size: clamp(1.02rem, 1.5vw, 1.18rem); margin-bottom: 0; }
.page-hero .btn-row { margin-top: 2em; }
.crumbs { font-size: .9rem; color: rgba(255,255,255,.74); margin-bottom: 2.2em; }
.crumbs a:hover { color: var(--teal); }
.crumbs .sep { margin: 0 .5em; }

/* ---------- Reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
/* stagger siblings inside grids / stat bands / button rows */
.grid > .rv:nth-child(2), .stats > .rv:nth-child(2) { transition-delay: .09s; }
.grid > .rv:nth-child(3), .stats > .rv:nth-child(3) { transition-delay: .18s; }
.grid > .rv:nth-child(4), .stats > .rv:nth-child(4) { transition-delay: .27s; }
.grid > .rv:nth-child(5) { transition-delay: .36s; }
.grid > .rv:nth-child(6) { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Black-box opening scrolly (home) ---------- */
#boxrev { overflow: visible; } /* .panel clips overflow, which breaks position:sticky */
.boxrev-track { height: 430vh; position: relative; } /* long track = slow, deliberate open */
.boxrev-stage {
  position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h));
  display: grid; place-items: center; overflow: hidden;
}
/* The box sits where the box sits in the labelled diagram, at the original site's
   proportions (330px box on a ~1110px diagram), so the faces fold out beside the labels
   and the 380px box images are never enlarged. */
.boxrev-art {
  position: relative; margin-inline: auto;
  width: min(880px, 94vw);
  width: min(880px, 94vw, calc((100svh - var(--nav-h) - 190px) * 1.47));
}
.boxrev-open { position: relative; z-index: 2; opacity: 0; pointer-events: none; will-change: opacity; }
.boxrev-open img { display: block; width: 100%; height: auto; }
.boxrev-scene { position: absolute; z-index: 1; left: 49%; top: 42%; width: 29.7%; transform: translate(-50%, -50%); }
.boxrev-scene img { width: 100%; }
.boxrev-scene .bx { position: absolute; inset: 0; will-change: transform, opacity; }
.boxrev-scene .bx.ground { position: relative; }
.boxrev-copy { text-align: center; position: relative; z-index: 2; margin-bottom: 3vh; }
.boxrev-hint {
  position: absolute; bottom: 4vh; left: 50%; transform: translateX(-50%);
  color: var(--mist-soft); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
  transition: opacity .4s;
}
.boxrev-hint::after {
  content: ''; display: block; width: 1px; height: 34px; margin: 10px auto 0;
  background: linear-gradient(var(--teal), transparent);
  animation: hint-drop 1.6s ease-in-out infinite;
}
@keyframes hint-drop { 50% { transform: translateY(8px); opacity: .5; } }
.boxrev-done .boxrev-hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .boxrev-track { height: auto; }
  .boxrev-stage { position: static; height: auto; padding: 60px 0; }
  .boxrev-scene { display: none; }
  .boxrev-open { position: static; opacity: 1; }
}

/* ---------- Marquee (quotes / proof points) ---------- */
.marquee { overflow: hidden; position: relative; }
.marquee-track { display: flex; gap: 22px; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.hero-patent { display: inline-flex; align-items: center; gap: .55em; margin: 0 0 1.6em; padding: .42em 1em .42em .62em; border-radius: var(--radius-pill); font-size: .92rem; font-weight: 500; color: var(--mist); background: rgba(40,211,180,.08); box-shadow: inset 0 0 0 1px rgba(40,211,180,.35); }
.hero-patent svg { width: 1.2em; height: 1.2em; color: var(--teal); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; width: auto; } }
.quote-card {
  width: 340px; flex: none; border-radius: var(--radius-card); padding: 26px;
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.quote-card .q { font-size: 1.02rem; color: #fff; margin-bottom: 1.2em; }
.quote-card .who { font-size: .88rem; color: var(--mist-soft); }
.quote-card .who strong { color: var(--mist); font-weight: 500; display: block; }

/* ---------- Timeline (how it works) ---------- */
.steps { position: relative; counter-reset: step; }
.steps::before {
  content: ''; position: absolute; left: 27px; top: 10px; bottom: 10px;
  width: 2px; background: linear-gradient(var(--teal), var(--blue));
  opacity: .5;
}
.step { position: relative; padding: 0 0 clamp(36px, 5vw, 60px) 84px; counter-increment: step; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -4px;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel-2); color: var(--teal);
  font-weight: 500; font-size: 1.1rem;
  box-shadow: inset 0 0 0 1.5px rgba(40,211,180,.5);
}
.step h4 { font-size: 1.3rem; font-weight: 450; }
.step p { color: var(--mist); max-width: 620px; }
.step .step-img { margin-top: 18px; max-width: 560px; }
.step .step-img img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 70px -34px rgba(0,0,0,.8); }

/* ---------- Code block (.dys / open data) ---------- */
.codebox {
  background: #0d1119; border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: .82rem; line-height: 1.7; color: #9fb3c8;
  padding: 22px 26px; overflow-x: auto; white-space: pre;
}
.codebox .c-key { color: var(--teal); }
.codebox .c-num { color: #82aaff; }
.codebox .c-cmt { color: #5b6478; }
.codebox-bar {
  display: flex; align-items: center; gap: 8px;
  background: #161b28; border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 12px 18px; font-size: .8rem; color: #7c8598;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.codebox-bar + .codebox { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.codebox-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }

/* ---------- Chips / badges ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-size: .85rem; font-weight: 550; padding: .5em 1em;
  border-radius: var(--radius-pill);
  background: rgba(40,211,180,.14); color: #0b6e5c;
}
.on-dark .chip { background: rgba(40,211,180,.13); color: var(--teal); }
.chip.dim { background: rgba(10,11,16,.06); color: var(--ink-soft); }
.on-dark .chip.dim { background: rgba(255,255,255,.08); color: var(--mist); }

.badge-wip {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.1;
  font-size: .7rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #a86a00; background: #ffe9c2;
  border-radius: 6px; padding: .45em .8em; vertical-align: middle;
}
.on-dark .badge-wip { background: rgba(255,183,98,.16); color: #ffb762; }
.badge-beta {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; line-height: 1.1;
  padding: .32em .6em; border-radius: 6px; white-space: nowrap;
  background: rgba(40,211,180,.14); color: var(--teal-deep);
}
.on-dark .badge-beta { background: rgba(40,211,180,.16); color: #5fe3c7; }
.d2 .badge-beta { font-size: .9rem; margin-left: .3em; }

/* ---------- IT / licensing block inside the editions panel ---------- */
.it-block {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 56px);
  margin-top: 64px; padding-top: 48px; border-top: 1px solid rgba(255,255,255,.1);
}
.it-block h3, .tab-pane h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 450; line-height: 1.25; margin-bottom: .5em; }
.tab-pane .lead { font-size: 1.05rem; }
.it-block p { color: var(--mist); margin: 0; }
.it-block .checks { columns: 2; column-gap: 32px; }
.it-block .checks li { break-inside: avoid; }
@media (max-width: 860px) { .it-block { grid-template-columns: 1fr; } .it-block .checks { columns: 1; } }

/* ---------- ROI calculator ---------- */
.roi-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .roi-grid { grid-template-columns: 1fr; } }
.roi-field { margin-bottom: 22px; }
.roi-field label { display: flex; justify-content: space-between; font-size: .95rem; font-weight: 500; margin-bottom: .5em; }
.roi-field label output { color: #0b6e5c; font-weight: 600; }
/* sliders styled to the site's teal-to-blue gradient */
.roi-field input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 999px;
  background: var(--grad); outline-offset: 4px; cursor: pointer;
}
.roi-field input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--teal-deep);
  box-shadow: 0 2px 10px rgba(13,168,140,.4);
}
.roi-field input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--teal-deep);
  box-shadow: 0 2px 10px rgba(13,168,140,.4);
}
.roi-field input[type=range]::-moz-range-track {
  height: 8px; border-radius: 999px; background: var(--grad);
}
.roi-out { text-align: center; padding: 34px 28px; }
.roi-out .big {
  font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 450;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.roi-out .cap { color: var(--ink-soft); font-size: .92rem; }
.roi-line { display: flex; justify-content: space-between; gap: 16px; padding: .7em 0; border-bottom: 1px solid rgba(10,11,16,.08); font-size: .95rem; }
.roi-line strong { font-weight: 600; }

/* ---------- Misc ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.measure { max-width: 720px; }
.center .measure { margin-inline: auto; }
.divider-label {
  display: flex; align-items: center; gap: 18px; color: var(--mist-soft);
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
}
.divider-label::before, .divider-label::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.light .divider-label { color: var(--ink-soft); }
.light .divider-label::before, .light .divider-label::after { background: rgba(10,11,16,.14); }

/* ---------- video pause control ---------- */
.vid-toggle {
  position: absolute; right: 22px; bottom: 26px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(6,7,12,.62); color: #fff; backdrop-filter: blur(4px);
  display: grid; place-items: center; font-size: .9rem;
  opacity: .75; transition: opacity .15s;
}
.vid-toggle:hover { opacity: 1; }

/* ---------- Awards band (home) ---------- */
.award-band { padding: clamp(36px, 5vw, 60px) 0; }
.award-band .award-head { margin-bottom: clamp(22px, 3vw, 34px); }
.award-band .award-head h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 450; }
.award-list { display: grid; gap: clamp(26px, 3.4vw, 40px); }
.award-band .award-inner {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.award-list .award-inner + .award-inner { padding-top: clamp(26px, 3.4vw, 40px); border-top: 1px solid rgba(20,30,60,.1); }
@media (max-width: 860px) {
  .award-band .award-head { text-align: center; }
  .award-band .award-inner { grid-template-columns: 1fr; text-align: center; }
}
.award-band .award-badge img {
  display: block; width: min(300px, 74vw); height: auto; border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(10,20,40,.45);
}
@media (max-width: 860px) { .award-band .award-badge { margin-inline: auto; } }
.award-name { font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 500; margin-bottom: .3em; }
.award-line { color: var(--ink-soft); margin: 0 0 .9em; }
.award-cats { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) { .award-cats { justify-content: center; } }
.award-cats span {
  font-size: .9rem; font-weight: 500; padding: .55em 1.1em;
  border-radius: var(--radius-pill);
  background: linear-gradient(94deg, rgba(40,211,180,.14), rgba(62,139,255,.14));
  box-shadow: inset 0 0 0 1px rgba(13,168,140,.3);
  color: var(--ink);
}
.award-links { margin: 1em 0 0; display: flex; flex-wrap: wrap; gap: .4em 1.4em; }
@media (max-width: 860px) { .award-links { justify-content: center; } }

/* ---------- Vendor strip (how-it-works steps) ---------- */
.vendor-strip {
  display: block; width: 100%; max-width: 540px; margin-top: 14px;
  background: #fff; border-radius: 12px; padding: 8px 12px;
}

/* ---------- Element-to-data illustration (Design Visualiser) ---------- */
.datalink { background: var(--panel-2); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 30px 70px -34px rgba(0,0,0,.8); }
.dl-model { position: relative; }
.dl-model img { display: block; width: 100%; height: auto; }
.dl-marker {
  position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; border: 2.5px solid #ff4fc3; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(255,79,195,.25), 0 0 18px rgba(255,79,195,.6);
  opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .3s ease;
}
.dl-marker.active { opacity: 1; transform: scale(1); }
.dl-body { padding: 16px 18px 18px; display: grid; gap: 12px; }
.dl-title { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mist-soft); }
.dl-table-wrap { overflow-x: auto; }
.dl-table { width: 100%; min-width: 380px; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; color: var(--mist); }
.dl-table th { text-align: right; font-weight: 500; color: var(--mist-soft); padding: .45em .6em; border-bottom: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
.dl-table td { text-align: right; padding: .5em .6em; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer; transition: background .25s, color .25s; }
.dl-table th:first-child, .dl-table td:first-child { text-align: left; }
.dl-table tr.active td { background: rgba(255,79,195,.14); color: #fff; }
.dl-table tr.active td:first-child { box-shadow: inset 3px 0 0 #ff4fc3; }
.dl-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dl-next { border: 0; border-radius: var(--radius-pill); padding: .6em 1.2em; background: var(--grad); color: #06231d; font-weight: 600; font-size: .86rem; cursor: pointer; }
.dl-dots { display: flex; gap: 2px; }
.dl-dots button { width: 26px; height: 26px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.dl-dots button::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .25s; }
.dl-dots button.active::after { background: #ff4fc3; }
.dl-note { margin: 0; font-size: .78rem; color: var(--mist-soft); }
@media (prefers-reduced-motion: reduce) { .dl-marker, .dl-table td { transition: none; } }

/* ---------- News & insights ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1020px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }
.post-card {
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  border-radius: var(--radius-card); overflow: hidden;
  box-shadow: 0 1px 0 rgba(10,11,16,.05), 0 18px 44px -30px rgba(10,20,40,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.post-card[hidden] { display: none; }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(10,11,16,.05), 0 26px 50px -28px rgba(10,20,40,.35); }
.post-card-img { aspect-ratio: 1200 / 630; background: var(--panel); overflow: hidden; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 20px 22px 24px; display: grid; gap: 8px; align-content: start; }
.post-card h3 { font-size: 1.18rem; font-weight: 500; line-height: 1.28; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
.post-card p { margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.55; }
.post-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.post-chip { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .32em .65em; border-radius: 6px; }
.post-chip.news { background: rgba(62,139,255,.13); color: #1f55c4; }
.post-chip.insight { background: rgba(40,211,180,.17); color: #0b6e5c; }
.post-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.post-filters button { border: 1px solid rgba(10,11,16,.18); background: rgba(255,255,255,.6); border-radius: var(--radius-pill); padding: .5em 1.15em; font-weight: 500; font-size: .92rem; color: var(--ink-soft); }
.post-filters button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.post-feed-note { margin-top: 28px; color: var(--ink-soft); }
.latest-sec { padding-bottom: 0; }

.post-hero { padding: clamp(40px, 6vw, 72px) 0 0; }
.post-wrap { width: min(100% - 2*var(--gutter), 760px); margin-inline: auto; }
.post-wrap-wide { width: min(100% - 2*var(--gutter), 1040px); margin-inline: auto; }
.post-hero .crumbs { color: var(--ink-soft); margin-bottom: 18px; font-size: .9rem; }
.post-hero .crumbs a { color: inherit; }
.post-title { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 400; line-height: 1.1; letter-spacing: -.015em; margin: 14px 0; text-wrap: balance; }
.post-lede { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--ink-soft); margin: 0 0 18px; }
.post-byline { font-size: .92rem; color: var(--ink-soft); padding-bottom: 30px; }
.post-byline strong { color: var(--ink); font-weight: 600; }
.post-cover { margin: 0; border-radius: 18px; overflow: hidden; background: var(--panel); box-shadow: 0 30px 60px -34px rgba(10,20,40,.45); }
.post-cover img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.post-body-sec { padding: clamp(36px, 5vw, 60px) 0 clamp(48px, 6vw, 80px); }
.prose { font-size: 1.07rem; line-height: 1.72; color: #1c2030; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 450; line-height: 1.2; margin: 1.8em 0 .6em; text-wrap: balance; }
.prose h3 { font-size: 1.18rem; font-weight: 600; margin: 1.5em 0 .5em; }
.prose p { margin: 0 0 1.1em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin: .35em 0; }
.prose a { color: #0b6e5c; font-weight: 600; border-bottom: 1px solid rgba(11,110,92,.3); }
.prose a:hover { border-color: currentColor; }
.prose figure { margin: 1.8em 0; }
.prose figure img { border-radius: 14px; box-shadow: 0 20px 50px -30px rgba(10,20,40,.45); }
.prose figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: 10px; }
.prose ul.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 1.6em 0; padding: 0; list-style: none; }
.prose ul.facts li { background: var(--paper); border-radius: 14px; padding: 16px 18px; margin: 0; box-shadow: 0 1px 0 rgba(10,11,16,.05), 0 14px 30px -24px rgba(10,20,40,.3); }
.prose ul.facts strong { display: block; font-size: 1.55rem; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ink); }
.prose ul.facts span { font-size: .85rem; color: var(--ink-soft); }
.prose .table-scroll { overflow-x: auto; margin: 1.2em 0 .6em; background: var(--paper); border-radius: 14px; box-shadow: 0 1px 0 rgba(10,11,16,.05), 0 14px 30px -24px rgba(10,20,40,.3); }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.prose th, .prose td { padding: 11px 16px; text-align: left; border-bottom: 1px solid rgba(10,11,16,.07); vertical-align: top; white-space: nowrap; }
.prose th { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td[rowspan] { font-weight: 600; }
.prose th:nth-last-child(-n+2), .prose td:nth-last-child(-n+2) { text-align: right; }
.author-box { display: flex; gap: 16px; align-items: flex-start; margin-top: 40px; padding: 22px 24px; background: var(--paper); border-radius: 18px; box-shadow: 0 1px 0 rgba(10,11,16,.05), 0 18px 44px -30px rgba(10,20,40,.25); }
.author-box .avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #04110d; font-weight: 600; }
.author-box h4 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.author-box p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.post-more { padding-top: 0; }

/* ---------- Speed chip ---------- */
.speed-chip {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; font-size: .95rem;
  background: var(--grad); color: #04110d;
  border-radius: var(--radius-pill); padding: .55em 1.2em;
  margin-top: 10px;
}

/* ---------- Embodied carbon (SED) ----------
   Faithful recreations, in HTML, of what the software prints: the carbon mark
   on every reinforcement plot page (a small table under an olive band, in
   Arial, sized in proportion to the printed one through container units) and
   the first two tables of the summary page that ends each plot PDF. Colours
   are sampled from the printed pages; where a sampled colour carries text and
   falls short of AA it is darkened: the band #90ac56 -> #677b3c under white
   text, the Panel figure #528f6d -> #487e60, the small print #969696 ->
   #707070. The leaf is the software's own path, fitted to a 100-unit disc. */
#carbon sub, #carbon sup { line-height: 0; }
.carbon-figure { margin: 44px auto 0; max-width: 900px; }
.carbon-marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .carbon-marks { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.carbon-sheet, .carbon-summary {
  background: var(--paper); border-radius: var(--radius-card);
  box-shadow: 0 22px 50px -28px rgba(2,4,10,.85);
  font-family: Arial, 'Helvetica Neue', Helvetica, 'Liberation Sans', Arimo, sans-serif;
  color: #000;
}
.carbon-sheet { padding: 20px 24px 22px; container-type: inline-size; }
@media (max-width: 420px) { .carbon-sheet { padding: 16px 18px 18px; } }
.carbon-sheet sub, .carbon-sheet sup, .carbon-summary sub {
  font-size: .62em; line-height: 0; vertical-align: baseline; position: relative;
}
.carbon-sheet sub, .carbon-summary sub { top: .36em; }
.carbon-sheet sup { top: -.62em; }
.carbon-mark {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  border: 1.5px solid #5a5a5a;
}
.carbon-mark caption {
  caption-side: top; text-align: left; margin-bottom: 14px;
  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  font-size: .76rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft);
}
.carbon-mark th, .carbon-mark td {
  height: 26px; height: 6.13cqi; padding: 0 1.8cqi; line-height: 1;
  border: 1px solid #5a5a5a; border-width: 0 0 1px 1px;
  vertical-align: middle; white-space: nowrap; overflow: hidden;
}
.carbon-mark thead tr:first-child th { border: 0; }
.carbon-mark .cm-band {
  background: #677b3c; color: #fff; font-weight: 700; text-align: left;
  font-size: 19px; font-size: 4.6cqi; padding-left: .95cqi; white-space: normal;
}
.cm-leaf { display: inline-block; width: 4.68cqi; height: 4.68cqi; margin-right: 1.44cqi; vertical-align: -.8cqi; }
.cm-caps { text-transform: uppercase; }
.carbon-mark thead tr + tr th {
  text-align: right; font-weight: 400; color: #5a5a5a; font-size: 18px; font-size: 4.5cqi;
}
.carbon-mark .cm-c1 { width: 24.8%; }
.carbon-mark tbody th {
  text-align: left; font-weight: 400; font-size: 20px; font-size: 4.86cqi;
}
.carbon-mark tbody td { text-align: right; font-size: 22px; font-size: 5.36cqi; line-height: .8; }
.carbon-mark .cm-panel th { font-weight: 700; }
.carbon-mark .cm-panel td { font-weight: 700; color: #487e60; font-size: 26px; font-size: 6.26cqi; }
.cm-small {
  margin: .45em 0 0; color: #707070; line-height: 1.2;
  font-size: 12px; font-size: max(11.5px, 3.74cqi);
}
.carbon-figure figcaption {
  margin-top: 18px; text-align: center; color: var(--mist);
  font-size: .88rem; max-width: 720px; margin-inline: auto;
}
.carbon-summary-fig { margin: 0; }
.carbon-summary { padding: clamp(18px, 3vw, 28px); border-radius: 14px; }
.cs-title {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 700; line-height: 1.2;
}
.cs-leaf { flex: none; width: 32px; height: 32px; }
.cs-sub { margin: .2em 0 1.2em 44px; color: #6e6e6e; font-size: .88rem; line-height: 1.3; }
.cs-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.cs-table th, .cs-table td { padding: .42em .7em; text-align: right; line-height: 1.25; }
.cs-table th:first-child { text-align: left; }
.cs-table thead th + th { width: 23%; }
.cs-table thead th { background: #677b3c; color: #fff; font-weight: 700; font-size: .86rem; }
.cs-table thead th:first-child { text-transform: uppercase; }
.cs-table tbody th { font-weight: 400; }
.cs-table tbody th, .cs-table tbody td { border-bottom: 1px solid #e5e5e5; }
.cs-table .cs-total th, .cs-table .cs-total td { font-weight: 700; }
.cs-table .cs-green td { color: #487e60; font-size: 1.08em; }
@media (max-width: 480px) {
  .cs-table { font-size: .84rem; }
  .cs-table th, .cs-table td { padding: .4em .45em; }
  .cs-table thead th { font-size: .76rem; }
}
.cs-note { margin: .6em 0 1.3em; color: #6e6e6e; font-size: .74rem; line-height: 1.35; }
.carbon-summary-fig figcaption { margin-top: 14px; color: var(--mist); font-size: .88rem; }

/* ---------- Legal pages ---------- */
.legal-grid { display: grid; grid-template-columns: 250px 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 860px) { .legal-grid { grid-template-columns: 1fr; } }
.legal-menu { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--nav-h) + 20px); }
@media (max-width: 860px) { .legal-menu { position: static; flex-direction: row; flex-wrap: wrap; } }
.legal-menu a {
  padding: .7em 1em; border-radius: 12px; font-size: .95rem; font-weight: 450;
  color: var(--ink-soft); transition: background .15s, color .15s;
}
.legal-menu a:hover { background: rgba(40,211,180,.1); color: var(--ink); }
.legal-menu a.active { background: var(--panel); color: #fff; }
.legal-content { font-size: .97rem; }
.legal-content h4 { font-size: 1.5rem; margin-bottom: .4em; }
.legal-content hr { border: 0; height: 1px; background: rgba(10,11,16,.12); margin: 1.2em 0; }
.legal-content p, .legal-content li { color: var(--ink-soft); }
.legal-content .lg-accent { color: #0b6e5c; }
.legal-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.legal-content table td, .legal-content table th { border: 1px solid rgba(10,11,16,.12); padding: .6em .8em; font-size: .9rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--teal); color: #04110d; padding: .8em 1.4em; border-radius: 0 0 12px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* video modal */
.video-modal {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(4,5,10,.86); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 4vw;
}
.video-modal.open { display: flex; }
.video-frame { position: relative; width: min(960px, 100%); aspect-ratio: 16/9; }
.video-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 14px; }
.video-close {
  position: absolute; top: -46px; right: 0; background: none; border: 0;
  color: #fff; font-size: 2rem; line-height: 1;
}