/* Selfsame Labs site stylesheet.
   One file for the whole site, plus tokens.css. No build step.
   All colors, fonts and spacing come from tokens.css, which is generated from
   brand/tokens.json (run: node brand/build-tokens.js). Do not put hex colors in this file,
   except for the black-on-white sample schedule, which imitates a plotted sheet.
   Brand rules: brand/BRAND.md. */

@import url("tokens.css");

/* Short local names for the brand tokens. Dark mode is handled in tokens.css. */
:root {
  --bg: var(--color-bg);
  --fg: var(--color-text);
  --muted: var(--color-text-muted);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --link: var(--color-primary);
  --link-hover: var(--color-primary-hover);
  --tint: var(--color-primary-tint);
  --tint-border: var(--color-primary-tint-border);
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --accent-fg: var(--color-on-accent);
  --focus: var(--color-focus);
  --warn-bg: var(--color-warning-bg);
  --warn-border: var(--color-warning);
  --todo-bg: var(--color-todo-bg);
  --todo-border: var(--color-todo-border);
  --todo-fg: var(--color-todo-text);
  --sheet-bg: var(--color-sheet-bg);
  --sheet-fg: var(--color-sheet-ink);
  --radius: var(--radius-md);
  --measure: var(--layout-measure);
  --wide: var(--layout-wide);
  --band-bg: var(--color-surface);
  --radius-lg-v: var(--radius-lg);
  --pill: var(--radius-pill);
  /* Depth (round 7): three layers. Cards rest on the page, raised cards sit above them, and the
     primary button is in front of everything. Shadows are black at low opacity, plus a hairline
     of light along the top edge so a raised card still reads on the near-black page. */
  --shadow-1: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px -12px rgb(0 0 0 / 0.6);
  --shadow-2: 0 1px 0 rgb(255 255 255 / 0.07) inset, 0 2px 6px rgb(0 0 0 / 0.35), 0 28px 56px -20px rgb(0 0 0 / 0.8);
  --shadow-cta: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
:root[data-theme="light"] {
  --shadow-1: 0 1px 2px rgb(31 29 26 / 0.06), 0 10px 28px -14px rgb(31 29 26 / 0.18);
  --shadow-2: 0 2px 6px rgb(31 29 26 / 0.08), 0 28px 56px -22px rgb(31 29 26 / 0.3);
  --shadow-cta: 0 1px 2px rgb(31 29 26 / 0.2), 0 10px 24px -10px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 { line-height: var(--leading-tight); margin: 1.6em 0 0.5em; }
h1 { font-size: var(--text-2xl); line-height: 1.15; margin-top: 0.4em; letter-spacing: -0.02em; font-weight: var(--weight-semibold); }
h2 { font-size: 1.5rem; padding-top: 0.6em; border-top: 1px solid var(--border); font-weight: var(--weight-semibold); }
h3 { font-size: 1.15rem; font-weight: var(--weight-semibold); margin-top: 1.4em; }
h2:first-child, h3:first-child { margin-top: 0; }

p, ul, ol, dl, table, figure, pre, details { margin: 0 0 1rem; }
ul, ol { padding-left: 1.4rem; }
li + li { margin-top: 0.25rem; }

a { color: var(--link); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.btn:focus-visible { outline-offset: 3px; }
/* Links inside scrolling strips would have their ring clipped; draw it inside instead. */
.toc ul a:focus-visible, .ribbon :focus-visible, .table-scroll:focus-visible { outline-offset: -3px; }
.site-nav a:focus-visible, .nav-toggle:focus-visible, .mt-copy:focus-visible { outline-offset: 3px; }
.skip-link:focus { z-index: 30; }
summary:focus-visible { outline-offset: -3px; }

code, kbd, samp, pre, .cmd { font-family: var(--font-mono); font-size: 0.92em; }
code, .cmd {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.35em;
  white-space: nowrap;
}
pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  overflow-x: auto;
  line-height: 1.45;
}
pre code { background: none; border: 0; padding: 0; white-space: pre; }
/* Reflow (WCAG 1.4.10): at 320 px, or 400% zoom, long command names and paths may wrap. */
@media (max-width: 22.5rem) { code, .cmd { white-space: normal; overflow-wrap: anywhere; } }
kbd {
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 0 0.3em;
  background: var(--surface);
}

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Form controls (seat count on pricing, and any future forms). */
input, select, textarea, button { font: inherit; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 0.4rem 0.6rem; line-height: 1.3; max-width: 100%;
}
input[type="number"] { width: 6rem; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface); color: var(--muted); cursor: not-allowed; }
label { font-weight: var(--weight-semibold); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: 0.5rem; top: -3rem;
  background: var(--link); color: var(--color-on-primary);
  padding: 0.5rem 0.8rem; border-radius: var(--radius);
  z-index: 10;
}
.skip-link:focus { top: 0.5rem; color: var(--color-on-primary); }

/* ---------- Layout ---------- */

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1rem; }
.prose { max-width: var(--measure); }
main { padding: clamp(1.75rem, 1rem + 1.25vw, 2.75rem) 0 3rem; }

.lead { font-size: 1.2rem; color: var(--fg); max-width: var(--measure); }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }

/* Two-column documentation layout with an "On this page" list. The list comes first in the
   markup: on phones and tablets it is a sticky strip of section links under the header; on wide
   screens it is a sticky column at the right. site.js marks the section being read. */
.doc-layout { display: block; }
.toc h2 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); font-weight: var(--weight-regular); border: 0; padding: 0; margin: 0 0 0.5rem; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li + li { margin-top: 0; }
.toc a { color: var(--muted); text-decoration: none; display: block; }
.toc a:hover { color: var(--link); }
.toc a[aria-current="true"] { color: var(--fg); font-weight: var(--weight-semibold); }
@media (max-width: 63.99rem) {
  .toc {
    position: sticky; top: var(--header-h); z-index: 10;
    margin: 0 -1rem 1.5rem; padding: 0 1rem;
    background: var(--bg); border-bottom: 1px solid var(--border);
  }
  .toc h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .toc ul { display: flex; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .toc ul::-webkit-scrollbar { display: none; }
  .toc a { white-space: nowrap; padding: 0.7rem 0 0.6rem; font-size: 0.9rem; border-bottom: 2px solid transparent; }
  .toc a[aria-current="true"] { border-bottom-color: var(--link); color: var(--link); font-weight: var(--weight-semibold); }
}
@media (min-width: 64rem) {
  .doc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14rem;
    gap: 3rem;
    align-items: start;
  }
  .doc-layout > .doc-main { grid-column: 1; grid-row: 1; }
  .toc {
    grid-column: 2; grid-row: 1;
    position: sticky; top: calc(var(--header-h) + 1rem);
    font-size: 0.9rem;
    border-left: 1px solid var(--border);
  }
  .toc h2 { padding-left: 1rem; }
  .toc a { padding: 0.2rem 0 0.2rem 1rem; margin-left: -1px; border-left: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; }
  .toc a[aria-current="true"] { border-left-color: var(--link); color: var(--link); }
}
.doc-main { min-width: 0; }
.doc-main > section { max-width: var(--measure); }
.doc-main > section.wide { max-width: none; }

/* ---------- Header and footer ---------- */

/* Header: a 3px jade band on top, like a drawing border, then the logo and nav.
   It stays at the top while the page scrolls (solid background, one hairline; no shadow). */
:root { --header-h: 4.1rem; }
.site-header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--border); background: var(--bg);
}
@supports (backdrop-filter: blur(1px)) { .site-header { background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }
/* Anchors and keyboard focus never land under the sticky header (or the section strip on
   phones and tablets). */
html { scroll-padding-top: calc(var(--header-h) + 1rem); scroll-behavior: smooth; }
@media (max-width: 63.99rem) { html:has(.doc-layout .toc) { scroll-padding-top: calc(var(--header-h) + 3.75rem); } }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.5rem 1.5rem;
  padding-top: 0.7rem; padding-bottom: 0.7rem;
}
.brand { display: inline-flex; align-items: center; color: var(--fg); text-decoration: none; border-radius: var(--radius-sm); }
.brand img { display: block; height: 1.9rem; width: auto; }
@media (max-width: 24rem) { .brand img { height: 1.6rem; } }
.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.1rem 1.6rem;
}
.site-nav li + li { margin-top: 0; }
.site-nav a {
  color: var(--fg); text-decoration: none; padding: 0.3rem 0; display: inline-block;
  font-weight: var(--weight-semibold); font-size: 0.98rem;
  background: linear-gradient(var(--link), var(--link)) 0 100% / 0 2px no-repeat;
  transition: background-size 0.18s ease, color 0.18s ease;
}
.site-nav a:hover { color: var(--link); background-size: 100% 2px; }
.site-nav a[aria-current="page"] { color: var(--link); background-size: 100% 2px; }
/* One action in the header on every page: a small jade outline button after the links.
   The hero's orange button stays the only primary action on a page. */
.site-nav { margin-left: auto; }
.header-cta { padding: 0.42rem 1rem; font-size: 0.92rem; white-space: nowrap; }
@media (max-width: 52rem) { .header-cta { padding: 0.32rem 0.7rem; font-size: 0.88rem; } }

