/* Swipebird public site: landing, guides, about, privacy. Warm cream and flame palette shared with the app. */
:root {
  --bg:#FBF6EE; --bg2:#F4EADB; --card:#FFFFFF; --ink:#1C140F; --ink2:#3B2E25; --muted:#6E6157; --faint:#9A8C80;
  --line:#EADFCD; --soft:#FFF1E6; --accent:#E8461A; --accent-ink:#fff; --flame1:#FF4A1C; --flame2:#FF7A1A; --gold:#FFB21F; --sun:#FFCE4A;
  --link:#C2410C; --good:#2F8F5B; --bad:#B4432A;
  --shadow:0 1px 2px rgba(60,35,15,.05), 0 10px 30px -14px rgba(60,35,15,.22);
  --shadow-hi:0 2px 6px rgba(60,35,15,.06), 0 30px 60px -24px rgba(60,35,15,.38);
  --serif:"New York", ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --r:18px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#14100D; --bg2:#1B1511; --card:#1F1813; --ink:#F8EEE2; --ink2:#E2D4C4; --muted:#B3A496; --faint:#85776A;
  --line:#33281F; --soft:#2A1E16; --accent:#FF6A2B; --link:#FF9A5C; --good:#5BC28A; --bad:#F08A6B;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -12px rgba(0,0,0,.6);
  --shadow-hi:0 2px 6px rgba(0,0,0,.35), 0 30px 60px -22px rgba(0,0,0,.85);
  color-scheme:dark;
} }
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font:17px/1.6 var(--sans); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img, video, svg { max-width:100%; }
img, video { height:auto; display:block; }
a { color:var(--link); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.wrap { max-width:1120px; margin:0 auto; padding:0 16px; }
.narrow { max-width:760px; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:12px; top:-60px; z-index:50; background:var(--ink); color:var(--bg); padding:10px 14px; border-radius:10px; }
.skip:focus { top:12px; }

/* Top bar */
.top { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px); border-bottom:1px solid transparent; transition:border-color .25s; }
.top.scrolled { border-bottom-color:var(--line); }
.top .wrap { display:flex; align-items:center; gap:10px; height:62px; }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font:700 21px/1 var(--serif); letter-spacing:-.01em; }
.brand img { width:30px; height:30px; }
.top nav { margin-left:auto; display:flex; align-items:center; gap:2px; }
.top nav a { text-decoration:none; font-size:15px; color:var(--muted); padding:8px 12px; border-radius:10px; transition:color .15s, background .15s; }
.top nav a:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.top nav a.btn-sm { background:var(--ink); color:var(--bg); font-weight:600; margin-left:6px; }
.top nav a.btn-sm:hover { background:var(--accent); color:#fff; }
@media (max-width:720px) { .top nav a.hide-m { display:none; } }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 22px; border-radius:14px; font:600 16px/1 var(--sans); text-decoration:none; border:0; cursor:pointer; transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s; }
.btn svg { width:18px; height:18px; flex:none; }
.btn-primary { color:#fff; background:linear-gradient(180deg, #FF6A2B, var(--accent)); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -10px rgba(232,70,26,.7); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 16px 30px -12px rgba(232,70,26,.8); }
.btn-ghost { color:var(--ink); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); }
.btn-ghost:hover { transform:translateY(-1px); border-color:color-mix(in srgb, var(--ink) 25%, var(--line)); }
.btn:active { transform:scale(.98); }

/* Type */
h1, h2, h3 { font-family:var(--serif); letter-spacing:-.015em; color:var(--ink); text-wrap:balance; }
h1 { font-weight:700; font-size:clamp(36px, 6vw, 64px); line-height:1.03; margin:0 0 18px; }
h2 { font-weight:700; font-size:clamp(28px, 3.6vw, 42px); line-height:1.1; margin:0 0 14px; }
h3 { font-weight:700; font-size:21px; line-height:1.25; margin:0 0 8px; }
p { margin:0 0 16px; text-wrap:pretty; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font:600 13px/1 var(--sans); letter-spacing:.02em; color:var(--accent); background:var(--soft); border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); padding:7px 12px; border-radius:999px; }
.eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%, 100% { box-shadow:0 0 0 9px transparent; } }
.lede { font-size:clamp(18px, 2vw, 20px); color:var(--muted); max-width:36em; }
.kicker { font:600 13px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 12px; }
section { padding:88px 0; }
@media (max-width:720px) { section { padding:64px 0; } }

/* Reveal on scroll (only when JS ran and motion is allowed) */
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d, 0s); }
.js .reveal.in { opacity:1; transform:none; }

/* Grain overlay for depth */
.grain::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { .grain::after { mix-blend-mode:screen; opacity:.12; } }

/* Cards */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }

