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

/* The hidden attribute must win over any element's display rule (e.g. the support
   form/button set display, which would otherwise override the UA [hidden] rule). */
[hidden] {
  display: none !important;
}

:root {
  font-family:
    'Manrope',
    sans-serif;

  /* Orbismo palette — vivid teal accent on slate-navy / cool-gray neutrals.
     This is the light scheme; the landing page renders the dark scheme (see body). */
  --primary: #24414f;            /* slate navy — headings & links on light surfaces */
  --on-primary: #ffffff;
  --primary-container: #009d9e;  /* brand teal — logo dot, submit button, dark-mode h1 */
  --on-primary-container: #00211f;

  /* warm accent — chroma matched to the brand teal (OKLCH C=0.108), gold hue.
     Equal-intensity warm sibling of the teal; 9.3:1 on the dark page background. */
  --accent-gold: oklch(0.80 0.108 90);  /* #d9bb69 */

  /* Sphere-hero ramps — teal & gold at stepped OKLCH lightness (same hue/chroma as the
     brand tokens). Read by /sphere-hero.js. *-mid match --primary-container / --accent-gold. */
  --sphere-teal-lo:  #005759;
  --sphere-teal-mid: #009d9e;
  --sphere-teal-hi:  #69d9d9;
  --sphere-gold-lo:  #ac8f3c;
  --sphere-gold-mid: #d9bb69;
  --sphere-gold-hi:  #fadb89;
  --sphere-gold-dim: #b79b4e;

  --secondary: #3c5a5c;
  --on-secondary: #ffffff;
  --secondary-container: #cfe6e6;
  --on-secondary-container: #07201f;

  --tertiary: #1c2b38;           /* lighter slate — surfaces layered on the dark page */
  --on-tertiary: #c9d0d5;        /* cool gray — primary text on the dark page */
  --tertiary-container: #2a3a47;
  --on-tertiary-container: #d6dde2;

  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;

  --surface: #d9dde0;            /* cool gray — light-scheme page background */
  --on-surface: #1a2b38;         /* slate navy — text on light surfaces */
  --surface-container: #c9cfd2;
  --on-surface-variant: #3e4c57;

  --outline: #6b7780;
  --outline-variant: #b2bbc0;

  --shadow: color-mix(in srgb, var(--on-surface) 20%, transparent);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
}
html {
  overflow-x: hidden; /* root scroll container — clip the full-bleed hero's 100vw */
}
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  place-items: center;
  padding: var(--space-6);
  background: #0d1c27;
  color: var(--on-tertiary);
  overflow-x: hidden; /* contain the full-bleed hero's 100vw (avoids a scrollbar) */
}
main.prose {
  max-width: 44rem;
  width: 100%;
  text-align: left;
  align-self: start;
}
main.prose h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0 0 var(--space-5);
}
main.prose h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-2);
}
main.prose p {
  margin: 0 0 var(--space-4);
  line-height: 1.6;
}
main.prose ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  line-height: 1.6;
}
.back {
  display: inline-block;
  margin-bottom: var(--space-5);
  font-size: 0.875rem;
  color: var(--primary);
  text-decoration: none;
}
.back:hover {
  text-decoration: underline;
}
.site-footer {
  justify-self: stretch;
  width: 100%;
  padding-top: var(--space-6);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--on-tertiary) 60%, transparent);
}
.site-footer a {
  color: color-mix(in srgb, var(--on-tertiary) 72%, transparent);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--primary-container);
}

