/* =============================================================================================
   PRADOMATION DESIGN SYSTEM
   =============================================================================================

   One stylesheet for every page on every hostname. Tokens first, then primitives, then the small
   number of components the site actually has.

   Three rules this file exists to enforce:

     1. NO HEX CODES OUTSIDE THE TOKEN BLOCK. A page that wants a colour asks for a token. When the
        palette moves, it moves once.
     2. DARK IS THE DESIGN, not a theme. There is no light mode here and no `prefers-color-scheme`
        switch, because the brand is the dark surface — a half-translated light variant would look
        like a bug. Contrast is therefore checked against the dark surface only.
     3. EFFECT NEVER BEATS LEGIBILITY. Glow is a border treatment and a shadow, not a text style.
        Body copy is a flat, high-contrast colour on a solid background everywhere.

   No webfonts: the Content-Security-Policy on this site permits no third-party origin at all, which
   is a property worth keeping. The stack below is what the design was drawn against.
   ============================================================================================= */

:root {
  /* --- surface ---------------------------------------------------------------------------- */
  --bg: #05070f;
  --bg-deep: #03050b;
  --surface: #0b0f1c;
  --surface-elevated: #111728;
  --surface-sunken: #080b15;
  --border: #1d2538;
  --border-strong: #2a3449;

  /* --- ink -------------------------------------------------------------------------------- */
  --text: #eef2fa;
  --text-dim: #c3cbdd;
  --muted: #8d99b4;
  --faint: #67728c;

  /* --- accent ----------------------------------------------------------------------------- */
  --blue: #4d8dff;
  --blue-bright: #6ba4ff;
  --blue-deep: #1e4fd8;
  --violet: #9b6bff;
  --violet-bright: #b490ff;
  --green: #34d399;
  --amber: #f5b945;
  --danger: #ff9b91;
  /* Text and marks that sit ON an accent fill. A token, so no page has to write a bare #fff. */
  --on-accent: #ffffff;

  /* Tinted fills. Kept as tokens so a card never invents its own translucency. */
  --blue-wash: rgba(77, 141, 255, 0.12);
  --violet-wash: rgba(155, 107, 255, 0.12);
  --green-wash: rgba(52, 211, 153, 0.12);
  --amber-wash: rgba(245, 185, 69, 0.12);
  --white-wash: rgba(255, 255, 255, 0.04);
  --white-wash-2: rgba(255, 255, 255, 0.07);

  --gradient: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
  --gradient-soft: linear-gradient(135deg, rgba(77, 141, 255, 0.22), rgba(155, 107, 255, 0.22));

  /* --- glow ------------------------------------------------------------------------------- */
  --glow-blue: 0 0 0 1px rgba(77, 141, 255, 0.35), 0 8px 32px rgba(30, 79, 216, 0.28);
  --glow-violet: 0 0 0 1px rgba(155, 107, 255, 0.35), 0 8px 32px rgba(109, 40, 217, 0.26);
  --glow-cta: 0 6px 24px rgba(59, 100, 230, 0.45);
  --glow-cta-hover: 0 10px 34px rgba(79, 120, 255, 0.58);

  /* --- shadow ----------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.6);

  /* --- radius ----------------------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- metrics ---------------------------------------------------------------------------- */
  --max: 1320px;
  --max-prose: 760px;
  --gutter: 24px;
  --nav-h: 72px;

  /* --- type ------------------------------------------------------------------------------- */
  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
    "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "SF Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =============================================================================================
   RESET
   ============================================================================================= */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  /* The page is dark; tell the browser so form controls and scrollbars follow. */
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  /* Nothing here should exceed the viewport, and the hero artwork is the one thing that could at an
     awkward width. `clip` rather than `hidden`: `overflow-x: hidden` makes <body> a scroll container,
     which moves the scrollport off the viewport and breaks `position: sticky` on the header. `clip`
     trims the overflow without creating a scrolling box. */
  overflow-x: clip;
}

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

a {
  color: var(--blue-bright);
  text-decoration: none;
}
a:hover {
  color: var(--text);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

/* Keyboard focus must be obvious on every interactive thing, on a dark surface. */
:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: rgba(77, 141, 255, 0.35);
  color: #fff;
}

