/* Social Media MindMap: one stylesheet for the app, privacy and terms pages. */
:root {
  --bg: #f6f4ef; --surface: #fff; --ink: #17150f; --muted: #6b665c; --line: #e6e1d6;
  --accent: #6d4aff; --accent-2: #ff5c7a; --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --true: #1f7a45; --true-bg: #e2f3e8; --false: #b8392a; --false-bg: #fbe6e2; --mixed: #9a6200; --mixed-bg: #fbefd6;
  --shadow: 0 1px 2px rgb(23 21 15 / .04), 0 8px 24px rgb(23 21 15 / .06);
  --serif: "Instrument Serif", Georgia, serif; --sans: "Inter Variable", Inter, -apple-system, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0d0b; --surface: #181611; --ink: #f3efe6; --muted: #a39d90; --line: #2b2822;
    --accent: #9b85ff; --accent-2: #ff7a93;
    --true: #6fd39a; --true-bg: #15301f; --false: #ff8a78; --false-bg: #3a1a15; --mixed: #f2bd5b; --mixed-bg: #33270f;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, .display { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.05; margin: 0; }
h2 { font-size: clamp(32px, 4.5vw, 44px); }
h3 { font-size: 1.05em; margin: 0; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.logo { display: flex; align-items: center; gap: 10px; font: 400 25px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); text-decoration: none; white-space: nowrap; } /* the wordmark, in the titles' serif */
.logo svg { width: 30px; height: 30px; }
button.cta, .btn.cta { font-weight: 600; color: #fff; border-color: transparent; background: linear-gradient(120deg, #6d4aff, #cf3d6a); box-shadow: 0 4px 14px rgb(109 74 255 / .25); transition: translate .2s, filter .2s; } /* the main button's look, quieter */
button.cta:hover, .btn.cta:hover { border-color: transparent; opacity: 1; translate: 0 -1px; filter: brightness(1.08); } .top .cta { padding: 9px 16px; }
.top .me { display: flex; align-items: center; gap: 12px; font-size: .95em; }
@media (max-width: 400px) { .top { gap: 8px; padding: 14px 16px; } .logo { gap: 7px; font-size: 20px; } .logo svg { width: 24px; height: 24px; } .top .cta { padding: 8px 12px; font-size: 14px; } } /* logo and button fit side by side on small phones */

/* Buttons and inputs */
button, .btn { font: 500 15px/1 var(--sans); padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
button:hover, .btn:hover { border-color: var(--muted); }
.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.primary:hover { opacity: .9; border-color: var(--ink); }
.small { padding: 7px 12px; font-size: 14px; }
.danger { color: var(--false); }
input { font: 15px var(--sans); width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row input { flex: 1; min-width: 200px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: var(--shadow); }
.chip { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg); color: var(--muted); white-space: nowrap; }
.chip.true { background: var(--true-bg); color: var(--true); } .chip.false { background: var(--false-bg); color: var(--false); } .chip.mixed { background: var(--mixed-bg); color: var(--mixed); }


/* Landing */
.hero { position: relative; padding: 72px 20px 56px; text-align: center; }
.hero .row { justify-content: center; }
.hero > div { display: flex; flex-direction: column; } .intro { display: contents; } .intro > .lede, .intro > .row { order: 1; } .intro > .lede { width: 100%; } /* .intro is the first screen on phones; here its text and button sit under the cards */
/* The main call to action: a spinning purple-pink edge, a breathing glow and a shine that sweeps across now and then */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn.magic { position: relative; overflow: hidden; padding: 13px 21px 13px 25px; font-weight: 600; color: #fff; border: 2px solid transparent;
  background: linear-gradient(120deg, #6d4aff, #cf3d6a) padding-box, conic-gradient(from var(--spin), #c4b5ff, #ffd0da, #fff, #c4b5ff) border-box; /* brand purple-pink, pink deepened so white text stays readable */
  animation: spin 4s linear infinite, glow 2.5s ease-in-out infinite alternate; transition: translate .2s, filter .2s; }
.btn.magic::after { content: ""; position: absolute; inset: 0; pointer-events: none; translate: -100% 0;
  background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .35) 50%, transparent 65%); animation: shine 4s ease-in-out infinite 1s; }
.btn.magic:hover { opacity: 1; translate: 0 -2px; filter: brightness(1.08); }
.btn.magic .spark { flex: none; width: 16px; height: 16px; color: #fff; animation: twinkle 2.2s ease-in-out infinite; }
@keyframes spin { to { --spin: 360deg; } }
@keyframes twinkle { 50% { opacity: .55; scale: .7; rotate: 45deg; } }
@keyframes glow { from { box-shadow: 0 4px 16px rgb(109 74 255 / .35); } to { box-shadow: 0 6px 28px rgb(255 92 122 / .4); } }
@keyframes shine { 50%, 100% { translate: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .btn.magic, .btn.magic::after, .btn.magic .spark { animation: none; } }
.btn .arrow { transition: translate .2s; } .btn:hover .arrow { translate: 3px 0; }
@media (max-width: 560px) { .hero .lede br { display: none; } .hero h1 { text-wrap: balance; } } /* let the text wrap on its own on phones */
@media (max-width: 560px) { .hero .btn { white-space: normal; text-align: center; line-height: 1.3; text-wrap: balance; } } /* long label: wrap on phones */
.hero h1 { font-size: clamp(36px, 5.4vw, 68px); } .hero h1 .grad { white-space: nowrap; }
#plug { position: relative; color: var(--accent); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); } /* "Connect": a purple glow and a twinkling sparkle */
#plug::after { content: "✦"; content: "✦" / ""; position: absolute; right: -.3em; top: -.16em; font-size: .42em; font-style: normal; color: var(--accent-2); text-shadow: none; animation: twinkle 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #plug::after { animation: none; } }
.scribble { position: relative; white-space: nowrap; } /* a hand-drawn underline that sketches itself in */
.scribble svg { position: absolute; left: -2%; bottom: -.1em; width: 104%; height: .3em; overflow: visible; fill: none; stroke: var(--accent-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: underline 1s .7s ease-out forwards; }
@keyframes underline { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .scribble svg { animation: none; stroke-dashoffset: 0; } }
.hero .lede { margin: 0 auto 32px; font-size: clamp(17px, 1.75vw, 19px); line-height: 1.5; text-wrap: balance; } .hero .lede strong { font-weight: 700; }
.logos { display: inline-flex; gap: .16em; vertical-align: -.12em; white-space: nowrap; }
.logos > span { display: inline-grid; place-items: center; width: 1em; height: 1em; border-radius: .26em; background: #fff; color: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .1); }
/* Each logo as its app icon: brand-coloured tile with a white mark, or a white tile with the coloured mark. */
.logos .ic-chatgpt, .logos .ic-x, .logos .ic-grok { background: #000; } .logos .ic-claude { background: #D97757; } .logos .ic-tiktok { background: #000; }
.logos .ic-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.logos .ic-facebook svg { width: 76%; height: 76%; }
.logos .ic-gemini svg { width: 66%; height: 66%; }
/* Facebook with a small Messenger badge on its corner: DMs on Facebook go through Messenger. */
.logos .ic-facebook .badge { position: absolute; right: -16%; bottom: -16%; width: 52%; height: 52%; padding: 5%; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
.logos svg { width: 56%; height: 56%; }
/* The AI logos in the headline: an equal-sided triangle, turned 20° to the left (ChatGPT, Claude, Gemini).
   Zero height, so line spacing stays the same; compact on phones where a line sits above. */
.logos.tri { position: relative; display: inline-block; width: 1.96em; height: 0; margin: 0 .1em; }
.logos.tri > span { position: absolute; width: .66em; height: .66em; border-radius: .18em; }
.logos.tri > span:nth-child(1) { left: .53em; top: -1.3em; }
.logos.tri > span:nth-child(2) { left: 0; top: -.67em; }
.logos.tri > span:nth-child(3) { left: .81em; top: -.53em; }
.logos.tri > span:nth-child(4) { left: 1.3em; top: -1.2em; } /* Grok, top right */
.hero h1 .logos.tri > span { animation: logo-pop .5s cubic-bezier(.3, 1.6, .5, 1) both, float 3.4s ease-in-out infinite; animation-delay: calc(var(--k) * .15s + .5s), calc(var(--k) * -1.1s); } /* pop in, then drift */
.hero h1 .logos.tri > span:nth-child(2) { --k: 1; } .hero h1 .logos.tri > span:nth-child(3) { --k: 2; } .hero h1 .logos.tri > span:nth-child(4) { --k: 3; } .hero h1 .logos.tri > span:nth-child(1) { --k: 0; }
@keyframes float { 50% { translate: 0 -.09em; rotate: 5deg; } }
@media (prefers-reduced-motion: reduce) { .hero h1 .logos.tri > span { animation: none; } }
@media (max-width: 560px) {
  .logos.tri { width: 1.56em; }
  .logos.tri > span { width: .52em; height: .52em; border-radius: .16em; }
  .logos.tri > span:nth-child(1) { left: .42em; top: -.88em; }
  .logos.tri > span:nth-child(2) { left: 0; top: -.39em; }
  .logos.tri > span:nth-child(3) { left: .64em; top: -.28em; }
  .logos.tri > span:nth-child(4) { left: 1.02em; top: -.82em; }
}

/* "How it works" under the headline: four cards side by side, always visible. They come in one after another,
   then a highlight moves along them (app.js). */
.flow { position: relative; width: min(1140px, calc(100vw - 40px)); margin: clamp(44px, 5vw, 64px) 0 44px 50%; translate: -50% 0; text-align: left; } /* wider than the page column */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 48px 40px; }
.step { grid-column: span 2; } .step:nth-child(4) { grid-column: 2 / span 2; } .step:nth-child(5) { grid-column: 4 / span 2; } /* 3 on top, 2 centred below */
.links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* app.js draws an arrow from each card to the next */
.links path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 7; opacity: .7; marker-end: url(#step-arrow); animation: march .8s linear infinite; }
.links marker path { fill: var(--accent); stroke: none; stroke-dasharray: none; animation: none; }
@keyframes march { to { stroke-dashoffset: -9; } }
.step { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; transition: border-color .3s, transform .3s, box-shadow .3s;
  animation: rise .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * .45s); }
.step .head { display: flex; align-items: baseline; gap: 10px; }
.step .n { font: 400 34px/1 var(--serif); }
.step > p { margin: 0; color: var(--muted); font-size: .92em; }
.step .vis { flex: 1; min-height: 190px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.step .pop { animation: pop .5s cubic-bezier(.2, .8, .2, 1.2) both; animation-delay: calc(var(--i) * .45s + .3s + var(--d, 0s)); }
.step.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-4px); }
.step::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--grad); }
.step.on::after { animation: progress var(--step, 3s) linear both; }
/* The platform logos open step 1's picture: four tiles in a square turned 20° to the left, like the AI triangle. */
.share .logos.quad { position: relative; display: inline-block; font-size: 44px; flex: none; width: 1.69em; height: 1.69em; }
.share .logos.quad > span { position: absolute; width: .66em; height: .66em; border-radius: .18em; }
.share .logos.quad > span:nth-child(1) { left: .75em; top: 0; }
.share .logos.quad > span:nth-child(2) { left: 0; top: .27em; }
.share .logos.quad > span:nth-child(3) { left: .27em; top: 1.03em; }
.share .logos.quad > span:nth-child(4) { left: 1.03em; top: .75em; }
/* The cards keep moving a little: logos drift, verdict tags jiggle, the graph breathes and pulses */
.share .logos.quad > span { animation: logo-pop .5s cubic-bezier(.3, 1.6, .5, 1) both, float 3.4s ease-in-out infinite; animation-delay: calc(var(--k) * .12s + .2s), calc(var(--k) * -.85s); } /* drift together, a little out of step */
.share .logos.quad > span:nth-child(2) { --k: 1; } .share .logos.quad > span:nth-child(3) { --k: 2; } .share .logos.quad > span:nth-child(4) { --k: 3; } .share .logos.quad > span:nth-child(1) { --k: 0; }
@keyframes logo-pop { from { scale: 0; } }
.checks .chip { animation: jiggle 3.6s ease-in-out infinite; animation-delay: calc(var(--j, 0) * .5s + 2.5s); }
.checks li:nth-child(2) .chip { --j: 1; } .checks li:nth-child(3) .chip { --j: 2; } .checks li:nth-child(4) .chip { --j: 3; }
@keyframes jiggle { 0%, 12%, 100% { rotate: 0deg; } 2% { rotate: -7deg; } 4% { rotate: 6deg; } 6% { rotate: -4deg; } 8% { rotate: 3deg; } 10% { rotate: -1deg; } }
.step .kg-hub { animation: pop .5s cubic-bezier(.2, .8, .2, 1.2) both, breathe 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * .45s + .3s + var(--d, 0s)), calc(var(--d, 0s) * 3); }
.step .kg-dot.pop { animation: pop .5s cubic-bezier(.2, .8, .2, 1.2) both, ring-twinkle 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * .45s + .3s + var(--d, 0s)), calc(var(--d, 0s) * 2); }
@keyframes breathe { 50% { scale: 1.08; } }
@keyframes ring-twinkle { 50% { stroke-width: 4; } }
.kg-pulse { fill: var(--accent-2); opacity: 0; animation: fade-in .4s 2.6s forwards; } /* app.js sends them along the links */
@keyframes fade-in { to { opacity: .9; } }
.step .sub { margin: -8px 0 0; font-weight: 500; text-wrap: pretty; } .step .sub a, .step h3 a { color: inherit; text-decoration-color: var(--accent); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes progress { to { width: 100%; } }

/* 1. Share */
.share { align-items: center; }
.post { color: inherit; text-decoration: none; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); width: 100%; }
.post p { margin: 0; font-size: .88em; line-height: 1.35; }
.post .thumb { flex: none; width: 36px; height: 48px; border-radius: 8px; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 12px; }
.post .via svg { width: 13px; height: 13px; vertical-align: -2px; fill: #FF0069; }
.send { display: flex; flex-direction: column; gap: 4px; }
.send i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .2; animation: dot 1.4s infinite; }
.send i:nth-child(2) { animation-delay: .15s; } .send i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { opacity: 1; } }
.dm { display: flex; align-items: center; gap: 9px; align-self: center; width: fit-content; padding: 7px 16px 7px 7px; border-radius: 999px; text-align: left; color: #fff; font-weight: 600; font-size: .88em;
  background: linear-gradient(120deg, #6d4aff, #cf3d6a); box-shadow: 0 6px 18px rgb(109 74 255 / .3); } /* the reel, sent to @reelsfactchecker */
.dm img { width: 30px; height: 30px; border: 2px solid rgb(255 255 255 / .85); border-radius: 50%; }
.dm span { display: grid; line-height: 1.25; } .dm small { font-weight: 500; opacity: .85; }
.step .dm { --glow: rgb(207 61 106 / .45); animation: pop .55s cubic-bezier(.3, 1.7, .5, 1) both, glow-loop 2.6s ease-out infinite; animation-delay: calc(var(--i) * .45s + .3s + var(--d, 0s)), calc(var(--i) * .45s + 1.8s); }

/* 2. Fact-check */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flow-root; padding: 8px 10px 8px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: .86em; line-height: 1.35; }
/* The tag floats to the end of the claim's last line, so the text keeps the full width. */
.checks .chip { float: right; margin: 1px 0 0 8px; font-size: 11.5px; padding: 2px 7px; }

/* Build memories: a small knowledge graph. Dots are memories (ring colour = verdict), circles are topics. */
.kg-box { align-items: center; }
.kg { width: 100%; max-width: 300px; overflow: visible; }
.kg-edge { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 160; animation: draw .9s ease-out backwards; animation-delay: calc(var(--i) * .45s + .3s + var(--d, 0s)); }
.kg-edge.new { stroke: var(--accent); stroke-width: 2; animation: none; }
.kg-hub circle { fill: url(#kg-g); } .kg-hub text { fill: #fff; font: 600 8.5px var(--sans); text-anchor: middle; }
.kg-dot { fill: var(--surface); stroke-width: 2.5; } .kg-dot.t { stroke: var(--true); } .kg-dot.m { stroke: var(--mixed); } .kg-dot.f { stroke: var(--false); }
.kg .pop { transform-box: fill-box; transform-origin: center; }
.kg-new rect { fill: var(--false-bg); } .kg-new text { fill: var(--false); font: 600 8.5px var(--sans); text-anchor: middle; }
.kg-ring { fill: none; stroke: var(--false); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 1.8s ease-out infinite; animation-delay: calc(var(--i) * .45s + 2.2s); opacity: 0; }
@keyframes draw { from { stroke-dashoffset: 160; } }
@keyframes ring { 0% { opacity: .8; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.2); } }
.kg-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .8em; color: var(--muted); }
.kg-legend li { display: flex; align-items: flex-start; gap: 8px; }
.kg-legend i { flex: none; width: 12px; height: 12px; margin-top: calc(.5lh - 6px); border-radius: 50%; } /* same box for both; centred on the first line */
.kg-legend .m { border: 2.5px solid var(--muted); background: var(--surface); } .kg-legend .t { background: var(--grad); }

/* 4. Recall */
.chat { gap: 8px; }
.bubble { margin: 0; padding: 9px 12px; border-radius: 14px; font-size: .86em; line-height: 1.35; }
.bubble.you { align-self: flex-end; max-width: 92%; background: var(--ink); color: var(--bg); border-bottom-right-radius: 5px; }
.bubble.ai { background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.saved { margin: 0; align-self: center; padding: 4px 11px; border-radius: 999px; background: var(--true-bg); color: var(--true); font-size: .8em; font-weight: 600; }
.bubble .who svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }
.step .who svg { animation: spin-it 8s linear infinite; } /* Claude's spark keeps turning, as when it works */
.recalled { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.step .saved { animation: pop .5s cubic-bezier(.2, .8, .2, 1.2) both, glow-loop 3s ease-out infinite; animation-delay: calc(var(--i) * .45s + .3s + var(--d, 0s)), calc(var(--i) * .45s + 2.5s); }
.step .recalled { --glow: color-mix(in srgb, var(--accent) 45%, transparent); }
@keyframes glow-loop { 0% { box-shadow: 0 0 0 0 var(--glow, rgb(31 122 69 / .45)); } 40%, 100% { box-shadow: 0 0 0 9px transparent; } }

@media (max-width: 820px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .step:nth-child(4) { grid-column: auto / span 2; } .step:nth-child(5) { grid-column: 2 / span 2; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; row-gap: 40px; } .step, .step:nth-child(n) { grid-column: auto; } .step .vis { min-height: 0; } }
@media (prefers-reduced-motion: reduce) {
  .links path, .step, .step .pop, .kg-edge, .kg-ring, .send i, .step.on::after, .share .logos.quad > span, .checks .chip, .step .kg-hub, .step .kg-dot, .step .who svg, .step .saved { animation: none !important; }
  .step.on { transform: none; }
}
#net { position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; translate: -50% 0; z-index: -1; opacity: .85; } /* full width, so it shows around the cards */
#landing { overflow-x: clip; }
.manifesto { text-align: center; } .manifesto .wrap { max-width: 760px; }
.manifesto .display { display: inline-block; font-size: clamp(40px, 6vw, 64px); line-height: 1.05; margin: 6px 0 18px; }
.manifesto .display:first-child { margin: 0 0 10px; } .manifesto h2 { max-width: 720px; margin: 0 auto 22px; font-size: clamp(22px, 2.9vw, 31px); line-height: 1.3; text-wrap: balance; }
.manifesto h2 .matrix { font-style: italic; font-size: 1.35em; line-height: 1; padding-right: .06em; } /* the product, bigger and sketched under */
.manifesto h2 .hl { padding: 0 .18em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; /* a highlighter sweeps over Memories, then Knowledge Base */
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent-2) 32%, transparent)) no-repeat 0 60% / 0 70%; animation: hl-sweep .7s ease-out 1s forwards; }
.manifesto h2 .hl ~ .hl { animation-delay: 1.6s; }
@keyframes hl-sweep { to { background-size: 100% 70%; } }
@media (prefers-reduced-motion: reduce) { .manifesto h2 .hl { animation: none; background-size: 100% 70%; } } /* "Filter the chaos with AI", then "Create your…" under it */
.manifesto p:last-child { font-size: 1.25em; line-height: 1.55; margin: 0; text-wrap: pretty; }
.manifesto mark, .decide mark { color: inherit; padding: 0 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 36%, transparent), color-mix(in srgb, var(--accent-2) 36%, transparent)) no-repeat 0 62% / 100% 55%; transition: background-size .6s ease-out; }
.manifesto .sweep:not(.seen) mark { background-size: 0 55%; } /* app.js sweeps them in, one after another, once in view */
.manifesto mark:nth-of-type(2) { transition-delay: .45s; } .manifesto mark:nth-of-type(3) { transition-delay: .9s; }
/* "Why?": each line acted out — a hypnotized phone, a stamped claim, an atom you choose what to do with, and a swipe-or-keep game */
@property --wiggle { syntax: "<number>"; inherits: true; initial-value: 0; }
.why { position: relative; }
.why .read-me { position: absolute; left: max(12px, calc((100vw - 760px) / 4 - 24px)); top: 0; z-index: 20; margin: 0; writing-mode: vertical-rl; rotate: 180deg; pointer-events: none;
  opacity: 0; font: italic 400 46px/1 var(--serif); letter-spacing: .02em; } /* app.js plays it once: up from the bottom of the screen to where "Why?" starts */