/* Phones: one header row (logo and a Menu button); the links open as a panel below.
   Without JavaScript the button stays hidden and the links wrap under the logo as before. */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  font: inherit; font-size: 0; color: var(--fg);   /* the "Menu" text stays for assistive tech; the icon is the button */
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-round);
  width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--link); color: var(--link); }
.nav-toggle-icon { position: relative; width: 1rem; height: 2px; background: currentColor; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; width: 1rem; height: 2px; background: currentColor; transition: transform 0.18s ease; }
.nav-toggle-icon::before { top: -5px; } .nav-toggle-icon::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: translateY(-5px) rotate(-45deg); }
/* Tablets: tighter links so the logo, links and action fit on one row. */
@media (min-width: 56rem) and (max-width: 64rem) {
  .site-nav ul { gap: 0.1rem 1.1rem; }
  .site-nav a { font-size: 0.94rem; }
  .header-inner { gap: 0.5rem 1rem; }
}
@media (max-width: 55.99rem) {
  :root { --header-h: 3.6rem; }
  .header-inner { padding-top: 0.55rem; padding-bottom: 0.55rem; }
  .nav-toggle:not([hidden]) { display: inline-flex; }
  .nav-toggle:not([hidden]) + .site-nav { display: none; flex-basis: 100%; }
  .nav-toggle[aria-expanded="true"] + .site-nav { display: block; }
  .nav-toggle:not([hidden]) + .site-nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--border); margin-top: 0.15rem; }
  .nav-toggle:not([hidden]) + .site-nav li { border-bottom: 1px solid var(--border); }
  .nav-toggle:not([hidden]) + .site-nav a { display: block; padding: 0.75rem 0.1rem; font-size: 1.05rem; background-size: 0 0; }
  .nav-toggle:not([hidden]) + .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--link); padding-left: 0.8rem; }
  /* The header action sits at the bottom of the open menu panel, full width. */
  .nav-toggle:not([hidden]) ~ .header-cta { display: none; }
  .nav-toggle[aria-expanded="true"] ~ .header-cta { display: block; flex-basis: 100%; text-align: center; margin: 0.6rem 0 0.4rem; padding: 0.55rem 1rem; font-size: 1rem; }
}

/* Footer: the brand and one line about the business, three short link columns,
   then the Autodesk notice and the copyright under a hairline. */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 2.75rem 0 2rem;
  font-size: 0.9rem; color: var(--muted);
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--link); }
.footer-grid { display: grid; gap: 2rem 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
@media (min-width: 52rem) { .footer-grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); justify-content: space-between; } }
.footer-brand .brand img { height: 1.7rem; }
.footer-brand p { margin: 0.9rem 0 0; max-width: 20rem; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 10rem)); gap: 1.5rem 2.5rem; justify-content: end; }
@media (max-width: 51.99rem) { .footer-cols { justify-content: start; } }
@media (max-width: 30rem) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-h { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-regular); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); border: 0; padding: 0; margin: 0 0 0.6rem; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li + li { margin-top: 0; }
.footer-cols a { display: inline-block; padding: 0.3rem 0; color: var(--fg); text-decoration: none; font-weight: var(--weight-semibold); }
.footer-cols a:hover { color: var(--link); text-decoration: underline; }
.footer-base p { margin: 0 0 0.4rem; max-width: var(--measure); }

/* ---------- Components ---------- */

.breadcrumb { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.5rem; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumb li + li { margin-top: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--border-strong); }

/* Buttons. Secondary: a neutral outline. Primary: coral, the highlighter. Orange marks the
   one action a page asks for (it may repeat at the top and the bottom of a long page) and nothing
   else. The primary button sits in front: a soft shadow, and a 1 px lift on hover. */
.btn {
  display: inline-block;
  font: inherit; font-weight: var(--weight-semibold);
  padding: 0.6rem 1.25rem;
  border-radius: var(--pill);
  border: 1px solid var(--border-strong);
  background: transparent; color: var(--fg);
  text-decoration: none; cursor: pointer;
  line-height: 1.3;
}
.btn:hover { background: var(--surface-2); color: var(--fg); border-color: var(--fg); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-cta); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); transform: translateY(-1px); }
.btn-lg { padding: 0.8rem 1.6rem; font-size: 1.05rem; }
/* Pre-launch buttons: a dashed outline reads as "not yet", not as broken. */
.btn[aria-disabled="true"] { box-shadow: none; transform: none; opacity: 1; cursor: not-allowed; border-style: dashed; border-color: var(--border-strong); color: var(--muted); background: transparent; font-weight: var(--weight-regular); }
.btn[aria-disabled="true"]:hover { border-color: var(--border-strong); color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1.25rem 0; }

/* Status tag, styled like a revision tag on a title block. */
.status {
  display: inline-block; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  padding: 0.1rem 0.55rem; border-radius: var(--radius-sm);
  border: 1px solid var(--tint-border); background: var(--tint); color: var(--fg);
}

.cards {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin: 1rem 0 2rem;
}
.card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; background: var(--bg);
  display: flex; flex-direction: column;
}
.card h3, .card .card-title { margin-top: 0; }
.card .card-title { font-size: 1.15rem; border: 0; padding: 0; }
.card p:last-child { margin-bottom: 0; }
.card .card-foot { margin-top: auto; padding-top: 0.5rem; }
.card-muted { background: var(--surface); }

.note, .todo {
  border-left: 4px solid var(--link);
  background: var(--tint);
  padding: 0.7rem 1rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 1rem;
}
.note p:last-child, .todo p:last-child { margin-bottom: 0; }
/* Visible TODO marker. Search the site for class="todo" before launch. */
.todo { border-left-color: var(--todo-border); background: var(--todo-bg); color: var(--todo-fg); }
.todo::before { content: "TODO: "; font-weight: 700; font-family: var(--font-mono); }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li {
  counter-increment: step; position: relative;
  padding-left: 2.6rem; margin-bottom: 1.25rem;
}
.steps > li + li { margin-top: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  /* S2 numbered bubble geometry (26 px, 2 px ring, sans semibold). */
  width: 26px; height: 26px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--color-primary); color: var(--color-primary);
  font: 600 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; display: grid; place-items: center;
}
.steps h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }

.features { padding: 0; list-style: none; }
.features > li { border-top: 1px solid var(--border); padding: 0.8rem 0; margin: 0; }
.features > li:last-child { border-bottom: 1px solid var(--border); }
.features h3 { margin: 0 0 0.25rem; font-size: 1.02rem; }
.features p { margin: 0; }

/* Placeholder for a screenshot or GIF that does not exist yet. */
.shot { margin: 1.25rem 0 1.75rem; }
.shot-placeholder {
  aspect-ratio: 16 / 9;
  border: 2px dashed var(--todo-border);
  background: var(--todo-bg); color: var(--todo-fg);
  border-radius: var(--radius);
  display: grid; place-items: center; text-align: center;
  padding: 1rem; font-family: var(--font-mono); font-size: 0.9rem;
}
.shot img { display: block; border: 1px solid var(--border); border-radius: var(--radius); }
figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 0.4rem; }

/* Tables */
.table-scroll { position: relative; overflow-x: auto; margin: 0 0 1.25rem; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline-offset: 0; }
.table-scroll table { min-width: 34rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--border); }
thead th { background: var(--surface); border-bottom: 2px solid var(--border-strong); font-weight: var(--weight-semibold); }
caption { text-align: left; font-weight: 600; padding: 0 0 0.4rem; }

/* Comparison table on the product page: method names as row headers, our row tinted and ruled. */
.compare-table { min-width: 46rem; }
.compare-table tbody th { font-weight: var(--weight-semibold); width: 13rem; }
.compare-table td { color: var(--muted); }
.compare-table tr.is-ours th, .compare-table tr.is-ours td { background: var(--tint); color: var(--fg); border-top: 2px solid var(--link); border-bottom: 2px solid var(--link); }
.compare-table tr.is-ours .cmd { background: var(--bg); }
/* Phones: each method becomes a short card (row header as its title, each value with its label). */
@media (max-width: 40rem) {
  .table-scroll:has(.compare-table) { overflow: visible; }
  .table-scroll .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; min-width: 0; width: auto; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table tr { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 0.75rem; padding: 0.2rem 0.85rem 0.6rem; }
  .compare-table tbody th { width: auto; border-bottom: 1px solid var(--border); padding: 0.55rem 0; }
  .compare-table td { border: 0; padding: 0.35rem 0 0; }
  .compare-table td::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); }
  .compare-table tr.is-ours { border: 2px solid var(--link); background: var(--tint); }
  .compare-table tr.is-ours th, .compare-table tr.is-ours td { border-top: 0; border-bottom: 0; background: none; }
  .compare-table tr.is-ours th { border-bottom: 1px solid var(--tint-border); }
}
/* "What it does not do": short facts with a bold lead, each beside a hairline cross. */
.limits { list-style: none; padding: 0; border-top: 1px solid var(--border); }
.limits li { margin: 0; padding: 0.55rem 0 0.55rem 1.75rem; border-bottom: 1px solid var(--border); position: relative; }
.limits li::before, .limits li::after { content: ""; position: absolute; left: 0.2rem; top: 1.15rem; width: 0.75rem; border-top: 2px solid var(--border-strong); transform: rotate(45deg); }
.limits li::after { transform: rotate(-45deg); }

