/* Solarium theme site: landing page, knowledge base and support form.
   The aqsashahzad.com v3 language, applied whole (2026-09-21): black ground, white document sheets with rounded corners,
   Instrument Sans for display, Inter for reading, one orange for action, pill buttons with the arrow, chapter heads with
   an eyebrow and a count. The theme screenshots bring the colour; the chrome stays black, white and orange.
   Tokens remap inside .paper (a white sheet): --white becomes the ink, --grey the secondary, --or-ink the accent on white. */

:root {
  --black: #000000;
  --white: #ffffff;
  --or: #ff7700;
  --or-soft: #ff8f2e;
  --or-ink: #b54f00;
  --peach: #ffe0c8;
  --grey: #a1a1a1;
  --grey-2: #8a8a85;
  --glass: rgba(255, 255, 255, 0.035);
  --glass-2: rgba(255, 255, 255, 0.06);
  --edge: rgba(255, 255, 255, 0.09);
  --edge-2: rgba(255, 255, 255, 0.16);
  --ok: #7ddc9a;
  --danger: #ff8a8a;

  --font-display: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.3rem + 2.4vw, 2.875rem);
  --text-display: clamp(2.5rem, 1.3rem + 4.4vw, 4.75rem);

  --wrap: 78rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.25rem);
  --pad: clamp(3rem, 2rem + 4vw, 6rem);
  --pill: 999px;
  --card: 16px;
  --sheet: 28px;
  --bar: 5.2rem;
  --dur: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/instrument-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/instrument-sans-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/inter-italic-latin.woff2") format("woff2"); }
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  html { scroll-behavior: auto !important; }
  .anim .rise { animation: none !important; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 5.5rem); -webkit-text-size-adjust: 100%; background: var(--black); }