/* =============================================================================================
   PAGE BACKDROP
   ---------------------------------------------------------------------------------------------
   Three fixed layers, all pure CSS, all non-interactive: a faint technical grid, a blue bloom
   behind the hero, and a violet bloom lower down. Fixed rather than scrolling so they cost one
   paint and never jitter.
   ============================================================================================= */

.pm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.pm-backdrop::before {
  /* the grid */
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(120, 150, 220, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 150, 220, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Fade the grid out downward so it reads as atmosphere, not as a table. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.5) 45%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.5) 45%, transparent 85%);
}

.pm-backdrop::after {
  /* the blooms */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 78% 4%, rgba(60, 110, 240, 0.3), transparent 62%),
    radial-gradient(700px 460px at 92% 22%, rgba(140, 90, 255, 0.22), transparent 64%),
    radial-gradient(760px 520px at 6% 62%, rgba(70, 60, 220, 0.12), transparent 66%);
}

/* Everything that is not the backdrop sits above it. */
.pm-page {
  position: relative;
  z-index: 1;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap-prose {
  max-width: var(--max-prose);
}

/* =============================================================================================
   HEADER / NAVIGATION
   ============================================================================================= */

.pm-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(5, 7, 15, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.pm-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--nav-h);
}

/* --- brand ---------------------------------------------------------------------------------- */

.pm-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.pm-brand:hover {
  color: var(--text);
}
.pm-brand .mark {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

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

.pm-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
  list-style: none;
}

.pm-nav a {
  display: block;
  position: relative;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.945rem;
  font-weight: 500;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.pm-nav a:hover {
  color: var(--text);
  background: var(--white-wash);
}

/* The current page gets the accent underline from the design reference. */
.pm-nav a[aria-current="page"] {
  color: var(--text);
}
.pm-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient);
}

.pm-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}

/* --- mobile toggle -------------------------------------------------------------------------- */

.pm-burger {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: var(--white-wash);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}
.pm-burger:hover {
  background: var(--white-wash-2);
}
.pm-burger .bars,
.pm-burger .close {
  width: 18px;
  height: 18px;
}
.pm-burger .close {
  display: none;
}
.pm-burger[aria-expanded="true"] .bars {
  display: none;
}
.pm-burger[aria-expanded="true"] .close {
  display: block;
}

/* =============================================================================================
   BUTTONS
   ============================================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
/* Every icon in this file is an inline <svg> with a viewBox and NO width/height attributes, so that
   one markup string can be reused at any size. The consequence is that an unsized one falls back to
   the SVG default of 300x150 and bursts out of its container — which is exactly what the header CTA
   did. Size is therefore a property of the component, never of the icon. */
.btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.btn-lg svg {
  width: 17px;
  height: 17px;
}

.btn-primary {
  background: var(--gradient);
  color: var(--on-accent);
  box-shadow: var(--glow-cta);
}
.btn-primary:hover {
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: var(--glow-cta-hover);
}

.btn-ghost {
  background: var(--white-wash);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover {
  color: var(--text);
  background: var(--white-wash-2);
  border-color: var(--blue);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 9px 17px;
  font-size: 0.9rem;
}
.btn-lg {
  padding: 15px 30px;
  font-size: 1.04rem;
}

/* A link that reads as an action without being a button. */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--blue-bright);
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
  transition: gap 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.link-action svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.link-action:hover {
  color: var(--text);
  gap: 11px;
  border-bottom-color: var(--blue);
}

/* =============================================================================================
   EYEBROWS, BADGES, SECTION HEADS
   ============================================================================================= */

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--white-wash);
  color: var(--text-dim);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: currentColor;
  transform: skewX(-18deg);
}
.eyebrow-violet {
  color: var(--violet-bright);
}
.eyebrow-green {
  color: var(--green);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.badge-soon {
  color: var(--amber);
  background: var(--amber-wash);
}
.badge-live {
  color: var(--green);
  background: var(--green-wash);
}
.badge-free {
  color: var(--blue-bright);
  background: var(--blue-wash);
}

.price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
}
/* A launch price needs its regular price beside it, or the discount is a claim with no anchor. */
.price-note {
  margin-top: 3px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
}

/* --- section heading block ------------------------------------------------------------------ */

