/* Components. Premium-tech look: dark panels with a crimson glow, clean light
   sections, spaced uppercase labels. Values come from tokens.css. */

/* ---------- Header and nav ---------- */
.site-header {
  background-color: var(--c-paper);
  border-bottom: var(--bw) solid var(--c-border);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s-3);
  padding-block: var(--s-1);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--tap);
  color: var(--c-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  letter-spacing: var(--ls-display);
}
.brand img { width: var(--mark-nav); height: auto; aspect-ratio: 65 / 47; }
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.nav li + li { margin-top: 0; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  border-bottom: var(--bw-2) solid transparent;
}
.nav a:hover { border-bottom-color: var(--c-border); }
.nav a[aria-current="page"] {
  color: var(--c-crimson);
  border-bottom-color: var(--c-crimson);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: var(--s-1) var(--s-3);
  font: inherit;
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  text-align: center;
  text-decoration: none;
  color: var(--c-white);
  background-color: var(--c-crimson);
  border: var(--bw-2) solid var(--c-crimson);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.btn:hover { color: var(--c-white); text-decoration: none; transform: translateY(calc(-1 * var(--bw))); box-shadow: var(--shadow); }
.btn:active { transform: none; }
/* On dark: bright accent fill with ink text (white on bright fails AA) */
.on-dark .btn,
.btn--on-dark {
  color: var(--c-ink);
  background-color: var(--c-crimson-bright);
  border-color: var(--c-crimson-bright);
}
.on-dark .btn:hover { color: var(--c-ink); box-shadow: var(--shadow-glow); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin-top: var(--s-3); }
.link-plain { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-semibold); }
.link-plain::after { content: "\2192"; margin-left: var(--s-1); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-8) var(--s-6);
  background-image: var(--grad-hero);
}
@media (min-width: 48em) { .hero { padding-block: var(--s-8) var(--s-6); } }
.hero > .container { position: relative; z-index: 1; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grad-hero);
  opacity: 0;
  animation: glow-drift var(--dur-glow) var(--ease) infinite alternate;
}
@keyframes glow-drift { from { opacity: 0; transform: translateY(0); } to { opacity: 1; transform: translateY(var(--s-1)); } }
.hero__content, .hero__panel { animation: fade-up var(--dur-fade) var(--ease) both; }
.hero__panel { animation-delay: var(--dur-fast); }
@keyframes fade-up { from { opacity: 0; transform: translateY(var(--s-2)); } to { opacity: 1; transform: none; } }
.hero h1 { margin-bottom: var(--s-2); font-size: var(--fs-hero-title); }
.hero h1 em { font-style: normal; color: var(--c-crimson-bright); }
.hero__own { display: inline-block; margin-top: var(--s-1); padding: 0 var(--s-2); border-radius: var(--radius-1); color: var(--c-ink); background-color: var(--c-crimson-bright); box-shadow: var(--shadow-glow); }
.hero__sub strong { color: var(--c-on-dark); font-weight: var(--fw-bold); }
.hero__sub { font-size: var(--fs-20); color: var(--c-on-dark-muted); }
.hero__kicker { max-width: var(--measure); }

.hero__panel {
  position: relative;
  min-height: var(--hero-art-min);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--grad-panel);
  border: var(--bw) solid var(--c-dark-border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-glow);
}
.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hero__mark { position: relative; width: var(--mark-hero); height: auto; filter: drop-shadow(0 0 var(--s-4) var(--c-glow)); }
@media (min-width: 64em) { .hero__panel { min-height: calc(var(--hero-art-min) * 1.5); } .hero__mark { width: calc(var(--mark-hero) * 1.3); } }

/* ---------- Stats row (three true facts) ---------- */
.stats { background-color: var(--c-ink); padding-bottom: var(--s-6); }
.stats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--bw) solid var(--c-line-faint);
  padding-top: var(--s-4);
}
@media (min-width: 48em) { .stats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stats__list li { margin: 0; }
.stats__list li::before { content: ""; display: block; width: var(--stat-rule); height: var(--bw-2); margin-bottom: var(--s-2); background-image: var(--grad-accent); }
.stat__title { display: block; font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); color: var(--c-on-dark); }
.stat__note { display: block; margin-top: var(--s-1); font-size: var(--fs-14); color: var(--c-on-dark-muted); }

/* ---------- Cards ---------- */
.card {
  padding: var(--s-3);
  background-color: var(--c-white);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: var(--s-1); }
.card > :last-child { margin-bottom: 0; }
.card .eyebrow { margin-bottom: var(--s-1); }
.card--featured { border: var(--bw-2) solid var(--c-crimson); }
.on-dark .card {
  background-color: var(--c-ink-2);
  background-image: var(--grad-panel);
  border-color: var(--c-dark-border);
  color: var(--c-on-dark-muted);
  box-shadow: none;
}
.on-dark .card h3, .on-dark .card h2 { color: var(--c-on-dark); }
.on-dark .card--featured { border-color: var(--c-crimson-bright); box-shadow: var(--shadow-glow); }
.on-dark .card .eyebrow { color: var(--c-crimson-bright); }
.card-meta { color: var(--c-muted); font-size: var(--fs-14); }
.on-dark .card-meta { color: var(--c-on-dark-muted); }

/* Option card pros and cons */
.pro-con { margin: 0 0 var(--s-2); padding: 0; list-style: none; }
.pro-con li { padding-left: var(--s-4); position: relative; }
.pro-con li + li { margin-top: var(--s-1); }
.pro-con li::before {
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  color: var(--c-crimson);
}
.pro-con .pro::before { content: "[+]"; }
.pro-con .con::before { content: "[-]"; }
.pro-con strong { color: var(--c-ink); }

/* Checklist */
.checks { list-style: none; padding: 0; margin: 0 0 var(--s-2); }
.checks li { position: relative; padding-left: var(--s-4); }
.checks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fs-20);
  height: var(--fs-20);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-white);
  background-color: var(--c-crimson);
  border-radius: var(--radius-round);
}
.on-dark .checks li::before { color: var(--c-ink); background-color: var(--c-crimson-bright); }


/* ---------- Steps ---------- */
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-6);
  height: var(--s-6);
  margin-bottom: var(--s-1);
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  color: var(--c-white);
  background-color: var(--c-crimson);
  border-radius: var(--radius-round);
}

/* ---------- Plan ---------- */
.plan__price {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-56);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-on-dark);
  margin: var(--s-1) 0;
}
.plan__price small { font-size: var(--fs-20); font-weight: var(--fw-semibold); color: var(--c-on-dark-muted); }
.split { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- FAQ ---------- */
.faq details {
  background-color: var(--c-white);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius-2);
}
.faq details + details { margin-top: var(--s-1); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-1) var(--s-2);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-24);
  color: var(--c-crimson);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 var(--s-2) var(--s-2); }
.faq details > div > :last-child { margin-bottom: 0; }

/* ---------- Dark bands ---------- */
.section.on-dark { background-image: var(--grad-hero); }
.cta-band { text-align: left; }
.cta-band p { color: var(--c-on-dark-muted); }

/* ---------- Form ---------- */
.form { display: grid; gap: var(--s-3); max-width: var(--max-text); }
.field label, .field .field__label { display: block; margin-bottom: var(--s-1); font-weight: var(--fw-semibold); color: var(--c-ink); }
.field .optional { font-weight: var(--fw-regular); color: var(--c-muted); }
.field input, .field select, .field textarea {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-1) var(--s-2);
  font: inherit;
  color: var(--c-ink);
  background-color: var(--c-white);
  border: var(--bw-2) solid var(--c-field-border);
  border-radius: var(--radius-1);
}
.field textarea { min-height: calc(var(--tap) * 3); resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--c-crimson); border-width: var(--bw-3); }
.field__error {
  margin: var(--s-1) 0 0;
  font-weight: var(--fw-semibold);
  color: var(--c-crimson);
}
.field__error:empty { display: none; }
.field__error::before { content: "! "; font-family: var(--font-mono); }
.form-note { font-size: var(--fs-14); color: var(--c-muted); max-width: none; }
.success { max-width: var(--max-text); }
.success[hidden], .form[hidden] { display: none; }
.next-up { max-width: var(--max-text); }