/* Data sheet: versions and requirements laid out like a product data sheet in a submittal.
   Outer frame, a mono header strip over a 2 px rule, field cells with small labels, check boxes. */
.datasheet { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); margin: 0 0 1.25rem; }
.ds-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.5rem 0.9rem; border-bottom: 2px solid var(--fg); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: var(--weight-semibold); }
.ds-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); margin: 0; border-bottom: 1px solid var(--border-strong); }
.ds-fields > div { padding: 0.45rem 0.9rem 0.55rem; border-right: 1px solid var(--border); }
.ds-fields > div:last-child { border-right: 0; }
.ds-fields dt, .ds-rows dt { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); font-weight: var(--weight-regular); }
.ds-fields dd { margin: 0.1rem 0 0; font-weight: var(--weight-semibold); }
.datasheet .table-scroll { margin: 0; }
.ds-grid { min-width: 44rem; font-size: 0.92rem; margin: 0; table-layout: fixed; }
.ds-grid th:first-child { width: 8.5rem; }
.ds-grid th:nth-child(n+2):nth-child(-n+6) { width: 4.25rem; }
.ds-grid th:last-child { width: auto; }
.ds-grid thead th { background: var(--surface); border-bottom: 1px solid var(--border-strong); text-align: center; font-family: var(--font-mono); font-size: 0.8rem; }
.ds-grid thead th:first-child, .ds-grid thead th:last-child { text-align: left; }
.ds-grid th[scope="row"] { font-weight: var(--weight-semibold); white-space: nowrap; }
.ds-grid td { text-align: center; vertical-align: middle; border-left: 1px solid var(--border); }
.ds-grid td:last-child { text-align: left; color: var(--muted); }
.ds-grid tr:last-child > * { border-bottom: 0; }
.ds-box { display: inline-block; width: 0.85rem; height: 0.85rem; border: 1.5px solid var(--border-strong); border-radius: 1px; vertical-align: -0.1em; position: relative; }
.ds-box.is-on { border-color: var(--link); }
.ds-box.is-on::after { content: ""; position: absolute; left: 0.22rem; top: 0.02rem; width: 0.25rem; height: 0.5rem; border: solid var(--link); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ds-muted th, .ds-muted td:last-child { color: var(--muted); }
.ds-runtime td { font-family: var(--font-mono); font-size: 0.78rem; white-space: nowrap; padding-left: 0.3rem; padding-right: 0.3rem; color: var(--muted); background: var(--surface); }
.ds-runtime th { background: var(--surface); }
/* Requirements as data-sheet rows. */
dl.ds-rows { padding: 0; gap: 0; grid-template-columns: minmax(9rem, max-content) 1fr; }
dl.ds-rows dt, dl.ds-rows dd { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); margin: 0; }
dl.ds-rows dt { padding-top: 0.8rem; background: var(--surface); border-right: 1px solid var(--border); }
dl.ds-rows dt:last-of-type, dl.ds-rows dd:last-of-type { border-bottom: 0; }
@media (max-width: 30rem) { dl.ds-rows dt { border-right: 0; border-bottom: 0; padding-bottom: 0.1rem; } dl.ds-rows dd { margin: 0; } }

/* Changelog revision block: drawn like the revision schedule in a title block. */
.rev-block { border: 1px solid var(--border-strong); border-radius: var(--radius); margin: 1.5rem 0 2.5rem; max-width: 52rem; background: var(--bg); }
.rev-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.5rem 0.9rem; border-bottom: 2px solid var(--fg); }
.rev-head h2, .rev-head span { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: var(--weight-semibold); border: 0; padding: 0; margin: 0; }
.rev-head span { color: var(--muted); font-weight: var(--weight-regular); }
.rev-block .table-scroll { margin: 0; }
.rev-table { min-width: 30rem; margin: 0; }
.rev-table th, .rev-table td { border-left: 1px solid var(--border); }
.rev-table th:first-child, .rev-table td:first-child { border-left: 0; }
.rev-table thead th { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: var(--weight-regular); color: var(--muted); border-bottom: 1px solid var(--border-strong); }
.rev-table td:nth-child(-n+3) { font-family: var(--font-mono); font-size: 0.88rem; white-space: nowrap; }
.rev-table td:first-child { font-weight: var(--weight-bold); }
.rev-table tr.rev-pending td { background: var(--tint); }
.rev-note { margin: 0; padding: 0.6rem 0.9rem; font-size: 0.9rem; color: var(--muted); border-top: 1px solid var(--border); }

/* Sample output: drawn to look like a plotted schedule sheet. */
.sheet {
  background: var(--sheet-bg); color: var(--sheet-fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; overflow-x: auto;
}
.sheet table.schedule {
  font-family: var(--font-narrow); font-stretch: condensed;
  text-transform: uppercase; color: #000; width: auto; min-width: 100%;
  font-size: 0.85rem; line-height: 1.25;
}
.schedule th, .schedule td { border: 1px solid #000; padding: 0.2rem 0.45rem; text-align: center; white-space: nowrap; vertical-align: middle; }
.schedule thead th { background: #fff; border-bottom: 1px solid #000; font-weight: 700; }
.schedule .title-row th { font-size: 1.25rem; padding: 0.35rem; letter-spacing: 0.02em; }
.schedule td.l { text-align: left; }
.sheet .notes { margin-top: 1.25rem; font-family: var(--font-narrow); font-stretch: condensed; text-transform: uppercase; font-size: 0.85rem; color: #000; }
.sheet .notes h3 { font-size: 1.1rem; text-decoration: underline; margin: 0 0 0.5rem; color: #000; }
.sheet .notes ol { margin: 0; padding-left: 1.6rem; }
.sheet .notes ol ol { list-style-type: upper-alpha; }

/* FAQ */
details { border: 1px solid var(--border); border-radius: var(--radius); padding: 0; margin-bottom: 0.6rem; }
summary { cursor: pointer; padding: 0.7rem 2.6rem 0.7rem 1rem; font-weight: var(--weight-semibold); list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
/* Plus and minus drawn as two hairlines, like a drafting symbol. */
summary::before, summary::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 0.75rem; border-top: 2px solid var(--link); }
summary::after { transform: rotate(90deg); transition: transform 0.2s ease; }
details[open] > summary::after { transform: rotate(0deg); }
summary:hover { color: var(--link); }
details[open] summary { border-bottom: 1px solid var(--border); }
details > :not(summary) { margin: 0.75rem 1rem; }

/* Legal pages: a sticky list of sections beside the text, numbered headings, an even measure. */
.legal-head { margin-bottom: 1.5rem; }
.legal { line-height: 1.65; }
.legal > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.legal h3 { font-size: 1.08rem; margin-top: 1.9em; }
.legal p, .legal li { max-width: 44rem; }
@media (min-width: 64rem) { .toc .toc-sub a { padding-left: 1.75rem; font-size: 0.85rem; } }

/* Support: symptom and fix rows, and a copyable email template. */
dl.spec.fix-list { gap: 0; grid-template-columns: minmax(9rem, 14rem) 1fr; border-top: 1px solid var(--border); }
dl.fix-list dt, dl.fix-list dd { padding: 0.65rem 0; border-bottom: 1px solid var(--border); margin: 0; }
dl.fix-list dt { padding-right: 1.25rem; }
@media (max-width: 30rem) { dl.fix-list dt { border-bottom: 0; padding-bottom: 0; } }
.mail-template { border: 1px solid var(--border-strong); border-radius: var(--radius); margin: 0.5rem 0 1.5rem; background: var(--surface); }
.mt-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.4rem 0.5rem 0.4rem 0.9rem; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); }
.mt-copy { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--link); background: var(--bg); border: 1px solid var(--link); border-radius: var(--radius-sm); padding: 0.25rem 0.6rem; cursor: pointer; min-height: 2rem; }
.mt-copy:hover { background: var(--tint); }
.mail-template pre { margin: 0; border: 0; border-radius: 0; background: var(--bg); white-space: pre-wrap; font-size: 0.88rem; }
.mt-foot { margin: 0; padding: 0.55rem 0.9rem; border-top: 1px solid var(--border); font-size: 0.95rem; }

/* FAQ groups and the closing question card. */
.faq-group { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-regular); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); margin: 1.5rem 0 0.6rem; }
h2 + .faq-group { margin-top: 0.5rem; }
.ask-card { margin: 1.5rem 0 0; padding: 1rem 1.2rem 1.1rem; border: 1px solid var(--border-strong); border-left: 3px solid var(--link); border-radius: var(--radius); background: var(--surface); }
.ask-card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.ask-card p { margin: 0; }

/* Pricing: plan cards. Label, price, who it is for, the action, then what is included as a
   check list between hairlines. The paid single-user plan carries the jade rule. */
