/* Vendored from Google Fonts by scripts/fetch-fonts.js - do not edit by hand.
   Plus Jakarta Sans and Inter are licensed under the SIL Open Font License 1.1. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   ClickGear Labs - site stylesheet
   Ported from the Claude Design document's inline styles. Every colour and
   radius from the design is a custom property here, so a light theme or a
   rebrand is a token swap rather than a rewrite.
   The @font-face block is prepended at build time from src/assets/fonts.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg: #0a0a11;
  --bg-alt: #0e0e17;
  --surface: #14141e;
  --surface-hover: #1a1a25;
  --surface-raised: #1a1a28;

  /* Borders */
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.13);
  --line-hover: rgba(255, 255, 255, 0.28);

  /* Brand */
  --violet: #7c5cff;
  --violet-hover: #6b4bf5;
  --violet-light: #9b85ff;
  --violet-pale: #c3b4ff;
  --violet-soft: rgba(124, 92, 255, 0.13);
  --violet-edge: rgba(124, 92, 255, 0.28);
  --violet-glow: rgba(124, 92, 255, 0.2);

  /* Text */
  --text: #ffffff;
  --text-soft: #c9c9d6;
  --text-muted: #a2a2b4;
  --text-faint: #6c6c80;
  --positive: #4ade9b;

  /* Type */
  --display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shape */
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-pill: 30px;

  --shell: 1160px;
  --gutter: clamp(22px, 4vw, 36px);
  --shadow-violet: 0 8px 26px -10px rgba(124, 92, 255, 0.85);
}

/* --------------------------------------------------------------- base ---- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Keep anchored calculators clear of the sticky nav. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  letter-spacing: -0.028em;
  line-height: 1.14;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--violet-light);
  text-decoration: none;
}

a:hover {
  color: var(--violet-pale);
}

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

::selection {
  background: rgba(124, 92, 255, 0.35);
}

input,
textarea,
select,
button {
  font-family: inherit;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--violet) !important;
}

:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--violet);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

/* Visible to screen readers only — used where a control's purpose is obvious
   sighted but its label still has to exist. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.shell--narrow {
  max-width: 880px;
}

.section {
  padding: 70px 0;
}

.section-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 40px;
}

.muted {
  color: var(--text-muted);
}

.label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--violet-light);
}

.grad {
  background: linear-gradient(96deg, var(--violet-light), var(--violet-pale));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.link-accent {
  font-size: 14.5px;
  color: var(--violet-light);
}

/* ------------------------------------------------------------ nav bar ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 10, 17, 0.78);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18.5px;
  letter-spacing: -0.035em;
  color: var(--text);
}

.brand:hover {
  color: var(--text);
}

.brand__mark {
  flex: none;
  color: #fff;
}

.brand__accent {
  color: var(--violet-light);
}

.gear {
  transform-origin: 50% 50%;
  animation: gear-spin 30s linear infinite;
}

@keyframes gear-spin {
  to {
    transform: rotate(360deg);
  }
}

.nav__links {
  display: flex;
  gap: 30px;
  font-size: 14.5px;
}

.nav__link {
  color: var(--text-muted);
  transition: color 0.18s ease;
}

.nav__link:hover,
.nav__link--active {
  color: var(--text);
}

/* ----------------------------------------------------------- mega menu --- */

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav__caret {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.nav__caret::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid var(--text-muted);
  border-bottom: 1.6px solid var(--text-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.nav__item:hover .nav__caret::after,
.nav__item--open .nav__caret::after {
  border-color: var(--text);
}

.nav__item--open .nav__caret::after {
  transform: translateY(1px) rotate(-135deg);
}

.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  margin-top: 14px;
  width: min(1020px, calc(100vw - 40px));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.85);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}

/* Bridges the gap between the trigger and the panel, so moving the pointer
   down to the menu does not close it on the way. */
.mega::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.nav__item--mega:hover .mega,
.nav__item--mega:focus-within .mega,
.nav__item--open .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Rail of categories on the left, the tools of one category on the right.
   `position: relative` is the anchor every category panel is inset against. */
.mega__inner {
  position: relative;
  display: grid;
  grid-template-columns: var(--mega-rail) minmax(0, 1fr);
  gap: var(--mega-gap);
}