body { margin: 0; font: 400 var(--text-base) / 1.6 var(--font-body); color: var(--white); background: var(--black); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
::selection { background: var(--or); color: var(--black); }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: var(--text-display); letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); letter-spacing: -0.015em; font-weight: 500; }
h4 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
code { font: 0.875em / 1.4 var(--mono); background: var(--glass-2); border: 1px solid var(--edge); border-radius: 4px; padding: 0.08em 0.4em; }
pre { margin: 0; padding: 1rem 1.25rem; overflow: auto; background: var(--glass); border: 1px solid var(--edge); border-radius: 12px; font: 0.875rem / 1.55 var(--mono); }
pre code { border: 0; padding: 0; background: none; }
hr { border: 0; border-top: 1px solid var(--edge); margin: 2rem 0; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--or); color: var(--black); padding: 0.6rem 0.9rem; border-radius: 6px; font-weight: 500; }
.skip:focus { top: 1rem; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
/* A .wrap whose only job is to hold the light sheets does not inset them: the sheets run edge to
   edge, keeping their rounded corners, so the black page shows at a corner where two sheets meet and
   never as a strip down both sides. aqsashahzad.com does the same, and it is the other half of why
   the header looked wrong against a white section.
   The .wrap inside each sheet keeps the gutter and the measure, which is what holds the content off
   the sheet edge - taking the gutter off both wraps put every heading flush against the white. */
.wrap:has(> .paper) { width: 100%; }
.muted { color: var(--grey); }
.icon { width: 1.25rem; height: 1.25rem; flex: none; display: inline-grid; place-items: center; }
.icon svg { width: 100%; height: 100%; }
.i { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.peach { color: var(--peach); font-style: normal; }
.sub { color: var(--grey); font-size: var(--text-lg); line-height: 1.55; max-width: 56ch; }
.sub a, .fine a { color: var(--white); border-bottom: 1px solid var(--edge-2); }
.fine { font-size: var(--text-sm); color: var(--grey-2); line-height: 1.5; }

/* ---------- the white sheet (tokens remap) ---------- */
.paper {
  --white: #000000; --grey: #5c5c57; --grey-2: #6b6b66; --edge: #e6e5e1; --edge-2: #cfcec9; --glass: #f6f6f4; --glass-2: #ededea; --ok: #1f6b3a; --danger: #b3261e;
  background: #ffffff; color: #000; border-radius: var(--sheet); color-scheme: light;
}
.paper.tint { background: #f6f6f3; --glass: #ececea; --glass-2: #e3e3df; --edge: #dcdcd6; }
.paper.join-next { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.paper.join-prev { border-top-left-radius: 0; border-top-right-radius: 0; }
.paper code { background: var(--glass); border-color: var(--edge-2); }
.paper pre { background: var(--glass); border-color: var(--edge); }
.paper ::selection { background: var(--or); color: #000; }
.stage { padding-block: var(--pad); }
.stage.tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.sheet-gap { height: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); }

/* ---------- pill buttons (the site's own) ---------- */
.btn, .pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.25rem; padding: 0 1.5rem; border-radius: var(--pill); font: 500 var(--text-base) / 1 var(--font-body); border: 1px solid transparent; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn .i, .pill .i { width: 0.9em; height: 0.9em; transition: transform var(--dur) var(--ease); }
.btn:hover .i, .pill:hover .i { transform: translate(2px, -2px); }
.btn-accent, .pill-white { background: #fff; color: #000; }
.btn-accent:hover, .pill-white:hover { background: #f1f1ef; color: #000; }
.paper .btn-accent, .paper .pill-white { background: #000; color: #fff; }
.paper .btn-accent:hover, .paper .pill-white:hover { background: #222; color: #fff; }
.btn-or, .pill-or { background: var(--or); color: #000; }
.btn-or:hover, .pill-or:hover { background: var(--or-soft); color: #000; }
.btn-ghost, .pill-ghost { background: transparent; color: var(--white); border-color: var(--edge-2); }
.btn-ghost:hover, .pill-ghost:hover { border-color: var(--white); background: var(--glass); color: var(--white); }
.btn-lg { min-height: 3.5rem; padding-inline: 1.75rem; }
.btn-sm, .pill-sm { min-height: 2.75rem; padding-inline: 1.2rem; font-size: var(--text-sm); }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.btn[aria-disabled="true"]:hover .i { transform: none; }
.textlink { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; color: var(--white); padding-block: 0.4rem; border-bottom: 1px solid var(--edge-2); transition: border-color var(--dur) var(--ease); }
.textlink:hover { border-color: var(--white); }
.textlink .i { width: 0.9em; height: 0.9em; }
.rowlink { display: inline-flex; align-items: center; gap: 0.45rem; padding-top: 0.85rem; font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); white-space: nowrap; min-height: 44px; }
.rowlink .i { width: 1em; height: 1em; transition: transform var(--dur) var(--ease); }
.rowlink:hover .i { transform: translateX(3px); }

/* ---------- floating pill header ---------- */
.top { position: sticky; top: 0.9rem; z-index: 50; padding-inline: var(--gutter); }
/* Solid black, no blur. A translucent bar with a backdrop filter washes out over the white sheet
   sections - the page reads through it and the bar looks like it is dissolving into the sheet - and
   that is what made the header look wrong at narrow widths. aqsashahzad.com settled on the same
   thing for the same reason. The hairline is the only edge it needs. */
.top__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; padding: 0.4rem 0.6rem 0.4rem 1.4rem; border-radius: var(--pill); background: #000; border: 1px solid rgba(255, 255, 255, 0.08); }
.top__brand { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 2.9rem; padding-block: 0.35rem; color: var(--white); }
.brand-solarium { height: 1.5rem; width: auto; }
.brand-by { font: 500 var(--text-xs) / 1 var(--font-body); color: var(--grey-2); padding-top: 0.15rem; }
.brand-aso { height: 1.15rem; width: auto; padding-top: 0.15rem; }
.brand-aso--solo { height: 1.4rem; padding-top: 0; }
.brand-solarium--card { height: 1.6rem; width: auto; margin-top: 0.35rem; }
@media (max-width: 480px) { .brand-by, .top .brand-aso { display: none; } }
.top__nav { display: flex; gap: 1.75rem; margin-left: auto; }
.top__nav a { color: #d6d6d2; font-weight: 500; font-size: var(--text-sm); padding: 0.75rem 0; transition: color var(--dur) var(--ease); }
.top__nav a:hover, .top__nav a[aria-current="page"] { color: var(--white); }
.top__cta { min-height: 2.9rem; }
.top__toggle { display: none; align-items: center; justify-content: center; min-height: 2.9rem; min-width: 2.9rem; padding: 0; background: none; border: 0; color: var(--white); cursor: pointer; border-radius: var(--pill); }
.top__toggle .icon { width: 1.35rem; height: 1.35rem; }
.top__menu { display: none; width: 100%; max-width: var(--wrap); margin: 0.6rem auto 0; padding: 0.5rem 1.4rem 1.4rem; border-radius: 24px; background: rgba(10, 10, 10, 0.96); border: 1px solid var(--edge); }
.top__menu[data-open] { display: grid; }
.top__menu a { padding: 0.9rem 0; border-bottom: 1px solid var(--edge); font-size: var(--text-lg); font-weight: 500; }
.top__menu a[aria-current="page"] { color: var(--or); }
.top__menu .btn { margin-top: 1.1rem; border-bottom: 0; }
/* On a phone the header is a full-bleed bar rather than a floating pill, which is how
   aqsashahzad.com does it. A pill with a hairline border sitting 16px off each edge crowds a narrow
   screen; a bar that meets the edges on purpose, with its content on the page gutter, does not.
   --bar drops to the bar's own height because the 0.9rem floating gap goes with it, which keeps the
   hero offset, the sticky sidebar, the section nav and the anchor offsets in step: every one of
   them is expressed against --bar. */
@media (max-width: 860px) {
  :root { --bar: 4rem; }
  .top__nav, .top__cta { display: none; }
  .top__toggle { display: inline-flex; margin-left: auto; }
  .top { top: 0; padding-inline: 0; }
  .top__inner { max-width: none; min-height: 4rem; padding-inline: var(--gutter); border-radius: 0; border-width: 0 0 1px; }
  /* The bar no longer carries the gutter, so the open menu would otherwise meet the edges too. It
     takes width: auto, not the 100% it has on desktop: 100% of a now full-width bar plus a margin
     each side puts it 34px wider than the screen and scrolls the page sideways. */
  .top__menu { width: auto; max-width: none; margin-inline: var(--gutter); }
}

/* ---------- opener (dark) ---------- */
.opener { position: relative; overflow: clip; margin-top: calc(-1 * var(--bar)); padding-block: clamp(8rem, 6rem + 6vw, 12rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.opener::before { content: ""; position: absolute; inset: -30% -10% auto; height: 60%; background: radial-gradient(ellipse 45% 50% at 18% 35%, rgba(255, 119, 0, 0.14), transparent 70%); pointer-events: none; }
.opener .wrap { position: relative; }
.opener-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2.5rem 5rem; align-items: center; }
.opener-l { display: grid; gap: 1.25rem; justify-items: start; }
.opener h1 { max-width: 16ch; }
.landing .opener h1 { font-size: clamp(2.5rem, 1.2rem + 3.9vw, 4.25rem); }
.opener .sub { margin: 0; }
.opener-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-top: 0.5rem; }
.opener-note { font-size: var(--text-sm); color: var(--grey-2); max-width: 46ch; }
.opener-shot { position: relative; margin: 0; border-radius: 14px; overflow: clip; border: 1px solid var(--edge-2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); background: #111; }
.opener-shot img { width: 100%; height: auto; }
.opener-shot figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: 0.45rem 0.8rem; border-radius: var(--pill); background: rgba(0, 0, 0, 0.7); border: 1px solid var(--edge-2); font-size: var(--text-xs); color: #d6d6d2; backdrop-filter: blur(8px); }
.opener-index { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid var(--edge); }
.opener-index .lbl { flex: none; font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-2); }
.opener-index .ch-tags { margin: 0; }
.opener-index .ch-tags a { color: var(--white); border-bottom-color: transparent; }
.opener-index .ch-tags a:hover { border-bottom-color: var(--white); }
.opener.compact { padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); overflow: visible; z-index: 3; }
.opener.compact::before { inset: 0 0 auto; height: 70%; }
.opener.compact h1 { font-size: clamp(2.25rem, 1.3rem + 3.2vw, 3.75rem); max-width: 18ch; }
.opener.compact .opener-l { gap: 1rem; }
.eyebrow { display: flex; align-items: center; gap: 0.6rem; margin: 0; font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-2); }
.eyebrow::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; background: var(--or); }
.eyebrow a { color: inherit; }
.eyebrow a:hover { color: var(--white); }
.crumbs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); }
.crumbs li { display: inline-flex; align-items: center; gap: 0.6rem; }
.crumbs li:first-child::before { content: ""; width: 0.45rem; height: 0.45rem; background: var(--or); }
.crumbs li + li::before { content: ""; width: 4px; height: 4px; background: var(--edge-2); }
.crumbs a { padding-block: 0.5rem; }
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current="page"] { color: var(--grey); }
.opener-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-top: 0.75rem; font-size: var(--text-sm); color: var(--grey-2); }
.opener-meta button { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--edge-2); border-radius: var(--pill); background: none; color: var(--white); font: 500 var(--text-sm) / 1 var(--font-body); cursor: pointer; }
.opener-meta button:hover { border-color: var(--white); }
.opener-meta button .icon { width: 1rem; height: 1rem; }

/* ---------- figures ---------- */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 3rem; margin: 0; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); border-top: 1px solid var(--edge); }
.figures div { display: grid; gap: 0.75rem; align-content: start; }
.figures dd { font-family: var(--font-display); font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem); font-weight: 400; letter-spacing: -0.045em; line-height: 0.95; }
.figures dd.text { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.875rem); letter-spacing: -0.03em; line-height: 1.12; max-width: 14ch; padding-top: 0.35rem; }
.figures dt { font-size: var(--text-sm); color: var(--grey); max-width: 22ch; line-height: 1.45; }

