/* ============================================================
   ownLineup marketing site: dark, square-cornered, echoes the app
   Brand tokens live here; swap once if the name/palette changes.
   ============================================================ */

:root {
  --bg: #0a0a0c;
  --bg-alt: #101014;
  --panel: #16161c;
  --line: #26262e;
  --text: #f5f5f2;
  --muted: #a2a2ac;
  --accent: #ffd200;          /* the app's yellow accent */
  --accent-text: #0a0a0c;
  --fav: #e5484d;             /* favorited-act red */
  --radius: 0px;              /* the app is hard-cornered; so are we */
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --container: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: 1.02rem; font-weight: 700; }
p { max-width: 68ch; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
s { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 22px;
  min-height: 44px;
  border: 2px solid var(--text);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--text); border-color: var(--text); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--text); color: var(--bg); }
.btn-lg { padding: 16px 28px; font-size: 0.92rem; }

/* ---------- Nav ---------- */
/* The header and footer are rendered once by js/main.js into these mounts (see
   the file header there). #site-header reserves the nav's height so swapping the
   placeholder for the real header shifts nothing as the page loads. */
#site-header { min-height: 68px; }
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 12, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand {
  font-family: var(--font-display); font-weight: 900; font-size: 1.15rem;
  text-decoration: none; letter-spacing: -0.02em;
}
.brand span { color: var(--accent); }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a {
  text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.92rem;
  transition: color 200ms;
}
.nav-links a:hover { color: var(--text); }
.nav-cta { white-space: nowrap; }
.nav-burger { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 10px; }
/* Minimal no-JS fallback nav (lives inside each page's <noscript>). Keep its
   links visible at every width, since the burger it would collapse into needs JS. */
.nav-fallback .nav-links { display: flex; flex-wrap: wrap; row-gap: 8px; }
.nav-fallback .nav-burger { display: none; }

