/* Appware public site. Institutional layout: hairline grids, tabular financial figures, bounded SVG diagrams.
   Every colour, font and space comes from the active theme tokens in /static/theme.css (var(--...)), so any theme works.
   Hairlines are 1px borders and inset shadows (not gaps), so spacing stays on the token scale. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--space-8) + var(--space-3)); }
body.site {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.font-mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent-primary); color: var(--text-on-accent); padding: var(--space-2) var(--space-4); z-index: 2000; }
.skip-link:focus { left: var(--space-4); top: var(--space-2); }
a { color: var(--accent-primary); }
:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* ---- Header and navigation ------------------------------------------------------------------------------------
   The brand never shrinks or wraps (flex: 0 0 auto, nowrap). The link list is its own flex row with a real gap and
   nowrap links; below 1080px it collapses into a menu, so the two can never overlap at any width. */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle);
}
.header-bar { display: flex; align-items: center; gap: var(--space-5); min-height: 64px; position: relative; }
.brand {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-3);
  white-space: nowrap; text-decoration: none; color: var(--text-primary);
  font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1;
}
.brand-mark {
  flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px; background: var(--gradient-accent); color: var(--text-on-accent); font-weight: 800; font-size: 0.95rem;
}
.brand-word { white-space: nowrap; }
.brand-tld { color: var(--accent-primary); }
.site-nav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-5); }
.nav-list { list-style: none; display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.nav-list a {
  display: inline-block; white-space: nowrap; padding: var(--space-2) 0;
  color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500;
  border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--accent-primary); }
.nav-cta { flex: 0 0 auto; white-space: nowrap; }
.nav-toggle {
  display: none; flex: 0 0 auto; margin-left: auto; align-items: center; gap: var(--space-3); white-space: nowrap;
  background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 2px;
  padding: var(--space-2) var(--space-3); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-base); border-bottom: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle);
    padding: var(--space-3) var(--space-5) var(--space-4); box-shadow: var(--shadow-md);
  }
  .site-header.nav-open .site-nav { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: 1px solid var(--border-subtle); }
  .nav-list a { display: block; padding: var(--space-3) 0; font-size: 1rem; }
  .nav-cta { margin-top: var(--space-4); width: 100%; }
}

/* ---- Type, sections ------------------------------------------------------------------------------------------ */
.eyebrow { display: flex; align-items: center; gap: var(--space-2); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--accent-primary); font-weight: 600; margin-bottom: var(--space-3); }
.center .eyebrow { justify-content: center; }
.pulse-dot { flex: 0 0 auto; width: 7px; height: 7px; background: var(--accent-primary); }  /* a square status lamp: flat, no glow */
h1, h2, h3, h4 { color: var(--text-primary); line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
.section { padding-top: var(--space-7); padding-bottom: var(--space-3); }
.section-head { margin-bottom: var(--space-5); max-width: 760px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-sub, .lede, .cell p, .faq-item p, .data-table td { overflow-wrap: anywhere; }  /* long identifiers such as IAM action names wrap instead of widening the page */
.section-sub { color: var(--text-muted); margin-top: var(--space-3); max-width: 760px; }
.center .section-sub { margin-left: auto; margin-right: auto; }
.lede { font-size: 1.1rem; color: var(--text-muted); max-width: 720px; line-height: 1.7; }
.t-cyan { color: var(--accent-primary); } .t-green { color: var(--accent-success); } .t-amber { color: var(--accent-warning); }
.t-white { color: var(--text-primary); } .t-dim { color: var(--text-muted); }

/* ---- Hero ------------------------------------------------------------------------------------------------------ */
.hero { padding-top: var(--space-8); padding-bottom: var(--space-6); }
.hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.7rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; max-width: 900px; margin-bottom: var(--space-5); overflow-wrap: break-word; }
.hero h1 .accent { color: var(--accent-primary); }
.hero-actions, .cta-row, .link-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.hero-actions { margin-bottom: var(--space-7); }
.page-hero { padding-top: var(--space-7); padding-bottom: var(--space-4); }
.page-hero h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; max-width: 900px; margin-bottom: var(--space-4); overflow-wrap: break-word; }
.anchor-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.anchor-row a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; white-space: nowrap; }
.anchor-row a:hover { color: var(--accent-primary); }