/* Platform badges */
.pb { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; color:#fff; font:800 12px/1 var(--sans); flex:none; }
.pb svg { width:15px; height:15px; }
.pb.li { background:#0A66C2; } .pb.x { background:#000; } .pb.ig { background:linear-gradient(45deg,#F9A23A,#E1306C 55%,#8A3AB9); }
.pb.yt { background:#FF0000; } .pb.tt { background:#111; } .pb.pin { background:#E60023; } .pb.web { background:#6E6157; } .pb.shot { background:#2F6F8F; }
@media (prefers-color-scheme: dark) { .pb.x, .pb.tt { box-shadow:0 0 0 1px #3a3a3a inset; } }

/* Footer */
footer.site { border-top:1px solid var(--line); padding:48px 0 40px; color:var(--muted); font-size:15px; }
footer.site .cols { display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:28px; }
footer.site h4 { font:600 13px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin:4px 0 14px; }
footer.site ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
footer.site a { color:var(--muted); text-decoration:none; }
footer.site a:hover { color:var(--ink); }
footer.site .fine { margin-top:32px; font-size:13px; color:var(--faint); }
@media (max-width:720px) { footer.site .cols { grid-template-columns:1fr 1fr; } footer.site .cols > :first-child { grid-column:1 / -1; } }

/* ---------- Guide (article) pages ---------- */
.crumbs { font-size:14px; color:var(--muted); margin:28px 0 18px; }
.crumbs a { color:var(--muted); text-decoration:none; } .crumbs a:hover { color:var(--ink); }
.crumbs span { margin:0 6px; color:var(--faint); }
.guide-hero { position:relative; padding:8px 0 28px; }
.guide-hero h1 { font-size:clamp(34px, 5vw, 54px); }
.byline { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14.5px; color:var(--muted); margin:18px 0 0; }
.byline img { width:40px; height:40px; border-radius:50%; background:var(--bg2); object-fit:cover; }
.byline a { color:var(--ink); font-weight:600; text-decoration:none; }
.byline .sep { color:var(--faint); }
.answer { position:relative; margin:28px 0 8px; padding:22px 24px 20px; border-radius:var(--r); background:linear-gradient(180deg, var(--soft), color-mix(in srgb, var(--soft) 40%, var(--card))); border:1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); }
.answer .tag { font:700 12px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px; }
.answer p:last-child, .answer ol:last-child { margin-bottom:0; }
.answer ol { margin:0; padding-left:22px; } .answer li { margin:4px 0; }
.toc { margin:28px 0; padding:18px 22px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); }
.toc b { font:700 13px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.toc ol { margin:12px 0 0; padding-left:20px; columns:2 260px; column-gap:28px; font-size:15.5px; }
.toc li { margin:5px 0; break-inside:avoid; } .toc a { color:var(--ink); text-decoration:none; } .toc a:hover { color:var(--accent); }
.prose { font-size:18px; line-height:1.7; color:var(--ink2); }
.prose h2 { margin:64px 0 16px; scroll-margin-top:84px; font-size:clamp(26px, 3.2vw, 34px); }
.prose h3 { margin:34px 0 10px; scroll-margin-top:84px; }
.prose ul, .prose ol { padding-left:24px; margin:0 0 18px; } .prose li { margin:7px 0; }
.prose strong { color:var(--ink); }
.prose blockquote { margin:24px 0; padding:4px 0 4px 20px; border-left:3px solid var(--gold); font-family:var(--serif); font-size:19px; color:var(--ink); }
.prose blockquote cite { display:block; margin-top:8px; font:500 14px/1.4 var(--sans); color:var(--muted); font-style:normal; }
.prose code { font:500 .88em/1 var(--mono); background:var(--bg2); padding:3px 6px; border-radius:6px; }
.prose kbd { font:600 .82em/1 var(--mono); background:var(--card); border:1px solid var(--line); border-bottom-width:2px; padding:3px 6px; border-radius:6px; }
.steps { list-style:none; padding:0 !important; counter-reset:s; display:grid; gap:12px; margin:20px 0 26px !important; }
.steps > li { counter-increment:s; position:relative; margin:0 !important; padding:16px 18px 16px 62px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.steps > li::before { content:counter(s); position:absolute; left:16px; top:15px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:700 15px/1 var(--sans); color:#fff; background:linear-gradient(135deg, var(--flame2), var(--accent)); }
.steps > li b { color:var(--ink); }
figure { margin:28px 0; }
figure .frame { border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow-hi); }
figcaption { font-size:14px; color:var(--muted); margin-top:10px; text-align:center; }
.tbl { width:100%; overflow-x:auto; margin:22px 0 28px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.tbl table { width:100%; border-collapse:collapse; font-size:15.5px; min-width:560px; }
.tbl th, .tbl td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl thead th { font:700 13px/1.3 var(--sans); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); background:var(--bg2); }
.tbl tr:last-child td { border-bottom:0; }
.tbl td:first-child { font-weight:600; color:var(--ink); }
.y { color:var(--good); font-weight:700; } .n { color:var(--bad); font-weight:700; }
.callout { margin:26px 0; padding:18px 20px; border-radius:16px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--gold); }
.callout p:last-child { margin-bottom:0; }
.copybox { position:relative; margin:18px 0 24px; border-radius:16px; background:#1C140F; color:#F8EEE2; border:1px solid #33281F; }
.copybox pre { margin:0; padding:18px 20px; font:500 14.5px/1.6 var(--mono); white-space:pre-wrap; word-break:break-word; }
.copybox button { position:absolute; top:10px; right:10px; font:600 13px/1 var(--sans); padding:8px 11px; border-radius:9px; border:0; background:#FF6A2B; color:#fff; cursor:pointer; }
.copybox button.done { background:#F8EEE2; color:#1C140F; }
.copybox .lbl { display:block; padding:12px 20px 0; font:700 11.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#B3A496; }
.faq details { border-bottom:1px solid var(--line); padding:4px 0; }
.faq summary { cursor:pointer; list-style:none; padding:16px 36px 16px 0; position:relative; font:600 18px/1.4 var(--sans); color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; position:absolute; right:6px; top:24px; width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .25s var(--ease); }
.faq details[open] summary::after { transform:rotate(-135deg); top:28px; }
.faq details > div { padding:0 0 16px; color:var(--ink2); }
.author { display:flex; gap:20px; align-items:flex-start; margin:56px 0 24px; padding:24px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); }
.author img { width:96px; height:96px; border-radius:50%; flex:none; background:linear-gradient(135deg, var(--sun), var(--flame2)); object-fit:cover; }
.author .k { font:700 12px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.author .h { font:700 22px/1.2 var(--serif); margin:6px 0 8px; color:var(--ink); }
.author p { font-size:15.5px; color:var(--ink2); margin:0 0 10px; }
.author .links { display:flex; gap:14px; flex-wrap:wrap; font-size:14.5px; }
@media (max-width:560px) { .author { flex-direction:column; } }
.sources { font-size:15px; color:var(--muted); } .sources li { margin:6px 0; word-break:break-word; }
.related { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; margin:18px 0; }
.related a { display:block; padding:18px; border-radius:16px; background:var(--card); border:1px solid var(--line); text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.related a:hover { transform:translateY(-2px); box-shadow:var(--shadow-hi); }
.related a b { display:block; font:700 18px/1.3 var(--serif); margin-bottom:6px; }
.related a span { font-size:14.5px; color:var(--muted); }
.cta-band { position:relative; overflow:hidden; margin:56px 0; padding:34px 28px; border-radius:24px; color:#FFF8EC; background:radial-gradient(120% 140% at 0% 0%, #FF8A3D 0%, #E8461A 45%, #8E2A0E 100%); box-shadow:var(--shadow-hi); }
.cta-band h2 { color:#fff; margin:0 0 8px; font-size:clamp(24px, 3vw, 32px); }
.cta-band p { color:#FFE7D3; max-width:34em; }
.cta-band .btn-ghost { background:#FFF8EC; color:#1C140F; border-color:transparent; }
.cta-band .bird { position:absolute; right:22px; bottom:-6px; width:130px; opacity:.95; }
@media (max-width:640px) { .cta-band .bird { display:none; } }
.updated { font-size:14px; color:var(--faint); }

/* Guide path diagrams ("three doors"): real HTML on theme tokens, so they follow light and dark mode and stay readable on phones. */
.paths { padding:14px; display:grid; gap:10px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); }
.path-row { background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:12px 14px 14px; }
.path-label { display:block; font:700 12px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.path-steps { display:flex; align-items:center; gap:0; }
.step { flex:none; padding:8px 14px; border-radius:10px; background:var(--card); border:1px solid var(--line); color:var(--ink2); font:500 15px/1.3 var(--sans); }
.step.hl { background:var(--soft); border:1.5px solid var(--accent); color:var(--ink); font-weight:600; }
.step.mono { font:500 14px/1.3 var(--mono); overflow-wrap:anywhere; }
.sep { flex:1 1 20px; min-width:20px; height:2px; margin:0 6px; border-radius:2px; background:var(--accent); position:relative; }
.sep::after { content:""; position:absolute; right:-1px; top:-3px; width:7px; height:7px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); transform:rotate(45deg); }
.path-note { margin-left:14px; font:500 14.5px/1.3 var(--sans); color:var(--ink2); display:inline-flex; align-items:center; gap:8px; }
.path-note::after { content:""; width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; }
.path-note.plain::after { display:none; }
@media (max-width:640px) {
  .paths { padding:10px; }
  .path-steps { flex-direction:column; align-items:stretch; }
  .step { text-align:left; }
  .step.mono { font-size:13px; }
  .sep { flex:none; width:2px; height:14px; min-width:0; margin:0 0 0 18px; }
  .sep::after { right:auto; left:-3px; top:auto; bottom:0; transform:rotate(135deg); }
  .path-note { margin:10px 0 0; }
}
.shot-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:center; }
@media (max-width:640px) { .shot-pair { grid-template-columns:1fr; } }
.fileview { font:500 14px/1.5 var(--mono); }
.fileview td, .fileview th { white-space:nowrap; }
.verdict { display:inline-block; font:700 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; padding:5px 8px; border-radius:7px; background:var(--bg2); color:var(--muted); margin-right:6px; vertical-align:2px; }
.verdict.ok { background:color-mix(in srgb, var(--good) 14%, transparent); color:var(--good); }
.verdict.no { background:color-mix(in srgb, var(--bad) 14%, transparent); color:var(--bad); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveal { opacity:1; transform:none; }
}