/* ============================================================
   Co.Marc — Design System
   Typography, palette, and tokens aligned with Co. brand.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inter:wght@300;400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  /* Palette — matches Co. exactly */
  --color-surface:           #0d0d0d;
  --color-surface-elevated:  color-mix(in oklab, #0d0d0d 86%, #274a6f);
  --color-surface-card:      #181818;
  --color-neutral:           #2a2a2a;
  --color-primary:           #1e3a5f;
  --color-primary-hover:     #274a6f;
  --color-secondary:         #274a6f;
  --color-accent:            #f0782a;
  --color-accent-hover:      #f58e40;
  --color-on-surface:        #f2f4f6;
  --color-on-surface-2:      #c8d0d8;
  --color-on-surface-3:      #7a8fa0;
  --color-on-primary:        #ffffff;
  --color-on-accent:         #ffffff;
  --color-border:            #303030;

  /* R-tier colours */
  --color-r1:      #2d8a5f;
  --color-r1-dim:  rgba(45,138,95,.14);
  --color-r2:      #2a5080;
  --color-r2-dim:  rgba(42,80,128,.18);
  --color-r3:      #b52a2e;
  --color-r3-dim:  rgba(181,42,46,.15);
  /* Shorthand aliases used in page styles */
  --r1-color:      #2d8a5f;
  --r2-color:      #2a5080;
  --r3-color:      #b52a2e;

  /* Nav height for sticky offset */
  --nav-h:         3.5rem;

  /* Typography — Co. brand fonts */
  --font-display:  'STIX Two Text', Georgia, serif;
  --font-heading:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:     'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-heading:    600;
  --fw-body:       400;
  --fw-medium:     500;

  --lh-heading:    1.25;
  --lh-body:       1.6;
  --ls-heading:    0.02em;
  --ls-body:       0.03em;

  /* Fluid type */
  --text-xs:   clamp(.75rem,  .72rem + .08vw,  .82rem);
  --text-sm:   clamp(.9rem,   .88rem + .12vw,  1rem);
  --text-base: 1rem;
  --text-lg:   clamp(1.25rem, 1.15rem + .6vw,  1.5rem);
  --text-xl:   clamp(1.5rem,  1.35rem + .9vw,  1.9rem);
  --text-2xl:  clamp(1.8rem,  1.6rem + 1.2vw,  2.3rem);
  --text-3xl:  clamp(2.2rem,  2rem + 1.6vw,    3rem);
  --text-4xl:  clamp(3rem,    2.6rem + 2.4vw,  4.2rem);

  /* Spacing */
  --sp-xs:  .5rem;
  --sp-sm:  .75rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;
  --sp-4xl: 6rem;
  --sp-5xl: 8rem;

  /* Layout */
  --max-w:        62rem;
  --max-w-wide:   80rem;
  --max-w-narrow: 48rem;

  /* Shape */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   10px;
  --radius-full: 9999px;

  /* Divider */
  --divider: 1px solid var(--color-border);
}

