:root {
  /* Brand tokens — shared chrome: header, footer, legal pages, page grid.
     Same across every Papamoa DSP product; don't make these product-specific. */
  --bg: #f5f4f0;
  --panel: #ffffff;
  --panel2: #efede6;
  --line: #dcd9d0;
  --line-strong: #b9b5a9;
  --fg: #14130f;
  --muted: #635f56;
  --max: 1440px;
  --gutter: 28px;
  --hair: 2px;

  /* Product tokens — this is STRIDENT's identity. A future product overrides
     --product-accent/--product-accent2 (e.g. scoped to its own pages via a
     body class) rather than touching --accent/--accent2 directly below. */
  --product-accent: #ff5a1f;
  --product-accent2: #d9430c;
  --accent: var(--product-accent);
  --accent2: var(--product-accent2);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent2); }
h1, h2, h3 { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: var(--fg); }
h2 { font-size: 1.65rem; margin: 0 0 .6em; }
h3 { font-size: 1.05rem; margin: 0 0 .4em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* header / footer */
header.top { border-bottom: var(--hair) solid var(--line); position: sticky; top: 0; background: rgba(245,244,240,.88); backdrop-filter: blur(10px); z-index: 10; }
header.top .wrap { display: flex; align-items: center; gap: 20px; height: 76px; }
.logo { color: var(--fg); text-decoration: none; font-size: .82rem; letter-spacing: .2em; font-weight: 700; display: flex; align-items: center; gap: 10px; font-family: "Space Grotesk", sans-serif; }
.logo-mark { width: 22px; height: 22px; border-radius: 5px; background: var(--fg); position: relative; flex: none; }
.logo-mark::after { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
nav a { color: var(--muted); text-decoration: none; font-size: .88rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; transition: color .2s; }
nav a:hover, nav a.on { color: var(--fg); }
.nav-cta { margin-left: 8px; padding: 10px 20px; font-size: .82rem; }
/* Header stays one row at any width/zoom: below 900px the nav collapses behind a menu button; unstick when the viewport is short */
.logo { white-space: nowrap; flex: none; }
.nav-cta { white-space: nowrap; flex: none; }
nav a { white-space: nowrap; }
.nav-toggle { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); cursor: pointer; position: relative; flex: none; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px; background: var(--fg); content: ""; }
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -6px; left: 0; margin-left: 0; }
.nav-toggle span::after { top: 6px; left: 0; margin-left: 0; }
@media (max-width: 900px) {
  header.top .wrap { height: 60px; position: relative; }
  header.top .nav-cta { display: none; }
  .nav-toggle { display: block; }
  nav { display: none; position: absolute; top: calc(100% - 4px); right: var(--gutter, 18px); left: auto; min-width: 180px; margin: 0; flex-direction: column; align-items: flex-end; gap: 0; background: var(--bg); border: var(--hair) solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px 18px; text-align: right; }
  header.top .wrap.open nav { display: flex; }
  nav a { padding: 10px 0; }
}
@media (max-width: 640px) { .logo { letter-spacing: .12em; } }
@media (max-height: 520px) { header.top { position: relative; } }
footer { border-top: var(--hair) solid var(--line); margin-top: 96px; padding: 40px 0; color: var(--muted); font-size: .9rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; }
footer a { color: var(--muted); }
footer .copy { margin-left: auto; }

/* hero */
.hero { padding: 56px 0 0; text-align: center; background: var(--bg); }
.grid-frame { position: relative; padding: 64px 24px 56px; }
.grid-frame::before, .grid-frame::after {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); height: var(--hair); background: var(--line);
}
.grid-frame::before { top: 0; }
.grid-frame::after { bottom: 0; }
.corner-mark { position: absolute; width: 9px; height: 9px; background: var(--accent); z-index: 2; }
.corner-mark.tl { top: -4.5px; left: 18px; }
.corner-mark.tr { top: -4.5px; right: 18px; }
.corner-mark.bl { bottom: -4.5px; left: 18px; }
.corner-mark.br { bottom: -4.5px; right: 18px; }
/* Orbitron is STRIDENT's product wordmark treatment, not a brand-wide type
   choice — a future product's hero can use its own display font here. */
