/* ============================================================================
   port30.se — marketing site layer.
   Builds on the Port 30 Design System (colors_and_type.css). References only
   semantic tokens. No new colours invented.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* Smooth in-page scroll, but never when reduced-motion is requested
   (colors_and_type.css already forces scroll-behavior:auto under reduce). */
html { scroll-behavior: smooth; }

body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }

/* --- Type-scale + density tweak hooks ------------------------------------ */
/* Default 100%. Tweak panel re-points --scale. Body never below 1.125rem floor
   is honoured because base is 16px and body role uses 1.125rem here. */
:root { --scale: 1; --pad-block: var(--space-9); }
html[data-typescale="compact"]   { --scale: 0.92; }
html[data-typescale="large"]     { --scale: 1.12; }
html[data-density="compact"] { --pad-block: var(--space-7); }
html[data-density="airy"]    { --pad-block: var(--space-10); }

/* --- Containers ---------------------------------------------------------- */
.wrap      { width: 100%; max-width: var(--container-mkt); margin-inline: auto; padding-inline: var(--space-5); }
.wrap-wide { width: 100%; max-width: var(--container-app); margin-inline: auto; padding-inline: var(--space-5); }
.measure   { max-inline-size: var(--measure); }
@media (min-width: 768px)  { .wrap, .wrap-wide { padding-inline: var(--space-6); } }
@media (min-width: 1180px) { .wrap, .wrap-wide { padding-inline: var(--space-7); } }

.section { padding-block: var(--pad-block); }
.section--tight { padding-block: var(--space-7); }
.section + .section { border-top: 1px solid var(--border-default); }

/* --- Body copy rhythm (dyslexia floor: >=1.5 leading, ragged right) ------ */
p { margin: 0 0 var(--space-4); line-height: 1.6; }
.lead { font-size: calc(var(--text-md) * var(--scale)); line-height: 1.6; color: var(--fg-muted); }
a { color: var(--accent-fg); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }

/* ============================================================================
   SKIP LINK
   ============================================================================ */
.skip-link {
  position: fixed; top: var(--space-3); left: var(--space-3);
  z-index: var(--z-toast);
  background: var(--accent-default); color: var(--fg-on-accent);
  padding: 12px 18px; border-radius: var(--radius-xs);
  font-weight: var(--weight-semibold); font-size: var(--text-sm);
  transform: translateY(-160%); transition: transform var(--motion-dur-short) var(--motion-ease-port);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================================
   HEADER / NAV
   ============================================================================ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--bg-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-default);
}
.site-header__bar {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 64px;
}
.brand-link { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-default); text-decoration: none; flex: none; min-height: 44px; }
.brand-link svg { height: 30px; width: auto; display: block; }
.brand-link:hover { text-decoration: none; }

.primary-nav { display: none; align-items: center; gap: 2px; margin-inline-start: auto; }
.primary-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 14px; border-radius: var(--radius-xs);
  color: var(--fg-muted); text-decoration: none;
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: 0.005em;
  transition: color var(--motion-dur-short) var(--motion-ease-port), background var(--motion-dur-short) var(--motion-ease-port);
}
.primary-nav a:hover { color: var(--fg-default); background: var(--bg-subtle); text-decoration: none; }
.primary-nav a[aria-current="page"] { color: var(--accent-fg); }
.primary-nav a[aria-current="page"]::after {
  content: ""; position: absolute; /* underline indicator drawn via box below */
}
.primary-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent-default); border-radius: 0; }