/* ── Light theme ─────────────────────────────────────────────── */
[data-theme="light"] {
  --color-surface:           #f4f6f9;
  --color-surface-elevated:  #ffffff;
  --color-surface-card:      #edf0f4;
  --color-neutral:           #dde2e8;
  --color-primary:           #1e3a5f;
  --color-primary-hover:     #274a6f;
  --color-on-surface:        #0d1117;
  --color-on-surface-2:      #2f3f50;
  --color-on-surface-3:      #6b7c8e;
  --color-border:            #cdd5de;
}
[data-theme="light"] body { background: var(--color-surface); color: var(--color-on-surface); }
[data-theme="light"] .site-nav {
  background: rgba(244,246,249,.96);
  border-bottom-color: var(--color-border);
}
[data-theme="light"] .mobile-menu { background: var(--color-surface-elevated); border-right: 1px solid var(--color-border); }
[data-theme="light"] .card { background: var(--color-surface-elevated); }
[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(rgba(30,58,95,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,58,95,.06) 1px, transparent 1px);
}
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 { color: var(--color-on-surface); }
[data-theme="light"] .form-field input { background: var(--color-surface-elevated); border-color: var(--color-border); color: var(--color-on-surface); }
[data-theme="light"] .form-field input::placeholder { color: var(--color-on-surface-3); }
[data-theme="light"] .data-table th { background: var(--color-surface-card); }
[data-theme="light"] .data-table tr:hover td { background: rgba(30,58,95,.04); }
[data-theme="light"] .badge-r1 { background: rgba(45,138,95,.1);  color: #1a6b3f; border-color: rgba(45,138,95,.3); }
[data-theme="light"] .badge-r2 { background: rgba(30,58,95,.1);   color: #1e3a5f; border-color: rgba(30,58,95,.3); }
[data-theme="light"] .badge-r3 { background: rgba(181,42,46,.1);  color: #8b1a1e; border-color: rgba(181,42,46,.3); }
[data-theme="light"] .tag { border-color: var(--color-neutral); color: var(--color-on-surface-3); }
[data-theme="light"] .divider-glow { background: linear-gradient(90deg, transparent, var(--color-primary) 50%, transparent); opacity: .3; }
[data-theme="light"] .site-footer { background: var(--color-surface-card); }
[data-theme="light"] .eyebrow { color: var(--color-accent); }

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; border: 0; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family:    var(--font-body);
  font-size:      var(--text-base);
  font-weight:    var(--fw-body);
  line-height:    var(--lh-body);
  letter-spacing: var(--ls-body);
  color:          var(--color-on-surface);
  background:     var(--color-surface);
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; background: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
p { max-width: 68ch; }

/* ── Type helpers ───────────────────────────────────────────── */
/* Display text — STIX Two Text serif (hero statements) */
.display {
  font-family:    var(--font-display);
  font-size:      var(--text-4xl);
  font-weight:    600;
  line-height:    1.15;
  letter-spacing: -.01em;
}
/* Section headings — Inter */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-heading);
  font-weight:    var(--fw-heading);
  line-height:    var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color:          var(--color-on-surface);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

.eyebrow {
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--color-accent);
}
.lead {
  font-size:   var(--text-lg);
  line-height: 1.6;
  color:       var(--color-on-surface-2);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
}

/* ── Layout ─────────────────────────────────────────────────── */
.container        { width: 100%; max-width: var(--max-w);        margin-inline: auto; padding-inline: var(--sp-xl); }
.container-wide   { width: 100%; max-width: var(--max-w-wide);   margin-inline: auto; padding-inline: var(--sp-xl); }
.container-narrow { width: 100%; max-width: var(--max-w-narrow); margin-inline: auto; padding-inline: var(--sp-xl); }
.section    { padding-block: var(--sp-5xl); }
.section-sm { padding-block: var(--sp-3xl); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display:      inline-flex;
  align-items:  center;
  gap:          var(--sp-xs);
  padding:      .6rem 1.5rem;
  font-family:  var(--font-heading);
  font-size:    var(--text-sm);
  font-weight:  var(--fw-medium);
  letter-spacing: .02em;
  white-space:  nowrap;
  border-radius: var(--radius-sm);
  transition:   all .2s ease;
  border:       1px solid transparent;
}
.btn-primary  { background: var(--color-primary);  color: var(--color-on-primary); border-color: var(--color-primary-hover); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-accent   { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent-hover); }
.btn-accent:hover { background: var(--color-accent-hover); }
.btn-ghost    { background: transparent; color: var(--color-on-surface-2); border-color: var(--color-border); }
.btn-ghost:hover { border-color: #444; color: var(--color-on-surface); }
.btn-lg { padding: .85rem 2rem; font-size: var(--text-base); }
.btn:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }

/* ── Navigation ─────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(15,15,15,.92);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: var(--divider);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 3.5rem;
  padding-block: var(--sp-sm);
}
.nav-logo {
  display: flex; align-items: center; gap: var(--sp-sm);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-on-surface);
}
.nav-logo-icon { color: var(--color-accent); display: flex; }
.nav-links { display: flex; align-items: center; gap: var(--sp-xl); }
.nav-link {
  font-family:  var(--font-heading);
  font-size:    var(--text-sm);
  font-weight:  var(--fw-medium);
  color:        var(--color-on-surface-2);
  transition:   color .2s;
  position:     relative;
}
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--color-accent);
  transform: scaleX(0); transition: transform .2s;
}
.nav-link:hover { color: var(--color-on-surface); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--color-on-surface); }
.nav-cta { display: flex; align-items: center; gap: var(--sp-sm); margin-left: var(--sp-md); }
.nav-mobile-toggle { display: none; background: none; border: none; color: var(--color-on-surface); padding: var(--sp-xs); }

/* ── R-tier badges ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .25em .75em;
  font-family:   var(--font-heading);
  font-size:     var(--text-xs);
  font-weight:   var(--fw-medium);
  border-radius: var(--radius-full);
  letter-spacing: .04em;
  white-space: nowrap;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-r1 { background: var(--color-r1-dim); color: #4ecf88; border: 1px solid rgba(45,138,95,.35); }
.badge-r2 { background: var(--color-r2-dim); color: #88b8f0; border: 1px solid rgba(42,80,128,.45); }
.badge-r3 { background: var(--color-r3-dim); color: #e87878; border: 1px solid rgba(181,42,46,.35); }

/* ── Tag pill ───────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center;
  padding: .2em .75em;
  font-family:   var(--font-heading);
  font-size:     var(--text-xs);
  letter-spacing: .04em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-on-surface-3);
  white-space: nowrap;
}

/* ── Marc brand highlight ───────────────────────────────────── */
.marc { color: var(--color-accent); font-weight: 600; }

/* ── Theme toggle ───────────────────────────────────────────── */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent; color: var(--color-on-surface-3);
  transition: border-color .2s, color .2s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ── Nav sign-in ────────────────────────────────────────────── */
.nav-actions { display: flex; align-items: center; gap: var(--sp-sm); margin-left: var(--sp-md); }
.btn-signin {
  background: transparent;
  color: var(--color-on-surface-2);
  border: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: .02em;
  padding: .5rem 1.1rem;
  border-radius: var(--radius-sm);
  transition: border-color .2s, color .2s;
  white-space: nowrap;
}
.btn-signin:hover { border-color: var(--color-primary-hover); color: var(--color-on-surface); }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background:    var(--color-surface-card);
  border:        1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
  padding:       var(--sp-xl);
  transition:    border-color .25s, box-shadow .25s, transform .3s cubic-bezier(.16,1,.3,1);
}
.card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), 0 8px 32px rgba(240,120,42,.12);
  transform: translateY(-2px);
}
[data-theme="light"] .card { border-color: var(--color-border); }
[data-theme="light"] .card:hover { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), 0 8px 24px rgba(240,120,42,.1); }
.card-accent { border-top: 2px solid var(--color-accent); }
.card-r1 { border-top: 2px solid var(--color-r1); }
.card-r2 { border-top: 2px solid var(--color-r2); }
.card-r3 { border-top: 2px solid var(--color-r3); }