/* ---------- Sticky mobile bar ---------- */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: var(--s-1) var(--gutter) calc(var(--s-1) + env(safe-area-inset-bottom, 0px));
  background-color: var(--c-ink);
  border-top: var(--bw) solid var(--c-dark-border);
}
.sticky-bar .btn { width: 100%; }
@media (min-width: 48em) { .sticky-bar { display: none; } }

/* ---------- Footer ---------- */
/* ---------- Footer: crimson glow and hairline, brand block, link column, contact cards ---------- */
.site-footer { position: relative; overflow: hidden; padding-block: var(--s-8) var(--s-4); background-image: var(--grad-footer); }
.site-footer::before {                      /* hairline along the top edge, fading at both ends */
  content: ""; position: absolute; inset-inline: 0; top: 0; height: var(--bw);
  background-image: linear-gradient(90deg, transparent 0, var(--c-crimson-bright) 50%, transparent 100%);
}
.site-footer::after {                       /* fine dot grid at the edges, as in the web section (wide screens only) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--c-dot) 0, var(--c-dot) var(--dot-r), transparent calc(var(--dot-r) + var(--bw)));
  background-size: var(--dot-gap) var(--dot-gap);
  -webkit-mask-image: var(--mask-sides); mask-image: var(--mask-sides);
}
@media (max-width: 63.99em) { .site-footer::after { display: none; } }
.site-footer > .container { position: relative; z-index: 1; }
.site-footer p { color: var(--c-on-dark-muted); }
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 48em) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 64em) { .footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--s-8); } .footer-brand { grid-column: auto; } }

.footer-brand__link { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.footer-brand__link img { width: var(--mark-footer); height: auto; filter: drop-shadow(0 0 var(--s-3) var(--c-glow)); }
.footer-wordmark { display: grid; line-height: 1.2; font-weight: var(--fw-bold); text-transform: uppercase; color: var(--c-on-dark); }
.footer-wordmark span:first-child { font-size: var(--fs-24); letter-spacing: var(--ls-label); }
.footer-wordmark span:last-child { font-size: var(--fs-14); letter-spacing: var(--ls-wordmark-web); color: var(--c-crimson-bright); }
.footer-brand p { margin: var(--s-2) 0 0; }

.site-footer .footer-title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-crimson-bright); }
.footer-title::after { content: ""; flex: 1; height: var(--bw); background-image: linear-gradient(90deg, var(--c-dark-border), transparent); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li + li { margin-top: 0; }
.footer-links a { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap); font-weight: var(--fw-semibold); text-decoration: none; color: var(--c-on-dark); }
.footer-links a::after { content: "\2192"; color: var(--c-crimson-bright); opacity: 0; translate: calc(-1 * var(--s-1)) 0; transition: opacity var(--dur-base) var(--ease), translate var(--dur-base) var(--ease); }
.footer-links a:hover::after, .footer-links a:focus-visible::after { opacity: 1; translate: 0 0; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.footer-cards { display: grid; gap: var(--s-1); }
.footer-card {
  display: grid; padding: var(--s-1) var(--s-2); text-decoration: none; background-image: var(--grad-panel);
  border: var(--bw) solid var(--c-dark-border); border-radius: var(--radius-2);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}
.footer-card:hover { border-color: var(--c-card-border); box-shadow: var(--shadow-glow); transform: translateY(calc(-1 * var(--bw))); }
.footer-card:focus-visible { border-radius: var(--radius-2); }
.footer-card__label { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-crimson-bright); }
.footer-card__value { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-on-dark); overflow-wrap: break-word; }

.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-top: var(--s-6); padding-top: var(--s-3); border-top: var(--bw) solid var(--c-line-faint); }
.footer-bottom p { margin: 0; max-width: none; font-size: var(--fs-14); }
/* What you get: orbit. Stacked cards by default; a floating ring on wide screens. */
.orbit-section, .section.orbit-section { position: relative; isolation: isolate; padding-bottom: var(--s-6); background-image: var(--grad-sides), var(--grad-web); }
.orbit { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.orbit__hub, .orbit__slot, .web { display: none; }
.orbit__card {
  padding: var(--s-3);
  border: var(--bw-3) solid var(--c-card-border); border-radius: var(--radius-2);
  background-image: var(--grad-panel);
}
.orbit__card h3 { margin-block: 0 var(--s-1); }
.orbit__card p { margin: 0; color: var(--c-on-dark-muted); }

@property --k { syntax: "<number>"; inherits: false; initial-value: 0; }
.orbit__ring { display: grid; gap: var(--s-2); }
@keyframes pulse { 0%, 100% { opacity: 0.55; scale: 0.9; } 50% { opacity: 1; scale: 1.12; } }
@media (min-width: 64em) {
  .orbit {
    position: relative; display: block; margin-inline: auto; margin-top: var(--s-4);
    width: var(--orbit-w); height: var(--orbit-h);
  }
  /* The web: spokes and sagging rings. Cards hang from the outer corners. */
  .orbit__ring { position: absolute; inset: 0; display: block; }
  .orbit-section { overflow-x: clip; }
  .web { display: block; z-index: 0; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: calc(var(--orbit-r) * 2.2); height: calc(var(--orbit-r) * 2.2); overflow: visible; }
  .web path { fill: none; stroke: var(--c-crimson-bright); stroke-opacity: 0.3; stroke-width: var(--bw); vector-effect: non-scaling-stroke; stroke-linecap: round; }
  .web .web__spoke { stroke-opacity: 0.55; transition: stroke var(--dur-base) var(--ease), stroke-opacity var(--dur-base) var(--ease); }
  .web__node, .web__dot { fill: var(--c-crimson-bright); transform-box: fill-box; transform-origin: center; }
  .web__node { fill-opacity: 0.85; }
  .web__dot { fill-opacity: 1; filter: drop-shadow(0 0 var(--s-1) var(--c-glow)); }
  .orbit:has(.orbit__slot:nth-child(1):hover) .s0, .orbit:has(.orbit__card:nth-child(2):focus) .s0,
  .orbit:has(.orbit__slot:nth-child(3):hover) .s1, .orbit:has(.orbit__card:nth-child(4):focus) .s1,
  .orbit:has(.orbit__slot:nth-child(5):hover) .s2, .orbit:has(.orbit__card:nth-child(6):focus) .s2,
  .orbit:has(.orbit__slot:nth-child(7):hover) .s3, .orbit:has(.orbit__card:nth-child(8):focus) .s3,
  .orbit:has(.orbit__slot:nth-child(9):hover) .s4, .orbit:has(.orbit__card:nth-child(10):focus) .s4,
  .orbit:has(.orbit__slot:nth-child(11):hover) .s5, .orbit:has(.orbit__card:nth-child(12):focus) .s5 { stroke: var(--c-crimson-bright); stroke-opacity: 1; }
  .orbit__hub {
    display: grid; justify-items: center; gap: var(--s-1); text-align: center;
    position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; width: var(--hub-size);
    transition: opacity var(--dur-zoom) var(--ease);
  }
  .orbit__hub::before {                 /* pulsing glow: the "brain" */
    content: ""; position: absolute; left: 50%; top: 30%; z-index: -1;
    width: calc(var(--hub-size) * 2); aspect-ratio: 1; translate: -50% -50%;
    border-radius: var(--radius-round);
    background-image: radial-gradient(closest-side, var(--c-glow) 0, var(--c-glow-soft) 55%, transparent 100%);
  }
  .orbit__hub img { width: var(--hub-size); height: auto; }
  .wordmark { margin: 0; display: grid; justify-items: center; font-family: var(--font-display); text-transform: uppercase; }
  .wordmark span:first-child { color: var(--c-on-dark); font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); margin-right: calc(var(--ls-label) * -1); }
  .wordmark span:last-child { color: var(--c-crimson-bright); font-size: var(--fs-14); font-weight: var(--fw-bold); letter-spacing: var(--ls-wordmark-web); margin-right: calc(var(--ls-wordmark-web) * -1); }
  .orbit:has(.orbit__slot:hover) .orbit__hub, .orbit:has(.orbit__card:focus) .orbit__hub { opacity: 0; }

  .orbit__slot, .orbit__card {
    --a: calc(var(--i) * 60deg - 90deg);
    position: absolute; left: 50%; top: 50%;
    width: var(--orbit-card);
    translate: calc(-50% + cos(var(--a)) * var(--orbit-r) * (1 - var(--k))) calc(-50% + sin(var(--a)) * var(--orbit-r) * (1 - var(--k)));
  }
  .orbit__slot { display: block; height: 8rem; margin-top: -1rem; cursor: pointer; z-index: 2; }   /* mouse and touch target: rides the ring with its card */
  .orbit__card {
    z-index: 1; pointer-events: none; padding: var(--s-4);
    width: var(--orbit-zoom); scale: var(--orbit-rest-scale);   /* laid out at full size, scaled down: text never reflows */
    transition: --k var(--dur-zoom) var(--ease), scale var(--dur-zoom) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  }
  .orbit__card h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-28); text-transform: uppercase; letter-spacing: var(--ls-label-tight); line-height: var(--lh-display); }
  .orbit__card p { font-size: var(--fs-20); }
  .orbit__card p {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height var(--dur-zoom) var(--ease), opacity var(--dur-zoom) var(--ease);
  }
  .orbit__slot:hover + .orbit__card, .orbit__card:focus {
    --k: 1; scale: 1;
    z-index: 5;
    border-color: var(--c-crimson-bright); box-shadow: var(--shadow-glow);
    background-image: radial-gradient(70% 80% at 100% 0, var(--c-glow) 0, transparent 70%), var(--grad-panel);
  }
  .orbit__slot:hover + .orbit__card p, .orbit__card:focus p { max-height: 12rem; opacity: 1; color: var(--c-on-dark); }
  .orbit__card:focus { outline: none; }
  .orbit__card:focus-visible { outline: var(--bw-3) solid var(--c-crimson-bright); outline-offset: var(--bw-2); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit__hub::before { animation: none; }
  .orbit__card { transition: none; }
  .orbit__card p, .orbit__hub { transition: none; }
}

