/* =============================================================================
   GooseMind.AI — corporate site styles (black-and-white minimal, light)

   A calm, paper-and-ink system inherited from the OpenGoose teaser and grown
   into a full scrolling marketing page plus legal sub-pages. The only colour
   comes from the official LLM provider marks.

   The decorative network globe is fixed at z-index -1: it shows through the
   transparent hero and marquee, and is covered by every section below them
   (those carry an opaque background), so it reads as an ambient backdrop behind
   the masthead only.

   Sections:
     1. Fonts        — self-hosted Lato (subsetted woff)
     2. Tokens       — light palette + spacing/radius/shadow scale
     3. Reset & base
     4. Layout       — container, section rhythm, section headings
     5. Header / nav / brand
     6. Buttons
     7. Hero
     8. Marquee      — official provider marks, seamless loop
     9. Product pillars
    10. Pricing plans
    11. Trust / security
    12. Prose        — About + legal pages
    13. Contact
    14. Footer
    15. Legal page chrome
    16. Motion + responsive
   ========================================================================== */

/* 1. Fonts ----------------------------------------------------------------- */
@font-face {
  font-family: 'Lato';
  src: url('/assets/fonts/lato-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/assets/fonts/lato-semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/assets/fonts/lato-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens ---------------------------------------------------------------- */
:root {
  --bg: #fdfdfc; /* warm paper */
  --surface: #ffffff;
  --surface-tint: #f6f5ef; /* faint panel for section rhythm */
  --ink: #1a1a1a; /* primary text */
  --muted: #605e57; /* secondary text */
  --faint: #8c897b; /* tertiary text */
  --border: #e6e4dc; /* hairline */
  --border-strong: #d6d3c8;
  --accent: #e8901e; /* goose-beak amber — used sparingly */

  --font: 'Lato', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  --maxw: 1080px; /* content container */
  --maxw-narrow: 720px; /* prose / legal column */
  --pad: clamp(1.25rem, 4vw, 2rem);
  --header-h: 64px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04), 0 1px 3px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 6px 24px rgba(26, 26, 26, 0.07), 0 2px 6px rgba(26, 26, 26, 0.05);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --marquee-duration: 48s;
}

/* 3. Reset & base ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px); /* anchor offset under sticky header */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'kern', 'liga', 'calt';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.icon {
  display: block;
  fill: none;
}

.nowrap {
  white-space: nowrap;
}

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

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

::selection {
  background: rgba(26, 26, 26, 0.12);
}

/* Animated network globe — fixed, decorative backdrop behind the masthead.
   Sits at z-index -1 (above the paper background, below in-flow content). The
   radial mask softens the sphere's silhouette into the page. */
.globe {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.72;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0 52%, transparent 84%);
  mask-image: radial-gradient(circle at 50% 42%, #000 0 52%, transparent 84%);
}

/* 4. Layout ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.container--narrow {
  max-width: var(--maxw-narrow);
}

/* A section is a full-width band; opaque background covers the fixed globe so
   it only shows behind the (transparent) hero + marquee above. */
.section {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.section--pricing,
.section--company {
  background: var(--surface-tint);
}

.section__head {
  max-width: var(--maxw-narrow);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.eyebrow {
  color: var(--faint);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.section__title {
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.section__lede {
  margin-top: 1rem;
  color: var(--muted);
  font-size: clamp(1.02rem, 2vw, 1.15rem);
  line-height: 1.65;
  text-wrap: pretty;
}

/* 5. Header / nav / brand -------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 253, 252, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  min-height: var(--header-h);
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}

/* Goose mark — a poke-able button. Its head-scribble "thinks" (a trace cycles
   through the tangle); on hover the goose perks up and thinks faster. */
.brand__poke {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  line-height: 0;
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.brand__goose {
  width: 32px;
  height: auto;
  display: block;
  transition: transform 0.25s var(--ease-out), filter 0.25s var(--ease-out);
}

.brand__scribble {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.brand__scribble path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30 70;
  animation: scribble-trace 1.7s linear infinite;
}

.brand__poke:hover .brand__goose,
.brand__poke.is-poked .brand__goose {
  transform: scale(1.12) translateY(-1px);
  filter: drop-shadow(0 2px 5px rgba(232, 144, 30, 0.45));
}

.brand__poke:hover .brand__scribble path {
  animation-duration: 0.85s;
}

@keyframes scribble-trace {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

.brand__word {
  font-weight: 700;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}

.site-nav__link {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.16s;
}

.site-nav__link:hover {
  color: var(--ink);
}

.site-header__cta {
  flex: 0 0 auto;
}

/* 6. Buttons --------------------------------------------------------------- */
.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  transition: transform 0.16s var(--ease-out), background-color 0.16s,
    border-color 0.16s, color 0.16s, box-shadow 0.16s;
}

.btn--primary {
  padding: 0.72rem 1.2rem;
  color: var(--bg);
  background: var(--ink);
}

.btn--primary:hover {
  transform: translateY(-1px);
  background: #000;
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--secondary {
  padding: 0.72rem 1.2rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
}

.btn--secondary:hover {
  transform: translateY(-1px);
  border-color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.btn--ghost {
  padding: 0.5rem 0.95rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--border-strong);
  font-size: 0.92rem;
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--surface);
}

.btn__icon {
  fill: none;
  stroke: currentColor;
  transition: transform 0.18s var(--ease-out);
}

.btn--primary:hover .btn__icon {
  transform: translateX(3px);
}

/* 7. Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  max-width: var(--maxw-narrow);
  margin-inline: auto;
  padding: clamp(3rem, 9vw, 6rem) var(--pad) clamp(2rem, 5vw, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.hero__eyebrow {
  color: var(--faint);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__title {
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero__subtitle {
  max-width: 56ch;
  color: var(--muted);
  font-size: clamp(1.02rem, 2.1vw, 1.18rem);
  line-height: 1.62;
  text-wrap: pretty;
}

.hero__subtitle strong {
  color: var(--ink);
  font-weight: 700;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.4rem;
}

/* 8. Marquee --------------------------------------------------------------- */
.models {
  padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(2rem, 5vw, 3rem);
}

.models__eyebrow {
  margin: 0 0 1.1rem;
  text-align: center;
  color: var(--faint);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-inline: var(--pad);
}

.marquee {
  display: flex;
  width: 100%;
  max-width: min(760px, 94vw);
  margin-inline: auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  animation: marquee var(--marquee-duration) linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: 2.4rem;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.02rem;
}

.chip__glyph {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

/* 9. Product pillars ------------------------------------------------------- */
.pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s;
}

.pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-tint);
  color: var(--ink);
  margin-bottom: 1rem;
}

.pillar__icon svg {
  fill: none;
  stroke: currentColor;
}

.pillar__title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.pillar__body {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* 10. Pricing plans -------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: start;
}

.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
}

.plan--featured {
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
}

.plan__badge {
  position: absolute;
  top: -0.7rem;
  left: 1.75rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-pill);
}

.plan__name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.plan__amount {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.plan__period {
  color: var(--faint);
  font-size: 0.9rem;
  font-weight: 600;
}

.plan__tagline {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.98rem;
}

.plan__features {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1 0 auto;
}

.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.plan__check {
  flex: 0 0 auto;
  margin-top: 0.18rem;
  stroke: var(--accent);
}

.plan__cta {
  margin-top: 0.5rem;
  width: 100%;
}

.pricing__note {
  margin-top: 1.75rem;
  max-width: var(--maxw-narrow);
  color: var(--faint);
  font-size: 0.86rem;
  line-height: 1.6;
}

.pricing__note a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pricing__note a:hover {
  color: var(--ink);
}

/* 11. Trust / security ----------------------------------------------------- */
.trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.trust__item {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.trust__icon svg {
  fill: none;
  stroke: currentColor;
}

.trust__title {
  font-size: 1.06rem;
  font-weight: 700;
}

.trust__body {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.trust__body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 12. Prose — About + legal pages ------------------------------------------ */
.prose {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.72;
}

.prose > * + * {
  margin-top: 1.15rem;
}

.prose h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 2.4rem;
  padding-top: 0.2rem;
}

.prose h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 1.6rem;
}

.prose p,
.prose li {
  color: var(--muted);
}

.prose strong {
  color: var(--ink);
  font-weight: 700;
}

.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose ul,
.prose ol {
  margin: 0;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: 2rem;
}

/* 13. Contact -------------------------------------------------------------- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s,
    border-color 0.16s;
}

a.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--surface-tint);
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.contact-card__icon svg {
  fill: none;
  stroke: currentColor;
}

.contact-card__label {
  color: var(--faint);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-card__value {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* 14. Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--surface-tint);
  border-top: 1px solid var(--border);
  padding-block: clamp(2.5rem, 6vw, 3.5rem) 1.75rem;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.brand--footer {
  font-size: 1.05rem;
}

.site-footer__blurb {
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.site-footer__heading {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.2rem;
}

.site-footer__col a {
  color: var(--muted);
  font-size: 0.92rem;
  transition: color 0.16s;
}

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

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 1.5rem;
}

.site-footer__copy,
.site-footer__meta {
  color: var(--faint);
  font-size: 0.83rem;
}

/* 15. Legal page chrome ---------------------------------------------------- */
.legal {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.legal__head {
  max-width: var(--maxw-narrow);
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
}

.legal__title {
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.legal__updated {
  margin-top: 0.75rem;
  color: var(--faint);
  font-size: 0.9rem;
}

.legal__body {
  max-width: var(--maxw-narrow);
  margin-inline: auto;
}

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}

.legal__back:hover {
  color: var(--ink);
}

.legal__back svg {
  fill: none;
  stroke: currentColor;
  transform: rotate(180deg);
}

/* 16. Motion + responsive -------------------------------------------------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.js .animate {
  opacity: 0;
  animation: fade-up 0.6s var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}

/* Tablet — collapse 3-up grids to 2-up, hide centre nav. */
@media (max-width: 860px) {
  .pillars,
  .trust {
    grid-template-columns: repeat(2, 1fr);
  }
  .plans {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
  .plan--featured {
    order: -1; /* surface the recommended plan first when stacked */
  }
  .site-nav {
    display: none;
  }
  .site-footer__top {
    grid-template-columns: 1fr;
  }
}

/* Phone — single column, tighter rhythm. */
@media (max-width: 560px) {
  .pillars,
  .trust,
  .contact-cards {
    grid-template-columns: 1fr;
  }
  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1rem;
  }
  .hero__actions {
    width: 100%;
  }
  .hero__actions .btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .animate {
    opacity: 1;
  }
  html {
    scroll-behavior: auto;
  }
}