/* ── Section header ─────────────────────────────────────────── */
.section-header { margin-bottom: var(--sp-3xl); }
.section-header .eyebrow { display: block; margin-bottom: var(--sp-md); }
.section-header h2 { margin-bottom: var(--sp-md); }
.section-header .lead { max-width: 56ch; }

/* ── Grid utils ─────────────────────────────────────────────── */
.grid-2    { display: grid; gap: var(--sp-xl);  grid-template-columns: 1fr 1fr; }
.grid-3    { display: grid; gap: var(--sp-xl);  grid-template-columns: 1fr 1fr 1fr; }
.grid-auto { display: grid; gap: var(--sp-lg);  grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }

/* ── Dividers ───────────────────────────────────────────────── */
.divider      { height: 1px; background: var(--color-border); }
.divider-glow { height: 1px; background: linear-gradient(90deg, transparent, var(--color-primary) 50%, transparent); }

/* ── Data table ─────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  padding: var(--sp-sm) var(--sp-md);
  text-align: left;
  border-bottom: var(--divider);
  font-size: var(--text-sm);
  font-family: var(--font-body);
}
.data-table th {
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--color-on-surface-3);
  background:     var(--color-surface-elevated);
}
.data-table tr:hover td { background: rgba(255,255,255,.015); }

/* ── Scroll reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--delay, 0s);
}
.reveal.visible { opacity: 1; transform: none; }

/* ── Mobile menu ────────────────────────────────────────────── */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--color-surface-elevated);
  flex-direction: column; padding: var(--sp-xl);
}
.mobile-menu.open { display: flex; }
.mobile-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3xl);
}
.mobile-menu-header button { background: none; border: none; color: var(--color-on-surface); }
.mobile-menu-links { display: flex; flex-direction: column; gap: var(--sp-xl); }
.mobile-menu-links a {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-on-surface-2);
  transition: color .2s;
}
.mobile-menu-links a:hover { color: var(--color-on-surface); }
.mobile-menu-footer { margin-top: auto; padding-bottom: var(--sp-xl); }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-surface-elevated);
  border-top: var(--divider);
  padding-block: var(--sp-3xl);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-3xl);
}
.footer-brand p {
  margin-top: var(--sp-lg);
  font-size: var(--text-sm);
  color: var(--color-on-surface-3);
  line-height: var(--lh-body);
}
.footer-col h4 {
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--color-on-surface-3);
  margin-bottom:  var(--sp-lg);
}
.footer-col li { margin-bottom: var(--sp-sm); }
.footer-col a { font-size: var(--text-sm); color: var(--color-on-surface-2); transition: color .2s; }
.footer-col a:hover { color: var(--color-on-surface); }
.footer-bottom {
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-xl);
  border-top: var(--divider);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-md);
}
.footer-bottom p { font-size: var(--text-xs); color: var(--color-on-surface-3); max-width: none; }
.footer-legal { display: flex; gap: var(--sp-lg); }
.footer-legal a { font-size: var(--text-xs); color: var(--color-on-surface-3); transition: color .2s; }
.footer-legal a:hover { color: var(--color-on-surface-2); }

/* ── Background grid texture ────────────────────────────────── */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(30,58,95,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,58,95,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 72%);
}
.glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: var(--sp-sm);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-on-surface-3);
  margin-bottom: var(--sp-xl);
}
.breadcrumb a { color: var(--color-on-surface-2); transition: color .2s; }
.breadcrumb a:hover { color: var(--color-on-surface); }

/* ── Form ───────────────────────────────────────────────────── */
.form-field { display: flex; flex-direction: column; gap: var(--sp-xs); }
.form-field label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-on-surface-3);
}
.form-field input {
  background:    var(--color-surface-elevated);
  border:        var(--divider);
  border-radius: var(--radius-sm);
  padding:       var(--sp-sm) var(--sp-md);
  font-size:     var(--text-sm);
  color:         var(--color-on-surface);
  transition:    border-color .2s;
}
.form-field input:focus { outline: none; border-color: var(--color-secondary); }
.form-field input::placeholder { color: var(--color-on-surface-3); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 768px) {
  :root { --sp-5xl: 4rem; --sp-4xl: 3rem; --sp-3xl: 2.5rem; }
  .nav-links { display: none; }
  .nav-cta .btn-signin, .nav-cta .btn { display: none; }
  .nav-mobile-toggle { display: flex; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .container, .container-wide, .container-narrow { padding-inline: var(--sp-md); }
}

/* ============================================================
   Page hero — shared across interior pages
   ============================================================ */
.page-hero { position:relative; overflow:hidden; padding-block:var(--sp-4xl) var(--sp-3xl); }
.ph-bg { position:absolute; inset:0; pointer-events:none; }
.ph-inner { position:relative; z-index:1; max-width:64rem; }
.back-link { display:inline-flex; align-items:center; gap:var(--sp-xs); font-family:var(--font-heading); font-size:var(--text-sm); color:var(--color-on-surface-3); text-decoration:none; transition:color .2s; }
.back-link:hover { color:var(--color-on-surface); }

/* ============================================================
   Cross-nav cards — shared across interior pages
   ============================================================ */
.cn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-lg); }
.cn-card { background:var(--color-surface-elevated); border:var(--divider); border-radius:var(--radius-xl); padding:var(--sp-xl); text-decoration:none; display:block; position:relative; transition:border-color .25s, transform .25s; }
.cn-card:hover { border-color:var(--color-primary-hover); transform:translateY(-3px); }
.cn-card--cta { border-color:color-mix(in oklab, var(--color-accent) 30%, transparent); }
.cn-card--cta:hover { border-color:var(--color-accent); }
.cn-card .eyebrow { display:block; margin-bottom:var(--sp-sm); }
.cn-card h3 { font-size:var(--text-lg); margin-bottom:var(--sp-sm); }
.cn-card p { font-size:var(--text-sm); color:var(--color-on-surface-2); line-height:1.65; max-width:none; }
.cn-arrow { position:absolute; bottom:var(--sp-lg); right:var(--sp-lg); font-size:1.2rem; color:var(--color-on-surface-3); }
@media(max-width:768px) { .cn-grid { grid-template-columns:1fr; } }