/* Divider between the hero and the web */
.divider {
  position: relative; height: var(--divider-h); background-color: var(--c-ink);
  display: grid; place-items: center;
}
.divider::before {                       /* thin line that fades out at both ends */
  content: ""; position: absolute; inset-inline: 0; top: 50%; height: var(--bw);
  background-image: linear-gradient(90deg, transparent 0, var(--c-crimson-bright) 50%, transparent 100%);
}
.divider::after {                        /* soft glow under the line */
  content: ""; position: absolute; inset-inline: 20%; top: 50%; height: var(--s-4); translate: 0 -50%;
  background-image: radial-gradient(closest-side, var(--c-glow-soft) 0, transparent 100%);
}
.divider__gem {
  position: relative; z-index: 1; width: var(--gem); height: var(--gem); rotate: 45deg;
  background-color: var(--c-ink); border: var(--bw-2) solid var(--c-crimson-bright); box-shadow: var(--shadow-glow);
}

.orbit-title { font-size: var(--fs-hero); text-align: center; max-width: none; margin-bottom: 0; }
.orbit-section { padding-top: var(--s-4); }

.orbit-section .orbit-title { max-width: none; }
.section > .container > h2.orbit-title { max-width: none; }

/* Sides of the web section: soft crimson light and a fine dot grid that fades toward the middle */
.orbit-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--c-dot) 0, var(--c-dot) var(--dot-r), transparent calc(var(--dot-r) + var(--bw)));
  background-size: var(--dot-gap) var(--dot-gap);
  -webkit-mask-image: var(--mask-sides); mask-image: var(--mask-sides);
}

@media (min-width: 64em) {
  .orbit__card { display: flex; flex-direction: column; justify-content: center; text-align: center; min-height: var(--orbit-card-h); padding-block: var(--s-3); }
  .orbit__card h3 { margin-bottom: 0; }
  .orbit__slot:hover + .orbit__card h3, .orbit__card:focus h3 { margin-bottom: var(--s-1); }
}

/* Gradual dark-to-light transition: black, deep crimson, then off-white */
.fade-band { height: var(--fade-h); background-image: var(--grad-fade); }

/* How it works: timeline */
.timeline { list-style: none; margin: var(--s-4) 0 var(--s-3); padding: 0; max-width: none; display: grid; gap: var(--s-4); }
.timeline__item { position: relative; margin: 0; padding-left: calc(var(--node) + var(--s-3)); }
.timeline__item .step__num {
  position: absolute; left: 0; top: 0; z-index: 1; width: var(--node); height: var(--node); margin: 0;
  transition: scale var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.timeline__item::before, .timeline__item::after {          /* line down to the next step: grey track, crimson fill on hover */
  content: ""; position: absolute; left: calc(var(--node) / 2 - var(--track) / 2); top: var(--node);
  width: var(--track); height: calc(100% + var(--s-4) - var(--node)); border-radius: var(--radius-pill);
  background-color: var(--c-border);
}
.timeline__item::after { background-image: linear-gradient(to bottom, var(--c-crimson), var(--c-crimson-bright)); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-fade) var(--ease); }
.timeline__item:last-child::before, .timeline__item:last-child::after { display: none; }
.timeline__card {
  padding: var(--s-3); background-color: var(--c-white); border: var(--bw-2) solid var(--c-border); border-radius: var(--radius-2); box-shadow: var(--shadow);
  transition: translate var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.timeline__card h3 { margin-bottom: var(--s-1); }
.timeline__card p { margin: 0; }
.timeline__item:hover .step__num, .timeline__item:focus-within .step__num { scale: 1.18; background-color: var(--c-crimson-bright); color: var(--c-ink); box-shadow: 0 0 0 var(--s-1) var(--c-glow-soft), var(--shadow-glow); }
.timeline__item:hover::after, .timeline__item:focus-within::after { transform: scaleY(1); }
.timeline__item:hover .timeline__card, .timeline__item:focus-within .timeline__card { translate: 0 calc(var(--s-1) * -0.5); border-color: var(--c-crimson); box-shadow: var(--shadow), var(--shadow-glow); }
@media (min-width: 48em) {
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-4); row-gap: 0; margin-top: var(--s-6); }
  .timeline__item { padding: calc(var(--node) + var(--s-3)) 0 0; }
  .timeline__item .step__num { left: 50%; translate: -50% 0; }
  .timeline__item:hover .step__num, .timeline__item:focus-within .step__num { scale: 1.18; }
  .timeline__item::before, .timeline__item::after { left: 50%; top: calc(var(--node) / 2 - var(--track) / 2); width: calc(100% + var(--s-4)); height: var(--track); }
  .timeline__item::after { transform: scaleX(0); transform-origin: left; background-image: linear-gradient(to right, var(--c-crimson), var(--c-crimson-bright)); }
  .timeline__item:hover::after, .timeline__item:focus-within::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .timeline__item .step__num, .timeline__item::after, .timeline__card { transition: none; }
}
@media (min-width: 48em) { .timeline__item { display: flex; flex-direction: column; } .timeline__card { flex: 1; } }