.price-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: 1rem 0 1.5rem; align-items: start; }
.price { border: 1px solid var(--border); border-top: 3px solid var(--border-strong); border-radius: var(--radius-lg); padding: 1.4rem 1.4rem 1.2rem; background: var(--surface); display: flex; flex-direction: column; }
.price-featured, .doc-main .price { border-top-color: var(--link); }
.price-featured { border-color: var(--link); }
.price h3, .price h4 { margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
.price .amount { font-size: 1.75rem; font-weight: 700; font-family: var(--font-mono); margin: 0.2rem 0 0.1rem; overflow-wrap: anywhere; line-height: 1.2; }
.price .term { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.9rem; }
.price .seats { margin: 0 0 0.25rem; font-size: 0.95rem; }
.plans { align-items: stretch; }
/* The single-user plan stands a little taller than its neighbours on wide screens. */
@media (min-width: 52rem) { .plans .price-featured { margin-top: -0.75rem; margin-bottom: -0.75rem; padding-top: 1.9rem; padding-bottom: 1.75rem; } }
@media (min-width: 52rem) { .plans .term { min-height: 3.1em; } }
.price .actions { margin: 0.5rem 0 1rem; }
.price .actions .btn { width: 100%; text-align: center; }
.price ul { padding-left: 1.2rem; }
.checklist { list-style: none; padding: 0 !important; margin: 0; font-size: 0.95rem; }
.checklist li { margin: 0; padding: 0.5rem 0 0.5rem 1.6rem; border-top: 1px solid var(--border); position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0.3rem; top: 0.75rem; width: 0.3rem; height: 0.6rem; border: solid var(--link); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* What happens when (Pricing): a schedule read as rows. When in mono jade, then the
   event and one line of detail. */
.when { list-style: none; padding: 0; margin: 1rem 0 1.5rem; border-top: 1px solid var(--border); }
.when li { margin: 0; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.2rem 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.when-at { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--link); padding-top: 0.3rem; line-height: 1.4; }
.when h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.when p { margin: 0; color: var(--muted); }
@media (max-width: 40rem) { .when li { grid-template-columns: 1fr; gap: 0.15rem; } .when-at { padding-top: 0; } }

/* Key/value spec lists */
dl.spec { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0.4rem 1.25rem; }
dl.spec dt { font-weight: 600; }
dl.spec dd { margin: 0; }
@media (max-width: 30rem) {
  dl.spec { grid-template-columns: 1fr; gap: 0.1rem; }
  dl.spec dd { margin-bottom: 0.6rem; }
}

/* Blog */
.post-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.post-list li { border-top: 1px solid var(--border); padding: 1.25rem 0; margin: 0; }
.post-list li:last-child { border-bottom: 1px solid var(--border); }
.post-list h2 { border: 0; padding: 0; margin: 0.25rem 0 0.4rem; font-size: 1.3rem; }
.post-list h2 a { text-decoration: none; color: var(--fg); }
.post-list h2 a:hover { color: var(--link); text-decoration: underline; }
.post-list p { margin: 0; }
.post-meta { color: var(--muted); font-size: 0.9rem; }
.post-list .post-meta { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.blog-empty { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.blog-empty h2 { border: 0; padding: 0; margin: 0 0 0.75rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.2; letter-spacing: -0.01em; }
.topic-cards { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.topic-cards li { margin: 0; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--border); border-top: 2px solid var(--link); border-radius: var(--radius); background: var(--surface); }
.topic-cards h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.topic-cards p:last-child { margin: 0; color: var(--muted); font-size: 0.95rem; }
.topic-cards .eyebrow { margin-bottom: 0.4rem; }
.blog-notify { padding: 0.8rem 1rem; border-left: 3px solid var(--link); background: var(--tint); border-radius: 0 var(--radius) var(--radius) 0; }
/* Post: header, contents box, sources, author box. */
.post-head { margin-bottom: 1.5rem; }
.post-head .eyebrow { margin-bottom: 0.5rem; }
.post-head h1 { font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.6rem); line-height: 1.12; letter-spacing: -0.015em; font-weight: var(--weight-semibold); }
.post > .lead { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem); line-height: 1.5; }
.post-fit { padding: 0.55rem 0.9rem; border-left: 3px solid var(--link); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.post-fit .eyebrow { margin: 0 0.5rem 0 0; color: var(--link); }
.post .table-scroll thead th { font-size: 0.88rem; }
.post-head .post-meta { margin: 0; }
.post .lead { color: var(--fg); }
.post-toc { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); padding: 0.9rem 1.1rem 1rem; margin: 1.5rem 0 2rem; }
.post-toc h2 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); font-weight: var(--weight-semibold); border: 0; padding: 0; margin: 0 0 0.5rem; }
.post-toc ol { margin: 0; padding-left: 1.4rem; columns: 2 16rem; column-gap: 2rem; font-size: 0.95rem; }
.post-toc li { break-inside: avoid; }
.post-toc li + li { margin-top: 0.2rem; }
.post > h2 { margin-top: 2.25rem; }
.post .table-scroll caption { font-size: 0.95rem; }
.post #sources ~ ol { color: var(--muted); }
.post #sources ~ ol a { overflow-wrap: anywhere; }
.post-end { margin: 2.5rem 0 0; padding: 1rem 1.2rem 1.1rem; border-top: 2px solid var(--link); background: var(--surface); }
.post-end .eyebrow { margin-bottom: 0.35rem; }
.post-end p { margin: 0 0 0.5rem; }
.post-end p:last-child { margin-bottom: 0; }

/* ---------- System device S2 (brand/BRAND.md section 6). S1, the dimension-line accent, was retired on 2026-11-09. ----------
   S2, numbered bubble: numbered steps and sequences (product steps, home feature cards, the step map). Never the M. */
.sec-bubble {
  display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  width: 26px; height: 26px; margin-right: 10px;
  border: 2px solid var(--color-primary); border-radius: 50%; color: var(--color-primary); background: transparent;
  font: 600 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; vertical-align: 0.1em;
  letter-spacing: 0; text-transform: none;
}

/* ---------- Page components (direction A: refined documentation) ----------
   Calm documentation pages: mono caps eyebrows, a release panel beside the hero,
   sections separated by hairlines, short facts under a jade rule. */

.label, .eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-regular);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted);
}
.eyebrow { margin: 0 0 0.6rem; }

/* Release panel: key facts as a definition list, one action. Also used for About facts. */
.panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.panel-head { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); font-weight: var(--weight-semibold); border: 0; margin: 0; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); }
.panel dl { margin: 0; padding: 0.85rem 1rem; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.4rem 0.75rem; font-size: 0.95rem; }
.panel dt { color: var(--muted); }
.panel dd { margin: 0; }
.panel .actions { margin: 0; padding: 0 1rem 1rem; }
.panel .actions .btn { width: 100%; text-align: center; }

/* Product page hero: title and lead beside an "At a glance" panel. */
.product-hero { display: grid; gap: 1.5rem; margin-bottom: 0.5rem; }
@media (min-width: 52rem) { .product-hero { grid-template-columns: minmax(0, 1fr) 20rem; gap: 4rem; align-items: start; } }
.product-hero h1 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: var(--weight-regular); }
.product-top { padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border); }
.product-top .actions { margin-bottom: 0.75rem; }
.product-hero h1 { margin-top: 0; }
.product-hero .panel dl { grid-template-columns: 5rem minmax(0, 1fr); }

/* Four short facts in a row (pricing in brief). */
.facts-row { list-style: none; padding: 0; margin: 1.5rem 0 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.facts-row li { margin: 0; padding: 0.9rem 1.1rem 1rem; display: flex; flex-direction: column; gap: 0.1rem; border-left: 1px solid var(--border); }
.facts-row li:first-child { border-left: 0; }
.facts-row strong { font-size: 1.2rem; }
.facts-row span:last-child { color: var(--muted); font-size: 0.95rem; }
.facts-row .eyebrow { margin: 0 0 0.2rem; }
/* Tablets and phones: two by two. */
@media (max-width: 52rem) {
  .facts-row { grid-template-columns: 1fr 1fr; }
  .facts-row li { padding: 0.75rem 0.9rem 0.85rem; }
  .facts-row li:nth-child(odd) { border-left: 0; }
  .facts-row li:nth-child(n+3) { border-top: 1px solid var(--border); }
  .facts-row strong { font-size: 1.05rem; }
  .facts-row span:last-child { font-size: 0.875rem; }
}

/* Compact illustration inside a documentation column. */
.flow-compact { margin: 0.5rem 0 2rem; }
@media (min-width: 56rem) { .flow-compact .flow-row, .flow-compact .legend { grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 1fr); } }

/* Home hero: centered, one statement, one primary action, generous air above and below.
   Status comes first so a phone reader learns "coming soon" before anything else. */