/* ---- Hairline grids: top and left borders on the grid, right and bottom hairlines inset on every cell ----------- */
.stat-strip, .grid-cells, .pricing-grid, .kv-grid {
  display: grid; border-top: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); list-style: none; margin-top: var(--space-5);
}
.stat-strip > *, .grid-cells > *, .pricing-grid > *, .kv-grid > * { box-shadow: inset -1px -1px 0 var(--border-subtle); min-width: 0; }
.stat-strip { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat { background: var(--bg-surface); padding: var(--space-4) var(--space-5); }
.stat dt { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.stat dd { font-size: 1.2rem; font-weight: 700; margin-top: var(--space-1); color: var(--text-primary); overflow-wrap: break-word; }
.cells-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cell { background: var(--bg-surface); padding: var(--space-5); }
.cell h3 { margin-bottom: var(--space-2); }
.cell p { color: var(--text-muted); font-size: 0.92rem; }
.cell-index { display: block; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--accent-primary); margin-bottom: var(--space-3); }
.cell-check { margin-top: var(--space-3); font-size: 0.75rem; color: var(--text-muted); }
.cell-link { text-decoration: none; color: inherit; display: block; transition: background 0.15s; }
.cell-link:hover { background: var(--bg-elevated); }
.cell-link:hover h3 { color: var(--accent-primary); }
.teasers { margin-top: 0; }
@media (max-width: 980px) { .cells-4, .cells-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cells-4, .cells-3 { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 2px; padding: var(--space-6); }
.kv-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--space-4); }
.kv-grid > div { background: var(--bg-base); padding: var(--space-4); }
.kv-grid dt { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.kv-grid dd { margin-top: var(--space-1); font-weight: 600; overflow-wrap: anywhere; }

/* ---- Buttons --------------------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap;
  padding: var(--space-3) var(--space-5); border-radius: 2px; font-size: 0.95rem; font-weight: 600; font-family: inherit; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.btn-lg { padding: var(--space-4) var(--space-6); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: 0.82rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--gradient-accent); color: var(--text-on-accent); }
.btn-primary:hover { box-shadow: var(--shadow-glow); }
.btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ---- Terminal -------------------------------------------------------------------------------------------------- */
.terminal-window { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: 2px; overflow: hidden; box-shadow: var(--shadow-md); }
.terminal-header { background: var(--bg-surface); padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-4); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.terminal-dots { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-red { background: var(--accent-danger); } .dot-yellow { background: var(--accent-warning); } .dot-green { background: var(--accent-success); }
.terminal-title { font-size: 0.78rem; color: var(--text-muted); flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal-tag { font-size: 0.72rem; letter-spacing: 0.04em; white-space: nowrap; }
.terminal-body { padding: var(--space-5); font-size: 0.84rem; line-height: 1.75; color: var(--text-muted); overflow-x: auto; }
.t-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.js .t-line.pending { visibility: hidden; }

/* ---- Diagrams: bounded SVGs with explicit viewBox, width and height --------------------------------------------- */
.diagram-card { border: 1px solid var(--border-subtle); border-radius: 2px; background: var(--bg-surface); padding: var(--space-5); margin: var(--space-5) 0; overflow-x: auto; }
.diagram { display: block; width: 100%; max-width: 960px; min-width: 640px; height: auto; margin: 0 auto; }
.diagram-detail { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 0.9rem; min-height: 3em; }
.dg-node { cursor: default; outline: none; }
.dg-zone { fill: var(--bg-surface); stroke: var(--border-subtle); stroke-width: 1; }
.dg-dashed { fill: color-mix(in srgb, var(--accent-primary) 3%, transparent); stroke: var(--accent-primary); stroke-dasharray: 6 5; }
.dg-ok { stroke: var(--accent-success); }
.dg-box { fill: var(--bg-base); stroke: var(--border-subtle); stroke-width: 1; }
.dg-title { fill: var(--accent-primary); font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.dg-ok-text { fill: var(--accent-success); }
.dg-mono { fill: var(--text-secondary); font-family: var(--font-mono); font-size: 12px; }
.dg-muted { fill: var(--text-muted); font-family: var(--font-body); font-size: 11px; }
.dg-danger { fill: var(--accent-danger); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.dg-arrow { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-linecap: square; }
.dg-arrow-back { stroke-dasharray: 3 4; }
.dg-arrow-deny { stroke: var(--accent-danger); stroke-dasharray: 3 4; }
.dg-node:hover .dg-zone, .dg-node:focus .dg-zone, .dg-node.is-active .dg-zone,
.dg-node:hover .dg-box, .dg-node:focus .dg-box, .dg-node.is-active .dg-box { stroke: var(--accent-primary); stroke-width: 2; }
.dg-node:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* ---- Engineering-schematic detail: hairline sheet grid, registration ticks, net labels and mono callouts --------------- */
.dg-sheet { fill: none; stroke: var(--border-subtle); stroke-width: 0.5; }
.dg-tick { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-linecap: square; }
.dg-net { fill: var(--accent-secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; }
.dg-pin { fill: var(--accent-primary); stroke: none; }
.dg-sheet-label { fill: var(--text-muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; }
.callout { display: inline-flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-secondary); white-space: nowrap; }
.callout b { color: var(--accent-primary); font-weight: 700; }
.callout-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.stat dt::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--space-2); background: var(--accent-secondary); vertical-align: 0.05em; }
.stat dd.num { color: var(--accent-primary); }

/* ---- Calculator ------------------------------------------------------------------------------------------------ */
.calc-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.calc-slider-group { margin-top: var(--space-5); }
.calc-slider-group label { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 0.9rem; font-weight: 600; margin-bottom: var(--space-3); }
.slider { width: 100%; height: 6px; border-radius: 3px; background: var(--border-subtle); outline: none; -webkit-appearance: none; appearance: none; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-primary); cursor: pointer; border: 2px solid var(--bg-base); }
.slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-primary); cursor: pointer; border: 2px solid var(--bg-base); }
.calc-result { border: 1px solid var(--accent-primary); border-radius: 2px; padding: var(--space-6); text-align: center; background: color-mix(in srgb, var(--accent-primary) 4%, transparent); min-width: 0; }
.calc-number { font-size: clamp(2rem, 4.5vw, 2.9rem); font-weight: 800; color: var(--accent-primary); margin: var(--space-2) 0; overflow-wrap: anywhere; }
.calc-monthly { color: var(--accent-success); font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-5); }
@media (max-width: 820px) { .calc-grid { grid-template-columns: minmax(0, 1fr); } .panel { padding: var(--space-5); } }

