/* TickrDash marketing site — the 2026-09 "Photo scenes" redesign (index.html, pricing.html).
   Standalone on purpose: redesigned pages load this instead of style.css, so the new look
   (gold accent, Inter, photo scenes) and the old orange/Outfit styling never mix on one page.
   Pages still on style.css (pricing, venues, support, …) take just the nav, footer and palette
   from chrome.css instead. The nav, footer, colour tokens and Inter @font-face live there. */

@import url('chrome.css');

:root {
  --pad-y: 56px;
  --pad-x: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { text-wrap: pretty; }
p { text-wrap: pretty; }

.wrap { max-width: 1280px; margin: 0 auto; padding: var(--pad-y) var(--pad-x); }
.only-mobile { display: none; }
.nowrap { white-space: nowrap; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 15px 26px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-gold { background: var(--gold); color: #111; }
.btn-gold:hover { background: var(--gold-hover); color: #111; }
.btn-ghost { border: 1px solid #3a3a3a; color: var(--ink); font-weight: 700; padding: 15px 24px; }
.btn-ghost:hover { border-color: #666; color: var(--ink); }
.btn-lg { padding: 16px 28px; font-size: 17px; }
.btn-lg.btn-ghost { padding: 16px 26px; }
.btn-nav { padding: 9px 18px; font-size: 14px; border-radius: 8px; }
.btn-nav.btn-ghost { border-color: #333; }

.kicker {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Hero */
.hero {
  position: relative;
  height: 690px;
  overflow: hidden;
  background: var(--bg-deep);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6,7,8,.94) 0%, rgba(6,7,8,.88) 38%, rgba(6,7,8,.28) 62%, rgba(6,7,8,.06) 100%);
}
.hero-copy { position: relative; max-width: 1280px; margin: 0 auto; padding: 76px 56px; }
.hero-plate { width: 400px; display: flex; flex-direction: column; gap: 20px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.live-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4caf50;
  animation: tdpulse 1.8s ease-in-out infinite;
}
@keyframes tdpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hero h1 { font-size: 54px; line-height: 1.04; font-weight: 900; letter-spacing: -.03em; text-wrap: balance; }
.hero-sub { color: var(--ink-2); font-size: 18px; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 14px; }
.hero-note { color: var(--ink-4); font-size: 14px; line-height: 1.6; }
.hero-note strong { color: var(--gold); font-weight: 700; }

/* Section headings */
section h2 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.lede { color: var(--ink-3); font-size: 18px; margin-top: 10px; }
.screens, .steps, .venues, .closing, .features, .compare, .faq { border-top: 1px solid var(--rule); }

/* Visually hidden, still read by assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Features: what cycles on the screen */
.features { background: var(--bg-alt); }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 30px;
}
.feature {
  background: var(--card);
  border: 1px solid var(--card-rule);
  border-radius: 14px;
  padding: 24px 26px 26px;
}
.feature h3 { font-size: 19px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.feature p { color: var(--ink-3); font-size: 15px; line-height: 1.6; }

/* Screens: three photo cards */
.scene-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 30px;
}
.scene {
  background: var(--card);
  border: 1px solid var(--card-rule);
  border-radius: 14px;
  overflow: hidden;
}
.scene-photo { height: 240px; background: #0c0d0f; }
.scene-photo img { width: 100%; height: 100%; object-fit: cover; }
.scene-body { padding: 24px 26px 28px; border-top: 1px solid var(--card-rule); }
.scene-body h3 { font-size: 21px; font-weight: 700; margin-bottom: 8px; }
.scene-body p { color: var(--ink-3); font-size: 15px; line-height: 1.6; }
.scene-link { display: inline-block; margin-top: 12px; color: var(--gold); font-size: 15px; font-weight: 700; }
.scene-link::after { content: ' \2192'; }
.scene-link:hover { color: var(--gold-hover); }

/* Steps */
.steps { background: var(--bg-alt); }
.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 30px;
}
.step-num { color: var(--gold); font-size: 15px; font-weight: 900; letter-spacing: .1em; margin-bottom: 14px; }
.step h3 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.step p { color: var(--ink-3); font-size: 16px; line-height: 1.65; }
.store-badge { height: 48px; width: auto; display: block; margin-top: 14px; }

/* Comparison: no hardware */
.compare .lede { max-width: 760px; }
.compare .lede a { color: var(--gold); font-weight: 700; }
.compare .lede a:hover { color: var(--gold-hover); }
.compare-table {
  width: 100%;
  margin-top: 28px;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}
.compare-table th,
.compare-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--card-rule);
  font-size: 16px;
  line-height: 1.5;
  vertical-align: top;
}
.compare-table thead th {
  padding-top: 0;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.compare-table tbody th { color: var(--ink); font-weight: 700; width: 22%; }
.compare-table tbody td { color: var(--ink-3); font-weight: 400; }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }

/* Venues */
.venues { background: radial-gradient(100% 120% at 20% 0%, #16171b, var(--bg-deep)); }
.venues .wrap { display: flex; align-items: center; gap: 48px; }
.venues-copy { width: 430px; flex: none; }
.venues-copy .kicker { margin-bottom: 14px; }
.venues-copy h2 { font-size: 38px; line-height: 1.1; margin-bottom: 16px; }
.venues-copy p { color: var(--ink-3); font-size: 17px; line-height: 1.6; margin-bottom: 24px; }
.venues-copy .btn-ghost { padding: 14px 24px; }
.venues-photo { flex: 1; min-width: 0; height: 300px; border-radius: 10px; overflow: hidden; }
.venues-photo img { width: 100%; height: 100%; object-fit: cover; }

/* FAQ */
.faq { background: var(--bg-alt); }
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
  margin-top: 30px;
}
.faq-item h3 { font-size: 19px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.faq-item p { color: var(--ink-3); font-size: 16px; line-height: 1.65; }
.faq-more { margin-top: 28px; color: var(--ink-3); font-size: 16px; }
.faq-more a { color: var(--gold); font-weight: 700; }
.faq-more a:hover { color: var(--gold-hover); }

/* Closing CTA */
.closing .wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.closing h2 { font-size: 32px; margin-bottom: 8px; }
.closing p { color: var(--ink-3); font-size: 16px; }
.closing-actions { display: flex; gap: 12px; flex: none; }

/* ===== Inner pages ===== */

/* Page header band (pricing, …) */
.page-hero { background: var(--bg-deep); border-bottom: 1px solid var(--rule); }
.page-hero .wrap { padding-top: 64px; padding-bottom: 64px; }
.page-hero .kicker { margin-bottom: 14px; }
.page-hero h1 { font-size: 48px; font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.page-hero .lede { max-width: 640px; }
.page-hero .hero-note { margin-top: 18px; }

/* Plans */
.plans { border-top: 1px solid var(--rule); }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 30px;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--card-rule);
  border-radius: 14px;
  padding: 30px 26px 26px;
}
.plan.is-featured {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(255, 193, 7, .07) 0%, var(--card) 45%);
}
.plan-badge {
  position: absolute;
  top: -13px;
  right: 20px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--gold);
  color: #111;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.plan-badge.is-ghost { background: var(--bg); border: 1px solid #3a3a3a; color: var(--ink); }
.plan h3 { font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.plan-desc { color: var(--ink-3); font-size: 15px; line-height: 1.6; min-height: 48px; margin-bottom: 20px; }
.plan-pricing { min-height: 84px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-amount { font-size: 44px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.plan-period { color: var(--ink-3); font-size: 15px; white-space: nowrap; }
.plan-saving {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 193, 7, .12);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
}
.plan .btn { display: block; margin-top: 4px; }
.plan-features {
  list-style: none;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--card-rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-features li { display: flex; gap: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.plan-features li::before { content: '\2713'; color: var(--gold); font-weight: 800; flex: none; }

/* Line under a step grid ("Not sure yet? …") */
.steps-after { margin-top: 30px; color: var(--ink-3); font-size: 16px; }
.steps-after a { color: var(--gold); font-weight: 700; }
.steps-after a:hover { color: var(--gold-hover); }

/* ===== Guide pages (apps/marketing/seo/_page-skeleton.html) ===== */

/* Breadcrumb above the H1 in .page-hero */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--ink-4); font-size: 14px; }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--gold); }

/* Body copy below a heading, and its list form. Measure-capped like .compare .lede. */
.prose { max-width: 760px; margin-top: 18px; color: var(--ink-3); font-size: 17px; line-height: 1.7; }
.prose a, .prose-list a { color: var(--gold); font-weight: 700; }
.prose a:hover, .prose-list a:hover { color: var(--gold-hover); }
.prose strong, .prose-list strong { color: var(--ink); font-weight: 700; }
.prose-list { list-style: none; max-width: 760px; margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
/* The dash is absolutely positioned, not a flex item: a flex li would break every
   inline <strong>/<a> inside it onto its own column. */
.prose-list li { position: relative; padding-left: 20px; color: var(--ink-3); font-size: 17px; line-height: 1.65; }
.prose-list li::before { content: '\2013'; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 800; }

/* Sourcing / non-affiliation footnote under a table or grid */
.source-note { max-width: 760px; margin-top: 18px; color: var(--ink-5); font-size: 14px; line-height: 1.6; }

/* Two-up variant of the feature grid */
.feature-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  :root { --pad-x: 40px; }
  /* 680, not 600: the H1 runs to four lines in the 400px plate and the
     hero-note (device line + promo code) was clipped by the old height. */
  .hero { height: 680px; }
  .hero-copy { padding: 60px 40px; }
  .scene-grid { gap: 20px; }
  .feature-grid { gap: 20px; }
  .feature { padding: 22px 20px; }
  .step-grid { gap: 28px; }
  .faq-list { gap: 24px 28px; }
  .compare-table th, .compare-table td { padding: 14px 14px; font-size: 15px; }
  .venues .wrap { flex-direction: column; align-items: stretch; gap: 28px; }
  .venues-copy { width: auto; }
  .venues-photo { height: 260px; }
  .plan-grid { gap: 20px; }
  .plan { padding: 26px 22px 22px; }
  .plan-amount { font-size: 36px; }
  .page-hero .wrap { padding-top: 48px; padding-bottom: 48px; }
}

/* ---------- phone ---------- */
@media (max-width: 768px) {
  :root { --pad-y: 28px; --pad-x: 20px; }
  .only-mobile { display: block; }
  .only-desktop { display: none; }
  span.only-mobile { display: inline; }

  .hero { height: auto; display: flex; flex-direction: column; }
  .hero-media { position: static; order: 2; height: 250px; }
  .hero-media img { object-position: 60% 50%; }
  .hero-scrim { display: none; }
  .hero-copy { padding: 28px 20px; }
  .hero-plate { width: auto; gap: 16px; }
  .live-dot { display: none; }
  .eyebrow { font-size: 11px; }
  .hero h1 { font-size: 34px; line-height: 1.06; letter-spacing: -.02em; }
  .hero-sub { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn { padding: 15px 20px; font-size: 16px; }
  .hero .hero-note { display: none; }

  section h2 { font-size: 24px; letter-spacing: -.01em; }
  .screens .lede { display: none; }
  .scene-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
  .scene { border-radius: 12px; }
  .scene-photo { height: 140px; }
  .scene-body { padding: 16px 18px; border-top: 0; }
  .scene-body .kicker { font-size: 11px; margin-bottom: 6px; }
  .scene-body h3 { font-size: 16px; margin-bottom: 4px; }
  .scene-body p { font-size: 14px; line-height: 1.55; }

  .feature-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
  /* .feature-grid.cols-2 outranks the rule above on specificity, so restate it here. */
  .feature-grid.cols-2 { grid-template-columns: 1fr; }
  .prose, .prose-list li { font-size: 15px; line-height: 1.6; }
  .prose, .prose-list { margin-top: 14px; }
  .breadcrumb { font-size: 13px; margin-bottom: 12px; }
  .feature { border-radius: 12px; padding: 16px 18px; }
  .feature h3 { font-size: 16px; margin-bottom: 4px; }
  .feature p { font-size: 14px; line-height: 1.55; }
  .scene-link { margin-top: 10px; font-size: 14px; }

  .step-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 18px; }
  .step h3 { font-size: 18px; margin-bottom: 6px; }
  .step p { font-size: 15px; }

  .compare .lede { font-size: 16px; }
  .compare-table { margin-top: 18px; }
  .compare-table th, .compare-table td { padding: 10px 8px; font-size: 13px; line-height: 1.45; }
  .compare-table thead th { font-size: 11px; letter-spacing: .08em; }
  .compare-table tbody th { width: 26%; }

  .faq-list { grid-template-columns: 1fr; gap: 20px; margin-top: 18px; }
  .faq-item h3 { font-size: 17px; margin-bottom: 6px; }
  .faq-item p { font-size: 15px; }
  .faq-more { margin-top: 20px; font-size: 15px; }

  .venues .wrap { gap: 20px; }
  .venues-copy h2 { font-size: 26px; }
  .venues-copy p { font-size: 16px; }
  .venues-photo { height: 200px; }

  .closing .wrap { flex-direction: column; align-items: stretch; gap: 18px; }
  .closing h2 { font-size: 24px; }
  .closing-actions { width: 100%; }
  .closing-actions .btn { flex: 1; padding: 14px 12px; }

  .page-hero .wrap { padding-top: 28px; padding-bottom: 28px; }
  .page-hero h1 { font-size: 34px; }
  .page-hero .hero-note { display: block; }
  .plan-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
  .plan-desc { min-height: 0; }
  .plan-pricing { min-height: 0; margin-bottom: 16px; }
  .steps-after { margin-top: 22px; }

}