.mega {
  --mega-rail: 296px;
  --mega-gap: 8px;
  --mega-rail-pad: 12px;
}

/* One column, both groups stacked. It has to be a single column: with two, the
   pointer travelling from a left-hand row to the panel would cross every row of
   the right-hand column and keep re-targeting the panel on the way. */
.mega__rail {
  padding: var(--mega-rail-pad);
  border-radius: var(--r-md);
  background: var(--bg-alt);
}

.mega__group {
  min-width: 0;
}

.mega__group + .mega__group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.mega__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 10px 8px;
  color: inherit;
}

.mega__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.02em;
}

.mega__head:hover .mega__title {
  color: var(--violet-pale);
}

.mega__total {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--violet-light);
  white-space: nowrap;
}

.mega__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mega__cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--text-soft);
  transition: background 0.16s ease, color 0.16s ease;
}

/* The row stays highlighted while its panel is open, so it is obvious which
   category the tools on the right belong to. */
.mega__cat:hover > .mega__cat-link,
.mega__cat:focus-within > .mega__cat-link {
  background: var(--surface-hover);
  color: var(--text);
}

.mega__count {
  font-size: 11.5px;
  color: var(--text-faint);
}

.mega__panel {
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--bg-alt);
}

/* Each category's tools sit in the same cell as the intro panel and cover it.
   The left inset clears the rail; `background` is what hides what is beneath. */
/* Deliberately not `overflow: auto` here: the hover bridge below sits outside
   the panel's box, and a scroll container would clip it. The tool list scrolls
   instead, on the rare category long enough to need it. */
.mega__cat > .mega__panel {
  position: absolute;
  inset: 0 0 0 calc(var(--mega-rail) + var(--mega-gap));
  display: none;
  flex-direction: column;
  z-index: 2;
}

.mega__cat:hover > .mega__panel,
.mega__cat:focus-within > .mega__panel {
  display: flex;
}

/* An invisible strip spanning the rail's right padding and the grid gap.
   That strip belongs to neither the row nor the panel, so without it the
   pointer leaves .mega__cat on the way across and the panel closes before it
   can be reached. It lives inside the panel, so it exists only while the panel
   is open, and hovering it keeps the category hovered. */
.mega__cat > .mega__panel::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: calc(var(--mega-gap) + var(--mega-rail-pad));
}

.mega__panel-head {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.mega__panel-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

.mega__panel-all {
  font-size: 12px;
  color: var(--violet-light);
  white-space: nowrap;
}

/* Always two columns: the panel is inset to the rail's height, and the longest
   category (10 tools) only fits inside that in two. `minmax(0, 1fr)` lets a
   long name wrap rather than widen its column past the panel. */
.mega__tools {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 10px;
  align-content: start;
  /* min-height lets it actually shrink inside the flex column rather than
     pushing the panel past the rail. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.mega__tools a {
  display: block;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-soft);
  transition: background 0.16s ease, color 0.16s ease;
}

.mega__tools a:hover {
  background: var(--surface-hover);
  color: var(--text);
}

/* Shown until a category is pointed at. Top-aligned so it starts where a
   category's tools start, rather than floating in the middle of the panel. */
.mega__panel--intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mega__promo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  color: inherit;
  transition: border-color 0.16s ease;
}

.mega__promo:hover {
  border-color: var(--line-strong);
}

.mega__promo-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
}

.mega__promo-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-faint);
}

.mega__promo-total {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--violet-light);
  margin-top: 2px;
}

.mega__all {
  display: block;
  padding: 12px 14px 6px;
  font-size: 13px;
  color: var(--violet-light);
}


.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
}