.header-tools { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
@media (min-width: 900px) { .header-tools { margin-inline-start: var(--space-4); } .primary-nav { display: flex; } }

/* Segmented language switcher */
.lang-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); overflow: hidden; }
.lang-switch button {
  appearance: none; border: 0; background: var(--bg-surface); color: var(--fg-muted);
  font: var(--weight-semibold) var(--text-xs)/1 var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0 10px; min-height: 36px; min-width: 40px; cursor: pointer;
  transition: background var(--motion-dur-short) var(--motion-ease-port), color var(--motion-dur-short) var(--motion-ease-port);
}
.lang-switch button + button { border-inline-start: 1px solid var(--border-strong); }
.lang-switch button[aria-pressed="true"] { background: var(--accent-default); color: var(--fg-on-accent); }
/* TYPO3 language menu renders <a> elements (real per-language URLs) */
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-surface); color: var(--fg-muted);
  font: var(--weight-semibold) var(--text-xs)/1 var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0 10px; min-height: 36px; min-width: 40px; text-decoration: none;
  transition: background var(--motion-dur-short) var(--motion-ease-port), color var(--motion-dur-short) var(--motion-ease-port);
}
.lang-switch a + a { border-inline-start: 1px solid var(--border-strong); }
.lang-switch a:hover { background: var(--bg-subtle); color: var(--fg-default); text-decoration: none; }
.lang-switch a[aria-current="true"] { background: var(--accent-default); color: var(--fg-on-accent); }

/* Icon button (theme toggle, menu) */
.icon-btn {
  appearance: none; border: 1px solid var(--border-strong); background: var(--bg-surface);
  color: var(--fg-muted); border-radius: var(--radius-xs);
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; flex: none;
  transition: background var(--motion-dur-short) var(--motion-ease-port), color var(--motion-dur-short) var(--motion-ease-port);
}
.icon-btn:hover { background: var(--bg-subtle); color: var(--fg-default); }
.icon-btn svg { width: 20px; height: 20px; }
/* show correct theme glyph */
.icon-btn .i-moon { display: none; }
html[data-theme="dark"] .icon-btn .i-sun { display: none; }
html[data-theme="dark"] .icon-btn .i-moon { display: block; }

/* Mobile nav (details/summary, no JS needed) */
.nav-mobile { display: flex; }
@media (min-width: 900px) { .nav-mobile { display: none; } }
.nav-mobile > summary { list-style: none; }
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg-surface); border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-popover);
  padding: var(--space-3) var(--space-5) var(--space-5);
  display: flex; flex-direction: column; gap: 2px;
}
.nav-mobile__panel a {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px;
  color: var(--fg-default); text-decoration: none; font-weight: var(--weight-semibold);
  border-radius: var(--radius-xs);
}
.nav-mobile__panel a:hover { background: var(--bg-subtle); }
.nav-mobile__panel a[aria-current="page"] { color: var(--accent-fg); box-shadow: inset 2px 0 0 var(--accent-default); }

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--radius-xs);
  font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--motion-dur-short) var(--motion-ease-port), color var(--motion-dur-short) var(--motion-ease-port), border-color var(--motion-dur-short) var(--motion-ease-port);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--accent-default); color: var(--fg-on-accent); }
.btn-primary:hover { background: var(--accent-hover); text-decoration: none; }
.btn-primary:active { background: var(--accent-active); box-shadow: var(--shadow-inset-press); }
.btn-secondary { background: var(--bg-surface); color: var(--fg-default); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-subtle); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--accent-fg); padding-inline: 8px; }
.btn-ghost:hover { background: var(--bg-subtle); text-decoration: none; }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: var(--text-base); }
.btn-arrow svg { transition: transform var(--motion-dur-short) var(--motion-ease-port); }
.btn-arrow:hover svg { transform: translateX(3px); }

/* ============================================================================
   GENERIC TEXT BLOCKS
   ============================================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: var(--weight-semibold) var(--text-xs)/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle);
  margin: 0 0 var(--space-4);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent-default); }
.eyebrow--plain::before { display: none; }

h1.display { font-size: calc(var(--text-5xl) * var(--scale)); line-height: 1.04; letter-spacing: -0.02em; font-weight: var(--weight-bold); margin: 0; }
.section-title { font-size: calc(var(--text-3xl) * var(--scale)); line-height: 1.15; letter-spacing: -0.018em; margin: 0 0 var(--space-3); }
.section-intro { color: var(--fg-muted); font-size: calc(var(--text-md) * var(--scale)); max-inline-size: 60ch; margin: 0; line-height: 1.6; }

/* accent keyword in headings, gated by accent-intensity tweak */
.kw { color: var(--accent-fg); }
html[data-accent="subtle"] .kw { color: inherit; }
html[data-accent="bold"]   .kw { color: var(--accent-default); }

