/* CardBeat website. No external requests: system fonts, inline SVG, local images. */

:root {
  --bg: #f1f0ec;
  --surface: #fbfaf7;
  --ink: #141413;
  --muted: #6d6c68;
  --line: rgba(20, 20, 19, 0.1);
  --accent: #e8457a;
  --accent-ink: #fff;
  --system-blue: #007aff; /* Apple systemBlue */
  --glow-a: #ffd6ec;
  --glow-b: #cdeefe;
  --glow-c: #fff1b8;
  --paper-ink: #1d1c1a;
  --shadow: 0 1px 2px rgba(40, 35, 20, 0.08), 0 8px 24px rgba(40, 35, 20, 0.1);
  --shadow-lift: 0 4px 10px rgba(40, 35, 20, 0.14), 0 24px 48px rgba(40, 35, 20, 0.2);

  --display: Futura, "Futura PT", "Avenir Next", "Century Gothic", system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;

  --max: 1120px;
  --gutter: 16px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151412;
    --surface: #1e1d1a;
    --ink: #f3f1ec;
    --muted: #a6a39b;
    --line: rgba(243, 241, 236, 0.12);
    --accent: #ff6b98;
    --system-blue: #0a84ff;
    --glow-a: #4a2238;
    --glow-b: #173a4a;
    --glow-c: #3d3418;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 4px 10px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151412;
  --surface: #1e1d1a;
  --ink: #f3f1ec;
  --muted: #a6a39b;
  --line: rgba(243, 241, 236, 0.12);
  --accent: #ff6b98;
  --system-blue: #0a84ff;
  --glow-a: #4a2238;
  --glow-b: #173a4a;
  --glow-c: #3d3418;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 4px 10px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

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

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(2.5rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
h3 { font-size: 1.3rem; }
p { margin: 0; }
.lede { font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--muted); max-width: 36em; }

/* Soft colour glows, as on the App Store screenshots. */
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.6; pointer-events: none; z-index: 0; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 20px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 1.15rem/1 var(--display); text-decoration: none; }
.brand img { width: 32px; height: 32px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; font-size: 0.95rem; }
.nav-links a { text-decoration: none; color: var(--muted); }
.nav-links a:hover { color: var(--ink); }
.nav-links .hide-sm { display: none; }
@media (max-width: 479px) { .nav-links { gap: 14px; } .nav-links .hide-xs { display: none; } }
@media (min-width: 760px) { .nav-links .hide-sm { display: inline; } }

/* ---------- Buttons ---------- */
.btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 1rem/1 var(--text); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn svg { width: 20px; height: 20px; }
.btn-sm { padding: 9px 14px; font-size: 0.9rem; }
.nav .btn { background: var(--system-blue); color: #fff; }
.meta { color: var(--muted); font-size: 0.92rem; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 56px 0 24px; overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; }
.hero-copy { display: grid; gap: 22px; justify-items: start; max-width: 760px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }

/* ---------- Devices ---------- */
.devices { position: relative; margin: 56px auto 0; max-width: 980px; padding-bottom: 6%; }
/* Each device sizes its bezel and corners from its own width (cqw), so the frame
   always matches the screen. The bezel is a box-shadow spread around the
   screenshot, which keeps it concentric with the screen's rounded corners.
   Corner ratios match AppStoreScreenshots/tools/compose.mjs in the app repo. */
.device { container-type: inline-size; }
.device img {
  width: calc(100% - 2 * var(--b));
  margin: var(--b);
  border-radius: var(--r);
  box-shadow: 0 0 0 var(--b) #0d0d0f, 0 0 0 calc(var(--b) + 2px) #c9c8c4, var(--shadow-lift);
}
.iphone   { --b: 3cqw;   --r: 12.8cqw; } /* 180px radius on a 1320px-wide screen */
.ipad     { --b: 2.4cqw; --r: 2.5cqw; }  /* 72px on 2752px, landscape */
.duo-shot { --b: 2.4cqw; --r: 4cqw; }    /* 120px on 2853px, landscape */
.devices .iphone { position: absolute; width: 24%; right: -2%; bottom: 0; }
@media (max-width: 719px) { .devices .iphone { right: 0; width: 28%; } }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: 96px 0; }
.section-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 760px; }
.alt { background: var(--surface); border-block: 1px solid var(--line); }