/* -------------------------------------------------------------- button --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 11px;
  border: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.btn--primary {
  background: var(--violet);
  color: #fff;
  box-shadow: var(--shadow-violet);
}

.btn--primary:hover {
  background: var(--violet-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -10px rgba(124, 92, 255, 1);
}

.btn--ghost {
  border: 1px solid var(--line-strong);
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line-hover);
  color: #fff;
}

.btn--sm {
  font-size: 14.5px;
  padding: 12px 22px;
}

.btn--block {
  width: 100%;
  padding: 11px;
  font-size: 14px;
}

.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------- badge/pill ---- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--violet-pale);
  background: var(--violet-soft);
  border: 1px solid var(--violet-edge);
  padding: 6px 14px;
  border-radius: var(--r-pill);
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet-light);
}

.pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  flex: none;
  white-space: nowrap;
}

.pill--accent,
.pill--live {
  color: var(--violet-light);
  background: var(--violet-soft);
  border: 1px solid var(--violet-edge);
}

.pill--planned {
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.hero-section {
  position: relative;
  overflow: hidden;
  padding: 74px 0 40px;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
}

.glow--top-right {
  width: 620px;
  height: 520px;
  background: var(--violet-glow);
  top: -200px;
  right: -160px;
}

.glow--bottom-left {
  width: 420px;
  height: 380px;
  background: rgba(124, 92, 255, 0.1);
  bottom: -160px;
  left: -180px;
}

.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 60px;
  align-items: center;
}

.hero__title {
  font-size: clamp(36px, 4.7vw, 56px);
  font-weight: 800;
  margin: 22px 0 20px;
}

.hero__sub {
  font-size: 16.5px;
  max-width: 470px;
  margin-bottom: 32px;
  color: var(--text-muted);
}

.stats {
  display: flex;
  gap: 50px;
  margin-top: 46px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.stat b {
  display: block;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.stat small {
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ------------------------------------------------------- phone mockup ---- */

.phone {
  background: linear-gradient(170deg, var(--surface-raised), #101019);
  border: 1px solid var(--line-strong);
  border-radius: 32px;
  padding: 14px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(124, 92, 255, 0.1);
  max-width: 320px;
  margin-left: auto;
  width: 100%;
}

.phone__screen {
  background: var(--bg-alt);
  border-radius: var(--r-2xl);
  padding: 18px 16px;
}

.mock__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.mock__head b {
  font-family: var(--display);
  font-size: 14px;
}

.mock__head small,
.mock__label {
  font-size: 10.5px;
  color: var(--text-faint);
}

.mock__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 11px;
}

.mock__card:last-child {
  margin-bottom: 0;
}

.mock__row {
  font-size: 10.5px;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
}

.mock__up {
  color: var(--positive);
}

.meter {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--violet-light));
  border-radius: 4px;
}

.mock__figure {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  margin-top: 10px;
}

.mock__figure small {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 400;
}

.spark {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 44px;
  margin-top: 8px;
}

.spark__bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: rgba(124, 92, 255, 0.3);
}

.spark__bar--peak {
  background: var(--violet);
}

.mock__recent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 11.5px;
}

.mock__abbr {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--violet-soft);
  color: var(--violet-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--display);
  flex: none;
}

.mock__recent em {
  margin-left: auto;
  font-style: normal;
  color: var(--text-faint);
  font-size: 10.5px;
}

/* --------------------------------------------------------- cards/grid ---- */

.grid {
  display: grid;
  gap: 16px;
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 22px;
}

.card--pad {
  border-radius: var(--r-xl);
  padding: 30px 28px;
}

.card--hover {
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.card--hover:hover {
  border-color: rgba(124, 92, 255, 0.42);
  background: var(--surface-hover);
  transform: translateY(-3px);
}

.card__title {
  font-size: 16px;
  margin-bottom: 8px;
}

.card__heading {
  font-size: 19px;
  margin: 10px 0 8px;
}

.card--pad .card__heading {
  font-size: 22px;
  margin: 0 0 12px;
}

.card__body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.card--hover .card__body:last-child {
  margin-bottom: 0;
}

.icon-tile {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--violet-soft);
  color: var(--violet-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.section-heading {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-heading--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-heading__title {
  font-size: clamp(26px, 3.1vw, 36px);
  margin: 18px 0 14px;
}

.section-heading__sub {
  font-size: 16px;
  color: var(--text-muted);
}

.row-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.row-heading h2,
.row-heading__solo {
  font-size: clamp(22px, 2.6vw, 30px);
}

.row-heading__solo {
  margin-bottom: 26px;
}

.dashed-card {
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--r-xl);
  padding: 36px 30px;
}

.dashed-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.dashed-card p {
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 52ch;
  color: var(--text-muted);
}

/* ------------------------------------------------------------- page hd --- */

.page-header {
  padding: 66px 0 24px;
}

.page-header--sm {
  max-width: 640px;
}

.page-header--md {
  max-width: 780px;
}

.page-header--lg {
  max-width: 820px;
}

.page-header--narrow {
  max-width: 74ch;
}

.page-header__title {
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 800;
  margin: 22px 0 18px;
}

.page-header__intro {
  font-size: 16.5px;
  color: var(--text-muted);
}

/* ----------------------------------------------------------------- cta --- */

.cta {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.16), rgba(124, 92, 255, 0.04)), var(--surface);
  border: 1px solid var(--violet-edge);
  border-radius: var(--r-2xl);
  padding: 56px 40px;
}

