/* ──────────────────────────────────────────────────────────────────────────
   page.css — shared styles for the standalone, SEO/content pages
   (privacy, terms, faq, about, shortcuts, 404, and the marketing landers).

   These pages are plain scrollable documents, NOT the canvas app, so they
   deliberately do NOT load base.css (which locks the body to overflow:hidden
   and disables text selection). The brand language — Montserrat, the teal
   accent, the warm off-white, and the watching "eye" mark — mirrors the home
   page so the pages feel of-a-piece. Layout: a sticky header with the logo +
   a smart Back button, a readable body, a footer with links to every page,
   and a floating "Open the canvas" CTA pinned centre-bottom.
   ────────────────────────────────────────────────────────────────────────── */

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

:root {
  --accent: #0d9488;
  --accent-dark: #0b7e74;
  --accent-light: #ccfbf1;
  --ink: #2b2620;
  --ink-soft: #4a423a;
  --muted: #6b6157;
  --faint: #8a8175;
  --line: #ece7df;
  --bg: #ffffff;
  --bg-warm: #faf8f4;
  --head-h: 60px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); }

/* ── Sticky header — brand lockup + Back ──────────────────────────────── */
.pg-head {
  position: sticky; top: 0; z-index: 50;
  height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.pg-brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--ink);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.pg-brand:hover { transform: translateY(-1px); }
.pg-brand-mark {
  width: 32px; height: 32px; border-radius: 28%;
  background: linear-gradient(150deg, #19c2b0 0%, #0d9488 55%, #0a766c 100%);
  box-shadow: 0 8px 18px -8px rgba(13,148,136,.5),
              inset 0 1px 4px rgba(255,255,255,.22);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.pg-brand:hover .pg-brand-mark { transform: rotate(-6deg) scale(1.05); }
.pg-brand-word { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }

.pg-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--muted); cursor: pointer;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px 8px 13px;
  transition: color .2s ease, border-color .2s ease, transform .2s ease, background .2s ease;
}
.pg-back:hover { color: var(--ink); border-color: #d8d1c5; background: var(--bg-warm); }
.pg-back:active { transform: scale(.97); }
.pg-back svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
.pg-back:hover svg { transform: translateX(-2px); }

/* ── Body ─────────────────────────────────────────────────────────────── */
.pg-main { padding: clamp(40px, 7vw, 88px) clamp(16px, 4vw, 40px) 140px; }
.pg-wrap { max-width: 760px; margin: 0 auto; }
.pg-wrap.wide { max-width: 1040px; }

.pg-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.pg-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.pg-wrap h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  margin-bottom: 18px;
}
.pg-lead {
  font-size: clamp(17px, 2vw, 21px); color: var(--ink-soft);
  line-height: 1.6; max-width: 60ch; margin-bottom: 14px;
}
.pg-updated { font-size: 14px; color: var(--faint); margin-bottom: 40px; }