.section-head { margin-bottom: var(--space-7); }
.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-intro { margin-inline: auto; }

/* ============================================================================
   HERO (home)
   ============================================================================ */
.hero { position: relative; padding-block: var(--space-9) var(--space-8); overflow: clip; }
.hero__grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); } }
.hero__copy { max-width: 38rem; }
.hero p.lead { margin-top: var(--space-5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-default); }
.hero__meta div { display: flex; flex-direction: column; gap: 2px; }
.hero__meta dt { font: var(--weight-semibold) 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle); }
.hero__meta dd { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-default); }

/* faint engineering grid backdrop on the hero */
.hero__grid-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--border-default) 60%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--border-default) 60%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 18%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 70% 18%, #000 0%, transparent 70%);
  opacity: 0.6;
}

/* ============================================================================
   ENGINEERED DIAGRAM (hero visual + reusable schematic frame)
   ============================================================================ */
.diagram {
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--bg-surface); box-shadow: var(--shadow-raised);
  overflow: hidden;
}
.diagram__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }
.diagram__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.diagram__title { font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); color: var(--fg-muted); letter-spacing: 0.04em; margin-inline-start: 4px; }
.diagram__body { padding: var(--space-5); }
.diagram svg { display: block; width: 100%; height: auto; }

/* schematic strokes use semantic tokens */
.sch-edge   { stroke: var(--border-strong); stroke-width: 1.5; fill: none; }
.sch-edge-2 { stroke: var(--border-default); stroke-width: 1; fill: none; }
.sch-accent { stroke: var(--accent-default); stroke-width: 1.5; fill: none; }
.sch-node-fill { fill: var(--bg-surface); }
.sch-node-stroke { stroke: var(--border-strong); stroke-width: 1.5; fill: var(--bg-surface); }
.sch-hub { fill: var(--accent-default); }
.sch-label { font: var(--weight-medium) 11px/1 var(--font-mono); fill: var(--fg-muted); letter-spacing: 0.02em; }
.sch-label-strong { font: var(--weight-semibold) 12px/1 var(--font-sans); fill: var(--fg-default); }
.sch-port { font: var(--weight-semibold) 10px/1 var(--font-mono); fill: var(--fg-subtle); letter-spacing: 0.04em; }
.sch-onhub { fill: var(--fg-on-accent); }

