/* Snagly marketing site. Tokens and structure per website/WEBSITE.md and
   the two .dc.html design references — fidelity is high, values are
   taken from those files rather than the app's own theme. */

:root {
  --bg: #eef2ed;
  --surface: #ffffff;
  --dark: #1f2a22;
  --dark-border: #0e1210;
  --ink: #1f2a22;
  --ink2: #4a594e;
  --ink2-on-dark: #c9d3ca;
  --accent: #a9481f;
  --accent-hover: #933d18;
  --link-hover: #7a3417;
  --accent-soft: #fae7df;
  --link-on-dark: #f2b597;
  --eyebrow-on-dark: #e8a07f;
  --tick-bg: #e3f0e7;
  --tick-fg: #3d6a4c;
  --panel: #dce5db;
  --grid-gap: #d8e0d7;
  --icon-bg: #f1f4f1;
  --report-outer: #f7f8f6;
  --report-ring: #e3e9e3;
  --report-divider: #edf1ed;
  --report-meta: #5f6e62;
  --report-heading: #2c3a30;
  --max-width: 1160px;

  --shadow-card: 0 1px 2px rgba(31, 42, 34, 0.05), 0 18px 36px -22px rgba(31, 42, 34, 0.28);
  --shadow-faq: 0 1px 2px rgba(31, 42, 34, 0.05), 0 10px 24px -16px rgba(31, 42, 34, 0.24);
  --shadow-policy-box: 0 1px 2px rgba(31, 42, 34, 0.05), 0 12px 28px -18px rgba(31, 42, 34, 0.26);
  --shadow-policy-list: 0 1px 2px rgba(31, 42, 34, 0.05), 0 10px 24px -18px rgba(31, 42, 34, 0.24);
  --shadow-hero-1: 0 30px 60px -24px rgba(31, 42, 34, 0.45);
  --shadow-hero-2: 0 34px 70px -24px rgba(31, 42, 34, 0.5);
  --shadow-report-mock: 0 20px 44px -22px rgba(31, 42, 34, 0.35);
  --shadow-sharing-phone: 0 26px 54px -24px rgba(31, 42, 34, 0.45);
  --shadow-privacy-phone: 0 26px 54px -20px rgba(0, 0, 0, 0.6);
  --shadow-download: 0 10px 24px -12px rgba(31, 42, 34, 0.6);
  --shadow-header-btn: 0 6px 16px -8px rgba(169, 72, 31, 0.7);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Figtree", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: "Bitter", Georgia, serif;
  font-weight: 700;
}

p {
  margin: 0;
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--link-hover);
}

img {
  max-width: 100%;
  display: block;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(238, 242, 237, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(31, 42, 34, 0.07);
}

.site-header .wrap {
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
}

.brand img {
  width: 24px;
  height: auto;
}

.brand span {
  font: 700 20px/1 "Bitter", Georgia, serif;
}

.site-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  flex-wrap: wrap;
  font: 600 14px/1 "Figtree", sans-serif;
}

.site-nav a {
  color: var(--ink2);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--ink);
}

.btn-header {
  padding: 10px 16px;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
  font: 600 14px/1 "Figtree", sans-serif;
  text-decoration: none;
  box-shadow: var(--shadow-header-btn);
}

.btn-header:hover {
  background: var(--accent-hover);
  color: #fff;
}

/* ---------- Hero ---------- */

.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px 24px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px;
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.eyebrow {
  align-self: flex-start;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font: 700 12px/1 "Figtree", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero-lede {
  font: 500 19px/1.55 "Figtree", sans-serif;
  color: var(--ink2);
  max-width: 520px;
  text-wrap: pretty;
}

.download-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 6px;
}

.play-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 16px;
  border-radius: 15px;
  background: var(--dark);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-download);
}

.play-badge:hover {
  background: #2c3a2f;
  color: #fff;
}

.play-badge-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.play-badge-text .small {
  font: 500 11px/1 "Figtree", sans-serif;
  opacity: 0.8;
}

.play-badge-text .big {
  font: 700 17px/1 "Figtree", sans-serif;
}

.price-note {
  font: 500 14px/1.45 "Figtree", sans-serif;
  color: var(--ink2);
}

.hero-shots {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  min-height: 520px;
}