.hero h1 { font-family: "Orbitron", "Space Grotesk", sans-serif; font-size: clamp(3rem, 11vw, 6.8rem); margin: 0; font-weight: 800; letter-spacing: .01em; color: var(--fg); }
.hero p.lead { font-size: 1.3rem; color: var(--muted); max-width: 680px; margin: 22px auto 34px; }
.terrain-hero { position: relative; overflow: hidden; min-height: min(78vh, 760px); padding-top: 8vh; background: var(--bg); }
.terrain-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .55; }
.terrain-hero .wrap { position: relative; z-index: 1; }
.terrain-hero .wrap { will-change: transform, opacity; }

/* small square bullet used in labels */
.sq { display: inline-block; width: 6px; height: 6px; background: var(--accent); margin: 0 8px; vertical-align: middle; position: relative; top: -1px; }
.kicker { margin: 0 0 4px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; font-family: "Space Grotesk", sans-serif; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.kicker .sq:first-child { margin-left: 0; }

/* Scroll reveals (only when scroll.js has run and motion is allowed) */
.motion .reveal { opacity: 0; transform: translateY(40px) scale(.98);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms); }
.motion .reveal.in { opacity: 1; transform: none; }
.motion .card.reveal { transform: translateY(50px) rotateX(12deg); transform-origin: top; }
.motion .card.reveal.in { transform: none; }
.motion .card { transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; }
.card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 16px 36px rgba(255,90,31,.12); }
.grid { perspective: 900px; }
.btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-block; padding: 13px 28px; border-radius: 6px; text-decoration: none; font-weight: 700; border: 1px solid var(--line-strong); color: var(--fg); transition: filter .2s, border-color .2s, transform .15s, background .2s; background: var(--panel); }
.btn.pill { border-radius: 999px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:hover { border-color: var(--fg); transform: translateY(-1px); }
.btn.primary:hover { background: var(--accent2); border-color: var(--accent2); }
.small { font-size: .88rem; color: var(--muted); }

/* sections */
section { padding: 72px 0 0; }
.grid-endcap { display: none; }
.shot { aspect-ratio: 16/10; background: var(--panel2); border: 1px dashed var(--line-strong); border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.bracket-frame { position: relative; }
.bracket-frame::before, .bracket-frame::after,
.bracket-frame .bracket { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--fg); pointer-events: none; }
.bracket-frame::before { top: 8px; left: 8px; border-top: 2px solid var(--fg); border-left: 2px solid var(--fg); }
.bracket-frame::after { bottom: 8px; right: 8px; border-bottom: 2px solid var(--fg); border-right: 2px solid var(--fg); }
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 28px; }
.card p { margin: 0; color: var(--muted); }
.stats { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.stats div { text-align: center; flex: 1; min-width: 130px; padding: 28px 16px; border-right: 1px solid var(--line); }
.stats div:last-child { border-right: none; }
.stats b { display: block; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--accent2); }
.stats span { color: var(--muted); font-size: .85rem; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.tags li { border: 1px solid var(--line); border-radius: 99px; padding: 3px 12px; font-size: .9rem; color: var(--muted); }

/* section headers (eyebrow / lead) */
.eyebrow { margin: 0 0 6px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent2); font-family: "Space Grotesk", sans-serif; font-weight: 700; display: flex; align-items: center; }
.eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--accent); margin-right: 8px; }
.section-lead { color: var(--muted); max-width: 620px; margin: 0 0 24px; }