@media (min-width: 64em) { .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 48em) and (max-width: 63.99em) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); }
  .timeline__item:nth-child(even)::before, .timeline__item:nth-child(even)::after { display: none; }
}

/* Pricing card on the home page */
.pricing-title { text-align: center; max-width: none; }
.section > .container > h2.pricing-title { max-width: none; }
.pricing {
  max-width: var(--max-text); margin: var(--s-4) auto 0; padding: var(--s-4);
  border: var(--bw-2) solid var(--c-crimson-bright); border-radius: var(--radius-3);
  background-image: radial-gradient(70% 80% at 100% 0, var(--c-glow) 0, transparent 70%), var(--grad-panel);
  box-shadow: var(--shadow-glow);
}
.pricing .plan__price { margin: var(--s-1) 0 var(--s-2); }
.pricing__setup { margin-top: var(--s-3); color: var(--c-on-dark-muted); }

/* Scroll reveal for light sections. Content is always visible without JS or with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; translate: 0 var(--s-6); transition: opacity var(--dur-reveal) var(--ease), translate var(--dur-reveal) var(--ease); }
  .js .reveal.is-in { opacity: 1; translate: 0 0; }
  .js .timeline__item.reveal:nth-child(2), .js .grid > .reveal:nth-child(2) { transition-delay: 120ms; }
  .js .timeline__item.reveal:nth-child(3), .js .grid > .reveal:nth-child(3) { transition-delay: 240ms; }
  .js .timeline__item.reveal:nth-child(4), .js .grid > .reveal:nth-child(4) { transition-delay: 360ms; }
}

/* Web cards burst out of the logo each time the web scrolls into view (desktop ring only) */
@keyframes burst { from { --k: 1; opacity: 0; scale: 0.15; } to { --k: 0; opacity: 1; scale: var(--orbit-rest-scale); } }
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  .js .orbit:not(.is-in) .orbit__card { opacity: 0; }
  .js .orbit.is-in .orbit__card { animation: burst var(--dur-burst) var(--ease) backwards; animation-delay: var(--arrive, 1500ms); }   /* each card leaves the logo as the web reaches it */

  /* The web grows out from the logo, the same slow growth as the Request a demo arrow: each spoke draws outward, a ring follows as the spokes reach it,
     and every node swells in where a spoke meets a ring. It plays each time the web scrolls into view. */
  .web path { stroke-dasharray: var(--len); }
  .js .orbit:not(.is-in) .web path { stroke-dashoffset: var(--len); }
  .js .orbit:not(.is-in) .web circle { opacity: 0; transform: scale(0); }
  .js .orbit.is-in .web__edge { animation: web-grow var(--w) linear calc(400ms + var(--d) * 2000ms) both; }
  .js .orbit.is-in .web circle { animation: web-node 420ms var(--ease) calc(400ms + var(--d) * 2000ms) both; }
  .js .orbit.is-in .web circle:nth-of-type(3n+2) { animation: web-node 420ms var(--ease) calc(400ms + var(--d) * 2000ms) both, agent-pulse var(--dur-agent) var(--ease) 3.6s infinite; }
}

/* Pricing: two boxes on their own light band, just below How it works */
#how { padding-bottom: var(--s-6); }
#pricing { padding-top: var(--s-6); }
.pricing-grid { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.pricing-grid .pricing { max-width: none; margin: 0; }
.pricing-grid > .card { align-self: start; }

/* Banners under the two plan boxes: Forms on its own, and which one fits */
.pricing--banner { max-width: none; margin: var(--s-3) 0 0; display: grid; gap: var(--s-3); align-items: center; }
.pricing--banner .banner__title { margin: 0 0 var(--s-1); font-size: var(--fs-32); }
.pricing--banner .plan__price { margin: 0; white-space: nowrap; }
.pricing--banner .banner__list { margin: 0; }
.pricing--banner .banner__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.pricing--banner .banner__note { margin: 0; color: var(--c-on-dark-muted); font-size: var(--fs-14); }
.banner { max-width: none; margin-top: var(--s-3); display: grid; gap: var(--s-2) var(--s-4); align-items: start; }
.banner > * { margin: 0; }
.banner__meta { grid-column: 1 / -1; }
.pricing-grid + .pricing--banner + .banner + .banner__after { max-width: none; margin-top: var(--s-3); text-align: center; }
@media (min-width: 48em) {
  .pricing--banner .banner__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-3); }
  .banner--choices { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 64em) {
  .pricing--banner { grid-template-columns: minmax(max-content, 0.9fr) minmax(0, 2fr) minmax(0, 0.9fr); gap: var(--s-4); }
}
@media (min-width: 48em) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
.badge { display: inline-block; padding: 0 var(--s-1); border-radius: var(--radius-pill); color: var(--c-ink); background-color: var(--c-crimson-bright); font-size: var(--fs-12); letter-spacing: var(--ls-label-tight); }
.price-was { color: var(--c-on-dark-muted); font-size: var(--fs-32); text-decoration-thickness: var(--bw-3); }
.price-free { color: var(--c-crimson-bright); font-weight: var(--fw-heavy); }
.pricing__detail { font-size: var(--fs-20); color: var(--c-on-dark); }
.pricing--setup { border-color: var(--c-crimson-bright); }

/* Pricing comparison table */
.compare { margin-top: var(--s-6); }
.compare__title { text-align: center; margin-bottom: var(--s-3); }
.compare__scroll { overflow-x: auto; border: var(--bw) solid var(--c-border); border-radius: var(--radius-2); background-color: var(--c-white); box-shadow: var(--shadow); }
.compare__table { width: 100%; border-collapse: collapse; font-size: var(--fs-16); }
.compare__table th, .compare__table td { padding: var(--s-2) var(--s-3); text-align: left; border-bottom: var(--bw) solid var(--c-border); }
.compare__table thead th { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: var(--ls-label-tight); color: var(--c-muted); background-color: var(--c-paper); }
.compare__table tbody th { font-weight: var(--fw-semibold); color: var(--c-ink); }
.compare__table tbody tr:last-child th, .compare__table tbody tr:last-child td { border-bottom: 0; }
.compare__ours th, .compare__ours td { background-color: var(--c-ink); color: var(--c-on-dark); }
.compare__ours th { color: var(--c-on-dark); }
.compare__note, .compare__sources { max-width: var(--max-text); margin: var(--s-2) auto 0; font-size: var(--fs-14); color: var(--c-muted); }
.compare__sources a { color: var(--c-crimson); }
.compare__table tbody .compare__ours th { color: var(--c-on-dark); }
.compare__title { font-size: var(--fs-24); }

/* Agency comparison story */
.compare__grid { display: grid; gap: var(--s-3); }
@media (min-width: 48em) { .compare__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
.compare__col { padding: var(--s-4); border: var(--bw) solid var(--c-border); border-radius: var(--radius-3); background-color: var(--c-white); box-shadow: var(--shadow); }
.compare__col--ours { border: var(--bw-2) solid var(--c-crimson-bright); background-color: var(--c-ink); box-shadow: var(--shadow-glow); }
.compare__col .eyebrow { margin-bottom: var(--s-2); }
.compare__rows { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-3); margin: 0; align-items: baseline; }
.compare__rows dt { color: var(--c-muted); }
.compare__col--ours .compare__rows dt { color: var(--c-on-dark-muted); }
.compare__rows dd { margin: 0; font-size: var(--fs-24); font-weight: var(--fw-bold); text-align: right; }
.compare__rows dd small { display: block; font-size: var(--fs-14); font-weight: var(--fw-regular); color: var(--c-muted); }
.compare__col--ours .compare__rows dd small { color: var(--c-on-dark-muted); }
.compare__total { font-size: var(--fs-32) !important; padding-top: var(--s-1); border-top: var(--bw) solid var(--c-border); }
.compare__col--ours .compare__total { color: var(--c-crimson-bright); border-top-color: var(--c-dark-border); }
.compare__story { margin: var(--s-4) auto 0; max-width: var(--max-text); text-align: center; font-size: var(--fs-24); color: var(--c-ink); }