.hero-shots-panel {
  position: absolute;
  inset: 40px 6% 0;
  border-radius: 40px;
  background: var(--panel);
}

.phone-frame {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  border: 7px solid var(--dark);
}

.phone-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.phone-1 {
  width: min(44%, 250px);
  aspect-ratio: 390 / 812;
  box-shadow: var(--shadow-hero-1);
  transform: translate(12%, -18px) rotate(-4deg);
}

.phone-2 {
  width: min(48%, 272px);
  aspect-ratio: 390 / 812;
  border-radius: 36px;
  box-shadow: var(--shadow-hero-2);
  transform: translate(-8%, 10px) rotate(3deg);
  z-index: 1;
}

/* ---------- Sections ---------- */

section {
  padding: 72px 24px;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

section h2 {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: 36px;
}

/* How it works */

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px;
}

.step-card {
  background: var(--surface);
  border-radius: 26px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
}

.step-num {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: var(--accent-soft);
  color: var(--accent);
  font: 700 20px/44px "Bitter", Georgia, serif;
  text-align: center;
}

.step-card h3 {
  font-size: 21px;
  line-height: 1.25;
}

.step-card p {
  font: 500 16px/1.55 "Figtree", sans-serif;
  color: var(--ink2);
  text-wrap: pretty;
}

/* Features grid */

.features-section {
  padding-top: 24px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px;
  background: var(--grid-gap);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 18px 36px -24px rgba(31, 42, 34, 0.28);
}

.feature-cell {
  background: var(--surface);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-cell h3 {
  font: 700 17px/1.3 "Figtree", sans-serif;
}

.feature-cell p {
  font: 500 15px/1.55 "Figtree", sans-serif;
  color: var(--ink2);
  text-wrap: pretty;
}

/* Report section */

.report-section {
  background: var(--surface);
  padding: 0;
}

.report-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 56px;
  align-items: center;
}

.report-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kicker {
  font: 700 12px/1 "Figtree", sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.report-copy h2 {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

.report-copy p {
  font: 500 17px/1.6 "Figtree", sans-serif;
  color: var(--ink2);
  text-wrap: pretty;
}

.report-copy p.small {
  font-size: 15px;
}

.report-mock-outer {
  background: var(--report-outer);
  border-radius: 26px;
  padding: 28px;
  box-shadow: inset 0 0 0 1px var(--report-ring);
}

.report-mock {
  background: var(--surface);
  border-radius: 10px;
  padding: 28px 26px;
  box-shadow: var(--shadow-report-mock);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 440px;
  margin: 0 auto;
}

.report-mock-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 2px solid var(--dark);
  padding-bottom: 12px;
}

.report-mock-head-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.report-mock-head-title span:first-child {
  font: 700 18px/1.1 "Bitter", Georgia, serif;
}

.report-mock-head-title span:last-child {
  font: 500 12px/1 "Figtree", sans-serif;
  color: var(--report-meta);
}

.report-mock-head-date {
  font: 600 11px/1 "Figtree", sans-serif;
  color: var(--report-meta);
  white-space: nowrap;
}

.report-mock-group {
  font: 700 10.5px/1 "Figtree", sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink2);
}

.report-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--report-divider);
}

.report-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.report-row-num {
  font: 700 12px/1.4 "Figtree", sans-serif;
  color: var(--report-meta);
}

.report-row-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-row-body span:first-child {
  font: 600 13px/1.4 "Figtree", sans-serif;
}

.report-row-body span:last-child {
  font: 500 11px/1 "Figtree", sans-serif;
  color: var(--report-meta);
}

.report-chip {
  padding: 5px 9px;
  border-radius: 999px;
  font: 600 10.5px/1 "Figtree", sans-serif;
  white-space: nowrap;
}