/* ---- Pricing --------------------------------------------------------------------------------------------------- */
.pricing-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 0; }
.price-card { background: var(--bg-surface); padding: var(--space-6); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); }
.price-card.featured { background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-surface)); box-shadow: inset -1px -1px 0 var(--border-subtle), inset 0 2px 0 var(--accent-primary); }
.tier-tagline { color: var(--text-muted); font-size: 0.88rem; margin-top: var(--space-1); }
.price-value { font-size: 2.3rem; font-weight: 800; margin: var(--space-4) 0; color: var(--text-primary); }
.price-value span { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }
.price-features { list-style: none; font-size: 0.88rem; color: var(--text-muted); }
.price-features li { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.price-features li::before { content: "+"; color: var(--accent-primary); font-weight: 700; font-family: var(--font-mono); }

/* ---- Tables ---------------------------------------------------------------------------------------------------- */
.table-wrap { border: 1px solid var(--border-subtle); border-radius: 2px; overflow-x: auto; background: var(--bg-surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.data-table th, .data-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); }
.data-table thead th { font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-base); white-space: nowrap; }
.data-table tbody th { font-weight: 600; color: var(--text-primary); }
.data-table td.num, .data-table th.num { text-align: right; white-space: nowrap; }
.data-table tbody tr:last-child td, .data-table tbody tr:last-child th { border-bottom: 0; }
.data-table tfoot th, .data-table tfoot td { border-top: 1px solid var(--border-strong); border-bottom: 0; font-weight: 700; color: var(--text-primary); background: var(--bg-base); }
.data-table tr[hidden] { display: none; }
.col-bar { min-width: 140px; }
.meter { height: 8px; background: var(--border-subtle); position: relative; }
.meter span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-success); }
.meter-fair span { background: var(--accent-warning); }
.meter-poor span { background: var(--accent-danger); }
.sev, .tag { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; padding: var(--space-1) var(--space-2); border: 1px solid var(--border-strong); border-radius: 2px; white-space: nowrap; }
.sev-critical { color: var(--accent-danger); border-color: var(--accent-danger); }
.sev-high { color: var(--accent-warning); border-color: var(--accent-warning); }
.sev-medium { color: var(--accent-secondary); border-color: var(--accent-secondary); }
.tag-reported-in-dossier, .tag-partly-reported { color: var(--accent-success); border-color: var(--accent-success); }
.tag-customer-owned { color: var(--accent-primary); border-color: var(--accent-primary); }
.tag-out-of-scope, .tag-not-applicable { color: var(--text-muted); }