.cta--center {
  text-align: center;
}

.cta--center .cta__copy {
  max-width: 640px;
  margin: 0 auto;
}

.cta--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 48px 40px;
}

.cta--split .cta__copy {
  max-width: 46ch;
}

.cta__title {
  font-size: clamp(25px, 3vw, 34px);
  margin: 18px 0 12px;
}

.cta--split .cta__title {
  font-size: clamp(22px, 2.6vw, 30px);
  margin: 0 0 10px;
}

.cta__body {
  color: var(--text-muted);
  margin-bottom: 26px;
}

.cta--split .cta__body {
  margin-bottom: 0;
  font-size: 15px;
}

.cta--center .cta__body {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.cta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cta--center .cta__actions {
  justify-content: center;
}

/* ------------------------------------------------------------ apps pg ---- */

.app-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: hidden;
  scroll-margin-top: 88px;
}

.app-card__head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.app-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 10px 26px -10px rgba(124, 92, 255, 0.9);
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  color: #fff;
}

/* Carrying real artwork: the violet plate and its glow would fight the icon's
   own colours, so both are dropped and the art is clipped to the same radius. */
.app-card__icon--art {
  background: none;
  box-shadow: none;
  overflow: hidden;
}

.app-card__icon--art img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.app-card__id {
  flex: 1;
  min-width: 200px;
}

.app-card__id h2 {
  font-size: 26px;
}

.app-card__id p {
  font-size: 13.5px;
  margin-top: 4px;
  color: var(--text-faint);
}

.app-card__body {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}

.app-card__detail {
  padding: 28px;
  border-right: 1px solid var(--line);
}

.app-card__desc {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 20px;
  color: var(--text-soft);
}

.ticks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ticks li {
  display: flex;
  gap: 12px;
  font-size: 14px;
  color: var(--text);
}

.tick {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--violet-soft);
  color: var(--violet-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex: none;
  margin-top: 2px;
}

.app-card__download {
  padding: 28px;
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.app-card__note {
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 6px;
  color: var(--text-faint);
}

.store-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  transition: all 0.2s ease;
}

.store-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line-hover);
  color: #fff;
}

.store-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.store-btn--disabled:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-strong);
}

.store-btn__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.store-btn__kicker {
  font-size: 10px;
  color: var(--text-muted);
}

.store-btn__name {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
}

/* ----------------------------------------------------------- tools pg ---- */

/* ------------------------------------------------------- catalog filter --- */

.tool-filter {
  margin: 30px 0 26px;
}

.tool-filter input {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: #fff;
  padding: 13px 20px;
  font-size: 15px;
}

.tool-filter input::placeholder {
  color: var(--text-faint);
}

.tool-filter__count {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-faint);
}

.tool-filter__empty {
  padding: 40px 0 60px;
  color: var(--text-muted);
  font-size: 15px;
}

.tool-filter__empty button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.currency {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.currency label {
  font-size: 13px;
  color: var(--text-faint);
}

.currency select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: #fff;
  padding: 9px 12px;
  font-size: 14px;
  min-width: 230px;
}

.calc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  scroll-margin-top: 88px;
}

.calc__head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.calc__head h3 {
  font-size: 20px;
}

.calc__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.calc__inputs {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--line);
}

.calc__results {
  padding: 24px;
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  color: var(--text-muted);
}

.field input,
.field textarea,
.field select {
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: #fff;
  padding: 11px 13px;
  font-size: 15px;
  width: 100%;
}

.field textarea {
  resize: vertical;
}

/* Scoped to tool widgets, not every textarea — the contact form wants ordinary
   prose. Pasted ledger data is columnar, so it only lines up in monospace. */