/* ---------- chapter heads, rows, grids ---------- */
.ch-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 1.5rem 4rem; align-items: end; padding-bottom: 2.5rem; border-bottom: 1px solid var(--edge); margin: 0; }
.ch-head-l { display: grid; gap: 1.1rem; }
.ch-head h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.375rem); letter-spacing: -0.035em; line-height: 1.02; max-width: 17ch; }
.ch-head .eyebrow .count { margin-left: 0.5rem; letter-spacing: 0.1em; color: var(--or-ink); }
.ch-aside { display: grid; gap: 1.25rem; justify-items: end; justify-self: end; text-align: right; color: var(--grey); font-size: var(--text-lg); max-width: 40ch; }
.num { font: 300 2.75rem / 1 var(--font-display); letter-spacing: -0.04em; color: var(--or-ink); font-variant-numeric: tabular-nums; }
.ch-rows { margin: 0; padding: 0; list-style: none; }
.ch-rows > li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: start; padding: 2.25rem 0; border-bottom: 1px solid var(--edge); }
.ch-rows > li.has-shot { grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 0.9fr); }
.ch-rows > li.has-card { grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 0.8fr); }
.ch-rows > li.has-shot .rowlink, .ch-rows > li.has-card .rowlink { grid-column: 2; }
.ch-body h3 { font-weight: 400; font-size: var(--text-2xl); letter-spacing: -0.025em; margin: 0; }
.ch-body p { margin: 0.85rem 0 0; color: var(--grey); max-width: 60ch; }
.ch-body p a { color: var(--white); border-bottom: 1px solid var(--edge-2); }
.ch-shot { border: 1px solid var(--edge); border-radius: 12px; overflow: clip; background: var(--glass); align-self: start; margin: 0; }
.ch-shot img { width: 100%; height: auto; }
.ch-tags { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 0.65rem 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--grey-2); }
.ch-tags li { position: relative; }
.ch-tags li + li::before { content: ""; position: absolute; left: -0.95rem; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--edge-2); }
.ch-tags a { display: inline-block; color: inherit; border-bottom: 1px solid var(--edge-2); padding-block: 0.85rem; margin-block: -0.85rem; }
.ch-tags a:hover { border-bottom-color: currentColor; }
.ch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5rem; margin: 0; padding: 0; list-style: none; }
.ch-grid > li { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--edge); }
.ch-grid h3 { font-weight: 400; font-size: var(--text-xl); letter-spacing: -0.02em; margin: 0; }
.ch-grid p { margin: 0.5rem 0 0; color: var(--grey); }
.ch-grid .tick { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--or-ink); color: var(--or-ink); display: grid; place-items: center; }
.ch-grid .tick .icon { width: 0.9rem; height: 0.9rem; }

/* ---------- cards (presets, categories) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.card { position: relative; display: grid; align-content: start; gap: 0.6rem; padding: 1.75rem 1.75rem 1.9rem; border-radius: var(--card); background: var(--glass); border: 1px solid var(--edge); color: var(--white); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
a.card:hover { border-color: var(--edge-2); background: var(--glass-2); }
.card .grp { font: 600 0.72rem / 1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); padding-right: 3rem; }
.card h3 { font-weight: 400; font-size: var(--text-2xl); letter-spacing: -0.025em; margin-top: 0.15rem; }
.card p { color: var(--grey); font-size: var(--text-sm); max-width: 38ch; line-height: 1.55; }
.card .arrow { position: absolute; top: 1.25rem; right: 1.25rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--edge-2); color: var(--grey); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card .arrow .icon { width: 0.9rem; height: 0.9rem; }
a.card:hover .arrow { color: var(--white); border-color: var(--white); transform: translate(2px, -2px); }
.card .count { position: absolute; top: 1.5rem; right: 1.75rem; font: 500 var(--text-sm) / 1 var(--mono); color: var(--grey-2); }
.card .icon.lead { width: 1.5rem; height: 1.5rem; color: var(--or-ink); margin-bottom: 0.5rem; }

/* presets */
.presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.preset { grid-column: span 2; }
.preset:nth-child(4), .preset:nth-child(5) { grid-column: span 3; }
.preset { display: grid; grid-template-rows: auto 1fr; border-radius: var(--card); overflow: clip; background: var(--glass); border: 1px solid var(--edge); }
/* A screenshot is content, not texture. A decorative aspect ratio with object-fit: cover cropped
   the hero captures sideways - a 1440x738 shot in a 16/10 box lost 18 per cent of its width, which
   took the first letter off every headline.
   The five cards compare the same section across presets, so the window keeps one ratio and the
   cards stay in line. contain, not cover: the Spa hero was captured at 1440x900 where the other
   four are 1440x738, and it letterboxes into the dark frame rather than losing its edges. */
.preset__window { aspect-ratio: 1440 / 738; overflow: hidden; background: #0e0e0e; border-bottom: 1px solid var(--edge); }
.preset__window img { display: block; width: 100%; height: 100%; object-fit: contain; }
.preset__body { display: grid; gap: 0.75rem; align-content: start; padding: 1.5rem 1.5rem 1.6rem; }
.preset__name { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.preset__name h3 { font-weight: 400; font-size: var(--text-2xl); letter-spacing: -0.025em; }
.preset__for { font-size: var(--text-xs); color: var(--grey-2); text-align: right; }
.preset__swatches { display: flex; gap: 0.4rem; }
.preset__swatches span { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.preset__type { font-size: var(--text-sm); color: var(--grey); }
.preset__type b { font-weight: 500; color: var(--white); }
.preset__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; margin-top: 0.25rem; font-size: var(--text-sm); }
.preset__links a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; color: var(--white); border-bottom: 1px solid var(--edge-2); }
.preset__links a:hover { border-bottom-color: currentColor; }
.preset__links .soon { color: var(--grey-2); }

/* showcase */
.showcase { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.showcase__item { grid-column: span 2; display: grid; gap: 0.75rem; margin: 0; }
.showcase__item--wide { grid-column: span 3; }
.showcase__frame { border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; background: var(--glass); }
.showcase__frame img { display: block; width: 100%; height: auto; }
/* A capture of a whole page is taller than any sensible card. It keeps its full width and is cut
   off at the bottom, and the cut is faded out so it reads as a page continuing rather than an image
   ending. The fade is a mask on the frame, not a coloured overlay, so it works on the paper and the
   dark sections alike and needs no colour to be kept in step. */
.is-tall { max-height: 20rem; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent); }
.showcase__item--wide .is-tall { max-height: 26rem; }
.showcase figcaption { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-size: var(--text-sm); }
.showcase figcaption b { font-weight: 500; }
.showcase figcaption span { color: var(--grey-2); text-align: right; }

/* ---------- talk (dark closing) ---------- */
.talk { padding-block: clamp(6rem, 4rem + 7vw, 11rem); text-align: center; }
.talk-inner { display: grid; justify-items: center; gap: 1.25rem; max-width: 52rem; margin-inline: auto; }
.talk h2 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); max-width: 18ch; }
.talk .sub { text-align: center; }
.talk-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; margin-top: 0.5rem; }