/* ---- Tabs and filters ------------------------------------------------------------------------------------------ */
.tab-list { display: flex; border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-5); overflow-x: auto; }
.tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); font: inherit; font-weight: 600; font-size: 0.92rem; padding: var(--space-3) var(--space-5); cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text-primary); }
.tab[aria-selected="true"] { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
.tab-panel { margin-bottom: var(--space-6); }
.js .tab-panel[hidden] { display: none; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.chip { background: transparent; color: var(--text-muted); border: 1px solid var(--border-subtle); border-radius: 2px; padding: var(--space-1) var(--space-3); font: inherit; font-size: 0.82rem; cursor: pointer; }
.chip[aria-pressed="true"] { color: var(--accent-primary); border-color: var(--accent-primary); }

/* ---- Code blocks ----------------------------------------------------------------------------------------------- */
.code-block { border: 1px solid var(--border-subtle); border-radius: 2px; overflow: hidden; margin: var(--space-4) 0; background: var(--bg-base); }
.code-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); font-size: 0.78rem; color: var(--text-muted); }
.code-actions { display: flex; gap: var(--space-2); }
.code-ref { color: var(--accent-primary); margin-left: var(--space-2); }
.code-body { padding: var(--space-4); font-size: 0.8rem; line-height: 1.6; max-height: 440px; overflow: auto; color: var(--text-secondary); white-space: pre; tab-size: 2; }
.code-compact .code-body { max-height: 220px; }

