/* Pyrra marketing site — ember theme. Tokens mirror legal-site/shared.css. */
:root {
  --bg: #111111;
  --surface: #1a1a1a;
  --surface-2: #221a16;
  --text: #e8e3df;
  --text-dim: #a59b93;
  --heading: #ffffff;
  --accent: #e87c3e;
  --accent-2: #f5a46b;
  --border: #332b25;
  --maxw: 1080px;
  --radius: 16px;
  --shot-rx: 14.8%;
  --shot-ry: 6.8%;
  --font:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    sans-serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: auto;
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--accent-2);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}
h1,
h2,
h3 {
  color: var(--heading);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
}
h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 0.5em;
}
h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.35em;
}
p {
  margin-bottom: 1em;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.75em;
}
/* nav: floating chrome now lives in styles/chrome.css (injected by scripts/site.js) */

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: 0.15s;
}
.btn-primary {
  /* same ember-glass family as the floating .pf-cta in chrome.css */
  background: linear-gradient(
    135deg,
    rgba(255, 158, 92, 0.50),
    rgba(214, 84, 38, 0.32) 55%,
    rgba(255, 128, 64, 0.44)
  );
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  color: #ffe9cf;
  text-shadow: 0 1px 8px rgba(255, 140, 60, 0.35);
  border: 1px solid rgba(255, 200, 150, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 200, 0.4),
    inset 0 -8px 18px -12px rgba(150, 40, 10, 0.55),
    0 8px 28px -12px rgba(238, 118, 60, 0.5);
  transition: transform 0.2s ease, box-shadow 0.25s, border-color 0.25s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 214, 170, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 215, 0.55),
    inset 0 -8px 18px -12px rgba(150, 40, 10, 0.45),
    0 12px 36px -12px rgba(255, 150, 80, 0.7);
  text-decoration: none;
}
.btn-primary::after {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  transform: translateY(-2px) rotate(-35deg);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21l21-9L2 3v7l15 2-15 2v7z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21l21-9L2 3v7l15 2-15 2v7z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.btn-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  /* long-press arms the recording auto-scroll (wireDemoScroll) — suppress
     iOS link callout / text selection during the hold */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.btn-secondary:hover {
  border-color: var(--accent);
  text-decoration: none;
}
/* hold-to-record auto-scroll: duration chips + vanishing countdown overlay */
.scrollrec {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(10, 8, 7, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.scrollrec-label {
  color: var(--text-dim);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.scrollrec-hint {
  color: var(--text-dim);
  font-size: 0.9rem;
  max-width: 42ch;
  text-align: center;
}
.scrollrec-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.scrollrec-chip {
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: #ffe9cf;
  background: rgba(255, 150, 90, 0.14);
  border: 1px solid rgba(255, 190, 140, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.scrollrec-chip:hover {
  background: rgba(255, 150, 90, 0.3);
  border-color: rgba(255, 214, 170, 0.85);
  transform: translateY(-1px);
}
.scrollrec-chip.is-default {
  border-color: rgba(255, 214, 170, 0.9);
  background: rgba(255, 150, 90, 0.24);
}
.scrollrec-count {
  font-size: 6rem;
  font-weight: 800;
  color: #ffe9cf;
  text-shadow: 0 2px 40px rgba(255, 140, 60, 0.6);
}
/* sections */
.section {
  padding: 52px 0;
  border-top: 1px solid var(--border);
}
.section:first-of-type {
  border-top: none;
}
.lead {
  font-size: 1.15rem;
  color: var(--text-dim);
  max-width: 62ch;
}
/* hero */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 32px;
}
.hero-copy h1 {
  margin-bottom: 0.4em;
}
.hero-sub {
  font-size: 1.25rem;
  color: var(--text-dim);
  margin-bottom: 1.5em;
  max-width: 46ch;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-note {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 1em;
}
.hero-media video,
.hero-media img {
  height: 660px;
  width: auto;
  border-radius: var(--shot-rx) / var(--shot-ry);
  margin: 0 auto;
  box-shadow: 0 30px 80px -30px rgba(232, 124, 62, 0.35);
}
/* homepage hero frame: same fixed-geometry treatment as .vidbox. WebKit
   forgets a video's natural size during load() (wireHeroVideo calls it every
   page load), so a width:auto hero flaps ~530px→304px on every refresh. The
   div owns the box — definite height, ratio-derived width — and the video
   just fills it. */
.hero-vid {
  position: relative;
  height: 660px;
  aspect-ratio: 884 / 1920;
  margin: 0 auto;
}
.hero-vid video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* facts list */
.facts {
  list-style: none;
  display: grid;
  /* small enough that all 5 tiles share one row on tablet/desktop — at
     minmax(220px) the fifth (Status) wrapped onto a lonely second row */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 1.25em 0 0;
}
.facts li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.9rem;
}
.facts li b {
  color: var(--heading);
  display: block;
  margin-bottom: 2px;
}
/* loop cards — framed marketing screenshots (self-captioned) */
.loop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.loop-card {
  margin: 0;
  /* fixed-geometry frame like .vidbox/.hero-vid — WebKit ignores lazy images'
     attr aspect ratio pre-decode, so unframed cards grow on load and shove
     everything below them on refresh */
  position: relative;
  aspect-ratio: 720 / 1557;
}
.loop-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--shot-rx) / var(--shot-ry);
  display: block;
}
/* features */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 40px 0;
}
.feature:nth-of-type(even) .feature-media {
  order: 2;
}
/* chapters — themed groups inside #features; alternation restarts per chapter
   because nth-of-type counts only the .feature divs, not the heading elements */
.chapter {
  margin-top: 64px;
}
/* chapter headers are accent-barred single lines so they read as sub-dividers,
   not a repeat of the section's eyebrow+h2 header (double-title fix) */
.chapter-title {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  margin-bottom: 0.2em;
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}
.feature-copy h4 {
  color: var(--heading);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.35em;
}
/* paired features — two short-copy blocks share one row (phone above copy)
   instead of each burning a tall row with a mostly-empty text column */
.feature-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin: 40px 0;
}
.feature-pair .feature {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* card width = the video frame's own width formula, so the copy and the
     phone always share exactly the same width */
  width: min(100%, 39.11vh);
  min-width: 221px;
  margin: 0 auto;
}
.feature-pair .vidbox {
  width: 100%;
  min-width: 0;
}
/* zigzag: the right card leads with its copy and starts lower, so the two
   phones stagger diagonally instead of sitting in an aligned row */
.feature-pair .feature:nth-of-type(even) {
  /* the copy above the phone already provides the diagonal offset; no extra
     margin, so the pair stays compact and balanced */
  flex-direction: column-reverse;
}
/* three-card groups: the lone right card spans both left rows and centers
   vertically between the two left cards — still a zigzag, but an equal split */
.feature-pair:has(.feature:nth-of-type(3)) .feature:nth-of-type(even) {
  grid-row: 1 / 3;
  grid-column: 2; /* definite-row items place before auto ones — without this
                     the spanning card grabs the LEFT column and mirrors the layout */
  align-self: center;
  /* centered card goes video-led — the centering itself provides the split,
     and copy-above would push the phone visibly below the middle */
  flex-direction: column;
}
.feature-pair .feature .feature-media {
  /* neutralize the alternating-row `order: 2` (it would cancel the
     column-reverse above — order sorts before the axis reverses) */
  order: 0;
}
.feature-pair .feature-copy {
  /* the card itself carries the width formula; copy just fills it */
  width: 100%;
}
.feature-copy {
  min-width: 0;
}
.feature-copy p {
  color: var(--text-dim);
}
.shot img,
.shot video {
  border-radius: var(--shot-rx) / var(--shot-ry);
  margin: 0 auto;
}
/* feature media never exceeds the viewport, never shrinks into a thumbnail;
   width stays auto so the 0.46 phone aspect is preserved by the browser */
.feature-media img {
  max-height: 85vh;
  min-height: 480px;
  width: auto;
  max-width: 100%;
}
/* video frames: geometry lives on the DIV, never the <video>. WebKit
   transiently drops a video's natural size during load() and ignores CSS
   aspect-ratio on replaced elements pre-metadata, so any video-derived box
   flashes to min-height when a loop scrolls into view (box 653px → 480px →
   653px, shoving the copy beside it). A plain div has no media state to
   recompute: aspect-ratio is rock solid, the video just fills it.
   width 39.11vh = 85vh × 600/1304 → height caps at 85vh;
   min-width 221px = the old 480px min-height through the same ratio. */
.vidbox {
  position: relative;
  aspect-ratio: 600 / 1304;
  width: min(100%, 39.11vh);
  min-width: 221px;
  margin: 0 auto;
}
.vidbox video,
.vidbox img {
  /* imgs too: WebKit also ignores a lazy <img>'s attr aspect ratio pre-load
     (feat-barcode sat at min-height 480px then grew on decode) */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* fade-in on first playback: the poster lives on the frame as a background
   layer (set by wireLoopVideos), the video starts transparent and fades in
   once frames are actually rendering. Poster == frame 0, so the crossfade is
   content-invisible — it only masks the poster→video swap flash, and keeps
   the poster underneath whenever Safari drops the decoded frame. .fade-armed
   is JS-added, so no-JS and reduced-motion visitors still see the poster. */
.vidbox {
  background-size: cover;
  background-position: center;
  border-radius: var(--shot-rx) / var(--shot-ry);
  /* hero-style glow (same geometry as .hero-media's shadow); per-loop hue
     overrides below — browsers without :has() keep this ember for all */
  box-shadow: 0 30px 80px -30px rgba(232, 124, 62, 0.33);
}
.vidbox:has(video[data-loop$="kickoff"])   { box-shadow: 0 30px 80px -30px rgba(232, 124, 62, 0.35); }
.vidbox:has(video[data-loop$="reveal"])    { box-shadow: 0 30px 80px -30px rgba(255, 99, 72, 0.32); }
.vidbox:has(video[data-loop$="recipes"])   { box-shadow: 0 30px 80px -30px rgba(242, 153, 74, 0.30); }
.vidbox:has(video[data-loop$="cook"])      { box-shadow: 0 30px 80px -30px rgba(226, 68, 47, 0.36); }
.vidbox:has(video[data-loop$="presets"])   { box-shadow: 0 30px 80px -30px rgba(247, 181, 92, 0.28); }
.vidbox:has(video[data-loop$="newday"])    { box-shadow: 0 30px 80px -30px rgba(255, 205, 110, 0.26); }
.vidbox:has(video[data-loop$="batches"])   { box-shadow: 0 30px 80px -30px rgba(186, 196, 96, 0.26); }
.vidbox:has(video[data-loop$="logging"])   { box-shadow: 0 30px 80px -30px rgba(238, 126, 82, 0.32); }
.vidbox:has(video[data-loop$="badges"])    { box-shadow: 0 30px 80px -30px rgba(255, 174, 52, 0.36); }
.vidbox:has(video[data-loop$="nutrients"]) { box-shadow: 0 30px 80px -30px rgba(126, 196, 122, 0.24); }
.vidbox:has(video[data-loop$="insights"])  { box-shadow: 0 30px 80px -30px rgba(156, 132, 224, 0.26); }
.vidbox video.fade-armed {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.vidbox video.fade-armed.is-live {
  opacity: 1;
}
/* comparison table */
.compare-wrap {
  overflow-x: auto;
  margin-top: 24px;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 640px;
}
.compare-table th,
.compare-table td {
  padding: 12px 14px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  background: var(--surface-2);
  color: var(--heading);
}
.compare-table th[scope="row"] {
  background: var(--surface);
  font-weight: 600;
}
.compare-table .yes {
  color: #6fcf7f;
  font-weight: 700;
}
.compare-table .no {
  color: var(--text-dim);
}
.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;
}
/* faq */
.faq {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.faq-item h3 {
  margin-bottom: 0.4em;
}
.faq-item p {
  margin: 0;
  color: var(--text-dim);
}
/* footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
}
/* quiet language row — the manual override for the automatic language redirect */
.footer-langs {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.footer-langs a {
  color: var(--text-dim);
  margin: 0 2px;
}
.footer-langs a:hover {
  color: var(--accent-2);
}
.footer a {
  color: var(--text-dim);
}
.updated {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 8px;
}
/* responsive */
@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero-media {
    order: -1;
  }
  .loop {
    /* stay 3-across as a compact strip — stacked full-width cards cost ~3
       screens of scroll before the features section (Anton, 2026-07-12) */
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .feature {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .feature:nth-of-type(even) .feature-media {
    order: 0;
  }
  .feature-pair {
    display: block;
    margin: 0;
  }
  .feature-pair .feature {
    margin: 40px auto;
  }
  /* stacked single-column features: copy matches the phone width too */
  .feature .feature-copy {
    width: min(100%, 39.11vh);
    min-width: 221px;
    margin-inline: auto;
  }
  .feature-pair .feature:nth-of-type(even) {
    /* single column: back to media-then-copy, no stagger */
    flex-direction: column;
    margin-top: 40px;
  }
}