/* Why Loonwick: large, positives only */
.why {
  margin-top: var(--s-6); padding: var(--s-6) var(--s-4);
  border: var(--bw-2) solid var(--c-crimson-bright); border-radius: var(--radius-3);
  background-image: radial-gradient(70% 80% at 100% 0, var(--c-glow) 0, transparent 70%), var(--grad-panel);
  box-shadow: var(--shadow-glow);
}
.why__title { font-size: var(--fs-h2); margin-bottom: var(--s-4); }
.why__list { display: grid; gap: var(--s-3); margin: 0 0 var(--s-4); font-size: var(--fs-20); }
@media (min-width: 48em) { .why { padding: var(--s-8) var(--s-8); } .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); } }
.why__list strong { display: block; color: var(--c-on-dark); }

/* Options on one line (wide screens); shorter Why Loonwick box that fills the width */
@media (min-width: 64em) {
  #options .container { max-width: 90rem; }
  #options .grid--options { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
  #options .grid--options .card { padding: var(--s-2); }
  #options .grid--options .card h3 { font-size: var(--fs-16); }
  #options .grid--options .pro-con { font-size: var(--fs-14); }
  #options .why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: var(--fs-16); }
}
.why { margin-top: var(--s-4); padding: var(--s-4); }
.why__title { margin-bottom: var(--s-3); }
.why__list { margin-bottom: var(--s-3); }
@media (min-width: 48em) { .why { padding: var(--s-4) var(--s-6); } }
.why .why__list { max-width: none; width: 100%; }

/* Light-to-dark fade before the final call to action */
.fade-band--down { background-image: linear-gradient(to bottom, var(--c-paper) 0, var(--c-crimson) 45%, var(--c-ink) 100%); }

/* Web tiles: angular, no rounded corners. Two opposite corners are cut; the edge is drawn by an inset panel. */
.orbit__card {
  isolation: isolate; border: 0; border-radius: 0; background-image: none; box-shadow: none;
  background-color: var(--c-card-edge);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.orbit__card::before {
  content: ""; position: absolute; inset: var(--bw-3); z-index: -1; background-image: var(--grad-panel);
  clip-path: polygon(calc(var(--chamfer) - var(--bw-3) * 0.6) 0, 100% 0, 100% calc(100% - var(--chamfer) + var(--bw-3) * 0.6), calc(100% - var(--chamfer) + var(--bw-3) * 0.6) 100%, 0 100%, 0 calc(var(--chamfer) - var(--bw-3) * 0.6));
}
@media (max-width: 63.99em) { .orbit__card { position: relative; } }
@media (min-width: 64em) {
  .orbit__slot:hover + .orbit__card, .orbit__card:focus { background-color: var(--c-crimson-bright); border-color: transparent; box-shadow: none; background-image: none; }
  .orbit__slot:hover + .orbit__card::before, .orbit__card:focus::before { background-image: radial-gradient(70% 80% at 100% 0, var(--c-glow) 0, transparent 70%), var(--grad-panel); }
}

/* Quote form: spam trap and status line */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: var(--s-2) 0 0; color: var(--c-crimson); font-weight: var(--fw-semibold); max-width: none; }
.form-status:empty { display: none; }
.form [aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ---------- Demo page (dark hero with the form in a glowing panel) ---------- */
.hero--demo::after, .hero--plans::after {   /* fine dot grid at the edges, same as the web section */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--c-dot) 0, var(--c-dot) var(--dot-r), transparent calc(var(--dot-r) + var(--bw)));
  background-size: var(--dot-gap) var(--dot-gap);
  -webkit-mask-image: var(--mask-sides); mask-image: var(--mask-sides);
}
@media (max-width: 47.99em) { .hero--demo::after, .hero--plans::after { display: none; } }   /* on phones the dots would sit behind the text */
.demo { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 64em) { .demo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; } }
.demo__intro, .demo__panel { animation: fade-up var(--dur-fade) var(--ease) both; }
.demo__panel { animation-delay: var(--dur-fast); }

.demo__steps { list-style: none; margin: var(--s-4) 0 var(--s-2); padding: 0; max-width: none; display: grid; gap: var(--s-3); }
.demo__steps li { position: relative; display: grid; grid-template-columns: var(--node) minmax(0, 1fr); gap: var(--s-2); margin: 0; }
.demo__steps li + li { margin-top: 0; }
.demo__steps li:not(:last-child)::after {   /* line that links one step to the next */
  content: ""; position: absolute; top: var(--node); bottom: calc(-1 * var(--s-3));
  left: calc((var(--node) - var(--track)) / 2); width: var(--track);
  background-image: linear-gradient(to bottom, var(--c-crimson-bright), transparent); opacity: 0.45;
}
.demo__steps .step__num { width: var(--node); height: var(--node); margin: 0; color: var(--c-ink); background-color: var(--c-crimson-bright); box-shadow: var(--shadow-glow); }
.demo__steps p { margin: 0; color: var(--c-on-dark-muted); }
.demo__steps .demo__step-title { font-size: var(--fs-20); font-weight: var(--fw-semibold); color: var(--c-on-dark); }

.demo__panel {
  position: relative; overflow: hidden; padding: var(--s-3);
  background-image: var(--demo-glow), var(--grad-panel);
  border: var(--bw) solid var(--c-card-border); border-radius: var(--radius-3); box-shadow: var(--shadow-glow);
}
@media (min-width: 48em) { .demo__panel { padding: var(--s-6); } }
.demo__panel::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: var(--bw-2); background-image: var(--grad-accent); }
.demo__mark { position: absolute; top: var(--s-3); right: var(--s-3); width: var(--demo-mark); height: auto; pointer-events: none; filter: drop-shadow(0 0 var(--s-3) var(--c-glow)); }
.demo__body { position: relative; }
.demo__title { margin-right: calc(var(--demo-mark) + var(--s-2)); font-size: var(--fs-28); }
.demo__panel .form { max-width: none; }
.demo__panel .field label { color: var(--c-on-dark); }
.demo__panel .field .optional { color: var(--c-on-dark-muted); }
.demo__panel .field input, .demo__panel .field select, .demo__panel .field textarea { border-color: var(--c-dark-border); transition: box-shadow var(--dur-base) var(--ease); }
.demo__panel .field input:hover, .demo__panel .field select:hover, .demo__panel .field textarea:hover { box-shadow: var(--shadow-glow); }
.demo__panel .field [aria-invalid="true"] { border-color: var(--c-crimson-bright); }
.demo__panel .field__error, .demo__panel .form-status { color: var(--c-crimson-bright); }
.demo__panel .form-note { color: var(--c-on-dark-muted); }
.demo__panel .form .btn { width: 100%; }
.demo__panel .form .btn::after { content: "\2192"; margin-left: var(--s-1); }
@media (min-width: 48em) { .demo__panel .form .btn { width: auto; } }

.demo__panel .success { padding: 0; background: none; border: 0; box-shadow: none; max-width: none; }
.demo__panel .success:focus { outline: none; }
.demo__tick {
  display: inline-flex; align-items: center; justify-content: center; width: var(--node); height: var(--node); margin-bottom: var(--s-2);
  font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--c-ink); background-color: var(--c-crimson-bright);
  border-radius: var(--radius-round); box-shadow: var(--shadow-glow);
}
.demo__panel .success h2 { margin-right: 0; }