/* Responsive footer columns (#0604) */
.footer-sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  max-width: 60rem;
  margin: 0 auto;
  text-align: left;
}
.footer-col {
  flex: 1 1 9rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-newsletter {
  flex: 2 1 16rem;
}
.footer-heading {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--on-tertiary) 85%, transparent);
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-logo {
  height: 1.75rem;
  width: auto;
  display: block;
}
.footer-brand .social {
  justify-content: flex-start;
  margin-top: var(--space-1);
}
.footer-copy {
  display: block;
  max-width: 60rem;
  margin: var(--space-6) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--on-tertiary) 12%, transparent);
  font-size: 0.75rem;
  text-align: left;
  line-height: 1.8;
}
.footer-sep {
  color: color-mix(in srgb, var(--on-tertiary) 30%, transparent);
  margin: 0 var(--space-1);
}
main {
  max-width: 52rem;
  width: 100%;
  text-align: center;
}
/* Hero band — the animated sphere field is contained to this section (not the whole page).
   Markup: views/index.eta · engine: /sphere-hero.js */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  /* full-bleed: break out of main's max-width so the canvas spans the viewport */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;          /* clip the bleeding cluster to the band */
  min-height: clamp(360px, 56vh, 620px);
  margin-bottom: var(--space-6);
}
#sphere-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;             /* fills the hero box, behind the copy */
  pointer-events: none;
  display: block;
}
.hero-copy {
  position: relative;
  z-index: 1;             /* hero text above the canvas */
  max-width: 38rem;
  margin: 0 auto;
  /* full-bleed hero breaks out of the body gutter, so add it back here
     (matches --space-6 so the copy lines up with the content below) */
  padding-inline: var(--space-6);
  /* block padding keeps the copy off the band's top/bottom edges when the
     content is taller than .hero's min-height and the grid grows to fit */
  padding-block: var(--space-6);
}
.hero-copy h1 {
  font-size: clamp(2.5rem, 6.5vw, 4rem);
  font-weight: 800;
  color: var(--sphere-teal-hi); /* brightest teal — pops against the dark navy/orbs */
  /* navy halo for legibility where text crosses the bright orbs (no visible panel) */
  text-shadow: 0 1px 2px rgba(13, 28, 39, 0.6), 0 0 24px rgba(13, 28, 39, 0.85);
}
.hero-copy .lead {
  color: #ffffff;
  font-size: clamp(1.125rem, 2.2vw, 1.45rem);
  text-shadow: 0 1px 2px rgba(13, 28, 39, 0.65), 0 0 16px rgba(13, 28, 39, 0.85);
}
.hero-cta {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 16px rgba(13, 28, 39, 0.45); /* lift off the animated bg */
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-cta:hover {
  background: var(--sphere-teal-hi);
}
.hero-cta:active {
  transform: translateY(1px);
}
.hero-cta:focus-visible {
  outline: 2px solid var(--sphere-teal-hi);
  outline-offset: 3px;
}

/* Feature blocks (#604) */
.features {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) auto;
  text-align: left;
}
@media (min-width: 48rem) {
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
}
.feature {
  padding: var(--space-5);
  background: color-mix(in srgb, var(--on-tertiary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-tertiary) 14%, transparent);
  border-radius: var(--radius-md);
}
.feature h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--on-tertiary-container);
}
.feature p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* CTA row below the feature boxes */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
  margin-bottom: var(--space-6); /* breathing room before the footer */
}
.cta-row a {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cta-primary {
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.cta-primary:hover {
  background: var(--sphere-teal-hi);
}
.cta-secondary {
  border: 1px solid color-mix(in srgb, var(--on-tertiary) 40%, transparent);
  color: var(--on-tertiary);
}
.cta-secondary:hover {
  background: var(--primary-container);
  border-color: transparent;
  color: var(--on-primary-container);
}
.cta-row a:focus-visible {
  outline: 2px solid var(--sphere-teal-hi);
  outline-offset: 3px;
}

/* 404 page: the CTAs sit inside main.prose, whose link rule (color + underline)
   would otherwise override the button styling. Restore the button colors. */
.error-page .cta-row a { text-decoration: none; }
.error-page .cta-primary { color: var(--on-primary-container); }
.error-page .cta-secondary { color: var(--on-tertiary); }
.error-page .cta-secondary:hover { color: var(--on-primary-container); }

/* Support page — reveal button + contact form */
.support-toggle {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-color: transparent;
  font-weight: 700;
}
.support-toggle:hover {
  background: var(--sphere-teal-hi);
}
.support-form {
  display: grid;
  gap: var(--space-4);
  max-width: 32rem;
  margin-top: var(--space-5);
}
.support-form label {
  display: grid;
  gap: var(--space-2);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--on-tertiary-container);
}
.support-form select,
.support-form textarea {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--on-tertiary) 40%, transparent);
  color: var(--on-tertiary);
}
.support-form textarea {
  background: transparent;
  min-height: 8rem;
  resize: vertical;
}
/* Solid dark field + options so the native dropdown popup stays readable — a transparent
   select renders light text on the OS's light popup background (unreadable). */
.support-form select {
  background-color: var(--tertiary);
}
.support-form select option {
  background-color: var(--tertiary);
  color: var(--on-tertiary);
}
.support-form button[type='submit'] {
  justify-self: start;
}

.social {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.social a {
  display: inline-flex;
  color: color-mix(in srgb, var(--on-tertiary) 60%, transparent);
  transition: color 0.15s ease;
}
.social a:hover {
  color: var(--primary-container);
}
.social svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}
h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
  margin: 0 0 var(--space-2);
  color: var(--primary-container);
}
p {
  margin: 0 0 var(--space-5);
  color: color-mix(in srgb, var(--on-tertiary) 75%, transparent);
}
form {
  display: flex;
  gap: var(--space-2);
}
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
input,
button {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
}
input {
  flex: 1;
  min-width: 0;
  border-color: color-mix(in srgb, var(--on-tertiary) 40%, transparent);
}
input::placeholder {
  color: color-mix(in srgb, var(--on-tertiary) 55%, transparent);
}
button {
  cursor: pointer;
}
button[type='submit'] {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-color: transparent;
  font-weight: 500;
  white-space: nowrap;
}
button[type='submit']:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary-container) 92%, black);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
[role='status'] {
  min-height: 1.25rem;
  margin-top: var(--space-4);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--on-tertiary) 85%, transparent);
}
.cookie-banner {
  position: fixed;
  inset: auto var(--space-4) var(--space-4) var(--space-4);
  max-width: 28rem;
  margin-inline: auto;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--on-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: 0 10px 30px var(--shadow);
  z-index: 100;
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-surface);
}
.cookie-banner p {
  margin: 0;
  color: var(--on-surface-variant);
}
.cookie-banner__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}
.cookie-banner button {
  border-color: var(--outline);
  color: var(--on-surface);
}
.cookie-banner button[data-consent='accepted'] {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-color: transparent;
  font-weight: 500;
}
.cookie-banner button[data-consent='accepted']:hover {
  background: color-mix(in srgb, var(--primary-container) 92%, black);
}
.cookie-banner button[data-consent='rejected'] {
  background: transparent;
  border-color: transparent;
}
.cookie-banner button[data-consent='rejected']:hover {
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
}
.cookie-settings {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  font-size: 0.75rem;
  padding: var(--space-1) var(--space-2);
  background: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  z-index: 100;
}
.cookie-settings[hidden] {
  display: none;
}