.section {
  padding: 84px 0;
}
.section-tight {
  padding: 56px 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
}
.section-head > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.section-head > .link-action {
  flex: 0 0 auto;
  padding-bottom: 4px;
}
.section-head h2 {
  font-size: clamp(1.7rem, 3.1vw, 2.35rem);
  margin: 14px 0 0;
}
.section-head p {
  color: var(--muted);
  margin-top: 10px;
  font-size: 1.03rem;
  max-width: 62ch;
}

/* =============================================================================================
   CARDS
   ============================================================================================= */

.card {
  position: relative;
  display: block;
  padding: 26px;
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

/* A hairline of accent light along the top edge, which is what reads as "premium" at a glance. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, rgba(120, 160, 255, 0.5), transparent);
  opacity: 0.6;
  transition: opacity 0.22s var(--ease);
}

a.card:hover,
.card-interactive:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(77, 141, 255, 0.22);
}
a.card:hover::before {
  opacity: 1;
}

.card-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- icon tile ------------------------------------------------------------------------------ */

.tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--blue-wash);
  color: var(--blue-bright);
}
.tile svg {
  width: 26px;
  height: 26px;
}
.tile-violet {
  background: var(--violet-wash);
  color: var(--violet-bright);
}
.tile-green {
  background: var(--green-wash);
  color: var(--green);
}
.tile-amber {
  background: var(--amber-wash);
  color: var(--amber);
}

/* --- tool / product card layout -------------------------------------------------------------- */

.feature-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  color: inherit;
}
.feature-card:hover {
  color: inherit;
}
.feature-card .body {
  flex: 1 1 auto;
  min-width: 0;
}
.feature-card h3 {
  font-size: 1.14rem;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.feature-card p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 8px;
}

/* The feature list inside a full product card. Indented to clear the icon tile, so the list reads
   as belonging to the title rather than to the card edge. */
.detail-list {
  margin: 18px 0 0;
  padding: 18px 0 0 1.15em;
  border-top: 1px solid var(--border);
  list-style: disc;
}
.detail-list li {
  margin: 0.4em 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.6;
}
.detail-list li::marker {
  color: var(--blue);
}
.detail-list strong {
  color: var(--text-dim);
  font-weight: 600;
}

@media (min-width: 900px) {
  .detail-list {
    columns: 2;
    column-gap: 52px;
  }
  .detail-list li {
    break-inside: avoid;
  }
}

.card-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* A category heading inside a page, below the page hero. */
.cat-head {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 18px;
}

/* The circular arrow affordance on the right of a card. */
.go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  align-self: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--white-wash);
  color: var(--text-dim);
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
    border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.go svg {
  width: 17px;
  height: 17px;
}
a.card:hover .go {
  background: var(--gradient);
  border-color: transparent;
  color: var(--on-accent);
  transform: translateX(3px);
}

/* =============================================================================================
   HERO
   ============================================================================================= */

.hero {
  position: relative;
  padding: 68px 0 64px;
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.9rem, 6.4vw, 4.6rem);
  margin: 26px 0 0;
  letter-spacing: -0.04em;
}
.hero h1 .line2 {
  display: block;
  font-size: clamp(1.62rem, 3.05vw, 2.55rem);
  letter-spacing: -0.03em;
  margin-top: 6px;
}