/* Business type search: suggestion list under the field */
.req { color: var(--c-crimson); font-weight: var(--fw-bold); }                 /* asterisk on required fields: deep crimson on light, bright on dark */
.demo__panel .req { color: var(--c-crimson-bright); }
.demo__legend { margin: 0 0 var(--s-3); }
.field ::placeholder { color: var(--c-muted); opacity: 1; }   /* grey example text inside the fields */
.field__hint { margin: var(--s-1) 0 0; font-size: var(--fs-14); color: var(--c-muted); max-width: none; }
.demo__panel .field__hint { color: var(--c-on-dark-muted); }
.combo { position: relative; }
.combo__list {
  position: absolute; z-index: 5; inset-inline: 0; top: 100%; margin: var(--s-1) 0 0; padding: var(--s-1);
  max-width: none; max-height: var(--combo-h); overflow-y: auto; list-style: none;
  background-color: var(--c-white); border: var(--bw) solid var(--c-border); border-radius: var(--radius-2); box-shadow: var(--shadow);
}
.combo__list[hidden] { display: none; }
.combo__list li { margin: 0; padding: var(--s-1) var(--s-2); min-height: var(--tap); display: flex; align-items: center; color: var(--c-ink); border-radius: var(--radius-1); border-left: var(--bw-3) solid transparent; cursor: pointer; }
.combo__list li + li { margin-top: 0; }
.combo__list li:hover, .combo__list li[aria-selected="true"] { background-color: var(--c-mist); border-left-color: var(--c-crimson); }
.combo__list mark { background: none; color: var(--c-crimson); font-weight: var(--fw-bold); }
.combo__list .combo__category { justify-content: space-between; gap: var(--s-2); font-weight: var(--fw-semibold); }
.combo__list .combo__category small { flex: none; padding: 0 var(--s-1); font-size: var(--fs-12); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-label-tight); color: var(--c-muted); border: var(--bw) solid var(--c-border); border-radius: var(--radius-pill); }
.combo__list .combo__category + li:not(.combo__category) { margin-top: var(--s-1); border-top: var(--bw) solid var(--c-border); border-top-left-radius: 0; border-top-right-radius: 0; }
.combo__list .combo__empty { color: var(--c-muted); cursor: default; }
.combo__list .combo__empty:hover { background: none; border-left-color: transparent; }

/* ---------- Demo form: progress line, send button, success moment ---------- */
.demo__panel .form .btn { min-height: calc(var(--tap) + var(--s-1)); font-size: var(--fs-20); box-shadow: var(--shadow-glow); }
@media (min-width: 48em) { .demo__panel .form .btn { padding-inline: var(--s-6); } }

/* Progress: the line along the top of the panel fills as the four required fields are completed */
.demo__panel::before { background-image: none; background-color: var(--c-line-faint); }
.demo__panel::after {
  content: ""; position: absolute; top: 0; left: 0; height: var(--bw-2); width: calc(var(--progress, 0) * 100%);
  background-image: var(--grad-accent); transition: width var(--dur-base) var(--ease);
}

/* After sending: the form and its title give way to the confirmation */
.demo__panel.is-done .demo__title, .demo__panel.is-done .demo__legend { display: none; }
.demo__tick { position: relative; animation: tick-in var(--dur-reveal) var(--ease) both; }
.demo__tick::after { content: ""; position: absolute; inset: calc(-1 * var(--s-1)); border: var(--bw-2) solid var(--c-card-border); border-radius: var(--radius-round); animation: pulse var(--dur-pulse) var(--ease) infinite; }
@keyframes tick-in { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }
.demo__panel .success h2 { font-size: var(--fs-h2); }
.success__sent { max-width: none; padding: var(--s-2); color: var(--c-on-dark); background-color: var(--c-glow-soft); border: var(--bw) solid var(--c-card-border); border-radius: var(--radius-2); }
.success__sent[hidden] { display: none; }

/* ---------- Polish: light cards, plans hero ---------- */
.hero--plans .hero__sub { max-width: var(--max-text); }
.hero--plans h1 { max-width: 20ch; }
.pricing-eyebrow { display: block; max-width: none; text-align: center; }
.pricing-grid + .card-meta { max-width: none; margin-top: var(--s-3); text-align: center; }
.section:not(.on-dark) .card { position: relative; overflow: hidden; transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.section:not(.on-dark) .card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: var(--bw-2); background-image: var(--grad-accent-light); opacity: 0; transition: opacity var(--dur-base) var(--ease); }
.section:not(.on-dark) .card:hover, .section:not(.on-dark) .card:focus-within { border-color: var(--c-card-border); box-shadow: var(--shadow), var(--shadow-glow); }
.section:not(.on-dark) .card:hover::before, .section:not(.on-dark) .card:focus-within::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .card.reveal { transition: opacity var(--dur-reveal) var(--ease), translate var(--dur-reveal) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
}
/* ---------- Forms page: sign-in strip, Loonwick Form Agent hero, chips, two ways in ---------- */
/* People who already have a login see this first, apart from the page that is for people finding out about Forms. */
.client-strip { background-color: var(--c-ink-2); border-bottom: var(--bw) solid var(--c-dark-border); }
.client-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); padding-block: var(--s-1); }
.client-strip p { margin: 0; max-width: none; font-size: var(--fs-14); color: var(--c-on-dark-muted); }
.client-strip p strong { color: var(--c-on-dark); }
.client-strip__link {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3);
  font-size: var(--fs-14); font-weight: var(--fw-semibold); text-decoration: none;
  color: var(--c-on-dark); border: var(--bw-2) solid var(--c-crimson-bright); border-radius: var(--radius-pill);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.client-strip__link::after { content: "\2192"; margin-left: var(--s-1); }
.client-strip__link:hover { color: var(--c-ink); background-color: var(--c-crimson-bright); text-decoration: none; }

.btn--outline { color: var(--c-crimson); background-color: transparent; }
.btn--outline:hover { color: var(--c-white); background-color: var(--c-crimson); box-shadow: none; }
.on-dark .btn--outline, .ways__client .btn--outline { color: var(--c-on-dark); background-color: transparent; }
.on-dark .btn--outline:hover, .ways__client .btn--outline:hover { color: var(--c-ink); background-color: var(--c-crimson-bright); box-shadow: var(--shadow-glow); }

.agent-hero { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 64em) { .agent-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-8); } }
.hero--plans .agent-hero h1 { max-width: 24ch; }

.agent-web { display: block; width: 100%; height: auto; margin-bottom: var(--s-2); }
.agent-edges line { stroke: var(--c-crimson-bright); stroke-width: var(--bw); stroke-opacity: 0.35; }
.agent-nodes circle { fill: var(--c-crimson-bright); fill-opacity: 0.85; }
.agent-nodes circle.big { fill-opacity: 1; filter: drop-shadow(0 0 var(--s-1) var(--c-glow)); }

