/* ==========================================================================
   Productivica - productivica.com
   ==========================================================================

   Shared stylesheet for all four pages. Replaces four separate inline <style>
   blocks that had drifted apart from each other.

   WHY IT LOOKS LIKE THIS. The old site was a dark SaaS template: a purple-to-blue
   gradient wordmark, a pulsing radial hero glow, emoji feature icons. The app it
   sells contains none of those things - docs/DESIGN_SYSTEM.md bans gradients and
   gradient text by name, and expo-linear-gradient is not even installed, so the
   premium themes render as flat colour. A site promising a look the product does
   not deliver is the same defect class as copy promising a feature it does not
   have, which this project has been fixing all year.

   So every token below is lifted from src/utils/styles.ts. Same palette, same
   12px radius, same 4/8/12/16/24/32/48 spacing scale, same system font. The
   screenshots sit inside the page instead of fighting it.

   NO WEBFONTS, DELIBERATELY. The old pages pulled Inter from fonts.googleapis.com.
   That transmits every visitor's IP address to Google, which German courts have
   treated as an unlawful transfer, and the site otherwise sets no cookies and runs
   no trackers at all. The app itself uses the OS system font. Using it here costs
   nothing, removes the only third-party request on the site, and is what the
   product actually looks like.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Light palette - src/utils/styles.ts light theme */
  --bg: #f3f4f6;
  --bg-alt: #e5e7eb;
  --surface: #ffffff;
  --surface-raised: #f9fafb;
  --border: #d1d5db;
  --border-soft: #e5e7eb;
  --text: #111827;
  --text-muted: #4b5563;
  --text-faint: #6b7280;
  --primary: #3b82f6;
  --primary-strong: #2563eb;
  --primary-wash: rgba(59, 130, 246, 0.08);
  --success: #10b981;
  --warning: #f59e0b;
  /* The premium theme's gold, used only where the page talks about Premium. */
  --gold: #9a7d24;
  --gold-wash: rgba(154, 125, 36, 0.09);

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* Radii - styles.ts radius scale */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Spacing - styles.ts spacing scale, extended upward for page rhythm */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;
  --s-2xl: 32px;
  --s-3xl: 48px;
  --s-4xl: 72px;
  --s-5xl: 112px;

  /* Type. Small sizes match the app exactly (16/14/12); display sizes are
     web-only and scale with the viewport. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(2.25rem, 5.5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3.2vw, 2.5rem);
  --fs-h3: 1.375rem;
  --fs-lead: clamp(1.0625rem, 1.6vw, 1.25rem);
  --fs-body: 1rem;
  --fs-caption: 0.875rem;
  --fs-label: 0.75rem;

  --measure: 68ch;
  --page: 1120px;

  /* styles.ts motion: base 250ms, decelerate on enter. No overshoot, no spring. */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 250ms;
}