.calc .field textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.field--wide {
  width: 100%;
}

/* Native date inputs render a dark-on-dark picker icon without this. */
.field input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.55;
  cursor: pointer;
}

.result__primary p {
  font-family: var(--display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  margin-top: 8px;
  color: var(--violet-light);
  overflow-wrap: anywhere;
}

.result__primary .label {
  letter-spacing: 0.06em;
}

.result__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.result__value {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
}

/* ------------------------------------------------------------ catalog ---- */

.catalog {
  padding-bottom: 40px;
}

.catalog__group {
  margin-bottom: 52px;
}

.catalog__group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.catalog__group-head > div {
  flex: 1;
  min-width: 200px;
}

.catalog__group-head h2 {
  font-size: 26px;
}

.catalog__group-head p {
  font-size: 13.5px;
  margin-top: 3px;
  color: var(--text-faint);
}

.catalog__abbr {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--violet-soft);
  color: var(--violet-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
}

.catalog__category {
  margin-bottom: 34px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.catalog__category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.catalog__category-head h3 {
  font-size: 18px;
  color: var(--text-soft);
}

.catalog__category-head span {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.catalog__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.catalog__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 15px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.catalog__name {
  font-size: 14px;
  color: var(--text);
}

.catalog__item--link:hover {
  border-color: rgba(124, 92, 255, 0.42);
  background: var(--surface-hover);
  transform: translateY(-3px);
}

/* ---------------------------------------------------------- tool cards --- */

.tool-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 17px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.tool-card:hover {
  border-color: rgba(124, 92, 255, 0.42);
  background: var(--surface-hover);
  transform: translateY(-3px);
  color: inherit;
}

.tool-card__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.015em;
}

.tool-card:hover .tool-card__name {
  color: var(--violet-pale);
}

.tool-card__lede {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  /* Two lines keeps every card in a row the same height without a fixed one. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.catalog__items--roomy {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  padding-top: 8px;
}

.catalog__category-link,
.catalog__group-link {
  color: inherit;
}

.catalog__category-link:hover h3,
.catalog__group-link:hover h2 {
  color: var(--violet-pale);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  font-size: 13.5px;
  color: var(--text-soft);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.chip:hover {
  border-color: var(--violet-edge);
  color: var(--text);
}

.chip__count {
  font-size: 11.5px;
  color: var(--text-faint);
}

/* --------------------------------------------------------- reconciliation - */

.recon {
  overflow: visible;
}

.recon__panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px;
}

.recon__panes:has(.recon__pane:only-child) {
  grid-template-columns: 1fr;
}

.recon__help {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.recon__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  padding: 0 24px 24px;
  border-bottom: 1px solid var(--line);
  /* Labels wrap to two lines at some widths; anchoring to the bottom keeps the
     inputs themselves on one line rather than stepping up and down. */
  align-items: end;
}

.recon__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.recon__summary:empty {
  display: none;
}

.rsum {
  background: var(--bg-alt);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rsum__label {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rsum__value {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Tone is set by the tool, not by the sign — "2 exceptions" is bad news even
   though the number is positive. */
.rsum--ok .rsum__value {
  color: var(--positive);
}

.rsum--warn .rsum__value {
  color: #f5c451;
}

.rsum--bad .rsum__value {
  color: #ff8080;
}

.recon__tables:empty {
  display: none;
}

.recon__privacy {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-faint);
}

/* --------------------------------------------------------- result tables -- */

.calc__table:empty {
  display: none;
}

.rtable {
  padding: 22px 24px;
  border-top: 1px solid var(--line);
}

.rtable__title {
  font-size: 16px;
  margin-bottom: 6px;
}

.rtable__note {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-bottom: 14px;
}

.rtable__empty {
  font-size: 13.5px;
  color: var(--text-faint);
}

/* The table scrolls inside this box so a wide result never makes the page
   itself scroll sideways on a phone. */
.rtable__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.rtable table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.rtable th {
  text-align: left;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-alt);
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}

.rtable td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
}

.rtable tbody tr:last-child td {
  border-bottom: 0;
}

.rtable tbody tr:hover td {
  background: var(--surface-hover);
}

.rtable .is-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rtable .is-negative {
  color: #ff8080;
}

/* ------------------------------------------- calculator landing pages ---- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 26px;
  font-size: 13px;
  color: var(--text-faint);
}

.crumbs a {
  color: var(--text-muted);
}

.crumbs a:hover {
  color: var(--text);
}

.calc__more {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  font-size: 14px;
}

.prose-block {
  padding: 44px 0 0;
}

.prose-block > h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin-bottom: 18px;
}

.formula {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  color: var(--violet-light);
  background: var(--surface);
  border: 1px solid var(--violet-edge);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin: 18px 0;
  overflow-x: auto;
  white-space: nowrap;
}

.terms {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.5px;
  color: var(--text-muted);
}

.terms b {
  color: var(--violet-light);
  font-family: var(--display);
  display: inline-block;
  min-width: 5.5em;
}

.example__scenario {
  color: var(--text-muted);
  margin-bottom: 18px;
}

.example {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.example__col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}

.example__col--out {
  border-color: var(--violet-edge);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.09), transparent), var(--surface);
}

.example__col h3 {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}

.example__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-muted);
}

.example__row:first-of-type {
  border-top: 0;
}

.example__row b {
  font-family: var(--display);
  font-size: 15.5px;
  color: var(--text);
}

.example__note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
  border-left: 2px solid var(--violet-edge);
  padding-left: 14px;
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0 20px;
}

.faq__item summary {
  cursor: pointer;
  padding: 16px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--violet-light);
  flex: none;
}

.faq__item[open] summary::after {
  content: '\2212';
}

.faq__item p {
  padding: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

.related__card {
  display: block;
  color: inherit;
}

.related__card:hover {
  color: inherit;
}

.related__card .card__body {
  margin-bottom: 0;
}

.backlink {
  padding: 40px 0 10px;
  font-size: 14.5px;
}

@media (max-width: 560px) {
  .example {
    grid-template-columns: 1fr;
  }

  .terms b {
    min-width: 0;
    margin-right: 6px;
  }
}

/* ------------------------------------------------------------ privacy ---- */

.policy-index {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.policy-index a {
  font-size: 13.5px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text-soft);
}

/* One card per app policy on /privacy/, each linking to its own page. */
.policy-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 44px;
}

.policy-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
  scroll-margin-top: 88px;
}