.features { display: grid; gap: 18px; }
@media (min-width: 760px) { .features { grid-template-columns: 1fr 1fr; } }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.alt .feature { background: var(--bg); }
/* Each tile is a 16:10 scene: a device on a gradient, zoomed in on the part that
   matters. The screenshot is pre-cropped; its cut edges lie outside the tile and
   only the device's real edges, with their bezel and rounded corners, show.
   Positions, bezel and radius are in tile cqw, scaled from the real device. */
.feature-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--glow-a), var(--glow-b)); }
.feature-media.y { background: linear-gradient(135deg, var(--glow-c), var(--glow-a)); }
.feature-media.b { background: linear-gradient(135deg, var(--glow-b), var(--glow-c)); }
.feature-media img { position: absolute; max-width: none; height: auto; box-shadow: 0 0 0 var(--b) #0d0d0f, 0 0 0 calc(var(--b) + 2px) #c9c8c4, var(--shadow-lift); }
.scene-draw img { left: -2.08cqw; top: -10.36cqw; width: 94.08cqw; --b: 2.76cqw; border-radius: 0 0 2.88cqw 0; }
.scene-write img { left: 30.20cqw; top: 7.00cqw; width: 39.60cqw; --b: 1.26cqw; border-radius: 5.40cqw 5.40cqw 0 0; }
.scene-style img { left: -11.16cqw; top: 8.00cqw; width: 100.16cqw; --b: 5.52cqw; border-radius: 0 5.76cqw 0 0; }
.scene-hello img { left: 8.00cqw; top: 9.50cqw; width: 115.00cqw; --b: 3.45cqw; border-radius: 3.60cqw 0 0 0; }
.feature-body { padding: 16px 20px 18px; display: grid; gap: 4px; }
.feature-body p { color: var(--muted); }

.specials { display: grid; gap: 18px; }
@media (min-width: 900px) {
  .specials { grid-template-columns: repeat(3, 1fr); }
  /* Icon, heading, text and checklist share rows across the three blocks,
     so they line up even when one heading wraps. */
  .special { grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; }
}
.special { background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 24px 24px 22px; display: grid; gap: 10px; align-content: start; }
.special svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--accent); }
.special p { color: var(--muted); }
.special ul { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 0.93rem; }
.special li { padding-left: 22px; position: relative; }
.special li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1.05fr 1fr; gap: 64px; } }

/* ---------- Pricing ---------- */
.plans { display: grid; gap: 20px; }
@media (min-width: 720px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 30px; display: grid; gap: 14px; align-content: start; }
.alt .plan { background: var(--bg); }
.plan.pro { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.plan.pro .muted, .plan.pro li::before { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.plan .price { font: 700 2.2rem/1 var(--display); }
.plan ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.plan li { padding-left: 26px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.muted { color: var(--muted); }

/* ---------- Privacy ---------- */
.privacy { display: grid; gap: 16px; justify-items: center; text-align: center; }
.privacy .badge { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--accent); }
.privacy .badge svg { width: 36px; height: 36px; }
.privacy p { max-width: 34em; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 22px; }
.alt .faq details { background: var(--bg); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 32px 18px 0; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font: 400 1.5rem/1 var(--text); color: var(--muted); transition: rotate .2s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details > div { padding: 0 0 20px; color: var(--muted); display: grid; gap: 10px; }

/* ---------- Final CTA ---------- */
.final { text-align: center; display: grid; gap: 22px; justify-items: center; }
.final img { width: 96px; height: 96px; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 36px 0 48px; font-size: 0.92rem; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-left: auto; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

/* ---------- Prose pages (compare, legal) ---------- */
.prose { max-width: 760px; padding-top: 56px; padding-bottom: 96px; }
.prose h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); margin-bottom: 18px; }
.prose h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 52px 0 14px; }
.prose h3 { margin: 28px 0 8px; }
.prose p, .prose ul { margin: 0 0 14px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.prose .lede { margin-bottom: 8px; }
.note { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 16px 20px; margin: 24px 0; }
.table-wrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 860px; font-size: 0.95rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; background: var(--surface); }
th { font-weight: 600; background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
tr:last-child td { border-bottom: 0; }
/* Row labels stay visible while the table scrolls sideways on phones. */
th:first-child, td:first-child { position: sticky; left: 0; z-index: 1; font-weight: 600; width: 128px; box-shadow: 1px 0 0 var(--line); }