/* Dark palette - src/utils/styles.ts dark theme.
   Defined twice on purpose, and the duplication is the point:
   - the media query is the default, so someone who has never touched the toggle gets their OS
     preference, but it is guarded with :not([data-theme="light"]) so an explicit choice of light
     still wins on a machine set to dark;
   - the attribute selector handles an explicit choice of dark on a machine set to light.
   Any colour whose ONLY definition lived inside the media query would be unreachable for a viewer
   who picked dark manually, which is the bug this shape avoids. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d10;
    --bg-alt: #18181b;
    --surface: #18181b;
    --surface-raised: #27272a;
    --border: #2e2e33;
    --border-soft: #232327;
    --text: #f3f4f6;
    --text-muted: #9ca3af;
    --text-faint: #71717a;
    --primary: #60a5fa;
    --primary-strong: #93c5fd;
    --primary-wash: rgba(96, 165, 250, 0.1);
    --success: #22c55e;
    --warning: #fbbf24;
    --gold: #d4af37;
    --gold-wash: rgba(212, 175, 55, 0.1);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --bg: #0d0d10;
  --bg-alt: #18181b;
  --surface: #18181b;
  --surface-raised: #27272a;
  --border: #2e2e33;
  --border-soft: #232327;
  --text: #f3f4f6;
  --text-muted: #9ca3af;
  --text-faint: #71717a;
  --primary: #60a5fa;
  --primary-strong: #93c5fd;
  --primary-wash: rgba(96, 165, 250, 0.1);
  --success: #22c55e;
  --warning: #fbbf24;
  --gold: #d4af37;
  --gold-wash: rgba(212, 175, 55, 0.1);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--primary-strong);
}

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

svg {
  display: block;
  flex-shrink: 0;
}

/* One visible focus style everywhere. Never removed without a replacement. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection {
  background: var(--primary-wash);
  color: var(--text);
}

.skip-link {
  position: absolute;
  left: var(--s-lg);
  top: -100px;
  z-index: 200;
  padding: var(--s-md) var(--s-lg);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}

.skip-link:focus {
  top: var(--s-lg);
}

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

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--s-xl);
}

.section {
  padding-block: var(--s-5xl);
  border-top: 1px solid var(--border-soft);
}

.section--flush {
  border-top: 0;
}

.section__head {
  max-width: var(--measure);
  margin-bottom: var(--s-3xl);
}

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-md);
}

.section h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--s-lg);
}

/* A head with no lead paragraph would otherwise stack the h2's own bottom
   margin on top of .section__head's, opening a gap the lead sections do not have. */
.section__head h2:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.site-header[data-scrolled="true"] {
  border-bottom-color: var(--border-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
  min-height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}

.wordmark:hover {
  color: var(--text);
}

.wordmark__mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-xl);
}

.nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-caption);
  font-weight: 500;
  padding: var(--s-sm) 0;
}

.nav a:hover {
  color: var(--text);
}

@media (max-width: 720px) {
  .nav--desktop {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  min-height: 46px;
  padding: var(--s-md) var(--s-xl);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn--primary {
  background: var(--primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--primary-strong);
  color: #fff;
}

/* Same two-selector shape as the palette above: the lighter blue used in dark mode needs dark
   text on it to stay readable, and that has to hold for a manual choice too. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--primary,
  :root:not([data-theme="light"]) .btn--primary:hover {
    color: #0b1220;
  }
}

:root[data-theme="dark"] .btn--primary,
:root[data-theme="dark"] .btn--primary:hover {
  color: #0b1220;
}

/* Theme toggle.
   Both icons live in the DOM and CSS decides which is visible, so switching costs no layout work
   and there is no icon swap to mistime. The button is labelled and its state is announced, because
   an icon-only control with no accessible name is the single most common a11y defect there is. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

/* Dark active, by OS default or by explicit choice: offer the sun. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: block;
  }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: none;
  }
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* Explicit light wins back the moon even on an OS set to dark. */
:root[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-md);
}

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

.btn--ghost:hover {
  border-color: var(--text-faint);
  color: var(--text);
}

.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.btn__sub {
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  opacity: 0.85;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  align-items: center;
}

.cta-note {
  font-size: var(--fs-caption);
  color: var(--text-faint);
  margin-top: var(--s-md);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: var(--s-4xl) var(--s-5xl);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s-4xl);
  align-items: center;
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s-3xl);
  }
}

.hero h1 {
  font-size: var(--fs-display);
  margin-bottom: var(--s-xl);
}

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: var(--s-2xl);
}

/* --------------------------------------------------------------------------
   7. Phone frame
   --------------------------------------------------------------------------
   The screenshots are real 1080x2400 captures from a running build. The frame
   is CSS, so no image editing step exists and the shots stay replaceable. */

.phone {
  position: relative;
  width: 100%;
  max-width: 290px;
  margin-inline: auto;
  aspect-ratio: 1080 / 2400;
  border-radius: 34px;
  padding: 9px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-raised);
}

.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 26px;
  background: var(--bg-alt);
}

.phone--lg {
  max-width: 320px;
}

.phone-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-2xl);
  align-items: start;
}

.shot {
  display: grid;
  gap: var(--s-lg);
}

