/* Still/Moving sales page. Light paper, grey for what stands still, amber only on what moves. */
:root{
  --paper:#ECEEF1; --surface:#FFFFFF; --ink:#121419; --mute:#5B626D; --line:#D3D7DD;
  --m:#FFB01F; --m-rgb:255,176,31; --m-deep:#8A5A00; --still:#A2A8B1; --m-soft:rgba(var(--m-rgb),.16);
  --display:"Anybody", "Arial Narrow", system-ui, sans-serif;
  --body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;
  -webkit-text-size-adjust:100%;overflow-wrap:break-word}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
h2{font-size:clamp(28px,4.4vw,40px);font-weight:800;font-variation-settings:"wdth" 120;letter-spacing:-.01em;line-height:1.02;margin-bottom:10px}
code{font-family:var(--mono);font-size:.85em}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.logo{text-decoration:none;font-family:var(--display);font-weight:850;font-size:22px;line-height:1;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.logo .s{color:var(--still);font-variation-settings:"wdth" 50}
.logo .sl{color:var(--still);font-weight:300;font-variation-settings:"wdth" 60;margin:0 .04em}
.logo .m{color:var(--ink);font-variation-settings:"wdth" 150;
  text-shadow:-.07em 0 0 rgba(var(--m-rgb),.55),-.14em 0 0 rgba(var(--m-rgb),.28),-.21em 0 0 rgba(var(--m-rgb),.12)}
#still-moving{all:unset;cursor:pointer;display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;
  font-family:var(--mono);font-size:11.5px}
#still-moving span{padding:6px 12px;border-radius:999px;color:var(--mute);border:1px solid transparent}
#still-moving[aria-pressed="false"] .o-moving{color:var(--ink);background:var(--m-soft);border-color:var(--m)}
#still-moving[aria-pressed="true"] .o-still{color:var(--ink);background:#E4E6EA;border-color:var(--still)}
#still-moving:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#still-moving .sep{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:420px){.bar .in{padding:10px 16px}.logo{font-size:17px}#still-moving{font-size:10.5px}#still-moving span{padding:5px 8px}}
.bar-end{display:flex;align-items:center;gap:14px}
.lang{font:500 11.5px var(--mono);color:var(--mute);white-space:nowrap}
.lang a{text-decoration:none;padding:4px 2px}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:420px){.bar-end{gap:8px}.lang{font-size:10.5px}}
@media (max-width:359px){.bar .in{padding:10px 12px;gap:8px}.logo{font-size:15px}.bar-end{gap:6px}#still-moving span{padding:5px 6px}.lang a{padding:4px 0}}

/* ---------- language suggestion (plain: amber is only for what moves) ---------- */
.lang-hint{max-width:1120px;margin:0 auto;padding:8px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:14px;border-bottom:1px solid var(--line)}
.lang-hint[hidden]{display:none}
.lang-hint a{font-weight:600}
.lang-hint button{all:unset;cursor:pointer;padding:4px 8px;border-radius:6px;color:var(--mute);line-height:1}
.lang-hint button:hover{color:var(--ink);background:#E4E6EA}
.lang-hint button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:420px){.lang-hint{padding:8px 16px}}

/* ---------- sections ---------- */
main{max-width:1120px;margin:0 auto;padding:0 20px}
@media (max-width:420px){main{padding:0 16px}}
main>section{padding:56px 0;border-bottom:1px solid var(--line)}
@media (max-width:600px){main>section{padding:40px 0}}
.sub{color:var(--mute);margin:0 0 22px;max-width:60ch}

/* ---------- hero ---------- */
.hero h1{font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(34px,6vw,64px);line-height:.98;letter-spacing:-.02em;margin:0 0 16px;max-width:15ch}
.hero h1:lang(pt){max-width:20ch}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--m) 62%)}
.lead{font-size:clamp(17px,2.2vw,20px);color:var(--mute);max-width:46ch;margin:0 0 26px;line-height:1.5}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:12px;padding:15px 22px;
  font:700 17px/1 var(--body);text-decoration:none;white-space:nowrap}
