/* Landing page. Look: the app's mock v3 (paper, ink, thin rules, square edges, signal colours) on a warm kraft hero. */
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 30; }
.skip:focus { left: 8px; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
.wrap.narrow { max-width: 760px; }

/* sticky header: the logo mark is where the Pointini lands */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 64px; padding-inline: 24px; background: var(--paper); border-bottom: 2px solid var(--rule-strong); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark { width: 40px; height: 40px; overflow: visible; }
.word { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; }
.bar nav { display: flex; align-items: center; gap: 16px; }
.navlink { font-size: 0.92rem; text-decoration: none; border-bottom: 1px solid transparent; }
.navlink:hover { border-bottom-color: var(--ink); }
.bar .btn { padding: 8px 12px; font-size: 0.88rem; }

/* hero */
.hero { background: var(--kraft-soft); border-bottom: 1px solid var(--rule-strong); }
.hero-in { max-width: 1120px; margin: 0 auto; padding: 40px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px; align-items: center; min-height: min(640px, calc(100vh - 64px)); }
.copy { display: grid; gap: 16px; align-content: center; }
.copy h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.02em; }
.sub { font-size: 1.12rem; max-width: 42ch; text-wrap: balance; }
.cta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.btn.big { padding: 12px 20px; font-size: 1rem; }
.stage svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-stage { aspect-ratio: 400 / 300; }

/* The hero Pointini: its antenna dot flies to the H1's full stop once on load (the real "." stays in the DOM) */
.h1dot .bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.motion .h1dot { color: transparent; } /* the "." stays in the DOM and keeps its width; shown only while the dot sits on it */
.motion .h1dot.on { color: inherit; }
.flydot { position: fixed; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); pointer-events: none;
  z-index: 26; transform-origin: 50% 50%; will-change: transform; visibility: hidden; }
.motion .mark { opacity: 0; }
.motion.landed .mark { opacity: 1; }
.flyer { position: fixed; left: 0; top: 0; width: 120px; height: 120px; overflow: visible; pointer-events: none; z-index: 25;
  transform-origin: 50% 50%; will-change: transform; visibility: hidden; }

/* what you practise: eight blocks in a zig-zag; the empty half is the Pointini's stage */
.how { padding: 64px 0 24px; position: relative; z-index: 1; }
.how h2, .join h2 { font-size: 1.6rem; }
.intro { margin-top: 8px; color: var(--mute); }
.blocks { list-style: none; margin: 28px auto 0; padding: 0 24px; max-width: 1120px; }
.blk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: 300px;
  padding: 28px 0; border-top: 1px solid var(--rule); }
.blk:last-child { border-bottom: 1px solid var(--rule); }
.blk:nth-child(even) .txt { order: 2; }
.blk .txt { display: grid; gap: 10px; max-width: 46ch; }
.blk:nth-child(even) .txt { justify-self: end; }
.blk .no { font-weight: 700; color: var(--mute); }
.blk h3 { font-size: 1.45rem; letter-spacing: -0.01em; text-wrap: balance; }
.blk p { font-size: 1.02rem; }
.blk .stage { aspect-ratio: 400 / 260; width: 100%; max-width: 460px; justify-self: center; }

/* decorative points on both page edges, drifting at different speeds while scrolling */
body { position: relative; }
.sidedots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.sidedots .d { position: absolute; top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); will-change: transform; }
.sidedots .d.l { left: var(--x); }
.sidedots .d.r { right: var(--x); }
@supports (animation-timeline: scroll()) {
  .sidedots .d { animation: drift linear both; animation-timeline: scroll(root); }
}
@keyframes drift { to { transform: translateY(calc(var(--v) * -900px)); } }
@media (max-width: 1279px) { .sidedots { display: none; } } /* only where the page has real side gutters */
@media (prefers-reduced-motion: reduce) { .sidedots .d { animation: none; } }

/* waitlist */
.join { padding: 56px 0 72px; background: var(--sheet); border-top: 1px solid var(--rule-strong); }
.join .wrap > p { margin-top: 8px; }
.wl { margin-top: 20px; display: grid; gap: 10px; }
.wl label { font-weight: 700; }
.wl .row { display: flex; flex-wrap: wrap; gap: 8px; }
.wl input[type="email"] { flex: 1 1 260px; min-width: 0; font: 1rem var(--font); padding: 10px 12px; border: 1px solid var(--rule-strong);
  border-radius: 0; background: var(--paper); color: var(--ink); }