.hero { text-align: center; padding: clamp(3.5rem, 2rem + 3vw, 5.5rem) 0 clamp(3rem, 2rem + 1.5vw, 4rem); max-width: 50rem; margin: 0 auto; }
.hero h1 { font-size: clamp(2.25rem, 1.2rem + 3.8vw, 4rem); line-height: 1.04; font-weight: var(--weight-regular); letter-spacing: -0.03em; margin: 0 auto 1.4rem; max-width: 15em; text-wrap: balance; }
.h1-soft { color: var(--muted); }
@media (min-width: 40rem) { .h1-soft { display: block; } }
main.home { background: radial-gradient(55% 34rem at 50% -6rem, color-mix(in srgb, var(--brand-pine) 42%, transparent), transparent 70%) no-repeat; }
:root[data-theme="light"] main.home { background: radial-gradient(55% 34rem at 50% -6rem, var(--tint), transparent 70%) no-repeat; }
.hero .eyebrow { margin-bottom: 1rem; }
.hero .lead { margin: 0 auto 2rem; max-width: 40rem; color: var(--muted); text-wrap: pretty; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); }
.hero .actions { justify-content: center; margin: 0 0 1.75rem; gap: 0.75rem 1.5rem; }
.hero .for { margin: 0 auto; max-width: 34rem; font-size: 0.95rem; color: var(--muted); }
.nowrap { white-space: nowrap; }
/* Status line: a revision-tag style label (2 px corners, not a pill) with one jade dot. */
.status-line {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.2rem 0;
  margin: 0 0 1.75rem; padding: 0.4rem 1rem;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--pill);
  font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--fg);
}
.status-line .dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-round); background: var(--link); margin-right: 0.5rem; }
.status-line .sep { width: 1px; height: 0.9em; background: var(--border-strong); margin: 0 0.65rem; }
@media (max-width: 40rem) {
  .hero { padding: 2.25rem 0 2.25rem; }
  .status-line { font-size: 0.8rem; padding: 0.3rem 0.6rem; white-space: nowrap; }
  .status-line .sep { margin: 0 0.5rem; }
  .hero .actions { flex-direction: column; }
}

/* Plate: a framed illustration, like a detail drawn on its own sheet. Header strip in mono caps. */
.plate { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); max-width: 66rem; margin-left: auto; margin-right: auto; overflow: hidden; }
.plate-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.55rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); }
.plate-body { padding: 1.75rem 1.75rem 1.25rem; }
@media (max-width: 40rem) { .plate-body { padding: 1rem; } }
.release-row { max-width: 66rem; margin: 1.5rem auto 3.5rem; }
@media (max-width: 40rem) { .release-row { margin-bottom: 2.25rem; } }

/* Drawn command strip in the home plate: the add-in's real command names, the one in use marked.
   Decorative (aria-hidden); the legend under the drawing says the same in words. */
.ribbon { display: flex; align-items: center; gap: 0.5rem 0; overflow-x: auto; scrollbar-width: thin; padding: 0.55rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--bg); font-size: 0.78rem; white-space: nowrap; }
.ribbon-tab { font-weight: var(--weight-semibold); color: var(--link); padding: 0.2rem 0.6rem 0.2rem 0; margin-right: 0.4rem; border-right: 1px solid var(--border); }
.ribbon-group { display: inline-flex; gap: 0.3rem; padding: 0 0.6rem; border-right: 1px solid var(--border); }
.ribbon-group:last-child { border-right: 0; }
.rb { display: inline-block; padding: 0.22rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--fg); background: var(--surface); }
.rb.is-active { border-color: var(--link); background: var(--tint); color: var(--link); font-weight: var(--weight-semibold); border-bottom-width: 2px; padding-bottom: calc(0.22rem - 1px); }

/* Numbered callout bubble (brand: jade circle, white number). */
.bubble {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 1.35rem; height: 1.35rem; border-radius: var(--radius-round);
  background: var(--link); color: var(--color-on-primary);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: var(--weight-bold); letter-spacing: 0;
}
.flow-panel .label .bubble { margin-right: 0.35rem; }

/* Sections on the home page: hairline between, heading without its own rule. */
.section { padding: clamp(2.75rem, 1.5rem + 2vw, 4rem) 0; border-top: 1px solid var(--border); }
.section h2 { border: 0; padding: 0; margin: 0 0 1.25rem; }
main.home, main.has-closing { padding-bottom: 0; }
main.has-closing > .closing { margin-top: 2.5rem; }
.home .section:last-child { padding-bottom: 3.5rem; }
/* Alternate plain and Drafting Paper bands so each section reads as its own block. */
.band { background: var(--band-bg); }
.faq-grid { display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; margin-bottom: 0.5rem; }
.band details { background: var(--bg); }
.closing-inner { display: flex; flex-wrap: wrap; gap: 1rem 3rem; align-items: center; justify-content: space-between; }
.closing { padding: clamp(3.5rem, 2rem + 2.5vw, 5rem) 0; background: radial-gradient(50% 30rem at 50% 115%, color-mix(in srgb, var(--brand-pine) 34%, transparent), transparent 70%) no-repeat, var(--band-bg); }
:root[data-theme="light"] .closing { background: radial-gradient(50% 30rem at 50% 115%, var(--tint), transparent 70%) no-repeat, var(--band-bg); }
.closing h2 { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0.75rem; max-width: 20em; text-wrap: balance; font-weight: var(--weight-regular); }
.closing p:not(.eyebrow) { color: var(--muted); }
.closing .eyebrow { margin-bottom: 0.6rem; }
.closing p, .closing .actions { margin: 0; }
/* Closing with the product beside it: text and one action left, the drawn before-and-after right. */
.closing-grid { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 56rem) { .closing-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.closing-text .actions { margin-top: 1.5rem; }
.closing-media { margin: 0; padding: 1rem 1rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.closing-media svg { display: block; width: 100%; height: auto; }
.closing-media .sh-text { font-size: 6px; } .closing-media .sh-title { font-size: 7px; }
.closing-media figcaption { margin-top: 0.6rem; }
@media (max-width: 55.99rem) { .closing-media { max-width: 34rem; } }
.band .cmd { background: var(--bg); }
.band .panel, .band .price, .band .fcard { background: var(--bg); }

/* Section header: small mono label, a large heading whose second half is set in warm gray,
   and one sentence. On wide screens the sentence sits in its own column at the right, level
   with the heading's last line. */
.sec-head { margin: 0 0 clamp(2rem, 1.25rem + 1.25vw, 2.75rem); display: grid; gap: 0 4rem; }
.sec-head .eyebrow { grid-column: 1; }
@media (min-width: 56rem) {
  .sec-head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; }
  .sec-head h2 { grid-column: 1; }
  .sec-head > p:last-child { grid-column: 2; grid-row: 2; padding-bottom: 0.35rem; }
}
.section .sec-head h2 { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.75rem; max-width: 22em; text-wrap: balance; font-weight: var(--weight-regular); }
.h2-soft { color: var(--muted); }
@media (min-width: 40rem) { .h2-soft { display: block; } }
.sec-head .eyebrow, .page-hero .eyebrow, .product-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 1rem; padding: 0.35rem 0.9rem 0.35rem 0.8rem;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--pill);
  font-family: var(--font-sans); font-size: var(--text-sm); text-transform: none; letter-spacing: 0; color: var(--fg);
}
.sec-head .eyebrow::before, .page-hero .eyebrow::before, .product-hero .eyebrow::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: var(--radius-round); background: var(--link); flex: none; }
.band .sec-head .eyebrow { background: var(--bg); }
.sec-head .eyebrow { grid-column: 1; justify-self: start; }
.sec-head > p:last-child { color: var(--muted); margin: 0; font-size: 1.05rem; max-width: 26rem; }


/* Trial and license side by side (home page summary of the pricing page). */
.offer { display: grid; gap: 1rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin: 0 0 1.25rem; max-width: 56rem; }
.offer-item { padding-top: 0.75rem; border-top: 2px solid var(--link); }
.offer-item .eyebrow { margin-bottom: 0.25rem; }
.offer-amount { font-size: 1.35rem; font-weight: var(--weight-bold); margin: 0 0 0.6rem; }
.offer-amount { margin-bottom: 0.1rem; }
.offer-term { color: var(--muted); margin: 0 0 0.75rem; font-size: 0.97rem; }
.offer-item ul { margin: 0; padding-left: 1.2rem; }
.offer-item .checklist li:last-child { border-bottom: 1px solid var(--border); }

/* What-it-does illustration: Excel range, command, sheet table. */
.flow { margin: 0 0 2.75rem; }
.flow.plate { margin: 0 auto; }
.flow-row { display: grid; gap: 0.75rem; align-items: center; }
@media (min-width: 56rem) { .flow-row { grid-template-columns: minmax(0, 1fr) 9.5rem minmax(0, 1fr); gap: 1rem; } }
.flow-panel { min-width: 0; }
.flow-panel .label { display: block; margin-bottom: 0.4rem; }
.flow-panel svg { display: block; width: 100%; height: auto; border: 1px solid var(--border-strong); border-radius: var(--radius); }
.flow-step { text-align: center; font-size: var(--text-sm); color: var(--muted); }
.flow-step svg { display: block; margin: 0 auto 0.3rem; width: 100%; max-width: 8rem; height: auto; color: var(--link); }
.flow-step .cmd { display: inline-block; margin: 0.15rem 0; }
@media (max-width: 55.99rem) { .flow-step svg { transform: rotate(90deg); width: 2.6rem; } .flow-step { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem 0.6rem; } .flow-step svg { margin: 0; } }
.flow figcaption { margin-top: 0.9rem; }
.legend { list-style: none; counter-reset: legend; padding: 0; margin: 0 0 0.5rem; display: grid; gap: 0.35rem 1rem; color: var(--fg); }
@media (min-width: 56rem) { .legend { grid-template-columns: minmax(0, 1fr) 9.5rem minmax(0, 1fr); } .legend li:nth-child(2) { grid-column: 2; } }
.legend li { counter-increment: legend; margin: 0; position: relative; padding-left: 1.8rem; }
.legend li::before { content: counter(legend); position: absolute; left: 0; top: 0.1rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: var(--radius-round); background: var(--link); color: var(--color-on-primary); font-family: var(--font-mono); font-size: 0.72rem; font-weight: var(--weight-bold); }
.flow figcaption p { margin: 0; }