/* Gradient text, with a flat colour underneath for any engine that does not clip it. */
.grad {
  color: var(--blue-bright);
  background: linear-gradient(100deg, var(--blue-bright) 10%, var(--violet-bright) 90%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-text-fill-color: transparent) {
  .grad {
    -webkit-text-fill-color: transparent;
  }
}

.hero-sub {
  color: var(--text-dim);
  font-size: clamp(1.03rem, 1.5vw, 1.16rem);
  line-height: 1.62;
  margin-top: 22px;
  max-width: 54ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* --- the three value points ------------------------------------------------------------------ */

/*
 * A band across the full hero, separated by a hairline.
 *
 * `auto-fit` with a 250px floor rather than a fixed three columns: the row then becomes 3, 2 or 1
 * across on its own as the page narrows, and no breakpoint has to be guessed. The floor is set to
 * the width of the longest point so that nothing in it ever wraps to a second line, which is what
 * made the old version look ragged.
 */
.value-points {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px 36px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  list-style: none;
}
.value-points li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.value-points .tile {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
}
.value-points .tile svg {
  width: 21px;
  height: 21px;
}
.value-points b {
  display: block;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.value-points span {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}

/* =============================================================================================
   HERO ART — three product-preview cards in perspective
   ---------------------------------------------------------------------------------------------
   Artwork, not UI: nothing inside is focusable and the whole composition is aria-hidden, so a
   screen reader is not read a chart it cannot use. The headline and the real tool cards below
   carry the meaning.
   ============================================================================================= */

.hero-art {
  position: relative;
  height: 400px;
  perspective: 1400px;
}

.hero-art .glass {
  position: absolute;
  padding: 16px 18px;
  background: linear-gradient(165deg, rgba(23, 31, 54, 0.94), rgba(11, 15, 28, 0.94));
  border: 1px solid rgba(120, 155, 230, 0.26);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(90, 130, 230, 0.12) inset,
    0 0 40px rgba(60, 110, 240, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform-style: preserve-3d;
}

.hero-art .a1 {
  left: 0;
  top: 95px;
  width: 196px;
  transform: rotateY(14deg) rotateX(3deg) rotateZ(-1.5deg);
  animation: float-a 11s ease-in-out infinite;
}
.hero-art .a2 {
  left: 31%;
  top: 0;
  width: 240px;
  z-index: 3;
  transform: rotateY(4deg) rotateX(2deg);
  animation: float-b 13s ease-in-out infinite;
}
.hero-art .a3 {
  right: 0;
  top: 125px;
  width: 190px;
  transform: rotateY(-12deg) rotateX(3deg) rotateZ(1.5deg);
  animation: float-c 12s ease-in-out infinite;
}

/* The lit plinth the cards stand on. */
.hero-art .plinth {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(77, 141, 255, 0.4), transparent 70%);
  filter: blur(18px);
}
.hero-art .plinth::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 44px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-bright), transparent);
  opacity: 0.85;
}

@keyframes float-a {
  0%, 100% { transform: rotateY(13deg) rotateX(3deg) rotateZ(-1.5deg) translateY(0); }
  50%      { transform: rotateY(13deg) rotateX(3deg) rotateZ(-1.5deg) translateY(-12px); }
}
@keyframes float-b {
  0%, 100% { transform: rotateY(5deg) rotateX(2deg) translateY(0); }
  50%      { transform: rotateY(5deg) rotateX(2deg) translateY(-16px); }
}
@keyframes float-c {
  0%, 100% { transform: rotateY(-11deg) rotateX(3deg) rotateZ(1.5deg) translateY(0); }
  50%      { transform: rotateY(-11deg) rotateX(3deg) rotateZ(1.5deg) translateY(-9px); }
}

/* --- miniature UI inside the art cards -------------------------------------------------------- */

.hero-art .t {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.hero-art .s {
  font-size: 0.58rem;
  color: var(--muted);
}
.hero-art .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  font-size: 0.6rem;
  color: var(--text-dim);
}
.hero-art .row b {
  font-weight: 600;
  color: var(--text);
}
.hero-art .rule {
  height: 1px;
  background: var(--border-strong);
  margin: 7px 0;
}
.hero-art .rule-thick {
  height: 4px;
  background: var(--text);
  margin: 5px 0;
  border-radius: 1px;
}
.hero-art .dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.hero-art .big {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}
.hero-art .chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: 0.6rem;
  color: var(--text-dim);
}
.hero-art .mini-btn {
  margin-top: 9px;
  padding: 7px;
  border-radius: var(--radius-sm);
  background: var(--gradient);
  box-shadow: var(--glow-cta);
  color: var(--on-accent);
  font-size: 0.63rem;
  font-weight: 700;
  text-align: center;
}

/* =============================================================================================
   PAGE HERO (interior pages)
   ============================================================================================= */

.page-hero {
  padding: 64px 0 40px;
}
.page-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.2rem);
  margin: 18px 0 0;
}
.page-hero .lede {
  color: var(--text-dim);
  font-size: 1.1rem;
  margin-top: 16px;
  max-width: 64ch;
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.86rem;
}
.crumb a {
  color: var(--muted);
}
.crumb a:hover {
  color: var(--text);
}