/* ---- FAQ ------------------------------------------------------------------------------------------------------- */
.faq-list { border: 1px solid var(--border-subtle); border-radius: 2px; background: var(--bg-surface); }
.faq-item { padding: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.faq-item:last-child { border-bottom: 0; }
.faq-item h3 { font-size: 1rem; margin-bottom: var(--space-2); }
.faq-item p { color: var(--text-muted); font-size: 0.92rem; }

/* ---- Forms and checkout slide-over ----------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: var(--space-2); }
.form-control { width: 100%; padding: var(--space-3) var(--space-4); background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: 2px; color: var(--text-primary); font: inherit; font-size: 0.95rem; }
.form-control:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 25%, transparent); }
.co-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg-base) 88%, transparent); z-index: 1100; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.co-backdrop.open { opacity: 1; pointer-events: auto; }
.co-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 440px; background: var(--bg-surface); border-left: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); z-index: 1101; display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s; }
.co-panel.open { transform: translateX(0); visibility: visible; transition: transform 0.25s ease; }
.co-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.co-head h3 { font-size: 1.15rem; }
.co-close { background: transparent; border: 0; color: var(--text-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 var(--space-2); }
.co-close:hover { color: var(--text-primary); }
.co-body { padding: var(--space-5); overflow-y: auto; flex: 1; }
.co-summary { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: 2px; padding: var(--space-4); margin-bottom: var(--space-5); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.co-summary span { color: var(--text-muted); font-size: 0.85rem; text-align: right; }
.co-error { display: none; color: var(--accent-danger); font-size: 0.85rem; margin-bottom: var(--space-4); }
.co-error.shown { display: block; }
.co-note { color: var(--text-muted); font-size: 0.8rem; margin-top: var(--space-4); }
.co-done { display: none; text-align: center; padding: var(--space-6) 0; }
.co-done h3 { font-size: 1.25rem; margin-bottom: var(--space-3); }
.co-done p { color: var(--text-muted); font-size: 0.92rem; margin-bottom: var(--space-5); }
.co-done .btn { margin: var(--space-1); }

/* ---- Footer ---------------------------------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border-subtle); margin-top: var(--space-8); padding: var(--space-7) 0 var(--space-6); font-size: 0.88rem; color: var(--text-muted); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-6); }
.footer-grid h4 { font-size: 1rem; margin-bottom: var(--space-3); }
.footer-grid a { color: var(--text-muted); text-decoration: none; }
.footer-grid a:hover { color: var(--accent-primary); }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: var(--space-2); }
.footer-legal { padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); font-size: 0.75rem; text-align: center; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .container { padding: 0 var(--space-4); } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* ---- Print: the sample dossier prints as a clean document on white paper whatever the theme ------------------------ */
@media print {
  body.site { background: Canvas; color: CanvasText; }
  .site-header, .site-footer, .co-panel, .co-backdrop, .cta-row, .tab-list, .chip-row, .code-actions, .anchor-row, .skip-link, .cta-panel { display: none !important; }
  .js .tab-panel[hidden], .tab-panel[hidden] { display: block !important; }
  .container { max-width: none; padding: 0; }
  .section, .page-hero { padding-top: var(--space-3); }
  .panel, .table-wrap, .code-block, .stat, .cell { border-color: GrayText; background: Canvas; box-shadow: none; }
  .data-table th, .data-table td { color: CanvasText; border-color: GrayText; background: Canvas; }
  .code-body { max-height: none; white-space: pre-wrap; color: CanvasText; }
  .tab-panel { page-break-inside: avoid; }
  a { color: CanvasText; }
}

/* ---- Hero: copy beside a bounded graphic -------------------------------------------------------------------------
   The graphic is the built-in art or one mounted by the local coder / design studio (appware_site_dynamic). Captions are HTML, never
   SVG text, so nothing can overlap at any width. */
.hero { padding-top: var(--space-6); padding-bottom: var(--space-4); }  /* compact, so the live lab below starts inside the first screen */
.hero-grid h1 { font-size: clamp(2rem, 3.7vw, 3.1rem); margin-bottom: var(--space-4); }
.hero-grid .hero-actions { margin-top: var(--space-4); margin-bottom: 0; }
.hero .stat-strip { margin-top: var(--space-5); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-6); align-items: center; }
.hero-copy { min-width: 0; }
.hero-art { min-width: 0; margin: 0; }
.hero-art-frame { position: relative; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.hero-art-frame svg { display: block; width: 100%; height: auto; max-height: 26rem; }  /* a mounted graphic of any aspect ratio stays inside the hero */
.hero-art-badge { position: absolute; left: var(--space-3); bottom: var(--space-3); width: min(46%, 220px); }
.hero-art-badge svg { width: 100%; height: auto; }
.hero-art-legend { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: 0.75rem; color: var(--text-muted); }
.hero-art-legend b { color: var(--accent-primary); margin-right: var(--space-1); }
.ha-bg { fill: var(--bg-surface); stroke: var(--border-subtle); }
.ha-grid { fill: none; stroke: var(--border-subtle); stroke-width: 1; opacity: 0.7; }
.ha-stop-a { stop-color: var(--accent-primary); }
.ha-stop-b { stop-color: var(--accent-secondary); }
.ha-glow-in { stop-color: var(--accent-primary); stop-opacity: 0.28; }
.ha-glow-out { stop-color: var(--accent-primary); stop-opacity: 0; }
.ha-ring { fill: none; stroke: var(--accent-primary); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.ha-ring-1 { opacity: 0.9; }
.ha-ring-2 { opacity: 0.55; stroke-dasharray: 6 8; }
.ha-ring-3 { opacity: 0.3; stroke-dasharray: 2 10; }
.ha-link { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 4 6; }
.ha-check { fill: none; stroke: var(--text-on-accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ha-node { fill: var(--accent-secondary); }
.ha-node-b { fill: var(--accent-tertiary); }
.ha-node-c { fill: var(--accent-success); }
.ha-pulse { fill: none; stroke: currentColor; stroke-width: 2; transform-box: fill-box; transform-origin: center; color: var(--accent-secondary); }
.ha-pulse.ha-node-b { color: var(--accent-tertiary); }
.ha-pulse.ha-node-c { color: var(--accent-success); }
@media (prefers-reduced-motion: no-preference) {
  .ha-ring-2 { animation: ha-spin 60s linear infinite; }
  .ha-ring-3 { animation: ha-spin 90s linear infinite reverse; }
  .ha-link { animation: ha-flow 3s linear infinite; }
  .ha-pulse { animation: ha-ping 2.6s ease-out infinite; }
  .ha-pulse.ha-node-b { animation-delay: 0.9s; }
  .ha-pulse.ha-node-c { animation-delay: 1.8s; }
}
@keyframes ha-spin { to { transform: rotate(360deg); } }
@keyframes ha-flow { to { stroke-dashoffset: -20; } }
@keyframes ha-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-art { max-width: 560px; } }

/* ---- Live lab: the HTMX estate simulator and the GPU architect, directly under the hero ----------------------------- */
.lab { padding-top: var(--space-4); }
.lab .section-head { margin-bottom: var(--space-4); }
.lab .section-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.lab-card { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; border-color: var(--border-strong); transition: border-color 0.15s, box-shadow 0.15s; }
.lab-card.htmx-request { border-color: var(--accent-primary); box-shadow: var(--shadow-glow); }
.lab-step { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--accent-primary); }
.lab-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.lab-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; font-size: 0.8rem; color: var(--text-muted); }
.lab-wide { grid-column: 1 / -1; }
.lab-field input, .lab-field select, .lab-field textarea {
  width: 100%; padding: var(--space-2) var(--space-3); background: var(--bg-base); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 0.95rem;
}
.lab-field textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
.lab-out { min-height: 6rem; }
.lab-result { background: var(--bg-base); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-primary); border-radius: var(--radius-sm); padding: var(--space-4); animation: lab-in 0.25s ease-out; }
.lab-figure { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.1; color: var(--text-primary); overflow-wrap: anywhere; }
.lab-figure span { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
.lab-sub { color: var(--text-secondary); font-size: 0.9rem; margin-top: var(--space-1); }
.lab-bars { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.lab-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: baseline; font-size: 0.82rem; }
.lab-bar-label { color: var(--text-secondary); min-width: 0; }
.lab-bar-value { color: var(--text-primary); font-weight: 600; text-align: right; }
.lab-bar-track { grid-column: 1 / -1; grid-row: 2; height: 6px; background: var(--bg-elevated); border-radius: var(--radius-pill); overflow: hidden; }
.lab-bar-fill { display: block; height: 100%; background: var(--gradient-accent); border-radius: var(--radius-pill); transition: width 0.4s ease; }
.lab-answer p { color: var(--text-primary); font-size: 0.9rem; line-height: 1.6; overflow-wrap: anywhere; }
.lab-answer p + p { margin-top: var(--space-2); }
.lab-fine, .lab-note { color: var(--text-muted); font-size: 0.78rem; margin-top: var(--space-3); }
.lab-note { margin-top: 0; padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.lab-card button:disabled { opacity: 0.6; cursor: progress; }
@keyframes lab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lab-result { animation: none; } .lab-bar-fill { transition: none; } }
@media (max-width: 900px) { .lab-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .lab-fields { grid-template-columns: minmax(0, 1fr); } }

/* ---- Services: home strip and the configurator (appware_registry_web) --------------------------------------------- */
.svc-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-4); }
.svc-card { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; transition: border-color 0.15s; }
.svc-card:hover, .svc-card:focus-visible { border-color: var(--accent-primary); }
.svc-card span { color: var(--text-secondary); font-size: 0.9rem; }
.svc-card .svc-card-price { margin-top: auto; color: var(--accent-primary); font-weight: 700; }
.svc-strip-cta { margin-top: var(--space-5); }
.svc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-5); align-items: start; }
.svc-form, .svc-preview, .svc-request { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.svc-side { display: grid; gap: var(--space-4); min-width: 0; }
.svc-step { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--accent-primary); }
.svc-choices { display: grid; gap: var(--space-3); }
.svc-choice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; }
.svc-choice:has(input:checked) { border-color: var(--accent-primary); background: var(--bg-elevated); }
.svc-choice:focus-within { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.svc-choice input { margin-top: var(--space-1); accent-color: var(--accent-primary); }
.svc-choice-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.svc-choice-tag { color: var(--text-secondary); font-size: 0.85rem; }
.svc-choice-price { color: var(--accent-primary); font-size: 0.85rem; font-weight: 600; }
.svc-blurb { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }
.svc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.svc-multi { grid-column: 1 / -1; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-3); }
.svc-check { display: inline-flex; gap: var(--space-2); align-items: center; margin-right: var(--space-4); color: var(--text-primary); }
.svc-price { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; color: var(--text-primary); }
.svc-h { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-4); }
.svc-list { padding-left: var(--space-5); display: grid; gap: var(--space-1); color: var(--text-secondary); font-size: 0.9rem; }
.svc-sheet .btn-block { margin-top: var(--space-5); }
.svc-note { color: var(--text-muted); font-size: 0.8rem; margin-top: var(--space-2); }
.svc-error { color: var(--accent-danger); }
.svc-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .svc-fields { grid-template-columns: minmax(0, 1fr); } }
.svc-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; font-size: 0.8rem; color: var(--text-muted); }
.svc-field input, .svc-field select, .svc-field textarea {
  width: 100%; padding: var(--space-2) var(--space-3); background: var(--bg-base); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 0.95rem;
}
.svc-field textarea { resize: vertical; min-height: 5rem; line-height: 1.5; }
.svc-field input[type="checkbox"] { width: auto; }
.svc-empty { padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.85rem; }
.svc-result { padding: var(--space-4); background: var(--bg-base); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-success); border-radius: var(--radius-sm); color: var(--text-primary); }
.svc-error { border-left-color: var(--accent-danger); }