/* ---------- Hero ---------- */
.hero { padding: 84px 0 64px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.eyebrow {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 18px;
}
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 900; margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.lead { font-size: 1.12rem; color: var(--muted); margin-bottom: 30px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.hero-fine { font-size: 0.85rem; color: var(--muted); }

/* ---------- Phone mockup (real app screenshot in a device frame) ---------- */
.hero-phone { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.phone {
  width: 340px; padding: 10px;
  border: 2px solid var(--line); border-radius: 34px;
  background: #060608;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px #000;
}
.phone-screen { position: relative; border-radius: 24px; overflow: hidden; background: #000; }
.phone-screen img, .phone-screen video { display: block; width: 100%; height: auto; }
.phone-caption { font-size: 0.8rem; color: var(--muted); text-align: center; max-width: 300px; }

/* The demo video's pause control: a transparent button covering the whole frame, so a tap or
   click anywhere stops the loop. No visible chrome at rest; a single glyph on a soft disc fades
   in on hover or keyboard focus, and stays up whenever the video is paused so it reads as
   resumable. Covers the frame, so the touch target is the whole phone screen. */
.video-toggle {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  margin: 0; padding: 0; border: 0; background: transparent;
  color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.video-toggle-glyph {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(10, 10, 12, 0.55);
  opacity: 0; transition: opacity 200ms;
}
.video-toggle:hover .video-toggle-glyph,
.video-toggle:focus-visible .video-toggle-glyph,
.video-toggle.is-paused .video-toggle-glyph { opacity: 1; }
.video-toggle .glyph-play { display: none; }
.video-toggle.is-paused .glyph-play { display: block; }
.video-toggle.is-paused .glyph-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .video-toggle-glyph { transition: none; } }
/* An author `display` beats the UA stylesheet's [hidden] rule, so restate it. Without this the
   control shows before js/main.js wires it up, and stays dead if the script never runs. */
.video-toggle[hidden] { display: none; }

/* ---------- Trust strip ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.trust p { max-width: none; text-align: center; padding: 18px 0; color: var(--muted); font-size: 0.95rem; }
.trust strong { color: var(--text); }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900; margin-bottom: 16px; }
.section-sub { color: var(--muted); margin-bottom: 44px; }

/* ---------- Features ---------- */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.feature { background: var(--bg-alt); padding: 28px; }
.feature h3 { margin-bottom: 10px; color: var(--accent); }
.feature p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Admin ---------- */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.admin-copy > p { color: var(--muted); margin-bottom: 24px; }
.checklist { list-style: none; }
.checklist li {
  padding: 10px 0 10px 32px; position: relative; border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}
.checklist li::before {
  content: ''; position: absolute; left: 4px; top: 17px;
  width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
/* Real screen recording of the admin editor (assets/admin-demo.*, scripts/record-admin-video.mjs).
   .admin-screen is the positioning context for the shared .video-toggle overlay, and the element
   that scrolls when the wide 2:1 capture overflows a phone. */
.admin-mock { border: 1px solid var(--line); }
.admin-screen { position: relative; }
.admin-mock img, .admin-mock video { display: block; width: 100%; height: auto; }

/* ---------- Steps ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; counter-reset: step; }
.steps li { background: var(--panel); border: 1px solid var(--line); padding: 28px; }
.step-n {
  display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
  border: 2px solid var(--accent); color: var(--accent);
  font-family: var(--font-display); font-weight: 700; margin-bottom: 16px;
}
.steps h3 { margin-bottom: 10px; }
.steps p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card {
  background: var(--panel); border: 1px solid var(--line); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 6px; position: relative;
}
.price-featured { border: 2px solid var(--accent); }
.price-flag {
  position: absolute; top: -13px; left: 24px;
  background: var(--accent); color: var(--accent-text);
  font-family: var(--font-display); font-size: 0.58rem; font-weight: 700; padding: 4px 10px;
}
.price-card h3 { font-size: 1.1rem; }
.price { margin-top: 6px; }
.price strong { font-family: var(--font-display); font-size: 1.7rem; font-weight: 900; }
.price span { color: var(--muted); font-size: 0.9rem; margin-left: 6px; }
.price-setup { color: var(--muted); font-size: 0.82rem; margin-bottom: 14px; }
.price-card ul { list-style: none; margin: 8px 0 24px; flex: 1; }
.price-card li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; color: #cfcfd6; }
.price-card .btn { text-align: center; }
.pricing-note { color: var(--muted); font-size: 0.9rem; margin-top: 28px; max-width: none; text-align: center; }
.pricing-note strong { color: var(--accent); }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 780px; }
.faq-wrap details { border-bottom: 1px solid var(--line); }
.faq-wrap summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
}
.faq-wrap summary::-webkit-details-marker { display: none; }
.faq-wrap summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 1.4rem; font-weight: 400;
}
.faq-wrap details[open] summary::after { content: '–'; }
.faq-wrap details p { color: var(--muted); padding: 0 0 22px; font-size: 0.97rem; }

/* ---------- CTA ---------- */
.cta { background: var(--accent); color: var(--accent-text); }
.cta-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 20px 24px; }
.cta h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 900; }
.cta p { font-size: 1.05rem; max-width: 62ch; }
.cta em { font-style: italic; }
.cta .btn-primary { background: var(--accent-text); border-color: var(--accent-text); color: var(--accent); }
.cta .btn-primary:hover { background: #2a2a30; border-color: #2a2a30; }
.cta .btn-ghost { border-color: var(--accent-text); color: var(--accent-text); }
.cta .btn-ghost:hover { background: var(--accent-text); color: var(--accent); }
.cta-fine { font-size: 0.88rem; }
.cta-fine a { color: inherit; font-weight: 700; }

/* ---------- Footer ---------- */
.footer { padding: 48px 0; border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-direction: column; gap: 10px; }
.footer p { color: var(--muted); font-size: 0.9rem; }
.footer-fine a { color: var(--muted); }

/* ---------- Builder page (drives the real app in an iframe) ---------- */
.builder-hero { padding: 64px 0 88px; }
.builder-grid { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: start; margin-top: 44px; }
/* Three numbered groups (Make it yours / What it costs / Get your preview) give
   the controls a clear order instead of one long undifferentiated stack. */
.build-group { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 30px; }
.build-group:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.group-head h2 { font-size: 1.15rem; font-weight: 900; }
.group-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border: 2px solid var(--accent); border-radius: var(--radius); color: var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
}
.ctrl { margin-bottom: 24px; max-width: 440px; }
.ctrl-label {
  display: block; font-family: var(--font-display); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 10px;
}
.ctrl input[type="text"] {
  width: 100%; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--text); font-family: var(--font-body); font-size: 1rem;
}
.ctrl input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ctrl input[type="color"] {
  width: 46px; height: 46px; padding: 3px; flex: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.ctrl-hint { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }
.font-combo { position: relative; max-width: 440px; }
.font-combo input[type="text"] { padding-right: 38px; }
.combo-arrow {
  position: absolute; right: 12px; top: 16px; color: var(--muted); pointer-events: none;
}
.font-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  max-height: 300px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.font-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); font-size: 1.08rem; line-height: 1.2; text-align: left; cursor: pointer;
  transition: background-color 150ms;
}
.font-item:hover { background: #1d1d25; }
.font-item .chk { width: 16px; flex: none; color: var(--accent); visibility: hidden; font-family: var(--font-body); font-size: 0.9rem; }
.font-item.sel .chk { visibility: visible; }
.font-item.sel { color: var(--accent); }
.est-sub { color: var(--muted); font-size: 0.88rem; margin-bottom: 16px; }
.est-group {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  color: var(--text); margin: 18px 0 10px; text-transform: uppercase; letter-spacing: 0.08em;
}
.addon-opt em { font-style: normal; color: var(--muted); font-size: 0.8rem; }
.feat-included { color: #9a9aa3; cursor: default; }
.feat-included em { color: var(--accent); }
.feat-chk { color: var(--accent); width: 16px; flex: none; text-align: center; }
.slider-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.slider-row label { font-size: 0.9rem; color: var(--muted); width: 140px; flex: none; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--accent); cursor: pointer; }
.slider-val { font-size: 0.85rem; color: var(--text); width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
/* Divider now comes from the enclosing .build-group, not each block. */
.tier-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.tier-opt, .addon-opt { display: flex; align-items: center; gap: 10px; font-size: 0.93rem; color: #cfcfd6; cursor: pointer; }
.tier-opt input, .addon-opt input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
.addon-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.est-total { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--accent); }
/* The estimator's payoff: divider above it and a touch larger, so the price
   lands as a result rather than one more line in the list. #estFine carries the
   breakdown in muted fine print just below. */
#estTotal { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 1.08rem; line-height: 1.4; }
.fallback-text {
  width: 100%; margin: 8px 0 10px; padding: 10px; font-size: 0.8rem; line-height: 1.5;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); resize: vertical;
  font-family: ui-monospace, monospace;
}
.stage-ctrl { display: grid; grid-template-columns: 1fr 46px; gap: 10px; margin-bottom: 10px; }
.builder-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0; }
.builder-send { max-width: 440px; }
.builder-send .btn { display: block; text-align: center; }
.builder-phone { position: sticky; top: 92px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.phone-caption a { color: var(--text); }
.phone-screen-live { position: relative; height: 640px; width: 316px; }
.phone-screen-live iframe {
  width: 375px; height: 760px; border: 0; background: #000;
  transform: scale(0.8427); transform-origin: 0 0;
}
/* Shown instead of a broken frame when the live demo isn't reachable
   (e.g. before the demo app is deployed and DEMO_BASE is set). */
.live-fallback { position: absolute; inset: 0; background: #000; overflow: hidden; display: flex; align-items: flex-end; }
/* The still poster is toggled via the `hidden` attribute in js/builder.js. The
   display:flex above would otherwise beat the UA [hidden]{display:none} rule and
   pin the poster over the working live frame, so honour hidden explicitly. */
.live-fallback[hidden] { display: none; }
.live-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.live-fallback-note {
  position: relative; z-index: 1; width: 100%; max-width: none; margin: 0;
  padding: 30px 14px 12px; font-size: 0.74rem; line-height: 1.45; color: var(--text);
  background: linear-gradient(to top, rgba(10, 10, 12, 0.97), rgba(10, 10, 12, 0.78) 55%, rgba(10, 10, 12, 0));
}

/* ---------- Terms page ---------- */
.terms-body .container { max-width: 780px; }
.terms-meta { color: var(--muted); font-size: 0.88rem; margin-bottom: 8px; }
.terms-body h2 { font-size: 1.02rem; margin: 34px 0 10px; }
.terms-body p { color: #cfcfd6; font-size: 0.97rem; }
.terms-body a { color: var(--text); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid, .admin-grid { grid-template-columns: 1fr; }
  .builder-grid { grid-template-columns: 1fr; }
  .builder-phone { position: static; order: -1; }
  /* .phone shrinks to 300px here (content 276px); rescale the live screen to match */
  .phone-screen-live { width: 276px; height: 559px; }
  .phone-screen-live iframe { transform: scale(0.736); }
  .hero-phone { order: -1; }
  .phone { width: 300px; }
  .features, .steps, .pricing-grid { grid-template-columns: 1fr 1fr; }
  .price-featured { order: -1; }
}
/* The full horizontal nav (5 links + CTA button) stops fitting below ~780px;
   collapse it to the burger with headroom to spare. */
@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; margin-left: auto; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 18px 24px; gap: 18px;
  }
}
@media (max-width: 640px) {
  .features, .steps, .pricing-grid { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 40px; }
  .section { padding: 64px 0; }
  /* Full-width, evenly stacked CTAs, no ragged, edge-hugging buttons */
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { flex: 1 1 100%; text-align: center; }
  /* The wide admin capture is illegible squished to phone width, so let it scroll
     at a readable size instead (contained, so the page never scrolls sideways). */
  .admin-mock { overflow-x: auto; }
  .admin-screen { min-width: 760px; }
}