.wl input[type="email"][aria-invalid="true"] { border-color: var(--red); border-width: 2px; }
.consent { font-size: 0.88rem; color: var(--mute); max-width: 68ch; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.status { min-height: 1.6em; font-weight: 700; }
.status.ok { color: #007a3d; } /* the app green is 3.2:1 on white: too light for text */
.status.err { color: var(--red); }
.status.info { color: var(--blue); }

/* footer */
.foot { padding: 28px 0 40px; border-top: 2px solid var(--rule-strong); font-size: 0.9rem; }
.foot .wrap { display: grid; gap: 6px; }
.ph { background: var(--yellow); padding: 0 4px; font-family: var(--mono); font-size: 0.85em; }

/* privacy page */
.doc { max-width: 760px; margin: 0 auto; padding: 40px 24px 64px; display: grid; gap: 14px; }
.doc h1 { font-size: 2rem; }
.doc h2 { font-size: 1.15rem; margin-top: 12px; }
.doc ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

@media (max-width: 720px) {
  .hero-in { grid-template-columns: 1fr; gap: 14px; padding: 16px 16px 28px; min-height: 0; }
  .hero-stage { order: -1; width: 100%; height: 28vh; height: 28svh; max-height: 220px; min-height: 150px; aspect-ratio: auto; }
  .copy { gap: 12px; }
  .sub { font-size: 1rem; }
  .wrap { padding-inline: 16px; }
  .bar { padding-inline: 14px; }
  .navlink { display: none; }
  .blocks { padding: 0 16px; }
  .blk { grid-template-columns: 1fr; gap: 10px; min-height: 0; padding: 20px 0 26px; }
  .blk .stage { order: -1; max-width: 360px; justify-self: start; }
  .blk:nth-child(even) .txt { order: 0; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* side dot positions (generated) */
.sidedots .d:nth-child(1) { --y: 3.3%; --x: 37px; --s: 12px; --c: var(--red); --v: 0.15; }
.sidedots .d:nth-child(2) { --y: 10.3%; --x: 86px; --s: 6px; --c: var(--blue); --v: 0.45; }
.sidedots .d:nth-child(3) { --y: 20.3%; --x: 82px; --s: 8px; --c: var(--yellow); --v: 0.15; }
.sidedots .d:nth-child(4) { --y: 26.3%; --x: 71px; --s: 6px; --c: var(--ink); --v: 0.3; }
.sidedots .d:nth-child(5) { --y: 34.4%; --x: 72px; --s: 6px; --c: var(--green); --v: 0.8; }
.sidedots .d:nth-child(6) { --y: 42.5%; --x: 46px; --s: 18px; --c: var(--red); --v: 0.8; }
.sidedots .d:nth-child(7) { --y: 53.8%; --x: 91px; --s: 14px; --c: var(--blue); --v: 0.6; }
.sidedots .d:nth-child(8) { --y: 58.2%; --x: 46px; --s: 6px; --c: var(--yellow); --v: 0.8; }
.sidedots .d:nth-child(9) { --y: 69.4%; --x: 55px; --s: 12px; --c: var(--ink); --v: 0.3; }
.sidedots .d:nth-child(10) { --y: 76.2%; --x: 91px; --s: 10px; --c: var(--green); --v: 0.8; }
.sidedots .d:nth-child(11) { --y: 85.3%; --x: 41px; --s: 6px; --c: var(--red); --v: 0.8; }
.sidedots .d:nth-child(12) { --y: 92.3%; --x: 42px; --s: 10px; --c: var(--blue); --v: 0.15; }
.sidedots .d:nth-child(13) { --y: 4.2%; --x: 26px; --s: 14px; --c: var(--yellow); --v: 0.15; }
.sidedots .d:nth-child(14) { --y: 12.5%; --x: 81px; --s: 18px; --c: var(--ink); --v: 0.8; }
.sidedots .d:nth-child(15) { --y: 19.7%; --x: 58px; --s: 12px; --c: var(--green); --v: 0.8; }
.sidedots .d:nth-child(16) { --y: 29.7%; --x: 64px; --s: 10px; --c: var(--red); --v: 0.3; }
.sidedots .d:nth-child(17) { --y: 37.2%; --x: 107px; --s: 22px; --c: var(--blue); --v: 0.3; }
.sidedots .d:nth-child(18) { --y: 42.3%; --x: 56px; --s: 14px; --c: var(--yellow); --v: 0.6; }
.sidedots .d:nth-child(19) { --y: 53.5%; --x: 75px; --s: 10px; --c: var(--ink); --v: 0.8; }
.sidedots .d:nth-child(20) { --y: 61.9%; --x: 33px; --s: 14px; --c: var(--green); --v: 0.6; }
.sidedots .d:nth-child(21) { --y: 66.7%; --x: 61px; --s: 8px; --c: var(--red); --v: 0.6; }
.sidedots .d:nth-child(22) { --y: 75.7%; --x: 103px; --s: 6px; --c: var(--blue); --v: 0.8; }
.sidedots .d:nth-child(23) { --y: 84.3%; --x: 58px; --s: 10px; --c: var(--yellow); --v: 0.45; }
.sidedots .d:nth-child(24) { --y: 92.4%; --x: 92px; --s: 22px; --c: var(--ink); --v: 0.6; }