/* Sheet Zip site. One stylesheet, one class system.
   A PDF workspace: dark blue slate chrome around pale paper. Structure comes
   from bordered panes with a labelled head strip, one shared 1120px column on
   every page, and a mono utility face for the things a workspace prints:
   counts, ranges, statuses and labels. Headings use the local display cut of
   the system face; nothing is fetched. */

:root {
  color-scheme: dark;
  --ink: #0d141d;
  --chrome: #111a25;
  --pane: #172231;
  --pane-2: #1e2b3c;
  --line: #2b3b4e;
  --line-soft: #223040;
  --text: #e7edf4;
  --text-dim: #98a9bd;
  --blue: #3d7dff;
  --blue-deep: #2b63e0;
  --cyan: #22d3ee;
  --sky: #8ecbff;
  --paper: #f5f7fa;
  --paper-2: #e8edf4;
  --paper-line: #cdd7e3;
  --paper-ink: #17202b;
  --paper-dim: #5f6f82;
  --ok: #5ccf8e;
  --warn: #f3bd62;
  --bad: #ff8a7d;
  --wrap: 1120px;
  --gutter: 24px;
  --radius: 12px;
  --radius-sm: 8px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--sky); }
a:hover { color: var(--cyan); }

/* The hidden attribute always wins, whatever display a class sets. Several
   controls ship hidden until the script that drives them has initialised. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue-deep);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
}
.skip:focus { left: 0; }

/* One shared column. Header, sections and footer all use it, on every page.
   Narrower reading measures are set on the text elements themselves, never on
   the container, so page edges line up from page to page. */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- type system ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -.024em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 { margin: 0 0 18px; font-size: clamp(38px, 5vw, 60px); font-weight: 700; letter-spacing: -.032em; line-height: 1.04; }
h2 { margin: 0 0 16px; font-size: clamp(26px, 3vw, 36px); font-weight: 700; }
h3 { margin: 0 0 8px; font-size: 18.5px; font-weight: 650; }

.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font: 700 16px/1.35 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sky);
}
.kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
}

.center .kicker { justify-content: center; }

.hl { color: var(--sky); }

.lede {
  margin: 0 0 30px;
  max-width: 60ch;
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--text-dim);
}
.lede.after { margin: 26px 0 0; }
.center .lede { margin-left: auto; margin-right: auto; }

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(13, 20, 29, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 80px;
}

/* The logo is pale type on a transparent ground and needs the dark chrome
   behind it. Header and footer stay dark for that reason. */