.shot__caption {
  font-size: var(--fs-caption);
  color: var(--text-faint);
  text-align: center;
  max-width: 34ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   8. Feature rows
   --------------------------------------------------------------------------
   Deliberately not three equal cards in a row. Alternating two-column rows
   give each feature its own screenshot and its own reading line. */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-4xl);
  align-items: center;
  padding-block: var(--s-3xl);
}

.feature + .feature {
  border-top: 1px solid var(--border-soft);
}

.feature:nth-child(even) .feature__media {
  order: -1;
}

@media (max-width: 900px) {
  .feature {
    grid-template-columns: 1fr;
    gap: var(--s-xl);
  }
  .feature:nth-child(even) .feature__media {
    order: 0;
  }
}

.feature h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--s-md);
}

.feature p {
  color: var(--text-muted);
  max-width: 52ch;
}

.feature__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--primary-wash);
  color: var(--primary);
  display: grid;
  place-items: center;
  margin-bottom: var(--s-lg);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--text-faint);
  margin-left: var(--s-sm);
  vertical-align: middle;
}

.tag--premium {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--gold-wash);
}

/* --------------------------------------------------------------------------
   9. Cards and lists
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  box-shadow: var(--shadow-card);
}

.card h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--s-sm);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-xl);
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-md);
}

.checklist li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s-md);
  align-items: start;
  color: var(--text-muted);
  font-size: var(--fs-body);
}

.checklist svg {
  margin-top: 3px;
  color: var(--success);
}

.checklist--gold svg {
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   10. Pricing
   -------------------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-xl);
  align-items: start;
}

.plan {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-2xl);
  display: grid;
  gap: var(--s-lg);
}

.plan--premium {
  border-color: var(--gold);
}

.plan__name {
  font-size: var(--fs-h3);
}

.plan__price {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.plan__price span {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0;
}

.price-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-sm);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   11. Honesty callout
   -------------------------------------------------------------------------- */

.note {
  border-left: 3px solid var(--primary);
  background: var(--primary-wash);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-lg) var(--s-xl);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  max-width: var(--measure);
}

.note strong {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border-soft);
  padding-block: var(--s-3xl);
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xl);
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-lg);
}

.site-footer a {
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
  text-decoration: underline;
}

.imprint {
  font-style: normal;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   13. Legal and text pages
   --------------------------------------------------------------------------
   The privacy policy and terms are written as bare semantic HTML with no
   classes, so these rules style the elements directly. */

.doc {
  max-width: 76ch;
  margin-inline: auto;
  padding-block: var(--s-3xl) var(--s-5xl);
}

.doc h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: var(--s-lg);
}

.doc h2 {
  font-size: 1.5rem;
  margin-top: var(--s-3xl);
  margin-bottom: var(--s-md);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--border-soft);
}

.doc h3 {
  font-size: 1.125rem;
  margin-top: var(--s-xl);
  margin-bottom: var(--s-sm);
}

.doc p,
.doc ul,
.doc ol {
  margin-bottom: var(--s-lg);
  color: var(--text-muted);
}

.doc ul,
.doc ol {
  padding-left: var(--s-xl);
}

.doc li {
  margin-bottom: var(--s-sm);
}

.doc strong {
  color: var(--text);
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s-xl);
  font-size: var(--fs-caption);
}

.doc thead th {
  text-align: left;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding: var(--s-md) var(--s-md) var(--s-md) 0;
}

.doc tbody td {
  vertical-align: top;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
  padding: var(--s-md) var(--s-md) var(--s-md) 0;
}

/* A wide table must scroll inside itself, never scroll the page sideways. */
.table-scroll {
  overflow-x: auto;
  margin-bottom: var(--s-xl);
}

.doc__meta {
  font-size: var(--fs-caption);
  color: var(--text-faint);
  padding-bottom: var(--s-xl);
  border-bottom: 1px solid var(--border-soft);
}

/* --------------------------------------------------------------------------
   14. Reveal on scroll
   --------------------------------------------------------------------------
   One transform, one opacity, 250ms, decelerating. Matches the app's motion
   tokens. Sections are visible by default so the page reads correctly with
   JavaScript disabled, and the script opts them into animating. */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }
}