/* Without / with comparison. The "with" column carries the jade rule. */
.compare { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.compare > div { padding-top: 0.75rem; border-top: 2px solid var(--border-strong); }
.compare > div + div { border-top-color: var(--link); }
.compare ul { margin: 0; padding-left: 1.2rem; }
.compare li + li { margin-top: 0.5rem; }
/* SVG parts. Excel side follows the theme; the sheet side is always black on white like a plot. */
.xl-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.xl-head { fill: var(--surface-2); }
.xl-cell { fill: var(--bg); }
.xl-text { fill: var(--fg); font-family: var(--font-sans); font-size: 9px; }
.xl-dim { fill: var(--muted); font-family: var(--font-sans); font-size: 8px; }
.xl-b { font-weight: 700; }
.hl-fill { fill: var(--tint); }
.hl-box { fill: none; stroke: var(--link); stroke-width: 2; }
.sh-paper { fill: #fff; }
.sh-line { fill: none; stroke: #000; stroke-width: 0.75; }
.sh-heavy { fill: none; stroke: #000; stroke-width: 1.5; }
.sh-text { fill: #000; font-family: var(--font-narrow); font-stretch: condensed; font-size: 7.5px; text-transform: uppercase; }
.sh-title { font-size: 9.5px; font-weight: 700; }
.sh-b { font-weight: 700; }
.sh-call { fill: none; stroke: var(--brand-pine); stroke-width: 2; }

/* Numbered steps in a row. */
.steps-row { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem 2.5rem; counter-reset: step; }
@media (min-width: 48rem) { .steps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps-row > li { position: relative; margin: 0; counter-increment: step; padding-top: 2.9rem; }
.steps-row > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: var(--radius-round);
  border: 2px solid var(--link); color: var(--link);
  display: grid; place-items: center; font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: 0.95rem;
}
@media (max-width: 47.99rem) { .steps-row > li { padding: 0 0 0 3rem; min-height: 2rem; } }
.steps-row h3 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.steps-row p { margin: 0; }

/* Map of the six steps: one line, in order, each a link to its card; hairlines join the steps.
   The S2 bubbles here are the same numbers the cards carry. */
.flow-map { list-style: none; padding: 0.3rem; margin: -0.5rem 0 1.75rem; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); }
.flow-map li { margin: 0; display: flex; }
.flow-map a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg); text-decoration: none; font-weight: var(--weight-semibold); font-size: 0.95rem; padding: 0.45rem 1rem 0.45rem 0.5rem; border-radius: var(--pill); }
.flow-map a:hover { color: var(--link); background: var(--surface-2); }
.flow-map .sec-bubble { margin-right: 0; width: 22px; height: 22px; font-size: 11.5px; }
.band .flow-map { background: var(--bg); }
@media (max-width: 40rem) { .flow-map a { font-size: 0.9rem; padding: 0.4rem 0.75rem 0.4rem 0.4rem; } }

/* Feature cards: text and a drawn illustration, alternating sides. Brand corners (3 px);
   the card effect comes from the border, padding and space between cards. */
.feature-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.fcard { margin: 0; display: grid; gap: 1.5rem 3rem; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 2rem; }
@media (min-width: 56rem) {
  .fcard { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); padding: 1.75rem 2.25rem; }
  .fcard:nth-child(even) .fcard-text { order: 2; }
}
.fcard-text h3 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); line-height: 1.2; margin: 0 0 0.75rem; letter-spacing: -0.005em; }
.fcard-text p { margin: 0 0 1rem; color: var(--muted); }
.fcard-label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); display: flex; align-items: center; gap: 0.5rem; }
.fcard-plus::before { flex: none; }
.fcard-label .sec-bubble { margin-right: 0.15rem; }
.fcard-text .fcard-plus { color: var(--fg); font-size: 0.95rem; margin: 1.25rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--border); display: flex; gap: 0.6rem; }
.fcard-plus::before { content: "+"; color: var(--link); font-family: var(--font-mono); font-weight: var(--weight-bold); }
.fcard-media svg { display: block; width: 100%; height: auto; }
.fcard-note { margin: 1rem 0 0; }
@media (max-width: 40rem) { .fcard { padding: 1.25rem; } .fcard-text h3 br { display: none; } }
/* Drawn window parts follow the theme; plotted sheet parts stay black on white. */
.ui-frame { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1; }
.ui-frame-thin { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.ui-head { fill: var(--surface); }
.ui-rule { fill: none; stroke: var(--border); stroke-width: 1; }
.ui-title { fill: var(--link); font-family: var(--font-sans); font-size: 10px; font-weight: var(--weight-semibold); }
.ui-sec { fill: var(--fg); font-family: var(--font-sans); font-size: 8px; font-weight: var(--weight-semibold); }
.ui-t { fill: var(--fg); font-family: var(--font-sans); font-size: 8px; }
.ui-main { fill: var(--link); font-family: var(--font-sans); font-size: 10px; }
.ui-strong { font-weight: var(--weight-semibold); }
.ui-blue { fill: var(--link); }
.ui-mute { fill: var(--muted); }
.ui-btn { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }
.ui-default { stroke: var(--link); }
.ui-field { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1; }
.ui-focus { stroke: var(--link); stroke-width: 1.5; }
.ui-stroke { fill: none; stroke: var(--fg); stroke-width: 1; }
.ui-ring { fill: var(--bg); stroke: var(--link); stroke-width: 1; }
.ui-dot { fill: var(--link); }
.ui-preview { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.ui-pick { fill: var(--tint); stroke: var(--tint-border); stroke-width: 1; }
.ui-arrow { fill: none; stroke: var(--link); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ar-area { fill: none; stroke: var(--brand-pine); stroke-width: 1.5; stroke-dasharray: 5 3; }
.ar-label { fill: var(--muted); font-family: var(--font-mono); font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.ar-label.on-paper { fill: var(--brand-slate); }
.ui-arrow.on-paper { stroke: var(--brand-pine); }
.sh-hatch { fill: none; stroke: #000; stroke-width: 0.5; }
.fcard-media .sh-text { font-size: 6px; }
.fcard-media .sh-title { font-size: 7px; }
.fcard-media .xl-text { font-size: 7.5px; }

/* Drawn add-in windows on the product page (illustrations, labelled as such). */
.win-figure { margin: 1.5rem 0 2rem; max-width: none; }
.win-figure .plate-body { padding: 1.25rem; }
.win-figure svg { display: block; width: 100%; height: auto; }
/* Phones: the drawn windows keep a readable size and scroll sideways inside their plate. */
@media (max-width: 40rem) { .win-figure .plate-body { overflow-x: auto; } .win-figure svg { min-width: 36rem; } }
.win .ui-t, .win .ui-sec { font-size: 9.5px; }
.win .sh-text { font-size: 9px; }
.win .sh-title { font-size: 11px; }
.win .ui-on { font-size: 9px; }
.win-cap { font-size: 0.9rem; color: var(--muted); margin: 0.9rem 0 0; }
.ui-ring-muted { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1; }
.ui-on { fill: var(--color-on-primary); font-family: var(--font-sans); font-size: 8px; font-weight: var(--weight-semibold); }
.ui-check { fill: none; stroke: var(--color-on-primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.st-ok-fill { fill: var(--color-success); } .st-chg-fill { fill: var(--color-warning); } .st-nf-fill { fill: var(--color-error); }
.st-chg-text { fill: var(--color-warning); font-weight: var(--weight-semibold); } .st-nf-text { fill: var(--color-error); font-weight: var(--weight-semibold); }

/* Short facts, each under a jade rule. */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.checks > li { margin: 0; padding-top: 0.75rem; border-top: 2px solid var(--link); }
.checks h3 { font-size: 1.02rem; margin: 0 0 0.3rem; }
.checks p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.checks-more { margin: 1.75rem 0 0; }

/* Product card with a spec column. */
.product-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
@media (min-width: 56rem) { .product-card { grid-template-columns: minmax(0, 1fr) 19rem; } }
.product-card .pc-body { padding: 1.4rem 1.5rem 1.5rem; }
.product-card .pc-body h2 { border: 0; padding: 0; margin: 0.35rem 0 0.75rem; font-size: 1.35rem; }
.product-card .pc-spec { border-top: 1px solid var(--border-strong); background: var(--surface); }
@media (min-width: 56rem) { .product-card .pc-spec { border-top: 0; border-left: 1px solid var(--border-strong); } }
.pc-spec dl { margin: 0; }
.pc-spec dl > div { padding: 0.55rem 1.1rem; border-bottom: 1px solid var(--border); }
.pc-spec dt { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); }
.pc-spec dd { margin: 0; font-weight: var(--weight-semibold); }
.pc-spec .pc-links { padding: 0.8rem 1.1rem 1rem; margin: 0; }
.pc-cta { margin: 1.25rem 0 0; }
.pc-media { margin: 1.5rem 0 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pc-media svg { display: block; width: 100%; max-width: 34rem; height: auto; }
.pc-media .sh-text { font-size: 6px; } .pc-media .sh-title { font-size: 7px; }
.pc-media figcaption { margin-top: 0.6rem; }
.planned { margin-top: 1.25rem; padding: 0.9rem 1.1rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted); }
.planned p { margin: 0; }

/* Empty state (blog with no posts). */
.empty { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 1rem 1.1rem; color: var(--muted); }
.empty p { margin: 0; }

/* 404: a detail callout that points nowhere. */
.not-found { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0 1.25rem; }
.not-found .tag {
  flex: none; width: 4.25rem; height: 4.25rem; border-radius: var(--radius-round);
  border: 2px solid var(--link); display: grid; grid-template-rows: 1fr 1fr; overflow: hidden; color: var(--link);
  font-family: var(--font-mono); font-weight: var(--weight-bold); text-align: center;
}
.not-found .tag span { display: grid; place-items: center; font-size: 0.85rem; }
.not-found .tag span + span { border-top: 2px solid var(--link); font-size: 0.75rem; }
.not-found h1 { margin: 0; }

/* Numbered rules with a bold lead (About). Uses S2 bubbles as markers. */
.rule-list { list-style: none; counter-reset: rule; padding: 0; }
.rule-list > li { counter-increment: rule; position: relative; padding-left: 2.4rem; margin: 0 0 0.8rem; }
.rule-list > li::before { content: counter(rule); position: absolute; left: 0; top: 0.05rem; width: 26px; height: 26px; box-sizing: border-box; border: 2px solid var(--color-primary); border-radius: 50%; color: var(--color-primary); font: 600 13px/1 var(--font-sans); display: grid; place-items: center; }

/* Link list with one-line descriptions (404). */
.link-list { list-style: none; padding: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--border); }
.link-list li { margin: 0; padding: 0.7rem 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 0.15rem 1.5rem; align-items: baseline; }
.link-list a { font-weight: var(--weight-semibold); }
.link-list span { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 40rem) { .link-list li { grid-template-columns: 1fr; } }

/* About: facts panel beside the prose. */
.about-layout { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .about-layout { grid-template-columns: minmax(0, var(--measure)) 19rem; gap: 4rem; align-items: start; } }
.about-layout .panel dl { grid-template-columns: 1fr; gap: 0; }
.about-layout > .prose > h2:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 60rem) { .about-layout .panel { margin-top: 0.3rem; position: sticky; top: calc(var(--header-h) + 1.5rem); } }
/* Statement: large plain sentences, muted with one in full ink (About). Fully visible at rest. */
.statement { max-width: 46rem; margin: 0.25rem 0 1.5rem; }
.statement p { font-size: clamp(1.2rem, 1rem + 0.9vw, 1.65rem); line-height: 1.38; letter-spacing: -0.005em; color: var(--muted); margin: 0 0 1.1rem; text-wrap: pretty; }
.statement p.is-strong { color: var(--fg); }
.statement p:last-child { margin-bottom: 0; }

/* Inner page tops share one pattern: eyebrow, large semibold title with the S1 line, one larger muted lead. */
.page-hero { padding: 1.5rem 0 1rem; max-width: 52rem; }
.page-hero .lead-large:last-child { margin-bottom: 1.25rem; }
.page-hero p:not(.eyebrow):not(.lead) { max-width: 46rem; }
.page-hero h1 { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.2rem); line-height: 1.06; letter-spacing: -0.025em; font-weight: var(--weight-regular); margin-bottom: 0.9rem; }
.lead-large { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height: 1.45; color: var(--muted); max-width: 46rem; margin-bottom: 2rem; }
.checks-tight { margin: 0 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem 2rem; }
.checks-tight h3 { border: 0; }
.about-layout .panel dt { font-size: 0.85rem; }
.about-layout .panel dd + dt { margin-top: 0.55rem; }

@media (max-width: 40rem) {
  /* Phones: buttons in an action row take the full width, so they line up and are easy to tap. */
  .actions .btn { flex: 1 1 100%; text-align: center; }
  .hero .actions .btn { flex: none; width: 100%; }
  .section { padding: 2rem 0; }
}

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.3rem; }
  .lead { font-size: 1.08rem; }
  main { padding-top: 1.25rem; }
}

/* ---------- Round 7: mirror-test hero, the Reload demo, and depth ----------
   Back: the page, a jade glow and a faint drafting grid behind the hero.
   Middle: cards with a soft shadow; some cross the edge between two sections.
   Front: the orange button, the demo's Reload button and the closing card. */

/* Shared: cards rest on the page with a soft shadow (every page). */
.plate, .panel, .fcard, .closing-media, .product-card, .price { box-shadow: var(--shadow-1); }
.price-featured { box-shadow: var(--shadow-2); }

/* Back layer. */
main.home { position: relative; isolation: isolate; }
main.home::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 52rem; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px);
  background-size: 3rem 3rem; background-position: 50% 0;
  -webkit-mask-image: radial-gradient(60% 70% at 68% 32%, black, transparent 78%);
  mask-image: radial-gradient(60% 70% at 68% 32%, black, transparent 78%);
}