@media (prefers-reduced-motion: no-preference) {
  .agent-edges line, .agent-nodes circle { animation: agent-pulse var(--dur-agent) var(--ease) infinite; }
  .agent-edges line:nth-child(3n+2), .agent-nodes circle:nth-child(3n+2) { animation-delay: calc(var(--dur-stagger) * 4); }
  .agent-edges line:nth-child(3n), .agent-nodes circle:nth-child(3n) { animation-delay: calc(var(--dur-stagger) * 9); }
  .agent-edges line:nth-child(5n+1), .agent-nodes circle:nth-child(5n+1) { animation-delay: calc(var(--dur-stagger) * 14); }
}
@keyframes agent-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.agent-knows { background-image: var(--grad-footer); }
.agent-chips { list-style: none; max-width: none; margin: var(--s-4) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.agent-chips li { margin: 0; padding: calc(var(--s-1) / 2) var(--s-2); font-size: var(--fs-14); color: var(--c-on-dark); background-color: var(--c-glow-soft); border: var(--bw) solid var(--c-card-border); border-radius: var(--radius-pill); }
.agent-chips li + li { margin-top: 0; }
.agent-points { margin-top: var(--s-4); }

/* Two ways in: new visitors on the left (the page's one primary button), existing clients on the right */
.ways__client { background-color: var(--c-ink); background-image: var(--grad-panel); border-color: var(--c-dark-border); color: var(--c-on-dark-muted); }
.ways__client h3 { color: var(--c-on-dark); }
.ways__client .eyebrow { color: var(--c-crimson-bright); }
.ways .card .btn-row { margin-top: var(--s-3); }
@media (max-width: 47.99em) {   /* phones: keep the sign-in strip to one short row */
  .client-strip__inner { flex-wrap: nowrap; }
  .client-strip p { flex: 1 1 auto; min-width: 0; }
  .client-strip p span { display: none; }
  .client-strip__link { flex: none; padding-inline: var(--s-2); }
}

/* The header's "Request a demo" stands out from the plain links as the one filled button in the navigation. */
.nav a.nav__cta {
  padding: 0 var(--s-3); color: var(--c-white); background-color: var(--c-crimson);
  border: var(--bw-2) solid var(--c-crimson); border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.nav a.nav__cta:hover, .nav a.nav__cta[aria-current="page"] { color: var(--c-white); border-color: var(--c-crimson); }
.nav a.nav__cta:hover { transform: translateY(calc(-1 * var(--bw))); box-shadow: var(--shadow); }
.nav a.nav__cta[aria-current="page"] { box-shadow: var(--shadow); }

/* ---------- Forms page: the Form Agent demonstration (describes a form, works, then a full form builds itself and scrolls into view) ---------- */
/* With no motion (or no animation support) this shows the finished state: the request typed, every question drawn. */
.agent-demo.hero__panel { display: block; min-height: 0; padding: var(--s-3); background-image: var(--demo-glow), var(--grad-panel); border-color: var(--c-card-border); }
@media (min-width: 64em) { .agent-demo.hero__panel { min-height: 0; } }
.agent-demo.hero__panel::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: var(--bw-2); background-image: var(--grad-accent); opacity: 1; animation: none; }
.agent-demo__inner { position: relative; }

.demo-ask { margin-bottom: var(--s-2); }
.demo-ask__label { margin: 0 0 var(--s-1); max-width: none; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-on-dark); }
.demo-ask__box { padding: var(--s-1) var(--s-2); background-color: var(--c-ink); border: var(--bw) solid var(--c-dark-border); border-radius: var(--radius-1); box-shadow: var(--shadow-glow); }
.demo-ask__text { display: block; font-size: var(--fs-14); line-height: 1.6; color: var(--c-on-dark); white-space: nowrap; overflow: hidden; }
.demo-ask__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin-top: var(--s-2); }
.demo-ask__go { display: inline-flex; align-items: center; padding: var(--s-1) var(--s-3); font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-ink); background-color: var(--c-crimson-bright); border-radius: var(--radius-pill); box-shadow: var(--shadow-glow); }
.demo-ask__done { flex: 1 1 10rem; font-size: var(--fs-12); line-height: 1.4; color: var(--c-on-dark-muted); }
.demo-ask__done::before { content: "\2713  "; color: var(--c-crimson-bright); font-weight: var(--fw-bold); }

.demo-stage { position: relative; overflow: hidden; border-radius: var(--radius-2); }
.demo-loading { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.demo-loading p { margin: 0; max-width: none; font-size: var(--fs-14); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-label-tight); color: var(--c-on-dark); }
.demo-loading__a, .demo-loading__b { position: absolute; bottom: calc(50% - var(--s-6)); }
.demo-loading .agent-web { margin-bottom: var(--s-8); }

.demo-form { padding: var(--s-3); color: var(--c-ink); background-color: var(--c-white); border-radius: var(--radius-2); box-shadow: var(--shadow); }
.demo-form__title { margin: 0 0 var(--s-2); max-width: none; font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); color: var(--c-ink); }
.demo-field { display: block; margin-bottom: var(--s-2); }
.demo-field__label { display: block; margin-bottom: calc(var(--s-1) / 2); font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-ink); }
.demo-field__label b { color: var(--c-crimson); }
.demo-field__pair, .demo-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); }
.demo-row { margin-bottom: var(--s-2); }
.demo-row .demo-field { margin-bottom: 0; }
.demo-input { display: block; position: relative; height: var(--demo-input-h); background-color: var(--c-white); border: var(--bw) solid var(--c-field-border); border-radius: var(--radius-1); }
.demo-input--tall { height: calc(var(--demo-input-h) * 2); }
.demo-input--select::after, .demo-input--date::after { position: absolute; right: var(--s-2); top: 50%; translate: 0 -50%; font-size: var(--fs-12); color: var(--c-muted); }
.demo-input--select::after { content: "\25BE"; }
.demo-input--date::after { content: "\25A6"; }
.demo-field--rule { margin-left: var(--s-2); padding-left: var(--s-2); border-left: var(--bw-3) solid var(--c-crimson); }
.demo-rule { display: inline-block; margin-left: var(--s-1); padding: 0 var(--s-1); font-size: var(--fs-12); font-style: normal; font-weight: var(--fw-semibold); color: var(--c-crimson); background-color: var(--c-mist); border-radius: var(--radius-pill); }
.demo-choices { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--fs-14); color: var(--c-text); }
.demo-choices > span { display: inline-flex; align-items: center; gap: var(--s-1); }
.demo-choices i { display: inline-block; flex: none; width: var(--fs-16); height: var(--fs-16); border: var(--bw-2) solid var(--c-field-border); border-radius: var(--radius-round); }
.demo-choices i.demo-sq { border-radius: calc(var(--radius-1) / 2); }
.demo-send { display: inline-flex; align-items: center; padding: var(--s-1) var(--s-4); font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-white); background-color: var(--c-crimson); border-radius: var(--radius-pill); }