/* travelling packet — only animates with motion allowed + active page */
.sch-packet { fill: var(--accent-default); }
@media (prefers-reduced-motion: no-preference) {
  .sch-packet { offset-rotate: 0deg; animation: packet 3.2s var(--motion-ease-port) infinite; }
  .sch-packet.p2 { animation-delay: 0.8s; }
  .sch-packet.p3 { animation-delay: 1.6s; }
  .sch-packet.p4 { animation-delay: 2.4s; }
}
@keyframes packet { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ============================================================================
   PRODUCT PORTFOLIO CARDS
   ============================================================================ */
.card-grid { display: grid; gap: var(--space-4); }
@media (min-width: 720px)  { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px)  { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.product-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: var(--space-5);
  text-decoration: none; color: inherit;
  transition: border-color var(--motion-dur-short) var(--motion-ease-port), box-shadow var(--motion-dur-medium) var(--motion-ease-port), transform var(--motion-dur-medium) var(--motion-ease-port);
}
.product-card:hover { text-decoration: none; border-color: var(--accent-default); box-shadow: var(--shadow-raised); }
@media (prefers-reduced-motion: no-preference) { .product-card:hover { transform: translateY(-2px); } }
.product-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.product-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-fg); }
.product-mark svg { height: 22px; width: auto; }
.product-mark .name { font: var(--weight-bold) var(--text-lg)/1 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-default); }
.product-mark .name small { font-weight: var(--weight-semibold); color: var(--fg-muted); font-size: 0.62em; letter-spacing: 0; }
.port-chip { font: var(--weight-semibold) 10px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--accent-fg); background: var(--accent-soft); border-radius: var(--radius-full); padding: 5px 9px; }
.product-card h3 { font-size: var(--text-lg); letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
.product-card p { font-size: var(--text-sm); color: var(--fg-muted); margin: 0; line-height: 1.6; }
.product-card__foot { display: flex; align-items: center; gap: 6px; margin-top: var(--space-5); color: var(--accent-fg); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.product-card__foot svg { width: 16px; height: 16px; transition: transform var(--motion-dur-short) var(--motion-ease-port); }
.product-card:hover .product-card__foot svg { transform: translateX(3px); }
.product-card--side { background: var(--bg-canvas); border-style: dashed; }

.side-flag { font: var(--weight-semibold) 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); }

/* ============================================================================
   TRUST POSTURE ROW
   ============================================================================ */
.posture { display: grid; gap: var(--space-5); }
@media (min-width: 680px)  { .posture { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .posture { grid-template-columns: repeat(4, 1fr); } }
.posture__item { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 2px solid var(--accent-default); }
.posture__item h3 { font-size: var(--text-md); letter-spacing: -0.01em; margin: 0; }
.posture__item p { font-size: var(--text-sm); color: var(--fg-muted); margin: 0; line-height: 1.55; }
.posture__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-fg); margin-bottom: var(--space-1); }
.posture__icon svg { width: 22px; height: 22px; }

/* ============================================================================
   FEATURE BLOCKS (product pages)
   ============================================================================ */
.feature-grid { display: grid; gap: var(--space-4); }
@media (min-width: 720px)  { .feature-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px)  { .feature-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .feature-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.feature {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: var(--space-5);
}
.feature__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-fg); margin-bottom: var(--space-4); }
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: var(--text-md); letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
.feature p { font-size: var(--text-sm); color: var(--fg-muted); margin: 0; line-height: 1.6; }
.feature code { font-size: 0.9em; color: var(--accent-fg); }

/* numbered "how it works" steps */
.steps { display: grid; gap: var(--space-5); counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: var(--space-6); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font: var(--weight-bold) var(--text-xl)/1 var(--font-mono); color: var(--accent-default);
  font-variant-numeric: tabular-nums;
}
.step::after { content: ""; position: absolute; top: 8px; left: 44px; right: 0; height: 1px; background: var(--border-default); }
.step:last-child::after { display: none; }
.step h3 { font-size: var(--text-md); margin: 0 0 var(--space-2); letter-spacing: -0.01em; }
.step p { font-size: var(--text-sm); color: var(--fg-muted); margin: 0; line-height: 1.6; }

/* ============================================================================
   PRODUCT HERO (sub-brand themed via data-brand on the <section>)
   ============================================================================ */
.product-hero { padding-block: var(--space-8) var(--space-7); border-bottom: 1px solid var(--border-default); position: relative; }
.product-hero__accentline { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-default); }
.product-hero__grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 940px) { .product-hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); } }
.product-lockup { display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--space-5); }
.product-lockup .glyph { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-default); }
.product-lockup .glyph svg { width: 26px; height: 26px; }
.product-lockup .pl-name { font: var(--weight-bold) var(--text-2xl)/1 var(--font-sans); letter-spacing: -0.02em; }
.product-lockup .pl-name small { display: block; font: var(--weight-semibold) var(--text-xs)/1.2 var(--font-mono); letter-spacing: 0.08em; color: var(--fg-muted); margin-top: 5px; text-transform: uppercase; }
.product-hero h1 { font-size: calc(var(--text-4xl) * var(--scale)); line-height: 1.08; letter-spacing: -0.02em; margin: 0; }