.brand { display: inline-flex; align-items: center; }
.brand img { height: 56px; width: auto; }
.site-head .brand { position: relative; isolation: isolate; }
.site-head .brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: linear-gradient(100deg, rgba(61, 125, 255, .6), rgba(34, 211, 238, .35));
  filter: blur(15px);
  opacity: .35;
  animation: brand-icon-glow 4s ease-in-out infinite alternate;
  transition: opacity .25s ease;
  pointer-events: none;
}
.site-head .brand:is(:hover, :focus-visible)::before { animation: none; opacity: .95; }
.site-head .brand { gap: 10px; flex-shrink: 0; text-decoration: none; }
.site-head .brand .brand-icon { width: 52px; height: 52px; position: relative; z-index: 1; }
.brand-wordmark { display: block; overflow: hidden; width: 160px; padding: 10px 0; }
.brand-wordmark > span {
  display: block;
  color: var(--text);
  font: 500 32px/1.15 var(--font-display);
  letter-spacing: -.045em;
  white-space: nowrap;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .4s ease;
}
.brand-wordmark b { color: var(--sky); font-weight: 800; }
@keyframes brand-icon-glow {
  from { opacity: .25; }
  to { opacity: .65; }
}
@media (hover: hover) and (pointer: fine) {
  .site-head .brand:hover .brand-wordmark > span { transform: translateX(-105%); opacity: .1; }
}
@media (max-width: 720px) {
  .site-head .brand .brand-icon { width: 46px; height: 46px; }
  .site-head .brand::before { width: 46px; height: 46px; }
  .brand-wordmark { width: 140px; }
  .brand-wordmark > span { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-wordmark > span { animation: none; transition: none; }
  .site-head .brand::before { animation: none; }
  .site-head .brand:hover .brand-wordmark > span { transform: none; opacity: 1; }
}

/* A small pause control shared by the illustrated file journeys. */
.motion-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--pane);
  color: var(--sky);
  cursor: pointer;
}
.motion-toggle:hover { border-color: var(--sky); }
.motion-toggle i { width: 8px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.motion-toggle[aria-pressed="true"] i { width: 0; height: 0; border: 5px solid transparent; border-right: 0; border-left: 8px solid currentColor; margin-left: 2px; }
@media (forced-colors: active) {
  .site-head .brand::before { display: none; }
}

.nav ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}
.nav a:hover { color: var(--text); background: var(--pane-2); }
.nav a[aria-current="page"] { color: var(--text); background: var(--pane); box-shadow: inset 0 0 0 1px var(--line); }
.nav .nav-demo {
  position: relative;
  font-weight: 800;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.nav .nav-demo::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  opacity: 0;
  transform: scaleX(.4);
  transition: transform .2s ease, opacity .2s ease;
}
.nav .nav-demo:is(:hover, :focus-visible) {
  background: rgba(30, 43, 60, .8);
  color: var(--sky);
  box-shadow: inset 0 0 0 1px #385d85, 0 0 20px rgba(61, 125, 255, .18);
}
.nav .nav-demo:is(:hover, :focus-visible) span {
  filter: drop-shadow(0 2px 5px rgba(61, 125, 255, .5));
}
.nav .nav-demo:is(:hover, :focus-visible)::after { opacity: 1; transform: scaleX(1); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .nav .nav-demo:is(:hover, :focus-visible) span {
    background: linear-gradient(110deg, #8ecbff, #e5f6ff 48%, #67def0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav .nav-demo, .nav .nav-demo::after { transition: none; }
}
@media (forced-colors: active) {
  .nav .nav-demo:is(:hover, :focus-visible) span { background: none; color: LinkText; filter: none; }
  .nav .nav-demo::after { background: LinkText; }
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  margin: 3px 0;
  background: var(--text);
  border-radius: 2px;
}

/* ---------- bands ---------- */

.band { padding: 80px 0; border-top: 1px solid var(--line-soft); }
.band.alt { background: var(--chrome); }
.band.tight { padding: 52px 0; }
.band.center { text-align: center; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: 80px 0 72px;
  overflow: hidden;
}
/* A faint dot grid, the way a layout canvas is ruled, fading out downward. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(142, 203, 255, .16) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
  pointer-events: none;
}
.hero > .wrap { position: relative; }
.hero.center { text-align: center; }
.hero.center .cta-row { justify-content: center; }

.hero-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }

.tick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: var(--text-dim);
}
.tick-row li { position: relative; padding-left: 22px; }
.tick-row li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: filter .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn-lg { min-height: 54px; padding: 0 30px; font-size: 17px; }

.btn-primary {
  background: var(--blue-deep);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 22px rgba(61,125,255,.3);
}
.btn-primary:hover {
  background: #316adc;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 28px rgba(61,125,255,.38);
}

.btn-ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--text-dim); color: var(--text); transform: translateY(-1px); }

.btn:disabled { opacity: .55; cursor: default; transform: none; filter: none; }

/* ---------- interactive preview (home hero) ----------
   Dark chrome around a paper stage. Three sample sheets are placed by the
   root's data-mode and data-state. The script only flips those attributes
   and the text slots; every arrangement below is pure CSS. Any state other
   than "ready" is the finished arrangement, so the script's choice of name
   for the finished state does not matter to this file. */

.pdf-demo {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--pane);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(142, 203, 255, .05);
}

.demo-head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 20, 29, .5);
}
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 4px 9px 4px 7px;
  border: 1px solid rgba(142, 203, 255, .3);
  border-radius: 999px;
  font: 600 11.5px/1.4 var(--font-mono);
  letter-spacing: .04em;
  color: var(--sky);
}
.demo-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}
.demo-head h2 { margin: 0 0 4px; font-size: 20px; }
.demo-head p:last-child { margin: 0; min-height: 2lh; font-size: 14.5px; color: var(--text-dim); }