/* ============================================================
   Legal pages (privacy-policy, terms-of-access)
   ============================================================ */
.legal-body h2 { font-size:var(--text-lg); margin-top:var(--sp-2xl); margin-bottom:var(--sp-md); }
.legal-body p  { font-size:var(--text-base); color:var(--color-on-surface-2); line-height:1.8; margin-bottom:var(--sp-md); max-width:none; }
.legal-body strong { color:var(--color-on-surface); font-weight:600; }
.legal-body a  { color:var(--color-accent); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   Index — hero
   ============================================================ */
.hero { position:relative; overflow:hidden; min-height:100vh; display:flex; flex-direction:column; }
.hero-bg { position:absolute; inset:0; pointer-events:none; }
.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3xl); align-items:center; padding-block:var(--sp-5xl); position:relative; z-index:1; flex:1; }
.hero-divider { height:80px; width:100%; position:relative; z-index:1; }
.hero-divider svg { width:100%; height:100%; display:block; }

/* Index — treatment widget */
.hz-card { background:var(--color-surface-card); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-xl); overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 48px rgba(30,58,95,.14); }
.hz-header { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-md) var(--sp-lg); background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07); }
.hz-title { font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-on-surface-3); letter-spacing:.06em; }
.hz-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.hz-table thead tr { background:rgba(255,255,255,.03); }
.hz-table th { padding:var(--sp-xs) var(--sp-md); font-family:var(--font-heading); font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--color-on-surface-3); border-bottom:1px solid rgba(255,255,255,.07); text-align:left; }
.hz-table th:nth-child(1) { width:36%; }
.hz-table th:nth-child(2) { width:34%; }
.hz-table th:nth-child(3) { width:30%; text-align:right; padding-right:var(--sp-lg); }
.hz-table td { padding:var(--sp-sm) var(--sp-md); font-family:var(--font-heading); font-size:var(--text-xs); vertical-align:middle; border-bottom:1px solid rgba(255,255,255,.04); }
.hz-table td:nth-child(3) { text-align:right; padding-right:var(--sp-lg); }
.hz-table tbody tr:last-child td { border-bottom:none; }
.hz-table tbody tr:nth-child(even) { background:rgba(255,255,255,.018); }
.hz-field { color:var(--color-on-surface); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hz-row--anim { opacity:0; animation:rowIn .4s ease forwards; animation-delay:calc(1s + var(--i) * .12s); }
@keyframes rowIn { to { opacity:1; } }
.hz-cat { color:var(--color-on-surface-3); }
.hz-cat--pii { color:#4ecf88; }
.hz-cat--high { color:#e87878; }
.hz-cat--trigger { color:#88b8f0; }
.hz-footer { display:flex; align-items:center; gap:var(--sp-xs); padding:var(--sp-sm) var(--sp-lg); background:rgba(255,255,255,.025); border-top:1px solid rgba(255,255,255,.07); font-family:var(--font-heading); font-size:.68rem; color:var(--color-on-surface-3); }

/* Index — trust bar */
.trust-row { display:flex; gap:var(--sp-2xl); flex-wrap:wrap; justify-content:center; }
.trust-item { display:flex; align-items:center; gap:var(--sp-sm); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--color-on-surface-2); }

/* Index — problem */
.problem-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:var(--sp-xl); align-items:start; }
.problem-intro h3 { font-size:var(--text-xl); margin-bottom:var(--sp-sm); }
.risk-list { display:flex; flex-direction:column; gap:var(--sp-lg); }
.risk-item { display:flex; gap:var(--sp-lg); align-items:flex-start; padding:var(--sp-lg); background:var(--color-surface-card); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-lg); transition:border-color .25s, box-shadow .25s, transform .2s; }
.risk-item:hover { border-color:var(--color-accent); box-shadow:0 0 0 1px var(--color-accent), 0 4px 16px rgba(240,120,42,.09); transform:translateY(-1px); }
.ri-icon { color:var(--color-accent); flex-shrink:0; margin-top:.1em; }
.risk-item h4 { font-size:var(--text-sm); font-weight:600; margin-bottom:var(--sp-xs); }
.risk-item p { font-size:var(--text-sm); color:var(--color-on-surface-2); line-height:1.65; max-width:none; }

/* Index — steps */
.steps-row { display:flex; gap:0; align-items:stretch; }
.step-card { flex:1; background:var(--color-surface-card); border:var(--divider); padding:var(--sp-xl); position:relative; transition:border-color .25s; }
.step-card:first-child { border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
.step-card:last-child  { border-radius:0 var(--radius-lg) var(--radius-lg) 0; }
.step-card:not(:first-child) { border-left:none; }
.step-card:hover { border-color:var(--color-primary-hover); z-index:1; }
.step-num { font-family:var(--font-display); font-size:2.4rem; color:var(--color-accent); opacity:.55; line-height:1; margin-bottom:var(--sp-md); }
.step-card h3 { font-size:var(--text-lg); margin-bottom:var(--sp-md); }
.step-card p  { font-size:var(--text-sm); color:var(--color-on-surface-2); line-height:1.7; max-width:none; }

/* Index — R-cards */
.r-cards { align-items:start; }
.r-cards .card h3 { font-size:var(--text-xl); }
.r-cards .card p  { font-size:var(--text-sm); }

/* Index — benefits */
.benefits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-lg); }
.benefit { padding:var(--sp-xl); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-lg); transition:border-color .25s, box-shadow .25s, transform .25s; background:var(--color-surface-card); }
.benefit:hover { border-color:var(--color-accent); box-shadow:0 0 0 1px var(--color-accent), 0 6px 24px rgba(240,120,42,.1); transform:translateY(-2px); }
.benefit-icon { color:var(--color-accent); margin-bottom:var(--sp-md); }
.benefit h3 { font-size:var(--text-base); font-weight:600; margin-bottom:var(--sp-sm); }
.benefit p  { font-size:var(--text-sm); color:var(--color-on-surface-2); line-height:1.7; max-width:none; }