.policy-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.policy-card__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  color: #fff;
}

.policy-card__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.policy-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}

.policy-card__meta {
  font-size: 13px;
  color: var(--text-faint);
}

.policy-card__go {
  color: var(--violet-light);
  font-size: 18px;
  flex: none;
}

.policy {
  scroll-margin-top: 88px;
}

/* A policy on its own page carries the <h1>, so the title needs the top margin
   a page header would otherwise have supplied. */
.policy--page {
  padding-top: 20px;
}

.policy__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.policy__title {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  margin: 22px 0 14px;
}

.policy__meta {
  font-size: 14px;
  color: var(--text-faint);
  margin-bottom: 30px;
}

.policy__intro {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-soft);
  margin-bottom: 30px;
}

.policy__sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.policy__section h2,
.policy__section h3 {
  font-size: 19px;
  margin-bottom: 10px;
  color: var(--text);
}

.prose {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-soft);
}

.prose p {
  margin: 0 0 10px;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose strong,
.prose b {
  color: var(--text);
}

.prose ul,
.prose ol {
  margin: 0 0 10px;
  padding-left: 20px;
}

/* ------------------------------------------------------------ contact ---- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Pushes the card's action to the bottom edge so the buttons line up across
   cards of differing text length. */
.contact-card__body {
  flex: 1;
}

.contact-card .btn {
  align-self: flex-start;
}

.contact-card p {
  font-size: 15px;
  margin-top: 6px;
  line-height: 1.6;
  color: var(--text-soft);
}

.contact-card__email {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
}

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

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  margin-top: 20px;
  padding: 56px 0 28px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 34px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.footer__tagline {
  font-size: 13.5px;
  margin-top: 13px;
  max-width: 260px;
  color: var(--text-muted);
}

.footer__col h4 {
  font-size: 13px;
  margin-bottom: 14px;
  font-weight: 600;
}

.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
}

.footer__col a {
  color: var(--text-muted);
}

