/* MeshShot — marketing and legal site.
   Shares the app's palette so the site and the product feel like one thing. */

:root {
  --bg-0: #0a0b0f;
  --bg-1: #111319;
  --bg-2: #171a22;
  --bg-3: #1f2430;
  --line: #262b38;
  --text: #e8eaf0;
  --text-dim: #98a0b4;
  --text-faint: #6b7387;
  --accent: #7C3AED;
  --accent-soft: #8b5cf6;
  --accent-dim: rgba(124, 58, 237, .14);
  --cyan: #22d3ee;
  --ok: #34d399;
  --r: 10px;
  --max: 1120px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text);
  font: 16px/1.65 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ---------------- header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10, 11, 15, .85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 26px; height: 62px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 24px; height: 24px; flex: 0 0 auto;
  background: url("/images/logo-mark.png") center / contain no-repeat;
}
.brand-name { color: var(--text); font-size: 17px; }
.brand-name em { font-style: normal; color: var(--text-faint); font-weight: 500; }
.powered {
  margin-left: 2px; padding: 3px 8px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--bg-2);
  font-size: 11px; font-weight: 500; color: var(--text-faint); white-space: nowrap;
}
.powered a { color: var(--text-dim); }

.site-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.site-nav a { color: var(--text-dim); font-size: 14px; }
.site-nav a:hover { color: var(--text); text-decoration: none; }

.btn {
  display: inline-block; padding: 10px 18px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--bg-2); color: var(--text);
  font-size: 14px; font-weight: 550; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--bg-3); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* `.site-nav a` is more specific than `.btn-primary`, so a primary button in
   the nav was inheriting the muted link colour and coming out low-contrast on
   its own purple. Anchor the rule to the element as well so it always wins. */
/* Order matters as much as specificity here: the plain-button colour must come
   first, or it overrides the primary's white at equal specificity. */
a.btn, .site-nav a.btn { color: var(--text); }
a.btn-primary, .btn-primary, .site-nav a.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
a.btn-primary:hover, .btn-primary:hover, .site-nav a.btn-primary:hover {
  background: var(--accent-soft); border-color: var(--accent-soft); color: #fff;
  box-shadow: 0 6px 20px rgba(124, 58, 237, .35);
}
.btn-lg { padding: 13px 26px; font-size: 15px; }