/* =============================================================================================
   PROSE
   ============================================================================================= */

.prose p,
.prose li {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.72;
}
.prose p + p {
  margin-top: 1.05em;
}
.prose h2 {
  font-size: 1.42rem;
  margin: 2.2em 0 0.6em;
}
.prose h3 {
  font-size: 1.1rem;
  margin: 1.8em 0 0.4em;
}
.prose ul {
  margin: 0.8em 0 0;
  padding-left: 1.2em;
  list-style: disc;
}
.prose li {
  margin: 0.35em 0;
}
.prose li::marker {
  color: var(--blue);
}
.prose strong {
  color: var(--text);
  font-weight: 600;
}

.panel {
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.panel-note {
  border-left: 3px solid var(--blue);
}
.panel-warn {
  border-left: 3px solid var(--amber);
  background: var(--amber-wash);
}

/* =============================================================================================
   TOOL FORM
   ---------------------------------------------------------------------------------------------
   The chrome a free calculator needs: labelled fields, a results panel, and a figure that can say
   "enter your list price" instead of showing a dash. Scoped under .toolform so it cannot reach the
   two older calculators, which carry their own page-local copies until they are next touched.
   ============================================================================================= */

.toolform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.toolform fieldset {
  margin: 0;
  padding: 24px;
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.toolform legend {
  padding: 0 10px;
  margin-left: -10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue);
}

.field + .field {
  margin-top: 16px;
}
.field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.field input,
.field select {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.field input:hover,
.field select:hover {
  border-color: var(--blue);
}
.field .hint {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}
.field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* --- results ---------------------------------------------------------------------------------- */

.results {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}
.result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.result-row:last-of-type {
  border-bottom: 0;
}
.result-row dt {
  color: var(--text-dim);
  font-size: 0.92rem;
}
.result-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
}
/* A figure that could not be worked out says what is missing, quietly, instead of showing a dash. */
.result-row dd.pending {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--faint);
  white-space: normal;
  text-align: right;
}
.result-row.headline {
  padding: 16px 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 0;
}
.result-row.headline dt {
  font-weight: 650;
  color: var(--text);
  font-size: 1rem;
}
.result-row.headline dd {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.result-row.headline dd.good {
  color: var(--green);
}
.result-row.headline dd.bad {
  color: var(--danger);
}

.verdict {
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  border-left: 3px solid var(--border-strong);
  background: var(--white-wash);
  color: var(--text-dim);
}
.verdict.good {
  border-left-color: var(--green);
  background: var(--green-wash);
}
.verdict.bad {
  border-left-color: var(--danger);
  background: rgba(255, 155, 145, 0.1);
}

@media (max-width: 860px) {
  .toolform {
    grid-template-columns: minmax(0, 1fr);
  }
  .results {
    position: static;
  }
}

/* =============================================================================================
   FOOTER
   ============================================================================================= */

.pm-footer {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(8, 11, 21, 0.9));
  padding: 48px 0 36px;
}
.pm-footer .cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr);
  gap: 48px;
  align-items: start;
}
.pm-footer .about {
  max-width: 34ch;
}
.pm-footer .about p {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 12px;
}
.pm-footer nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.pm-footer h4 {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
  margin-bottom: 14px;
}
.pm-footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pm-footer ul a {
  color: var(--text-dim);
  font-size: 0.91rem;
}
.pm-footer ul a:hover {
  color: var(--text);
}
.pm-footer .base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: 0.83rem;
}
.pm-footer .base a {
  color: var(--muted);
}
.pm-footer .base a:hover {
  color: var(--text);
}
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease),
    background 0.18s var(--ease);
}
.icon-link:hover {
  color: var(--text);
  border-color: var(--blue);
  background: var(--blue-wash);
}
.icon-link svg {
  width: 18px;
  height: 18px;
}

/* =============================================================================================
   UTILITIES
   ============================================================================================= */

.muted {
  color: var(--muted);
}
.small {
  font-size: 0.86rem;
}
.center {
  text-align: center;
}
.stack-sm > * + * {
  margin-top: 10px;
}
.stack > * + * {
  margin-top: 18px;
}
.stack-lg > * + * {
  margin-top: 30px;
}
.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--surface-elevated);
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 600;
}
.skip-link:focus {
  left: 16px;
  top: 12px;
}

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