.footer__col a:hover {
  color: var(--text);
}

.footer__muted {
  color: var(--text-faint);
}

.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-size: 12.5px;
  color: var(--text-faint);
  flex-wrap: wrap;
  gap: 12px 26px;
}

/* The privacy links live here rather than in the nav, so they get the brighter
   of the two footer greys - they must not read as fine print. */
.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.footer__legal-links a {
  color: var(--text-muted);
}

.footer__legal-links a:hover {
  color: var(--text);
}

.footer__legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

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

@media (max-width: 980px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  .nav__links {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 16px;
  }

  .nav__links[data-open='true'] {
    display: flex;
  }

  /* Block, not inline: the caret is positioned against the row below, and an
     inline link gives it a static position on the same line box rather than
     after it. */
  .nav__links .nav__link {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    flex: 1;
  }

  .nav__toggle {
    display: flex;
  }

  /* In the collapsed menu the mega panel becomes an ordinary nested list —
     a floating popover has nowhere to float inside a drawer. */
  .nav__item {
    display: block;
  }

  .nav__item--mega {
    border-bottom: 1px solid var(--line);
  }

  .nav__item--mega .nav__link {
    border-bottom: 0;
  }

  /* Pinned to the Tools row itself, and sized as a real touch target. */
  .nav__caret {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 47px;
    margin: 0;
  }

  .mega {
    position: static;
    transform: none;
    width: auto;
    margin: 0 0 12px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Hover must not open it on touch — only the explicit toggle does.
     Every opening state has to clear the transform as well: the desktop rules
     centre the popover with translate(-50%, 0), which inside the drawer shoves
     it half its own width off the left of the screen. */
  .nav__item--mega:hover .mega,
  .nav__item--mega:focus-within .mega,
  .nav__item--open .mega {
    transform: none;
  }

  .nav__item--open .mega {
    display: block;
    /* 76 tools is a long drawer. Scrolling it inside its own box keeps the
       links below Tools reachable without paging past the whole catalog. */
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mega__inner {
    grid-template-columns: 1fr;
  }

  .mega__rail {
    padding: 0;
    background: none;
  }

  /* Nothing to bridge: the panels are in flow, not floating beside the rail. */
  .mega__cat > .mega__panel::before {
    content: none;
  }

  /* There is no second pane to fill, and the rail already names both groups. */
  .mega__panel--intro {
    display: none;
  }

  /* Hover has no meaning on touch, so the tools are simply always visible,
     indented under the category they belong to. */
  .mega__cat > .mega__panel {
    position: static;
    display: block;
    padding: 0 0 6px;
    margin: 0 0 4px 10px;
    border-left: 1px solid var(--line);
    background: none;
    border-radius: 0;
    overflow: visible;
  }

  .mega__panel-head {
    display: none;
  }

  .mega__tools {
    grid-template-columns: 1fr;
    margin: 0;
  }

  .mega__tools a {
    padding: 8px 12px;
  }

  .hero,
  .app-card__body,
  .calc__body,
  .recon__panes,
  .contact-grid,
  .grid--2 {
    grid-template-columns: 1fr !important;
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .phone {
    margin: 0 auto;
  }

  .app-card__detail,
  .calc__inputs {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .cta {
    padding: 40px 26px;
  }

  .section {
    padding: 50px 0;
  }
}

@media (max-width: 560px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .stats {
    gap: 28px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .tabs {
    width: 100%;
  }

  .tab {
    flex: 1;
  }

  .currency select {
    min-width: 0;
    width: 100%;
  }
}

/* ------------------------------------------------------------- ad slot --- */

.ad-slot {
  display: block;
  margin: 40px auto;
  text-align: center;
  /* Reserves enough height that a filling ad does not shove the page down,
     without leaving a crater when inventory is unfilled. Responsive units
     resize themselves upward from here. */
  min-height: 100px;
}

.ad-slot__label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-faint);
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ad-slot__unit {
  display: block;
  width: 100%;
}

/* AdSense stamps data-ad-status="unfilled" when it has nothing to serve. Without
   this the reserved space and the "Advertisement" label would sit there labelling
   nothing. Browsers without :has() simply keep the old behaviour. */
.ad-slot:has(ins[data-ad-status='unfilled']) {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}