.demo-stage {
  --spread: clamp(82px, 24vw, 134px);
  position: relative;
  height: 250px;
  background:
    radial-gradient(circle, rgba(142, 203, 255, .12) 1px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(180deg, #131d29, #0f1822);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.demo-sheet {
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  --sx: 1;
  --sy: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(78px, 24%, 104px);
  aspect-ratio: 17 / 22;
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(var(--sx), var(--sy));
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
/* Folded corner and a few lines of ruled text. */
.demo-sheet::before {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  width: 22px;
  height: 22px;
  background: linear-gradient(225deg, #0f1822 50%, var(--cyan) 50%);
  border-bottom-left-radius: 4px;
}
.demo-sheet::after {
  content: attr(data-label);
  position: absolute;
  left: 12%;
  right: 12%;
  top: 22%;
  bottom: 9%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  font: 600 11px/1 var(--font-mono);
  color: var(--paper-dim);
  background:
    linear-gradient(var(--blue) 0 0) 0 0 / 60% 3px no-repeat,
    linear-gradient(var(--paper-line) 0 0) 0 18% / 100% 2px no-repeat,
    linear-gradient(var(--paper-line) 0 0) 0 30% / 100% 2px no-repeat,
    linear-gradient(var(--paper-line) 0 0) 0 42% / 72% 2px no-repeat;
}

/* Merge: three documents side by side become one stack. */
.pdf-demo[data-mode="merge"][data-state="ready"] .demo-sheet:nth-child(1) { --x: calc(0px - var(--spread)); }
.pdf-demo[data-mode="merge"][data-state="ready"] .demo-sheet:nth-child(3) { --x: var(--spread); }
.pdf-demo[data-mode="merge"]:not([data-state="ready"]) .demo-sheet:nth-child(1) { --x: -12px; --y: -12px; }
.pdf-demo[data-mode="merge"]:not([data-state="ready"]) .demo-sheet:nth-child(3) { --x: 12px; --y: 12px; }

/* Split: one stack separates into three pages. */
.pdf-demo[data-mode="split"][data-state="ready"] .demo-sheet:nth-child(1) { --x: -12px; --y: -12px; }
.pdf-demo[data-mode="split"][data-state="ready"] .demo-sheet:nth-child(3) { --x: 12px; --y: 12px; }
.pdf-demo[data-mode="split"]:not([data-state="ready"]) .demo-sheet:nth-child(1) { --x: calc(0px - var(--spread)); }
.pdf-demo[data-mode="split"]:not([data-state="ready"]) .demo-sheet:nth-child(3) { --x: var(--spread); }

/* Resize: mixed page dimensions settle into three matching sheets. */
.pdf-demo[data-mode="resize"] .demo-sheet { --y: -10px; }
.pdf-demo[data-mode="resize"] .demo-sheet:nth-child(1) { --x: calc(0px - var(--spread)); }
.pdf-demo[data-mode="resize"] .demo-sheet:nth-child(3) { --x: var(--spread); }
.pdf-demo[data-mode="resize"][data-state="ready"] .demo-sheet:nth-child(1) { --sx: .7; --sy: .7; }
.pdf-demo[data-mode="resize"][data-state="ready"] .demo-sheet:nth-child(2) { --sx: 1.1; --sy: .65; }
.pdf-demo[data-mode="resize"][data-state="ready"] .demo-sheet:nth-child(3) { --sx: .75; --sy: 1.1; }
.demo-resize-label {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  text-align: center;
  font: 600 12px/1.5 var(--font-mono);
  color: var(--sky);
  opacity: 0;
  transition: opacity .4s ease;
}
.pdf-demo[data-mode="resize"][data-state="action"] .demo-resize-label { opacity: 1; }

/* Compress changes the file weight while the paper keeps its dimensions. */
.pdf-demo[data-mode="compress"] .demo-sheet { --y: -25px; --sx: .78; --sy: .78; }
.pdf-demo[data-mode="compress"] .demo-sheet:nth-child(1),
.pdf-demo[data-mode="compress"] .demo-sheet:nth-child(3) { visibility: hidden; }
.demo-compression {
  display: none;
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
}
.pdf-demo[data-mode="compress"] .demo-compression { display: block; }
.demo-size-labels { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.demo-size-labels span { color: var(--text-dim); font: 12px/1.5 var(--font-mono); }
.demo-size-labels b { display: block; font-weight: 500; }
.demo-size-labels strong { color: var(--ok); font: 650 24px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-size-track { height: 7px; border-radius: 4px; overflow: hidden; background: var(--line); }
.demo-size-track span { display: block; height: 100%; background: var(--ok); transform: scaleX(var(--remaining, 1)); transform-origin: left; border-radius: inherit; }

.demo-controls {
  display: grid;
  gap: 12px;
  padding: 14px 18px;
}
.demo-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.demo-actions .btn { min-height: 42px; padding: 8px 12px; font-size: 14.5px; }

/* Keep room for two lines before and after a sample runs. */
.demo-result {
  min-height: calc(2lh + 24px);
  margin: 0 18px 14px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: rgba(92, 207, 142, .1);
  border: 1px solid rgba(92, 207, 142, .3);
  font-size: 14.5px;
  color: var(--text);
}
.pdf-demo[data-state="ready"] .demo-result {
  background: transparent;
  border-color: var(--line);
  color: var(--text-dim);
}
.demo-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.demo-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  font: 600 12px/1.5 var(--font-mono);
  letter-spacing: .04em;
  color: var(--ok);
}
.demo-foot span:last-child { color: var(--text-dim); }

/* ---------- small pressed buttons: filters, modes, uninstall toggles ---------- */

.toggle-row, .filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
.toggle-row { margin-bottom: 22px; }

.toggle-row button, .filter-group button, .demo-modes button {
  min-height: 40px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font: 600 14.5px var(--font);
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.toggle-row button:hover, .filter-group button:hover, .demo-modes button:hover { color: var(--text); border-color: var(--text-dim); }
.toggle-row button[aria-pressed="true"], .filter-group button[aria-pressed="true"], .demo-modes button[aria-pressed="true"] {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: #fff;
}
.demo-modes button { min-height: 36px; padding: 0 13px; font-size: 13.5px; }

.panel { display: none; }
.panel.open { display: block; }
.panel[data-panel].open {
  padding: 22px 24px;
  background: var(--pane);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel h2 { font-size: 22px; }

/* ---------- panes: the shared surface for grouped content ---------- */

.deflist, .faq, .facts, .rows, .compare-wrap, .toc, .empty-state {
  background: var(--pane);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.deflist, .faq, .facts, .rows, .compare-wrap { overflow: hidden; }

/* ---------- definition rows (tools catalog, contact, uninstalled) ---------- */

.deflist > div {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 34px;
  padding: 26px 24px;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .22s ease;
}
.deflist > div:last-child { border-bottom: 0; }
.deflist > div:hover { background: rgba(61, 125, 255, .04); }
.deflist > div[id] { scroll-margin-top: 100px; }
.deflist h3 { margin: 0; display: flex; align-items: center; gap: 12px; }
.deflist .t-icon { width: 22px; height: 22px; flex: none; color: var(--sky); }
.deflist p { margin: 0 0 10px; color: var(--text-dim); max-width: 70ch; }
.deflist p:last-child { margin-bottom: 0; }
.deflist .note { font-size: 14.5px; color: var(--warn); }
.deflist .good { font-size: 14.5px; color: var(--ok); }

.dcol { display: flex; flex-direction: column; gap: 16px; }

.diagram {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink);
  padding: 10px;
}

/* ---------- home tool grid ----------
   The tool entries, arranged in a grid: the workspace's own
   groups in its own order. Each tile links to its catalog entry. */

.deflist.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--line-soft);
  gap: 1px;
}
.deflist.tool-grid > div {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto 1fr;
  gap: 8px 14px;
  padding: 22px 22px 24px;
  border-bottom: 0;
  background: var(--pane);
}
.deflist.tool-grid > div:hover, .deflist.tool-grid > div:focus-within { background: var(--pane-2); }
.deflist.tool-grid h3 { grid-column: 1 / -1; gap: 14px; }
.deflist.tool-grid .t-icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 9px;
  background: rgba(61, 125, 255, .14);
}
.deflist.tool-grid h3 a {
  color: var(--text);
  font-size: 17px;
  font-weight: 650;
  text-decoration: none;
}
.deflist.tool-grid > div:hover h3 a { color: var(--sky); }
/* Stretch the heading link over the whole tile. */
.deflist.tool-grid h3 a::after { content: ""; position: absolute; inset: 0; }
.deflist.tool-grid h3 a:focus-visible { outline: none; }
.deflist.tool-grid > div:focus-within { box-shadow: inset 0 0 0 2px var(--cyan); }
.deflist.tool-grid > div > div { grid-column: 2; }
.deflist.tool-grid p { font-size: 14.5px; }

.zip-home-heading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: end;
  margin: 52px 0 22px;
}
.zip-home-heading h3 { margin: 0; font-size: clamp(24px, 3vw, 32px); }
.zip-home-heading > p { margin: 0; max-width: 48ch; color: var(--text-dim); }
.deflist.tool-grid.zip-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- catalog and FAQ controls ---------- */

.tools-page .jump { gap: 12px; }
.tools-page .jump a { min-height: 46px; padding: 10px 18px; }
.deflist.tool-catalog { margin-top: 40px; }
.deflist.tool-catalog > div { padding: clamp(28px, 4vw, 40px); gap: clamp(24px, 4vw, 48px); }
.tool-catalog .dcol { gap: 24px; }
.tool-catalog p { line-height: 1.75; }
.tool-catalog p:not(:last-child) { margin-bottom: 16px; }

.catalog-controls, .faq-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 18px;
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--pane);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.catalog-controls .field, .faq-controls .field { flex: 1 1 260px; margin: 0; }
.catalog-controls { margin-top: 32px; padding: clamp(24px, 3vw, 32px); gap: 24px; }
.catalog-controls .filter-group { gap: 10px; }
.faq-controls { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; background: transparent; }

.catalog-controls .field, .faq-controls .field { position: relative; }
/* Magnifier drawn with borders so no glyph or asset is needed. */
.catalog-controls .field::before, .faq-controls .field::before {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 17px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--text-dim);
  border-radius: 50%;
  pointer-events: none;
}
.catalog-controls .field::after, .faq-controls .field::after {
  content: "";
  position: absolute;
  left: 25px;
  bottom: 13px;
  width: 6px;
  height: 2px;
  background: var(--text-dim);
  transform: rotate(45deg);
  pointer-events: none;
}

.result-count {
  margin: 0;
  align-self: center;
  font: 600 13px/1.5 var(--font-mono);
  letter-spacing: .04em;
  color: var(--text-dim);
  white-space: nowrap;
}

.empty-state {
  margin-top: 22px;
  padding: 30px 24px;
  text-align: center;
  border-style: dashed;
}
.empty-state p { margin: 0 0 16px; color: var(--text-dim); }

/* ---------- steps and lists ---------- */

.rows { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.rows > li {
  counter-increment: r;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  padding: 24px;
  border-bottom: 1px solid var(--line-soft);
}
.rows > li:last-child { border-bottom: 0; }
.rows > li::before {
  content: counter(r);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(61, 125, 255, .14);
  color: var(--sky);
  font: 600 14px var(--font-mono);
}
.rows h3 { margin-bottom: 6px; }
.rows p { margin: 0; color: var(--text-dim); max-width: 68ch; }

/* The home how-it-works sequence runs left to right at desktop width. */
.rows.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--line-soft);
  gap: 1px;
}
.rows.steps > li {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 24px 24px 26px;
  border-bottom: 0;
  background: var(--pane);
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

.facts { list-style: none; margin: 0; padding: 0; }
.facts li { padding: 16px 22px; border-bottom: 1px solid var(--line-soft); }
.facts li:last-child { border-bottom: 0; }
.facts b { display: block; font-size: 16px; margin-bottom: 3px; }
.facts span { color: var(--text-dim); font-size: 15px; }

.plain-steps { counter-reset: s; list-style: none; margin: 0; padding: 0; }
.plain-steps li {
  counter-increment: s;
  position: relative;
  padding: 0 0 16px 44px;
  max-width: 70ch;
  color: var(--text-dim);
}
.plain-steps li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: 1px;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(61, 125, 255, .14);
  color: var(--sky);
  font: 600 13px var(--font-mono);
}

