/* Sayso pricing page — theysayso.online/pricing/
   Same duplication pattern as ../creators/creators.css: tokens, fonts and the
   shared nav/button/footer chunks are copied from ../styles.css (with
   relative font paths corrected one level up), rather than @import, so this
   page has no build step and no load-order dependency on the home page CSS. */

/* ---- Self-hosted fonts (no CDN) ---- */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fredoka-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

/* ---- Tokens (matches packages/site/styles.css) ---- */
:root {
  --paper: #FAF8F5;
  --ink: #1C1B1A;
  --ink-soft: #4A4642;
  --stone: #8A8580;
  --mist: #F0ECE7;
  --surface: #FFFFFF;
  --hairline: rgba(0,0,0,.09);
  --card-shadow: 0 18px 44px rgba(28,27,26,.10);
  --card-shadow-sm: 0 6px 18px rgba(28,27,26,.07);

  --verified-teal: #2B6F6A;
  --teal-tint: #EAF2F1;

  --on-light-accent: #1C1B1A;

  --font-display: 'Fredoka', 'Trebuchet MS', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --pad: 20px;
  --stack: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141312;
    --ink: #F2EFEA;
    --ink-soft: #BDB6AE;
    --mist: #2A2724;
    --surface: #1E1C1A;
    --hairline: rgba(255,255,255,.11);
    --card-shadow: 0 18px 44px rgba(0,0,0,.45);
    --card-shadow-sm: 0 6px 18px rgba(0,0,0,.35);
    --verified-teal: #5FB8B0;
    --teal-tint: #16302E;
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
ul { padding: 0; list-style: none; }
a { color: var(--verified-teal); }

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

.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;
}

/* ---- Nav (identical to ../styles.css .nav) ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 60px;
  padding: 0 var(--pad);
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav { background: var(--paper); }
}
.nav-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 20px var(--font-display);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.nav-logo {
  width: 24px;
  height: 24px;
  border-radius: 8px 8px 8px 3px;
  background: var(--surface);
  border: 1.5px solid var(--stone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.nav-logo i {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--stone);
}
.nav-logo i:last-child { margin-top: -4px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  /* More links than a narrow viewport can fit scroll horizontally inside the
     nav instead of clipping off the edge (same technique as ../styles.css). */
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  font: 600 13.5px var(--font-body);
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 999px;
}
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--mist); }
.nav-cta {
  color: var(--paper) !important;
  background: var(--ink);
  padding: 9px 15px !important;
  transition: transform 160ms var(--ease-out);
}
.nav-cta:active { transform: scale(0.97); }
/* Four nav items overflow at 375px and push the CTA off-screen; the scroll
   fallback above keeps it reachable, this makes it visible. Mirrors the same
   block in ../styles.css. */
@media (max-width: 480px) {
  .nav-links { gap: 2px; }
  .nav-links a[href="/brands/"] { display: none; }
  .nav-links a { padding: 8px 6px; font-size: 13px; }
  .nav-cta { padding: 9px 11px !important; }
}

/* ---- Buttons (identical to ../styles.css .btn) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 15px var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background 150ms ease;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: color-mix(in srgb, var(--ink) 88%, var(--paper)); }
  .btn-ghost:hover { background: var(--mist); }
}
.btn:active { transform: scale(0.97); }

/* ---- Shared section furniture ---- */
main > section {
  padding: var(--stack) var(--pad);
  max-width: 1120px;
  margin: 0 auto;
}
h2 {
  font: 600 clamp(25px, 6.4vw, 38px)/1.15 var(--font-display);
  letter-spacing: -0.01em;
}
.section-sub {
  margin-top: 10px;
  font: 400 16px/1.55 var(--font-body);
  color: var(--ink-soft);
  max-width: 52ch;
}

/* ---- Pricing hero ---- */
.pricing-hero { text-align: center; padding-top: 40px; }
.pricing-hero h1 {
  font: 600 clamp(32px, 7.5vw, 48px)/1.1 var(--font-display);
  letter-spacing: -0.015em;
}
.pricing-hero .section-sub { margin-left: auto; margin-right: auto; }

/* ---- Plan cards ---- */
.plan-grid {
  display: grid;
  gap: 20px;
  margin-top: 34px;
}
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px 24px 28px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: var(--card-shadow-sm);
  position: relative;
}
.plan-card--highlight {
  border: 1.5px solid var(--verified-teal);
  box-shadow: var(--card-shadow);
}
.plan-badge {
  position: absolute;
  top: -13px;
  left: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--verified-teal);
  color: var(--paper);
  font: 600 11.5px var(--font-body);
  letter-spacing: .02em;
}
.plan-head { display: flex; flex-direction: column; gap: 4px; }
.plan-eyebrow {
  font: 600 11px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stone);
}
.plan-head h3 {
  font: 600 22px var(--font-display);
  color: var(--ink);
}
.plan-price { margin-top: 6px; display: flex; align-items: baseline; gap: 4px; }
.price-amount { font: 600 34px var(--font-display); color: var(--ink); }
.price-period { font: 500 14px var(--font-body); color: var(--ink-soft); }
.price-note { font: 400 12.5px/1.4 var(--font-body); color: var(--stone); min-height: 1.6em; }

.plan-features {
  display: grid;
  gap: 10px;
  flex: 1 1 auto;
}
.plan-features li {
  padding-left: 22px;
  position: relative;
  font: 400 14.5px/1.5 var(--font-body);
  color: var(--ink-soft);
}
.plan-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--teal-tint);
  border: 1.5px solid var(--verified-teal);
}
.plan-cta { width: 100%; }

.plan-finenote {
  margin-top: 28px;
  font: 400 12.5px/1.5 var(--font-body);
  color: var(--stone);
  max-width: 60ch;
}

/* ---- Für Brands (teaser only — full pricing lives on ../brands/) ---- */
.brands-cta {
  margin-top: 20px;
}
.brand-trust {
  margin-top: 26px;
  font: 400 13.5px/1.55 var(--font-body);
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---- Footer (identical to ../styles.css .foot) ---- */
.foot {
  border-top: 1px solid var(--hairline);
  padding: 30px var(--pad) calc(40px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 16px;
}
.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 18px var(--font-display);
  color: var(--ink);
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font: 400 14px var(--font-body);
}
.foot-links a { color: var(--ink-soft); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-note {
  font: 400 12.5px/1.5 var(--font-body);
  color: var(--stone);
  max-width: 58ch;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .nav-cta { transition: none; }
}

/* ==================================================================
   Wider screens.
   ================================================================== */
@media (min-width: 720px) {
  :root { --pad: 32px; --stack: 88px; }
  .plan-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .plan-grid--pilot { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
}