/* compliance / trust note strip */
.note-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--accent-soft); border-radius: var(--radius-sm);
}
.note-strip .ns-item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--accent-fg); }
.note-strip svg { width: 18px; height: 18px; }

/* spec list with mono leaders */
.speclist { display: grid; gap: 0; border-top: 1px solid var(--border-default); }
.speclist > div { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-default); }
.speclist dt { font: var(--weight-semibold) var(--text-xs)/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); margin: 0; }
.speclist dd { margin: 0; font-size: var(--text-sm); color: var(--fg-default); line-height: 1.55; }
@media (max-width: 560px) { .speclist > div { grid-template-columns: 1fr; gap: 4px; } }

/* ============================================================================
   PROSE (about / trust / legal)
   ============================================================================ */
.prose { max-inline-size: var(--measure); }
.prose h2 { font-size: calc(var(--text-2xl) * var(--scale)); margin: var(--space-7) 0 var(--space-3); letter-spacing: -0.015em; }
.prose h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.prose p { line-height: 1.6; color: var(--fg-default); }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); line-height: 1.6; }
.prose strong { color: var(--fg-default); }
.prose .first { margin-top: 0; }

/* callout */
.callout { border: 1px solid var(--border-default); border-left: 3px solid var(--accent-default); background: var(--bg-surface); border-radius: var(--radius-xs); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; }
.callout p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); }
.callout p + p { margin-top: var(--space-2); }
.callout strong { color: var(--fg-default); }

/* status pill (in-progress / pending) */
.status { display: inline-flex; align-items: center; gap: 6px; font: var(--weight-semibold) var(--text-xs)/1 var(--font-sans); padding: 5px 10px; border-radius: var(--radius-full); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.status--progress { background: var(--feedback-warning-bg); color: var(--feedback-warning-fg); }
.status--progress::before { background: var(--warning-500); }
.status--pending { background: var(--feedback-info-bg); color: var(--feedback-info-fg); }
.status--pending::before { background: var(--info-500); }
.status--ok { background: var(--feedback-success-bg); color: var(--feedback-success-fg); }
.status--ok::before { background: var(--success-500); }

/* ============================================================================
   CONTACT FORM
   ============================================================================ */
.form-grid { display: grid; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-default); }
.field .hint { font-size: var(--text-xs); color: var(--fg-muted); }
.field input, .field textarea, .field select {
  font: var(--weight-regular) var(--text-base)/1.5 var(--font-sans);
  color: var(--fg-default); background: var(--bg-surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  padding: 11px 13px; min-height: 44px; width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-subtle); }
.req { color: var(--danger-500); }
html[data-theme="dark"] .req { color: var(--feedback-danger-fg); }

/* ============================================================================
   KEY-VALUE / COMPANY FACTS
   ============================================================================ */
.facts { display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-default); }
.facts dt { font: var(--weight-semibold) var(--text-xs)/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); margin: 0; }
.facts dd { margin: 0; font-size: var(--text-sm); color: var(--fg-default); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .facts > div { grid-template-columns: 1fr; gap: 4px; } }

/* numeric emphasis used sparingly, in context */
.figure { font-variant-numeric: tabular-nums lining-nums; font-weight: var(--weight-semibold); color: var(--fg-default); }

/* ============================================================================
   CTA BAND
   ============================================================================ */
