/* ================= TECH THEME (2026-10-15) =================
   Identical across the three sites; per-site color is --accent-2 in the
   SITE ACCENT block of styles.css plus --accent. Layer loaded after the shared styles.css, so a sister-site
   sync of styles.css never clobbers it. Light-only, product-site look. All
   interaction is CSS (radio + :has(), details, hover); the page still ships
   zero JavaScript under script-src 'none'. */
:root {
  --ink: #0f172a;
  --ink-soft: #3b4556;
  --ink-faint: #556071;      /* 6.3:1 on --bg */
  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --border: #e4e8ee;
  --radius: 14px;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --glow: color-mix(in srgb, var(--accent) 10%, transparent);
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12);
  --shadow-lg: 0 2px 4px rgba(15,23,42,.04), 0 18px 40px -16px rgba(15,23,42,.22);
}
body { font-family: var(--sans); }
h1, h2 { letter-spacing: -0.025em; }
[id] { scroll-margin-top: 84px; }   /* sticky header must not cover anchor targets */

/* Header: sticky, translucent */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); }

/* Hero: dot grid + soft glow */
.hero-tech { position: relative; overflow: hidden; padding: 88px 0 64px; border-bottom: 1px solid var(--border);
  background:
    radial-gradient(60% 70% at 85% 0%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 70%),
    radial-gradient(50% 60% at 10% 10%, var(--glow), transparent 70%),
    radial-gradient(circle, #d5dbe3 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--bg); }
.hero-tech::after { content: ""; position: absolute; inset: auto 0 0 0; height: 120px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero-tech .container { position: relative; z-index: 1; }
.hero-tech h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); line-height: 1.12; max-width: 17ch; font-weight: 500; letter-spacing: -0.02em; }
.grad { background: linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-tech .lede { font-size: 1.1875rem; line-height: 1.65; max-width: 62ch; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); background: rgba(255,255,255,.9); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; margin-bottom: 22px; box-shadow: var(--shadow); }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
@media (prefers-reduced-motion: no-preference) { .pill-dot { animation: pulse 2.4s ease-in-out infinite; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(22,163,74,.05); } }
.btn { border-radius: 10px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-primary { box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-secondary { background: #fff; border-color: var(--border); color: var(--ink); }
.btn-secondary:hover { border-color: var(--accent-mid); color: var(--accent); }
.stat-strip { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 44px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.stat-strip li { background: rgba(255,255,255,.94); padding: 16px 18px; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.4; }
.stat-strip strong { display: block; font-size: 1.375rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }

/* Sections */
.section-tint { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head .kicker { margin-bottom: 8px; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }

/* Rule finder: radio chips reveal one panel (pure CSS) */
.finder { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-lg); }
.finder-chips { border: 0; display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.finder-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.finder-chips label { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-soft); transition: all .15s ease; user-select: none; }
.finder-chips label:hover { border-color: var(--accent-mid); color: var(--ink); background: #fff; }
.finder-chips input:checked + label { background: var(--ink); border-color: var(--ink); color: #fff; }
.finder-chips input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.finder-panel { display: none; padding-top: 20px; }
.finder:has(#d-general:checked) [data-for="d-general"],
.finder:has(#d-credit:checked) [data-for="d-credit"],
.finder:has(#d-hiring:checked) [data-for="d-hiring"],
.finder:has(#d-insurance:checked) [data-for="d-insurance"],
.finder:has(#d-health:checked) [data-for="d-health"],
.finder:has(#d-pricing:checked) [data-for="d-pricing"],
.finder:has(#d-eu:checked) [data-for="d-eu"] { display: block; }
@supports not selector(:has(*)) { .finder-panel { display: block; border-top: 1px solid var(--border); margin-top: 16px; } .finder-chips { display: none; } }
@media (prefers-reduced-motion: no-preference) { .finder-panel { animation: rise .25s ease; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.finder-key { font-size: var(--fs-ui); color: var(--ink); background: var(--accent-light); border: 1px solid var(--accent-mid); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.finder-key span { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-right: 8px; }
.finder-links { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: f; }
.finder-links li { counter-increment: f; position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 16px 16px 16px 50px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.finder-links li::before { content: counter(f); position: absolute; left: 14px; top: 15px; width: 24px; height: 24px; border-radius: 7px; background: var(--accent-light); color: var(--accent); font-size: var(--fs-xs); font-weight: 700; display: grid; place-items: center; font-family: var(--mono); }
.finder-links li:hover { border-color: var(--accent-mid); box-shadow: var(--shadow); transform: translateY(-2px); }
.finder-links a { font-weight: 600; color: var(--ink); text-decoration: none; }
.finder-links a::after { content: ""; position: absolute; inset: 0; }
.finder-links li:hover a { color: var(--accent); }
.finder-links p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.5; margin-top: 4px; }

/* Five layers: stacked accordion */
.layers { display: grid; gap: 10px; max-width: 820px; }
.layer { background: #fff; border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.layer:hover, .layer[open] { border-color: var(--accent-mid); box-shadow: var(--shadow); }
.layer summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 14px; padding: 16px 20px; font-weight: 600; font-size: var(--fs-lg); min-height: 44px; }
.layer summary::-webkit-details-marker { display: none; }
.layer summary::after { content: "+"; margin-left: auto; color: var(--ink-faint); font-weight: 500; font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.layer[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.layer-n { font-family: var(--mono); font-size: var(--fs-xs); color: var(--accent); font-weight: 600; }
.layer-sub { font-weight: 500; font-size: var(--fs-sm); color: var(--ink-faint); }
.layer p { padding: 0 20px 18px 54px; color: var(--ink-soft); font-size: var(--fs-ui); }
.layer p a { font-weight: 600; }

/* Key-dates timeline */
.timeline { list-style: none; position: relative; max-width: 820px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--border), var(--accent-mid), var(--border)); }
.tl-item { position: relative; display: grid; grid-template-columns: 120px 120px 1fr; gap: 12px; align-items: baseline; padding: 12px 0 12px 34px; border-bottom: 1px dashed var(--border); }
.tl-item::before { content: ""; position: absolute; left: 1px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-faint); }
.tl-item time { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.tl-status { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.tl-item a { color: var(--ink); text-decoration: none; font-size: var(--fs-ui); }
.tl-item a:hover { color: var(--accent); text-decoration: underline; }
.tl-juris { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 7%, #fff); border: 1px solid color-mix(in srgb, var(--accent-2) 22%, #fff); border-radius: 6px; padding: 1px 7px; margin-right: 6px; }
.tl-past::before { background: var(--accent); border-color: var(--accent); }
.tl-past .tl-status { color: var(--accent); }
.tl-next { background: linear-gradient(90deg, var(--accent-light), transparent); border-radius: 10px; }
.tl-next::before { border-color: #d97706; background: #fef3c7; box-shadow: 0 0 0 4px rgba(217,119,6,.15); }
.tl-next .tl-status { color: #b45309; }

/* Cards: lift + arrow, whole card clickable */
.card { background: #fff; position: relative; transition: border-color .15s, box-shadow .15s, transform .15s; }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card h3 a:hover { text-decoration: none; }
.card::after { content: "\2192"; position: absolute; right: 20px; bottom: 16px; color: var(--ink-faint); transition: transform .15s, color .15s; }
.card:hover::after { color: var(--accent); transform: translateX(3px); }
.card p { padding-bottom: 14px; }

/* Article pages: tech-light polish */
.article-hero { background: radial-gradient(circle, #e1e6ec 1px, transparent 1.2px) 0 0 / 22px 22px, var(--bg); border-bottom: 1px solid var(--border); padding-bottom: 28px; margin-bottom: 28px; }
.at-a-glance { background: #fff; box-shadow: var(--shadow); }
.site-footer { border-top: 1px solid var(--border); margin-top: 0; }

@media (prefers-reduced-motion: reduce) { .card, .btn, .finder-links li, .layer { transition: none; } .card:hover, .btn-primary:hover, .finder-links li:hover { transform: none; } }
@media (max-width: 860px) {
  .finder-links { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .tl-item { grid-template-columns: 110px 1fr; }
  .tl-item a { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .hero-tech { padding: 52px 0 40px; }
  .finder { padding: 16px; }
  .finder-chips label { padding: 8px 13px; }
  .layer p { padding-left: 20px; }
  .layer-sub { display: none; }
}
@media print { .site-header { position: static; } .finder-panel { display: block; } .finder-chips { display: none; } }

/* ================= JS LAYER (2026-10-15) =================
   Styles for what app.js adds. Nothing here is needed when JavaScript is off. */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--accent-2)); z-index: 60; pointer-events: none; }
.main-nav a[aria-current="page"] { color: var(--ink); background: var(--bg-soft); }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.is-in { opacity: 1; transform: none; }
}
/* On this page */
.toc { border: 1px solid var(--border); border-radius: 12px; margin: 0 0 28px; background: #fff; box-shadow: var(--shadow); }
.toc summary { cursor: pointer; list-style: none; padding: 12px 18px; font-size: var(--fs-sm); font-weight: 600; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; font-size: 1.2rem; color: var(--ink-faint); font-weight: 500; }
.toc[open] summary::after { content: "\2013"; }
.article-body .toc ol { margin: 0; padding: 0 18px 14px 2.3em; font-size: var(--fs-sm); }
.article-body .toc li { margin-bottom: 4px; }
.toc a { color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.toc a.is-active { color: var(--accent); font-weight: 600; }
.heading-link { margin-left: 8px; font-weight: 500; color: var(--ink-faint); text-decoration: none; opacity: 0; transition: opacity .15s ease; font-size: .8em; }
h2:hover .heading-link, .heading-link:focus-visible { opacity: 1; }
/* Timeline filter + countdown */
.tl-filter { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 18px; max-width: 820px; }
.tl-group { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tl-chip { font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; min-height: 40px; cursor: pointer; }
.tl-chip:hover { border-color: var(--accent-mid); color: var(--ink); }
.tl-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tl-countdown { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; text-transform: none; color: #b45309; }
/* Tickable guide checklists */
.article-body ul.checklist.is-live li { padding-left: 0; display: flex; gap: 10px; align-items: flex-start; }
.checklist.is-live li::before { display: none; }
.checklist.is-live input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin-top: 5px; accent-color: var(--accent); cursor: pointer; }
.checklist.is-live label { cursor: pointer; }
.checklist.is-live li.is-done label { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--border); }
.article-body .checklist-status { display: flex; align-items: center; gap: 12px; margin: -6px 0 22px; font-size: var(--fs-sm); color: var(--ink-faint); }
.checklist-reset { font: inherit; font-size: var(--fs-sm); color: var(--accent); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 8px 4px; min-height: 36px; }
/* Glossary search */
.gl-search { position: relative; margin: 8px 0 6px; }
.gl-search input { width: 100%; font: inherit; font-size: var(--fs-ui); color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 13px 44px 13px 16px; box-shadow: var(--shadow); outline: none; transition: border-color .15s, box-shadow .15s; }
.gl-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.gl-search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-faint); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; background: var(--bg-soft); }
.gl-result { font-size: var(--fs-sm); color: var(--ink-faint); min-height: 1.4em; margin-bottom: 8px; }
[hidden] { display: none !important; }
@media print { .progress, .toc, .tl-filter, .gl-search, .checklist-reset, .heading-link { display: none; } .reveal { opacity: 1 !important; transform: none !important; } }