/* ---- Cart and order pages (appware_cart_web) ---------------------------------------------------------------------- */
.cart { display: grid; gap: var(--space-5); }
.cart-flash { padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent-primary); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-primary); }
.cart-lines, .cart-checkout { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--space-4); align-items: center; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.cart-line-name { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.cart-sub { color: var(--text-secondary); font-size: 0.85rem; }
.cart-qty { display: flex; gap: var(--space-2); align-items: end; }
.cart-qty input { width: 5rem; }
.cart-line-total { font-weight: 700; text-align: right; }
.cart-total { font-size: 1.4rem; font-weight: 800; text-align: right; }
.cart-more { margin-top: var(--space-4); }
.svc-addcart { margin-top: var(--space-3); }
@media (max-width: 700px) { .cart-line { grid-template-columns: minmax(0, 1fr) auto; } .cart-qty { grid-column: 1 / -1; } .cart-line-total { text-align: left; } }

/* ---- Design polish: commercial and lab pages (stage 1) ---- */
.btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.svc-choice:focus-within { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.lab-field input:focus-visible, .lab-field select:focus-visible, .lab-field textarea:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.price-card, .lab-card { border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
@media (prefers-reduced-motion: no-preference) {
  .price-card:hover, .lab-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); transition: box-shadow 0.15s, transform 0.15s; }
  .btn-secondary:hover { border-color: var(--accent-primary); transition: border-color 0.15s; }
}