/* Paws & Beans — design tokens lifted from the Airo preview.
   Values are the ones the preview actually computed, not eyeballed: the palette was read out
   of :root, so the hosted site and the mock are the same colours rather than nearly. */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --background: 25 58% 6%;
  --foreground: 0 0% 96%;
  --card: 24 52% 11%;
  --card-foreground: 32 100% 97%;
  --primary: 28 64% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 58 64% 53%;
  --muted: 27 58% 15%;
  --muted-foreground: 35 36% 64%;
  --accent: 45 90% 61%;
  --border: 27 51% 24%;
  --destructive: 0 84% 60%;

  --radius: 0.5rem;
  /* Inputs and the buttons beside them get a touch more than cards do — a 0.5rem corner on a
     control this tall reads as square next to the text sitting inside it. */
  --radius-input: 0.85rem;
  --font-heading: 'Press Start 2P', ui-monospace, monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --wrap: 1100px;
}

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

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* The pixel face is charming at display sizes and unreadable at body sizes. It is used for
   headings, badges and buttons only — never for a paragraph. */
h1, h2, h3, .pixel { font-family: var(--font-heading); font-weight: 400; line-height: 1.4; letter-spacing: 0.02em; }

a { color: hsl(var(--accent)); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 1.25rem;
  background: hsl(var(--background) / 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(var(--border));
}
.site-header .brand { display: flex; align-items: center; gap: 0.7rem; color: hsl(var(--foreground)); }
.site-header .brand:hover { text-decoration: none; }
.site-header .brand span { font-family: var(--font-heading); font-size: 0.72rem; }
.site-header nav { display: flex; gap: 1.4rem; font-size: 0.92rem; }
.site-header nav a { color: hsl(var(--muted-foreground)); }
.site-header nav a:hover { color: hsl(var(--accent)); }

/* The hamburger. Hidden on wide screens where the links are already visible, and it is a real
   <button> rather than a styled div so it is focusable and announces its expanded state. */
.nav-toggle {
  display: none;
  background: none; border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  width: 44px; height: 44px;      /* 44 is the smallest reliable touch target */
  cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle .bars { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }

@media (max-width: 640px) {
  .nav-toggle { display: inline-flex; }

  /* The nav becomes a sheet under the header rather than disappearing. It was display:none
     with nothing to replace it, so on a phone the site had no navigation at all. */
  .site-header { flex-wrap: wrap; }
  .site-header nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding-top: 0.5rem;
  }
  .site-header nav a {
    padding: 0.9rem 0.25rem;
    border-top: 1px solid hsl(var(--border));
    font-size: 1rem;
  }
  .site-header nav[data-open="true"] { display: flex; }
}

/* ---- hero ---- */
.hero { position: relative; text-align: center; padding: 6rem 1.25rem 4rem; overflow: hidden; }
.hero h1 { font-size: clamp(1.6rem, 6vw, 3.1rem); color: hsl(var(--accent)); margin: 1.4rem 0 0; }
.hero .tagline { font-size: clamp(1rem, 2.4vw, 1.28rem); color: hsl(var(--foreground) / 0.9); max-width: 42ch; margin: 1.4rem auto 2.2rem; }

.badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-heading); font-size: 0.62rem;
  color: hsl(var(--accent));
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  padding: 0.7rem 1.1rem; border-radius: 999px;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--accent)); }

/* Decorative pixel glyphs scattered behind the hero. aria-hidden and pointer-events:none —
   they are wallpaper, and a screen reader announcing a paw print adds nothing. */
.hero .fleck { position: absolute; opacity: 0.16; pointer-events: none; user-select: none; font-size: 1.6rem; }

.cta-row { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }

.btn {
  font-family: var(--font-heading); font-size: 0.72rem;
  padding: 1.05rem 1.6rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  display: inline-block; text-align: center; min-width: 260px;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.08); }
.btn:active { transform: translateY(0); }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 0 24px hsl(var(--primary) / 0.35); }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.btn-danger { background: hsl(var(--destructive)); color: #fff; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; filter: none; }

/* ---- stats ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 3.5rem auto 0; max-width: 720px; }
.stats .n { font-family: var(--font-heading); font-size: clamp(1rem, 3.4vw, 1.6rem); color: hsl(var(--accent)); }
.stats .l { font-size: 0.85rem; color: hsl(var(--muted-foreground)); margin-top: 0.5rem; }

/* ---- sections ---- */
section { padding: 5.5rem 0; }
section > .wrap > h2 { text-align: center; font-size: clamp(1.05rem, 3vw, 1.6rem); margin: 0 0 3rem; color: hsl(var(--card-foreground)); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.15rem; }

.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.6rem;
}
.card .ico { font-size: 1.7rem; line-height: 1; }
.card h3 { font-size: 0.82rem; margin: 1rem 0 0.7rem; color: hsl(var(--accent)); }
.card p { margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.95rem; }