/* Hero: who it is for, the promise, one action; the demo beside it. Text is at rest on load. */
.hero-split { text-align: left; max-width: none; display: grid; gap: 2.5rem; align-items: center; padding: clamp(2rem, 1rem + 2.2vw, 3.5rem) 0 clamp(2.5rem, 1.5rem + 2vw, 4rem); }
@media (min-width: 62rem) { .hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 3.5rem; } }
.hero-split .status-line { margin-left: 0; }
.hero-for { margin: 0 0 0.9rem; color: var(--fg); font-weight: var(--weight-semibold); font-size: 0.95rem; }
.hero-split .h1-soft { display: inline; }
.hero-split h1 { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.5rem); margin: 0 0 1.25rem; max-width: none; }
.hero-split .lead { margin: 0 0 1.75rem; max-width: 34rem; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }
.hero-split .actions { justify-content: flex-start; margin: 0 0 0.9rem; }
.cta-note { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* The demo: the Excel card in the middle layer, the sheet behind and below it, Reload in front. */
.demo { min-width: 0; }
.demo-kicker { border: 0; padding: 0; margin: 0 0 0.9rem; font-size: 1rem; font-weight: var(--weight-regular); color: var(--fg); display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.demo-tag { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--fg); border: 1px solid var(--border-strong); border-radius: var(--pill); padding: 0.15rem 0.6rem; }
.demo-stage { display: grid; }
.demo-bar { margin: 0; display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.8rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); }
.demo-file { color: var(--fg); text-transform: none; letter-spacing: 0; }
.demo-xl { position: relative; z-index: 2; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.demo-sheet { position: relative; z-index: 1; margin-top: -1.25rem; padding: 1.6rem 0.6rem 0.6rem; background: var(--sheet-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.demo-sheet svg { display: block; width: 100%; height: auto; }
.demo-bar.on-paper { color: var(--brand-slate); padding: 0 0.2rem; min-height: 2.9rem; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 0 0.6rem; padding-right: 7.5rem; }
.demo-bar.on-paper .demo-file { color: var(--brand-ink); }
@media (min-width: 40rem) {
  .demo-xl { width: 88%; }
  .demo-sheet { width: 90%; margin-left: auto; margin-top: -2.25rem; padding: 2.5rem 0.9rem 0.9rem; }
}

table.xl { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; font-size: 0.9rem; line-height: 1.2; background: var(--bg); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.xl thead td, .xl thead th, .xl tbody th { background: var(--surface-2); color: var(--muted); font-weight: var(--weight-regular); font-size: 0.75rem; text-align: center; padding: 0.15rem 0; }
.xl thead td, .xl tbody th { width: 1.6rem; vertical-align: middle; }
.xl th, .xl td { border: 1px solid var(--border); }
.xl tr > :first-child { border-left: 0; } .xl tr > :last-child { border-right: 0; } .xl tbody tr:last-child > * { border-bottom: 0; }
.xl tbody tr:last-child th { border-bottom-left-radius: var(--radius-md); }
.xl thead th:nth-child(2) { width: 17%; } .xl thead th:nth-child(4) { width: 19%; } .xl thead th:nth-child(5) { width: 16%; }
.xl td { padding: 0; height: 2.1rem; vertical-align: middle; }
.xl td.xl-b { padding: 0 0.5rem; font-weight: var(--weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl .xl-num { text-align: right; }
.xl td input[data-cell] { display: block; width: 100%; height: 2.1rem; min-width: 0; margin: 0; padding: 0 0.5rem; border: 0; border-radius: 0; background: transparent; color: var(--fg); font: inherit; text-overflow: ellipsis; }
.xl td input[data-cell]:hover { background: var(--surface); }
.xl td input[data-cell]:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; border-radius: 0; background: var(--bg); }
.xl td.is-changed { background: var(--tint); box-shadow: inset 0 0 0 2px var(--link); }
@media (pointer: coarse) { table.xl { font-size: 1rem; } .xl td.xl-b { padding: 0 0.35rem; } .xl td input[data-cell] { padding: 0 0.35rem; } }

/* Reload: in front of both, on the corner where the file meets the sheet. A light pill, so the
   orange stays with the one action the page asks for. */
.demo-reload {
  position: absolute; z-index: 3; right: 0.75rem; bottom: -2.65rem;
  font: inherit; font-weight: var(--weight-semibold); line-height: 1.3; cursor: pointer;
  padding: 0.6rem 1.3rem 0.6rem 1.1rem; border-radius: var(--pill);
  border: 1px solid var(--fg); background: var(--fg); color: var(--bg);
  box-shadow: var(--shadow-2);
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.demo-reload::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: var(--radius-round); background: var(--border-strong); }
.is-stale .demo-reload::before { background: var(--brand-pine); }
.demo-reload:hover { transform: translateY(-1px); }
.demo-reload:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--pill); }
@media (min-width: 40rem) { .demo-reload { right: -4.4rem; bottom: -2.1rem; } }
.demo-status { margin: 0.9rem 0 0.35rem; min-height: 3.2em; font-size: 0.98rem; color: var(--fg); }
.demo-note { margin: 0; font-size: 0.85rem; color: var(--muted); }

/* The release strip crosses the edge between the hero and the first band. */
.home .release-row { position: relative; z-index: 2; margin: 0.5rem auto -3.25rem; background: var(--surface-2); box-shadow: var(--shadow-2); }
.home .after-strip { padding-top: calc(3.25rem + clamp(2.75rem, 1.5rem + 2vw, 4rem)); }
@media (max-width: 40rem) { .home .release-row { margin-bottom: -4rem; } .home .after-strip { padding-top: 6.25rem; } }

/* Without and with: two cards; the "with" card is raised and sits a little higher. */
.home .compare { gap: 1rem; align-items: start; }
.home .compare > div { padding: 1.4rem 1.5rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.home .compare > div + div { border-color: var(--border-strong); background: var(--surface-2); box-shadow: var(--shadow-2); }
@media (min-width: 44rem) { .home .compare > div + div { margin: -1rem 0 0 -1.75rem; position: relative; z-index: 1; padding-left: 2rem; } }
.home .compare > div:first-child { color: var(--muted); }

/* Trial and license as cards on the band. */
.home .offer { gap: 1rem; }
.home .offer-item { padding: 1.4rem 1.5rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-1); }
.home .offer-item .checklist li:last-child { border-bottom: 0; }

/* Closing: one raised card that crosses from the last band onto the page. */
.home .before-float { padding-bottom: calc(5rem + clamp(2.75rem, 1.5rem + 2vw, 4rem)); }
.home .section.before-float:last-child { padding-bottom: 8rem; }
.closing-float { background: none; padding: 0 0 clamp(3rem, 2rem + 2vw, 4.5rem); margin-top: -5rem; position: relative; z-index: 1; }
.closing-card {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.25rem); border: 1px solid var(--border-strong); border-radius: calc(var(--radius-lg) + 8px);
  background: radial-gradient(60% 24rem at 20% 120%, color-mix(in srgb, var(--brand-pine) 45%, transparent), transparent 70%) no-repeat, var(--surface-2);
  box-shadow: var(--shadow-2);
}
:root[data-theme="light"] .closing-card { background: radial-gradient(60% 24rem at 20% 120%, var(--tint), transparent 70%) no-repeat, var(--bg); }
.closing-card .closing-media { background: var(--bg); }
.closing-float h2 { border: 0; padding: 0; margin-top: 0; }

/* Windows high contrast (forced colors): backgrounds are removed, so give filled bubbles and the
   primary button a visible outline. The S1 line is decoration and may disappear. */
@media (forced-colors: active) {
  .bubble, .legend li::before, .status-line .dot, .fcard-label .sec-bubble { border: 1px solid CanvasText; }
  .btn-primary { border: 2px solid ButtonText; }
}

/* Motion: small, once, and never needed to understand the page. Everything is in its final state
   at rest; with reduced motion nothing moves (rule below). */
/* Round 7: nothing plays by itself. The one moving thing on the home page is the mark drawn on
   the demo sheet after the visitor presses Reload. */
.demo-mark { animation: mark-in 0.9s ease-out backwards; }
@keyframes mark-in { 0% { stroke-width: 2; fill: color-mix(in srgb, var(--brand-pine) 45%, transparent); } 35% { stroke-width: 4; } 100% { stroke-width: 2; fill: transparent; } }
.fcard, .price, .card, .product-card, .datasheet, details, .rb { transition: border-color 0.2s ease, background-color 0.2s ease; }
.fcard:hover, .product-card:hover { border-color: var(--border-strong); }
details:hover { border-color: var(--border-strong); }
.btn { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
a { transition: text-decoration-thickness 0.1s ease, color 0.15s ease; }

/* Reading progress on the long documentation pages (product, license, terms, privacy): a 2 px
   jade line along the bottom edge of the sticky header fills as the page is read.
   CSS only and scroll-driven; browsers without animation-timeline show nothing, and reduced
   motion removes it with the rule below. */
@supports (animation-timeline: scroll()) {
  html:has(.doc-layout) .site-header::after {
    content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
    background: var(--link); transform-origin: 0 50%; transform: scaleX(0);
    animation: read-progress linear both; animation-timeline: scroll(root);
  }
  @keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Between pages: a short cross-fade when a link is followed (cross-document view transition, CSS only;
   browsers without it change pages as before). The sticky header is kept out of the fade so it stays put. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; }
.site-header { view-transition-name: site-header; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }

/* Disclosures (FAQ) open and close with a short height transition where the browser can animate to
   auto height; elsewhere they snap open as before. */
@supports (interpolate-size: allow-keywords) {
  details { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: clip; transition: block-size 0.22s ease, content-visibility 0.22s allow-discrete; }
  details[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  /* The universal selector does not reach pseudo-elements: the reading-progress line, the page
     cross-fade and the disclosure transition go too. */
  .site-header::after { display: none; }
  @view-transition { navigation: none; }
  details::details-content { transition: none; }
}

/* Print: always dark ink on white, whatever the screen theme. Drawing devices stay;
   navigation and buttons go. */
@media print {
  :root:not([data-print]) {
    --bg: var(--brand-white); --fg: var(--brand-ink); --muted: var(--brand-slate);
    --surface: var(--brand-white); --surface-2: var(--brand-paper);
    --border: var(--brand-rule); --border-strong: var(--brand-slate);
    --link: var(--brand-ink); --tint: var(--brand-white); --tint-border: var(--brand-rule);
    --color-on-primary: var(--brand-white);
    color-scheme: light;
  }
  body { font-size: 10.5pt; background: var(--brand-white); }
  .site-header, .site-footer nav, .footer-brand, .toc, .actions, .skip-link, .btn, .nav-toggle, .demo { display: none !important; }
  * { box-shadow: none !important; }
  .site-header { position: static; }
  .footer-grid { border: 0; padding: 0; margin: 0; }
  .site-footer { background: none; border-top: 1px solid var(--border); padding-top: 0.5rem; font-size: 8pt; }
  main { padding-top: 0; }
  a { color: inherit; }
  .prose a[href^="http"]::after, .prose a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  h2, h3 { break-after: avoid; }
  .panel, .flow, .checks > li, .steps-row > li, .product-card, .card, .price, details, figure, tr { break-inside: avoid; }
  details > :not(summary) { display: block; }
  details::details-content { block-size: auto; transition: none; }
  /* Product page as a printed spec sheet: drawings and buying controls go, tables fit the page,
     every FAQ answer is printed (site.js opens them for printing), and a line says where it came from. */
  .flow, .win-figure, .fcard-media, .closing-media, .price label, .price input, [data-checkout-message] { display: none !important; }
  .table-scroll { overflow: visible; }
  .table-scroll table, .compare-table, .ds-grid { min-width: 0 !important; }
  .compare-table, .ds-grid, dl.ds-rows, .datasheet { font-size: 9pt; }
  .doc-main > section { max-width: none; }
  .print-only { display: block !important; }
  .sheet { overflow: visible; padding: 0.4rem; break-inside: avoid; }
  .sheet table.schedule { font-size: 7pt; min-width: 0; }
  .datasheet, .compare-table tr { break-inside: avoid; }
  summary::before, summary::after { display: none; }
  details { border: 0; border-top: 1px solid var(--border); border-radius: 0; margin: 0; }
  summary { padding: 0.4rem 0 0.1rem; }
  details[open] summary { border-bottom: 0; }
  details > :not(summary) { margin: 0 0 0.4rem; }
  .compare-table tr.is-ours th, .compare-table tr.is-ours td { background: none; }
  h1 { font-size: 20pt; } h2 { font-size: 14pt; } h3 { font-size: 11pt; }
  @page { margin: 0.6in 0.6in 0.7in; }
}
.print-only { display: none; }

.ds-runtime td.ds-wrap { white-space: normal; font-family: var(--font-sans); font-size: 0.9rem; padding: 0.5rem 0.65rem; }