.chip-reported { background: #e4eef4; color: #3a6079; }
.chip-open { background: #fbe4dc; color: #8e4a34; }
.chip-progress { background: #f4efe6; color: #7a5d33; }

/* Sharing section */

.sharing-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 88px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 56px;
  align-items: center;
}

.sharing-shots {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.sharing-shots .phone-frame {
  width: min(46%, 240px);
  aspect-ratio: 390 / 812;
  border-radius: 32px;
  border-width: 6px;
  box-shadow: var(--shadow-sharing-phone);
}

.sharing-shots .phone-frame:last-child {
  margin-top: 48px;
}

.sharing-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sharing-copy h2 {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.1;
  text-wrap: balance;
}

.sharing-copy p {
  font: 500 17px/1.6 "Figtree", sans-serif;
  color: var(--ink2);
  text-wrap: pretty;
}

.tick-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.tick-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.tick-icon {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--tick-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.tick-row span:last-child {
  font: 500 16px/1.5 "Figtree", sans-serif;
}

/* Privacy dark band */

.privacy-band {
  background: var(--dark);
  color: #e9efe9;
}

.privacy-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 88px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 56px;
  align-items: center;
}

.privacy-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.privacy-copy .kicker {
  color: var(--eyebrow-on-dark);
}

.privacy-copy h2 {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.1;
  color: #f2f6f1;
  text-wrap: balance;
}

.privacy-copy p {
  font: 500 17px/1.6 "Figtree", sans-serif;
  color: var(--ink2-on-dark);
  text-wrap: pretty;
}

.privacy-copy p.small {
  font-size: 15px;
}

.privacy-copy a {
  color: var(--link-on-dark);
}

.privacy-shots {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.privacy-shots .phone-frame {
  width: min(46%, 240px);
  aspect-ratio: 390 / 812;
  border-radius: 32px;
  border: 6px solid var(--dark-border);
  box-shadow: var(--shadow-privacy-phone);
}

.privacy-shots .phone-frame:last-child {
  margin-top: 48px;
}

/* FAQ */

.faq-section {
  max-width: 820px;
  margin: 0 auto;
  padding: 88px 24px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-faq);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary span.faq-q {
  font: 600 17px/1.4 "Figtree", sans-serif;
  flex: 1;
}

.faq-plus {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform 0.2s;
}

.faq-item[open] .faq-plus {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0;
  padding: 0 22px 22px;
  font: 500 16px/1.6 "Figtree", sans-serif;
  color: var(--ink2);
  text-wrap: pretty;
}

/* Footer */

.site-footer {
  border-top: 1px solid rgba(31, 42, 34, 0.1);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 24px 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.footer-brand img {
  width: 20px;
  height: auto;
}

.footer-brand span {
  font: 700 17px/1 "Bitter", Georgia, serif;
}

.footer-copyright {
  font: 500 14px/1.5 "Figtree", sans-serif;
  color: var(--ink2);
}

.footer-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font: 600 14px/1 "Figtree", sans-serif;
}

.footer-links a {
  color: var(--ink2);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--ink);
}

/* ---------- Privacy policy page ---------- */

.policy-header .wrap {
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.policy-header {
  border-bottom: 1px solid rgba(31, 42, 34, 0.07);
}

.policy-back {
  margin-left: auto;
  font: 600 14px/1 "Figtree", sans-serif;
  color: var(--ink2);
  text-decoration: none;
}

.policy-back:hover {
  color: var(--ink);
}

.policy-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 88px;
}

.policy-main h1 {
  font-size: clamp(36px, 5vw, 48px);
  line-height: 1.08;
}

.policy-updated {
  margin-top: 14px;
  font: 500 15px/1.5 "Figtree", sans-serif;
  color: var(--ink2);
}

.policy-summary {
  margin-top: 32px;
  padding: 22px 24px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-policy-box);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.policy-summary .kicker {
  color: var(--accent);
}

.policy-summary ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 500 16px/1.55 "Figtree", sans-serif;
}

.policy-section {
  padding-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.policy-section h2 {
  font-size: 24px;
  line-height: 1.25;
}

.policy-section p {
  font: 400 17px/1.7 "Figtree", sans-serif;
  color: var(--report-heading);
  text-wrap: pretty;
}

.policy-list {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-policy-list);
}

.policy-list-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
}

.policy-list-row + .policy-list-row {
  border-top: 1px solid var(--report-divider);
}

.policy-list-row span:first-child {
  font: 700 15px/1.4 "Figtree", sans-serif;
}

.policy-list-row span:last-child {
  font: 400 15.5px/1.6 "Figtree", sans-serif;
  color: var(--report-heading);
  text-wrap: pretty;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  section {
    padding: 56px 20px;
  }

  .hero {
    padding: 56px 20px 32px;
  }

  .hero-shots {
    min-height: 420px;
  }
}