.cta-band { background: var(--bg-inverse); color: var(--fg-on-inverse); border-radius: var(--radius-md); padding: var(--space-8) var(--space-7); }
.cta-band h2 { color: var(--fg-on-inverse); font-size: calc(var(--text-3xl) * var(--scale)); letter-spacing: -0.018em; margin: 0 0 var(--space-3); }
.cta-band p { color: color-mix(in oklch, var(--fg-on-inverse) 78%, transparent); max-inline-size: 52ch; margin: 0 0 var(--space-6); }
.cta-band .btn-primary { background: var(--bg-surface); color: var(--fg-default); }
.cta-band .btn-primary:hover { background: var(--bg-subtle); }
.cta-band .btn-secondary { background: transparent; color: var(--fg-on-inverse); border-color: color-mix(in oklch, var(--fg-on-inverse) 40%, transparent); }
.cta-band .btn-secondary:hover { background: color-mix(in oklch, var(--fg-on-inverse) 12%, transparent); }
.cta-band__grid { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 820px) { .cta-band__grid { grid-template-columns: 1.4fr auto; } }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ============================================================================
   FOOTER
   ============================================================================ */
.site-footer { margin-top: auto; background: var(--bg-surface); border-top: 1px solid var(--border-default); padding-block: var(--space-8) var(--space-6); }
.footer__grid { display: grid; gap: var(--space-7); }
@media (min-width: 760px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer__brand .brand-link svg { height: 34px; }
.footer__org { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.7; }
.footer__org .figure { color: var(--fg-default); }
.footer-col h4 { font: var(--weight-semibold) var(--text-xs)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle); margin: 0 0 var(--space-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.footer-col a { display: inline-flex; min-height: 36px; align-items: center; color: var(--fg-muted); text-decoration: none; font-size: var(--text-sm); }
.footer-col a:hover { color: var(--fg-default); text-decoration: underline; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border-default); }
.footer__bottom p { margin: 0; font-size: var(--text-xs); color: var(--fg-subtle); }
.footer__host { display: inline-flex; align-items: center; gap: 8px; font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); color: var(--fg-subtle); }
.footer__host .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-500); }

/* ============================================================================
   ENTRANCE ANIMATION (gated; safe for print + reduced motion + no-JS)
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  html[data-anim="on"] .reveal { opacity: 0; transform: translateY(14px); }
  html[data-anim="on"] .reveal.in { opacity: 1; transform: none; transition: opacity var(--motion-dur-long) var(--motion-ease-port), transform var(--motion-dur-long) var(--motion-ease-port); }
  html[data-anim="on"] .reveal.in.d1 { transition-delay: 60ms; }
  html[data-anim="on"] .reveal.in.d2 { transition-delay: 120ms; }
  html[data-anim="on"] .reveal.in.d3 { transition-delay: 180ms; }
  html[data-anim="on"] .reveal.in.d4 { transition-delay: 240ms; }
}

/* ============================================================================
   FOOTNOTE / SUP
   ============================================================================ */
.fn { font-size: 0.7em; vertical-align: super; line-height: 0; font-weight: var(--weight-semibold); color: var(--accent-fg); text-decoration: none; }
.footnote { font-size: var(--text-xs); color: var(--fg-muted); line-height: 1.6; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-default); }
.footnote p { margin: 0 0 var(--space-2); font-size: var(--text-xs); }

/* ============================================================================
   TWEAKS PANEL (vanilla)
   ============================================================================ */