/* bento feature grid: two columns; the screenshot cards run full width */
.bento { grid-template-columns: repeat(2, 1fr); }
.bento .card.span2 { grid-column: 1 / -1; display: flex; flex-direction: column; overflow: hidden; }
.bento .card.span2 > p { max-width: 720px; }
.bento .card.span2 .shot.mini { margin: 24px -28px -28px; }
.shot.mini { aspect-ratio: 21/9; font-size: .85rem; }
.bento .shot.fit { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.bento .shot.fit img { border-radius: 0; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
}

/* sound demos */
.demos { grid-template-columns: repeat(3, 1fr); }
.demo { display: grid; grid-template-columns: 40px 1fr; gap: 12px 14px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; transition: border-color .2s; }
.demo:hover { border-color: var(--line-strong); }
.demo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.demo.playing { border-color: var(--accent); }
.demo-play { width: 40px; height: 40px; border-radius: 50%; background: var(--fg); position: relative; }
.demo-play::before { content: ""; position: absolute; left: 15px; top: 12px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.demo.playing .demo-play { background: var(--accent); }
.demo.playing .demo-play::before { left: 14px; top: 13px; width: 4px; height: 14px; border: 0; background: #fff; box-shadow: 8px 0 0 #fff; }
.demo-text { display: flex; flex-direction: column; min-width: 0; }
.demo-name { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-tag { font-size: .78rem; color: var(--muted); }
.demo-wave { grid-column: 1 / -1; display: flex; align-items: center; gap: 2px; height: 32px; }
.demo-wave i { flex: 1; min-height: 2px; height: calc(var(--h) * 100%); background: var(--line-strong); border-radius: 1px; transition: background .1s; }
.demo-wave i.on { background: var(--accent); }
@media (max-width: 900px) { .demos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

/* testimonial quotes */
.quotes { grid-template-columns: repeat(3, 1fr); }
.quote { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.quote p { margin: 0; color: var(--fg); font-size: 1.02rem; }
.quote .who { color: var(--muted); font-size: .88rem; }
@media (max-width: 900px) { .quotes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

/* FAQ */
.faq { max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px 24px; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent2); font-size: 1.2rem; margin-left: 12px; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 12px 0 0; }

/* closing CTA banner */
.cta-banner { position: relative; margin: 96px 0 0; padding: 80px 40px; border-radius: 10px; background: var(--fg); border: 1px solid var(--fg); text-align: center; overflow: hidden; }
.cta-banner h2 { margin-bottom: 10px; color: #fff; }
.cta-banner p { color: #c9c6bd; max-width: 560px; margin: 0 auto 24px; }
.cta-glow { position: absolute; inset: -40% -10%; z-index: 0; background: radial-gradient(circle at 30% 20%, rgba(255,90,31,.35), transparent 55%), radial-gradient(circle at 75% 80%, rgba(255,90,31,.18), transparent 50%); pointer-events: none; }
.cta-banner .wrap, .cta-banner h2, .cta-banner p, .cta-banner .btns { position: relative; z-index: 1; }
.cta-banner .btns { justify-content: center; }
.cta-banner .btn:not(.primary) { background: transparent; border-color: #4a463c; color: #fff; }
.cta-banner .btn:not(.primary):hover { border-color: #fff; }

/* pricing */
.prices { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.price { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; }
.price.feat { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.price .amt { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 2.4rem; margin: 6px 0; color: var(--accent2); }
.price ul { padding-left: 1.1em; color: var(--muted); flex: 1; }
.price .btn { text-align: center; margin-top: 12px; }

/* prose (legal etc.) */
.prose { max-width: 760px; }
.prose h1 { font-size: 1.8rem; margin-top: 56px; }
.prose h2 { font-size: 1.1rem; margin-top: 2em; }
.prose p, .prose li { color: #3a382f; }
.note { border-left: 3px solid var(--accent); padding: 8px 16px; background: var(--panel); border-radius: 0 6px 6px 0; }

@media (max-width: 640px) {
  :root { --gutter: 18px; }
  footer .copy { margin-left: 0; }
  main > section:not(.cta-banner) { padding-left: 16px; padding-right: 16px; }
}
.motion-lite .reveal { opacity: 0; transition: opacity .8s; transition-delay: calc(var(--i, 0) * 60ms); }
.motion-lite .reveal.in { opacity: 1; }

/* carousel: centre slide in front, neighbours tucked behind it, dimmed and soft.
   Only transform and opacity animate; the blur is a pre-blurred copy of the
   image that fades in, and the dimming is an overlay that fades out. */
/* Full-bleed: the stage spans the window; the centre slide is as large as
   fits (capped at 1400px, below the screenshots' own 1594px, and shorter than the
   screen) so it shows close to native resolution. */
.vcarousel { --w: min(64vw, calc((100svh - 220px) * 1.381), 1400px);
  position: relative; width: 100vw; margin-left: calc(50% - 50vw); user-select: none; touch-action: pan-y; outline: none; }
/* extra height (taken back with negative margins) leaves room for the drop shadow */
.vc-stage { position: relative; height: calc(var(--w) / 1.381 + 240px); margin: -80px 0; overflow: hidden; isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.vc-slide { --ease: cubic-bezier(.65, 0, .35, 1); --dur: 1.1s;
  position: absolute; top: 50%; left: 50%; width: var(--w); aspect-ratio: 1594/1154; margin: 0;
  transform: translate(calc(-50% + var(--p, 0) * 55%), -50%) scale(calc(1 - var(--a, 0) * .28));
  z-index: calc(10 - var(--a, 0)); border-radius: 6px; overflow: hidden; background: #1a1c1c; cursor: pointer;
  box-shadow: 0 50px 90px -20px rgba(0,0,0,.6), 0 18px 36px -8px rgba(0,0,0,.45);
  outline: 3px solid #000; outline-offset: -3px;
  /* z-index eases too, so the stacking swaps at the halfway point, when the
     two slides are the same size and brightness and the swap can't be seen */
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), z-index var(--dur) var(--ease); }
.vc-slide.far { opacity: 0; pointer-events: none; }
.vc-slide.is-active { cursor: default; }
.vc-slide img, .vc-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.vc-slide .vc-soft { filter: blur(2.5px); transform: scale(1.03); opacity: 0; transition: opacity var(--dur) var(--ease); }
.vc-slide::after { content: ""; position: absolute; inset: 0; background: #0b0c0c; opacity: .58; pointer-events: none;
  transition: opacity var(--dur) var(--ease); }
.vc-slide:not(.is-active) .vc-soft { opacity: 1; }
.vc-slide.is-active::after { opacity: 0; }
.vc-fallback { position: absolute; inset: 0; background: linear-gradient(135deg, #2a2d2d, #151717); }
.vc-slide.has-video .vc-fallback { display: none; }
@media (max-width: 700px) {
  .vcarousel { --w: 86vw; }
}
.vc-nav { position: absolute; top: 50%; z-index: 20; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(20,22,22,.55); backdrop-filter: blur(6px); cursor: pointer;
  opacity: .8; transition: opacity .2s, background .2s, transform .2s; }
.vc-nav::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-top: 2px solid #fff; border-left: 2px solid #fff; }
.vc-nav.prev { left: calc(50% - var(--w) / 2 - 64px); } .vc-nav.prev::before { transform: translate(-30%, -50%) rotate(-45deg); }
.vc-nav.next { right: calc(50% - var(--w) / 2 - 64px); } .vc-nav.next::before { transform: translate(-70%, -50%) rotate(135deg); }
.vc-nav:hover { opacity: 1; background: var(--accent); border-color: var(--accent); }
@media (max-width: 700px) { .vc-nav { width: 38px; height: 38px; margin-top: -19px; } .vc-nav.prev { left: 4px; } .vc-nav.next { right: 4px; } }
.shot.fit { border: 1px solid var(--line); background: none; }
.shot.fit img { object-fit: contain; border-radius: 7px; }

/* text + screenshot split section */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
.split-shot img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.5); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 20px; color: var(--muted); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--accent); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } }

/* every screenshot gets a 3px black edge drawn over the image */
.split-shot img, .shot.fit img { outline: 3px solid #000; outline-offset: -3px; }

/* Pre-release: remove at launch along with robots.txt, _headers and the robots meta tags */
.prerelease { background: var(--fg); color: var(--bg, #fff); text-align: center; font-size: .85rem; font-weight: 600; padding: 8px 16px; }
button.btn { font: inherit; font-weight: 700; cursor: pointer; }
.btn[aria-disabled="true"] { pointer-events: none; opacity: .5; }
.price .hash { margin: 14px 0 0; font-size: .75rem; word-break: break-all; }

/* specs */
.specs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.specs > div { padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.specs > div:nth-child(4n) { border-right: none; }
.specs > div:nth-last-child(-n+4) { border-bottom: none; }
.specs h3 { font-size: .95rem; margin: 0 0 12px; }
.specs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.specs li { color: var(--muted); font-size: .88rem; line-height: 1.45; padding-left: 14px; position: relative; }
.specs li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; background: var(--accent); }
@media (max-width: 1000px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
  .specs > div:nth-child(4n) { border-right: 1px solid var(--line); }
  .specs > div:nth-child(2n) { border-right: none; }
  .specs > div:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .specs > div:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 600px) {
  .specs { grid-template-columns: 1fr; }
  .specs > div { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  .specs > div:last-child { border-bottom: none !important; }
}

.legal { flex-basis: 100%; font-size: .78rem; margin: 8px 0 0; }