/* ---------- faq: questions and full answers ---------- */

.reading-page { --gutter: clamp(28px, 4vw, 40px); }
.reading-page .hero { padding: 64px 0 32px; }
.reading-page .hero h1 { max-width: 27ch; font-size: clamp(32px, 4vw, 48px); line-height: 1.15; }
.reading-page .hero .lede { max-width: 65ch; margin-bottom: 0; font-size: 18px; line-height: 1.7; }
.reading-page .faq-content, .reading-page .reading-content { padding: 32px 0 72px; }
.faq-layout, .reading-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; }
.faq-sidebar, .reading-layout > .reading-nav { position: sticky; top: 104px; }
.reading-nav { display: grid; gap: 12px; align-content: start; }
.reading-nav p { margin: 0 0 4px; color: var(--text); font-weight: 650; }
.reading-nav a { color: var(--text-dim); font-size: 14.5px; text-decoration: none; text-underline-offset: 4px; }
.reading-nav a:hover { color: var(--sky); text-decoration: underline; }
.faq-sidebar .reading-nav { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.faq-results .faq { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.faq-item {
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.faq-item:first-child { padding-top: 0; }
.faq-item:target h2 { color: var(--sky); }
.faq-item h2 { margin: 0 0 14px; font-size: 23px; line-height: 1.4; font-weight: 650; letter-spacing: -.01em; }
.faq-answer p { margin: 0 0 14px; color: var(--text-dim); max-width: 70ch; font-size: 17px; line-height: 1.75; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------- prose ---------- */

.prose h2 { margin: 44px 0 14px; font-size: 24px; scroll-margin-top: 100px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 26px 0 8px; font-size: 17.5px; }
.prose p, .prose li { color: var(--text-dim); max-width: 72ch; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose strong { color: var(--text); font-weight: 650; }
.prose .updated {
  margin: 0 0 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font: 13.5px/1.5 var(--font-mono);
  color: var(--text-dim);
}
.about-copy section { margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.about-copy section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.about-copy h2, .about-copy h2:first-child { margin: 0 0 18px; font-size: 26px; line-height: 1.35; }
.about-copy p { margin-bottom: 18px; font-size: 17px; line-height: 1.8; }
.about-copy p:last-child { margin-bottom: 0; }
.how-copy p, .how-copy li { font-size: 17px; line-height: 1.8; }
.how-copy h2 { line-height: 1.35; padding-top: 32px; border-top: 1px solid var(--line); }
.how-copy h2:first-child { padding-top: 0; border-top: 0; }
.how-nav h2 { margin: 0; font: 650 16px/1.5 var(--font); }
.how-nav ol { display: grid; gap: 14px; list-style: none; padding: 0; margin: 4px 0 0; }
.file-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 36px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
.file-flow-step { position: relative; padding: 30px; background: var(--pane); }
.file-flow-step h2 { margin: 22px 0 10px; font-size: 20px; line-height: 1.3; }
.file-flow-step p { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.7; }
.flow-paper { display: block; width: 38px; height: 48px; border: 2px solid var(--sky); border-radius: 4px; background: repeating-linear-gradient(to bottom, transparent 0 6px, var(--sky) 6px 8px, transparent 8px 13px) 8px 8px / 18px 27px no-repeat; }
.flow-workspace { width: 64px; border-color: var(--cyan); background-color: rgba(34, 211, 238, .06); background-position: center; }
.flow-saved { border-color: var(--ok); background-color: rgba(92, 207, 142, .06); }

/* ---------- forms ---------- */

.form { margin-top: 28px; max-width: 620px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 7px; font-size: 14.5px; font-weight: 600; }
.field input, .field textarea {
  width: 100%;
  padding: 12px 15px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 15.5px/1.5 var(--font);
}
.field textarea { min-height: 170px; resize: vertical; }
.field input.search-field { padding-left: 40px; }
.field input:focus, .field textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(61, 125, 255, .25); }
.field input::placeholder { color: var(--text-dim); opacity: .7; }

/* Inline error the contact script inserts after the submit button. */
.form-error {
  margin: 14px 0 0;
  padding: 11px 14px;
  border: 1px solid rgba(255, 138, 125, .4);
  border-radius: var(--radius-sm);
  background: rgba(255, 138, 125, .1);
  color: var(--bad);
  font-size: 14.5px;
}

.overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 8, 12, .8);
  z-index: 80;
}
.overlay.open { display: flex; }
.overlay-inner {
  max-width: 440px;
  padding: 34px;
  text-align: center;
  background: var(--pane);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.overlay-inner h2 { font-size: 24px; }
.overlay-inner p { color: var(--text-dim); }

/* ---------- comparison ---------- */

.compare-wrap { overflow-x: auto; }

.compare { width: 100%; min-width: 540px; border-collapse: collapse; }

.compare th, .compare td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15.5px;
}
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }

.compare thead th {
  background: rgba(13, 20, 29, .5);
  font: 600 12px/1.5 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.compare thead th.us { color: var(--sky); }
.compare tbody th { font-weight: 600; color: var(--text); width: 42%; }
.compare td { color: var(--text-dim); }
.compare .us { background: rgba(61, 125, 255, .07); }
.compare .yes { color: var(--ok); font-weight: 650; }
.compare .no { color: var(--bad); font-weight: 650; }

/* ---------- jump links ---------- */

.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.jump a:hover { border-color: var(--blue); color: var(--sky); background: rgba(61, 125, 255, .08); }

/* ---------- legal layout with sticky section nav ---------- */

.legal { display: grid; grid-template-columns: 236px 1fr; gap: 58px; align-items: start; }

.toc { position: sticky; top: 100px; padding: 18px 18px 14px; }

.toc h2 {
  margin: 0 0 12px;
  font: 600 12px/1.5 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}

.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.toc li { counter-increment: t; margin-bottom: 2px; }

.toc a {
  display: block;
  position: relative;
  padding: 5px 0 5px 26px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  border-radius: 5px;
  transition: color .16s ease;
}
.toc a::before {
  content: counter(t);
  position: absolute;
  left: 0;
  opacity: .6;
  font: 600 12px/1.6 var(--font-mono);
}
.toc a:hover { color: var(--text); }
.toc a.active { color: var(--sky); }
.toc a.active::before { opacity: 1; color: var(--sky); }

/* ---------- footer ---------- */

.site-foot { border-top: 1px solid var(--line); background: var(--chrome); padding: 64px 0 34px; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.foot-brand img { height: 70px; width: auto; margin-bottom: 20px; }
.foot-brand p { margin: 0; max-width: 34ch; color: var(--text-dim); font-size: 14.5px; }
.foot-col h2 {
  margin: 0 0 14px;
  font: 600 12px/1.5 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 10px; }
.foot-col a { color: var(--text-dim); font-size: 14.5px; text-decoration: none; transition: color .16s ease; }
.foot-col a:hover { color: var(--sky); }
.foot-col .footer-demo {
  position: relative;
  display: inline-block;
  font-weight: 800;
}
.footer-demo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 2px 10px rgba(34, 211, 238, .4);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.footer-demo span { transition: filter .22s ease; }
.footer-demo:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.footer-demo:is(:hover, :focus-visible) span { filter: drop-shadow(0 0 8px rgba(61, 125, 255, .7)); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .footer-demo:is(:hover, :focus-visible) span {
    background: linear-gradient(110deg, #8ecbff, #e5f6ff 48%, #67def0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
@media (forced-colors: active) {
  .footer-demo:is(:hover, :focus-visible) span { background: none; color: LinkText; filter: none; }
  .footer-demo::after { background: LinkText; box-shadow: none; }
}
.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-top: 26px;
}
.foot-base p { margin: 0; font-size: 13.5px; color: var(--text-dim); }

/* ---------- motion ---------- */

/* Progressive enhancement: the content is visible by default and is only
   hidden for the animation when scripts are actually running. If main.js
   fails to load, is blocked, or errors, every section still renders. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .faq-layout, .reading-layout { grid-template-columns: 1fr; gap: 36px; }
  .faq-sidebar { position: static; }
  .reading-nav { display: none; }
  .hero-inner, .split { grid-template-columns: 1fr; gap: 40px; }
  .deflist.tool-grid, .rows.steps { grid-template-columns: 1fr 1fr; }
  .legal { grid-template-columns: 1fr; gap: 28px; }
  .toc { position: static; }
  .toc ol { columns: 2; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .deflist > div { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 720px) {
  .file-flow { grid-template-columns: 1fr; }
  .file-flow-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 22px; padding: 24px; }
  .file-flow-step .flow-paper { grid-row: 1 / 3; align-self: center; }
  .file-flow-step h2 { margin: 0 0 8px; }
  .file-flow-step p { grid-column: 2; }
  .band { padding: 56px 0; }
  .band.tight { padding: 40px 0; }
  .hero { padding: 56px 0 52px; }
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    display: none;
    background: var(--chrome);
    border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 16px;
  }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 2px; }
  .nav a { padding: 13px 12px; font-size: 16px; }
  .head-inner { position: relative; }
  .deflist.tool-grid, .rows.steps { grid-template-columns: 1fr; }
  .zip-home-heading, .deflist.tool-grid.zip-tool-grid { grid-template-columns: 1fr; }
  .zip-home-heading { gap: 14px; margin-top: 40px; }
  .deflist > div { padding: 22px 18px; }
  .demo-stage { height: 210px; }
  .demo-head, .demo-controls { padding-left: 16px; padding-right: 16px; }
  .toc ol { columns: 1; }
  .diagram { max-width: 100%; }
  .foot-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

:is(.home-try, .demo-button) {
  border-color: #385d85;
  background: rgba(30, 43, 60, .55);
  box-shadow: 0 1px 0 rgba(142, 203, 255, .1) inset, 0 8px 22px rgba(0, 0, 0, .2);
}
:is(.home-try, .demo-button) span {
  font-weight: 800;
  color: var(--sky);
  filter: drop-shadow(0 2px 5px rgba(61, 125, 255, .5));
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  :is(.home-try, .demo-button) span {
    background: linear-gradient(110deg, #8ecbff 0%, #e5f6ff 48%, #67def0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
:is(.home-try, .demo-button):hover { border-color: var(--sky); box-shadow: 0 0 20px rgba(61, 125, 255, .18); }
:is(.home-try, .thanks-demo) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
:is(.home-try, .thanks-demo) span { position: relative; z-index: 1; }
:is(.home-try, .thanks-demo)::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% 0;
  width: 65%;
  background: linear-gradient(90deg, transparent, rgba(142, 203, 255, .22), rgba(103, 222, 240, .3), transparent);
  transform: translateX(-180%) skewX(-20deg);
  pointer-events: none;
}
:is(.home-try, .thanks-demo):is(:hover, :focus-visible) {
  transform: translateY(-3px);
  border-color: var(--cyan);
  background-color: #203550;
  box-shadow: inset 0 1px 0 rgba(229, 246, 255, .25), 0 0 0 1px rgba(103, 222, 240, .2), 0 0 24px rgba(34, 211, 238, .25), 0 12px 32px rgba(61, 125, 255, .3);
}
:is(.home-try, .thanks-demo):is(:hover, :focus-visible)::before { animation: demo-sweep .65s ease-out both; }
:is(.home-try, .thanks-demo):active { transform: translateY(0); }
@keyframes demo-sweep {
  to { transform: translateX(260%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.home-try, .thanks-demo):is(:hover, :focus-visible) { transform: none; }
  :is(.home-try, .thanks-demo)::before { display: none; }
  .footer-demo::after, .footer-demo span { transition: none; }
}
@media (forced-colors: active) {
  :is(.home-try, .demo-button) span { background: none; color: ButtonText; filter: none; }
  :is(.home-try, .thanks-demo)::before { display: none; }
}

:is(.home-page .btn-primary, .contact-desk-view .submit-btn) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(110deg, #255bcc, #315ee3 48%, #195888);
  background-size: 200% 100%;
  transition: background-position .35s ease, transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
:is(.home-page .btn-primary, .contact-desk-view .submit-btn)::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% 0;
  width: 65%;
  background: linear-gradient(90deg, transparent, rgba(229, 246, 255, .18), transparent);
  transform: translateX(-180%) skewX(-20deg);
  pointer-events: none;
}
:is(.home-page .btn-primary, .contact-desk-view .submit-btn):is(:hover, :focus-visible) {
  background-position: 100% 50%;
  border-color: var(--cyan);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(229, 246, 255, .4), 0 0 0 1px rgba(34, 211, 238, .2), 0 0 26px rgba(61, 125, 255, .45), 0 12px 30px rgba(34, 211, 238, .18);
}
:is(.home-page .btn-primary, .contact-desk-view .submit-btn):is(:hover, :focus-visible)::before { animation: demo-sweep .65s ease-out both; }
:is(.home-page .btn-primary, .contact-desk-view .submit-btn):active { transform: translateY(0); }
.home-page .btn-primary.ctabtn::before {
  background: linear-gradient(90deg, transparent, rgba(229, 246, 255, .16), transparent);
  animation: install-shine 2s linear infinite;
}
@keyframes install-shine {
  0% { transform: translate3d(-120%, 0, 0) skewX(-20deg); }
  80%, 100% { transform: translate3d(180%, 0, 0) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.home-page .btn-primary, .contact-desk-view .submit-btn):is(:hover, :focus-visible) { transform: none; }
  :is(.home-page .btn-primary, .contact-desk-view .submit-btn)::before { display: none; }
}
@media (forced-colors: active) {
  :is(.home-page .btn-primary, .contact-desk-view .submit-btn)::before { display: none; }
}
.contact-desk-view .submit-btn:disabled { transform: none; box-shadow: none; cursor: default; }
.contact-desk-view .submit-btn:disabled::before { display: none; }