/* Index — local-first diagram */
.lf-inner { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4xl); align-items:center; }
.lf-diagram { display:flex; flex-direction:column; gap:var(--sp-md); }
.lf-box { background:var(--color-surface-elevated); border:var(--divider); border-radius:var(--radius-lg); padding:var(--sp-lg); }
.lf-box-label { font-family:var(--font-heading); font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--color-on-surface-3); margin-bottom:var(--sp-lg); }
.lf-component { display:flex; align-items:center; gap:var(--sp-md); background:rgba(255,255,255,.04); border:var(--divider); border-radius:var(--radius-md); padding:var(--sp-sm) var(--sp-md); font-family:var(--font-heading); font-size:var(--text-sm); }
.lf-component svg { color:var(--color-accent); flex-shrink:0; }
.lf-arrow-inner { text-align:center; padding-block:var(--sp-sm); color:var(--color-on-surface-3); font-size:.7rem; font-family:var(--font-heading); letter-spacing:.04em; }
.lf-boundary { background:rgba(30,58,95,.08); border:1px dashed rgba(30,58,95,.3); border-radius:var(--radius-md); padding:var(--sp-md) var(--sp-lg); display:flex; flex-direction:column; gap:var(--sp-sm); }
.lf-sends, .lf-never { display:flex; flex-direction:column; gap:4px; font-family:var(--font-heading); }

/* Index — stats */
.stats-inner { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4xl); align-items:center; }
.stats-numbers { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-lg); }
.stat-block { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); padding:var(--sp-lg); }
.stat-val { font-family:var(--font-display); font-size:var(--text-4xl); color:#fff; line-height:1; }
.stat-lbl { font-family:var(--font-body); font-size:var(--text-xs); color:rgba(255,255,255,.6); margin-top:var(--sp-xs); line-height:1.5; }

/* Index — contact */
.contact-form { background:var(--color-surface-elevated); border:var(--divider); border-radius:var(--radius-xl); padding:var(--sp-2xl); text-align:left; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-md); margin-bottom:var(--sp-md); }

@media(max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; padding-block:var(--sp-4xl) var(--sp-3xl); }
  .hero-visual { display:none; }
  .problem-grid { grid-template-columns:1fr; }
  .stats-inner { grid-template-columns:1fr; }
  .lf-inner { grid-template-columns:1fr; }
  .steps-row { flex-direction:column; }
  .step-card { border-radius:0; border-left:var(--divider) !important; border-top:none; }
  .step-card:first-child { border-radius:var(--radius-lg) var(--radius-lg) 0 0; border-top:var(--divider) !important; }
  .step-card:last-child  { border-radius:0 0 var(--radius-lg) var(--radius-lg); }
}
@media(max-width:768px) {
  .grid-3, .benefits-grid { grid-template-columns:1fr; }
  .stats-numbers { grid-template-columns:1fr 1fr; }
  .trust-row { gap:var(--sp-lg); justify-content:flex-start; }
  .cf-row { grid-template-columns:1fr; }
}

/* ============================================================
   Three Rs — framework page
   ============================================================ */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3xl); align-items:start; }

.framework-overview { background:var(--color-surface-card); border:var(--divider); border-radius:var(--radius-xl); overflow:hidden; }
.fo-row { display:flex; gap:var(--sp-lg); align-items:flex-start; padding:var(--sp-lg); border-bottom:var(--divider); }
.fo-row:last-child { border-bottom:none; }
.fo-badge { flex-shrink:0; margin-top:.15em; }
.fo-row strong { font-family:var(--font-heading); font-size:var(--text-sm); font-weight:600; display:block; margin-bottom:var(--sp-xs); }
.fo-row p { font-size:var(--text-sm); color:var(--color-on-surface-2); line-height:1.6; max-width:none; }

