/* The supplied mockup sets the public stage. All rules stay scoped to it. */
/* Motion (design pass, 8 Nov): one strong ease-out for everything that enters or
   responds, one ease-in-out for on-screen movement. Every curve below uses these. */
:root { --movement-ease-out: cubic-bezier(.23,1,.32,1); --movement-ease-in-out: cubic-bezier(.77,0,.175,1); }
@font-face { font-family: "Supermax"; src: url("assets/fonts/SupermaxLLTrialWeb-Wide.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
html:has(.movement), body:has(> .movement) { height: auto; overflow-x: clip; background: #d0fffa !important; color-scheme: light; }
.movement { --movement-paper: #d0fffa; --movement-ink: #111; --movement-accent: #3cfce9; --movement-muted: #416a64; --movement-control-border: #416a6470; --movement-marquee-ink: #89ffee; --movement-error: #812820; --movement-grid-gap: clamp(16px, 2vw, 28px); --movement-page-inset: clamp(24px, 4vw, 52px); min-height: 100svh; background: var(--movement-paper); color: var(--movement-ink); font-family: var(--font-ui, "Aeonik Pro", Arial, sans-serif); font-synthesis: none; color-scheme: light; -webkit-font-smoothing: antialiased; }
html:has(.movement[data-night="true"]), body:has(> .movement[data-night="true"]) { background: #07110f !important; color-scheme: dark; }
.movement[data-night="true"] { --movement-paper: #07110f; --movement-ink: #d9f5e8; --movement-accent: #9ae5bf; --movement-muted: #9bbcaf; --movement-control-border: #9bbcaf70; --movement-marquee-ink: #275044; --movement-error: #ffb6aa; color-scheme: dark; }
html:has(.movement), body:has(> .movement), .movement { transition: background-color 420ms ease, color 420ms ease; }
.movement *, .movement *::before, .movement *::after { box-sizing: border-box; }
.movement :is(h1,h2,p,figure) { margin: 0; }
.movement a { color: inherit; text-underline-offset: .25em; }
.movement button, .movement input { font: inherit; }
.movement button { color: inherit; cursor: pointer; }
.movement [hidden] { display: none !important; }
.movement :is(a,button,input):focus-visible { outline: 2px solid var(--movement-ink); outline-offset: 6px; }
.movement-sr, .movement-skip { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.movement-skip:focus { z-index: 10; top: 18px; left: 20px; width: auto; height: auto; margin: 0; padding: 12px; clip-path: none; background: var(--movement-accent); color: #111; }
.movement .movement-night-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--movement-control-border); border-radius: 50%; background: var(--movement-paper); transition: background-color 180ms ease, border-color 180ms ease, transform 150ms ease; }
/* The top nav's bracelet link (Connor, 10 Nov 2026): a pill matching the night toggle beside it. */
.movement .movement-nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--movement-control-border); border-radius: 999px; background: var(--movement-paper); color: var(--movement-ink); font-size: 14px; line-height: 1; letter-spacing: .01em; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: border-color 160ms ease, transform 140ms cubic-bezier(.23,1,.32,1); }
.movement .movement-nav-link:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .movement .movement-nav-link:hover { border-color: var(--movement-ink); } }
@media (prefers-reduced-motion: reduce) { .movement .movement-nav-link { transition: none; } .movement .movement-nav-link:active { transform: none; } }
.movement-night-toggle .movement-sun, .movement[data-night="true"] .movement-night-toggle .movement-moon { display: none; }
.movement[data-night="true"] .movement-night-toggle .movement-sun { display: block; }
.movement[data-night="true"] .movement-night-toggle img { filter: brightness(0) invert(1); }
.movement-night-toggle:active:not([aria-disabled="true"]) { transform: scale(.95); }
.movement-night-toggle[aria-disabled="true"] { cursor: progress; }
@media (hover: hover) and (pointer: fine) { .movement-night-toggle:hover { border-color: var(--movement-ink); } }
/* Header on the page grid: the controls end on its right edge, the logo starts on its left. */
.movement-controls { position: fixed; z-index: 5; top: max(16px, env(safe-area-inset-top)); right: max(env(safe-area-inset-right), var(--movement-page-inset), calc((100% - 1400px) / 2)); display: flex; align-items: center; gap: 10px; }
.movement .movement-soundtrack {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 132px;
  min-height: 44px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--movement-control-border);
  border-radius: 999px;
  background: var(--movement-paper);
  font-size: 13px;
  transition: background-color 140ms ease, border-color 140ms ease, transform 150ms var(--movement-ease-out);
}
.movement-soundtrack-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--movement-ink);
  color: var(--movement-accent);
}
.movement[data-night="true"] .movement-soundtrack-icon { color: #07110f; }
.movement .movement-soundtrack:active:not(:disabled) { transform: scale(.97); }
.movement .movement-soundtrack:disabled { cursor: default; }
.movement-soundtrack-pause,
.movement-soundtrack-meter,
.movement-soundtrack[data-playing="true"] .movement-soundtrack-play { display: none; }
.movement-soundtrack[data-playing="true"] .movement-soundtrack-meter { display: inline; }
.movement-soundtrack[data-playing="true"]:focus-visible .movement-soundtrack-meter { display: none; }
.movement-soundtrack[data-playing="true"]:focus-visible .movement-soundtrack-pause { display: inline; }
.movement-soundtrack[data-playing="true"] rect {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: movement-music-level 840ms cubic-bezier(.45,0,.55,1) infinite alternate;
}
.movement-soundtrack rect:nth-child(2) { animation-duration: 690ms; animation-delay: -350ms; }
.movement-soundtrack rect:nth-child(3) { animation-duration: 760ms; animation-delay: -570ms; }
@keyframes movement-music-level {
  0% { transform: scaleY(.4); }
  40% { transform: scaleY(.9); }
  70% { transform: scaleY(.6); }
  100% { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .movement .movement-soundtrack:hover:not(:disabled) {
    background: var(--movement-accent);
    border-color: var(--movement-ink); color: #111;
  }
  .movement-soundtrack[data-playing="true"]:hover .movement-soundtrack-meter { display: none; }
  .movement-soundtrack[data-playing="true"]:hover .movement-soundtrack-pause { display: inline; }
}
/* The brand study's 1400px, 12-column grid; one bounded stack owns the hero. */
.movement-first-view { position: relative; isolation: isolate; min-height: max(600px, 100svh); display: grid; grid-template-rows: minmax(0, 1fr) auto; padding-bottom: clamp(24px, 4svh, 56px); }
/* Night-only atmosphere stays behind the hero and never intercepts input.
   Stars remain static; movement-moon.mjs owns the current lunar phase. */
.movement-night-sky { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; opacity: 0; visibility: hidden; mask-image: linear-gradient(#000 0 72%, transparent 100%); background: radial-gradient(ellipse 52% 40% at 50% 64%, #0f3b3a59, transparent 70%), radial-gradient(ellipse 46% 36% at 20% 8%, #1b2c5466, transparent 70%), linear-gradient(180deg, #070d22 0%, #0a1a35 34%, #0b2a33 66%, #0a2a2a 84%, #07110f 100%); transition: opacity 700ms var(--movement-ease-out), visibility 0s linear 700ms; }
.movement[data-night="true"] .movement-night-sky { opacity: 1; visibility: visible; transition: opacity 700ms var(--movement-ease-out), visibility 0s; }
.movement-sky-stars { position: absolute; inset: 0; background: url("assets/movement/sky/stars.svg") center top / cover no-repeat; mask-image: linear-gradient(#000 0 62%, transparent 92%); }
.movement-moon-component { position: absolute; z-index: 3; top: 15%; left: 18%; width: clamp(44px, 4.2vw, 60px); }
.movement .movement-moon-trigger { display: grid; place-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--movement-ease-out); }
.movement-moon-trigger:active { transform: scale(.97); }
.movement-sky-moon { display: block; width: 100%; height: auto; opacity: .92; filter: drop-shadow(0 0 10px #e2efe340) drop-shadow(0 0 34px #b9ded62e); }
.movement-moon-tooltip { position: absolute; top: 100%; left: 0; width: max-content; min-width: 176px; max-width: min(220px, 75vw); padding-top: 8px; opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity 160ms ease, transform 160ms var(--movement-ease-out), visibility 0s linear 160ms; }
.movement-moon-tooltip-card { display: grid; gap: 5px; padding: 13px 16px; border: 1px solid #b9ded62e; border-radius: 14px; background: #0c1a29f5; box-shadow: 0 8px 24px #0003; color: #a8c4bd; font-size: 12px; line-height: 1.3; }
.movement-moon-tooltip strong { color: #e2efe3; font-size: 15px; font-weight: 500; }
.movement-moon-eyebrow { font-size: 10px; letter-spacing: .04em; }
.movement-moon-component[data-open="true"] .movement-moon-tooltip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.movement-hero-grid, .movement-manifesto-inner, .movement-footer { width: calc(100% - 2 * var(--movement-page-inset)); max-width: 1400px; margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--movement-grid-gap); }
.movement-hero-grid { align-content: center; justify-items: center; row-gap: clamp(24px, 3.5svh, 40px); padding-block: 56px; }
.movement-hero-grid > * { grid-column: 1 / -1; }
.movement-about-header { position: absolute; z-index: 4; top: max(16px, env(safe-area-inset-top)); left: max(env(safe-area-inset-left), var(--movement-page-inset), calc((100% - 1400px) / 2)); }
.movement-about-header .movement-wordmark { color: var(--movement-ink); text-decoration: none; cursor: pointer; }
.movement-hero-pin > .movement-wordmark { position: absolute; z-index: 4; top: max(16px, env(safe-area-inset-top)); left: max(env(safe-area-inset-left), var(--movement-page-inset), calc((100% - 1400px) / 2)); }
/* The hero: the app on an iPhone beside early access, the tagline and the App Store. */
.movement-first-view { padding-top: 0; }
.movement-hero-grid { align-items: center; }
.movement-hero-grid > .movement-hero-copy { grid-column: 7 / span 6; justify-self: stretch; }
.movement-hero-copy { container-type: inline-size; display: grid; justify-items: start; row-gap: clamp(20px, 3svh, 36px); }
.movement-hero-copy .movement-signup { min-height: 52px; }
/* Character (Connor, 8 Nov): "support" a step bigger, the lettering tilted slightly.
   "support" still fills its column once tilted; your and system. sit a step down. */
.movement .movement-headline { margin: 0; color: var(--movement-ink); font: 700 min(var(--headline-fit, 24cqw), 180px, 14.5svh)/.86 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: -.045em; rotate: -3deg; transform-origin: 0 0; }
.movement-headline span { display: block; }
.movement-headline span:nth-child(2) { font-size: 1.15em; }
/* "find your circle, make a change": one line, centred on the page grid, in
   the tagline's face one step down the scale. */
.movement-tagline-line { justify-self: center; width: calc(100% - 2 * var(--movement-page-inset)); max-width: 1400px; margin: 0 auto; padding-bottom: clamp(32px, 6svh, 72px); color: var(--movement-ink); font: 700 clamp(26px, 2.8vw, 44px)/1.1 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: -.03em; text-align: center; text-wrap: balance; }
@media (max-width: 899px) {
  /* Early access and the tagline come first on narrow screens; the column stretches so its container units have a width to measure. */
  .movement-hero-grid > .movement-hero-copy { grid-column: 1 / -1; justify-self: stretch; order: -1; }
  .movement-hero-copy { justify-items: center; text-align: center; }
  .movement .movement-headline { transform-origin: 50% 50%; }

}
.movement-wordmark { display: block; width: max-content; color: var(--movement-ink); font: 400 clamp(34px, 2.8vw, 44px)/44px "Supermax", sans-serif; letter-spacing: 0; white-space: nowrap; cursor: default; -webkit-user-select: none; user-select: none; }
.movement .movement-access-trigger { display: grid; place-items: center; width: 100%; min-height: 52px; padding: 10px 16px; border: 5px solid var(--movement-accent); border-radius: 999px; background: transparent; color: var(--movement-ink); font-size: 14px; font-weight: 400; line-height: 1.2; white-space: nowrap; transition: background-color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .movement-access-trigger:hover { background: #3cfce92b; } }
.movement-bracelet { position: relative; width: clamp(280px, 30vw, 460px); max-width: 100%; aspect-ratio: 320 / 220; }
/* Each complete cutout includes its woven lettering and brand patch. */
.movement-pattern { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; overflow: clip; }
/* Register the transparent canvases to a consistent visible product size. */
.movement-pattern[data-pattern="0"] { --artwork-width: 163.789%; --artwork-left: -34.880%; --artwork-top: -37.215%; }
.movement-pattern[data-pattern="1"] { --artwork-width: 161.203%; --artwork-left: -35.429%; --artwork-top: -37.439%; }
.movement-pattern[data-pattern="2"] { --artwork-width: 164.165%; --artwork-left: -36.785%; --artwork-top: -37.637%; }
.movement-pattern[data-pattern="3"] { --artwork-width: 163.228%; --artwork-left: -34.536%; --artwork-top: -36.855%; }
.movement-pattern[data-pattern="4"] { --artwork-width: 163.789%; --artwork-left: -36.266%; --artwork-top: -37.137%; }
.movement-pattern[data-pattern="5"] { --artwork-width: 159.584%; --artwork-left: -34.312%; --artwork-top: -36.381%; }
.movement-pattern[data-outgoing="true"] { opacity: 1; }
.movement-pattern[data-active="true"] { z-index: 1; opacity: 1; }
.movement-pattern img { position: absolute; width: var(--artwork-width); max-width: none; height: auto; left: var(--artwork-left); top: var(--artwork-top); transition: opacity 420ms ease; }
.movement-artwork[data-light="night"], .movement[data-night="true"] .movement-artwork[data-light="day"] { opacity: 0; }
.movement[data-night="true"] .movement-artwork[data-light="night"] { opacity: 1; }
/* The bracelet is also the quiet next-pattern control. Its help appears on focus. */
.movement-next { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; background: transparent; border-radius: 24px; }
.movement-next-label { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; font-size: 12px; opacity: 0; }
.movement-next:focus-visible .movement-next-label { opacity: 1; }
.movement-marquee { width: 100%; overflow: hidden; padding: 8px 0; }
.movement-marquee-track { display: flex; width: max-content; transform: translateX(-3vw); animation: movement-marquee var(--movement-marquee-duration, 80s) linear infinite; }
.movement-marquee-group { display: flex; flex: none; }
.movement-marquee-copy { flex: none; padding-right: 1.1em; color: var(--movement-marquee-ink); font-family: "Supermax", sans-serif; font-size: clamp(34px, 2.8vw, 52px); font-weight: 400; line-height: 1.15; letter-spacing: 0; white-space: nowrap; }
@keyframes movement-marquee { from { transform: translateX(-3vw); } to { transform: translateX(calc(-50% - 3vw)); } }
/* Editorial copy sits on the central six columns, at reading scale. */
.movement-manifesto { padding-block: clamp(72px, 8vw, 128px) clamp(32px, 4vw, 56px); }
/* The movement reads on the left; the bracelet closes the page at the bottom right. */
.movement-manifesto-inner { row-gap: 48px; align-items: end; font-family: var(--font-marketing, Georgia, serif); font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; letter-spacing: -.01em; }
.movement-manifesto-copy { grid-column: 2 / span 6; display: grid; row-gap: 20px; justify-items: start; }
.movement-manifesto-copy > * { max-width: 34rem; }
.movement-manifesto-inner > .movement-bracelet { grid-column: 8 / -1; justify-self: end; }
.movement-manifesto-eyebrow { font-family: var(--font-ui, Arial, sans-serif); font-size: 15px; line-height: 1.3; letter-spacing: 0; color: var(--movement-muted); }
.movement-manifesto :is(h1, h2), .movement-circle-copy h2 { margin: 0 0 8px; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.06; font-weight: 400; letter-spacing: -.02em; text-wrap: balance; }
.movement-manifesto-eyebrow + :is(h1, h2) { margin-top: -12px; }
.movement-manifesto-close strong, .movement-circle-copy strong { font-weight: 700; }
.movement-manifesto-invitation { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-family: var(--font-ui, Arial, sans-serif); font-size: 15px; letter-spacing: 0; }
.movement-icon { position: relative; display: block; width: 44px; height: 44px; overflow: hidden; margin-top: 8px; padding: 0; border: 0; border-radius: 10px; background: #111; isolation: isolate; }
.movement-icon img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 180ms ease; }
.movement-sunrise { position: absolute; inset: 0; opacity: 0; overflow: hidden; background: var(--movement-accent); transition: opacity 180ms ease; }
.movement-sunrise::before { content: ""; position: absolute; left: 25%; top: 31%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: #111; transform: translateY(140%); transition: transform 420ms var(--movement-ease-out); }
.movement-sunrise::after { content: ""; position: absolute; inset: 68% 0 0; border-top: 1px solid #111; background: var(--movement-accent); }
.movement-icon[data-sunrise="true"] .movement-sunrise { opacity: 1; }
.movement-icon[data-sunrise="true"] .movement-sunrise::before { transform: translateY(0); }
.movement-icon[data-sunrise="true"] img { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .movement-icon:hover .movement-sunrise { opacity: 1; }
  .movement-icon:hover .movement-sunrise::before { transform: translateY(0); }
  .movement-icon:hover img { opacity: 0; }
}
.movement-footer { align-items: center; row-gap: 16px; padding-block: 24px; color: var(--movement-muted); font-size: 12px; line-height: 1.5; }
.movement-footer > p { grid-column: 1 / span 4; }
.movement-footer nav { grid-column: 5 / span 4; justify-self: center; display: flex; gap: 24px; }
.movement-footer small { grid-column: 9 / span 4; justify-self: end; font-size: 11px; text-align: right; }
.movement-footer a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 900px) {
  .movement-manifesto-copy { grid-column: 1 / span 7; }
}
@media (max-width: 700px) {
  .movement-moon-component { top: calc(11% - 6px); left: calc(13% - 6px); width: 44px; }
  .movement-sky-moon { width: 32px; }
  .movement-sky-stars { background-image: url("assets/movement/sky/stars-tall.svg"); background-size: 100% auto; }
  .movement-hero-pin > .movement-wordmark { font-size: 30px; }
  .movement-circle-note { max-width: 112px; font-size: 12px; }
  .movement-bracelet { width: 280px; }
  .movement-marquee-copy { font-size: 36px; }
  .movement-manifesto-copy, .movement-manifesto-inner > .movement-bracelet { grid-column: 1 / -1; }
  .movement-footer > p { grid-column: 1 / span 6; }
  .movement-footer nav { grid-column: 7 / span 6; justify-self: end; }
  .movement-footer small { grid-column: 1 / -1; justify-self: start; text-align: left; }
}
@media (max-height: 650px) {
  .movement-hero-grid { row-gap: 24px; padding-bottom: 40px; }
  .movement-marquee-copy { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .movement .movement-moon-trigger, .movement-moon-tooltip { transition: none; }
  .movement-moon-trigger:active { transform: none; }
  .movement-night-sky, .movement[data-night="true"] .movement-night-sky { transition: none; }
  html:has(.movement), body:has(> .movement), .movement, .movement-pattern img, .movement .movement-night-toggle { transition: none; }
  .movement-night-toggle:active:not([aria-disabled="true"]) { transform: none; }
  .movement-marquee-track { animation: none; }
  .movement-bracelet, .movement-pattern, .movement-icon img, .movement-sunrise, .movement-sunrise::before { transition: none; }
  .movement .movement-soundtrack { transition: none; }
  .movement .movement-soundtrack:active:not(:disabled) { transform: none; }
  .movement-soundtrack[data-playing="true"] rect { animation: none; }
}

/* Circle, introduced under early access: a web port of the app's Circle at
   rest (HaloOrbitView, Figma 09 A1). movement-circle.mjs owns the geometry
   and the traces; CSS owns the drift, so it runs off the main thread. */
.movement-circle { --circle-green: #6bd178; --circle-mint: #d6f5c9; --circle-deep: #21733a; --circle-paper: #fbfaf7; --circle-chip: #ffffffd9; --circle-chip-line: #1111110f; --circle-path: #416a6470; --circle-open: #416a64a6; --circle-shadow: #00332e80; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--movement-grid-gap); row-gap: 24px; align-items: center; width: calc(100% - 2 * var(--movement-page-inset)); max-width: 1400px; margin-inline: auto; padding-block: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 56px); }
.movement[data-night="true"] .movement-circle { --circle-mint: #163a26; --circle-deep: #a6ecc4; --circle-paper: #e4ece7; --circle-chip: #0c1e1acc; --circle-chip-line: #d9f5e824; --circle-path: #9bbcaf59; --circle-open: #9bbcaf8c; --circle-shadow: #000000b3; }
.movement-circle-figure { grid-column: 1 / -1; grid-row: 2; display: grid; justify-items: center; row-gap: 2px; }
.movement-circle-copy { grid-column: 1 / -1; grid-row: 1; justify-self: center; display: grid; row-gap: 12px; justify-items: center; max-width: 34rem; text-align: center; font-family: var(--font-marketing, Georgia, serif); font-size: clamp(18px, 1.35vw, 20px); line-height: 1.5; letter-spacing: -.01em; }
.movement-circle-copy .movement-circle-close { margin-top: 4px; line-height: 1.4; }
.movement-circle-sample { margin-top: 6px; color: var(--movement-muted); font-size: 11px; line-height: 1.4; letter-spacing: .01em; }
.movement-circle-stage { --cx: 50%; --cy: 46.96%; --face: 88px; --o-width: 56px; position: relative; width: min(100%, 620px); height: clamp(380px, 54svh, 480px); }
.movement-circle-defs { position: absolute; }
.movement-circle-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity 900ms ease-out; }
.movement-circle-path ellipse { fill: none; stroke: var(--circle-path); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .1 6; vector-effect: non-scaling-stroke; }
/* The O in the middle: you, held by your five. A tap sends out a ring. */
.movement .movement-circle-o { position: absolute; z-index: 3; left: var(--cx); top: var(--cy); width: var(--o-width); aspect-ratio: 744 / 512; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--movement-ink); translate: -50% -50%; -webkit-tap-highlight-color: transparent; transition: opacity 420ms ease-out, scale 560ms var(--movement-ease-out), width 640ms var(--movement-ease-out); }
.movement .movement-circle-o:focus-visible { outline-offset: 8px; }
.movement-circle-o-mark { display: block; width: 100%; height: 100%; fill: currentColor; transition: opacity 320ms ease-out, transform 160ms var(--movement-ease-out); }
.movement .movement-circle-o:active .movement-circle-o-mark { transform: scale(.95); }
/* A quiet hint that the O opens something. */
.movement-circle-o-hint { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; color: var(--movement-muted); font-size: 11px; line-height: 1; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 160ms ease-out; }
.movement-circle-o-hint > span + span, .movement-circle[data-room="true"] .movement-circle-o-hint > span:first-child { display: none; }
.movement-circle[data-room="true"] .movement-circle-o-hint > span + span { display: inline; }
.movement-circle-o:focus-visible .movement-circle-o-hint { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .movement-circle[data-entered] .movement-circle-o:hover .movement-circle-o-hint { opacity: 1; } }
/* In the room the O is the speaker's stage (HaloLiveO): the person holding the
   floor sits in its pill as a mosaic, and its outline drains with their turn. */
.movement-circle-o-stage { position: absolute; inset: 8%; overflow: hidden; border-radius: 999px; background: #070b16; opacity: 0; transition: opacity 420ms ease-out; }
.movement-circle-speaker { display: block; width: 100%; height: 100%; }
.movement-circle-floor { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; pointer-events: none; transition: opacity 420ms ease-out; }
.movement-circle-floor rect { fill: none; stroke: #3cfce9; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.movement-circle[data-room="true"] .movement-circle-o { width: var(--o-room, 200px); }
.movement-circle[data-room="true"] .movement-circle-o-mark { opacity: 0; }
.movement-circle[data-room="true"] :is(.movement-circle-o-stage, .movement-circle-floor) { opacity: 1; }
.movement-circle-ring { position: absolute; inset: 0; border: 2px solid var(--circle-green); border-radius: 999px; opacity: 0; pointer-events: none; }
/* Each place is a point on the orbit: the face's centre. */
.movement-circle-place { position: absolute; z-index: 2; left: var(--x, 50%); top: var(--y, 14.16%); width: 0; height: 0; transition: opacity 420ms ease-out; transition-delay: calc(120ms + var(--i) * 50ms); }
.movement-circle-place[data-person="kai"] { left: var(--x, 71.58%); top: var(--y, 39.03%); }
.movement-circle-place[data-person="marcus"] { left: var(--x, 61.95%); top: var(--y, 74.62%); }
.movement-circle-place[data-person="dee"] { left: var(--x, 38.05%); top: var(--y, 74.62%); }
.movement-circle-place[data-person="jules"] { left: var(--x, 28.42%); top: var(--y, 39.03%); }
.movement-circle-place[data-side="left"] { --nudge: -10px; }
.movement-circle-place[data-side="right"] { --nudge: 10px; }
/* HaloFloat: a few points, slowly, each face on its own period. */
.movement-circle-float { position: absolute; left: 0; top: 0; display: grid; justify-items: center; row-gap: 7px; width: max-content; translate: -50% calc(var(--face) / -2); animation: movement-circle-float var(--period) cubic-bezier(.45,0,.55,1) var(--delay) infinite alternate backwards; }
.movement-circle:not([data-live="true"]) .movement-circle-float { animation-play-state: paused; }
@keyframes movement-circle-float { from { transform: translate(calc(var(--dx) * -.5), calc(var(--dy) * -.5)); } to { transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5)); } }
.movement-circle-face { position: relative; display: block; width: var(--face); height: var(--face); }
.movement-circle[data-enhanced] .movement-circle-face { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* In the room each person becomes a mosaic tile, never a camera or a name. */
.movement-circle-mosaic { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 420ms ease-out; }
.movement-circle-art > svg { transition: opacity 420ms ease-out; }
.movement-circle[data-room="true"] .movement-circle-art { border-radius: 28%; background: #070b16; }
.movement-circle[data-room="true"] .movement-circle-art > svg { opacity: 0; }
.movement-circle[data-room="true"] .movement-circle-mosaic { opacity: 1; }
.movement-circle[data-room="true"] .movement-circle-identity { scale: 1.08; }
.movement-circle[data-room="true"] :is(.movement-circle-name, .movement-circle-trace, .movement-circle-asked) { opacity: 0; transition-delay: 0s; }
.movement-circle[data-room="true"] .movement-circle-place[data-floor] .movement-circle-art { box-shadow: 0 16px 30px -18px var(--circle-shadow), 0 0 0 3px #3cfce9; }
/* A place waiting for a friend: the app's open place, a dashed ring that invites. */
.movement-circle-open { position: absolute; inset: 0; display: grid; place-items: center; border: 1.5px dashed var(--circle-open); border-radius: 50%; color: var(--movement-muted); opacity: 0; pointer-events: none; transition: opacity 360ms ease-out, scale 560ms var(--movement-ease-out); }
.movement-circle-place[data-seat="open"] .movement-circle-open { opacity: 1; }
.movement-circle-place[data-seat="open"] .movement-circle-name { color: var(--movement-muted); font-weight: 400; }
.movement-circle[data-room="true"] .movement-circle-place[data-seat="open"] { opacity: .4; }
.movement-circle-open svg { width: 30%; height: 30%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
/* A visual identity, not a profile picture: a Halo pattern or a photograph.
   The ring in the person's signature colour stays while the artwork changes. */
.movement-circle-identity { position: absolute; inset: 0; transition: opacity 520ms ease-out, scale 760ms var(--movement-ease-out); }
.movement-circle-art { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: var(--signature); box-shadow: 0 16px 30px -18px var(--circle-shadow), 0 0 0 2px var(--signature); transition: border-radius 600ms var(--movement-ease-out), box-shadow 300ms ease-out, background-color 420ms ease-out; }
.movement-circle-art > svg { display: block; width: 100%; height: 100%; }
/* As in the app, a person's artwork is alive only while their voice plays. */
.movement-circle-place[data-speaking] .movement-circle-art > svg { animation: movement-circle-breathe 1.6s cubic-bezier(.45,0,.55,1) 2 alternate; }
@keyframes movement-circle-breathe { to { transform: scale(1.06) rotate(2deg); } }
.movement-circle-asked { position: absolute; inset: -9px; border: 3px solid var(--circle-green); border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity 260ms ease-out; }
.movement-circle-place[data-asked="true"] .movement-circle-asked { opacity: 1; }
.movement-circle-name { color: var(--movement-ink); font-size: 15px; font-weight: 500; line-height: 1.1; transition: opacity 420ms ease-out; transition-delay: 180ms; }
.movement-circle-trace { display: grid; justify-items: center; align-items: start; transition: opacity 420ms ease-out; transition-delay: 380ms; }
.movement-circle-trace > * { grid-area: 1 / 1; }
.movement-circle-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 9px; border: 1px solid var(--circle-chip-line); border-radius: 999px; background: var(--circle-chip); color: var(--movement-ink); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.movement-circle-chip[data-kind="asked"] { border-color: transparent; background: var(--circle-mint); color: var(--circle-deep); }
.movement-circle-chip[data-kind="asked"] i { width: 6px; height: 6px; border-radius: 50%; background: var(--circle-green); }
.movement-circle-chip-o { width: 13px; height: auto; fill: currentColor; }
.movement-circle-chip[data-kind="voice"] { gap: 6px; padding-left: 3px; }
.movement-circle-chip b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--movement-ink); }
.movement-circle-chip b svg { width: 9px; height: 9px; fill: var(--movement-paper); }
.movement-circle-wave { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.movement-circle-wave i { width: 2px; height: 40%; border-radius: 1px; background: currentColor; opacity: .55; }
.movement-circle-wave i:nth-child(2) { height: 70%; } .movement-circle-wave i:nth-child(3) { height: 100%; } .movement-circle-wave i:nth-child(4) { height: 55%; }
.movement-circle-wave i:nth-child(5) { height: 85%; } .movement-circle-wave i:nth-child(6) { height: 45%; } .movement-circle-wave i:nth-child(7) { height: 65%; }
.movement-circle-place[data-speaking] .movement-circle-wave i { animation: movement-circle-level 620ms cubic-bezier(.45,0,.55,1) infinite alternate; }
.movement-circle-wave i:nth-child(2n) { animation-delay: -310ms; } .movement-circle-wave i:nth-child(3n) { animation-delay: -170ms; }
@keyframes movement-circle-level { from { transform: scaleY(.45); } to { transform: scaleY(1.1); } }
.movement-circle-time { color: var(--movement-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
/* Keepsakes rest by the face like something left on a doorstep. */
.movement-circle-note { position: relative; display: block; width: max-content; max-width: 128px; padding: 17px 11px 10px; border-radius: 10px; background: var(--circle-paper); color: #141312; box-shadow: 0 10px 22px -14px #0000008c, 0 0 0 1px #0000000a; font-size: 13px; line-height: 1.25; text-align: left; rotate: -3deg; translate: var(--nudge, 0px) 0; }
.movement-circle-note > span { position: absolute; top: 4px; left: 10px; color: #66615a; font: 400 18px/1 var(--font-marketing, Georgia, serif); }
.movement-circle-print { display: block; width: 50px; padding: 4px 4px 11px; border-radius: 4px; background: #fff; box-shadow: 0 10px 20px -12px #0000008c, 0 0 0 1px #0000000d; rotate: 5deg; translate: var(--nudge, 0px) 0; }
.movement-circle-print > span { display: block; aspect-ratio: 4 / 5; border-radius: 2px; background: var(--scene); }
.movement-circle-print[data-scene="path"] { --scene: url("assets/movement/circle/keepsake-path.jpg") center / cover no-repeat, #b5c184; }
.movement-circle-print[data-scene="table"] { --scene: url("assets/movement/circle/keepsake-table.jpg") center / cover no-repeat, #c99a6c; }
.movement-circle-print[data-scene="bus"] { --scene: url("assets/movement/circle/keepsake-bus.jpg") center / cover no-repeat, #1c2440; }
/* The entrance is an invitation: the orbit and the O appear with five open
   places, then each fills with a friend's artwork as they join, followed by
   their name and the newest thing they left. Hidden only where script runs. */
@media (scripting: enabled) {
  .movement-circle:not([data-entered]) :is(.movement-circle-place, .movement-circle-path) { opacity: 0; animation: movement-circle-fallback 1ms 5s forwards; }
  .movement-circle:not([data-entered]) .movement-circle-o { opacity: 0; scale: .9; animation: movement-circle-fallback 1ms 5s forwards; }
  .movement-circle-place[data-person]:not([data-joined]) .movement-circle-open { opacity: 1; animation: movement-circle-fallback-out 1ms 5s forwards; }
  .movement-circle-place[data-person]:not([data-joined]) .movement-circle-identity { opacity: 0; scale: .86; animation: movement-circle-fallback 1ms 5s forwards; }
  .movement-circle-place[data-person]:not([data-joined]) :is(.movement-circle-name, .movement-circle-trace) { opacity: 0; animation: movement-circle-fallback 1ms 5s forwards; }
  .movement-circle-place[data-person][data-joined] .movement-circle-open { scale: 1.08; }
}
/* If the script never runs, the Circle still appears, already full. */
@keyframes movement-circle-fallback { to { opacity: 1; transform: none; scale: 1; } }
@keyframes movement-circle-fallback-out { to { opacity: 0; } }
@media (max-width: 999px) {
  .movement-circle { row-gap: 24px; }
  .movement-circle-figure, .movement-circle-copy { grid-column: 1 / -1; }
  .movement-circle-copy { width: 100%; }
  .movement-circle-stage { width: min(100%, 520px); height: clamp(380px, 112vw, 480px); }
}
@media (prefers-reduced-motion: reduce) {
  .movement-circle-float, .movement-circle-place[data-speaking] .movement-circle-art > svg, .movement-circle-place[data-speaking] .movement-circle-wave i { animation: none; }
  .movement .movement-circle-o, .movement-circle-art, .movement-circle-mosaic, .movement-circle-o-stage, .movement-circle-floor, .movement-circle-o-mark { transition: opacity 240ms ease-out; }
  .movement-circle[data-room="true"] .movement-circle-identity { scale: 1; }
  .movement-circle-place, .movement-circle-name, .movement-circle-trace, .movement-circle-path, .movement-circle-o, .movement-circle-identity, .movement-circle-open { transition: opacity 240ms ease-out; transition-delay: 0s; }
  .movement-circle:not([data-entered]) .movement-circle-o, .movement-circle-place:not([data-joined]) .movement-circle-identity, .movement-circle-place[data-joined] .movement-circle-open { scale: 1; }
  .movement-circle-o svg, .movement-circle-asked { transition: none; }
  .movement-circle[data-enhanced] .movement-circle-o:active svg { transform: none; }
}

/* Create your Circle: the hero's first real experience, in place of a waitlist.
   Each step replaces the last in the same spot under the wordmark. */
.movement-create { position: relative; z-index: 3; display: grid; justify-items: center; width: min(440px, calc(100vw - 48px)); scroll-margin-top: 32svh; text-align: center; }
.movement-create-panel { display: grid; justify-items: center; row-gap: 12px; width: 100%; }
.movement .movement-create .movement-access-trigger { width: auto; min-width: 200px; padding-inline: 28px; transition: background-color 180ms ease, transform 160ms var(--movement-ease-out), opacity 180ms ease; }
.movement .movement-create .movement-access-trigger:active:not(:disabled) { transform: scale(.97); }
.movement .movement-create .movement-access-trigger:disabled { cursor: default; opacity: .45; }
.movement-create-line { max-width: 34ch; font-family: var(--font-marketing, Georgia, serif); font-size: 17px; line-height: 1.4; letter-spacing: -.01em; text-wrap: balance; }
.movement-create-title { font-family: var(--font-marketing, Georgia, serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.015em; }
.movement-create-title:focus { outline: none; }
.movement-create-note { max-width: 36ch; color: var(--movement-muted); font-size: 12px; line-height: 1.45; text-wrap: balance; }
.movement-create-count { font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.movement-create-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.movement .movement-create-action { min-height: 44px; padding: 10px 18px; border: 1.5px solid var(--movement-ink); border-radius: 999px; background: transparent; font-size: 14px; transition: background-color 160ms ease, transform 160ms var(--movement-ease-out); }
.movement .movement-create-action:active { transform: scale(.97); }
.movement .movement-create-quiet { min-height: 32px; padding: 4px 10px; border: 0; background: transparent; color: var(--movement-muted); font-size: 12px; text-decoration: underline; text-underline-offset: .25em; }
.movement-create-quiet-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.movement-create-status { min-height: 18px; margin-top: 8px !important; color: var(--movement-muted); font-size: 12px; line-height: 1.4; }
.movement-create-status[data-tone="error"] { color: var(--movement-error); }
/* Sign in with Apple, drawn to Apple's guidelines: black on light, white on dark. */
.movement .movement-apple { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 240px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: #000; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: -.01em; transition: transform 160ms var(--movement-ease-out), opacity 180ms ease; }
.movement .movement-apple:active:not(:disabled) { transform: scale(.97); }
.movement .movement-apple:disabled { cursor: not-allowed; opacity: .4; }
.movement-apple svg { width: 15px; height: 18px; fill: currentColor; translate: 0 -1px; }
.movement[data-night="true"] .movement-apple { background: #fff; color: #000; }
/* Development only: synthetic accounts, never presented as Apple. */
.movement-create-dev { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--movement-control-border); border-radius: 14px; color: var(--movement-muted); font-size: 11px; }
.movement-create-dev div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.movement .movement-create-dev button { min-height: 32px; padding: 4px 12px; border: 1px solid var(--movement-control-border); border-radius: 999px; background: transparent; font-size: 12px; }
.movement-identity { row-gap: 14px; }
.movement-identity-handle { display: flex; align-items: center; gap: 10px; width: min(320px, 100%); min-height: 52px; padding: 0 18px; border: 5px solid var(--movement-accent); border-radius: 999px; }
.movement-identity-handle:focus-within { border-color: #20e8d4; }
.movement-identity-handle span { color: var(--movement-muted); font-size: 13px; }
.movement .movement-identity-handle input { align-self: stretch; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--movement-ink); font-size: 16px; }
.movement .movement-identity-handle input:focus-visible { outline: none; }
/* Phone sign-in (circle-phone.mjs): the number, then the texted code, in the handle field's shape. */
.movement-phone-signin-slot, .movement-phone-signin { display: grid; justify-items: inherit; row-gap: 12px; width: 100%; }
.movement-phone-signin-label { flex: none; color: var(--movement-muted); font-size: 13px; }
.movement-phone-signin-prefix, .movement .movement-phone-signin-country { flex: none; color: var(--movement-ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.movement .movement-phone-signin-country { padding: 0; border: 0; background: transparent; font-family: inherit; }
.movement .movement-phone-signin input { font-variant-numeric: tabular-nums; }
.movement .movement-phone-signin input[data-phone-code] { letter-spacing: .24em; }
.movement-create-or { color: var(--movement-muted); font-size: 12px; letter-spacing: .01em; }
.movement-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.movement .movement-swatch { width: 44px; height: 44px; overflow: hidden; padding: 0; border: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--signature); transition: transform 160ms var(--movement-ease-out), box-shadow 160ms ease; }
.movement-swatch svg { display: block; width: 100%; height: 100%; }
.movement .movement-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--movement-paper), 0 0 0 4.5px var(--movement-ink); transform: scale(1.06); }
.movement-identity-consent { display: flex; align-items: flex-start; gap: 10px; max-width: 34ch; font-size: 13px; line-height: 1.4; text-align: left; }
.movement-identity-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--movement-ink); }
@media (hover: hover) and (pointer: fine) {
  .movement .movement-create-action:hover, .movement .movement-create-dev button:hover { background: #3cfce92b; }
  .movement .movement-apple:hover:not(:disabled) { opacity: .86; }
}
@media (prefers-reduced-motion: reduce) {
  .movement .movement-create .movement-access-trigger, .movement .movement-create-action, .movement .movement-apple, .movement .movement-swatch { transition: none; }
  .movement .movement-create-action:active, .movement .movement-apple:active:not(:disabled), .movement .movement-create .movement-access-trigger:active:not(:disabled) { transform: none; }
}

/* Create your Circle lives in the Circle section, under its copy. */
.movement-circle-copy .movement-create { justify-items: start; width: 100%; margin-top: 12px; text-align: left; scroll-margin-top: 20svh; }
.movement-circle-copy .movement-create-panel { justify-items: start; }
/* Early access, back above the tagline. */
.movement-signup { position: relative; z-index: 3; width: 144px; min-height: 112px; scroll-margin-top: 32svh; }
.movement[data-signup-open="true"] .movement-signup { width: min(420px, calc(100vw - 48px)); }
.movement-waitlist { width: 100%; text-align: left; }
.movement-waitlist-field { display: flex; min-height: 60px; border: 5px solid var(--movement-accent); border-radius: 99px; }
.movement-waitlist input { min-width: 0; width: 100%; border: 0; padding: 12px 16px; border-radius: 99px 0 0 99px; background: transparent; color: var(--movement-ink); font-size: 16px; }
.movement .movement-waitlist input:focus, .movement .movement-waitlist input:focus-visible { outline: none; box-shadow: none; }
.movement-waitlist-field:focus-within { border-color: #20e8d4; }
.movement-waitlist input::placeholder { color: var(--movement-muted); opacity: 1; }
.movement-waitlist button[type="submit"] { flex: none; border: 0; padding: 10px 20px 10px 10px; background: transparent; color: var(--movement-ink); font-size: 15px; border-radius: 0 99px 99px 0; }
.movement-waitlist button:disabled { cursor: default; }
.movement-waitlist-status { min-height: 18px; margin-top: 6px !important; font-size: 12px; line-height: 1.4; text-align: center; }
.movement-waitlist[data-state="error"] .movement-waitlist-status { color: var(--movement-error); }
.movement-signup-close { display: block; min-height: 32px; margin: 0 auto; padding: 4px 10px; border: 0; background: transparent; font-size: 11px !important; color: var(--movement-muted) !important; }
@media (prefers-reduced-motion: reduce) {
  .movement-signup { transition: none; }
}

/* The final hero (Connor, 8 Nov 2026): the phone and the type lead; early access
   is a small status; Find your Circle and Create your Circle are the actions. */
.movement-hero-pin { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); padding-top: 76px; }
.movement-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--movement-control-border); border-radius: 999px; color: var(--movement-ink); font-size: 12px; line-height: 1; letter-spacing: .02em; }
.movement-status span { width: 7px; height: 7px; border-radius: 50%; background: #3cfce9; box-shadow: 0 0 0 3px #3cfce940; }
.movement .movement-hero-sub { margin-top: -6px; color: var(--movement-ink); font: 700 clamp(22px, 2vw, 30px)/1.15 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: -.025em; }
.movement-hero-explain { max-width: 34ch; color: var(--movement-ink); font-family: var(--font-marketing, Georgia, serif); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.45; letter-spacing: -.01em; }
.movement-cta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.movement-cta .movement-signup { width: auto; min-height: 52px; }
.movement[data-signup-open="true"] .movement-cta .movement-signup { width: min(420px, calc(100vw - 48px)); }
.movement-cta .movement-create { width: auto; justify-items: start; text-align: left; }
.movement-cta .movement-create-panel { justify-items: start; }
/* The Create status ("opens soon…") wraps under its button rather than pushing it onto a new row. */
.movement-cta .movement-create-status { max-width: 30ch; }
.movement .movement-access-trigger.movement-cta-primary { width: auto; padding-inline: 26px; border-color: var(--movement-ink); background: var(--movement-ink); color: var(--movement-paper); font-size: 15px; transition: opacity 160ms ease, transform 160ms var(--movement-ease-out); }
.movement .movement-access-trigger.movement-cta-primary:active { transform: scale(.97); }
.movement .movement-create .movement-access-trigger.movement-cta-secondary { min-width: 0; padding-inline: 26px; font-size: 15px; }
.movement-waitlist-note { max-width: 40ch; margin-bottom: 8px !important; color: var(--movement-muted); font-size: 12px; line-height: 1.45; }
@media (hover: hover) and (pointer: fine) { .movement .movement-access-trigger.movement-cta-primary:hover { background: var(--movement-ink); opacity: .86; } }
.movement-circle-copy .movement-circle-hint { color: var(--movement-muted); font-family: var(--font-ui, "Aeonik Pro", Arial, sans-serif); font-size: 13px; }
/* Milestones beside the bracelet: marked your way. */
@media (max-width: 899px) {
  .movement-cta, .movement-cta .movement-create-panel { justify-content: center; justify-items: center; }
  .movement-cta .movement-create { justify-items: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .movement .movement-access-trigger.movement-cta-primary { transition: none; }
  .movement .movement-access-trigger.movement-cta-primary:active { transform: none; }
}

/* The hero iPhone: a plain frame around real, unaltered app screenshots. */
.movement-hero-grid > .movement-phone-column { grid-column: 2 / span 4; justify-self: center; display: grid; justify-items: center; }
.movement-phone { width: clamp(220px, min(21vw, calc((100svh - 200px) * .46)), 300px); }
/* The phone leans a few degrees to the left and floats (Connor, 12 Nov 2026: "tilt the phone left maybe
   3 or 4 degrees so it seems floating"), drifting slowly up and down. The lean is on the frame, so the
   arrival (translate on the figure) is untouched. (The turning bracelet beside it and the page's colour
   cycle came out on 13 Nov.) */
.movement-phone-frame { rotate: -3.5deg; animation: movement-float 7s ease-in-out infinite; }
@keyframes movement-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@media (prefers-reduced-motion: reduce) { .movement-phone-frame { animation: none; } }
.movement-phone-frame { padding: 7px; border-radius: 46px; background: #fbfaf7; box-shadow: 0 40px 80px -40px #00332e73, 0 0 0 1px #00000012; }
.movement[data-night="true"] .movement-phone-frame { background: #1c2424; box-shadow: 0 40px 80px -40px #000, 0 0 0 1px #ffffff1f; }
.movement-phone-screen { position: relative; overflow: hidden; aspect-ratio: 1320 / 2868; border-radius: 39px; background: #f3f1ee; }
.movement-phone-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 420ms ease; -webkit-user-select: none; user-select: none; }
.movement-phone-shot[data-active] { opacity: 1; }
.movement-phone-note { max-width: 40ch; margin-top: 18px; color: var(--movement-muted); font-size: 11px; line-height: 1.4; text-align: center; }
/* One page (Connor, 8 Nov): the hero is a single screen, never a scroll track.
   The step buttons change the screenshot; scrolling just scrolls. */
@media (min-width: 900px) {
  .movement-first-view { min-height: max(620px, 100svh); padding: 0; }
  .movement-hero-pin > .movement-hero-grid { align-items: center; padding-block: 16px 24px; }
  /* While early access or Create is open, the hero holds its resting layout (movement.js
     measures --hero-rest, --phone-rest and --copy-rest at rest): the opened panel grows
     downward and neither the phone nor the tagline moves. */
  .movement:is([data-signup-open="true"], [data-create-state="signin"], [data-create-state="identity"], :has([data-create-status]:not(:empty))) .movement-hero-pin > .movement-hero-grid { align-content: start; align-items: start; padding-top: var(--hero-rest, 16px); }
  .movement:is([data-signup-open="true"], [data-create-state="signin"], [data-create-state="identity"], :has([data-create-status]:not(:empty))) .movement-hero-grid > .movement-phone-column { margin-top: var(--phone-rest, 0px); }
  .movement:is([data-signup-open="true"], [data-create-state="signin"], [data-create-state="identity"], :has([data-create-status]:not(:empty))) .movement-hero-grid > .movement-hero-copy { margin-top: var(--copy-rest, 0px); }
}
@media (max-width: 899px) {
  .movement-hero-grid > .movement-phone-column { grid-column: 1 / -1; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .movement-phone-shot { transition: none; }
}

/* Design pass (emil-design-eng + apple-design, 8 Nov). */
/* Small type reads better slightly open; large type stays tight. */
.movement :is(.movement-phone-note, .movement-footer small, .movement-create-dev, .movement-signup-close, .movement-circle-o-hint) { letter-spacing: .01em; }
/* First visit: the hero arrives in reading order, 50ms apart. CSS only (off the main
   thread), and on `translate`, so it composes with the headline's tilt and never moves
   the columns the hero's resting layout is measured from. Only when the page opened in
   view (index.html sets data-arrive before first paint): a background tab, a renderer
   without JS or a screenshot at load shows the hero at once, never an empty page. */
@keyframes movement-arrive { from { opacity: 0; translate: 0 14px; } }
@keyframes movement-arrive-fade { from { opacity: 0; } }
:root[data-arrive] :is(.movement-hero-copy > .movement-status, .movement-headline > span, .movement-hero-sub, .movement-hero-explain, .movement-hero-copy > .movement-cta, .movement-phone, .movement-phone-note) { animation: movement-arrive 640ms var(--movement-ease-out) both; animation-delay: calc(60ms + var(--arrive, 0) * 50ms); }
.movement-headline > span:nth-child(1), .movement-phone { --arrive: 1; }
.movement-headline > span:nth-child(2) { --arrive: 2; }
.movement-headline > span:nth-child(3) { --arrive: 3; }
.movement-hero-sub { --arrive: 4; }
.movement-hero-explain, .movement-phone-note { --arrive: 5; }
.movement-hero-copy > .movement-cta { --arrive: 6; }
@media (prefers-reduced-motion: reduce) {
  /* Gentler, not none: a short fade, all at once. */
  :root[data-arrive] :is(.movement-hero-copy > .movement-status, .movement-headline > span, .movement-hero-sub, .movement-hero-explain, .movement-hero-copy > .movement-cta, .movement-phone, .movement-phone-note) { animation-name: movement-arrive-fade; animation-duration: 240ms; animation-delay: 0ms; }
}
/* Stacked on a phone, the two actions match in width. */
@media (max-width: 599px) {
  .movement .movement-cta .movement-access-trigger:is(.movement-cta-primary, .movement-cta-secondary) { min-width: min(240px, calc(100vw - 48px)); }
}
/* Reduce Transparency: frosted chips become solid. */
@media (prefers-reduced-transparency: reduce) {
  .movement-circle-chip { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--movement-paper); }
}
/* Increased Contrast: stronger secondary ink and control edges. */
@media (prefers-contrast: more) {
  .movement { --movement-muted: #24423e; --movement-control-border: #416a64; }
  .movement[data-night="true"] { --movement-muted: #c6ded4; --movement-control-border: #9bbcaf; }
}

/* The Circle section speaks in Aeonik Pro, like the hero (Connor, 8 Nov): a bold,
   tight heading and plain body text with no negative tracking. */
.movement .movement-circle-copy { font-family: var(--font-ui, "Aeonik Pro", Arial, sans-serif); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.45; letter-spacing: 0; }
.movement .movement-circle-copy h2 { font: 700 clamp(30px, 3.4vw, 52px)/1.05 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: -.035em; }

/* About: the copy starts on the grid's first column, under the logo and level with
   the footer; copy and bracelet centre on each other; one screen tall on desktop. */
.movement-about .movement-manifesto { display: grid; align-content: center; min-height: calc(100svh - 92px); padding-block: 96px 48px; box-sizing: border-box; }
.movement-about .movement-manifesto-inner { align-items: center; }
/* The bracelet page ends on the copy alone, centred (Connor, 12 Nov: "remove the bottom bracelet ... place
   this copy ... in bottom center"). */
.movement-about .movement-manifesto-copy { grid-column: 1 / -1; justify-self: center; justify-items: center; text-align: center; }
@media (min-width: 600px) { .movement-about .movement-manifesto-copy > .movement-manifesto-invitation { justify-self: center; } }
@media (max-width: 700px) {
  .movement-about .movement-manifesto { min-height: 0; padding-block: 88px 32px; }
  .movement-about .movement-manifesto-copy { grid-column: 1 / -1; }
  /* Narrow: the bracelet keeps the text's left edge instead of centring. */
  .movement-about .movement-manifesto-inner > .movement-bracelet { grid-column: 1 / -1; justify-self: start; width: min(100%, 360px); }
}

/* "a private recovery toolkit." (retitled 8 Nov; first "a friendly support network.") (Connor, 8 Nov: "add different components of halo
   scattered around the landing page ... make it seem like a fun social network").
   Crops of real 1.1.0 captures, pinned around one line like a board: each tilted,
   each with a sticker label in a Social Opal secondary. On a phone they flow as a
   two-column collage; from 1000px they sit at fixed places on a 1400 x 1100 board
   that scales as one piece, so nothing collides at any width. */
.movement-world { --world-air: #91d9e7; --world-lime: #dceb95; --world-rose: #f2a6af; --world-amethyst: #c9b8f5; width: calc(100% - 2 * var(--movement-page-inset)); max-width: 1400px; margin-inline: auto; padding-block: clamp(48px, 7vw, 104px) 0; }
.movement-world-board { position: relative; container-type: inline-size; }
.movement .movement-world-title { margin: 0; color: var(--movement-ink); font: 700 clamp(38px, 11cqw, 64px)/.9 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: -.045em; text-align: center; rotate: -3deg; }
.movement-world-title span { display: block; }
.movement-world-title .movement-world-line-big { font-size: 1.12em; }
/* "coming soon" (Connor, 9 Nov): a lighter, thinner line above the title, in Aeonik Pro Light. */
.movement .movement-world-title .movement-world-soon { margin-bottom: .4em; font-size: max(15px, .34em); font-weight: 300; letter-spacing: -.01em; line-height: 1; color: var(--movement-muted); }
.movement-world-cards { margin: 44px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 16px; }
.movement-world-card { --tone: var(--world-air); break-inside: avoid; margin-bottom: 30px; rotate: calc(var(--r) * .6); }
.movement-world-card[data-tone="lime"] { --tone: var(--world-lime); }
.movement-world-card[data-tone="rose"] { --tone: var(--world-rose); }
.movement-world-card[data-tone="amethyst"] { --tone: var(--world-amethyst); }
.movement-world-card figure { position: relative; margin: 0; }
.movement-world-card img { display: block; width: 100%; height: auto; border-radius: 14px; background: #f3f1ee; box-shadow: 0 0 0 1px #1111110d, 0 22px 44px -26px #00332e8c; -webkit-user-select: none; user-select: none; }
.movement-world-card figcaption { position: absolute; left: 10px; bottom: -13px; padding: 6px 11px 7px; border-radius: 999px; background: var(--tone); color: #111; font: 500 13px/1 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: -.01em; white-space: nowrap; rotate: calc(var(--r) * -1.1); box-shadow: 0 8px 16px -10px #00332e80; }
/* A recorded card (movement-world.mjs): the recording sits exactly over its still,
   a frame of the same recording, and fades in only once it is playing. */
.movement-world-front { position: relative; }
.movement-world-card .movement-world-motion { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; opacity: 0; pointer-events: none; transition: opacity 220ms ease-out; }
.movement-world-card .movement-world-motion[data-shown] { opacity: 1; }
.movement-world-note { margin: 28px auto 0; color: var(--movement-muted); font-size: 12px; line-height: 1.5; text-align: center; text-wrap: balance; }
@media (min-width: 700px) and (max-width: 999px) { .movement-world-cards { columns: 3; } }
@media (min-width: 1000px) {
  .movement-world-board { aspect-ratio: 1400 / 1100; }
  .movement .movement-world-title { position: absolute; z-index: 1; left: 50%; top: 42.5%; width: max-content; translate: -50% 0; font-size: 5cqw; pointer-events: none; }
  .movement-world-cards { margin: 0; columns: auto; }
  .movement-world-card { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; rotate: var(--r); transition: rotate 260ms var(--movement-ease-out), scale 260ms var(--movement-ease-out); }
  .movement-world-card img, .movement-world-card .movement-world-motion { border-radius: 1.45cqw; }
  .movement-world-card figcaption { left: .8cqw; bottom: -1cqw; padding: .45cqw .85cqw .5cqw; font-size: max(12px, 1.05cqw); }
  .movement-world-note { margin-top: 0; }
}
/* Pointing at a card straightens it and lifts it above its neighbours. */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .movement-world-card:hover { z-index: 2; rotate: 0deg; scale: 1.04; }
}
/* The cards land once, staggered, the first time the section scrolls into view
   (movement-world.mjs sets the flags only for a visible page and full motion). */
.movement-world[data-world-ready] .movement-world-card figure { transition: opacity 460ms ease-out, translate 720ms var(--movement-ease-out), scale 720ms var(--movement-ease-out); transition-delay: calc(var(--i) * 55ms); }
.movement-world[data-world-ready]:not([data-world-in]) .movement-world-card figure { opacity: 0; translate: 0 36px; scale: .94; }
@media (prefers-reduced-motion: reduce) {
  .movement-world-card { transition: none; }
  .movement-world-card .movement-world-motion { transition: none; }
  .movement-world[data-world-ready] .movement-world-card figure { opacity: 1; translate: none; scale: 1; transition: none; }
}


/* The green Supermax marquee is back (Connor, 8 Nov: "bring back the green marquee
   in supermax font, a support system repeating"). It is the hero's second row, so
   the one-page hero still ends at the fold and the phone gives up the room. */
.movement-first-view > .movement-marquee { grid-row: 2; align-self: end; }
@media (min-width: 900px) {
  .movement-phone { width: clamp(210px, min(21vw, calc((100svh - 270px) * .46)), 300px); }
  /* On a short laptop screen the hero's spacing tightens with the height, so the
     headline keeps its size and the marquee still sits on the fold. */
  .movement-hero-pin { padding-top: clamp(60px, 9svh, 76px); }
  .movement-hero-pin > .movement-hero-grid { padding-block: clamp(4px, 1.5svh, 16px) clamp(8px, 2.5svh, 24px); }
  .movement-hero-copy { row-gap: clamp(14px, 2.6svh, 36px); }
  /* The headline tilts -3deg about its top-left corner, so its right end rises by
     sin(3deg) of its width (about 5.3cqw); the status keeps at least that much room. */
  .movement-hero-copy > .movement-status { margin-bottom: max(0px, calc(5.3cqw + 2px - clamp(14px, 2.6svh, 36px))); }
  .movement-first-view > .movement-marquee { padding-block: clamp(2px, .8svh, 8px); }
}

/* About speaks in Aeonik Pro, like the hero and the Circle (Connor, 8 Nov). */
.movement-about .movement-manifesto-inner { font-family: var(--font-ui, "Aeonik Pro", Arial, sans-serif); font-size: clamp(18px, 1.35vw, 20px); line-height: 1.45; letter-spacing: 0; }
.movement-about .movement-manifesto h1 { margin-bottom: 4px; font: 700 clamp(34px, 3.4vw, 48px)/1.05 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: -.035em; }
.movement-about .movement-manifesto-copy { row-gap: 16px; }
.movement-about .movement-manifesto-copy p { text-wrap: pretty; }

/* Laptop (Connor, 8 Nov: "a bit more compact for laptop"). Section spacing follows
   the screen's height, the board scales down until it fits one screen, and the
   Circle's orbit gives up a little height, so each section reads in one view. */
@media (min-width: 1000px) {
  .movement-world { padding-top: clamp(40px, 6svh, 88px); }
  .movement-world-board { width: min(100%, max(900px, calc((100svh - 48px) * 14 / 11))); margin-inline: auto; }
  .movement-world-note { margin-top: 8px; }
  .movement-circle { padding-block: clamp(40px, 6svh, 80px) clamp(24px, 3svh, 48px); row-gap: 16px; }
  .movement-circle-stage { height: clamp(360px, 50svh, 480px); }
  .movement-about .movement-manifesto { padding-block: clamp(80px, 11svh, 96px) clamp(24px, 4svh, 48px); }
}

/* Flip a card to read about it (Connor, 8 Nov: "clicking the cards should flip it and have
   the card gaussian blurred, and the white title about more about the feature"). The front
   is the real capture, untouched; the back is the same capture blurred and dimmed for
   white type. Each card is a toggle button; Escape turns every card back. Under Reduce
   Motion the back cross-fades in place instead of turning. */
.movement-world-card figure { perspective: 1400px; }
.movement .movement-world-flip { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transform-style: preserve-3d; transition: transform 640ms var(--movement-ease-in-out); -webkit-tap-highlight-color: transparent; }
.movement .movement-world-flip[aria-pressed="true"] { transform: rotateY(180deg); }
.movement-world-face { display: block; border-radius: inherit; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.movement-world-back { position: absolute; inset: 0; overflow: hidden; background: #24202b; box-shadow: 0 0 0 1px #1111110d, 0 22px 44px -26px #00332e8c; transform: rotateY(180deg); }
.movement-world-card .movement-world-back .movement-world-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; filter: blur(16px) saturate(1.3); transform: scale(1.3); }
.movement-world-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, #1111117a, #111111bf); }
.movement-world-more { position: relative; z-index: 1; display: grid; align-content: start; height: 100%; box-sizing: border-box; overflow: hidden; color: #fff; }
.movement-world-more strong { font: 700 14px/1.04 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: -.02em; text-wrap: balance; }
.movement-world-more > span { color: #fffffff0; font: 400 11.5px/1.35 var(--font-ui, "Aeonik Pro", Arial, sans-serif); text-wrap: pretty; }
.movement-world-card:has(.movement-world-flip[aria-pressed="true"]) { z-index: 3; }
@media (min-width: 1000px) {
  .movement .movement-world-flip { border-radius: 1.45cqw; }
}
/* The back's type scales with its card. On the board, --wn is the card's width as a share of
   the board (cqw), so the big meter card and the short "days sober" card both read well,
   never below 13px / 11px. (No size containment on a card: it would flatten the 3D turn.) */
.movement-world-more { row-gap: 6px; padding: 10px 11px 20px; }
.movement-world-more > span { line-height: 1.32; }
@media (min-width: 1000px) {
  .movement-world-more { row-gap: calc(var(--wn) * .026cqw); padding: calc(var(--wn) * .055cqw) calc(var(--wn) * .06cqw) calc(var(--wn) * .09cqw); }
  .movement-world-more strong { font-size: max(13px, calc(var(--wn) * .074cqw)); }
  .movement-world-more > span { font-size: max(11px, calc(var(--wn) * .05cqw)); }
}
@media (prefers-reduced-motion: reduce) {
  .movement .movement-world-flip, .movement .movement-world-flip[aria-pressed="true"] { transform: none; transition: none; }
  .movement-world-face { -webkit-backface-visibility: visible; backface-visibility: visible; }
  .movement-world-back { transform: none; opacity: 0; transition: opacity 200ms ease; }
  .movement-world-flip[aria-pressed="true"] .movement-world-back { opacity: 1; }
}
/* On a phone the board is a carousel (Connor, 9 Nov: "clean up this section on mobile by
   making it a carousel constantly rotating"): one row of cards that snaps to the centre and
   moves on by itself (movement-world.mjs), bleeding to the screen edges. Cards are about
   72% of the screen wide, so every back keeps its full line. Tablet and desktop keep the collage. */
@media (max-width: 699px) {
  .movement-world-cards { display: flex; align-items: center; gap: 18px; columns: auto; margin: 32px calc(-1 * var(--movement-page-inset)) 0; padding: 26px max(14vw, 28px) 34px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .movement-world-cards::-webkit-scrollbar { display: none; }
  /* Every card at most about 300px tall (--ar is the capture's width/height), so tall ones narrow instead of stretching the row. */
  .movement-world-card { flex: 0 0 min(72vw, 320px, calc(var(--ar) * min(300px, 42svh))); margin: 0; scroll-snap-align: center; scroll-snap-stop: always; rotate: calc(var(--r) * .35); }
  .movement-world-more { row-gap: 5px; padding: 11px 13px 20px; }
  .movement-world-more strong { font-size: clamp(14px, 4.4vw, 17px); }
  .movement-world-more > span { font-size: clamp(12px, 3.6vw, 14px); line-height: 1.3; }
  .movement-world-controls:not([hidden]) { gap: 14px; margin-top: 2px; }
  .movement-world-dots { display: flex; align-items: center; gap: 6px; }
  .movement-world-dots i { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--movement-ink); opacity: .28; transition: width 240ms var(--movement-ease-out), opacity 240ms ease; }
  .movement-world-dots i[data-active] { width: 18px; opacity: .9; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  .movement-world-dots i { transition: none; }
}

/* The carousel's dots (a phone only). */
.movement-world-controls:not([hidden]) { display: flex; align-items: center; justify-content: center; }


/* The sample Circle has no caption (Connor, 9 Nov); the room and a founder's Circle still show theirs. */
.movement-circle-sample:empty { display: none; }

/* Footer on phones and small tablets (Connor, 9 Nov): one centred stack at the bottom,
   the line, then the links (wrapping), then the notice, so nothing overlaps. */
@media (max-width: 899px) {
  .movement-footer { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 4px; padding-block: 36px 28px; text-align: center; }
  .movement-footer > p, .movement-footer nav, .movement-footer small { grid-column: 1 / -1; justify-self: center; text-align: center; }
  .movement-footer nav { flex-wrap: wrap; justify-content: center; gap: 0 22px; }
}

/* Early access by email or phone (Connor, 9 Nov). Two small choices above the field, and
   the SMS consent under it while phone is chosen (unticked; required to send a number). */
.movement-waitlist-channel { display: inline-flex; gap: 4px; margin-bottom: 8px; padding: 3px; border: 1px solid var(--movement-control-border); border-radius: 999px; }
.movement .movement-waitlist-channel button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--movement-muted); font-size: 13px; transition: background-color 140ms ease, color 140ms ease; }
.movement .movement-waitlist-channel button[aria-pressed="true"] { background: var(--movement-ink); color: var(--movement-paper); }
.movement-waitlist [hidden] { display: none !important; }
.movement-waitlist-consent { display: flex; align-items: flex-start; gap: 9px; max-width: 46ch; margin-top: 10px; color: var(--movement-muted); font-size: 12px; line-height: 1.45; cursor: pointer; }
.movement-waitlist-consent input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--movement-ink); }
@media (max-width: 899px) { .movement-waitlist-consent { margin-inline: auto; text-align: left; } }

/* The caravan sky (Connor, 10 Nov; movement-sky.mjs). Below the hero the mint gives way to a
   grainy desert blue: across the marquee it passes through the bright cerulean of the record
   sleeve Connor pointed to, and the board sits on the darker blue he asked for, deepening toward
   the footer, with a soft haze, a faint warm glow above the board's line and film grain.
   Colour and grain only; nothing from the reference is drawn. Every phase keeps the board's
   warm-white type at 4.5:1 or better on its own background. Phases follow the visitor's hour
   (data-sky-time); the night toggle uses the night sky. */
.movement-caravan { display: none; }
.movement[data-sky="caravan"] {
  position: relative; isolation: isolate;
  --sky-bright: #3aa6de; --sky-top: #12558a; --sky-mid: #13568c; --sky-deep: #114d82; --sky-floor: #0c3a66;
  --sky-haze: #dff4fc; --sky-haze-strength: 26%; --sky-sun: #f7913d; --sky-sun-strength: 40%;
  --sky-grain: .6; --sky-speckle: .45;
  --sky-ink: #f6f2ea; --sky-muted: #d6e7f0; --sky-shadow: #061a33;
}
.movement[data-sky="caravan"][data-sky-time="dawn"] { --sky-bright: #8ccbe6; --sky-top: #1b5890; --sky-mid: #1a5890; --sky-deep: #174c80; --sky-floor: #123f6b; --sky-haze: #fdeadb; --sky-sun: #ffab70; --sky-sun-strength: 40%; }
.movement[data-sky="caravan"][data-sky-time="dusk"] { --sky-bright: #3d8fc4; --sky-top: #16548c; --sky-mid: #164f86; --sky-deep: #113f72; --sky-floor: #0b2548; --sky-haze: #f6c9a4; --sky-sun: #f47a29; --sky-sun-strength: 56%; }
.movement[data-sky="caravan"]:is([data-sky-time="night"], [data-night="true"]) { --sky-bright: #2a5d8a; --sky-top: #173f6b; --sky-mid: #12355f; --sky-deep: #0c2747; --sky-floor: #07162b; --sky-haze: #9cc6df; --sky-haze-strength: 18%; --sky-sun: #f28a3c; --sky-sun-strength: 18%; --sky-grain: .7; --sky-speckle: .3; --sky-muted: #c3d6e2; }
.movement[data-sky="caravan"] .movement-caravan {
  --fade: var(--caravan-fade, 220px);
  display: block; position: absolute; z-index: -1; left: 0; right: 0; top: var(--caravan-top, 100svh); bottom: 0; pointer-events: none;
  background:
    radial-gradient(ellipse clamp(200px, 30vw, 440px) clamp(150px, 13vw, 170px) at 50% var(--caravan-line-y, 48%), color-mix(in oklab, var(--sky-deep) 60%, transparent), transparent 80%),
    radial-gradient(ellipse min(46vw, 640px) min(20vw, 260px) at 50% var(--caravan-glow-y, 36%), color-mix(in oklab, var(--sky-sun) var(--sky-sun-strength), transparent), transparent 70%),
    radial-gradient(ellipse 80% 16% at 50% 84%, color-mix(in oklab, var(--sky-haze) var(--sky-haze-strength), transparent), transparent 72%),
    radial-gradient(ellipse 140% 90% at 50% 40%, transparent 56%, color-mix(in oklab, var(--sky-floor) 45%, transparent) 100%),
    linear-gradient(180deg, color-mix(in oklab, var(--sky-top) 0%, transparent) 0, var(--sky-top) var(--fade), var(--sky-mid) calc(var(--fade) + 40vh), var(--sky-deep) 78%, var(--sky-floor) 100%);
}
/* Film grain: a fine and a coarse layer of grey noise, overlaid so it lightens and darkens. */
.movement[data-sky="caravan"] .movement-caravan::after {
  content: ""; position: absolute; inset: 0; opacity: var(--sky-grain); mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px, 460px 460px;
  -webkit-mask-image: linear-gradient(transparent, #000 var(--fade)); mask-image: linear-gradient(transparent, #000 var(--fade));
}
/* Light speckle: sparse white flecks, strongest in the bright band and the haze low down. */
.movement[data-sky="caravan"] .movement-caravan::before {
  content: ""; position: absolute; inset: 0; opacity: var(--sky-speckle);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 9 -5.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  -webkit-mask-image: linear-gradient(transparent 0, #0003 var(--fade), #0002 70%, #0007 86%, #0003 100%);
  mask-image: linear-gradient(transparent 0, #0003 var(--fade), #0002 70%, #0007 86%, #0003 100%);
}
/* Once the blue is mostly in (movement-sky.mjs sets data-sky-ink), the board's line, its dots
   and the footer turn to warm white; while it is still fading in they keep the page's ink. */
.movement[data-sky="caravan"]:not([data-sky-ink="dark"]) :is(.movement-world, .movement-footer) { --movement-ink: var(--sky-ink); --movement-muted: var(--sky-muted); --movement-control-border: color-mix(in oklab, var(--sky-ink) 55%, transparent); }
.movement[data-sky="caravan"] :is(.movement-world-title, .movement-world-title span, .movement-footer, .movement-footer a) { transition: color 260ms ease; }
@media (prefers-reduced-motion: reduce) { .movement[data-sky="caravan"] :is(.movement-world-title, .movement-world-title span, .movement-footer, .movement-footer a) { transition: none; } }
/* While the sky is still fading in, "coming soon" takes a deeper muted ink so it stays readable on the half-blue. */
.movement[data-sky="caravan"][data-sky-ink="dark"] .movement-world-title .movement-world-soon { color: #233a37; }
.movement[data-sky="caravan"]:not([data-sky-ink="dark"]) .movement-world-title { text-shadow: 0 1px 2px color-mix(in oklab, var(--sky-shadow) 35%, transparent), 0 2px 28px color-mix(in oklab, var(--sky-shadow) 40%, transparent); }
.movement[data-sky="caravan"]:not([data-sky-ink="dark"]) .movement-world-title .movement-world-soon { color: var(--sky-ink); }
.movement[data-sky="caravan"] .movement-world-card img { box-shadow: 0 0 0 1px #ffffff1a, 0 26px 52px -24px color-mix(in oklab, var(--sky-shadow) 85%, transparent); }
.movement[data-sky="caravan"] .movement-world-card figcaption { box-shadow: 0 8px 18px -10px color-mix(in oklab, var(--sky-shadow) 80%, transparent); }
@media (prefers-contrast: more) {
  .movement[data-sky="caravan"] .movement-caravan::after, .movement[data-sky="caravan"] .movement-caravan::before { display: none; }
  .movement[data-sky="caravan"] { --sky-ink: #fff; --sky-muted: #fff; }
}

/* Create your Circle takes the hero's place above the fold (Connor, 8 and 10 Nov). While any
   Create step is open, including "opens soon", it stands where the headline was: the hero copy
   steps aside (movement-create.mjs animates it out and back), Create comes first, and early
   access stays only where it is the way in. The phone holds still throughout. */
.movement:is([data-create-state="signin"], [data-create-state="identity"], [data-create-state="circle"], [data-create-state="soon"]) .movement-hero-copy > :is(.movement-status, .movement-headline, .movement-hero-sub, .movement-hero-explain) { display: none; }
.movement:is([data-create-state="signin"], [data-create-state="identity"], [data-create-state="circle"], [data-create-state="soon"]) .movement-cta { flex-direction: column; align-items: flex-start; gap: 20px; }
.movement:is([data-create-state="signin"], [data-create-state="identity"], [data-create-state="circle"], [data-create-state="soon"]) .movement-cta > .movement-create { order: -1; }
.movement:is([data-create-state="signin"], [data-create-state="identity"], [data-create-state="circle"]) .movement-cta > .movement-signup { display: none; }
.movement .movement-cta .movement-create-title { margin: 0 0 6px; font: 700 clamp(34px, 3.6vw, 56px)/1 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: -.04em; text-wrap: balance; }
.movement .movement-create-soon { display: grid; justify-items: start; gap: 10px; }
.movement .movement-create-soon[hidden] { display: none; }
.movement[data-create-state="soon"] .movement-cta .movement-create-status { max-width: 34ch; min-height: 0; color: var(--movement-ink); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.45; letter-spacing: -.01em; }
@media (max-width: 899px) {
  .movement:is([data-create-state="signin"], [data-create-state="identity"], [data-create-state="circle"], [data-create-state="soon"]) .movement-cta { align-items: center; }
  .movement .movement-create-soon { justify-items: center; }
}
@media (min-width: 900px) {
  .movement:is([data-create-state="soon"], [data-create-state="circle"]) .movement-hero-pin > .movement-hero-grid { align-content: start; align-items: start; padding-top: var(--hero-rest, 16px); }
  .movement:is([data-create-state="soon"], [data-create-state="circle"]) .movement-hero-grid > .movement-phone-column { margin-top: var(--phone-rest, 0px); }
  .movement:is([data-create-state="soon"], [data-create-state="circle"]) .movement-hero-grid > .movement-hero-copy { margin-top: var(--copy-rest, 0px); }
}

/* "support" (Connor, 10 Nov; movement-support.mjs): a quiet chat bubble behind the word, sent in
   after the headline lands and loved by itself a moment later (a heart lands on its corner). The
   bubble and its tail are one solid colour, the tail curving out of a tighter bottom-left corner.
   The word keeps its own size and place. */
.movement .movement-support { position: relative; isolation: isolate; }
.movement-support-bubble { --bubble: #b9fdf5; display: block; position: absolute; z-index: -1; inset: .06em -.14em -.1em -.16em; border-radius: .3em .3em .3em 0; pointer-events: none; font-style: normal;
  background: var(--bubble); box-shadow: 0 .04em .16em -.06em color-mix(in oklab, #00332e 22%, transparent);
  transform-origin: 6% 100%; transition: background-color 420ms ease;
  animation: support-bubble-in 620ms cubic-bezier(.23,1,.32,1) 900ms both, support-bubble-float 7s ease-in-out 1.6s infinite alternate; }
.movement-support-bubble svg, .movement-support-bubble i { position: absolute; display: block; pointer-events: none; font-style: normal; }
.movement-support-tail { left: 0; bottom: -.18em; width: .28em; height: .23em; fill: var(--bubble); transition: fill 420ms ease; overflow: visible; }
.movement-support[data-loved] .movement-support-bubble { --bubble: #f6c3c9; }
.movement-support-heart { right: -.2em; top: -.22em; display: grid !important; place-items: center; width: .34em; height: .34em; border-radius: 50%; background: #fff; box-shadow: 0 .03em .1em -.02em #6b1d2a40; opacity: 0; scale: .4; transition: opacity 180ms ease, scale 420ms cubic-bezier(.34,1.56,.64,1); }
.movement-support-heart svg { position: static; width: 62%; height: 62%; fill: #e5484d; }
.movement-support[data-loved] .movement-support-heart { opacity: 1; scale: 1; }
.movement-support-spark { left: 92%; top: 0; width: .14em; height: .14em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e5484d' d='M12 20.6s-7.4-4.5-9.5-9C.9 8.2 3.1 4.6 6.7 4.6c2.1 0 3.6 1.2 5.3 3.1 1.7-1.9 3.2-3.1 5.3-3.1 3.6 0 5.8 3.6 4.2 7-2.1 4.5-9.5 9-9.5 9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.movement[data-night="true"] .movement-support-bubble { --bubble: #1f4a44; }
.movement[data-night="true"] .movement-support[data-loved] .movement-support-bubble { --bubble: #5a2f3a; }
@keyframes support-bubble-in { from { opacity: 0; scale: .86; filter: blur(4px); } to { opacity: 1; scale: 1; filter: blur(0); } }
@keyframes support-bubble-float { from { translate: 0 0; } to { translate: 0 -.035em; } }
/* The turning last word (Connor, 10 Nov): system, group, friends, calls, each in a brand colour
   that reads on the teal (all at least 5:1); lighter at night. */
.movement .movement-rotate { width: max-content; will-change: transform, opacity, filter; }
.movement .movement-rotate[data-word="group"] { color: #4a2fbf; }
.movement .movement-rotate[data-word="friends"] { color: #b8304f; }
.movement .movement-rotate[data-word="calls"] { color: #1d5f9e; }
.movement[data-night="true"] .movement-rotate[data-word="group"] { color: #c2b2ff; }
.movement[data-night="true"] .movement-rotate[data-word="friends"] { color: #ffa3b5; }
.movement[data-night="true"] .movement-rotate[data-word="calls"] { color: #9fd6ff; }
@media (prefers-reduced-motion: reduce) {
  .movement-support-bubble { animation: none; transition: none; }
  .movement-support-tail { transition: none; }
  .movement-support-heart { transition: none; scale: 1; }
  .movement .movement-rotate { transition: none; }
}

/* The days-sober card (movement-days.mjs; Connor, 10 Nov): the one drawn card, in the style of
   the app's Today card. It counts the last fifty days while the Moon takes each day's real phase.
   Sizes follow the card's width (--days-w), set by the script; a fallback keeps it legible. */
.movement-days { --days-w: 300px; position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; align-items: end; aspect-ratio: 640 / 306; box-sizing: border-box; padding: calc(var(--days-w) * .055) calc(var(--days-w) * .06); border-radius: 14px; overflow: hidden; color: #f4f1ec;
  background: radial-gradient(ellipse 60% 80% at 82% 38%, #5b4a8f55, transparent 70%), linear-gradient(160deg, #3a2a63 0%, #2a1d4b 48%, #1b1233 100%);
  box-shadow: 0 0 0 1px #1111110d, 0 22px 44px -26px #00332e8c; font-family: var(--font-ui, "Aeonik Pro", Arial, sans-serif); }
@media (min-width: 1000px) { .movement-days { border-radius: 1.45cqw; } }
.movement-days-top { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; align-items: center; align-self: start; }
.movement-days-mark { font: 400 calc(var(--days-w) * .062) / 1 "Supermax", sans-serif; letter-spacing: 0; }
.movement-days-date { font-size: calc(var(--days-w) * .036); letter-spacing: .02em; color: #d9d0f0; font-variant-numeric: tabular-nums; }
.movement-days-count { grid-column: 1; grid-row: 2; align-self: end; font-weight: 300; font-size: calc(var(--days-w) * .2); line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.movement-days-label { grid-column: 1; grid-row: 3; margin-top: calc(var(--days-w) * .016); font-size: calc(var(--days-w) * .03); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #e7e1f6; }
.movement-days-moon { grid-column: 2; grid-row: 2 / 4; align-self: center; width: calc(var(--days-w) * .2); height: auto; margin-right: calc(var(--days-w) * .02); filter: drop-shadow(0 0 calc(var(--days-w) * .03) #e8e2ff40); }
.movement-days-moon circle { fill: #2d2550; }
.movement-days-moon path { fill: #efebe3; }

/* The bracelet page (Connor, 12 Nov 2026: "enhance visual design of bracelet page", with his render
   of the six bracelets floating on teal). The page takes that saturated Halo teal; the first view
   floats the six real bracelet renders around the line, each bobbing slowly over a soft shadow that
   breathes with it, and drifting a little with the pointer (movement-bracelets.mjs). Reduce Motion
   keeps them still. The manifesto and the pattern-cycling bracelet follow. */
/* The bracelet page's paper: a pale aqua (Connor, 12 Nov: "or just this color"), was the electric green #1ff7dc. */
html:has(.movement-about:not([data-night="true"])), body:has(> .movement-about:not([data-night="true"])) { background: #d9fefa !important; }
.movement-about:not([data-night="true"]) { --movement-paper: #d9fefa; --movement-muted: #24504a; --movement-control-border: #24504a66; --movement-accent: #111; }
.movement-about:not([data-night="true"]) .movement-night-toggle { background: #ffffff33; }
.bracelet-hero { --bracelet-glow: #ffffff; --bracelet-edge: #b6efe8; --bracelet-shade: #00594d; position: relative; isolation: isolate; container-type: inline-size; width: 100%; box-sizing: border-box; }
/* The render's light: brighter behind the line, a little deeper at the sides; it fades out at the
   bottom so the section runs straight into the page with no seam. */
.bracelet-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 72% 62% at 50% 46%, var(--bracelet-glow) 0%, transparent 72%), radial-gradient(ellipse 120% 90% at 50% 50%, transparent 60%, var(--bracelet-edge) 100%);
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.movement[data-night="true"] .bracelet-hero { --bracelet-glow: #0e3b38; --bracelet-edge: #040b0a; --bracelet-shade: #000; }
.bracelet-hero-copy { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; color: var(--movement-ink); }
.movement .bracelet-hero-copy .movement-manifesto-eyebrow { margin: 0 0 .6em; font-size: clamp(15px, 1.3cqw, 19px); color: var(--movement-muted); }
.movement .bracelet-hero-copy h1 { margin: 0; font: 700 clamp(46px, 6.6cqw, 104px)/.9 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: -.045em; text-wrap: balance; rotate: -3deg; }
.movement .bracelet-hero-line { margin: .9em 0 0; font: 400 clamp(17px, 1.45cqw, 21px)/1.35 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: -.005em; }
.bracelet-stage { position: relative; margin: 0; }
.bracelet-float { position: relative; display: block; rotate: var(--r, 0deg); transform: translate3d(calc(var(--mx, 0) * var(--depth, 1) * 14px), calc(var(--my, 0) * var(--depth, 1) * 10px), 0);
  animation: bracelet-arrive 900ms cubic-bezier(.23,1,.32,1) calc(120ms + var(--i) * 80ms) both; transition: rotate 380ms cubic-bezier(.23,1,.32,1), scale 380ms cubic-bezier(.23,1,.32,1); }
.bracelet-float img { position: relative; z-index: 1; display: block; width: 100%; height: auto; -webkit-user-select: none; user-select: none;
  filter: drop-shadow(0 .6cqw .8cqw color-mix(in oklab, var(--bracelet-shade) 22%, transparent));
  animation: bracelet-bob calc(5.4s + var(--i) * .55s) ease-in-out calc(var(--i) * -1.35s) infinite; }
/* The shadow on the "floor" below each bracelet: smaller and fainter while the bracelet rises. */
.bracelet-shadow { position: absolute; z-index: 0; left: 14%; right: 14%; bottom: -16%; height: 15%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--bracelet-shade) 34%, transparent), transparent); filter: blur(6px);
  animation: bracelet-shadow calc(5.4s + var(--i) * .55s) ease-in-out calc(var(--i) * -1.35s) infinite; }
.bracelet-float[data-band="blue"] { --r: -7deg; --depth: 1.2; }
.bracelet-float[data-band="forest"] { --r: 3deg; --depth: .7; }
.bracelet-float[data-band="checker"] { --r: 6deg; --depth: 1; }
.bracelet-float[data-band="violet"] { --r: 5deg; --depth: .9; }
.bracelet-float[data-band="spectrum"] { --r: -3deg; --depth: 1.4; }
.bracelet-float[data-band="night"] { --r: -5deg; --depth: .8; }
@media (hover: hover) and (pointer: fine) { .bracelet-float:hover { z-index: 3; rotate: calc(var(--r) * .3); scale: 1.04; } }
@keyframes bracelet-arrive { from { opacity: 0; translate: 0 3cqw; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes bracelet-bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -1.1cqw; rotate: .9deg; } }
@keyframes bracelet-shadow { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .84; opacity: .62; } }

/* Desktop: the six around the line, as in the render. The stage keeps one shape at every width. */
@media (min-width: 1000px) {
  .bracelet-hero { display: grid; padding: 72px var(--movement-page-inset) 24px; }
  .bracelet-hero > * { grid-area: 1 / 1; }
  .bracelet-stage { justify-self: center; width: min(100%, 1400px); aspect-ratio: 1400 / 860; }
  .bracelet-hero-copy { align-self: center; justify-self: center; translate: 0 -2%; }
  .bracelet-float { position: absolute; left: var(--x); top: var(--y); width: var(--w); }
  .bracelet-float[data-band="blue"] { --x: 2%; --y: 8%; --w: 24%; }
  .bracelet-float[data-band="forest"] { --x: 38.5%; --y: 1%; --w: 22%; }
  .bracelet-float[data-band="checker"] { --x: 73.5%; --y: 11%; --w: 24%; }
  .bracelet-float[data-band="violet"] { --x: 4%; --y: 63%; --w: 23%; }
  .bracelet-float[data-band="spectrum"] { --x: 38%; --y: 70%; --w: 24.5%; }
  .bracelet-float[data-band="night"] { --x: 72.5%; --y: 61%; --w: 24%; }
}
/* Tablet and phone: the line first, then the six in a loose grid that still floats. */
@media (max-width: 999px) {
  .bracelet-hero { padding: clamp(96px, 16vw, 128px) var(--movement-page-inset) clamp(40px, 8vw, 64px); }
  .bracelet-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 4vw, 40px) clamp(14px, 3vw, 28px); margin-top: clamp(36px, 7vw, 56px); }
  .bracelet-float:nth-child(3n+2) { margin-top: 5cqw; }
}
/* iPhone (Connor, 12 Nov: "enhance responsive design on iPhone"): the first view fills the screen.
   The line sits high and large; the six gather below it in a loose, overlapping cluster like the
   render, larger than a grid allows, each at its own angle, the lower ones in front. */
@media (max-width: 599px) {
  .bracelet-hero { display: grid; grid-template-rows: auto 1fr; min-height: 100svh; padding: calc(max(16px, env(safe-area-inset-top)) + 76px) max(var(--movement-page-inset), env(safe-area-inset-right)) 28px max(var(--movement-page-inset), env(safe-area-inset-left)); }
  .movement .bracelet-hero-copy h1 { font-size: clamp(44px, 14vw, 64px); line-height: .88; }
  .movement .bracelet-hero-copy .movement-manifesto-eyebrow { font-size: 15px; }
  .movement .bracelet-hero-line { margin-top: 1.1em; font-size: clamp(16px, 4.4vw, 19px); }
  .bracelet-stage { display: block; position: relative; align-self: center; width: 100%; max-width: 440px; justify-self: center; aspect-ratio: 390 / 520; margin: clamp(20px, 5svh, 40px) 0 0; }
  .bracelet-float { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0 !important; }
  .bracelet-float img { animation-duration: calc(4.8s + var(--i) * .5s); }
  .bracelet-float[data-band="blue"] { --x: -2%; --y: 0%; --w: 58%; --r: -9deg; z-index: 1; }
  .bracelet-float[data-band="forest"] { --x: 45%; --y: 7%; --w: 55%; --r: 6deg; z-index: 2; }
  .bracelet-float[data-band="checker"] { --x: 0%; --y: 34%; --w: 55%; --r: 7deg; z-index: 3; }
  .bracelet-float[data-band="violet"] { --x: 44%; --y: 40%; --w: 56%; --r: -5deg; z-index: 4; }
  .bracelet-float[data-band="spectrum"] { --x: -1%; --y: 68%; --w: 57%; --r: -4deg; z-index: 5; }
  .bracelet-float[data-band="night"] { --x: 45%; --y: 72%; --w: 54%; --r: 6deg; z-index: 6; }
  .bracelet-shadow { filter: blur(5px); }
}
/* Short phones (iPhone SE): a little tighter so the cluster still fits the first screen. */
@media (max-width: 599px) and (max-height: 700px) {
  .bracelet-hero { padding-top: calc(max(16px, env(safe-area-inset-top)) + 64px); }
  .movement .bracelet-hero-copy h1 { font-size: clamp(40px, 12.5vw, 56px); }
  .movement .bracelet-hero-line { font-size: 15px; }
  .bracelet-stage { max-width: 318px; margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .bracelet-float, .bracelet-float img, .bracelet-shadow { animation: none; transition: none; }
  .bracelet-float { transform: none; }
}
/* After the first view, the manifesto no longer needs to fill a screen of its own. */
.movement-about .movement-manifesto { min-height: 0; padding-block: clamp(32px, 5vw, 72px) clamp(32px, 5vw, 64px); }
/* The bracelet page's call to action is a real button-sized pill, like the homepage's
   "Find your Circle"; full width on a phone so a thumb finds it. */
.movement-about .movement-manifesto-invitation { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 12px; padding: 0 30px; border-radius: 999px; background: var(--movement-ink); color: var(--movement-paper); font: 500 15px/1 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: .01em; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 140ms cubic-bezier(.23,1,.32,1), opacity 160ms ease; }
.movement-about .movement-manifesto-invitation:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .movement-about .movement-manifesto-invitation:hover { opacity: .88; } }
@media (max-width: 599px) { .movement-about .movement-manifesto-invitation { align-self: stretch; justify-self: stretch; width: 100%; box-sizing: border-box; } }
@media (prefers-reduced-motion: reduce) { .movement-about .movement-manifesto-invitation { transition: none; } .movement-about .movement-manifesto-invitation:active { transform: none; } }

/* The six as tiles (Connor, 12 Nov 2026: "a grid with rectangular bracelet items, each with a pattern
   behind the bracelet"). Each tile is its bracelet's own inner pattern, drawn flat and woven
   (assets/movement/bracelets/patterns), with the real render floating over it on a soft pool of light. */
.bracelet-collection { width: calc(100% - 2 * var(--movement-page-inset)); max-width: 1400px; margin: 0 auto; padding-block: clamp(24px, 5vw, 72px) clamp(24px, 4vw, 56px); }
.bracelet-collection-head { display: grid; gap: 8px; margin-bottom: clamp(20px, 3vw, 36px); }
.movement .bracelet-collection-head h2 { margin: 0; font: 700 clamp(34px, 4.2vw, 60px)/.95 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: -.04em; color: var(--movement-ink); }
.movement .bracelet-collection-head p { margin: 0; max-width: 34ch; font: 400 clamp(16px, 1.3vw, 19px)/1.4 var(--font-ui, "Aeonik Pro", Arial, sans-serif); color: var(--movement-ink); }
.bracelet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; }
.bracelet-tile figure { position: relative; isolation: isolate; display: grid; place-items: center; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: clamp(18px, 2vw, 28px);
  background: #0e2a26; box-shadow: 0 0 0 1px #00000014, 0 22px 44px -28px #003a3399; }
/* A soft pool of light behind the bracelet, and a gentle darkening toward the edges, so the teal band reads on any pattern. */
.bracelet-tile figure::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 58% 52% at 50% 52%, #ffffff47, transparent 72%), radial-gradient(ellipse 110% 100% at 50% 50%, transparent 55%, #0000004d 100%); }
.bracelet-tile-bracelet { position: relative; z-index: 1; width: 66%; translate: 0 -3%; }
/* The bracelet bobs as one piece, so while a tile turns over to another colourway its two images,
   stacked, stay in step; the shadow is on the piece, not on each image. */
.bracelet-tile-art { position: relative; z-index: 1; display: block; filter: drop-shadow(0 10px 14px #0000004d);
  animation: bracelet-bob calc(5.6s + var(--i) * .5s) ease-in-out calc(var(--i) * -1.1s) infinite; }
.bracelet-tile-art img { display: block; width: 100%; height: auto; -webkit-user-select: none; user-select: none; }
.bracelet-tile-art img ~ img { position: absolute; inset: 0; }
/* The turntable on hover (movement-bracelets.mjs): frames from one sheet over the still, which is frame 0. */
.bracelet-tile-spin { position: absolute; inset: 0; background-repeat: no-repeat; pointer-events: none; visibility: hidden; }
.bracelet-tile[data-spinning] .bracelet-tile-spin { visibility: visible; }
.bracelet-tile[data-spinning] .bracelet-tile-art img { visibility: hidden; }
/* The glow edition (Connor, 12 Nov 2026: "add glow in dark bracelet"): its tile goes slowly from day to
   dark and back: the light goes down over its pattern, the bracelet's wordmark glows (its night render
   cross-fades in). Held in daylight under Reduce Motion. */
.bracelet-edition[data-edition="glow"] .bracelet-tile-art .bracelet-glow-night { opacity: 0; animation: bracelet-glow 10s ease-in-out infinite; }
.bracelet-edition[data-edition="glow"] .bracelet-tile-ground::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #04100c; opacity: 0; animation: bracelet-glow-ground 10s ease-in-out infinite; }
@keyframes bracelet-glow { 0%, 38% { opacity: 0; } 52%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bracelet-glow-ground { 0%, 36% { opacity: 0; } 50%, 86% { opacity: .9; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bracelet-edition[data-edition="glow"] :is(.bracelet-glow-night, .bracelet-tile-ground::after) { animation: none; } }
/* The next colourway's pattern, fading in over the current one (movement-bracelets.mjs). */
.bracelet-tile-next { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; pointer-events: none; }
.bracelet-tile figcaption { transition: opacity 180ms ease; }
.bracelet-tile[data-turning] figcaption { opacity: 0; }
.bracelet-tile .bracelet-shadow { bottom: -12%; background: radial-gradient(closest-side, #0000006b, transparent); animation-duration: calc(5.6s + var(--i) * .5s); animation-delay: calc(var(--i) * -1.1s); }
.bracelet-tile figcaption { position: absolute; z-index: 2; left: 14px; bottom: 14px; padding: 7px 13px 8px; border-radius: 999px; background: #ffffffe6; color: #111; font: 500 14px/1 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: .01em; box-shadow: 0 6px 14px -8px #0006; }
.bracelet-tile { transition: translate 320ms cubic-bezier(.23,1,.32,1); }
@media (hover: hover) and (pointer: fine) { .bracelet-tile:hover { translate: 0 -4px; } }
@media (max-width: 999px) { .bracelet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* iPhone: the line, then straight into the six tiles (the floating cluster is the desktop view). */
@media (max-width: 599px) {
  .bracelet-hero { min-height: 0; grid-template-rows: auto; padding-bottom: 8px; }
  .bracelet-stage { display: none; }
  .bracelet-collection { width: calc(100% - 2 * max(16px, env(safe-area-inset-left))); }
  .bracelet-collection-head { justify-items: start; }
  .bracelet-grid { gap: 10px; }
  .bracelet-tile figure { aspect-ratio: 4 / 5; border-radius: 20px; }
  .bracelet-tile-bracelet { width: 86%; }
  .bracelet-tile figcaption { left: 10px; bottom: 10px; padding: 6px 11px 7px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .bracelet-tile-art, .bracelet-tile .bracelet-shadow { animation: none; } .bracelet-tile { transition: none; } }

/* Reserve (Connor, 12 Nov 2026): each tile's pill says "coming soon" when tapped; reserving a
   pattern (and the Halo profile in it) isn't open yet, so nothing is taken or charged. */
.movement .bracelet-reserve { position: absolute; z-index: 2; right: 14px; bottom: 14px; display: inline-grid; place-items: center; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: #111; color: #fff; font: 500 14px/1 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: .01em; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 6px 14px -8px #0008; transition: transform 140ms cubic-bezier(.23,1,.32,1), background-color 200ms ease; }
.bracelet-reserve::before { content: ""; position: absolute; inset: -6px; }
.movement .bracelet-reserve:active { transform: scale(.95); }
.movement .bracelet-reserve[data-state="soon"] { background: #fff; color: #111; }
.bracelet-reserve [data-reserve-label] { display: block; white-space: nowrap; }
@media (max-width: 599px) { .movement .bracelet-reserve { left: 8px; right: 8px; bottom: 8px; min-height: 38px; padding: 0 10px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .movement .bracelet-reserve { transition: none; } .movement .bracelet-reserve:active { transform: none; } }
/* With a reserve pill on each tile, the pattern's name moves to the top-left corner. */
.bracelet-tile figcaption { top: 14px; bottom: auto; }
@media (max-width: 599px) { .bracelet-tile figcaption { top: 10px; bottom: auto; } .bracelet-tile-bracelet { translate: 0 -6%; } }

/* The tile's pattern sits on its own layer, so on hover it can drift in a touch, very slowly
   (Connor, 12 Nov: "a very subtle motion animation on hover ... in the background pattern"). */
.bracelet-tile-ground { position: absolute; inset: 0; z-index: -2; background: var(--pattern) center / cover no-repeat; transition: transform 1.8s cubic-bezier(.23,1,.32,1); }
@media (hover: hover) and (pointer: fine) { .bracelet-tile:hover .bracelet-tile-ground { transform: scale(1.06) translate3d(-1.2%, -.9%, 0); } }
/* The whole tile opens the closer look; the reserve pill keeps working on top of it. */
.bracelet-tile-open { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.bracelet-tile-open:focus-visible { outline: 3px solid #111; outline-offset: -6px; border-radius: inherit; }
.bracelet-tile-bracelet { pointer-events: none; }
.movement .bracelet-tile .bracelet-reserve { z-index: 3; }
.bracelet-tile figcaption { z-index: 2; pointer-events: none; }

/* "start together." (Connor, 12 Nov): the word is filled with the darker woven patterns, for
   everyone together: one pattern at a time, each sliding off to the right as the next comes in from
   the left ("rotate all horizontally one after another"); the strip and its steps are drawn and run
   by movement-bracelets.mjs. A dark ink without background-clip; held still under Reduce Motion. */
.movement .bracelet-together { color: #0f2a57; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .movement .bracelet-together { display: inline-block; padding: 0 .03em .16em; margin: 0 -.03em -.16em;
    background: var(--together, url(/halo-site/assets/movement/bracelets/schemes/night-1.svg)) center / cover no-repeat;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    filter: brightness(.58) saturate(1.2); }   /* deepened, so even a pattern's light bands read dark on the pale page */
  .movement .bracelet-together[data-flow] { background: var(--together) 0 0 / calc(var(--together-count) * var(--together-w, 4em)) 100% repeat-x;
    -webkit-background-clip: text; background-clip: text; }
}

/* The closer look: the tile opens from where it is into a large card over a dimmed page. The
   bracelet can be dragged round (its turntable); reserve still says coming soon; the close
   button, Escape or a tap outside put it back. */
.bracelet-lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.bracelet-lightbox[open] { display: grid; place-items: center; }
.bracelet-lightbox::backdrop { background: #04201dc2; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bracelet-lightbox[data-state="opening"]::backdrop { animation: bracelet-backdrop-in 320ms ease-out both; }
.bracelet-lightbox[data-state="closing"]::backdrop { animation: bracelet-backdrop-in 260ms ease-in reverse both; }
@keyframes bracelet-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.bracelet-lightbox-card { position: relative; isolation: isolate; width: min(calc(100vw - 48px), 1080px, calc((100dvh - 48px) * 4 / 3)); aspect-ratio: 4 / 3; overflow: hidden; border-radius: clamp(20px, 2.4vw, 32px); background: #0e2a26; box-shadow: 0 40px 100px -30px #000c; transform-origin: 0 0; }
.bracelet-lightbox-card:focus { outline: none; }            /* focus starts on the card itself: no ring on open */
.bracelet-lightbox-ground { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; }
.bracelet-lightbox-ground::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 58% 52% at 50% 52%, #ffffff40, transparent 72%), radial-gradient(ellipse 110% 100% at 50% 50%, transparent 55%, #00000059 100%); }
.bracelet-lightbox-stage { position: absolute; left: 50%; top: 50%; width: 74%; translate: -50% -53%; -webkit-user-select: none; user-select: none; filter: drop-shadow(0 18px 24px #00000059); }
.bracelet-lightbox-still { display: block; width: 100%; height: auto; }
.bracelet-lightbox-stage { cursor: grab; touch-action: pan-y; }
.bracelet-lightbox[data-dragging] .bracelet-lightbox-stage { cursor: grabbing; }
.bracelet-lightbox-stage:focus-visible { outline: 2px solid #fff; outline-offset: 8px; border-radius: 24px; }
/* "drag to turn", under the bracelet, until it's first turned */
.bracelet-lightbox-hint { position: absolute; left: 50%; bottom: -9%; translate: -50% 0; margin: 0; padding: 7px 13px 8px; border-radius: 999px;
  background: #ffffffd9; color: #111; font: 500 13px/1 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: .01em; white-space: nowrap;
  pointer-events: none; opacity: 0; animation: bracelet-hint-in 400ms var(--movement-ease-out) 700ms forwards; transition: opacity 200ms ease; }
.bracelet-lightbox-hint[data-gone] { animation: none; opacity: 0; }
@keyframes bracelet-hint-in { from { opacity: 0; translate: -50% 6px; } to { opacity: 1; translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .bracelet-lightbox-hint { animation-duration: 1ms; } }
.bracelet-lightbox-canvas { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.bracelet-lightbox[data-turning] .bracelet-lightbox-canvas { visibility: visible; }
.bracelet-lightbox[data-turning] .bracelet-lightbox-still { visibility: hidden; }
.bracelet-lightbox-name { position: absolute; z-index: 2; top: 18px; left: 18px; margin: 0; padding: 8px 14px 9px; border-radius: 999px; background: #ffffffe6; color: #111; font: 500 15px/1 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: .01em; box-shadow: 0 6px 14px -8px #0006; }
.movement .bracelet-lightbox .bracelet-reserve { right: 18px; bottom: 18px; min-height: 44px; padding: 0 20px; font-size: 15px; }
.bracelet-lightbox-close { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #ffffffe6; color: #111; cursor: pointer; box-shadow: 0 6px 14px -8px #0006; transition: transform 160ms ease-out; }
.bracelet-lightbox-close span { position: relative; width: 16px; height: 16px; }
.bracelet-lightbox-close span::before, .bracelet-lightbox-close span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px; background: currentColor; rotate: 45deg; }
.bracelet-lightbox-close span::after { rotate: -45deg; }
.bracelet-lightbox-close:active { transform: scale(.94); }
.bracelet-lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 599px) {
  .bracelet-lightbox-card { width: calc(100vw - 24px); aspect-ratio: 4 / 5; border-radius: 22px; }
  .bracelet-lightbox-stage { width: 92%; top: 40.5%; translate: -50% -50%; }
  .movement .bracelet-lightbox .bracelet-reserve { left: 12px; right: 12px; bottom: 12px; }
  .bracelet-lightbox-name { top: 14px; left: 14px; }
}
@media (prefers-reduced-motion: reduce) { .bracelet-tile-ground { transition: none; } .bracelet-tile:hover .bracelet-tile-ground { transform: none; } .bracelet-lightbox::backdrop { animation: none !important; } }

/* Special editions (Connor, 12 Nov 2026: "two special editions, white and black (replacing green),
   numbered out of 50"), and the glow edition (12 Nov: "add glow in dark bracelet"): the same tiles,
   three to a row under the six on a wide screen; two to a row on a narrower one. */
.bracelet-editions-head { margin-top: clamp(40px, 6vw, 88px); }
.movement .bracelet-editions-head h3 { margin: 0; font: 700 clamp(28px, 3vw, 44px)/.95 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: -.035em; color: var(--movement-ink); }
.bracelet-editions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bracelet-tile-count { margin-left: .35em; opacity: .55; font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) { .bracelet-editions:has(.bracelet-edition[data-edition="glow"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bracelet-editions:not(:has(.bracelet-edition[data-edition="glow"])) .bracelet-tile figure { aspect-ratio: 16 / 9; } .bracelet-editions:not(:has(.bracelet-edition[data-edition="glow"])) .bracelet-tile-bracelet { width: 52%; } }

/* The closer look's clasp view and milestone stones (Connor, 12 Nov 2026: "Embossed Supermax O +
   Milestone Stone Visualizer"). "bracelet" shows the turntable; "clasp" the clasp straight on, the
   raised o in gunmetal with the chosen stone laid in its centre. A preview only: nothing here is
   added to a reservation. */
.bracelet-lightbox-controls { position: absolute; z-index: 2; top: 18px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 8px; }
.bracelet-lightbox-views { display: flex; padding: 3px; border-radius: 999px; background: #ffffffe6; box-shadow: 0 6px 14px -8px #0006; }
/* The band (Connor, 12 Nov: "toggle between pure white band, black band and our green band"). */
.bracelet-lightbox-bands { display: flex; gap: 6px; padding: 5px 7px; border-radius: 999px; background: #ffffffe6; box-shadow: 0 6px 14px -8px #0006; }
.bracelet-lightbox-bands button { position: relative; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px #0000002e; transition: transform 140ms cubic-bezier(.23,1,.32,1); }
.bracelet-lightbox-bands button::before { content: ""; position: absolute; inset: -5px; }
.bracelet-lightbox-bands [data-band-colour="green"] { background: #1fd9bb; }
.bracelet-lightbox-bands [data-band-colour="white"] { background: #f4f5f1; }
.bracelet-lightbox-bands [data-band-colour="black"] { background: #17191a; }
.bracelet-lightbox-bands button[aria-checked="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; }
.bracelet-lightbox-bands button:disabled { opacity: .3; cursor: not-allowed; }
.bracelet-lightbox-bands button:not(:disabled):active { transform: scale(.92); }
.bracelet-lightbox-bands button:focus-visible { outline: 2px solid #111; outline-offset: 5px; }
.bracelet-stones-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bracelet-stones-cut { display: flex; padding: 2px; border-radius: 999px; background: #ffffff2b; }
.bracelet-stones-cut button { min-height: 24px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: 500 12px/1 var(--font-ui, "Aeonik Pro", Arial, sans-serif); cursor: pointer; }
.bracelet-stones-cut button[aria-pressed="true"] { background: #fff; color: #111; }
.bracelet-stones-cut button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bracelet-lightbox-views button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #111; font: 500 14px/1 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: .01em; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, transform 140ms cubic-bezier(.23,1,.32,1); }
.bracelet-lightbox-views button[aria-pressed="true"] { background: #111; color: #fff; }
.bracelet-lightbox-views button:active { transform: scale(.96); }
.bracelet-lightbox-views button:focus-visible { outline: 3px solid #111; outline-offset: 1px; }
.bracelet-lightbox-clasp { position: absolute; left: 50%; top: 50%; width: 80%; aspect-ratio: 3 / 2; translate: -50% -52%; filter: drop-shadow(0 18px 24px #00000059);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.bracelet-lightbox-clasp[hidden] { display: none; }
.bracelet-lightbox-clasp img { position: absolute; display: block; -webkit-user-select: none; user-select: none; }
.bracelet-lightbox-clasp-base { inset: 0; width: 100%; height: 100%; }
.bracelet-lightbox-clasp-stone { left: var(--stone-x); top: var(--stone-y); width: var(--stone-w); height: auto; }
.bracelet-lightbox[data-view="clasp"] .bracelet-lightbox-stage,
.bracelet-lightbox[data-view="clasp"][data-turning] .bracelet-lightbox-canvas { visibility: hidden; }
.bracelet-stones { position: absolute; z-index: 2; left: 18px; bottom: 18px; display: grid; gap: 8px; max-width: calc(100% - 200px); padding: 12px 14px 11px; border-radius: 20px; background: #0000005c; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.movement .bracelet-stones p { margin: 0; font: 500 13px/1.2 var(--font-ui, "Aeonik Pro", Arial, sans-serif); letter-spacing: .01em; }
.movement .bracelet-stones .bracelet-stones-note { font-weight: 400; font-size: 12px; opacity: .78; }
.bracelet-stones-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bracelet-stones-row button { position: relative; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #2a2c2f center / cover no-repeat; cursor: pointer; box-shadow: inset 0 0 0 1px #ffffff3d; transition: transform 140ms cubic-bezier(.23,1,.32,1); -webkit-tap-highlight-color: transparent; }
.bracelet-stones-row button::before { content: ""; position: absolute; inset: -4px; }       /* a 38px target */
.bracelet-stones-row button[aria-checked="true"] { box-shadow: 0 0 0 2px #0e2a26, 0 0 0 4px #fff; }
.bracelet-stones-row button:active { transform: scale(.92); }
.bracelet-stones-row button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
@media (max-width: 599px) {
  .bracelet-lightbox-card { aspect-ratio: 9 / 14; max-height: calc(100dvh - 24px); }
  .bracelet-lightbox-controls { top: 66px; }
  .bracelet-lightbox-clasp { width: 118%; translate: -50% -60%; }
  .bracelet-stones { left: 12px; right: 12px; bottom: 64px; max-width: none; padding: 10px 12px; }
  .bracelet-stones-row { display: grid; grid-template-columns: repeat(7, 30px); justify-content: space-between; gap: 6px 0; }
}
@media (prefers-reduced-motion: reduce) { .bracelet-lightbox-views button, .bracelet-stones-row button, .bracelet-lightbox-bands button { transition: none; } .bracelet-lightbox-views button:active, .bracelet-stones-row button:active, .bracelet-lightbox-bands button:active { transform: none; } }