.pg-wrap h2 {
  font-size: clamp(22px, 3vw, 28px); font-weight: 700; letter-spacing: -.02em;
  margin: 48px 0 14px; scroll-margin-top: calc(var(--head-h) + 16px);
}
.pg-wrap h3 {
  font-size: clamp(17px, 2.2vw, 20px); font-weight: 700;
  margin: 28px 0 10px;
}
.pg-wrap p { color: var(--ink-soft); margin-bottom: 16px; }
.pg-wrap ul, .pg-wrap ol { margin: 0 0 18px 1.3em; }
.pg-wrap li { color: var(--ink-soft); margin-bottom: 9px; }
.pg-wrap a { font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(13,148,136,.35); padding-bottom: 1px; transition: border-color .2s ease, color .2s ease; }
.pg-wrap a:hover { color: var(--accent-dark); border-bottom-color: var(--accent); }
.pg-wrap strong { color: var(--ink); font-weight: 700; }
.pg-wrap code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .88em;
  background: var(--accent-light); color: #0a6c62;
  padding: .12em .45em; border-radius: 6px; font-weight: 600;
}
.pg-wrap kbd {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .82em;
  background: #fff; color: var(--ink);
  border: 1px solid #d8d1c5; border-bottom-width: 2px;
  border-radius: 7px; padding: .18em .5em; box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.pg-wrap hr { border: none; border-top: 1px solid var(--line); margin: 40px 0; }

/* Callout card — for the privacy "nothing leaves your browser" highlight etc. */
.pg-note {
  background: var(--bg-warm); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(20px, 3vw, 28px); margin: 28px 0;
}
.pg-note.accent { background: #f0fdfa; border-color: #b9ece4; }
.pg-note p:last-child { margin-bottom: 0; }
.pg-note h3 { margin-top: 0; }

/* ── FAQ items ────────────────────────────────────────────────────────── */
.faq-item {
  border: 1px solid var(--line); border-radius: 16px;
  background: #fff; padding: clamp(18px, 2.6vw, 26px);
  margin-bottom: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover { border-color: #d8d1c5; box-shadow: 0 8px 24px -16px rgba(40,34,28,.25); }
.faq-item h3 { margin: 0 0 8px; font-size: clamp(17px, 2.2vw, 20px); }
.faq-item p:last-child { margin-bottom: 0; }

/* ── Feature / value grid (landers) ───────────────────────────────────── */
.pg-grid {
  display: grid; gap: 16px; margin: 32px 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pg-card {
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  padding: clamp(20px, 2.6vw, 26px);
}
.pg-card h3 { margin: 0 0 8px; }
.pg-card p:last-child { margin-bottom: 0; }
.pg-card .ic {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f0fdfa; color: var(--accent);
}
.pg-card .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Inline pill links to other pages */
.pg-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }
.pg-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; line-height: 1; color: var(--muted) !important;
  background: #fff; border: 1px solid var(--line) !important; border-radius: 999px;
  padding: 9px 16px !important; text-decoration: none;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.pg-pill:hover { color: var(--ink) !important; border-color: #d8d1c5 !important; transform: translateY(-1px); }

/* ── Shortcuts list ───────────────────────────────────────────────────── */
.sc-group { margin: 36px 0; }
.sc-group h2 { margin-bottom: 6px; }
.sc-list {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff;
}
.sc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px clamp(16px, 2.4vw, 22px);
  border-top: 1px solid var(--line);
}
.sc-row:first-child { border-top: none; }
.sc-row .sc-label { color: var(--ink-soft); font-size: 15px; }
.sc-row .sc-keys { flex: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sc-row .sc-keys .plus { color: var(--faint); font-size: 12px; }

/* ── 404 ──────────────────────────────────────────────────────────────── */
.pg-404 { text-align: center; padding-top: clamp(40px, 9vw, 110px); }
.pg-404 .big { font-size: clamp(80px, 16vw, 160px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--accent); }
.pg-404 h1 { margin-top: 8px; }
.pg-404 .pg-lead { margin-left: auto; margin-right: auto; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.pg-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-warm);
  padding: 44px clamp(16px, 4vw, 40px) 56px;
  text-align: center;
}
.pg-foot-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  margin-bottom: 22px;
}
.pg-foot-links a {
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600;
  transition: color .2s ease;
}
.pg-foot-links a:hover { color: var(--accent); }
.pg-copy { font-size: 13.5px; color: var(--faint); letter-spacing: .01em; }
.pg-copy a { color: var(--faint); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(138,129,117,.4); padding-bottom: 1px; transition: color .2s ease, border-color .2s ease; }
.pg-copy a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Eye logo — copied from home.css so these pages don't need it ─────── */
.eye { overflow: hidden; display: inline-block; }
.eye > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.eye-lids { transform-box: view-box; transform-origin: center; animation: eyeBlink 6.4s ease-in-out infinite; }
.eye-ring { fill: none; stroke: #fff; stroke-width: 2.4; }
.eye-pupil { fill: #fff; transition: transform .16s cubic-bezier(.22,1,.36,1); }
@keyframes eyeBlink {
  0%, 93%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(.08); }
  98%           { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .eye-lids { animation: none; }
  .eye-pupil { transition: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 540px) {
  .pg-brand-word { font-size: 17px; }
  .pg-back { padding: 7px 13px 7px 11px; }
  .pg-back span { display: none; }
  .pg-back { gap: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VISUAL KIT — shared "rich & lively" components for the content pages.
   Carries the home page's brand energy (warm dot-grid, teal gradient, the
   watching eye, hand-drawn line animations) into the SEO landers without
   each page reinventing it. Pages compose these classes + drop in bespoke
   inline SVGs; all motion respects prefers-reduced-motion (see bottom).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero backdrop — a soft teal glow over the canvas dot-grid, masked so it
      fades into the page behind the headline. Auto-applies to every page. ── */
.pg-main { position: relative; isolation: isolate; }
.pg-main::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 560px; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 70% at 50% -4%, rgba(13,148,136,.13), transparent 68%),
    radial-gradient(circle, rgba(72,64,54,.06) 1px, transparent 1px);
  background-position: 0 0, 0 0;
  background-size: auto, 24px 24px;
  -webkit-mask-image: radial-gradient(125% 100% at 50% 0%, #000 32%, transparent 80%);
          mask-image: radial-gradient(125% 100% at 50% 0%, #000 32%, transparent 80%);
}
.pg-wrap { position: relative; z-index: 1; }

/* ── Generalised icon badge (was scoped to .pg-card .ic) ─────────────────── */
.ic {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f0fdfa; color: var(--accent);
}
.ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.grad {
  background: linear-gradient(150deg, #19c2b0 0%, #0d9488 60%, #0a766c 100%); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(13,148,136,.5), inset 0 1px 3px rgba(255,255,255,.25);
}
.ic.lg { width: 48px; height: 48px; border-radius: 13px; }
.ic.lg svg { width: 25px; height: 25px; }

/* Give the cards life — gentle lift on hover. */
.pg-card { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.pg-card:hover { border-color: #d8d1c5; box-shadow: 0 16px 34px -22px rgba(40,34,28,.4); transform: translateY(-2px); }

/* ── Feature rows — icon badge + heading + copy, for "what's different" lists ── */
.pg-features { display: grid; gap: 20px; margin: 30px 0; }
.pg-feature { display: flex; gap: 16px; align-items: flex-start; }
.pg-feature .ic { margin-top: 2px; }
.pg-feature h3 { margin: 0 0 4px; font-size: clamp(16px, 2vw, 18px); }
.pg-feature p:last-child { margin: 0; }

/* ── Stat figures — big gradient numbers (e.g. "1,100+ icons") ───────────── */
.pg-stats {
  display: grid; gap: 16px; margin: 32px 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.pg-stat {
  text-align: center; padding: 24px 16px;
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pg-stat:hover { transform: translateY(-2px); border-color: #d8d1c5; box-shadow: 0 16px 34px -22px rgba(40,34,28,.4); }
.pg-stat .num {
  display: block;
  font-size: clamp(30px, 4.4vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  background: linear-gradient(150deg, #19c2b0, #0a766c);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
}
.pg-stat .lbl { display: block; margin-top: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); }

/* ── Numbered step flow — for "how it works" ─────────────────────────────── */
.pg-steps { list-style: none; margin: 30px 0; padding: 0; }
.pg-step { position: relative; padding: 0 0 28px 60px; }
.pg-step:last-child { padding-bottom: 0; }
.pg-step::before {
  content: ""; position: absolute; left: 18px; top: 8px; bottom: -8px; width: 2px;
  background: linear-gradient(var(--accent-light), rgba(204,251,241,0));
}
.pg-step:last-child::before { display: none; }
.pg-step .n {
  position: absolute; left: 0; top: -2px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px; font-weight: 800; color: #fff;
  background: linear-gradient(150deg, #19c2b0 0%, #0d9488 60%, #0a766c 100%);
  box-shadow: 0 8px 18px -8px rgba(13,148,136,.6);
}
.pg-step h3 { margin: 4px 0 6px; }
.pg-step p:last-child { margin-bottom: 0; }

/* ── Comparison table — Outwin column highlighted, tick / cross marks ────── */
.pg-cmp { margin: 32px 0; border: 1px solid var(--line); border-radius: 16px; overflow-x: auto; background: #fff; -webkit-overflow-scrolling: touch; }
.pg-cmp table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 460px; }
.pg-cmp th, .pg-cmp td { padding: 13px clamp(12px, 2vw, 18px); text-align: center; border-top: 1px solid var(--line); }
.pg-cmp thead th { border-top: none; font-weight: 700; color: var(--muted); background: var(--bg-warm); white-space: nowrap; }
.pg-cmp tbody th { text-align: left; font-weight: 600; color: var(--ink-soft); }
.pg-cmp .own { background: #f0fdfa; }
.pg-cmp thead .own { color: var(--accent); border-bottom: 2px solid var(--accent); }
.pg-cmp tbody tr:hover td, .pg-cmp tbody tr:hover th { background: rgba(13,148,136,.04); }
.pg-cmp tbody tr:hover .own { background: #e6fbf6; }
.pg-cmp svg { width: 19px; height: 19px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.pg-cmp .tick { stroke: var(--accent); }
.pg-cmp .cross { stroke: #c9c0b4; }
.pg-cmp .muted { color: var(--faint); font-size: 13px; }

/* ── Illustration frame — a "demo card" with the canvas dot-grid behind a
      bespoke inline SVG (mini architecture, before/after, keyboard, etc.) ── */
.pg-figure {
  position: relative; margin: 32px 0 10px; padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--line); border-radius: 22px; background: #fff;
  background-image: radial-gradient(circle, rgba(72,64,54,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  box-shadow: 0 24px 60px -30px rgba(40,34,28,.32), 0 2px 8px rgba(40,34,28,.05);
  overflow: hidden;
}
.pg-figure svg { display: block; width: 100%; height: auto; }
.pg-figure figcaption { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--faint); }

/* ── Call-to-action band — push visitors into the canvas ─────────────────── */
.pg-cta-band {
  position: relative; overflow: hidden; text-align: center;
  margin: 48px 0 8px; padding: clamp(28px, 4vw, 44px);
  border-radius: 22px; color: #fff;
  background: linear-gradient(150deg, #15837a 0%, #0d9488 52%, #0a766c 100%);
  box-shadow: 0 30px 64px -32px rgba(13,148,136,.75);
}
.pg-cta-band::before {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background: radial-gradient(circle, rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(90% 130% at 50% 0%, #000, transparent 72%);
          mask-image: radial-gradient(90% 130% at 50% 0%, #000, transparent 72%);
}
.pg-cta-band > * { position: relative; }
.pg-cta-band h2 { margin: 0 0 8px; color: #fff; }
.pg-cta-band p { margin: 0 auto 20px; max-width: 50ch; color: rgba(255,255,255,.88); }
.pg-cta-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; line-height: 1;
  color: var(--accent-dark) !important; background: #fff;
  border: none !important; border-radius: 999px; padding: 13px 24px !important;
  text-decoration: none !important;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,.45);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.pg-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(0,0,0,.5); }
.pg-cta-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Vision line — the one big statement on the contact page ─────────────── */
.pg-vision {
  margin: 6px 0 18px;
  font-size: clamp(24px, 4vw, 34px); font-weight: 800; line-height: 1.2;
  letter-spacing: -.01em; color: var(--accent);
}

/* ── Contact form — the home-page feedback form, restyled for these pages.
      Mirrors the .ff-* design in home.css but self-contained here, since the
      content pages load page.css only. Wired up by js/page.js.            ── */
.pg-contact {
  margin: 24px 0 8px;
  padding: clamp(20px, 3vw, 30px);
  background: var(--bg-warm);
  border: 1.5px solid var(--line); border-radius: 18px;
}
.pg-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.pg-form-prompt {
  margin: 0 0 2px; font-size: 14.5px; color: var(--faint); letter-spacing: .01em;
}
.pg-form-row { display: flex; gap: 12px; }
.pg-form-row .pg-input { flex: 1 1 0; min-width: 0; }
.pg-input {
  width: 100%;
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 13px 15px;
  background: #fff;
  border: 1.5px solid #e7e1d8; border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none; appearance: none;
}
.pg-input::placeholder { color: #b3a99c; }
.pg-input:hover { border-color: #d8d1c5; }
.pg-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13,148,136,.16);
}
.pg-msg { resize: vertical; min-height: 58px; line-height: 1.5; }
.pg-send {
  margin-top: 2px; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 15px; font-weight: 700; color: #fff;
  padding: 13px 22px;
  background: var(--accent); border: none; border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(13,148,136,.7);
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease, opacity .18s ease;
}
.pg-send:hover { background: var(--accent-dark); box-shadow: 0 14px 28px -10px rgba(13,148,136,.8); }
.pg-send:active { transform: translateY(1px); }
.pg-send:disabled { opacity: .65; cursor: progress; box-shadow: none; }
.pg-send-arrow {
  width: 18px; height: 18px; fill: none;
  stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}
.pg-send:hover .pg-send-arrow { transform: translateX(3px); }
/* Sent state — collapse the inputs, leave a clean confirmation. */
.pg-form.is-done .pg-form-row,
.pg-form.is-done .pg-msg,
.pg-form.is-done .pg-send,
.pg-form.is-done .pg-form-prompt { display: none; }
.pg-form-status {
  margin: 2px 0 0; min-height: 18px;
  font-size: 14px; letter-spacing: .01em;
}
.pg-form-status.is-pending { color: var(--faint); }
.pg-form-status.is-ok { color: var(--accent); font-weight: 600; }
.pg-form-status.is-err { color: #c0564a; }
.pg-form.is-done .pg-form-status { font-size: 15.5px; }

/* ── Inline-SVG motion helpers ───────────────────────────────────────────
      .draw  → hand-drawn line reveal (set --len to the path length, ~pathLen)
      .float → the gentle bob used by the home page's marks/cards            */
.draw {
  stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300);
  animation: pgDraw 1.5s cubic-bezier(.6,.04,.3,1) forwards;
  animation-delay: var(--dd, .15s);
}
@keyframes pgDraw { to { stroke-dashoffset: 0; } }
.float { animation: pgFloat 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pgFloat { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }

/* ── Scroll-reveal — page.js toggles .in as elements enter the viewport ──── */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--rd, 0s);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .draw { animation: none; stroke-dashoffset: 0; }
  .float { animation: none; }
  .pg-card, .pg-stat { transition: none; }
}

@media (max-width: 540px) {
  .pg-cta-band { border-radius: 18px; }
  .pg-step { padding-left: 52px; }
  .pg-form-row { flex-direction: column; }
  .pg-send { align-self: stretch; }
}