/* Legal page additions (#385) */

main.prose h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
}

main.prose ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  line-height: 1.6;
}

main.prose a {
  color: var(--primary);
  text-decoration: underline;
}

main.prose .last-updated {
  color: var(--on-surface-variant);
  font-size: 0.875rem;
  margin-bottom: var(--space-6);
}

main.prose .toc {
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--on-surface) 4%, transparent);
  border-radius: 0.5rem;
  font-size: 0.9375rem;
}
main.prose .toc ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  line-height: 1.5;
}

main.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-4);
  font-size: 0.9375rem;
}
main.prose th,
main.prose td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent);
  line-height: 1.5;
}
main.prose th {
  font-weight: 600;
}

main.prose address {
  font-style: normal;
  margin: 0 0 var(--space-4);
  line-height: 1.6;
}

@media print {
  body {
    background: #fff;
    color: #000;
  }
  .site-header,
  .cookie-banner,
  .cookie-settings,
  .site-footer,
  .toc {
    display: none !important;
  }
  main.prose {
    max-width: 100%;
  }
  main.prose a {
    color: #000;
    text-decoration: none;
  }
  main.prose h1,
  main.prose h2,
  main.prose h3 {
    page-break-after: avoid;
  }
  main.prose table,
  main.prose ul,
  main.prose ol {
    page-break-inside: avoid;
  }
}

/* Universal header (#0604) */
.site-header {
  justify-self: stretch;       /* override body place-items:center */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 0 0 var(--space-5);
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
}
.site-header .brand img {
  height: 1.75rem;
  width: auto;
  display: block;
}
.site-nav {
  display: flex;
  gap: var(--space-5);
}
.site-nav a {
  color: color-mix(in srgb, var(--on-tertiary) 75%, transparent);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.15s ease;
}
.site-nav a:hover {
  color: var(--primary-container);
}
@media (max-width: 30rem) {
  .site-nav {
    gap: var(--space-4);
  }
}

/* Dark-mode prose — legal pages now render on the dark page (#0604) */
main.prose h1 {
  color: var(--primary-container);
}
main.prose h2,
main.prose h3 {
  color: var(--on-tertiary-container);
}
main.prose a {
  color: var(--primary-container);
  text-decoration: underline;
}
main.prose .last-updated {
  color: color-mix(in srgb, var(--on-tertiary) 70%, transparent);
}
main.prose .toc {
  background: color-mix(in srgb, var(--on-tertiary) 6%, transparent);
}
main.prose th,
main.prose td {
  border-bottom: 1px solid color-mix(in srgb, var(--on-tertiary) 14%, transparent);
}

/* Pricing page (#0604) */
main.pricing-page {
  max-width: 75rem;
}
.pricing-intro {
  max-width: 42rem;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--on-tertiary);
}
.pricing {
  display: grid;
  grid-template-columns: 1fr; /* stacked on narrow viewports */
  gap: var(--space-4);
  margin-top: var(--space-6);
  text-align: left;
}
@media (min-width: 64rem) {
  .pricing {
    grid-template-columns: repeat(5, 1fr); /* all side by side when wide */
  }
}
.plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--on-tertiary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-tertiary) 14%, transparent);
  border-radius: var(--radius-md);
}
.plan h2 {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--on-tertiary-container);
}
.plan .tagline {
  margin: 0 0 var(--space-4);
  min-height: 2.6rem; /* reserve ~2 lines so the CTA aligns across cards */
  font-size: 0.875rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--on-tertiary) 75%, transparent);
}
.plan-cta {
  display: block;
  text-align: center;
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
  border: 1px solid color-mix(in srgb, var(--on-tertiary) 40%, transparent);
  border-radius: var(--radius-sm);
  color: var(--on-tertiary);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.plan-cta:hover {
  background: var(--primary-container);
  border-color: transparent;
  color: var(--on-primary-container);
}
.plan .price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.plan .amount {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--on-tertiary-container);
}
.plan .period {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--on-tertiary) 65%, transparent);
}
.plan .price-yearly {
  margin: var(--space-1) 0 var(--space-5);
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--on-tertiary) 65%, transparent);
}
.plan .includes-label {
  margin: 0 0 var(--space-3);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--on-tertiary) 60%, transparent);
}
.plan ul {
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.875rem;
  line-height: 1.45;
}
.plan li::marker {
  color: color-mix(in srgb, var(--on-tertiary) 45%, transparent);
}