.r-section { position:relative; overflow:hidden; }
.r-glow { position:absolute; width:360px; height:360px; border-radius:50%; filter:blur(100px); pointer-events:none; opacity:.08; }
.r1-glow { background:var(--r1-color); top:-80px; left:-60px; }
.r2-glow { background:var(--r2-color); top:-80px; right:-60px; }
.r3-glow { background:var(--r3-color); top:-80px; left:-60px; }

.r-inner { display:grid; grid-template-columns:280px 1fr; gap:var(--sp-3xl); align-items:start; }
.r2-inner { grid-template-columns:1fr 280px; }

.r-label { background:var(--color-surface-elevated); border:var(--divider); border-radius:var(--radius-xl); padding:var(--sp-xl); position:sticky; top:calc(var(--nav-h) + var(--sp-xl)); }
.r1-label { border-color:color-mix(in oklab, var(--r1-color) 25%, transparent); }
.r2-label { border-color:color-mix(in oklab, var(--r2-color) 25%, transparent); }
.r3-label { border-color:color-mix(in oklab, var(--r3-color) 25%, transparent); }
.r-letter { font-family:var(--font-display); font-size:4rem; line-height:1; margin-bottom:var(--sp-xs); }
.r1-label .r-letter { color:var(--r1-color); }
.r2-label .r-letter { color:var(--r2-color); }
.r3-label .r-letter { color:var(--r3-color); }
.r-name   { font-family:var(--font-heading); font-size:var(--text-xl); font-weight:600; }
.r-subtitle { font-size:var(--text-sm); color:var(--color-on-surface-3); margin-top:var(--sp-xs); margin-bottom:var(--sp-lg); }
.r-keypoints { display:flex; flex-direction:column; gap:var(--sp-sm); }
.kp { display:flex; align-items:flex-start; gap:var(--sp-sm); font-size:var(--text-xs); color:var(--color-on-surface-2); font-family:var(--font-heading); line-height:1.5; }
.kp svg { flex-shrink:0; margin-top:.1em; }

.r-content h2 { margin-bottom:var(--sp-xl); }
.r-content p  { color:var(--color-on-surface-2); font-size:var(--text-base); line-height:1.75; max-width:60ch; margin-bottom:var(--sp-lg); }
.r-content p:last-of-type { margin-bottom:0; }

.r-example { margin-top:var(--sp-xl); padding:var(--sp-lg); background:rgba(255,255,255,.025); border:var(--divider); border-radius:var(--radius-lg); }
.r-example-label { font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-on-surface-3); letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--sp-sm); }
.r-example-tags { display:flex; flex-wrap:wrap; gap:var(--sp-xs); }

.r2-protections { margin-top:var(--sp-xl); }
.r2-p-label { font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-on-surface-3); letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--sp-md); }
.r2-p-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--sp-md); }
.r2-p-item { background:rgba(255,255,255,.025); border:var(--divider); border-radius:var(--radius-lg); padding:var(--sp-lg); }
.r2p-icon { color:var(--r2-color); margin-bottom:var(--sp-md); }
.r2-p-item strong { font-family:var(--font-heading); font-size:var(--text-sm); font-weight:600; display:block; margin-bottom:var(--sp-xs); }
.r2-p-item p { font-size:var(--text-xs); color:var(--color-on-surface-2); line-height:1.6; max-width:none; }

.r3-lifecycle { display:flex; align-items:flex-start; gap:var(--sp-sm); margin-top:var(--sp-xl); margin-bottom:var(--sp-md); }
.r3-step { flex:1; background:rgba(255,255,255,.025); border:var(--divider); border-radius:var(--radius-md); padding:var(--sp-md); }
.r3s-num { font-family:var(--font-display); font-size:1.6rem; color:color-mix(in oklab, var(--r3-color) 60%, transparent); line-height:1; margin-bottom:var(--sp-sm); }
.r3-step strong { font-family:var(--font-heading); font-size:var(--text-xs); font-weight:600; display:block; margin-bottom:var(--sp-xs); }
.r3-step p { font-size:var(--text-xs); color:var(--color-on-surface-2); line-height:1.55; max-width:none; }
.r3-step-arrow { align-self:center; color:var(--color-on-surface-3); font-size:1.2rem; flex-shrink:0; padding-top:.5rem; }

.coverage-table { margin-top:var(--sp-2xl); border:var(--divider); border-radius:var(--radius-xl); overflow:hidden; }
.ct-head { display:grid; grid-template-columns:1fr 1.4fr 1.4fr 1.8fr 0.6fr; background:rgba(255,255,255,.04); border-bottom:var(--divider); padding:var(--sp-sm) var(--sp-lg); font-family:var(--font-heading); font-size:var(--text-xs); font-weight:600; color:var(--color-on-surface-3); letter-spacing:.06em; text-transform:uppercase; }
.ct-row { display:grid; grid-template-columns:1fr 1.4fr 1.4fr 1.8fr 0.6fr; padding:var(--sp-md) var(--sp-lg); border-bottom:var(--divider); font-size:var(--text-sm); align-items:center; }
.ct-row:last-child { border-bottom:none; }
.ct-row:hover { background:rgba(255,255,255,.02); }
.ct-row div:last-child { display:flex; justify-content:center; }