@media (prefers-reduced-motion: no-preference) {
  .demo-stage { height: var(--demo-stage-h); }
  .demo-loading { display: flex; }
  .agent-demo__inner { animation: demo-cycle var(--dur-demo) linear infinite; }
  .demo-t1 { animation: demo-type-1 var(--dur-demo) linear infinite; }
  .demo-t2 { animation: demo-type-2 var(--dur-demo) linear infinite; }
  .demo-t3 { animation: demo-type-3 var(--dur-demo) linear infinite; }
  .demo-ask__go { animation: demo-press var(--dur-demo) linear infinite; }
  .demo-ask__done { animation: demo-done var(--dur-demo) linear infinite; }
  .demo-loading { animation: demo-load var(--dur-demo) linear infinite; }
  .demo-loading__a { animation: demo-say-a var(--dur-demo) linear infinite; }
  .demo-loading__b { animation: demo-say-b var(--dur-demo) linear infinite; }
  .demo-form { animation: demo-form-in var(--dur-demo) linear infinite, demo-scroll var(--dur-demo) linear infinite; }
  .demo-i0 { animation: demo-pop-0 var(--dur-demo) var(--ease) infinite; }
  .demo-i1 { animation: demo-pop-1 var(--dur-demo) var(--ease) infinite; }
  .demo-i2 { animation: demo-pop-2 var(--dur-demo) var(--ease) infinite; }
  .demo-i3 { animation: demo-pop-3 var(--dur-demo) var(--ease) infinite; }
  .demo-i4 { animation: demo-pop-4 var(--dur-demo) var(--ease) infinite; }
  .demo-i5 { animation: demo-pop-5 var(--dur-demo) var(--ease) infinite; }
  .demo-i6 { animation: demo-pop-6 var(--dur-demo) var(--ease) infinite; }
  .demo-i7 { animation: demo-pop-7 var(--dur-demo) var(--ease) infinite; }
  .demo-i8 { animation: demo-pop-8 var(--dur-demo) var(--ease) infinite; }
  .demo-i9 { animation: demo-pop-9 var(--dur-demo) var(--ease) infinite; }
  .demo-i10 { animation: demo-pop-10 var(--dur-demo) var(--ease) infinite; }
  .demo-i11 { animation: demo-pop-11 var(--dur-demo) var(--ease) infinite; }
  .demo-i12 { animation: demo-pop-12 var(--dur-demo) var(--ease) infinite; }
}
@keyframes demo-cycle { 0% { opacity: 0; } 2%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes demo-type-1 { 0%, 3% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(38, end); } 10%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes demo-type-2 { 0%, 10% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(31, end); } 16%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes demo-type-3 { 0%, 16% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(36, end); } 22%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes demo-press { 0%, 24% { transform: none; } 25.5% { transform: scale(0.94); } 27%, 100% { transform: none; } }
@keyframes demo-done { 0%, 68% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes demo-load { 0%, 26% { opacity: 0.22; } 28%, 35% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes demo-say-a { 0%, 27% { opacity: 0; } 28.5%, 30% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes demo-say-b { 0%, 31% { opacity: 0; } 32.5%, 35% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes demo-form-in { 0%, 36% { opacity: 0; } 37%, 100% { opacity: 1; } }
@keyframes demo-scroll { 0%, 46% { transform: none; } 69%, 100% { transform: translateY(min(0rem, calc(-100% + var(--demo-stage-h)))); } }
@keyframes demo-pop-0 { 0%, 37% { opacity: 0; transform: translateY(var(--s-1)); } 39.5%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-1 { 0%, 39.5% { opacity: 0; transform: translateY(var(--s-1)); } 42%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-2 { 0%, 42% { opacity: 0; transform: translateY(var(--s-1)); } 44.5%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-3 { 0%, 44.5% { opacity: 0; transform: translateY(var(--s-1)); } 47%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-4 { 0%, 47% { opacity: 0; transform: translateY(var(--s-1)); } 49.5%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-5 { 0%, 50% { opacity: 0; transform: translateY(var(--s-1)); } 52.5%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-6 { 0%, 52.5% { opacity: 0; transform: translateY(var(--s-1)); } 55%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-7 { 0%, 55% { opacity: 0; transform: translateY(var(--s-1)); } 57.5%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-8 { 0%, 57.5% { opacity: 0; transform: translateY(var(--s-1)); } 60%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-9 { 0%, 60% { opacity: 0; transform: translateY(var(--s-1)); } 62.5%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-10 { 0%, 62.5% { opacity: 0; transform: translateY(var(--s-1)); } 65%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-11 { 0%, 65% { opacity: 0; transform: translateY(var(--s-1)); } 67.5%, 100% { opacity: 1; transform: none; } }
@keyframes demo-pop-12 { 0%, 67.5% { opacity: 0; transform: translateY(var(--s-1)); } 70%, 100% { opacity: 1; transform: none; } }

/* ---------- Try Loonwick Forms page: the terms tick box and the "are you a person?" check ---------- */
.checkline label { display: flex; align-items: flex-start; gap: var(--s-1); font-weight: var(--fw-regular); }
.checkline input[type="checkbox"] { flex: none; width: var(--fs-20); height: var(--fs-20); min-height: 0; padding: 0; margin: 0.15em 0 0; accent-color: var(--c-crimson-bright); }      /* text boxes are 44px tall; a tick box is not, so it lines up with its words */
.checkline .field__hint, .checkline .field__error { padding-left: calc(var(--fs-20) + var(--s-1)); }              /* the small print lines up under the words, not under the box */
.demo__panel .checkline label, .demo__panel .checkline a { color: var(--c-on-dark); }
.captcha { margin: var(--s-2) 0; }
.captcha:empty { display: none; }

/* Request a demo: "Built on Loonwick Forms" callout beside the form. Text, an arrow drawn as a web of nodes and lines (the same look as the Form Agent web)
   that grows out from its start to its tip, and a glowing badge that comes out of the web's tip and sits over the edge of the form panel.
   The badge is styled like the "Powered by" tag on Loonwick Forms, with a thin red glowing border to set it apart. */
.demo__intro { position: relative; z-index: 2; }
.demo__panel { z-index: 1; }
.forms-callout { position: relative; margin-top: var(--s-6); max-width: 26rem; display: grid; justify-items: start; }
.forms-callout__text { margin: 0 0 var(--s-1); font-size: var(--fs-24); line-height: 1.25; color: var(--c-on-dark-muted); }
.forms-callout__text strong { display: block; color: var(--c-on-dark); font-size: var(--fs-28); }
.forms-callout__link { display: inline-block; margin-top: var(--s-1); }

.forms-callout__arrow { display: block; width: 15rem; height: auto; margin: var(--s-1) 0 0 var(--s-4); overflow: visible; }
.forms-callout__edges line { stroke: var(--c-crimson-bright); stroke-width: var(--bw); stroke-opacity: 0.55; stroke-dasharray: 1; }
.forms-callout__nodes circle { fill: var(--c-crimson-bright); fill-opacity: 0.9; transform-box: fill-box; transform-origin: center; }
.forms-callout__nodes circle.big { fill-opacity: 1; filter: drop-shadow(0 0 var(--s-1) var(--c-glow)); }

.forms-callout__badge {
  position: relative; z-index: 3; justify-self: end; display: inline-flex; align-items: center; gap: var(--s-1);
  margin: calc(-1 * var(--s-2)) 0 calc(-1 * var(--s-6)) auto; padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  border: var(--bw) solid var(--c-crimson-bright); border-radius: var(--radius-pill); background-color: var(--c-ink); color: var(--c-on-dark-muted);
  font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: 1.2; text-decoration: none;
  box-shadow: 0 0 var(--s-1) var(--c-glow), 0 0 var(--s-4) var(--c-glow-soft), inset 0 0 var(--s-2) var(--c-glow-soft);
  transform-origin: 70% 0; transition: box-shadow var(--dur-base) var(--ease);
}
.forms-callout__badge:hover { box-shadow: 0 0 var(--s-2) var(--c-glow), 0 0 var(--s-6) var(--c-glow), inset 0 0 var(--s-2) var(--c-glow); }
.forms-callout__badge img { display: block; width: 2rem; height: auto; filter: drop-shadow(0 0 var(--s-1) var(--c-glow)); }
.forms-callout__name { font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-on-dark); }
.forms-callout__name b { margin-left: var(--s-1); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); color: var(--c-crimson-bright); }

@media (min-width: 64em) {
  .forms-callout { max-width: none; }
  .forms-callout__text { max-width: 26rem; }
  .forms-callout__arrow { width: 17rem; margin-left: var(--s-6); }
  .forms-callout__badge { position: absolute; right: calc(-1 * (var(--s-8) + var(--s-4) + var(--s-1))); bottom: calc(var(--s-1) + var(--s-2)); margin: 0; transform-origin: 0 50%; }
}

/* One continuous motion: each line draws itself and each dot swells in, in order along the arrow, then the badge grows out of the tip. */
@keyframes web-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes web-grow { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }   /* the homepage web: lines drawn at their real on-screen length */
@keyframes web-node { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes badge-emerge { 0% { opacity: 0; transform: scale(0.1); } 55% { opacity: 1; } 78% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .forms-callout__edges line { animation: web-draw 380ms var(--ease) calc(500ms + var(--i) * 95ms) both; }
  .forms-callout__nodes circle { animation: web-node 380ms var(--ease) calc(500ms + var(--i) * 95ms) both; }
  .forms-callout__nodes circle:nth-child(3n+2) { animation: web-node 380ms var(--ease) calc(500ms + var(--i) * 95ms) both, agent-pulse var(--dur-agent) var(--ease) 3s infinite; }
  .forms-callout__badge { animation: badge-emerge 800ms var(--ease) 1900ms both; }
}