/* ---------- search ---------- */
.search { position: relative; max-width: 40rem; }
.search__field { display: flex; align-items: center; gap: 0.75rem; background: #fff; color: #000; border: 1px solid #fff; border-radius: var(--pill); padding: 0 0.6rem 0 1.25rem; min-height: 3.5rem; color-scheme: light; }
.search__field .icon { color: #6b6b66; }
.search__input { flex: 1; border: 0; background: none; font: inherit; color: #000; min-height: 3rem; outline: none; min-width: 0; }
.search__input::placeholder { color: #6b6b66; }
.search__kbd { font: 0.75rem / 1 var(--mono); border: 1px solid #cfcec9; border-radius: 6px; padding: 0.35rem 0.55rem; color: #6b6b66; display: none; margin-right: 0.5rem; }
@media (min-width: 900px) { .search__kbd { display: inline-block; } }
.search__results { position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem); z-index: 15; background: #fff; color: #000; border: 1px solid #e6e5e1; border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55); max-height: 24rem; overflow: auto; display: none; color-scheme: light; }
.search__results[data-open] { display: block; }
.search__results ul { list-style: none; margin: 0; padding: 0.5rem; }
.search__results a { display: grid; gap: 0.15rem; padding: 0.7rem 0.85rem; border-radius: 10px; }
.search__results a:hover, .search__results a[aria-selected="true"] { background: #f6f6f4; }
.search__results b { font-weight: 500; }
.search__results small { color: #6b6b66; font-size: var(--text-sm); }
.search__results mark { background: #fff1e6; color: #b54f00; padding: 0 0.1em; border-radius: 2px; }
.search__empty { padding: 1rem; color: #6b6b66; }
.search--compact .search__field { min-height: 2.9rem; border-color: var(--edge-2); border-radius: 10px; padding-left: 0.9rem; }
.search--compact .search__input { min-height: 2.6rem; font-size: var(--text-sm); }
.paper .search__field { border-color: #000; }
.paper .search--compact .search__field { border-color: var(--edge-2); }
.paper .search--compact .search__field:focus-within { border-color: #000; }

/* ---------- docs home ---------- */
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.cat { padding-right: 3.5rem; min-height: 11rem; }
.cat h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); letter-spacing: -0.02em; }
.start { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 2rem 5rem; align-items: start; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--edge); }
.start h2 { font-size: var(--text-2xl); letter-spacing: -0.025em; }
.start .muted { margin-top: 0.5rem; }
.start ol { list-style: none; padding: 0; margin: 0; counter-reset: s; border-top: 1px solid var(--edge-2); }
.start li { counter-increment: s; border-bottom: 1px solid var(--edge); }
.start a { display: grid; grid-template-columns: 3.25rem 1fr auto; gap: 1rem; align-items: baseline; padding: 1.1rem 0; }
.start a::before { content: counter(s, decimal-leading-zero); font: 300 var(--text-xl) / 1 var(--font-display); letter-spacing: -0.03em; color: var(--or-ink); }
.start a b { font: 400 var(--text-lg) / 1.3 var(--font-display); letter-spacing: -0.015em; border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.start a:hover b { border-bottom-color: currentColor; }
.start a span { color: var(--grey-2); font-size: var(--text-sm); text-align: right; }

/* ---------- docs layout ---------- */
.doc { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 4rem; }
.side { position: sticky; top: calc(var(--bar) + 0.5rem); align-self: start; max-height: calc(100vh - var(--bar) - 1.5rem); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.side details { border: 0; }
.side summary { display: none; }
.side__inner { display: grid; gap: 1.25rem; }
.side__cats { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--edge-2); }
.side__cats > li { border-bottom: 1px solid var(--edge); }
.side__cat { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0; font-size: var(--text-sm); color: var(--grey); min-height: 2.75rem; transition: color var(--dur) var(--ease); }
.side__cat:hover { color: var(--white); }
.side__cat[aria-current="true"] { color: var(--white); font-weight: 500; }
.side__cat .muted { font: 500 var(--text-xs) / 1 var(--mono); }
.side__arts { list-style: none; padding: 0.25rem 0 0.75rem 0.85rem; margin: 0; border-left: 2px solid var(--edge); }
.side__arts a { display: flex; align-items: center; min-height: 2.5rem; padding: 0.35rem 0.6rem; font-size: var(--text-sm); color: var(--grey); border-radius: 6px; line-height: 1.35; }
.side__arts a:hover { color: var(--white); }
.side__arts a[aria-current="page"] { color: var(--or-ink); font-weight: 500; background: #fff1e6; }
.side__foot { display: grid; gap: 0; font-size: var(--text-sm); }
.side__foot a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0; color: var(--grey); min-height: 2.75rem; }
.side__foot a:hover { color: var(--white); }
.content { min-width: 0; max-width: 68ch; }
.content > h1 { font-size: var(--text-3xl); }
@media (max-width: 960px) {
  .doc { grid-template-columns: 1fr; gap: 2rem; }
  .side { position: static; max-height: none; overflow: visible; }
  .side details { border: 1px solid var(--edge-2); border-radius: 12px; background: var(--glass); }
  .side summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 0.875rem 1rem; font-weight: 500; list-style: none; min-height: 2.75rem; }
  .side summary::-webkit-details-marker { display: none; }
  .side summary::after { content: "+"; font-weight: 400; color: var(--grey-2); font-size: 1.25rem; }
  .side details[open] summary::after { content: "–"; }
  .side__inner { padding: 0 1rem 1rem; }
}

/* ---------- article ---------- */
.article__lede { color: var(--grey); font-size: var(--text-lg); line-height: 1.55; max-width: 56ch; }
.article__body > * + * { margin-top: 1.1rem; }
.article__body h2 { font-size: var(--text-2xl); letter-spacing: -0.025em; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--edge); }
.article__body h3 { font-size: var(--text-xl); margin-top: 2.25rem; }
.article__body h4 { margin-top: 1.75rem; }
.article__body p, .article__body li { line-height: 1.65; }
.article__body ul { list-style: none; padding-left: 0; }
.article__body ul > li { position: relative; padding-left: 1.35rem; }
.article__body ul > li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; background: var(--or-ink); }
.article__body ol { list-style: none; counter-reset: o; padding-left: 0; }
.article__body ol > li { counter-increment: o; position: relative; padding-left: 2.25rem; }
.article__body ol > li::before { content: counter(o, decimal-leading-zero); position: absolute; left: 0; top: 0.1em; font: 500 var(--text-sm) / 1.5 var(--font-display); letter-spacing: -0.02em; color: var(--or-ink); }
.article__body li + li { margin-top: 0.5rem; }
.article__body li > ul, .article__body li > ol { margin-top: 0.5rem; }
.article__body strong { font-weight: 600; }
.article__body code { overflow-wrap: anywhere; }
.article__body a { color: var(--white); border-bottom: 1px solid var(--edge-2); transition: border-color var(--dur) var(--ease); }
.article__body a:hover { border-bottom-color: currentColor; }
.article__body blockquote { margin: 1.5rem 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--or-ink); color: var(--grey); max-width: 60ch; }
.article__body blockquote p { font: 400 var(--text-lg) / 1.5 var(--font-display); letter-spacing: -0.01em; color: var(--white); }
.article__body img { border-radius: 10px; }
.table-wrap { overflow-x: auto; margin-top: 1.25rem; -webkit-overflow-scrolling: touch; }
.table-wrap table { margin: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; vertical-align: top; padding: 0.8rem 1.5rem 0.8rem 0; border-bottom: 1px solid var(--edge); }
th { font: 600 0.72rem / 1.7 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); border-bottom: 1px solid var(--edge-2); white-space: nowrap; }
td:first-child { color: var(--white); font-weight: 500; }
td { color: var(--grey); }

.shot { margin: 1.75rem 0 0; display: grid; gap: 0.6rem; }
.shot__frame { border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; background: var(--glass); }
.shot__frame img { width: 100%; height: auto; border-radius: 0; }
/* A full-page capture used to sit in a 34rem box with its own scrollbar, which reads as a cut-off
   image and swallows the page scroll on a trackpad. It is faded out at the cut instead, and the
   figcaption already carries the link to the full-size file. */
.shot--page .shot__frame { max-height: 34rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent); }
.shot--mobile .shot__frame { max-width: 22rem; }
.shot--mobile.shot--page .shot__frame { max-height: 36rem; }
.shot figcaption { font-size: var(--text-sm); color: var(--grey-2); display: flex; justify-content: space-between; gap: 1rem; }
.shot figcaption a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.5rem; color: var(--white); border-bottom: 1px solid var(--edge-2); }
/* a theme editor capture is a wide shot of the whole editor, so it reads at the article's full width */
.shot--editor .shot__frame { background: #fff; }
.shot--svg .shot__frame { padding: 1rem; background: #fff; }
.shot--svg svg { width: 100%; height: auto; }

/* an editor screenshot that is still to come reads as a note, not a hole */
.pending, .editor-note { margin: 1.75rem 0 0; padding: 1rem 1.25rem 1rem 1.5rem; border-left: 2px solid var(--or-ink); background: var(--glass); border-radius: 0 12px 12px 0; display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; color: var(--grey); font-size: var(--text-sm); line-height: 1.5; }
.pending .icon, .editor-note .icon { color: var(--or-ink); margin-top: 0.15rem; width: 1.1rem; height: 1.1rem; }
.pending b, .editor-note b { color: var(--white); font-weight: 500; display: block; margin-bottom: 0.15rem; }

/* settings sheets, rendered from the schema */
.sheet { margin-top: 1.75rem; border: 1px solid var(--edge-2); border-radius: 14px; background: #fff; overflow: hidden; }
.sheet__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; padding: 1rem 1.4rem; background: var(--glass); border-bottom: 1px solid var(--edge); }
.sheet__head p { margin: 0; font: 500 var(--text-lg) / 1.3 var(--font-display); letter-spacing: -0.015em; }
.sheet__head span { font: 600 0.72rem / 1.7 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); }
.sheet__group { padding: 1rem 1.4rem 0.25rem; font: 600 0.72rem / 1.7 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); }
.sheet__note { padding: 0.25rem 1.4rem 0.75rem; font-size: var(--text-sm); color: var(--grey-2); }
.sheet__rows { list-style: none; margin: 0; padding: 0; }
.sheet__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem 1.25rem; padding: 0.85rem 1.4rem; border-top: 1px solid var(--edge); }
.sheet__row > span { min-width: 0; overflow-wrap: anywhere; }
.sheet__label { font-weight: 500; }
.sheet__ctl { color: var(--grey); font-size: var(--text-sm); }
.sheet__ctl b { font-weight: 500; color: var(--white); }
.sheet__info { font-size: var(--text-sm); color: var(--grey-2); }
@media (min-width: 640px) { .sheet__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .sheet__info { grid-column: 2; } }

.related { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid var(--edge-2); }
.related h2 { font-size: var(--text-xl); margin-bottom: 0.75rem; }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { border-bottom: 1px solid var(--edge); }
.related a { display: grid; gap: 0.15rem; padding: 0.85rem 0; }
.related a b { font: 400 var(--text-lg) / 1.3 var(--font-display); letter-spacing: -0.015em; }
.related a span { color: var(--grey-2); font-size: var(--text-sm); }
.related a:hover b { text-decoration: underline; text-decoration-color: var(--or-ink); text-underline-offset: 0.18em; }
nav.related ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
nav.related li { border: 1px solid var(--edge); border-radius: 12px; }
nav.related li:only-child { grid-column: 2; }
nav.related a { padding: 1rem 1.25rem; }
nav.related li:last-child:not(:only-child) a, nav.related li:only-child a { text-align: right; }
nav.related a span { font: 600 0.72rem / 1.7 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }
.feedback { margin-top: 2.5rem; padding: 1.5rem 1.75rem; background: var(--glass); border: 1px solid var(--edge); border-radius: 16px; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; }
.feedback p { font: 400 var(--text-lg) / 1.3 var(--font-display); letter-spacing: -0.015em; }
.feedback__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.feedback__thanks { color: var(--ok); font-weight: 500; font-family: var(--font-body); font-size: var(--text-base); }

.cat-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--edge-2); }
.cat-list li { border-bottom: 1px solid var(--edge); }
.cat-list a { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; padding: 1.25rem 0; min-height: 2.75rem; }
.cat-list a b { font: 400 var(--text-xl) / 1.25 var(--font-display); letter-spacing: -0.02em; border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.cat-list a:hover b { border-bottom-color: currentColor; }
.cat-list a span { color: var(--grey); font-size: var(--text-sm); display: block; margin-top: 0.3rem; max-width: 56ch; }
.cat-list a i { font: 300 var(--text-xl) / 1.3 var(--font-display); letter-spacing: -0.03em; color: var(--or-ink); font-style: normal; }
.changelog .article__body h2 { display: flex; align-items: baseline; gap: 1rem; border-top: 0; padding-top: 0; }
.changelog .article__body h2::after { content: ""; flex: 1; border-top: 1px solid var(--edge); }

/* ---------- support: the contact split ---------- */
.support { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro form" "more form"; align-items: start; margin-top: calc(-1 * var(--bar)); }
.support__l, .support__more { display: grid; align-content: start; gap: 1.5rem; padding: 0 clamp(2rem, 5vw, 6rem) 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.support__l { grid-area: intro; padding-top: clamp(8rem, 6rem + 6vw, 12rem); }
.support__l h1 { max-width: 14ch; }
.support__more { grid-area: more; padding-top: 2.5rem; padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.support__r { grid-area: form; align-self: stretch; background: #fff; color: #000; padding: clamp(8rem, 6rem + 6vw, 12rem) max(var(--gutter), calc((100vw - var(--wrap)) / 2)) clamp(3rem, 6vw, 5.5rem) clamp(2rem, 5vw, 6rem); color-scheme: light; --white: #000; --grey: #5c5c57; --grey-2: #6b6b66; --edge: #e6e5e1; --edge-2: #cfcec9; --glass: #f6f6f4; --ok: #1f6b3a; --danger: #b3261e; }
.support__card { position: sticky; top: calc(var(--bar) + 1.5rem); width: 100%; max-width: 600px; margin: 0 0 0 auto; background: #fff; border: 1px solid #e6e5e1; border-radius: 16px; padding: clamp(1.25rem, 2.5vw, 2rem); display: grid; gap: 1.25rem; }
.support__card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e6e5e1; }
.support__card-head .eyebrow { color: #000; }
.support__card-head .when { margin: 0; font: 600 0.72rem / 1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #6b6b66; }
.steps { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; }
.steps li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0 1rem; padding: 1.35rem 0; border-top: 1px solid var(--edge); }
.steps li:last-child { border-bottom: 1px solid var(--edge); }
.steps .num { font: 400 var(--text-2xl) / 1 var(--font-display); letter-spacing: -0.03em; color: var(--or); }
.steps .steps__t { margin: 0 0 0.35rem; font: 500 var(--text-lg) / 1.3 var(--font-display); letter-spacing: -0.01em; color: var(--white); }
.steps p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--grey); }
.steps p a { display: inline-block; color: var(--white); border-bottom: 1px solid var(--edge-2); padding-block: 0.75rem; margin-block: -0.75rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.5rem; margin: 0; }
.kv dt { font: 600 0.72rem / 1.7 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); }
.kv dd { color: var(--grey); font-size: var(--text-sm); line-height: 1.55; }
.kv dd b { color: var(--white); font-weight: 500; }
.support__more h2 { font-size: var(--text-xl); letter-spacing: -0.02em; }
.support__more .fine { max-width: 46ch; }
.support__l .fine a { display: inline-flex; align-items: center; min-height: 44px; }
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 0.45rem; }
.field label { font: 500 var(--text-sm) / 1.3 var(--font-body); color: #000; }
.field small { color: #6b6b66; font-size: var(--text-xs); line-height: 1.45; }
.field input, .field select, .field textarea { display: block; width: 100%; min-height: 52px; padding: 0.85rem 1rem; font: 400 1rem / 1.4 var(--font-body); color: #000; background: #fff; border: 1px solid #cfcec9; border-radius: 10px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #9c9b95; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #000; box-shadow: 0 0 0 3px rgba(255, 119, 0, 0.28); }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.field input[type="file"] { padding: 0.9rem 1rem; font-size: 0.95rem; color: #4a4a46; background: #fafaf7; border-style: dashed; border-color: #b8b7b1; }
.field input[type="file"]:hover { border-color: #000; }
.field input[type="file"]::file-selector-button { margin: 0 0.9rem 0 0; padding: 0.55rem 1rem; font: 500 0.85rem / 1 var(--font-body); color: #000; background: #fff; border: 1px solid #000; border-radius: 999px; cursor: pointer; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 0.75rem; }
.field--check input { width: 1.5rem; height: 1.5rem; min-height: 0; padding: 0; margin-top: 0.15rem; accent-color: #ff7700; border-radius: 4px; }
.field--check label { font-weight: 400; font-size: var(--text-sm); line-height: 1.5; }
.field--hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.req { color: #b54f00; }
.form .btn { width: 100%; }
.form__foot { color: #6b6b66; font-size: var(--text-xs); line-height: 1.5; }
.notice { padding: 1rem 1.25rem; border-radius: 12px; border: 1px solid #e6e5e1; background: #f6f6f4; display: none; font-size: var(--text-sm); }
.notice[data-show] { display: block; }
.notice--ok { border-color: #1f6b3a; }
.notice--error { border-color: #b3261e; }
.notice b { display: block; margin-bottom: 0.25rem; font-weight: 500; }
@media (max-width: 1023px) {
  .support { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "more"; }
  .support__l, .support__more { padding-left: var(--gutter); padding-right: var(--gutter); }
  .support__l { padding-bottom: 2.5rem; }
  .support__r { padding: 2rem var(--gutter); border-radius: var(--sheet) var(--sheet) 0 0; }
  .support__card { position: static; max-width: 640px; margin: 0 auto; }
  .support__more { padding-top: 3rem; }
}
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } .support__card-head { flex-direction: column; gap: 0.35rem; } }

/* ---------- 404 ---------- */
.nf { display: grid; gap: 1.25rem; justify-items: start; max-width: 44rem; }
.nf .search { width: 100%; margin-top: 0.5rem; }
.nf__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }

/* ---------- footer ---------- */
.foot { padding: clamp(4rem, 3rem + 4vw, 6rem) 0 2rem; border-top: 1px solid var(--edge); margin-top: var(--pad); }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem 3rem; }
.foot__brand { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.foot__brand .top__brand { min-height: 2.75rem; padding: 0; }
.foot__lockup .brand-solarium { height: 1.75rem; }
.foot__lockup .brand-aso { height: 1.3rem; }
.foot__brand p { color: var(--grey); font-size: var(--text-sm); max-width: 36ch; line-height: 1.55; }
.foot__col .foot__h { font: 600 0.72rem / 1.7 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 0.75rem; }
.foot__col ul { list-style: none; display: grid; }
.foot__col a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #d6d6d2; font-size: var(--text-sm); transition: color var(--dur) var(--ease); }
.foot__col a:hover { color: var(--white); }
.foot__bottom { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; justify-content: space-between; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--edge); font-size: var(--text-xs); color: var(--grey-2); }
.foot__bottom p { max-width: 70ch; line-height: 1.55; }
.foot__bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0; }
.foot__bottom li { display: flex; align-items: center; }
.foot__bottom li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--edge-2); margin: 0 0.7rem; }
.foot__bottom a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.2rem; color: var(--grey-2); }
.foot__bottom a:hover { color: var(--white); }

/* ---------- motion: the opener rises once ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.anim .rise { animation: rise 800ms var(--ease-expo) both; animation-delay: calc(var(--r, 0) * 90ms); }

/* ---------- landing v2 (2026-09-21): proof row, marks, compare lanes, proof strip, dark feature, flow, faq, agency ---------- */
.opener-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.opener-proof a { display: grid; gap: 0.35rem; align-content: start; min-height: 100%; padding: 1.1rem 1.25rem 1.2rem; border-radius: 14px; background: var(--glass); border: 1px solid var(--edge); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.opener-proof a:hover { border-color: var(--edge-2); background: var(--glass-2); }
.opener-proof b { font: 500 var(--text-base) / 1.3 var(--font-display); letter-spacing: -0.015em; }
.opener-proof span { font-size: var(--text-xs); color: var(--grey); line-height: 1.5; }
.marks { border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.marks-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 3rem; align-items: center; padding-block: 2rem; }
.marks-lede { margin: 0; font: 400 var(--text-lg) / 1.3 var(--font-display); letter-spacing: -0.015em; color: var(--white); max-width: 30ch; }
.marks-row { display: flex; align-items: center; gap: 2.5rem; justify-self: end; }
.mark { display: inline-flex; align-items: center; height: 2rem; }
.mark svg { height: 100%; width: auto; }
.mark--zenoti { height: 1.5rem; }
.mark--zenoti svg path { fill: #fff; }
.marks-chips { grid-column: 1 / -1; margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--edge); }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; margin-top: 3rem; }
.compare .lane h3 { font-weight: 400; font-size: var(--text-2xl); letter-spacing: -0.025em; display: flex; align-items: center; gap: 0.6rem; }
.compare .lane h3::before { content: ""; width: 0.6rem; height: 0.6rem; background: var(--edge-2); }
.compare .lane.ours h3::before { background: var(--or); }
.compare .lane ul { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.compare .lane li { position: relative; padding: 1rem 0 1rem 1.5rem; border-bottom: 1px solid var(--edge); color: var(--grey); line-height: 1.55; }
.compare .lane li::before { content: ""; position: absolute; left: 0; top: 1.7rem; width: 6px; height: 6px; background: var(--edge-2); }
.compare .lane.ours li { color: var(--white); }
.compare .lane.ours li::before { background: var(--or-ink); }
.proofstrip { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem 4rem; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--edge-2); }
.proofstrip-l { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.proofstrip-text { margin: 0; font: 400 var(--text-xl) / 1.4 var(--font-display); letter-spacing: -0.015em; max-width: 34ch; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--edge); }
.stat { display: block; min-width: 0; padding: 1.5rem 1rem 1.5rem 0; border-left: 1px solid var(--edge); padding-left: 1rem; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-n { display: block; margin: 0 0 0.6rem; font: 300 clamp(1.9rem, 1rem + 2vw, 2.6rem) / 0.95 var(--font-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-l { display: block; margin: 0; font-size: var(--text-sm); color: var(--grey); line-height: 1.4; }
/* The one real client quote on the site. It used to be pinned to the second column under the stats,
   separated by a hairline, with a quote mark glued to the first word - which read as a sidebar note
   rather than the proof it is. It takes the full width of the strip now, as a bounded panel, and the
   quote mark is set as a mark of its own in the display face beside the text instead of inline with
   it. */
.proofquote {
  grid-column: 1 / -1; margin: 2.5rem auto 0;
  /* Sized to its own measure and centred, rather than stretched across the strip: a panel the full
     1248px with the text stopping at 46ch leaves two fifths of it empty. */
  max-width: 46rem;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--card);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(0.85rem, 0.5rem + 1.2vw, 1.5rem); align-items: start;
}
/* The glyph carries its own side bearing and sits high on the line, so it is pulled up and left to
   align optically with the first line of the quote rather than mathematically. */
.proofquote::before {
  content: "\201C"; grid-row: 1 / span 2; align-self: start;
  font: 400 clamp(2.75rem, 1.8rem + 3.4vw, 4.25rem) / 0.72 var(--font-display);
  color: var(--or-ink); margin-top: -0.06em; margin-left: -0.06em;
}
/* Fluid rather than --text-xl flat: 22px display type in a padded box on a 375 screen gave ten
   lines of about twenty characters, which reads as a wall of fragments instead of a quote. */
.proofquote p { margin: 0; font: 400 clamp(1.125rem, 1rem + 0.6vw, 1.375rem) / 1.5 var(--font-display); letter-spacing: -0.015em; }
.proofquote cite { grid-column: 2; margin-top: 1.1rem; font-style: normal; font-size: var(--text-sm); color: var(--grey-2); }
.feature { padding-block: var(--pad); }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 5rem; align-items: center; }
.feature-copy { display: grid; gap: 1.25rem; }
.feature-copy h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.375rem); letter-spacing: -0.035em; line-height: 1.02; max-width: 16ch; }
.feature-copy .eyebrow .count { margin-left: 0.5rem; color: var(--or); }
.feature-points { margin: 0.75rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--edge); }
.feature-points li { padding: 1.1rem 0; border-bottom: 1px solid var(--edge); }
.feature-points h3 { font-weight: 400; font-size: var(--text-lg); letter-spacing: -0.015em; }
.feature-points h3 a { border-bottom: 1px solid var(--edge-2); transition: border-color var(--dur) var(--ease); }
.feature-points h3 a:hover { border-bottom-color: var(--white); }
.feature-points p { margin: 0.4rem 0 0; font-size: var(--text-sm); color: var(--grey); line-height: 1.55; max-width: 52ch; }
.feature-media { position: relative; display: grid; gap: 1rem; }
.feature-shot { margin: 0; border-radius: 14px; overflow: clip; border: 1px solid var(--edge-2); background: #111; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.feature-shot img { display: block; width: 100%; height: auto; }
.feature-shot--2 { width: 70%; margin-left: auto; margin-top: -3rem; }
.setup { padding-block: var(--pad); border-top: 1px solid var(--edge); }
.setup .ch-head .eyebrow .count { color: var(--or); }
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.5rem; margin: 3rem 0 0; padding: 0; list-style: none; counter-reset: f; }
.flow li { position: relative; display: grid; gap: 0.5rem; align-content: start; padding: 1.5rem 0 0; border-top: 1px solid var(--edge-2); }
.flow li::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 1px; background: var(--or); }
.flow .num { font-size: 2rem; color: var(--or); }
.flow h3 { font-weight: 400; font-size: var(--text-lg); letter-spacing: -0.015em; }
.flow h3 a { border-bottom: 1px solid var(--edge-2); transition: border-color var(--dur) var(--ease); }
.flow h3 a:hover { border-bottom-color: var(--white); }
.flow p { font-size: var(--text-sm); color: var(--grey); line-height: 1.5; }
.faq-list { margin-top: 2.5rem; border-top: 1px solid var(--edge-2); }
.faq-list details { border-bottom: 1px solid var(--edge); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.4rem 0; font: 400 var(--text-xl) / 1.25 var(--font-display); letter-spacing: -0.02em; cursor: pointer; list-style: none; min-height: 44px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 0.9rem; height: 0.9rem; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform var(--dur) var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 1.6rem; max-width: 64ch; color: var(--grey); line-height: 1.6; }
.faq-list details p a { display: inline-block; color: var(--white); border-bottom: 1px solid var(--edge-2); white-space: nowrap; padding-block: 0.75rem; margin-block: -0.75rem; }
.agency { border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.agency-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 2rem 4rem; align-items: center; padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.agency h2 { margin-top: 1rem; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); letter-spacing: -0.03em; max-width: 20ch; }
.agency .sub { margin-top: 1rem; font-size: var(--text-base); max-width: 60ch; }
.agency-ctas { display: grid; gap: 0.75rem; justify-items: start; justify-self: end; }
@media (max-width: 1100px) {
  .opener-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare { gap: 0 3rem; }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}
@media (max-width: 860px) {
  .marks-inner { grid-template-columns: 1fr; }
  .marks-row { justify-self: start; }
  .compare { grid-template-columns: 1fr; gap: 2rem 0; }
  .proofstrip { grid-template-columns: 1fr; }
  .proofquote { grid-column: auto; }
  .feature-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .agency-inner { grid-template-columns: 1fr; }
  .agency-ctas { justify-self: start; grid-auto-flow: column; }
}
@media (max-width: 640px) {
  .opener-proof { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; border-top: 0; }
  .stat { border-left: 0; padding: 1rem 0; border-top: 1px solid var(--edge); }
  .flow { grid-template-columns: 1fr; gap: 1.5rem 0; }
  .feature-shot--2 { width: 85%; margin-top: -2rem; }
  .agency-ctas { grid-auto-flow: row; }
  .faq-list summary { font-size: var(--text-lg); }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .cards, .cats, .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preset, .preset:nth-child(4), .preset:nth-child(5) { grid-column: auto; }
  .showcase__item, .showcase__item--wide { grid-column: span 3; }
  .ch-rows > li.has-shot, .ch-rows > li.has-card { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .ch-rows > li.has-shot .ch-shot, .ch-rows > li.has-card .ch-card { grid-column: 2; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .opener-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ch-head { grid-template-columns: 1fr; align-items: start; }
  .ch-aside { justify-items: start; justify-self: start; text-align: left; }
  .ch-rows > li { grid-template-columns: 4rem minmax(0, 1fr); }
  .ch-rows > li .rowlink { grid-column: 2; padding-top: 0.5rem; }
  .ch-grid { grid-template-columns: 1fr; gap: 0; }
  .start { grid-template-columns: 1fr; gap: 1.5rem; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --sheet: 20px; }
  .cards, .cats, .presets { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: 1fr; }
  .showcase__item, .showcase__item--wide { grid-column: auto; }
  .ch-rows > li, .ch-rows > li.has-shot, .ch-rows > li.has-card { grid-template-columns: 1fr; gap: 0.5rem 0; }
  .ch-rows > li .rowlink, .ch-rows > li.has-shot .rowlink, .ch-rows > li.has-shot .ch-shot, .ch-rows > li.has-card .rowlink, .ch-rows > li.has-card .ch-card { grid-column: 1; }
  .ch-card { margin-top: 0.75rem; }
  .ch-rows .num { font-size: 2rem; }
  .ch-grid > li { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; }
  .figures { grid-template-columns: 1fr; gap: 1.75rem; }
  .figures dt { max-width: none; }
  .start a { grid-template-columns: 2.5rem 1fr; }
  .start a span { grid-column: 2; text-align: left; }
  .cat-list a { grid-template-columns: 2.5rem 1fr; }
  nav.related ul { grid-template-columns: 1fr; }
  nav.related li:only-child { grid-column: auto; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- sticky section nav ---------- */
/* In flow directly after the hero; position: sticky pins it. Visible without script — JS only adds
   .is-stuck and aria-current. */
.snav { position: sticky; top: calc(var(--bar) + 0.9rem); z-index: 18; display: flex; justify-content: center; padding-inline: var(--gutter); margin-top: calc(-1 * clamp(1rem, 0.5rem + 1vw, 1.75rem)); }
.snav__bar { display: flex; align-items: center; gap: 0.35rem; max-width: 100%; padding: 0.35rem; border-radius: var(--pill); background: var(--black); border: 1px solid var(--edge); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.snav__list { display: flex; gap: 0.1rem; margin: 0; padding: 0; list-style: none; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.snav__list::-webkit-scrollbar { display: none; }
.snav__list li { flex: none; scroll-snap-align: start; }
.snav__list a { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding-inline: 1rem; border-radius: var(--pill); font: 500 var(--text-sm) / 1 var(--font-body); color: var(--grey-2); text-decoration: none; white-space: nowrap; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.snav__list a:hover { color: var(--white); background: var(--glass-2); }
.snav__list a[aria-current="true"] { color: var(--white); }
.snav__list a[aria-current="true"]::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--or); }
.snav__cta { display: none; flex: none; min-height: 44px; padding-inline: 1.25rem; font-size: var(--text-sm); }
.snav__bar.is-stuck { background: rgba(0, 0, 0, 0.86); border-color: var(--edge-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@supports (container-type: scroll-state) {
  .snav { container-type: scroll-state; }
  @container scroll-state(stuck: top) { .snav__bar { background: rgba(0, 0, 0, 0.86); border-color: var(--edge-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }
}
@media (max-width: 640px) {
  .snav { top: calc(var(--bar) + 0.6rem); }
  .snav__cta { display: inline-flex; }
  .snav__list { mask-image: linear-gradient(90deg, #000 86%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 1.25rem; }
  .snav__list a { padding-inline: 0.8rem; }
  .snav__cta .long { display: none; }
}
@media (min-width: 641px) { .snav__cta .short { display: none; } }

/* ---------- hero: the media panel bleeds off the right edge ---------- */
@media (min-width: 1000px) {
  .opener--split .opener-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2.5rem 4rem; }
  .opener--split .opener-shot { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--wrap)) / 2)); border-radius: 14px 0 0 14px; border-right: 0; }
  .opener--split .opener-shot img { width: 118%; max-width: none; }
}

/* ---------- mechanism cards ---------- */
/* The card SVGs carry their own palette. A .paper sheet remaps --white and --grey for dark-on-light
   text, so the true values are restored here or the cards invert. */
.ch-card { margin: 0; align-self: start; border-radius: var(--card); overflow: clip; }
.ch-card svg { --white: #ffffff; --black: #000000; --or: #ff7700; --peach: #ffe0c8; --grey-1: #8a8a85; --grey-2: #5c5c57; display: block; width: 100%; height: auto; }

/* The updates card leads the terms block; the promises sit beside it on wide screens. */
.included-grid { display: grid; gap: 2rem 4rem; align-items: start; }
.included-grid .ch-card { max-width: 30rem; }
@media (min-width: 1100px) { .included-grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); } .included-grid .ch-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- section inventory ---------- */
.inv { margin-top: 2.5rem; border-top: 1px solid var(--edge-2); }
.inv__group { border-bottom: 1px solid var(--edge); }
.inv__group summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.25rem 1.5rem; padding: 1.35rem 0; cursor: pointer; list-style: none; min-height: 44px; }
.inv__group summary::-webkit-details-marker { display: none; }
.inv__title { font: 400 var(--text-xl) / 1.25 var(--font-display); letter-spacing: -0.02em; }
.inv__note { grid-column: 1; font-size: var(--text-sm); color: var(--grey); }
.inv__count { grid-row: 1; grid-column: 2; font: 500 var(--text-sm) / 1 var(--mono); color: var(--grey-2); }
.inv__count::after { content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; margin-left: 0.9rem; vertical-align: -0.05em; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform var(--dur) var(--ease); }
.inv__group[open] .inv__count::after { transform: rotate(45deg); }
.inv__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.15rem 2rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.inv__list li { min-width: 0; }
.inv__list a, .inv__list > li > b { display: block; padding: 0.55rem 0; min-height: 44px; }
.inv__list b { display: block; font-weight: 500; font-size: var(--text-base); }
.inv__list > li > b { color: var(--grey); font-weight: 400; }
.inv__list a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.inv__list a { position: relative; }
.inv__list a b { border-bottom: 1px solid var(--edge-2); display: inline-block; }
.inv__list a:hover b { border-bottom-color: currentColor; }

/* ---------- grouped questions ---------- */
.faq-set + .faq-set { margin-top: 2.25rem; }
.faq-set__h { margin: 0 0 0.35rem; font: 600 0.75rem / 1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-2); }

/* ---------- print ---------- */
@media print {
  :root { --bar: 0px; }
  html, body { background: #fff; color: #000; }
  .top, .foot, .side, .feedback, nav.related, .skip, .opener::before, .opener-meta button, .snav { display: none !important; }
  .inv__list { display: grid !important; }
  .opener { margin-top: 0; padding-top: 1rem; color: #000; }
  .opener .sub, .crumbs, .eyebrow { color: #444; }
  .paper { border-radius: 0; }
  .doc { grid-template-columns: 1fr; }
  .content { max-width: none; }
  a { color: inherit; border-bottom: 0 !important; }
  .shot__frame, .sheet { break-inside: avoid; }
}