/* ---- faq ---- */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin-bottom: 0.8rem;
}
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-size: 0.72rem; line-height: 1.7;
  color: hsl(var(--card-foreground));
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: hsl(var(--accent)); font-size: 1.1rem; }
.faq details[open] summary::after { content: '\2212'; }
.faq p { color: hsl(var(--muted-foreground)); margin: 1rem 0 0.2rem; font-size: 0.95rem; }

/* ---- forms ---- */
.form { max-width: 560px; margin: 0 auto; }
.field { margin-bottom: 1.1rem; text-align: left; }
.field label { display: block; font-size: 0.85rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.45rem; }
/* One rule for every text input on the site. The waitlist field used to fall outside this —
   it is not wrapped in a .field, so it inherited nothing and rendered as a raw browser input:
   no padding, no border, no radius, square corners against a rounded button beside it. */
.field input, .field textarea, .inline-form input {
  width: 100%;
  /* 16px minimum on the font size is not a style choice: iOS Safari zooms the whole page when
     you focus an input smaller than that, which throws the layout sideways mid-signup. */
  padding: 1.25rem 1.4rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-input);
  color: hsl(var(--foreground));
  font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.3;
  min-height: 60px;
}
.field input:focus, .field textarea:focus, .inline-form input:focus {
  outline: 2px solid hsl(var(--primary)); outline-offset: 1px;
}
.field input::placeholder, .inline-form input::placeholder { color: hsl(var(--muted-foreground) / 0.75); }
.field textarea { min-height: 150px; resize: vertical; }

.inline-form { display: flex; gap: 0.7rem; max-width: 560px; margin: 0 auto; align-items: stretch; }

/* flex-basis 0 rather than auto, so the input and the button divide the row by their flex
   weights instead of by the input's intrinsic width — otherwise the placeholder's length
   decides the layout. */
.inline-form input { flex: 1 1 0; }

/* Matching the input's own padding, so the two controls are the same height and the row reads
   as one object rather than two that nearly line up. The pixel face has a smaller cap height
   than Inter, so equal padding alone would leave the button visibly shorter. */
.inline-form .btn { min-width: 0; flex: 0 0 auto; padding: 1.25rem 1.6rem; border-radius: var(--radius-input); min-height: 60px; }
@media (max-width: 560px) { .inline-form { flex-direction: column; } .btn { min-width: 0; width: 100%; } }

/* Status line under a form. Never colour alone — the words carry the meaning too, so it still
   reads on a monochrome display and to anyone who cannot separate red from green. */
.form-status { min-height: 1.5rem; margin-top: 0.9rem; font-size: 0.92rem; }
.form-status.ok { color: hsl(var(--secondary)); }
.form-status.err { color: hsl(var(--destructive)); }
.form-status.busy { color: hsl(var(--muted-foreground)); }

/* Honeypot: off-screen rather than display:none, because some bots skip hidden inputs. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- prose (privacy, deletion) ---- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h1 { font-size: clamp(1.1rem, 3.4vw, 1.7rem); color: hsl(var(--accent)); margin-bottom: 0.6rem; }
.prose .updated { color: hsl(var(--muted-foreground)); font-size: 0.88rem; margin-bottom: 2.4rem; }
.prose h2 { font-size: 0.85rem; margin: 2.6rem 0 1rem; color: hsl(var(--card-foreground)); }
.prose p { color: hsl(var(--foreground) / 0.86); }
.prose ul { list-style: none; padding: 0; }
.prose li { color: hsl(var(--muted-foreground)); padding-left: 1.6rem; position: relative; margin-bottom: 0.85rem; }
.prose li::before { content: '\25B8'; position: absolute; left: 0; color: hsl(var(--accent)); }

/* ---- footer ---- */
.site-footer { border-top: 1px solid hsl(var(--border)); padding: 3rem 0 2.4rem; margin-top: 2rem; }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; }
.site-footer p { color: hsl(var(--muted-foreground)); max-width: 34ch; margin: 0; font-size: 0.92rem; }
.site-footer nav { display: flex; gap: 1.3rem; flex-wrap: wrap; font-size: 0.92rem; }
.site-footer nav a { color: hsl(var(--muted-foreground)); }
.site-footer .legal { color: hsl(var(--muted-foreground) / 0.75); font-size: 0.85rem; margin-top: 2.4rem; }

/* Honour a reduced-motion preference: the only motion here is hover lift and the pulsing dot,
   both of which are decoration. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

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