/* =============================================================================================
   RESPONSIVE
   ---------------------------------------------------------------------------------------------
   Mobile is not the desktop stacked. The hero art is replaced by a simplified single card, the
   value points become a two-column grid rather than a long list, and the nav becomes a panel.
   ============================================================================================= */

@media (max-width: 1100px) {
  .hero .wrap {
    gap: 32px;
  }
  .hero-art {
    height: 400px;
  }
  .hero-art .a1 {
    top: 76px;
    width: 186px;
  }
  .hero-art .a2 {
    left: 24%;
    width: 232px;
  }
  .hero-art .a3 {
    top: 108px;
    width: 190px;
  }
}

@media (max-width: 960px) {
  :root {
    --gutter: 20px;
  }

  /* Nav collapses into a panel below the bar. */
  .pm-burger {
    display: inline-flex;
  }
  .pm-nav {
    display: none;
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(var(--nav-h) + 8px);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 10px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .pm-nav.open {
    display: flex;
  }
  .pm-nav a {
    padding: 12px 14px;
    font-size: 1rem;
  }
  .pm-nav a[aria-current="page"] {
    background: var(--blue-wash);
  }
  .pm-nav a[aria-current="page"]::after {
    left: 0;
    right: auto;
    top: 10px;
    bottom: 10px;
    width: 2px;
    height: auto;
  }
  .pm-header .wrap {
    position: relative;
  }
  .pm-header-actions .btn {
    display: none;
  }

  .hero {
    padding: 44px 0 56px;
  }
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .hero-sub {
    max-width: none;
  }
  /* The composition is positioned in percentages of its own box. Once the hero is one column, that
     box is the full page width and the cards drift apart into a thin, sparse line. Hold it at the
     width it was drawn for and centre it. */
  .hero-art {
    max-width: 620px;
    margin: 0 auto;
    width: 100%;
  }

  .section {
    padding: 60px 0;
  }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

@media (max-width: 760px) {
  .card-grid,
  .card-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The perspective composition does not survive a narrow column; one honest card does. */
  .hero-art {
    height: auto;
    perspective: none;
    display: flex;
    justify-content: center;
  }
  .hero-art .a1,
  .hero-art .a3,
  .hero-art .plinth {
    display: none;
  }
  .hero-art .a2 {
    position: static;
    width: min(300px, 100%);
    transform: none;
    animation: none;
  }

  .pm-footer .cols {
    gap: 32px;
  }
  .pm-footer nav {
    gap: 36px;
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: 16px;
  }
  .hero h1 {
    font-size: clamp(2.3rem, 11vw, 3rem);
  }
  .hero-cta {
    gap: 10px;
  }
  .hero-cta .btn {
    flex: 1 1 100%;
  }
  .value-points {
    margin-top: 40px;
    padding-top: 26px;
    gap: 18px;
  }
  .card {
    padding: 20px;
  }
  .feature-card {
    gap: 15px;
  }
  .feature-card .go {
    display: none;
  }

  /* A detail card's header is icon + body + price in one row. On a phone that left the blurb about
     180px wide and reading as a narrow ragged column inside a full-width card. Dropping the body to
     its own full-width row gives it the whole card and costs nothing: the icon and the price stay
     together on the line above, which is where the eye looks for them anyway.
     Only the composed cards (article.card > .feature-card) — the homepage's own cards ARE the
     feature-card, so this selector cannot reach them. */
  .card > .feature-card {
    flex-wrap: wrap;
  }
  .card > .feature-card > .body {
    flex: 1 1 100%;
    order: 3;
  }
  .card > .feature-card > .price {
    margin-left: auto;
  }
  .section {
    padding: 48px 0;
  }
  .pm-footer nav {
    gap: 28px;
  }
}

/* =============================================================================================
   REDUCED MOTION
   ---------------------------------------------------------------------------------------------
   Everything decorative stops. Hover feedback stays as a colour change, because removing the only
   signal that something is interactive would make the site harder to use, not calmer.
   ============================================================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover,
  a.card:hover,
  .card-interactive:hover,
  a.card:hover .go {
    transform: none;
  }
}