@media(max-width:1024px) {
  .r-inner, .r2-inner { grid-template-columns:1fr; }
  .r-label { position:static; }
  .two-col { grid-template-columns:1fr; }
  .r2-p-row { grid-template-columns:1fr; }
  .r3-lifecycle { flex-direction:column; }
  .r3-step-arrow { transform:rotate(90deg); align-self:flex-start; margin-left:var(--sp-md); }
  .ct-head, .ct-row { grid-template-columns:1fr 1fr 1fr; }
  .ct-head div:nth-child(3), .ct-row div:nth-child(3),
  .ct-head div:nth-child(5), .ct-row div:nth-child(5) { display:none; }
}
@media(max-width:768px) {
  .ct-head, .ct-row { grid-template-columns:1fr 1fr; }
  .ct-head div:nth-child(2), .ct-row div:nth-child(2) { display:none; }
}

/* ============================================================
   How It Works — page
   ============================================================ */
.hiw-section { }
.hiw-inner { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3xl); align-items:start; }
.hiw-step-num { font-family:var(--font-display); font-size:3.5rem; color:var(--color-accent); opacity:.55; line-height:1; margin-bottom:var(--sp-lg); }
.hiw-step-label h2 { margin-bottom:var(--sp-lg); }
.hiw-step-label p  { color:var(--color-on-surface-2); font-size:var(--text-base); line-height:1.75; max-width:46ch; margin-bottom:var(--sp-md); }
.hiw-details { display:flex; flex-direction:column; gap:var(--sp-sm); margin-top:var(--sp-xl); }
.hiw-detail { display:flex; align-items:flex-start; gap:var(--sp-sm); font-size:var(--text-sm); color:var(--color-on-surface-2); font-family:var(--font-heading); line-height:1.5; }
.hiw-detail svg { flex-shrink:0; margin-top:.1em; }

.hiw-card { background:var(--color-surface-card); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-xl); overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.5); }
.hiw-card-header { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-md) var(--sp-lg); background:rgba(255,255,255,.03); border-bottom:var(--divider); }
.hiw-card-title { font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-on-surface-3); letter-spacing:.06em; }