#tweaks-root { position: fixed; inset: 0; z-index: var(--z-popover); pointer-events: none; display: none; }
#tweaks-root.open { display: block; }
.tweaks-panel {
  position: absolute; top: 16px; right: 16px; width: 320px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px); overflow: auto; pointer-events: auto;
  background: var(--bg-surface); color: var(--fg-default);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  font-family: var(--font-sans);
}
.tweaks-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-default); position: sticky; top: 0; background: var(--bg-surface); }
.tweaks-head h2 { font: var(--weight-bold) var(--text-sm)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; color: var(--fg-default); }
.tweaks-close { appearance: none; border: 0; background: transparent; color: var(--fg-muted); width: 30px; height: 30px; border-radius: var(--radius-xs); cursor: pointer; display: grid; place-items: center; }
.tweaks-close:hover { background: var(--bg-subtle); color: var(--fg-default); }
.tweaks-body { padding: 8px 16px 18px; }
.tweak-sec { font: var(--weight-semibold) 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle); margin: 18px 0 10px; }
.tweak-sec:first-child { margin-top: 8px; }
.tweak-row { margin-bottom: 12px; }
.tweak-row > .lbl { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--fg-muted); margin-bottom: 6px; }
.seg { display: flex; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); overflow: hidden; }
.seg button { flex: 1; appearance: none; border: 0; background: var(--bg-surface); color: var(--fg-muted); font: var(--weight-semibold) var(--text-xs)/1 var(--font-sans); padding: 9px 6px; min-height: 38px; cursor: pointer; }
.seg button + button { border-inline-start: 1px solid var(--border-strong); }
.seg button[aria-pressed="true"] { background: var(--accent-default); color: var(--fg-on-accent); }
.swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 38px; height: 38px; border-radius: var(--radius-xs); border: 1px solid var(--border-strong); cursor: pointer; padding: 0; position: relative; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent-default); }
.swatch span { position: absolute; inset: 0; display: grid; place-items: end center; font: var(--weight-semibold) 8px/1 var(--font-mono); color: #fff; padding-bottom: 3px; mix-blend-mode: difference; }
.tweaks-note { font-size: 11px; color: var(--fg-subtle); line-height: 1.5; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-default); }

/* visually-hidden but accessible */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================================
   DATA / RECORD PANELS (product hero side visuals — engineering-credible)
   ============================================================================ */
.record-card { border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); box-shadow: var(--shadow-raised); overflow: hidden; }
.record-card__bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }
.record-card__method { font: var(--weight-semibold) 10px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--fg-on-accent); background: var(--accent-default); padding: 4px 7px; border-radius: var(--radius-xs); }
.record-card__path { font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); color: var(--fg-muted); }
.record-card__body { padding: 6px 16px 10px; }
.record-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-default); align-items: baseline; }
.record-row:last-child { border-bottom: 0; }
.record-row .k { font: var(--weight-medium) var(--text-sm)/1.4 var(--font-mono); color: var(--fg-muted); }
.record-row .v { font: var(--weight-semibold) var(--text-sm)/1.4 var(--font-mono); color: var(--fg-default); font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.record-row .v.accent { color: var(--accent-fg); }
.record-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-default); background: var(--bg-subtle); }
.record-foot .muted { font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); color: var(--fg-subtle); }

/* horizontal pipeline */
.pipe { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .pipe { grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; } }
.pipe__step { position: relative; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); padding: var(--space-4); }
.pipe__step .n { font: var(--weight-semibold) 10px/1 var(--font-mono); color: var(--accent-fg); letter-spacing: 0.08em; }
.pipe__step h4 { font-size: var(--text-sm); margin: 8px 0 4px; letter-spacing: -0.01em; }
.pipe__step p { font-size: var(--text-xs); color: var(--fg-muted); margin: 0; line-height: 1.5; }

/* simple page header for inner pages */
.page-hero { padding-block: var(--space-8) var(--space-6); border-bottom: 1px solid var(--border-default); }
.page-hero h1 { font-size: calc(var(--text-4xl) * var(--scale)); line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.page-hero .lead { margin-top: var(--space-4); }

/* mini financial table for NAV side panel */
.mini-ftable { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
.mini-ftable th { font: var(--weight-semibold) 9px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }
.mini-ftable th.num, .mini-ftable td.num { text-align: right; }
.mini-ftable td { padding: 9px 10px; border-bottom: 1px solid var(--border-default); font-size: var(--text-xs); font-variant-numeric: tabular-nums lining-nums; color: var(--fg-default); }
.mini-ftable td.id { color: var(--accent-fg); }
.mini-ftable tr:last-child td { border-bottom: 0; }

/* language visibility */
html[data-lang="sv"] .en, html[data-lang="en"] .sv { display: none; }
html[data-lang="sv"] span.en, html[data-lang="en"] span.sv { display: none; }