/* ---------------- hero ---------------- */
.hero { padding: 82px 0 56px; text-align: center; background: radial-gradient(ellipse at 50% -20%, #1b2030 0%, var(--bg-0) 62%); }
.eyebrow {
  display: inline-block; margin-bottom: 18px; padding: 5px 13px; border-radius: 20px;
  background: var(--accent-dim); border: 1px solid rgba(124, 58, 237, .32);
  font-size: 12.5px; font-weight: 550; color: var(--accent-soft);
}
h1 { margin: 0 0 18px; font-size: clamp(34px, 5.2vw, 56px); line-height: 1.08; font-weight: 700; letter-spacing: -.03em; }
.lede { max-width: 640px; margin: 0 auto 30px; font-size: clamp(16px, 2vw, 19px); color: var(--text-dim); }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-size: 13px; color: var(--text-faint); }

/* ---------------- sections ---------------- */
section { padding: 64px 0; }
.section-head { max-width: 660px; margin: 0 auto 44px; text-align: center; }
h2 { margin: 0 0 14px; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.2; font-weight: 650; letter-spacing: -.02em; }
h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.section-head p { margin: 0; color: var(--text-dim); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card { padding: 24px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; }
.card p { margin: 0; color: var(--text-dim); font-size: 14.5px; }
.card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 16px; border-radius: 10px;
  background: var(--accent-dim); color: var(--accent-soft);
}
.card-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- image placeholders ----------------
   Deliberately visible and labelled with their exact pixel size, so nothing
   ships with a silently missing asset and whoever produces the artwork knows
   what to deliver without measuring anything. */
.img-slot {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background:
    repeating-linear-gradient(45deg, #14171f 0 10px, #171a24 10px 20px);
  border: 1px dashed #343b4d; border-radius: 14px; color: var(--text-faint);
  text-align: center; padding: 20px; overflow: hidden;
}
.img-slot strong { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.img-slot span { font-family: "SF Mono", ui-monospace, Consolas, monospace; font-size: 11.5px; }
.img-slot .slot-file { color: #4d566d; font-size: 11px; }
/* The alt text travels with the placeholder, so whoever swaps in the real
   <img> has no excuse for leaving it empty. */
.img-slot .slot-alt {
  max-width: 46ch; margin-top: 4px; color: #5b6580;
  font-family: inherit; font-size: 11px; line-height: 1.5; font-style: italic;
}
/* Real images: rounded, bordered, never wider than their column. The width and
   height attributes in the HTML supply the aspect ratio, so no ratio helper is
   needed and the browser reserves the right space before the file loads. */
picture { display: block; }
picture img, .prose img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; border: 1px solid var(--line); background: var(--bg-1);
}
.grid picture img { border-radius: 12px; }

.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-3-2  { aspect-ratio: 3 / 2; }

/* ---------------- pricing ---------------- */
.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 780px; margin: 0 auto; }
.plan { padding: 30px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 18px 50px rgba(124, 58, 237, .14); }
.plan-name { font-size: 13px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.plan-price { margin: 12px 0 4px; font-size: 40px; font-weight: 700; letter-spacing: -.03em; }
.plan-price small { font-size: 15px; font-weight: 500; color: var(--text-faint); letter-spacing: 0; }
.plan-sub { margin: 0 0 22px; font-size: 14px; color: var(--text-dim); }
.plan ul { margin: 0 0 26px; padding: 0; list-style: none; }
.plan li { position: relative; padding: 7px 0 7px 26px; font-size: 14.5px; color: var(--text-dim); }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.plan li.off { color: var(--text-faint); }
.plan li.off::before { content: "—"; color: #3c4356; }
.plan .btn { margin-top: auto; text-align: center; }

/* ---------------- FAQ ---------------- */
.faq { max-width: 760px; margin: 0 auto; }
details {
  margin-bottom: 10px; padding: 18px 20px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px;
}
details[open] { border-color: #333a4d; }
summary { cursor: pointer; font-weight: 550; font-size: 15.5px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--text-faint); font-weight: 400; font-size: 19px; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { margin: 14px 0 0; color: var(--text-dim); font-size: 14.5px; }
details p:last-child { margin-bottom: 0; }

/* ---------------- legal / prose ---------------- */
.prose { max-width: 760px; margin: 0 auto; padding: 56px 0 72px; }
.prose h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 10px; text-align: left; }
.prose .updated { margin: 0 0 40px; font-size: 13.5px; color: var(--text-faint); }
.prose h2 { margin: 40px 0 12px; font-size: 21px; text-align: left; }
.prose h3 { margin: 26px 0 8px; font-size: 16.5px; }
.prose p, .prose li { color: var(--text-dim); font-size: 15.5px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14.5px; }
.prose th, .prose td { padding: 11px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--bg-2); color: var(--text); font-weight: 600; }
.prose td { color: var(--text-dim); }

.callout {
  margin: 26px 0; padding: 18px 20px; border-radius: 12px;
  background: var(--accent-dim); border: 1px solid rgba(124, 58, 237, .3);
}
.callout p { margin: 0; color: var(--text); font-size: 14.5px; }
.callout.warn { background: rgba(251, 191, 36, .09); border-color: rgba(251, 191, 36, .3); }

/* ---------------- CTA ---------------- */
.cta { text-align: center; padding: 72px 0; border-top: 1px solid var(--line); }

/* ---------------- motion ----------------
   Deliberately small: a few CSS transitions and one IntersectionObserver. No
   animation library, no particle canvas — this is a marketing page that has to
   load fast on a phone, and a heavy hero is a worse first impression than a
   still one. Every effect below is decorative, so the whole lot is switched off
   for anyone who has asked their system for reduced motion. */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
/* Stagger siblings so a row of cards arrives in sequence rather than as a block. */
.reveal.in:nth-child(2) { transition-delay: .07s; }
.reveal.in:nth-child(3) { transition-delay: .14s; }
.reveal.in:nth-child(4) { transition-delay: .21s; }
.reveal.in:nth-child(5) { transition-delay: .28s; }
.reveal.in:nth-child(6) { transition-delay: .35s; }

.card { transition: transform .22s ease, border-color .22s ease, background .22s ease; }
.card:hover { transform: translateY(-3px); border-color: #343c50; background: var(--bg-2); }
.card:hover .card-icon { background: rgba(124, 58, 237, .26); }
.card-icon { transition: background .22s ease; }

.plan { transition: transform .22s ease, box-shadow .22s ease; }
.plan:hover { transform: translateY(-4px); }
.plan.featured:hover { box-shadow: 0 0 0 1px var(--accent), 0 24px 60px rgba(124, 58, 237, .26); }

.seq-card, details { transition: border-color .18s ease, background .18s ease; }
details:hover { border-color: #333a4d; }

/* Zoomable images */
.zoomable { cursor: zoom-in; overflow: hidden; border-radius: 14px; position: relative; }
.zoomable img { transition: transform .45s cubic-bezier(.2, .7, .3, 1); }
.zoomable:hover img { transform: scale(1.025); }
.zoomable::after {
  content: "⤢"; position: absolute; right: 12px; bottom: 12px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: rgba(10, 11, 15, .72); backdrop-filter: blur(6px);
  color: var(--text-dim); font-size: 14px; line-height: 1;
  opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease;
}
.zoomable:hover::after { opacity: 1; transform: none; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 28px;
  background: rgba(6, 7, 11, .9); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; cursor: zoom-out;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: min(1400px, 96vw); max-height: 92vh; width: auto; height: auto;
  border-radius: 12px; border: 1px solid var(--line);
  transform: scale(.97); transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.lightbox.open img { transform: none; }
.lightbox-close {
  position: absolute; top: 18px; right: 22px; width: 38px; height: 38px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text-dim); font-size: 20px; line-height: 1;
}
.lightbox-close:hover { color: var(--text); background: var(--bg-3); }

/* The brand mark turns slowly — a single transform, effectively free, and it
   quietly says "turntable". */
.brand:hover .brand-mark { animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .card:hover, .plan:hover, .btn:hover { transform: none; }
  .zoomable:hover img { transform: none; }
  .brand:hover .brand-mark { animation: none; }
  .lightbox, .lightbox img { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------- footer ---------------- */
.site-footer { padding: 52px 0 40px; border-top: 1px solid var(--line); background: var(--bg-1); }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr 1fr; }
.footer-col h4 { margin: 0 0 14px; font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.footer-col a { display: block; margin-bottom: 9px; color: var(--text-dim); font-size: 14px; }
.footer-col a:hover { color: var(--text); text-decoration: none; }
.footer-about { max-width: 300px; margin: 14px 0 0; color: var(--text-faint); font-size: 13.5px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-faint);
}

@media (max-width: 760px) {
  .site-nav { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .powered { display: none; }
}