.db-list { padding:var(--sp-sm); display:flex; flex-direction:column; gap:2px; }
.db-item { display:flex; align-items:center; gap:var(--sp-md); padding:var(--sp-sm) var(--sp-md); border-radius:var(--radius-md); transition:background .2s; }
.db-item:hover { background:rgba(255,255,255,.025); }
.db-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.db-dot--ok { background:#5dbf8a; box-shadow:0 0 6px rgba(93,191,138,.4); }
.db-name { font-family:var(--font-heading); font-size:var(--text-sm); font-weight:500; }
.db-meta { font-size:.68rem; color:var(--color-on-surface-3); margin-top:2px; }

.fd-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.fd-table thead tr { background:rgba(255,255,255,.04); }
.fd-table th { padding:var(--sp-xs) var(--sp-md); font-family:var(--font-heading); font-size:.65rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--color-on-surface-3); border-bottom:1px solid rgba(255,255,255,.07); text-align:left; }
.fd-table th:nth-child(1) { width:30%; }
.fd-table th:nth-child(2) { width:30%; }
.fd-table th:nth-child(3) { width:14%; text-align:center; }
.fd-table th:nth-child(4) { width:26%; text-align:right; padding-right:var(--sp-md); }
.fd-table td { padding:var(--sp-xs) var(--sp-md); font-family:var(--font-heading); font-size:var(--text-xs); vertical-align:middle; border-bottom:1px solid rgba(255,255,255,.04); }
.fd-table td:nth-child(3) { text-align:center; }
.fd-table td:nth-child(4) { text-align:right; padding-right:var(--sp-md); }
.fd-table tbody tr:last-child td { border-bottom:none; }
.fd-row--hi { background:rgba(255,255,255,.02); }
.fd-row--trigger { background:rgba(136,184,240,.04); }
.fd-field { font-weight:500; color:var(--color-on-surface); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fr-cat { color:var(--color-on-surface-3); }
.fr-cat--pii { color:#4ecf88; }
.fr-cat--high { color:#e87878; }
.fr-cat--trigger { color:#88b8f0; }
.fr-cat--none { color:rgba(255,255,255,.2); }
.fr-conf { color:var(--color-on-surface-3); font-family:var(--font-heading); font-size:var(--text-xs); }
.fr-conf--hi { color:#4ecf88; }
.fr-conf--med { color:#88b8f0; }

.decision-opts { display:flex; flex-direction:column; gap:var(--sp-xs); }
.decision-opt { display:flex; align-items:center; gap:var(--sp-md); padding:var(--sp-sm) var(--sp-md); border:var(--divider); border-radius:var(--radius-md); cursor:pointer; transition:background .2s; position:relative; }
.decision-opt p { font-size:var(--text-xs); color:var(--color-on-surface-2); font-family:var(--font-heading); margin:0; max-width:none; flex:1; }
.do-r2--selected { background:rgba(30,58,95,.15); border-color:rgba(30,58,95,.4); }
.do-check { position:absolute; right:var(--sp-md); color:var(--r2-color); }

.enf-item { display:flex; align-items:center; gap:var(--sp-md); padding:var(--sp-sm) 0; border-bottom:1px solid rgba(255,255,255,.04); }
.enf-item:last-child { border-bottom:none; }
.enf-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.enf-dot--r2 { background:var(--r2-color); box-shadow:0 0 6px rgba(30,58,95,.5); }
.enf-dot--r3 { background:var(--r3-color); box-shadow:0 0 6px rgba(155,34,38,.5); }
.enf-name { font-family:var(--font-heading); font-size:var(--text-xs); font-weight:500; }
.enf-meta { font-size:.68rem; color:var(--color-on-surface-3); margin-top:2px; }

.sar-results { display:flex; flex-direction:column; gap:var(--sp-sm); }
.sar-r { display:flex; align-items:center; gap:var(--sp-sm); font-size:var(--text-xs); color:var(--color-on-surface-2); font-family:var(--font-heading); }

.category-list { margin-top:var(--sp-xl); }
.cat-label { font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-on-surface-3); letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--sp-sm); }
.cat-tags { display:flex; flex-wrap:wrap; gap:var(--sp-xs); }

.audit-rows { padding:var(--sp-sm); display:flex; flex-direction:column; gap:2px; }
.audit-row { display:grid; grid-template-columns:.8fr 1fr 3fr; gap:var(--sp-md); align-items:center; padding:var(--sp-sm) var(--sp-md); border-radius:var(--radius-sm); font-family:var(--font-heading); font-size:var(--text-xs); }
.audit-row:nth-child(odd) { background:rgba(255,255,255,.015); }
.au-time { color:var(--color-on-surface-3); }
.au-desc { color:var(--color-on-surface-2); }

@media(max-width:1024px) {
  .hiw-inner { grid-template-columns:1fr; }
  .hiw-inner--rev .hiw-visual { order:-1; }
}

/* ============================================================
   Compliance — page
   ============================================================ */
.obligation-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-md); margin-top:var(--sp-3xl); }
.ob-item { background:var(--color-surface-card); border:var(--divider); border-radius:var(--radius-lg); padding:var(--sp-lg); display:flex; flex-direction:column; gap:var(--sp-xs); }
.ob-law { font-family:var(--font-heading); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent); font-weight:600; }
.ob-title { font-family:var(--font-heading); font-size:var(--text-sm); font-weight:600; color:var(--color-on-surface); }
.ob-how { font-size:var(--text-xs); color:var(--color-on-surface-2); line-height:1.65; flex:1; max-width:none; }
.ob-check { display:flex; align-items:center; gap:var(--sp-xs); font-family:var(--font-heading); font-size:var(--text-xs); color:#5dbf8a; margin-top:var(--sp-xs); }

.comp-inner { display:grid; grid-template-columns:240px 1fr; gap:var(--sp-3xl); align-items:start; }
.comp-inner--rev { grid-template-columns:1fr 240px; }
.comp-law { background:var(--color-surface-elevated); border:var(--divider); border-radius:var(--radius-xl); padding:var(--sp-xl); position:sticky; top:calc(var(--nav-h) + var(--sp-xl)); border-color:color-mix(in oklab, var(--color-primary) 35%, transparent); }
.comp-law-tag { font-family:var(--font-display); font-size:2.4rem; color:var(--color-accent); line-height:1; margin-bottom:var(--sp-md); }
.comp-law-name { font-family:var(--font-heading); font-size:var(--text-base); font-weight:600; line-height:1.3; margin-bottom:var(--sp-md); }
.comp-law-reg { font-size:var(--text-xs); color:var(--color-on-surface-3); line-height:1.6; }
.comp-content h2 { margin-bottom:var(--sp-xl); }
.comp-content p  { color:var(--color-on-surface-2); font-size:var(--text-base); line-height:1.75; max-width:58ch; margin-bottom:var(--sp-lg); }
.comp-evidence { margin-top:var(--sp-xl); padding:var(--sp-lg); background:rgba(255,255,255,.025); border:var(--divider); border-radius:var(--radius-lg); }
.ce-label { font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-on-surface-3); letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--sp-md); }
.ce-items { display:flex; flex-direction:column; gap:var(--sp-sm); }
.ce-item { display:flex; align-items:flex-start; gap:var(--sp-sm); font-size:var(--text-sm); color:var(--color-on-surface-2); font-family:var(--font-heading); line-height:1.5; }
.ce-item svg { flex-shrink:0; margin-top:.15em; }

.audit-pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-lg); margin-top:var(--sp-3xl); }
.ap-item { padding:var(--sp-xl); border:var(--divider); border-radius:var(--radius-lg); transition:border-color .25s; }
.ap-item:hover { border-color:var(--color-primary-hover); }
.ap-icon { color:var(--color-accent); margin-bottom:var(--sp-md); }
.ap-item h3 { font-size:var(--text-base); font-weight:600; margin-bottom:var(--sp-sm); }
.ap-item p  { font-size:var(--text-sm); color:var(--color-on-surface-2); line-height:1.7; max-width:none; }

@media(max-width:1100px) {
  .obligation-grid { grid-template-columns:1fr 1fr; }
  .audit-pillars { grid-template-columns:1fr 1fr; }
  .comp-inner, .comp-inner--rev { grid-template-columns:1fr; }
  .comp-law { position:static; }
}
@media(max-width:768px) {
  .obligation-grid { grid-template-columns:1fr; }
  .audit-pillars { grid-template-columns:1fr; }
}