.read-me.go { animation: slither 2.6s linear infinite; }
.read-me i { display: inline-block; white-space: pre; font-style: inherit; color: color-mix(in srgb, var(--accent-2) calc(var(--p) * 100%), var(--accent));
  translate: calc(sin(var(--n) * .5 + var(--wiggle)) * 10px) 0; } /* each letter on a moving wave: a slithering snake */
@keyframes slither { to { --wiggle: 6.2832; } }
@media (max-width: 900px), (prefers-reduced-motion: reduce) { .read-me { display: none; } }
.why { overflow-x: clip; } .why .wrap { max-width: 760px; text-align: center; } /* the stamp slams in big; never widen the page */
.why h2 { display: table; margin: 0 auto 18px; font-size: clamp(40px, 6vw, 64px); }
.why p { font-size: 1.15em; line-height: 1.7; margin: 0 0 18px; text-wrap: pretty; }
.why-row { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; text-align: left; }
.why-row p { font-size: 1.3em; margin: 0; }
.look { display: table; margin: 0 0 14px; padding: 8px 15px; border-radius: 18px 18px 18px 5px; background: var(--ink); color: var(--bg); font: 600 .8em/1.2 var(--sans); rotate: -3deg; } /* "Well, look:" said in a chat bubble */
.hypno { display: block; margin-top: 22px; text-align: center; white-space: nowrap; font: italic 400 1.7em/1 var(--serif); } /* its own line, centred under the text */
.hypno i { display: inline-block; white-space: pre; font-style: inherit; color: color-mix(in srgb, var(--accent-2) calc(var(--p) * 100%), var(--accent)); animation: sway 2.2s ease-in-out infinite; animation-delay: calc(var(--n) * -.09s); }
@keyframes sway { 50% { translate: 0 -5px; rotate: -4deg; } }
.phone { position: relative; display: block; width: 150px; height: 270px; padding: 0; border: 6px solid var(--ink); border-radius: 30px; background: var(--bg); overflow: hidden; white-space: normal; }
.phone:hover { border-color: var(--ink); }
.feed { position: absolute; inset: 8px; display: flex; flex-direction: column; gap: 8px; filter: blur(1.2px); animation: doom 1.6s linear infinite; }
.feed i { flex: none; height: 70px; border-radius: 12px; background: linear-gradient(135deg, #6d4aff, #ff5c7a); opacity: .5; }
.feed i:nth-child(3n+2) { background: linear-gradient(160deg, #ff5c7a, #ffb36b); } .feed i:nth-child(3n) { background: var(--muted); opacity: .25; }
.spiral { position: absolute; inset: -60%; background: repeating-conic-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 0 12deg, transparent 12deg 24deg); animation: spin-it 4s linear infinite; transition: opacity .5s; }
.snap { position: absolute; left: 8px; right: 8px; bottom: 10px; padding: 7px 6px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 11px/1.2 var(--sans); }
.phone[aria-pressed="true"] .feed { animation-play-state: paused; filter: none; } .phone[aria-pressed="true"] .spiral { opacity: 0; }
.phone-msg { position: absolute; left: 10px; right: 10px; top: 50%; translate: 0 -50%; padding: 14px 10px 10px; border-radius: 16px; text-align: center; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); font: 400 18px/1.15 var(--serif); animation: pop .4s cubic-bezier(.2, .8, .2, 1.2) both; }
.phone-msg::after { content: "↓"; content: "↓" / ""; display: block; margin-top: 6px; font: 700 15px/1 var(--sans); color: var(--accent-2); animation: bob-down 1.2s ease-in-out infinite; }
@keyframes bob-down { 50% { translate: 0 4px; } }
@keyframes doom { to { translate: 0 -50%; } }
@keyframes spin-it { to { rotate: 360deg; } }
.claim { position: relative; max-width: 500px; margin: 64px auto 72px; padding: 22px 24px 26px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); rotate: -1.5deg; }
.claim-text { font: italic 400 clamp(22px, 3vw, 28px)/1.2 var(--serif) !important; margin: 0 0 8px !important; }
.claim-src { font-size: .85em; color: var(--muted); }
.stamp { position: absolute; right: -18px; bottom: -26px; rotate: -10deg; padding: 6px 16px; font: 400 clamp(28px, 4vw, 40px)/1 var(--serif); color: var(--accent-2); background: color-mix(in srgb, var(--surface) 85%, transparent); border: 4px double var(--accent-2); border-radius: 12px; opacity: 0; }
.stamp:hover { border-color: var(--accent-2); }
.claim.stamped .stamp { animation: stamp .4s cubic-bezier(.3, 1.5, .5, 1) forwards; } .claim.stamped { animation: thud .25s .3s; }
@keyframes stamp { from { opacity: 0; scale: 2.6; } to { opacity: 1; scale: 1; } }
@keyframes thud { 50% { translate: 0 4px; } }
.believe { font: 400 clamp(28px, 4vw, 44px)/1.2 var(--serif) !important; margin: 0 auto 64px !important; }
.believe .scribble svg { animation: none; } .believe.seen .scribble svg { animation: underline 1s .2s ease-out forwards; } /* drawn in once on screen */
.choice { margin-bottom: 64px; }
.nuke { font: 400 clamp(26px, 3.4vw, 36px)/1.2 var(--serif) !important; }
.atom { display: block; width: 150px; height: 150px; margin: 8px auto 20px; overflow: visible; color: var(--false); fill: none; stroke: currentColor; stroke-width: 2.5; transition: color .4s, filter .4s; }
.atom circle { fill: currentColor; stroke: none; } .bolt { fill: #fff; stroke: none; opacity: 0; transition: opacity .3s; }
.orbits { animation: spin-it 5s linear infinite; } .rays { stroke-linecap: round; animation: burst .7s ease-out infinite; }
.choice[data-mode="bomb"] .atom { animation: shake .12s linear infinite; }
.choice[data-mode="energy"] .atom { color: var(--true); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--true) 55%, transparent)); }
.choice[data-mode="energy"] .rays { opacity: 0; animation: none; } .choice[data-mode="energy"] .bolt { opacity: 1; } .choice[data-mode="energy"] .orbits { animation-duration: 2.5s; }
@keyframes shake { 25% { translate: 1.5px -1px; } 75% { translate: -1.5px 1px; } }
@keyframes burst { from { scale: .75; opacity: 1; } to { scale: 1.15; opacity: 0; } }
.switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.switch button { border: 0; background: transparent; padding: 9px 18px; transition: background .3s, color .3s; }
.switch [data-mode="bomb"][aria-pressed="true"] { background: var(--false); color: var(--surface); } .switch [data-mode="energy"][aria-pressed="true"] { background: var(--true); color: var(--surface); }
.choice-say span { transition: opacity .3s; } .choice[data-mode="bomb"] [data-for="energy"], .choice[data-mode="energy"] [data-for="bomb"] { opacity: .35; }
.decide { margin-bottom: 0; }
.circled { position: relative; white-space: nowrap; font-style: italic; }
.why .decide > p { font: 400 clamp(26px, 3.4vw, 36px)/1.25 var(--serif); } .say-big { display: block; margin-bottom: 14px; } /* both sentences as statements, one per line */
.decide mark { white-space: nowrap; background-size: 0 55%; transition: background-size .8s ease-out .8s; } .decide.seen mark { background-size: 100% 55%; } /* the highlighter sweeps in once on screen */
.circled svg { position: absolute; left: -9%; top: -38%; width: 118%; height: 176%; overflow: visible; fill: none; stroke: var(--accent-2); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.decide.seen .circled svg { animation: scribble 3.6s ease-in-out infinite; } /* keeps being circled by hand once on screen */
@keyframes scribble { 0% { stroke-dashoffset: 100; rotate: -2deg; } 35%, 80% { stroke-dashoffset: 0; opacity: 1; rotate: 1deg; } 100% { stroke-dashoffset: 0; opacity: 0; rotate: 2deg; } }
.finally-wrap { position: relative; } /* "How it works?" … "Finally!", after all that talking */
.finally { position: absolute; left: calc(100% + 10px); top: -4px; rotate: -10deg; white-space: nowrap; font: italic 400 .5em/1 var(--serif); color: var(--accent-2); opacity: 0; }
.finally-wrap.seen .finally { animation: finally .6s cubic-bezier(.3, 1.6, .5, 1) .4s forwards, wiggle 4s ease-in-out 1.6s infinite; }
@keyframes finally { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes wiggle { 0%, 10%, 100% { rotate: -10deg; } 3% { rotate: -2deg; } 6% { rotate: -16deg; } }
@media (max-width: 560px) { .finally { left: auto; right: -4px; top: -.95em; } }
@media (prefers-reduced-motion: reduce) { .finally { opacity: 1; } }
.why .last { max-width: 680px; margin: 0 auto; font: 400 clamp(26px, 3.4vw, 36px)/1.35 var(--serif); text-wrap: balance; }
.stacked { display: inline-block; white-space: nowrap; padding: 0 10px; margin: 0 4px 6px 0; line-height: 1.25; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 3px 3px 0 #ff5c7a, 6px 6px 0 #6d4aff; rotate: -1.5deg; } /* a little stack of cards */
.gone { color: var(--muted); filter: blur(.5px); -webkit-mask-image: linear-gradient(90deg, #000 20%, rgb(0 0 0 / .3)); mask-image: linear-gradient(90deg, #000 20%, rgb(0 0 0 / .3)); animation: fade-off 3.5s ease-in-out infinite; }
.swipe-word { white-space: nowrap; } .arrow-up { display: inline-block; margin-left: 4px; font-family: var(--sans); font-size: .7em; color: var(--accent-2); animation: float-up 1.6s ease-in infinite; }
@keyframes fade-off { 50% { opacity: .45; translate: 0 -2px; } }
@keyframes float-up { from { translate: 0 4px; opacity: 1; } to { translate: 0 -14px; opacity: 0; } }
.swipe .row { justify-content: center; } .swipe .try { margin-top: 36px; }
.deck { position: relative; width: 250px; aspect-ratio: 9 / 16; margin: 30px auto 26px; overflow: hidden; touch-action: none; background: #000; border: 8px solid #111; border-radius: 38px; box-shadow: var(--shadow), 0 24px 48px rgb(23 21 15 / .2); } /* a phone playing reels */
.swipe-card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 12px 18px; text-align: left; color: #fff; font: 500 12px/1.35 var(--sans);
  background: linear-gradient(160deg, hsl(var(--h) 65% 42%), hsl(calc(var(--h) + 50) 70% 20%)); background-size: 160% 160%; animation: pan 7s ease-in-out infinite alternate; }
.swipe-card[data-pos="0"] { z-index: 3; } .swipe-card[data-pos="1"] { z-index: 2; } .swipe-card[data-pos="2"] { z-index: 1; }
.ig-top { font: 700 17px/1 var(--sans); }
.swipe-claim { align-self: center; max-width: 80%; text-align: center; font: 800 19px/1.2 var(--sans); text-shadow: 0 2px 10px rgb(0 0 0 / .45); }
.ig-side { position: absolute; right: 8px; bottom: 74px; display: grid; justify-items: center; gap: 13px; font-size: 10.5px; font-weight: 600; }
.ig-side svg { display: block; width: 25px; height: 25px; margin: 0 auto 2px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ig-bottom { display: grid; gap: 6px; padding-right: 44px; text-shadow: 0 1px 4px rgb(0 0 0 / .4); }
.ig-user { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.ig-avatar { width: 26px; height: 26px; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--a) 75% 62%), hsl(calc(var(--a) + 50) 70% 42%)); }
.ig-verified { display: grid; place-items: center; width: 13px; height: 13px; margin-left: -3px; border-radius: 50%; background: #0095f6; font-size: 8px; }
.ig-follow { padding: 2px 8px; border: 1px solid #fff; border-radius: 7px; font-size: 11px; }
.ig-audio { font-size: 11px; opacity: .9; }
.ig-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: #fff; animation: play 8s linear infinite; }
.swipe-card.up { animation: fly-up .4s ease-in-out forwards; }
.ig-share.tapped svg { animation: tap .4s; } @keyframes tap { 50% { scale: 1.4; } }
/* Share sheet → DM with @reelsfactchecker, in Instagram's dark style */
.ig-sheet, .ig-chat { position: absolute; z-index: 5; color: #fff; text-align: left; font: 500 11px/1.35 var(--sans); }
.ig-sheet { inset: auto 0 0; padding: 8px 12px 14px; background: #262626; border-radius: 16px 16px 0 0; animation: sheet-up .35s ease-out both; }
.ig-sheet::before { content: ""; display: block; width: 34px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: #555; }
.ig-search { display: block; margin-bottom: 12px; padding: 6px 10px; border-radius: 9px; background: #363636; color: #a8a8a8; }
.ig-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 4px; }
.ig-people > span { display: grid; justify-items: center; gap: 4px; overflow: hidden; font-size: 9.5px; white-space: nowrap; text-overflow: ellipsis; }
.ig-people i, .ig-head i { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--c); font: 700 15px/1 var(--sans); }
.ig-rfc { background: #0b1f3a !important; } .ig-rfc img { width: 100%; height: 100%; border-radius: 50%; } /* Reels Fact Checker's logo (copied from its repo) */
.ig-people .picked i::after { content: "✓"; position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 17px; height: 17px; border: 2px solid #262626; border-radius: 50%; background: #0095f6; color: #fff; font-size: 9px; }
.ig-send { display: block; margin-top: 12px; padding: 9px; border-radius: 9px; background: #0095f6; text-align: center; font-size: 12px; font-weight: 700; opacity: 0; transition: scale .15s, filter .15s, background .25s; }
.ig-sheet.ready .ig-send { opacity: 1; animation: send-pop .5s cubic-bezier(.3, 1.6, .5, 1) both, send-ring 1s .5s; }
.ig-send.pressed { scale: .92; filter: brightness(.8); } .ig-send.sent { background: #22c55e; }
.ig-plane { position: absolute; left: 50%; bottom: 34px; width: 26px; height: 26px; animation: fly-plane .9s ease-in forwards; }
.ig-plane svg { display: block; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
@keyframes send-pop { from { opacity: 0; scale: .5; } }
@keyframes send-ring { from { box-shadow: 0 0 0 0 rgb(0 149 246 / .7); } to { box-shadow: 0 0 0 10px rgb(0 149 246 / 0); } }
@keyframes fly-plane { from { translate: -50% 0; } to { translate: 70px -230px; rotate: 25deg; scale: .5; opacity: 0; } }
.ig-chat { inset: 0; display: flex; flex-direction: column; background: #000; font-weight: 400; animation: slide-in .35s ease-out both; } .ig-chat.out { animation: slide-out .35s ease-in forwards; }
.ig-head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 9px; border-bottom: 1px solid #262626; font-weight: 700; font-size: 12px; } .ig-head i { width: 26px; height: 26px; font-size: 11px; }
.ig-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; padding: 10px 8px 12px; }
.ig-msgs > * { flex: none; animation: pop .35s cubic-bezier(.2, .8, .2, 1.2) both; }
.ig-in { align-self: flex-start; max-width: 88%; padding: 7px 10px; border-radius: 16px; background: #262626; white-space: pre-line; }
.ig-in.btns { display: grid; padding: 0; overflow: hidden; } .ig-in.btns > span { padding: 7px 10px; } .ig-in.btns b { padding: 6px 10px; border-top: 1px solid #3a3a3a; text-align: center; font-weight: 600; transition: background .2s; }
.ig-in b.tapped { background: #3d3d3d; }
.ig-in b.src { color: #5eead4; animation: src-glow 1.1s calc(var(--i) * .3s + .3s) 2; } @keyframes src-glow { 50% { background: rgb(94 234 212 / .2); } }
.swipe, .demo { position: relative; }
#landing .phone-only { display: none; }
.src-note { position: absolute; left: calc(50% + 150px); max-width: 180px; text-align: left; pointer-events: none; font: italic 400 20px/1.2 var(--serif); color: var(--accent-2); animation: pop .4s .3s both; } /* points at the sources in the DM */
.src-note::before { content: "← "; content: "← " / ""; }
@media (max-width: 760px) { .src-note { display: none; } }
.mem-mini { position: absolute; left: 50%; z-index: 0; width: 820px; translate: -50% 0; text-align: left; pointer-events: none; animation: appear .5s both; } /* spreads out on both sides, behind the phone */
@keyframes appear { from { opacity: 0; } }
.deck { z-index: 1; }
.star { position: absolute; z-index: 10; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; pointer-events: none;
  box-shadow: 0 0 6px 2px #ff5c7a, 0 0 18px 6px rgb(109 74 255 / .55); } /* a shooting star, from a saved tag into the graph */
.star::after { content: ""; position: absolute; right: 5px; top: 50%; width: 90px; height: 3px; translate: 0 -50%; border-radius: 3px; background: linear-gradient(to left, #fff, rgb(255 92 122 / .7) 30%, transparent); }
.burst { position: absolute; z-index: 10; translate: -50% -50%; color: #ff5c7a; font-size: 22px; line-height: 1; text-shadow: 0 0 8px rgb(255 92 122 / .8); pointer-events: none; animation: burst-star .7s ease-out forwards; }
@keyframes burst-star { from { scale: .3; opacity: 1; } to { scale: 1.8; opacity: 0; rotate: 90deg; } }
.mem-mini small { display: block; margin: 0 0 6px 16px; font: 600 10.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.mem-mini small.bumped { color: var(--accent); animation: pop .4s both; }
.mem-mini svg { display: block; width: 100%; overflow: visible; }
.mem-mini path.old { fill: none; stroke: var(--muted); stroke-width: 1; opacity: .25; }
.mem-mini circle.old { fill: var(--surface); stroke-width: 1.8; opacity: .6; }
.mem-mini circle.hub { fill: url(#kg-g); }
.mem-mini text { font: 600 8px var(--sans); text-anchor: middle; } .mem-mini text.hub { fill: #fff; font-size: 7.5px; }
.mem-mini text.mem, .mem-mini text.leaf { font-size: 9px; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; } .mem-mini text.leaf { fill: var(--muted); }
.mem-mini .new-link { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 100; animation: draw-in .6s ease-out both; }
.mem-mini circle.mem { fill: var(--surface); stroke-width: 3; } .mem-mini circle.leaf { fill: var(--accent); }
.mem-mini .true { stroke: var(--true); } .mem-mini .mixed { stroke: var(--mixed); } .mem-mini .false { stroke: var(--false); }
.mem-mini .ring { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ring 1.6s ease-out 3; } .mem-mini .ring.linked { stroke: var(--accent-2); } /* the related memory lighting up */
.mem-mini circle.mem, .mem-mini circle.leaf, .mem-mini text.mem, .mem-mini text.leaf { transform-box: fill-box; transform-origin: center; animation: pop .4s .35s both; }
@keyframes draw-in { from { stroke-dashoffset: 100; } }
@media (max-width: 860px) { .mem-mini { display: none; } }
.ig-typing { letter-spacing: 2px; animation: pop .35s both, blink 1s .35s infinite !important; } @keyframes blink { 50% { opacity: .4; } }
.ig-reel { position: relative; align-self: flex-end; display: flex; flex-direction: column; justify-content: center; gap: 22px; width: 90px; height: 118px; padding: 8px; border-radius: 12px; text-align: center; font: 800 10px/1.2 var(--sans); background: linear-gradient(160deg, hsl(var(--h) 65% 42%), hsl(calc(var(--h) + 50) 70% 20%)); }
.ig-react { position: absolute; left: -8px; bottom: -8px; padding: 1px 4px; border: 2px solid #000; border-radius: 10px; background: #262626; font-size: 11px; }
.ig-card { align-self: flex-start; display: grid; gap: 7px; width: 175px; padding: 11px; border-radius: 12px; background: linear-gradient(160deg, #0b1f3a, #0c5e78); } /* the bot's verdict image, small */
.ig-card small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; white-space: nowrap; color: #5eead4; font-size: 8px; font-weight: 700; letter-spacing: .1em; } .ig-card small i { font-style: normal; letter-spacing: 0; color: #ffffffcc; }
.ig-reel small { position: absolute; top: 6px; left: 7px; right: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.5px; font-weight: 700; text-align: left; } .ig-card b { color: #5eead4; }
.ig-card .pills { display: flex; flex-wrap: wrap; gap: 4px; } .ig-card .pill { padding: 2px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 700; color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); }
.ig-card .site { justify-self: end; color: #5eead4; font-size: 8px; }
.ig-carousel { display: flex; gap: 6px; width: calc(100% + 8px); } /* the second card peeks out, as in Instagram */
.ig-ctx { flex: none; display: grid; width: 72%; overflow: hidden; border-radius: 14px; background: #262626; animation: ctx-glow 1.1s calc(var(--i) * .3s + .3s) 2; }
@keyframes ctx-glow { 50% { box-shadow: inset 0 0 0 1.5px rgb(94 234 212 / .8); background: #2c3a38; } }
.ig-ctx > span { padding: 8px 10px; font-weight: 600; } .ig-ctx b { padding: 6px 10px; border-top: 1px solid #3a3a3a; text-align: center; font-weight: 600; color: #5eead4; }
/* …and the conversation continues in Claude */
.cl-chat { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; text-align: left; color: #1f1e1d; background: #faf9f5; font: 400 11px/1.45 var(--sans); animation: slide-in .35s ease-out both; }
.cl-chat.out { animation: slide-out .35s ease-in forwards; }
.cl-head { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 10px 9px; border-bottom: 1px solid #e8e5dc; font: 400 16px/1 var(--serif); } .cl-head svg { width: 15px; height: 15px; }
.cl-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; padding: 10px; }
.cl-msgs > * { flex: none; animation: pop .35s cubic-bezier(.2, .8, .2, 1.2) both; }
.cl-you { align-self: flex-end; max-width: 86%; padding: 7px 10px; border-radius: 14px; background: #f0eee6; white-space: pre-line; }
.cl-you.long { max-height: 8.7em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); } /* the long pre-filled prompt, faded */
.cl-ai { align-self: flex-start; max-width: 96%; font: 400 13px/1.4 var(--serif); } .cl-ai svg { display: block; width: 15px; height: 15px; margin-bottom: 4px; }
.cl-typing svg { animation: spin-it 1.2s linear infinite; }
.cl-tool { display: flex; width: fit-content; margin-top: 7px; padding: 4px 8px; border: 1px solid #bfe5cb; border-radius: 8px; background: #eaf7ee; color: #1f7a45; font: 600 10px/1.2 var(--sans); animation: pop .35s .25s both, saved-glow 1.1s .6s 2; }
@keyframes saved-glow { from { box-shadow: 0 0 0 0 rgb(34 197 94 / .55); } to { box-shadow: 0 0 0 8px rgb(34 197 94 / 0); } }
.cl-input { margin: 0 10px 12px; padding: 8px 12px; border: 1px solid #e8e5dc; border-radius: 14px; background: #fff; color: #9a968c; }
@keyframes sheet-up { from { translate: 0 100%; } }
@keyframes slide-in { from { translate: 100% 0; } }
@keyframes slide-out { to { translate: -100% 0; } }
@keyframes pan { to { background-position: 100% 100%; } }
@keyframes play { from { width: 0; } to { width: 100%; } }
@keyframes fly-up { to { translate: 0 -100%; } }
.keep { font-weight: 700; font-size: 17px; padding: 14px 26px; color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 6px 20px rgb(109 74 255 / .35); } .keep:hover { filter: brightness(1.08); translate: 0 -2px; }
.keep.nudge { position: relative; animation: nudge 1.6s ease-out infinite; } /* "try it!" until the first click */
.keep.nudge::after { content: "← try it!"; content: "← try it!" / ""; position: absolute; left: calc(100% + 12px); top: 50%; translate: 0 -50%; white-space: nowrap; font: italic 400 34px/1 var(--serif); color: var(--accent-2); text-shadow: 0 2px 10px rgb(255 92 122 / .3); animation: bob 1.2s ease-in-out infinite; }
@keyframes nudge { from { box-shadow: 0 6px 20px rgb(109 74 255 / .35), 0 0 0 0 rgb(255 92 122 / .6); } to { box-shadow: 0 6px 20px rgb(109 74 255 / .35), 0 0 0 20px rgb(255 92 122 / 0); } }
@keyframes bob { 50% { translate: 10px -50%; } }
@media (max-width: 560px) { .deck { margin-bottom: 44px; } .keep.nudge::after { content: "try it! ↓"; content: "try it! ↓" / ""; left: 50%; top: auto; bottom: calc(100% + 10px); translate: -50% 0; animation: none; } }
.tally { font-size: .95em !important; color: var(--muted); margin: 14px 0 12px !important; }
.tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 26px; margin: 0; padding: 0; list-style: none; }
.tray .chip { white-space: normal; animation: pop .4s cubic-bezier(.2, .8, .2, 1.2) both; }
@media (max-width: 560px) { .why-row { grid-template-columns: 1fr; justify-items: center; text-align: center; } .look { margin-inline: auto; } .stamp { right: -2px; } }
@media (prefers-reduced-motion: reduce) { .why *, .why *::before, .why *::after { animation: none !important; transition: none !important; } .why .stamp { opacity: 1; } .decide.seen .circled svg { stroke-dashoffset: 0; } }
.memmap { position: relative; left: 50%; translate: -50%; width: min(1040px, 100vw - 40px); margin: 8px 0 40px; }
.memmap canvas { display: block; width: 100%; aspect-ratio: 2 / 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 7%, transparent), transparent); }
.map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 10px; font-size: .85em; color: var(--muted); }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; }
.map-legend .t { width: 13px; height: 13px; background: var(--grad); } .map-legend .c { width: 8px; height: 8px; background: var(--accent); } .map-legend .s { width: 6px; height: 6px; background: var(--muted); }
.map-legend .m { border: 2.5px solid; background: var(--surface); } .map-legend .true { border-color: var(--true); } .map-legend .mixed { border-color: var(--mixed); } .map-legend .false { border-color: var(--false); }
.map-legend .l { width: 16px; height: 0; border-radius: 0; border-top: 1.5px solid var(--muted); } .map-legend .d { border-top-style: dashed; }
/* The app's Social Media MindMap Matrix: a cloud in 3D, straight on the page */
.mind { margin: 0; }
.mind-stage { position: relative; }
.mind canvas { display: block; width: 100%; aspect-ratio: 3 / 2; cursor: grab; touch-action: pan-y; } /* drag sideways to turn it; swiping up and down still scrolls */
.mind-sub { margin: -8px 0 0; color: var(--muted); }
.mind-switch { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 6px; } /* My memories | Example, and the counts */
.mind-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mind-hint, .mind-stats { margin: 0; font-size: .85em; color: var(--muted); } .mind-stats { margin-left: auto; }
.mind-tip { position: absolute; z-index: 2; pointer-events: none; translate: -50% -100%; width: max-content; max-width: 250px; padding: 9px 12px 10px; display: grid; gap: 3px; justify-items: start;
  font-size: 13px; line-height: 1.35; color: var(--ink); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.mind-tip.below { translate: -50% 0; } .mind-tip strong { font-weight: 600; } .mind-tip .muted { font-size: 12px; }
.mind-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 0; font-size: .8em; color: var(--muted); }
.mind-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mind-legend i { width: 9px; height: 9px; border-radius: 50%; }
.mind-legend .you { width: 13px; height: 13px; background: var(--grad); }
.mind-legend .t { width: 12px; height: 12px; border-radius: 0; background: var(--accent); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.mind-legend .m { clip-path: polygon(50% 0, 66% 34%, 100% 50%, 66% 66%, 50% 100%, 34% 66%, 0 50%, 34% 34%); border-radius: 0; width: 11px; height: 11px; }
.mind-legend .true { background: var(--true); } .mind-legend .mixed { background: var(--mixed); } .mind-legend .false { background: var(--false); }
.mind-legend .l { width: 18px; height: 0; border-radius: 0; border-top: 1.5px dashed var(--accent-2); }
@media (max-width: 560px) { .mind canvas { aspect-ratio: 4 / 5; } }
@media (max-width: 560px) { .memmap canvas { aspect-ratio: 4 / 5; } }
section.band { padding: 72px 0; border-top: 1px solid var(--line); }
.points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.points li { display: flex; gap: 12px; } .points li::before { content: "✓"; color: var(--accent); font-weight: 700; }
.start { max-width: 520px; margin: 0 auto; text-align: center; }
.start .card { text-align: left; margin-top: 28px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .9em; margin: 18px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google { width: 100%; justify-content: center; }
/* Sign-up, dressed like the landing page */
.signup { position: relative; overflow: hidden; border-top: 0; padding: clamp(48px, 9vw, 104px) 0;
  background: radial-gradient(560px 320px at 18% 12%, color-mix(in srgb, var(--accent) 11%, transparent), transparent), radial-gradient(560px 320px at 85% 88%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent); }
.signup .net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; pointer-events: none; }
.signup .wrap { position: relative; }
.signup h2 { font-size: clamp(36px, 5.4vw, 54px); line-height: 1.08; text-wrap: balance; }
.signup #signin-sub { margin: 14px 0 0; font-size: 1.05em; }
.signup .card { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, #6d4aff, #ff5c7a) border-box; box-shadow: 0 24px 60px rgb(109 74 255 / .16); }
.signup input { border-radius: 999px; padding: 12px 18px; }
@media (max-width: 560px) { .signup form button { flex: 1; justify-content: center; } } /* full width once it wraps under the field */
.perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .9em; }
.perks li::before { content: "✓ "; color: var(--accent); font-weight: 700; }
footer { padding: 32px 0 48px; border-top: 1px solid var(--line); font-size: .9em; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
footer a { color: var(--muted); }

/* Memory cards (landing example and the app) */
.memory { display: grid; gap: 10px; }
.memory p { margin: 0; }
.memory .meta { display: flex; gap: 6px 12px; flex-wrap: wrap; justify-content: space-between; font-size: .88em; color: var(--muted); }
.memory .verdict { background: var(--bg); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px; }
.memory .why { display: block; width: 100%; font-size: .9em; color: var(--muted); }
.memory .label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.memory ul { margin: 4px 0 0; padding-left: 18px; } .memory li { margin: 3px 0; }
.memory .rows { padding: 0; } .memory .rows li { list-style: none; display: flex; gap: 4px 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.memory details summary { cursor: pointer; color: var(--muted); font-size: .92em; }
.memory details p { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--muted); font-size: .95em; }
.memory .actions { display: flex; justify-content: flex-end; }

/* App */
.wrap.app { max-width: 780px; }
.app { padding: 24px 20px 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.app h1 { font-size: clamp(36px, 5vw, 52px); }
.connect { display: grid; gap: 14px; } /* the first thing to do */
.app .connect h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; text-wrap: balance; }
.connect p { margin: 0; } .connect .subtitle { margin-top: -6px; font: 400 clamp(20px, 2.6vw, 26px)/1.3 var(--serif); color: var(--muted); }
.app > h2 { margin-top: 20px; }
.connect code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; }
.connect .lead { font-size: 1.12em; } .connect .note { margin-top: -4px; font-size: .9em; color: var(--muted); } .connect strong { color: var(--ink); }
.connect .go { background: var(--grad); color: #fff; border-color: transparent; } .connect .go:hover { opacity: .9; border-color: transparent; }
/* Where the link goes: Claude and ChatGPT side by side, each with a picture of the box to paste it into */
.setup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 6px; }
.setup h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.15em; }
.setup h3 svg, .then svg { flex: none; box-sizing: content-box; width: 22px; height: 22px; padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); }
.setup ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; color: var(--muted); font-size: .94em; }
.setup b, .then b { color: var(--ink); font-weight: 600; }
.setup mark { color: var(--ink); font-weight: 600; padding: 1px 4px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 20%, transparent); }
.mock { display: grid; gap: 6px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); font-size: .8em; }
.mock span { font-weight: 600; }
.mock i { font-style: normal; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock .hot { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.mock em { font-style: normal; font-weight: 600; color: var(--accent); }
.then { display: flex; align-items: center; gap: 12px; margin-top: 6px !important; color: var(--muted); }
@media (max-width: 700px) { .setup { grid-template-columns: 1fr; gap: 26px; } }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar input { flex: 1; min-width: 200px; }
#memories { display: grid; gap: 14px; }
.empty { text-align: center; padding: 48px 24px; color: var(--muted); }
.settings h2 { font-size: 26px; margin-bottom: 10px; }
.tabs { display: flex; gap: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tabs button { padding: 10px 2px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-weight: 500; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
#tab-delete button { margin-top: 4px; }

/* Consent */
.consent { max-width: 480px; margin: 48px auto; }
.consent .who { font-family: var(--serif); font-size: 34px; line-height: 1.1; margin: 0 0 14px; }

/* Privacy and terms */
.doc { max-width: 680px; margin: 0 auto; padding: 8px 20px 64px; }
.doc h1 { font-size: 48px; margin: 24px 0 6px; } .doc h2 { font-family: var(--sans); font-size: 1.1em; font-weight: 600; margin-top: 2em; line-height: 1.3; }

@media (max-width: 820px) {
  .hero { padding: 32px 20px 56px; }
  section.band { padding: 48px 0; }
}
@media (max-width: 560px) {
  .top #me { display: none; }
  .card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { #net { display: none; } }

/* Phones: the first screen is a full-bleed reel, then an ordinary short page. The steps swipe sideways, and a
   sign-up button sticks to the bottom (app.js hides it while another one is on screen). */
@media (max-width: 560px) {
  #landing .phone-only { display: block; } #landing .perks.phone-only { display: flex; }
  body:has(#landing:not([hidden])) { padding-bottom: 76px; }

  /* First screen: the headline on a reel, under a see-through header */
  body:has(#landing:not([hidden])) .top { position: absolute; inset: 0 0 auto; z-index: 5; max-width: none; }
  body:has(#landing:not([hidden])) .logo, body:has(#landing:not([hidden])) .logo .grad { color: #fff; background: none; }
  #landing .hero { padding-top: 0; }
  .intro { position: relative; display: flex; flex-direction: column; min-height: 100svh; margin: 0 -20px; padding: 112px 20px 76px; overflow: hidden;
    color: #fff; background: linear-gradient(170deg, hsl(262 50% 34%), hsl(298 44% 56%)); } /* dark at the top, lighter toward the button */
  .intro h1 { font-size: min(36px, 7.4vw); } .intro .grad { background: none; color: #ffd0da; } .intro #plug { color: #fff; }
  .intro > .lede { margin: auto 0; padding: 24px 0; font-size: 18px; line-height: 1.6; } /* halfway between the logos and the button, which sits low near the thumb */
  .intro .lede strong { display: block; margin-bottom: 6px; font: 400 32px/1.1 var(--serif); }
  .intro .lede .verb { font: italic 400 1.3em/1 var(--serif); color: #ffd0da; }
  .intro .lede .hl { padding: 0 3px; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; /* a highlighter sweeps over them, one after the other */
    background: linear-gradient(90deg, rgb(255 255 255 / .18), rgb(255 208 218 / .38)) no-repeat 0 62% / 0 72%; animation: hl-in .7s ease-out 1s forwards; }
  .intro .lede .hl ~ .hl { animation-delay: 1.6s; }
  #landing .desk-only { display: none; } #landing h1 .phone-only { display: inline; } /* the phone headline, three lines… */
  #landing h1 .logo-row { display: flex; justify-content: center; align-items: center; gap: .22em; margin-top: .7em; font-size: min(30px, 7.6vw); } /* …then the AI and platform logos, linked */
  .logo-row > span { animation: logo-pop .5s cubic-bezier(.3, 1.6, .5, 1) both, float 3.4s ease-in-out infinite; animation-delay: calc(var(--k) * .08s + .4s), calc(var(--k) * -.7s); }
  .logo-row .link { width: .9em; height: 2px; background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 8px); opacity: .8; animation: link-flow .8s linear infinite; }
  .intro::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; background: #fff; animation: play 8s linear infinite; } /* a reel's progress bar */
  .intro::after { content: "Swipe up ↑"; content: "Swipe up ↑" / ""; position: absolute; left: 0; right: 0; bottom: 24px; font: 600 13px/1 var(--sans); text-shadow: 0 1px 6px rgb(0 0 0 / .35); animation: bob-down 1.6s ease-in-out infinite reverse; }

  /* The five steps: cards you swipe sideways, with dots; each plays when it's swiped into view (app.js sets .in) */
  .flow { width: 100vw; margin: 40px 0 8px 50%; }
  .kick { margin: 0 20px 14px; color: var(--muted); font-weight: 600; }
  .steps { display: flex; gap: 12px; overflow-x: auto; padding: 4px 20px 18px; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .step, .step:nth-child(n) { flex: 0 0 84%; scroll-snap-align: start; }
  .links { display: none; }
  .step { --i: 0 !important; animation: none !important; }
  .step:not(.in) * { animation: none !important; } .step:not(.in) .pop { opacity: 0; }
  .step.on { transform: none; } .step.on::after { animation: none; }
  .dots { display: flex; justify-content: center; gap: 6px; }
  .dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--line); transition: width .3s, background .3s; } .dots i.on { width: 20px; background: var(--accent); }

  /* The demo: notes and the memory count show above the phone, not beside it */
  .demo { padding-top: 48px; }
  .src-note { display: block; left: 0; right: 0; top: 0 !important; max-width: none; text-align: center; font-size: 19px; }
  .src-note::before { content: none; } .src-note::after { content: " ↓"; content: " ↓" / ""; }
  .mem-mini { display: block; top: 6px !important; left: 0; width: 100%; translate: none; text-align: center; }
  .mem-mini svg { display: none; }
  .mem-mini small { display: inline-block; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: 11px; }

  /* The end: what it is, the perks, the button */
  .swipe p.phone-only { margin: 64px 0 0; font-size: 40px; line-height: 1.05; text-wrap: balance; }
  .perks.phone-only { margin: 20px 0 26px; } .swipe .try { margin-top: 0; }

  .sticky-cta { position: fixed; z-index: 20; left: 12px; right: 12px; bottom: 12px; transition: translate .3s, opacity .3s; }
  .sticky-cta .btn { width: 100%; justify-content: center; } .sticky-cta.hide { translate: 0 130%; opacity: 0; pointer-events: none; }
}
@keyframes link-flow { to { background-position: 8px 0; } }
@keyframes hl-in { to { background-size: 100% 72%; } }
@media (max-width: 560px) and (prefers-reduced-motion: reduce) { .logo-row > span, .logo-row .link, .intro::before, .intro::after { animation: none; } .intro .lede .hl { animation: none; background-size: 100% 72%; } }

/* Status messages: a small toast at the bottom */
#message { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow); font-size: .95em; z-index: 10; }
#message:empty { display: none; }