/* ONE MOVE public site — same tokens as the app (DESIGN_BRIEF): Morning/Ink/Cloud/Lagoon/Sun/Berry/Coral/Leaf. */
:root { --morning:#F2F6FB; --ink:#1E2A3A; --cloud:#E8EEF7; --lagoon:#BBD3F0; --sun:#FFC93C; --berry:#5B4BDB; --coral:#FF8A65; --leaf:#6CC28A; --font-display:'Fredoka','Nunito',system-ui,sans-serif; --font-body:'Nunito',system-ui,sans-serif; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--morning); color:var(--ink); font-family:var(--font-body); font-size:18px; line-height:1.55; }
a { color:var(--berry); }
h1,h2,h3 { font-family:var(--font-display); font-weight:600; line-height:1.15; letter-spacing:-0.01em; margin:0 0 .5em; }
h1 { font-size:clamp(2rem,5vw,3.2rem); }
h2 { font-size:clamp(1.5rem,3.2vw,2.1rem); margin-top:1.6em; }
h3 { font-size:1.2rem; margin-top:1.2em; }
p,li { max-width:62ch; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }
header.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--ink); text-decoration:none; }
.brand img { width:36px; height:36px; }
nav.main { display:flex; gap:6px 18px; flex-wrap:wrap; font-weight:700; font-size:.95rem; }
nav.main a { color:var(--ink); text-decoration:none; opacity:.8; }
nav.main a:hover { opacity:1; text-decoration:underline; }
.lang { font-size:.9rem; font-weight:800; }
.lang a { text-decoration:none; color:var(--ink); opacity:.7; padding:6px 8px; border-radius:999px; }
.lang a[aria-current] { background:var(--cloud); opacity:1; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center; padding:32px 0 24px; }
.hero .lead { font-size:1.2rem; max-width:40ch; }
.cta { display:inline-block; background:var(--berry); color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.15rem; padding:16px 28px; border-radius:999px; text-decoration:none; box-shadow:0 6px 18px rgba(91,75,219,.28); }
.cta:hover { filter:brightness(1.06); }
.cta.secondary { background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(30,42,58,.08); border:2px solid var(--lagoon); }
.note { font-size:.95rem; opacity:.8; margin-top:12px; }
.board { width:100%; max-width:420px; margin:0 auto; display:block; filter:drop-shadow(0 10px 24px rgba(30,42,58,.15)); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:s; padding:0; list-style:none; }
.steps li { background:#fff; border-radius:22px; padding:22px 22px 20px; box-shadow:0 4px 16px rgba(30,42,58,.06); }
.steps li::before { counter-increment:s; content:counter(s); display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--sun); color:var(--ink); font-family:var(--font-display); font-weight:700; margin-bottom:10px; }
.steps h3 { margin:0 0 .3em; }
.pill { display:inline-block; background:var(--cloud); border-radius:999px; padding:6px 12px; font-size:.85rem; font-weight:800; }
.card { background:#fff; border-radius:22px; padding:24px; box-shadow:0 4px 16px rgba(30,42,58,.06); margin:18px 0; }
.card.honest { border-left:6px solid var(--sun); }
.faq details { background:#fff; border-radius:16px; padding:14px 18px; margin:10px 0; }
.faq summary { font-family:var(--font-display); font-weight:600; font-size:1.1rem; cursor:pointer; }
footer { margin-top:56px; padding:28px 0 40px; border-top:2px solid var(--cloud); font-size:.9rem; opacity:.85; }
footer nav { display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:10px; }
footer a { color:var(--ink); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.mini { width:100%; max-width:260px; display:block; margin:0 auto; }
table { border-collapse:collapse; width:100%; font-size:.95rem; }
td,th { text-align:left; padding:8px 10px; border-bottom:1px solid var(--cloud); vertical-align:top; }
@media (max-width:760px) { .hero,.two,.steps { grid-template-columns:1fr; } .hero { padding-top:16px; } body { font-size:17px; } header.top { flex-wrap:wrap; } }

/* --- PO audit §3D: primary action is Sun (hero side) per DESIGN_BRIEF; Berry stays for the opponent/secondary. --- */
.cta { background:var(--sun); color:var(--ink); box-shadow:0 6px 18px rgba(255,201,60,.35); }
.cta.secondary { background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(30,42,58,.08); border:2px solid var(--lagoon); }
/* --- §3E: each "how it works" card opens with a small scene --- */
.steps li .scene { width:104px; max-width:45%; display:block; margin:0 0 12px; filter:drop-shadow(0 4px 10px rgba(30,42,58,.12)); }
.card.who { position:relative; }
.who-badge { display:inline-block; font-size:.8rem; font-weight:800; padding:4px 10px; border-radius:999px; margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em; }
.who-badge.sun { background:var(--sun); color:var(--ink); }
.who-badge.berry { background:var(--berry); color:#fff; }
/* --- §2: spoiler gate on the Amazon page (no JS; <details> keeps the rule indexable) --- */
.card.spoiler { border-left:6px solid var(--coral); }
details.reveal > summary { cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:1.2rem; padding:14px 18px; background:var(--cloud); border-radius:16px; list-style:none; display:inline-block; margin:8px 0 18px; }
details.reveal > summary::-webkit-details-marker { display:none; }
details.reveal > summary::before { content:"▸ "; }
details.reveal[open] > summary::before { content:"▾ "; }
/* --- §3F: hero board breathes once — a living product, not an autoplay demo. --- */
@keyframes beam-in { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes ring-pop { 0% { transform:scale(.6); opacity:0; } 60% { transform:scale(1.08); opacity:1; } 100% { transform:scale(1); opacity:1; } }
.hero .board rect[fill="#FF8A65"] { transform-box:fill-box; transform-origin:top; animation:beam-in .9s cubic-bezier(.2,.7,.2,1) .3s both; }
.hero .board circle[stroke="#FF8A65"] { transform-box:fill-box; transform-origin:center; animation:ring-pop .6s ease-out 1.1s both; }
@media (prefers-reduced-motion: reduce) { .hero .board rect[fill="#FF8A65"], .hero .board circle[stroke="#FF8A65"] { animation:none; } }

/* --- AhaMate wordmark: Ink word, three Sun "aha" rays above the A (PO brand doc, variant 1) --- */
.brand .wordmark { position:relative; display:inline-block; padding-top:6px; line-height:1; }
.brand .rays { position:absolute; left:-2px; top:-6px; width:22px; height:12px; }

/* Rays appear once per lockup: with the icon, the wordmark is plain Ink; standalone (OG, print) it carries the rays. */
.brand .wordmark.plain { padding-top: 0; }