.cta .p{background:rgba(255,255,255,.16);border-radius:7px;padding:4px 8px;font-weight:800}
.cta:hover{background:#2A2D35}
.price{font:500 12px/1.5 var(--mono);color:var(--mute);margin:12px 0 0}
.trust{display:flex;gap:6px 18px;flex-wrap:wrap;margin:18px 0 0;padding:0;list-style:none;font-size:14px;color:var(--mute)}
.trust li::before{content:"✓ ";color:var(--ink);font-weight:700}
.prompts-note{margin:18px 0 0;font-size:15px;max-width:60ch}

/* ---------- cards and demos ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.grid{grid-template-columns:minmax(0,1fr)}}
.hero-grid{margin-top:34px}
.noscript{margin:28px 0 -18px;font:500 13px var(--body);color:var(--mute)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0;display:flex;flex-direction:column}
.card iframe{display:block;width:100%;border:0;background:var(--paper)}
.hero-grid iframe{pointer-events:none}
.cap{padding:8px 10px;font:500 11px/1.4 var(--mono);color:var(--mute);border-top:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap span:first-child{color:var(--ink)}

/* ---------- tools ---------- */
main>section.tools{padding:20px 0;text-align:center}
.tools p{margin:0;font:500 12px/1.7 var(--mono);color:var(--mute);letter-spacing:.02em}

/* ---------- still vs moving ---------- */
.sm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.sm{grid-template-columns:minmax(0,1fr)}}
.label{font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:8px 10px;border-bottom:1px solid var(--line)}
.label.still{color:var(--mute);background:#F3F4F6}
.label.moving{color:var(--m-deep);background:var(--m-soft)}

/* ---------- how ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:18px 0 0;padding:0}
@media (max-width:700px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.steps b{display:block;font:600 11px var(--mono);color:var(--mute);margin-bottom:6px}
pre{font:400 11.5px/1.65 var(--mono);background:var(--ink);color:#E6E8EC;border-radius:12px;padding:16px;margin:14px 0 0;
  white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}

/* ---------- free ---------- */
.copy{all:unset;cursor:pointer;display:block;text-align:center;border-top:1px solid var(--line);background:var(--surface);
  padding:12px;font:700 14px var(--body)}
.copy:hover{background:#F3F4F6}
.copy:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.copy-fallback{border-top:1px solid var(--line);padding:10px}
.copy-fallback textarea{display:block;box-sizing:border-box;width:100%;height:120px;resize:vertical;font:400 11px/1.5 var(--mono);border:1px solid var(--line);border-radius:6px;padding:8px}
.copy-fallback p{margin:6px 0 0;font:600 12px var(--body);text-align:center}

/* ---------- gallery ---------- */
.comp{margin-top:28px}
.comp h3{font:600 12px var(--mono);margin:0 0 10px;text-transform:uppercase;letter-spacing:.08em}
.lock{position:relative;border-top:1px solid var(--line);height:64px;overflow:hidden}
.ex-wrap{padding:8px 10px;font:400 10px/1.5 var(--mono);color:var(--mute);filter:blur(2.5px);user-select:none}
.ex-wrap b{display:block;color:var(--ink);font-weight:600}
.lock .tag{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.55);font:700 12px var(--body)}
.freebie{display:block;border-top:1px solid var(--line);padding:10px;text-align:center;font:600 13px var(--body);color:var(--ink)}

/* ---------- why ---------- */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:700px){.why{grid-template-columns:minmax(0,1fr)}}
.vs{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;font-size:15px}
.vs.ours{border-color:var(--ink)}
.vs h3{font:600 11.5px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
.vs p{margin:0 0 10px}.vs p:last-child{margin:0}

/* ---------- offer ---------- */
.offer{background:var(--ink);color:#fff;border-radius:16px;padding:28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
@media (max-width:700px){.offer{grid-template-columns:minmax(0,1fr);padding:22px}}
.offer .big{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 125;font-size:48px;line-height:1}
.offer .price{color:#B9BEC6}
.offer ul{margin:12px 0 0;padding-left:18px;color:#D5D8DD;line-height:1.7;font-size:15px}
.offer .cta{background:#fff;color:var(--ink);justify-self:start}
.offer .cta .p{background:var(--ink);color:#fff}
.offer .cta:hover{background:#E9EBEE}

/* ---------- faq ---------- */
details{border-top:1px solid var(--line);padding:14px 0;font-size:16px}
details:last-child{border-bottom:1px solid var(--line)}
summary{font-weight:700;cursor:pointer}
details p{color:var(--mute);margin:8px 0 0;max-width:65ch}

/* ---------- footer ---------- */
footer{max-width:1120px;margin:0 auto;padding:32px 20px 40px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;
  font:500 12px var(--mono);color:var(--mute)}
footer nav{display:flex;gap:16px}
footer p{margin:0 0 0 auto}
@media (max-width:899px){footer{padding-bottom:96px}footer p{margin:0}}

/* ---------- sticky buy bar (phone) ---------- */
#sticky{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.94);border-top:1px solid var(--line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#sticky[hidden]{display:none}
@media (min-width:900px){#sticky{display:none}}
#sticky span{display:flex;flex-direction:column;min-width:0;font-size:14px;line-height:1.3}
#sticky small{font:500 10px/1.4 var(--mono);color:var(--mute)}
#sticky .cta{padding:11px 14px;font-size:15px}

/* ---------- legal pages ---------- */
.legal{max-width:680px;margin:0 auto;padding:48px 20px 24px;overflow-wrap:anywhere}
.legal h1{font-family:var(--display,inherit);margin:0 0 4px}
.legal h2{font-size:20px;margin:32px 0 6px}
.legal p{margin:0 0 12px}
.legal .upd{color:var(--mute,#6b6b6b);font-size:14px;margin-bottom:24px}
.legal a{color:inherit;text-decoration:underline}