/* Components and layout. Uses tokens.css variables only; no raw colours here. */

*, *::before, *::after { box-sizing: border-box; }
/* Anything marked hidden stays hidden, even when a component gives it a display of its own (buttons, pills) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* no blue square on tap, no double-tap zoom */
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--space-3); letter-spacing: var(--tracking-tight); font-weight: 700; }
h1 { font-size: var(--text-xl); font-weight: 800; }
p { margin: 0 0 var(--space-3); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); }
.narrow { max-width: 760px; }
/* Top lists: one ranked face per row */
/* As many columns as fit, so a card is never much wider than its content; ranks read left to right */
.rank-list { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--space-3) var(--space-4); }
.rank-card {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.rank-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.rank-card__rank { flex: none; width: 2.5ch; text-align: center; font-size: 1.25rem; font-weight: 800; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rank-card .face-tile { flex: none; width: 64px; }
/* Top 3 podium: 2 - 1 - 3, each on a step of its own height */
.podium { list-style: none; max-width: 900px; margin-inline: auto !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--space-3); padding: var(--space-8) 0 0; margin: 0 0 var(--space-8); }
.podium__spot { --step: 64px; --tint: var(--color-primary); position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; text-align: center; }
.podium__spot--1 { order: 2; --step: 104px; --tint: #F79009; }
.podium__spot--2 { order: 1; --step: 76px; --tint: #8E9BB0; }
.podium__spot--3 { order: 3; --step: 52px; --tint: #C07A4A; }
.podium__face { position: relative; display: grid; justify-items: center; gap: var(--space-1); width: 100%; min-width: 0; }
.podium__tile { position: relative; display: block; width: min(100%, 132px); }
.podium__spot--1 .podium__tile { width: min(100%, 176px); }
.podium__tile .face-tile { box-shadow: 0 0 0 3px var(--tint), 0 18px 34px -16px var(--tint); transition: transform 0.4s var(--ease); }
.podium__face:hover .face-tile { transform: translateY(-6px) rotate(-2deg); }
/* Sits above the tile (in the flow), never on top of it */
.podium__crown { display: block; width: 36px; height: 36px; margin: 0 auto 2px; color: #FDB022; filter: drop-shadow(0 4px 6px rgb(247 144 9 / 0.45)); animation: crown 3s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes crown { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(-2px); } }
.podium__name { max-width: 100%; margin-top: var(--space-1); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__spot--1 .podium__name { font-size: var(--text-lg); }
.podium__stats { justify-content: center; font-size: var(--text-xs); gap: 2px var(--space-2); }
.podium__designer { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px var(--space-3) 3px 3px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-xs); font-weight: 600; transition: border-color 0.25s; }
.podium__designer:hover { border-color: var(--tint); }
.podium__designer img { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #000; }
.podium__designer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__step {
  display: grid; place-items: start center; width: 100%; height: var(--step); margin-top: var(--space-2); padding-top: var(--space-2);
  border-radius: var(--radius-banner) var(--radius-banner) 6px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 32%, var(--color-surface)), color-mix(in srgb, var(--tint) 8%, var(--color-surface)));
  border: 1px solid color-mix(in srgb, var(--tint) 40%, var(--color-border));
}
.podium__step .rank-card__rank { width: auto; font-size: 1.75rem; color: var(--tint); }
@media (max-width: 479px) { .podium__stats > span:not(:last-child) { display: none; } }
.rank-card__body { min-width: 0; display: grid; gap: var(--space-1); }
.rank-card__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-card__stats { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Help Center: the hub at /contact, topics at /help/<slug>. Each topic has
   its own quiet colour (--c, from helpcenter.TOPICS). */
.help-icon { display: inline-grid; place-items: center; }
.help-icon svg, .help-hero__icon svg, .help-topic__icon svg, .help-page__icon svg, .help-contact__icon svg { width: 24px; height: 24px; }
.help-hub { padding-bottom: var(--space-12); }
.help-hero { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-12) 0 var(--space-8); text-align: center; }
.help-hero h1 { margin: var(--space-2) 0 0; font-size: var(--text-xl); }
.help-hero p { margin: 0; }
.help-hero__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--color-inverse); color: var(--color-on-inverse); }
.help-hero__icon svg { width: 30px; height: 30px; }
.help-topics-grid { list-style: none; display: grid; gap: var(--space-3); margin: 0 0 var(--space-12); padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.help-topic {
  position: relative; display: grid; gap: var(--space-1); height: 100%; padding: var(--space-6); border-radius: var(--radius-card);
  border: 1px solid var(--color-border); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 8%, var(--color-surface)), var(--color-surface) 55%);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s var(--ease);
}
.help-topic:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, var(--color-border)); box-shadow: 0 18px 32px -22px var(--c); }
.help-topic__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-3); border-radius: 14px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.help-topic__title { font-weight: 700; font-size: var(--text-lg); }
.help-topic__summary { font-size: var(--text-sm); color: var(--color-text-muted); }
.help-topic__go { position: absolute; top: var(--space-6); right: var(--space-6); color: var(--color-text-muted); transition: transform 0.25s var(--ease), color 0.25s; }
.help-topic:hover .help-topic__go { transform: translateX(3px); color: var(--c); }
/* Contact: one card */
.help-contact { display: grid; gap: var(--space-6); padding: var(--space-8); margin-bottom: var(--space-6); border-radius: var(--radius-featured); border: 1px solid var(--color-border); background: radial-gradient(60% 80% at 0% 0%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 70%), var(--color-surface); }
.help-contact__main { display: grid; gap: var(--space-2); justify-items: start; }
.help-contact__main h2 { margin: var(--space-2) 0 0; }
.help-contact__main p { margin: 0 0 var(--space-2); }
.help-contact__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--color-primary-soft); color: var(--color-primary-strong); }
.help-contact__times { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; }
.help-contact__times li { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px var(--space-3); border-radius: var(--radius-pill); background: var(--color-floated); font-size: var(--text-sm); color: var(--color-text-muted); }
.help-contact__times strong { color: var(--color-text); }
.help-contact__tips h3 { margin: 0 0 var(--space-3); font-size: var(--text-md); }
.help-checklist { list-style: none; display: grid; gap: var(--space-2); margin: 0; padding: 0; }
.help-checklist li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
.help-checklist li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 6px; background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.help-more { display: grid; gap: var(--space-3); }
.help-more__card { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-radius: var(--radius-card); border: 1px dashed var(--color-border-strong); transition: border-color 0.25s; }
a.help-more__card:hover { border-color: var(--color-text-muted); }
.help-more__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* A topic page: side menu + article */
.help-page { display: grid; gap: var(--space-6); padding-top: var(--space-6); padding-bottom: var(--space-12); }
.help-side { display: flex; flex-wrap: wrap; gap: var(--space-2); order: 2; }
.help-side__home { flex-basis: 100%; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.help-side__item { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.help-side__item:hover { color: var(--color-text); }
.help-side__item.is-current { color: var(--color-text); font-weight: 600; border-color: color-mix(in srgb, var(--c) 50%, var(--color-border)); background: color-mix(in srgb, var(--c) 10%, transparent); }
.help-side__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.help-main { min-width: 0; }
.help-page__head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.help-page__head h1 { margin: 0; }
.help-page__head p { margin: var(--space-1) 0 0; }
.help-page__icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.help-body { display: grid; gap: var(--space-4); }
.help-body .card { padding: var(--space-6); }
.help h2, .help h3 { display: flex; align-items: center; gap: var(--space-2); }
.help-body h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.help-body h3 { font-size: 1rem; margin: var(--space-4) 0 var(--space-2); }
.help-body p, .help-body ul { margin: 0 0 var(--space-3); line-height: 1.6; }
.help-body ul { padding-left: var(--space-6); }
.help-body > :last-child, .help-body .card > :last-child { margin-bottom: 0; }
.help-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-radius: var(--radius-card); background: var(--color-floated); font-weight: 600; }
/* Tinted boxes: tip (amber), info (blue), success (green); tints work in both themes */
.callout { --tint: var(--color-primary); padding: var(--space-6); border-radius: var(--radius-card); border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent); background: color-mix(in srgb, var(--tint) 7%, var(--color-surface)); }
.callout--tip { --tint: var(--color-promo); }
.callout--success { --tint: var(--color-success); }
.callout h2, .callout h3 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.callout h2 svg, .callout h3 svg { width: 22px; height: 22px; flex: none; color: var(--tint); }
.callout p, .callout ul { margin: 0 0 var(--space-2); line-height: 1.6; }
.callout ul { padding-left: var(--space-6); }
.callout > :last-child { margin-bottom: 0; }
/* Numbered steps */
.help-steps { list-style: none; counter-reset: help-step; padding: 0 !important; margin: 0 0 var(--space-4); display: grid; gap: var(--space-4); }
.help-steps > li { counter-increment: help-step; position: relative; padding-left: 44px; min-height: 30px; }
.help-steps > li::before {
  content: counter(help-step); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--c, var(--color-primary)); color: #fff; font-weight: 700; font-size: var(--text-sm);
}
.help-steps h3 { margin-top: 0; }
.help-steps p { margin-bottom: var(--space-2); }
.help-media { margin: var(--space-6) auto 0; max-width: 320px; text-align: center; }
.help-media figcaption { margin-top: var(--space-2); font-size: var(--text-sm); }
@media (min-width: 768px) {
  .help-contact { grid-template-columns: 1.3fr 1fr; align-items: center; padding: var(--space-8) var(--space-12); }
  .help-more { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .help-page { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-12); align-items: start; padding-top: var(--space-8); }
  .help-side { order: 0; position: sticky; top: calc(var(--header-height) + var(--space-6)); flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .help-side__home { margin-bottom: var(--space-3); }
  .help-side__item { border-color: transparent; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
  .help-main { max-width: 760px; }
}

/* Help demos (partials/watch_demo.html): small looping watch scenes in SVG */
.demo { display: block; width: min(100%, 260px); height: auto; margin: 0 auto; overflow: visible; }
.demo * { transform-box: fill-box; transform-origin: center; }
.demo__case { fill: #16181D; }
.demo__crown { fill: #2A2D34; stroke: #4A4E58; }
.demo__touch { fill: #fff; opacity: 0; }
.demo-dial circle:first-child { stroke: none; }
.demo-dial line { stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.demo-dial circle:last-child { fill: #fff; }
.demo-dial--a circle:first-child { fill: #1E3A8A; }
.demo-dial--b circle:first-child { fill: #C2410C; }
.demo-dial--c circle:first-child { fill: #166534; }
/* set: 7s. Long press (0-14%), edit mode shrinks (14-24%), the row slides one to the left (30-46%), tap (52-58%), full size again (60-72%) */
.demo-set__row { animation: set-row 7s cubic-bezier(0.22, 1, 0.36, 1) infinite; transform-box: view-box; transform-origin: 120px 120px; }
.demo-set__row > g { transform-box: view-box; }
@keyframes set-row {
  0%, 12% { transform: scale(1) translateX(0); }
  22%, 30% { transform: scale(0.42) translateX(0); }
  44%, 58% { transform: scale(0.42) translateX(-210px); }
  70%, 92% { transform: scale(1) translateX(-210px); }
  100% { transform: scale(1) translateX(-210px); }
}
.demo-set__press { animation: press 7s ease-out infinite; }
@keyframes press { 0%, 2% { opacity: 0; transform: scale(0.5); } 6% { opacity: 0.35; transform: scale(1); } 14% { opacity: 0.35; transform: scale(2.6); } 18%, 100% { opacity: 0; transform: scale(3); } }
.demo-set__tap { animation: tap 7s ease-out infinite; }
@keyframes tap { 0%, 50% { opacity: 0; transform: scale(0.5); } 53% { opacity: 0.45; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(2.4); } }
/* the loop restarts on the new face: fade to black at the very end so the jump back is unseen */
.demo--set g[clip-path] { animation: demo-fade 7s linear infinite; }
@keyframes demo-fade { 0%, 92% { opacity: 1; } 97% { opacity: 0; } 100% { opacity: 1; } }
/* customize: 8s. Long press, shrink + Customize chip, three accent colours, back */
.demo-cus__face { animation: cus-face 8s cubic-bezier(0.22, 1, 0.36, 1) infinite; transform-box: view-box; transform-origin: 120px 120px; }
@keyframes cus-face { 0%, 12% { transform: none; } 20%, 82% { transform: scale(0.72) translateY(-14px); } 92%, 100% { transform: none; } }
.demo-cus__time { font: 700 34px var(--font-sans); fill: #fff; }
.demo-cus__accent-stroke { fill: none; stroke-width: 4; animation: cus-stroke 8s steps(1) infinite; }
.demo-cus__accent { animation: cus-fill 8s steps(1) infinite; }
@keyframes cus-stroke { 0%, 38% { stroke: #84ADFF; } 38%, 58% { stroke: #F79009; } 58%, 100% { stroke: #12B76A; } }
@keyframes cus-fill { 0%, 38% { fill: #84ADFF; } 38%, 58% { fill: #F79009; } 58%, 100% { fill: #12B76A; } }
.demo-cus__chip { opacity: 0; animation: cus-chip 8s ease infinite; }
.demo-cus__chip rect { fill: #2970FF; }
.demo-cus__chip text { font: 600 11px var(--font-sans); fill: #fff; }
@keyframes cus-chip { 0%, 16% { opacity: 0; transform: translateY(8px); } 22%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; } }
.demo-cus__swatches { opacity: 0; animation: cus-sw 8s ease infinite; }
@keyframes cus-sw { 0%, 30% { opacity: 0; } 34%, 80% { opacity: 1; } 86%, 100% { opacity: 0; } }
.demo-cus__sw--1 { fill: #84ADFF; } .demo-cus__sw--2 { fill: #F79009; } .demo-cus__sw--3 { fill: #12B76A; }
.demo-cus__sw { stroke: #fff; stroke-width: 0; animation: cus-pick 8s steps(1) infinite; }
.demo-cus__sw--2 { animation-name: cus-pick-2; } .demo-cus__sw--3 { animation-name: cus-pick-3; }
@keyframes cus-pick { 0%, 38% { stroke-width: 3; } 38%, 100% { stroke-width: 0; } }
@keyframes cus-pick-2 { 0%, 38% { stroke-width: 0; } 38%, 58% { stroke-width: 3; } 58%, 100% { stroke-width: 0; } }
@keyframes cus-pick-3 { 0%, 58% { stroke-width: 0; } 58%, 82% { stroke-width: 3; } 82%, 100% { stroke-width: 0; } }
.demo-cus__press { animation: press 8s ease-out infinite; }
/* app: 12s, the real Wear OS 6 flow. Watch face (0-6%), the app grid scrolls to AllFaces (6-30%), tap (32%), the loading ring (36-43%), the app home (44-58%), tap My faces (57%), the ring again, the faces grid scrolls (64-90%), back to the face */
.demo-app__face { animation: app-face 12s ease infinite; transform-box: view-box; transform-origin: 120px 120px; }
@keyframes app-face { 0%, 5% { opacity: 1; transform: none; } 9%, 95% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: none; } }
.demo-app__big-time { font: 700 42px var(--font-sans); fill: #fff; letter-spacing: -1px; }
.demo-app__small { font: 600 11px var(--font-sans); fill: #9AA0AA; letter-spacing: 1px; }
.demo-app__grid { opacity: 0; animation: app-grid 12s ease infinite; transform-box: view-box; transform-origin: 120px 120px; }
@keyframes app-grid { 0%, 5% { opacity: 0; transform: scale(1.12); } 10%, 33% { opacity: 1; transform: none; } 37%, 100% { opacity: 0; transform: none; } }
.demo-app__grid-scroll { animation: app-grid-scroll 12s cubic-bezier(0.45, 0, 0.2, 1) infinite; transform-box: view-box; }
@keyframes app-grid-scroll { 0%, 12% { transform: none; } 19%, 22% { transform: translateY(-94px); } 29%, 100% { transform: translateY(-188px); } }
.demo-app__heading { font: 600 13px var(--font-sans); fill: #E8EAED; }
.demo-app__ours { animation: app-ours 12s ease infinite; }
@keyframes app-ours { 0%, 30% { transform: none; } 32% { transform: scale(0.9); } 35%, 100% { transform: none; } }
.demo-app__tap { animation: tap-app 12s ease-out infinite; }
@keyframes tap-app { 0%, 30% { opacity: 0; transform: scale(0.5); } 32% { opacity: 0.45; transform: scale(1); } 36%, 100% { opacity: 0; transform: scale(2.4); } }
.demo-app__reveal { fill: #000; opacity: 0; animation: app-reveal 12s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
@keyframes app-reveal { 0%, 33% { opacity: 0; transform: scale(0.2); } 34% { opacity: 1; transform: scale(0.2); } 38%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
.demo-app__spinner { opacity: 0; transform-box: view-box; transform-origin: 120px 120px; }
.demo-app__spinner--1 { animation: app-spin-1 12s linear infinite; }
.demo-app__spinner--2 { animation: app-spin-2 12s linear infinite; }
@keyframes app-spin-1 { 0%, 36% { opacity: 0; transform: rotate(0); } 37%, 42% { opacity: 1; } 43%, 100% { opacity: 0; transform: rotate(1080deg); } }
@keyframes app-spin-2 { 0%, 59% { opacity: 0; transform: rotate(0); } 60%, 63% { opacity: 1; } 64%, 100% { opacity: 0; transform: rotate(900deg); } }
.demo-app__home { opacity: 0; animation: app-home 12s ease infinite; }
@keyframes app-home { 0%, 43% { opacity: 0; transform: translateY(10px); } 46%, 58% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; } }
.demo-app__home-scroll { animation: app-home-scroll 12s cubic-bezier(0.45, 0, 0.2, 1) infinite; transform-box: view-box; }
@keyframes app-home-scroll { 0%, 48% { transform: none; } 54%, 100% { transform: translateY(-30px); } }
.demo-app__label { font: 500 10px var(--font-sans); fill: #9AA0AA; }
.demo-app__pill { fill: #24272D; }
.demo-app__pill--mine { animation: app-mine 12s ease infinite; }
@keyframes app-mine { 0%, 55% { fill: #2E3138; } 57% { fill: #3D424B; } 59%, 100% { fill: #2E3138; } }
.demo-app__pill-title { font: 700 11px var(--font-sans); fill: #fff; }
.demo-app__pill-sub { font: 500 9px var(--font-sans); fill: #9AA0AA; }
.demo-app__hand { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.demo-app__tap2 { animation: tap-mine 12s ease-out infinite; }
@keyframes tap-mine { 0%, 55% { opacity: 0; transform: scale(0.5); } 57% { opacity: 0.45; transform: scale(1); } 61%, 100% { opacity: 0; transform: scale(2.4); } }
.demo-app__list { opacity: 0; animation: app-list 12s ease infinite; }
@keyframes app-list { 0%, 63% { opacity: 0; transform: translateY(12px); } 66%, 93% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.demo-app__list-scroll { animation: app-list-scroll 12s cubic-bezier(0.45, 0, 0.2, 1) infinite; transform-box: view-box; }
@keyframes app-list-scroll { 0%, 70% { transform: none; } 88%, 100% { transform: translateY(-150px); } }
.demo-app__dial-time { font: 700 12px var(--font-sans); fill: #fff; }
.demo-app__name { font: 600 10px var(--font-sans); fill: #E8EAED; }
/* the scroll bar on the right edge, as Wear OS draws it while a list moves */
.demo-app__bar { opacity: 0; animation: app-bar 12s ease infinite; }
@keyframes app-bar { 0%, 10% { opacity: 0; } 12%, 31% { opacity: 1; } 34%, 47% { opacity: 0; } 49%, 56% { opacity: 1; } 58%, 68% { opacity: 0; } 70%, 90% { opacity: 1; } 93%, 100% { opacity: 0; } }
.demo-app__bar-track { fill: none; stroke: #3A3E47; stroke-width: 3; stroke-linecap: round; }
.demo-app__bar-thumb { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; animation: app-thumb 12s cubic-bezier(0.45, 0, 0.2, 1) infinite; transform-box: view-box; transform-origin: 120px 120px; }
@keyframes app-thumb { 0%, 12% { transform: rotate(0); } 29%, 47% { transform: rotate(16deg); } 48%, 49% { transform: rotate(0); } 54%, 69% { transform: rotate(12deg); } 70% { transform: rotate(0); } 88%, 100% { transform: rotate(16deg); } }
@media (prefers-reduced-motion: reduce) {
  .demo-set__row { transform: scale(1) translateX(-210px); }
  .demo-app__face, .demo-app__grid, .demo-app__home, .demo-app__spinner, .demo-app__bar, .demo__touch { opacity: 0; }
  .demo-app__list, .demo-app__reveal { opacity: 1; transform: none; }
}

/* Admin-written HTML (Terms, Privacy) */
.prose { padding-bottom: var(--space-8); line-height: 1.65; }
.prose h2 { margin: var(--space-8) 0 var(--space-3); }
.prose h3 { margin: var(--space-6) 0 var(--space-2); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose a { color: var(--color-primary); text-decoration: underline; }
.center { text-align: center; }
.muted { color: var(--color-text-muted); }
.note { color: var(--color-text-muted); font-size: var(--text-sm); }
.link { color: var(--color-primary-strong); font-weight: 600; }
/* "View all": the app's ViewAll (a 32px uiFloated circle with an arrow), with
   its label beside it on wider screens. */
.link--arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); white-space: nowrap; transition: color 0.2s; }
.link--arrow::after {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-floated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5-5 5 5-5 5' stroke='%23697586' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform 0.25s var(--ease), background-color 0.25s;
}
.link--arrow:hover { color: var(--color-text); }
.link--arrow:hover::after { transform: translateX(2px); background-color: var(--color-primary-soft); }
@media (max-width: 767px) { .section__head .link--arrow { font-size: 0; gap: 0; } }
.skip-link { position: absolute; left: -9999px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); z-index: 100; background: var(--color-surface); padding: var(--space-2) var(--space-3); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 46px; padding: 0 var(--space-6);
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font: inherit; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s, border-color 0.2s, filter 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 38px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn--primary {
  background: var(--color-primary-strong); color: var(--color-on-primary);
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.1), 0 8px 20px -10px var(--color-primary);
}
.btn--primary:hover { filter: brightness(1.08); box-shadow: 0 1px 2px rgb(16 24 40 / 0.1), 0 12px 26px -10px var(--color-primary); }
.btn--outline { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn--outline:hover { border-color: var(--color-text-muted); }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text);
  font-size: 1.5rem; cursor: pointer; transition: background-color 0.2s;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--color-surface-2); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-4); height: var(--header-height); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 800; font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
.brand__mark { display: block; flex: none; width: 55px; height: 55px; }
.brand__mark img { width: 55px; height: 55px; object-fit: contain; }
.brand__mark--tile, .brand__mark--tile img { width: 68px; height: 68px; }
.site-nav { display: none; gap: var(--space-2); margin-left: var(--space-6); font-weight: 500; font-size: var(--text-sm); }
.site-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); color: var(--color-text-muted); transition: color 0.2s, background-color 0.2s; }
.site-nav a:hover { color: var(--color-text); background: var(--color-surface-2); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.site-header__actions .btn { display: none; }

/* Android install banner */
.app-banner { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.app-banner[hidden] { display: none; }
.app-banner__inner { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.app-banner__text { display: flex; flex-direction: column; font-size: var(--text-sm); line-height: 1.3; }
.app-banner__text span { color: var(--color-text-muted); }
.app-banner .btn { margin-left: auto; }

/* Mobile bottom navigation, like the app */

/* Sections */
.page { min-height: 60vh; }
.section { padding: var(--space-16) 0; }
.section--compact { padding: var(--space-6) 0 var(--space-2); }
.section--tinted { background: var(--color-primary-bg); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
.section__title { font-size: var(--text-title); margin: 0; }
.section > .container > .section__title { margin-bottom: var(--space-6); }
.banners { padding-top: var(--space-2); }
.page-head { padding: var(--space-8) 0 var(--space-6); }
.page-head__intro { max-width: 70ch; margin-top: var(--space-3); line-height: 1.6; }
.page-head__actions, .hero__actions, .face-detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-6) 0; }

.text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 36ch; }
.hero__points { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding: 0; margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.hero__points li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__points li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--color-primary-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* Intro hero, after the app's CreativeIntroHeader: banner of faces fading
   into the page, diffuse colour waves (the logo's colours), sparkles, and the
   AI logo floating over it all; the welcome text sits centred below. */
.intro-hero { position: relative; overflow: hidden; padding-bottom: var(--space-12); }
.intro-hero__art { display: block; position: relative; height: clamp(340px, 44vw, 560px); overflow: hidden; isolation: isolate; }
/* Two rings of real faces around the logo. Each ring turns; every slot sits
   at its angle on the ring and its face turns back by as much, so it stays upright. */
.intro-orbit { --size: clamp(420px, 62vw, 800px); position: absolute; left: 50%; top: 48%; width: var(--size); aspect-ratio: 1; translate: -50% -50%; }
.intro-orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, transparent); animation: orbit 120s linear infinite; }
.intro-orbit__ring--1 { inset: 26%; animation-duration: 80s; animation-direction: reverse; }
/* the rings are full-size layers stacked on each other: only the faces take clicks, so the outer one never covers the inner faces */
.intro-orbit__ring { pointer-events: none; }
.intro-orbit__ring a { pointer-events: auto; }
.intro-orbit__slot { --r: calc(var(--size) * 0.24); position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.intro-orbit__ring--2 .intro-orbit__slot { --r: calc(var(--size) * 0.5); }
.intro-orbit__face {
  --d: clamp(60px, 7.6vw, 108px); max-width: none; position: absolute; left: calc(var(--d) / -2); top: calc(var(--d) / -2); width: var(--d); height: var(--d);
  border-radius: 50%; object-fit: cover; background: #000; box-shadow: 0 0 0 3px var(--color-floated), 0 14px 26px -14px rgb(0 0 0 / 0.6);
  transform: rotate(calc(-1 * var(--a))); animation: orbit-upright 120s linear infinite;
}
.intro-orbit__ring--1 .intro-orbit__face { --d: clamp(52px, 6.2vw, 88px); animation-duration: 80s; animation-direction: reverse; }
.intro-orbit__face { transition: opacity 0.45s ease, filter 0.45s ease, box-shadow 0.3s; }
.intro-orbit__link { display: block; }
.intro-orbit__link:hover .intro-orbit__face, .intro-orbit__link:focus-visible .intro-orbit__face { box-shadow: 0 0 0 3px var(--color-primary), 0 14px 26px -14px rgb(0 0 0 / 0.6); }
.intro-orbit__face.is-swapping { opacity: 0; filter: blur(6px); } /* opacity/filter only: transform keeps it upright */
@keyframes orbit { to { transform: rotate(360deg); } }
/* undo the ring's turn plus the slot's own angle, whatever the ring is at */
@keyframes orbit-upright { from { transform: rotate(calc(-1 * var(--a))); } to { transform: rotate(calc(-1 * var(--a) - 360deg)); } }
/* Entrance on load: each slot's distance from the centre (--burst, 0 -> 1)
   glides out with a soft ease (no overshoot), staggered, while it fades in.
   @property makes the variable animatable; browsers without it skip it. */
@property --burst { syntax: "<number>"; inherits: true; initial-value: 1; }
.intro-orbit__slot { transform: rotate(var(--a)) translateY(calc(-1 * var(--r) * var(--burst))); }
.intro-hero.is-bursting .intro-orbit__slot { animation: burst 1.8s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.1s + var(--i) * 70ms); }
.intro-hero.is-bursting .intro-orbit__ring--2 .intro-orbit__slot { animation-delay: calc(0.35s + var(--i) * 70ms); }
@keyframes burst { from { --burst: 0.35; opacity: 0; } to { --burst: 1; opacity: 1; } }
.intro-hero.is-bursting .intro-hero__logo img { animation: logo-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes logo-in { from { transform: scale(0.85); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
/* Scroll: the orbit swells and fades as the hero scrolls away (--scroll 0 -> 1, set by site.js) */
.intro-orbit { scale: calc(1 + var(--scroll, 0) * 0.35); opacity: calc(1 - var(--scroll, 0) * 0.6); }
/* The headline's cycling word: the slot's width glides to the next word
   (site.js sets it), and the words crossfade with a soft blur. No clipping. */
.word-cycle { position: relative; display: inline-block; vertical-align: baseline; white-space: nowrap; transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.word-cycle.is-live::before { content: "A"; visibility: hidden; } /* an invisible letter keeps the line height once the words are positioned */
.word-cycle.is-live .word-cycle__word { position: absolute; left: 50%; top: 0; translate: -50% 0; white-space: nowrap; }
.word-cycle__word.is-in { animation: word-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.word-cycle__word.is-out { animation: word-out 0.5s ease both; }
@keyframes word-in { from { opacity: 0; filter: blur(10px); transform: translateY(0.18em); } to { opacity: 1; filter: none; transform: none; } }
@keyframes word-out { from { opacity: 1; filter: none; transform: none; } to { opacity: 0; filter: blur(10px); transform: translateY(-0.18em); } }
/* transparent -> 40% -> 90% -> page, like the app's vertical gradient */
.intro-hero__fade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 75% at 50% 45%, transparent 64%, var(--color-bg) 100%), linear-gradient(180deg, transparent 62%, var(--color-bg) 97%); }
.intro-hero__waves { position: absolute; inset: 0; pointer-events: none; }
.intro-hero__logo { pointer-events: none; } /* the faces under the decoration stay clickable */
.intro-hero__waves > span, .intro-wave {
  position: absolute; left: 50%; top: 50%; width: var(--w, 40%); aspect-ratio: var(--r, 1.3); border-radius: 50%;
  background: radial-gradient(closest-side, var(--c1, #8B5CF6), color-mix(in srgb, var(--c2, #EC4899) 40%, transparent) 60%, transparent);
  filter: blur(50px); opacity: 0.55; transform: translate(-50%, -50%);
}
/* three resting waves when site.js isn't spawning them */
.intro-hero__waves > span:nth-child(1) { --c1: #8B5CF6; --c2: #3B82F6; --w: 48%; left: 38%; }
.intro-hero__waves > span:nth-child(2) { --c1: #EC4899; --c2: #F59E0B; --w: 40%; left: 62%; top: 40%; }
.intro-hero__waves > span:nth-child(3) { --c1: #06B6D4; --c2: #8B5CF6; --w: 36%; top: 64%; }
.intro-hero__waves.is-live > span { display: none; }
.intro-wave { opacity: 0; animation: intro-wave var(--d, 7s) cubic-bezier(0.33, 1, 0.68, 1) forwards; }
@keyframes intro-wave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1); }
  25% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1); }
}
.intro-hero__sparkles { position: absolute; inset: 0; pointer-events: none; }
.intro-spark { position: absolute; width: var(--s, 6px); height: var(--s, 6px); border-radius: 50%; background: #fff; box-shadow: 0 0 calc(var(--s, 6px) * 1.6) calc(var(--s, 6px) * 0.6) var(--c, #8B5CF6); opacity: 0; animation: intro-spark var(--d, 2s) ease-in-out forwards; }
@keyframes intro-spark { 0%, 100% { opacity: 0; transform: scale(0.2); } 50% { opacity: 0.95; transform: scale(1); } }
.intro-hero__logo { position: absolute; left: 50%; top: 48%; width: clamp(96px, 11vw, 140px); translate: -50% -50%; animation: intro-float-y 3s ease-in-out infinite alternate, intro-float-x 4s ease-in-out infinite alternate; }
/* a soft, breathing cloud of the logo's colours under it, no hard edge */
.intro-hero__logo::before { content: ""; position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 40% 40%, rgb(139 92 246 / 0.55), transparent 55%), radial-gradient(circle at 62% 58%, rgb(236 72 153 / 0.4), transparent 55%), radial-gradient(circle at 50% 50%, rgb(6 182 212 / 0.3), transparent 65%);
  filter: blur(26px); animation: logo-breathe 5s ease-in-out infinite alternate; }
@keyframes logo-breathe { from { transform: scale(0.9) rotate(0deg); opacity: 0.8; } to { transform: scale(1.12) rotate(25deg); opacity: 1; } }
.intro-hero__logo img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 16px 30px rgb(0 0 0 / 0.35)); }
@keyframes intro-float-y { from { margin-top: -10px; } to { margin-top: 10px; } }
@keyframes intro-float-x { from { margin-left: -5px; } to { margin-left: 5px; } }
.intro-hero__text { position: relative; margin-top: calc(-1 * clamp(16px, 3vw, 40px)); text-align: center; display: grid; justify-items: center; }
.intro-hero h1 { font-size: var(--text-hero); letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch; margin: 0 auto var(--space-4); }
.intro-hero .lead { margin: 0 auto; max-width: 40ch; }
.intro-hero .hero__actions { justify-content: center; }
.hero-check { display: inline-flex; align-items: center; gap: 6px; margin-top: calc(-1 * var(--space-2)); font-size: var(--text-sm); color: var(--color-text-muted); transition: color 0.2s; }
.hero-check__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 18%, transparent); }
.hero-check__link { color: var(--color-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.hero-check:hover .hero-check__link { text-decoration-color: currentColor; }
.intro-hero .hero__points { justify-content: center; }

.card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: var(--space-8); box-shadow: var(--shadow-card);
}
.feature-grid, .contact-grid { display: grid; gap: var(--space-4); }
.feature { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s; }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
.feature h3 { font-size: var(--text-lg); }
.feature__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-4); border-radius: 14px; background: var(--color-primary-soft); color: var(--color-primary-strong); }
.feature__icon svg { width: 24px; height: 24px; }
.feature--accent .feature__icon { background: var(--gradient-brand); color: #fff; box-shadow: 0 10px 22px -10px var(--color-primary); }
.kicker { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary-strong); }

/* How it works, as one stage: title + live status, the scene on a dot grid,
   and the three steps as a progress track that fills with the animation. */
.stage {
  position: relative; overflow: hidden; display: grid; gap: var(--space-6); align-items: center; padding: var(--space-6);
  border-radius: var(--radius-featured); border: 1px solid var(--color-border);
  background:
    radial-gradient(60% 80% at 85% 50%, color-mix(in srgb, var(--color-primary) calc(10% * var(--wash)), transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-text) 9%, transparent) 1px, transparent 0) 0 0 / 22px 22px,
    var(--color-surface);
}
.stage__side .section__title { margin: 0 0 var(--space-1); }
.stage__side > p { margin: 0 0 var(--space-6); }
.stage .flow { max-width: 680px; }
/* The stepper: dots on a line that fills as the scene plays (data-stage set by site.js) */
.stepper { --fill: 0%; position: relative; list-style: none; display: grid; gap: var(--space-5, 20px); margin: 0; padding: 0; }
.stepper::before, .stepper::after { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--color-border); }
.stepper::after { background: var(--color-primary); bottom: auto; height: calc((100% - 16px) * var(--p, 1)); transition: none; }
@property --p { syntax: "<number>"; inherits: false; initial-value: 1; }
.stepper[data-stage="pick"]::after { animation: step-fill-1 2.6s linear forwards; }
.stepper[data-stage="send"]::after { animation: step-fill-2 1.7s linear forwards; }
.stepper[data-stage="wear"]::after { animation: step-fill-3 1.1s linear forwards; }
.stepper[data-stage="done"]::after { --p: 1; }
@keyframes step-fill-1 { from { --p: 0; } to { --p: 0.5; } }
@keyframes step-fill-2 { from { --p: 0.5; } to { --p: 1; } }
@keyframes step-fill-3 { from { --p: 1; } to { --p: 1; } }
.stepper__step { position: relative; display: flex; gap: var(--space-4); align-items: flex-start; padding-left: 0; color: var(--color-text-muted); transition: color 0.3s; }
.stepper__step > span:last-child { display: grid; gap: 2px; }
.stepper__step strong { color: inherit; font-size: var(--text-md); }
.stepper__step .muted { font-size: var(--text-sm); }
.stepper__dot { position: relative; z-index: 1; flex: none; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border-strong); transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s; }
/* reached: filled; current: ringed and glowing softly */
.stepper:not([data-stage]) .stepper__dot,
.stepper[data-stage="send"] .stepper__step--pick .stepper__dot,
.stepper[data-stage="wear"] :is(.stepper__step--pick, .stepper__step--send) .stepper__dot,
.stepper[data-stage="done"] .stepper__dot { background: var(--color-primary); border-color: var(--color-primary); }
.stepper[data-stage="pick"] .stepper__step--pick .stepper__dot,
.stepper[data-stage="send"] .stepper__step--send .stepper__dot,
.stepper[data-stage="wear"] .stepper__step--wear .stepper__dot { border-color: var(--color-primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.stepper:not([data-stage]) .stepper__step,
.stepper[data-stage="pick"] .stepper__step--pick,
.stepper[data-stage="send"] :is(.stepper__step--pick, .stepper__step--send),
.stepper[data-stage="wear"] .stepper__step,
.stepper[data-stage="done"] .stepper__step { color: var(--color-text); }
/* the phone and the watch breathe a little */
.stage .flow__scene { animation: stage-float 6s ease-in-out infinite; }
@keyframes stage-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (min-width: 768px) {
  .stage { grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.6fr); gap: var(--space-8); padding: var(--space-8) var(--space-12); }
}
@media (max-width: 767px) {
  .stepper { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); }
  /* the same line, laid across: from the first dot's centre to the last one's (each dot sits at its column's left edge) */
  .stepper::before, .stepper::after { left: 8px; top: 11px; bottom: auto; height: 2px; width: calc((100% + var(--space-2)) * 2 / 3); }
  .stepper::after { width: calc((100% + var(--space-2)) * 2 / 3 * var(--p, 1)); }
  .stepper__step { flex-direction: column; gap: var(--space-2); }
  .stepper__step .muted { display: none; }
  .stage__side > p { margin-bottom: var(--space-4); }
}

.flow { width: 100%; max-width: 620px; margin: 0 auto; }
.flow__scene { display: block; width: 100%; height: auto; overflow: visible; }
.flow__scene * { transform-box: fill-box; transform-origin: center; }
.flow__phone-body { fill: #0E1014; stroke: #3A3E47; stroke-width: 1.5; }
.flow__phone-edge { fill: none; stroke: rgb(255 255 255 / 0.06); stroke-width: 1; }
.flow__key { fill: #3A3E47; }
.flow__island { fill: #000; }
.flow__home { fill: var(--color-text-muted); opacity: 0.5; }
.flow__avatar { fill: var(--color-floated); stroke: var(--color-border-strong); }
.flow__shadow { fill: #000; opacity: 0.45; }
.flow__crown { fill: #2A2D34; stroke: #4A4E58; }
.flow__phone-screen, .flow__phone-bar { fill: var(--color-bg); }
.flow__phone-title { font: 700 12px var(--font-sans); fill: var(--color-text); }
.flow__tile { fill: var(--color-floated); stroke: #2970FF; stroke-width: 0; transition: stroke-width 0.25s; }
.flow__cell.is-picked .flow__tile { stroke-width: 3; }
.flow__tap { fill: #84ADFF; opacity: 0; }
.flow__tap.is-tapping { animation: flow-tap 0.7s var(--ease); }
@keyframes flow-tap { 0% { opacity: 0.7; transform: scale(0.5); } 100% { opacity: 0; transform: scale(4.5); } }
.flow__send { fill: var(--color-surface-2); transition: fill 0.3s; }
.flow__send.is-on { fill: #2970FF; }
.flow__send-label { font: 600 10px var(--font-sans); fill: var(--color-text); pointer-events: none; }
.flow__send.is-on + .flow__send-label { fill: #fff; }
/* the wire: a faint dashed line that brightens while a face travels */
.flow__wire { fill: none; stroke: var(--color-border-strong); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 7; transition: stroke 0.4s; animation: flow-wire 1.2s linear infinite; }
.flow.is-sending .flow__wire { stroke: color-mix(in srgb, #2970FF 55%, var(--color-border-strong)); }
@keyframes flow-wire { to { stroke-dashoffset: -20; } }
.flow__beam, .flow__beam-glow { fill: none; stroke: url(#flow-beam-grad); stroke-linecap: round; opacity: 0; transition: opacity 0.3s; }
.flow__beam { stroke-width: 4; }
.flow__beam-glow { stroke-width: 12; }
.flow.is-sending :is(.flow__beam, .flow__beam-glow) { opacity: 1; }
.flow__packets circle { fill: #CFE0FF; opacity: 0; filter: drop-shadow(0 0 4px #84ADFF); }
.flow__ride { opacity: 0; transition: opacity 0.25s; }
.flow.is-sending .flow__ride { opacity: 1; }
.flow__ride-ring { fill: #000; stroke: #fff; stroke-width: 2; }
.flow__case { fill: #16181D; stroke: transparent; stroke-width: 2; transition: stroke 0.4s; }
.flow.is-arriving .flow__case { stroke: #2970FF; }
/* arrival: the new face opens out of the centre, a scan sweeps once, rings pulse */
.flow__dial-in { opacity: 0; clip-path: circle(0% at 50% 50%); }
.flow.is-arriving .flow__dial-in { animation: flow-reveal 0.9s var(--ease) forwards; }
@keyframes flow-reveal { from { opacity: 1; clip-path: circle(0% at 50% 50%); } to { opacity: 1; clip-path: circle(72% at 50% 50%); } }
.flow__scan { fill: url(#flow-glow); opacity: 0; transform-origin: 0% 100%; transform-box: fill-box; }
.flow.is-arriving .flow__scan { animation: flow-scan 0.9s linear; }
@keyframes flow-scan { 0% { opacity: 0.9; transform: rotate(0deg); } 100% { opacity: 0; transform: rotate(360deg); } }
.flow__pulse { fill: none; stroke: #84ADFF; stroke-width: 3; opacity: 0; }
.flow.is-arriving .flow__pulse { animation: flow-pulse 1.1s var(--ease); }
.flow.is-arriving .flow__pulse--2 { animation-delay: 0.25s; }
@keyframes flow-pulse { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }
.flow__ring { fill: none; stroke: #2970FF; stroke-width: 2; stroke-dasharray: 2 10; opacity: 0; }
.flow[data-stage="done"] .flow__ring { opacity: 0.6; animation: spin 6s linear infinite; }
.flow__done { opacity: 0; transform: scale(0.4); transition: opacity 0.3s, transform 0.4s var(--ease); }
.flow[data-stage="done"] .flow__done { opacity: 1; transform: scale(1); }
.flow__watch { cursor: pointer; }
.flow__watch .flow__case { transition: stroke 0.3s; }
.flow__watch:hover .flow__case, .flow__watch:focus-visible .flow__case { stroke: var(--color-primary); }
.flow__watch:focus-visible { outline: none; }
.flow__done circle { fill: #2970FF; }
.flow__done path { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

/* Section head with a switch beside the title */
.section__head-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.segmented[hidden] { display: none; }
.segmented--sm { margin: 0; }
.segmented--sm .segmented__opt { padding: 4px var(--space-3); font-size: var(--text-xs); }
button.segmented__opt { border: 0; background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
.segmented__opt[aria-selected="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); }
[data-tab-panel][hidden] { display: none; }

/* Designer Program page: a pitch with a fan of real faces, the crew, what we
   look for, how you get in, what you get, and a closed door. */
/* Hero: the pitch over a tilted gallery of real faces that keeps flowing */
.prog-hero { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(420px, 52vw, 560px); display: grid; align-items: center; padding: var(--space-12) 0; }
.prog-gallery { position: absolute; inset: 0; z-index: -1; perspective: 900px; overflow: hidden; }
.prog-gallery::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-bg) 30%, color-mix(in srgb, var(--color-bg) 55%, transparent) 60%, color-mix(in srgb, var(--color-bg) 20%, transparent)), linear-gradient(0deg, var(--color-bg), transparent 30%, transparent 75%, var(--color-bg)); }
.prog-gallery__plane { position: absolute; left: 30%; top: 50%; display: grid; gap: var(--space-4); transform: translateY(-50%) rotateX(28deg) rotateY(-22deg) rotateZ(-8deg); transform-style: preserve-3d; }
.prog-gallery__row { display: flex; gap: var(--space-4); width: max-content; animation: gallery 70s linear infinite; }
.prog-gallery__row:nth-child(2) { animation-direction: reverse; animation-duration: 80s; margin-left: -90px; }
.prog-gallery__row:nth-child(3) { animation-duration: 90s; margin-left: -40px; }
.prog-gallery__row img { transition: opacity 0.45s var(--ease), scale 0.45s var(--ease); flex: none; width: clamp(96px, 10vw, 140px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: #000; box-shadow: 0 0 0 4px var(--color-floated), 0 20px 30px -18px rgb(0 0 0 / 0.8); }
@keyframes gallery { to { transform: translateX(-50%); } }
.prog-hero__text { position: relative; }
.prog-hero h1 { font-size: var(--text-hero); letter-spacing: -0.035em; line-height: 1.02; margin: var(--space-4) 0; max-width: 12ch; }
.prog-hero .lead { max-width: 38ch; }
.prog-tag { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: 6px var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-sm); font-weight: 600; }
.prog-tag__dot { width: 8px; height: 8px; border-radius: 50%; background: #7A5AF8; box-shadow: 0 0 0 4px color-mix(in srgb, #7A5AF8 20%, transparent); }
.prog-closed { display: inline-flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0 0; padding: 6px var(--space-4) 6px 6px; border-radius: var(--radius-pill); border: 1px dashed var(--color-border-strong); background: color-mix(in srgb, var(--color-surface) 85%, transparent); font-size: var(--text-sm); font-weight: 600; }
.prog-lock { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--color-inverse); color: var(--color-on-inverse); }
.prog-lock svg { width: 17px; height: 17px; }
/* the crew: the live count and a drifting strip of designers */
.prog-crew { display: grid; gap: var(--space-4); align-items: center; padding: var(--space-6); border-radius: var(--radius-featured); border: 1px solid var(--color-border); background: var(--color-surface); }
.prog-crew__count { display: grid; gap: 2px; }
.prog-crew__count strong { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.prog-crew__count span { color: var(--color-text-muted); font-size: var(--text-sm); }
.prog-crew__strip { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.prog-crew__track { display: flex; gap: var(--space-3); width: max-content; animation: gallery 40s linear infinite; }
.prog-crew__strip:hover .prog-crew__track { animation-play-state: paused; }
.prog-crew__item { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-4) 4px 4px; border-radius: var(--radius-pill); background: var(--color-floated); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; transition: background-color 0.25s, transform 0.25s var(--ease); }
.prog-crew__item:hover { background: var(--color-surface-2); transform: translateY(-2px); }
.prog-crew__item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #000; }
/* Watch Face Studio: your project -> AllFaces */
.prog-wfs { display: grid; gap: var(--space-6); align-items: center; padding: var(--space-6) var(--space-8); border-radius: var(--radius-featured); border: 1px solid var(--color-border); background: radial-gradient(60% 90% at 100% 50%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 70%), var(--color-surface); }
.prog-wfs h2 { margin: 0 0 var(--space-2); font-size: var(--text-title); }
.prog-wfs p { margin: 0; }
.prog-wfs__flow { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
.prog-wfs__file { display: grid; place-items: center; width: 84px; height: 96px; border-radius: 14px; border: 1.5px solid var(--color-border-strong); background: var(--color-floated); text-align: center; }
.prog-wfs__file b { font-size: 1.25rem; letter-spacing: -0.02em; }
.prog-wfs__file small { margin-top: -18px; font-size: 0.625rem; color: var(--color-text-muted); }
.prog-wfs__file--app { border-radius: 50%; width: 96px; background: var(--color-inverse); color: var(--color-on-inverse); border-color: transparent; }
.prog-wfs__file--app small { color: inherit; opacity: 0.7; }
.prog-wfs__arrow { display: flex; gap: 6px; }
.prog-wfs__arrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); opacity: 0.25; animation: wfs-dot 1.6s ease-in-out infinite; }
.prog-wfs__arrow i:nth-child(2) { animation-delay: 0.2s; }
.prog-wfs__arrow i:nth-child(3) { animation-delay: 0.4s; }
@keyframes wfs-dot { 0%, 100% { opacity: 0.25; transform: none; } 40% { opacity: 1; transform: translateX(4px); } }
@media (min-width: 768px) {
  .section .prog-crew { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6) var(--space-8); padding: var(--space-6) var(--space-8); }
  .prog-wfs { grid-template-columns: minmax(0, 1.2fr) auto; }
}
@media (max-width: 767px) {
  .prog-gallery__plane { left: -10%; opacity: 0.55; }
  .prog-gallery::after { background: linear-gradient(0deg, var(--color-bg) 25%, color-mix(in srgb, var(--color-bg) 70%, transparent) 60%, var(--color-bg)); }
}
.prog-h2 { margin-bottom: var(--space-4) !important; }
/* what we look for: two traits and a tools card */
.prog-look { display: grid; gap: var(--space-3); }
.prog-trait, .prog-tools { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-6); border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--color-surface); }
.prog-trait strong, .prog-tools strong { font-size: var(--text-lg); }
.prog-trait__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-2); border-radius: 12px; background: var(--color-floated); color: var(--color-text); }
.prog-trait__icon svg { width: 22px; height: 22px; }
.prog-tools__row { display: flex; gap: var(--space-3); margin: var(--space-2) 0; }
.prog-tool { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; font-weight: 800; font-size: 1.35rem; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--color-bg)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent); line-height: 1; transition: transform 0.3s var(--ease); }
.prog-tool small { margin-top: -8px; font-size: 0.5625rem; font-weight: 600; color: var(--color-text-muted); }
.prog-tool:hover { transform: translateY(-3px) rotate(-3deg); }
/* how you get in: three big numbers on a line */
.prog-steps { position: relative; list-style: none; display: grid; gap: var(--space-4); margin: 0; padding: 0; }
.prog-steps li { position: relative; display: grid; gap: var(--space-1); padding: var(--space-6); border-radius: var(--radius-card); background: var(--color-floated); }
.prog-steps__num { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--color-text-muted); margin-bottom: var(--space-2); }
.prog-steps strong { font-size: var(--text-lg); }
/* what you get */
.prog-perks { display: grid; gap: var(--space-3); }
.prog-perk { display: grid; gap: var(--space-1); padding: var(--space-6); border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--color-surface); }
.prog-perk strong { font-size: var(--text-lg); }
.prog-perks { grid-auto-rows: 1fr; }
.prog-perk__big { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--space-3); border-radius: 50%; background: var(--color-floated); font-size: 1.4rem; font-weight: 800; }
.prog-perk--lead { background: var(--color-inverse); color: var(--color-on-inverse); border-color: transparent; }
.prog-perk--lead .prog-perk__big { background: color-mix(in srgb, var(--color-on-inverse) 14%, transparent); }
.prog-perk--lead span:last-child { opacity: 0.75; }
/* the closed door */
.prog-door { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); text-align: center; border-radius: var(--radius-featured); border: 2px dashed var(--color-border-strong); background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--color-text) 3%, transparent) 14px 28px); }
.prog-door h2 { margin: var(--space-2) 0 0; font-size: var(--text-xl); }
.prog-door p { margin: 0; }
.prog-door__lock { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-inverse); color: var(--color-on-inverse); animation: lock-nudge 4s ease-in-out infinite; }
.prog-door__lock svg { width: 28px; height: 28px; }
@keyframes lock-nudge { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-10deg); } 94% { transform: rotate(8deg); } }
.prog-door__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.prog-door__actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (min-width: 768px) {
  .prog-look { grid-template-columns: 1fr 1fr 1.3fr; }
  .prog-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prog-steps li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(-1 * var(--space-4)); width: var(--space-4); height: 2px; background: var(--color-border-strong); }
  .prog-perks { grid-template-columns: 1fr 1fr; }
}

/* Intro: one card into the catalogue, with two bands of the feed's faces drifting past */
.explore {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; overflow: hidden; padding: var(--space-6);
  border-radius: var(--radius-featured); border: 1px solid var(--color-border);
  background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, #7A5AF8 calc(12% * var(--wash)), transparent), transparent 60%), radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--color-primary) calc(10% * var(--wash)), transparent), transparent 60%), var(--color-surface);
  transition: border-color 0.3s, box-shadow 0.4s var(--ease);
}
.explore:hover { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--color-primary) 60%, transparent); }
.explore__text { position: relative; z-index: 1; display: grid; gap: var(--space-2); justify-items: start; }
.explore__title { margin: 0; font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
.explore__cta { position: relative; z-index: 1; justify-self: start; }
.explore:hover .explore__cta { filter: brightness(1.08); }
.explore__wall { min-width: 0; display: grid; gap: var(--space-3); padding-block: var(--space-8); margin-block: calc(-1 * var(--space-6)); transform: rotate(-4deg); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.explore__band { display: flex; gap: var(--space-3); width: max-content; animation: band 48s linear infinite; }
.explore__band--back { animation-direction: reverse; animation-duration: 56s; margin-left: -60px; }
.explore__band img { flex: none; width: clamp(72px, 8vw, 104px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: #000; box-shadow: 0 0 0 3px var(--color-floated), 0 12px 22px -14px rgb(0 0 0 / 0.6); transition: transform 0.4s var(--ease); }
@keyframes band { to { transform: translateX(-50%); } }
/* Phones: the title with a small button under it on the left, the bands of faces on the right */
@media (max-width: 767px) {
  .explore { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: 1fr auto 1fr; gap: 0 var(--space-2); padding: var(--space-4) 0 var(--space-4) var(--space-4); min-height: 172px; }
  .explore__text { grid-column: 1; grid-row: 1 / 3; align-self: end; row-gap: 2px; }
  .explore__title { font-size: var(--text-lg); }
  .explore__text .muted { margin: 0; font-size: var(--text-xs); }
  .explore__cta { grid-column: 1; grid-row: 3; align-self: start; justify-self: start; margin-top: var(--space-3); min-height: 34px; padding: 6px 14px; font-size: var(--text-xs); box-shadow: none; }
  .explore__wall { grid-column: 2; grid-row: 1 / -1; align-self: center; gap: var(--space-2); padding-block: var(--space-2); margin-block: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
  .explore__band { gap: var(--space-2); }
  .explore__band img { width: 58px; }
}
/* With JS the bands are driven (and dragged) by site.js instead of the CSS loop */
.explore.is-live .explore__band { animation: none; will-change: transform; }
.explore__wall { position: relative; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.explore.is-dragging .explore__wall { cursor: grabbing; }
.explore__face { flex: none; display: block; border-radius: 50%; -webkit-user-drag: none; }
.explore__face:hover img, .explore__face:focus-visible img { box-shadow: 0 0 0 3px var(--color-primary), 0 12px 22px -14px rgb(0 0 0 / 0.6); transform: scale(1.06); }
.explore.is-dragging .explore__face img { transform: none; }

/* Intro: the technology and where it runs, in one calm block */
.essentials { display: grid; gap: var(--space-6); padding: var(--space-8); border-radius: var(--radius-featured); border: 1px solid var(--color-border); background: radial-gradient(60% 90% at 0% 0%, color-mix(in srgb, var(--color-primary) calc(5% * var(--wash)), transparent), transparent 70%), var(--color-surface); }
.essentials__head .section__title { margin-bottom: var(--space-2); }
.essentials__head p { margin: 0; }
.essentials__facts { list-style: none; display: grid; gap: var(--space-3); margin: 0; padding: 0; }
/* each fact its own small card, told apart by a quiet tint */
.fact {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); row-gap: 2px; align-items: center;
  padding: var(--space-4); border-radius: var(--radius-banner); border: 1px solid var(--color-border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) calc(7% * var(--wash)), var(--color-surface)), var(--color-surface) 60%);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s var(--ease);
}
.fact:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 40%, var(--color-border)); box-shadow: 0 14px 28px -20px var(--c); }
.fact__icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.fact__icon svg { width: 22px; height: 22px; }
.fact strong { font-size: var(--text-sm); }
.fact .muted { font-size: var(--text-xs); }
.wff-battery__fill { transform-box: fill-box; transform-origin: left; animation: battery 3s var(--ease) infinite; }
@keyframes battery { 0% { transform: scaleX(0.25); } 60%, 100% { transform: scaleX(1); } }
.essentials__devices { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.essentials__devices .link--arrow { margin-left: auto; }
.essentials__check { margin: 0 0 0 auto; }
/* A quiet way in for designers */
.designer-callout { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); padding: var(--space-4) var(--space-6); border-radius: var(--radius-card); border: 1px dashed var(--color-border-strong); transition: border-color 0.25s, background-color 0.25s; }
.designer-callout:hover { border-color: var(--color-text-muted); background: var(--color-floated); }
.designer-callout > span:first-child { display: grid; gap: 2px; }
.designer-callout .muted { font-size: var(--text-sm); }
.designer-callout__go { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-left: auto; border-radius: 50%; background: var(--color-floated); transition: transform 0.25s var(--ease); }
.designer-callout__go svg { width: 18px; height: 18px; }
.designer-callout:hover .designer-callout__go { transform: translateX(3px); }

/* Scroll reveal (class added by site.js only, so nothing hides without JS) */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-new) 70%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes blink { 50% { opacity: 0; } }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--space-6); }
.steps li { counter-increment: step; display: grid; gap: var(--space-1); padding-left: 60px; position: relative; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--color-inverse); color: var(--color-on-inverse); font-weight: 700;
}

/* Chips */
.chips { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-6) 0 var(--space-2); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips--wrap { flex-wrap: wrap; overflow: visible; padding-top: var(--space-2); }
.chip {
  flex: none; padding: 7px var(--space-4); border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
a.chip:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.chip--active, a.chip--active:hover { background: var(--color-inverse); border-color: var(--color-inverse); color: var(--color-on-inverse); font-weight: 600; }

/* Category chips: each has its own hue (--i) for a soft tint, and its emoji
   floats in a little bubble; hover wiggles it, the active one fills with colour. */
.chip--cat {
  --hue: calc(var(--i, 0) * 47 + 215);
  --tint: hsl(var(--hue) 85% 58%);
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 5px var(--space-4) 5px 5px;
  border-color: color-mix(in srgb, var(--tint) 28%, var(--color-border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 12%, var(--color-surface)), var(--color-surface) 70%);
  color: var(--color-text); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s, background 0.3s;
}
.chip--cat:not(:has(.chip__emoji)) { padding-left: var(--space-4); }
.chip__emoji {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.95rem; line-height: 1;
  background: color-mix(in srgb, var(--tint) 22%, var(--color-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 30%, transparent);
  animation: emoji-float 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.45s);
}
a.chip--cat:hover { transform: translateY(-2px); border-color: var(--tint); color: var(--color-text); box-shadow: 0 8px 18px -10px var(--tint); }
a.chip--cat:hover .chip__emoji { animation: emoji-wiggle 0.6s var(--ease); }
.chip--cat.chip--active, a.chip--cat.chip--active:hover {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, hsl(var(--hue) 85% 58%), hsl(calc(var(--hue) + 40) 80% 50%));
  box-shadow: 0 8px 20px -10px var(--tint);
}
.chip--active .chip__emoji { background: rgb(255 255 255 / 0.25); box-shadow: none; }
@keyframes emoji-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-6deg); } }
@keyframes emoji-wiggle { 0% { transform: scale(1); } 30% { transform: scale(1.3) rotate(-14deg); } 60% { transform: scale(1.15) rotate(10deg); } 100% { transform: scale(1); } }
.carousel--chips > .chips { padding: var(--space-2) var(--space-1); }

/* Category page: All / Free / Premium */
.segmented { display: inline-flex; gap: 4px; margin: var(--space-4) 0 var(--space-4); padding: 4px; border-radius: var(--radius-pill); background: var(--color-floated); border: 1px solid var(--color-border); }
.segmented__opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--space-4); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.segmented__opt:hover { color: var(--color-text); }
.segmented__opt svg { width: 14px; height: 14px; color: #F79009; }
.segmented__opt[aria-current="page"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); }
.segmented__opt--premium[aria-current="page"] { background: var(--gradient-premium); color: var(--color-on-premium); }

/* Horizontal rows (app LazyRow).
   A column is exactly 1/--cols of the row, so rows page cleanly; minmax(…, 1fr)
   lets a row with fewer items stretch to the full width instead of leaving the
   right side empty. Without JS a row scrolls; site.js turns it into a paged
   carousel (no scrolling, prev/next buttons beside it, swipe on touch). */
.row-scroll {
  --cols: 3; /* on phones, the same three-across size as the face grids */
  --gap: var(--space-3);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)), 1fr);
  gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  /* room for hover lift and shadows, which overflow would otherwise clip */
  padding: var(--space-4) var(--space-2) var(--space-6);
  scroll-padding-inline: var(--space-2);
}
.row-scroll::-webkit-scrollbar { display: none; }
.row-scroll > * { scroll-snap-align: start; min-width: 0; }
.row-scroll--featured { --cols: 1.75; --gap: var(--space-3); }
.row-scroll--bundles { --cols: 1.12; --gap: var(--space-4); }
.row-scroll--banners { --cols: 1.08; --gap: var(--space-4); }
.row-scroll--designers { --cols: 1.4; --gap: var(--space-4); }

/* Carousel (built by site.js): [prev] [row] [next]. The buttons keep their
   space even when a row fits, so every row has the same width. */
.carousel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.carousel > .row-scroll { overflow: hidden; touch-action: pan-y; }
.carousel > .row-scroll img { -webkit-user-drag: none; }
.carousel__btn {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-card); cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.25s var(--ease), opacity 0.2s;
}
.carousel__btn svg { width: 18px; height: 18px; }
.carousel__btn:hover:not(:disabled) { background: var(--color-inverse); border-color: var(--color-inverse); color: var(--color-on-inverse); transform: scale(1.06); }
.carousel__btn:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
.carousel:not(.is-scrollable) .carousel__btn { visibility: hidden; }
/* Category chips: variable-width items, so they page by width, not columns.
   The chips' vertical padding moves to the wrapper so the buttons centre on them. */
.carousel--chips { padding: var(--space-6) 0 var(--space-2); }
.carousel--chips > .chips { overflow: hidden; touch-action: pan-y; padding: var(--space-1) 0; }
.carousel--chips .carousel__btn { width: 32px; height: 32px; }
.carousel--chips .carousel__btn svg { width: 16px; height: 16px; }
.carousel--chips:not(.is-scrollable) { grid-template-columns: 0 minmax(0, 1fr) 0; gap: 0; }
/* Touch screens wider than a phone (tablets, phones in landscape): keep the
   buttons, but the row also scrolls under the finger. */
@media (min-width: 768px) and (pointer: coarse) {
  .carousel > .row-scroll, .carousel--chips > .chips { overflow-x: auto; touch-action: auto; -webkit-overflow-scrolling: touch; }
}
/* Phones: no buttons, the row scrolls under the finger and runs to the screen
   edge, like the app. site.js leaves touch gestures to the browser here. */
@media (max-width: 767px) {
  .carousel, .carousel--chips:not(.is-scrollable) { display: block; margin: 0 calc(-1 * var(--space-4)); }
  .carousel__btn { display: none; }
  .carousel > .row-scroll, .carousel--chips > .chips { overflow-x: auto; touch-action: auto; padding-inline: var(--space-4); scroll-padding-inline: var(--space-4); }
  .carousel > .row-scroll { grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); } /* 100% is already inside the padding */
  .carousel--chips { padding: var(--space-4) 0 0; }
  /* banners: one in the middle, the edges of its neighbours on both sides */
  .carousel > .row-scroll--banners { grid-auto-columns: 84%; padding-inline: 8%; scroll-padding-inline: 8%; }
  .row-scroll--banners > * { scroll-snap-align: center; }
}

/* Grids */
/* Same density as the app's GridWatchFace: ~120px tiles, small even gaps */
.face-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); padding: var(--space-2) 0 var(--space-8); }
.bundle-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-bottom: var(--space-8); }

/* Watch frame: every face is shown round, like on the wrist */
.watch-frame {
  display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 4px solid transparent;
  background: linear-gradient(var(--watch-bezel), var(--watch-bezel)) padding-box, var(--watch-ring) border-box;
  box-shadow: var(--watch-shadow);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.watch-frame img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; transition: transform 0.6s var(--ease), opacity 0.5s var(--ease); }
.watch-frame--lg { border-width: 8px; }

/* Images fade in once loaded (class only ever added by site.js) */
img.is-loading { opacity: 0; }

/* Face tile, as in the app (SharedWatchFaceItem): the round face sits on a
   rounded uiFloated square, 2px inset, with NEW / -X% badges top-left. */
.face-tile {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 2px;
  border-radius: var(--radius-tile); background: var(--color-floated);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.face-tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; transition: transform 0.6s var(--ease), opacity 0.5s var(--ease); }
.face-tile__badges { position: absolute; top: 6%; left: 6%; display: flex; gap: 4px; pointer-events: none; }
.face-tile__badges:empty { display: none; }
.badge-new, .badge-off {
  padding: 1px 5px; border-radius: 6px; font-size: 0.625rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; color: #fff; text-transform: uppercase;
}
.badge-new { background: var(--color-new); }
.badge-off { background: var(--color-discount); }

/* Cards */
.face-card { display: grid; gap: var(--space-1); justify-items: center; align-content: start; text-align: center; min-width: 0; }
.face-card .face-tile { width: 100%; max-width: 160px; }
.face-card:hover .face-tile { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.face-card:hover .face-tile img { transform: scale(1.04); }
.face-card__name { margin-top: var(--space-1); font-weight: 600; font-size: var(--text-sm); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Featured face (FeaturedFaceItem): round hero overlapping a rounded card */
.featured-card {
  container-type: inline-size;
  position: relative; display: grid; align-items: center; width: 100%; padding: 12px 0;
  transition: transform 0.35s var(--ease);
}
/* Sized by the card's own width, not the screen's: it adapts wherever it lands */
.featured-card > * { --hero: clamp(96px, 30cqi, 136px); }
.featured-card:hover { transform: translateY(-3px); }
.featured-card:active { transform: scale(0.98); }
.featured-card__body {
  display: grid; gap: var(--space-1); align-content: center; min-height: var(--hero); min-width: 0; /* no width: 100%, it would overflow by the margin */
  margin-left: calc(var(--hero) * 0.44); padding: 18px var(--space-4) 18px calc(var(--hero) * 0.66);
  border-radius: var(--radius-featured); border: 1px solid var(--color-border-strong); background: var(--color-floated);
  transition: border-color 0.3s, box-shadow 0.35s var(--ease);
}
.featured-card:hover .featured-card__body { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border-strong)); box-shadow: var(--shadow-lift); }
.featured-card__name { font-size: var(--text-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.featured-card .badge { justify-self: start; }
.featured-card__thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); overflow: hidden; }
.featured-card__thumbs img { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--color-border-strong); transition: transform 0.3s var(--ease); }
.featured-card:hover .featured-card__thumbs img { transform: translateY(-2px); }
.featured-card:hover .featured-card__thumbs img:nth-child(2) { transition-delay: 40ms; }
.featured-card:hover .featured-card__thumbs img:nth-child(3) { transition-delay: 80ms; }
.featured-card:hover .featured-card__thumbs img:nth-child(4) { transition-delay: 120ms; }
.featured-card__hero {
  position: absolute; left: 0; top: 50%; translate: 0 -50%; display: grid; width: var(--hero); aspect-ratio: 1; padding: 3px;
  border-radius: 50%; background: var(--color-bg); box-shadow: var(--shadow-hero), 0 0 0 2.5px var(--color-floated);
}
.featured-card__hero img { grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.featured-card__hero img.is-active { opacity: 1; }
.featured-card__popular { position: absolute; top: 2px; right: 18px; box-shadow: 0 4px 10px -4px rgb(0 0 0 / 0.35); }
.featured-card__badges { top: 10px; left: calc(var(--hero) * 0.12); }
/* Narrow (phones): a poster. The face big on top, overlapping a compact card
   with just the name and price; the previews are left out, they only crowd it. */
@container (max-width: 330px) {
  .featured-card > * { --hero: 74cqi; }
  .featured-card__hero { position: relative; grid-row: 1; left: auto; top: auto; translate: none; justify-self: center; z-index: 1; }
  .featured-card__body { grid-row: 2; min-height: 0; margin: calc(var(--hero) * -0.42) 0 0; padding: calc(var(--hero) * 0.48) var(--space-3) var(--space-3); justify-items: center; text-align: center; border-radius: var(--radius-card); }
  .featured-card__name { font-size: var(--text-sm); }
  .featured-card .badge { justify-self: center; }
  .featured-card__thumbs { display: none; }
  .featured-card__popular { top: 14px; right: 0; padding: 2px 6px; font-size: 0.625rem; z-index: 2; }
  .featured-card__badges { top: 14px; left: 0; z-index: 2; }
}
.badge--popular { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: #FFD28A; color: #5A3300; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* dark text on soft amber: readable at this size */
.badge--popular svg { width: 12px; height: 12px; }

.bundle-card { display: grid; gap: var(--space-4); padding: var(--space-6); align-content: start; transition: box-shadow 0.45s var(--ease); }
.bundle-card:hover { box-shadow: var(--shadow-lift); }
.bundle-card__faces { display: flex; padding: var(--space-2) 0; }
.bundle-card__face { position: relative; width: 38%; max-width: 150px; margin-right: -8%; transition: transform 0.45s var(--ease); }
.bundle-card__face:last-child { margin-right: 0; }
.bundle-card__face .watch-frame { width: 100%; }
.bundle-card__face:hover { z-index: 1; transform: translateY(-6px) scale(1.04); }
.bundle-card__face:hover .watch-frame { box-shadow: var(--watch-shadow-hover); }
.bundle-card__name { display: grid; gap: 2px; }
.bundle-card__name strong { font-size: var(--text-md); letter-spacing: -0.01em; }
.bundle-card__name .muted { font-size: var(--text-sm); }
.bundle-card__name:hover strong { color: var(--color-primary-strong); }

/* Designer card: the banner framed on its own, avatar overlapping its bottom
   edge, name and count on the card below (never on top of the artwork). */
.designer-card {
  --avatar: 56px;
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--radius-banner); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
a.designer-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
.designer-card__media {
  position: relative; display: block; aspect-ratio: 16 / 7; overflow: hidden;
  border-radius: calc(var(--radius-banner) - 1px) calc(var(--radius-banner) - 1px) 0 0; background: var(--gradient-brand);
}
.designer-card__banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.6s var(--ease), opacity 0.5s var(--ease); }
a.designer-card:hover .designer-card__banner { transform: scale(1.04); }
.designer-card__info { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: calc(var(--avatar) * 0.5 + 28px); padding: var(--space-2) var(--space-3) var(--space-3) calc(var(--avatar) + var(--space-3) * 2); }
.designer-card__avatar {
  position: absolute; left: var(--space-3); top: calc(var(--avatar) * -0.5); display: block; width: var(--avatar); aspect-ratio: 1; padding: 2px;
  border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-card);
}
.designer-card__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #000; }
.designer-card__text { display: grid; min-width: 0; line-height: 1.3; }
.designer-card__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.designer-card__count { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.designer-card__go { display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; background: var(--color-surface-2); color: var(--color-text); transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease); }
.designer-card__go svg { width: 16px; height: 16px; }
a.designer-card:hover .designer-card__go { background: var(--color-primary-strong); color: var(--color-on-primary); transform: translateX(2px); }
/* Designers page: a grid of the same card, a bit larger */
.designer-list { display: grid; gap: var(--space-6) var(--space-4); padding: var(--space-2) 0 var(--space-8); }
.designer-list__more {
  display: grid; place-content: center; gap: var(--space-1); min-height: 140px; margin: 0; padding: var(--space-6); text-align: center;
  border: 2px dashed var(--color-border-strong); border-radius: var(--radius-banner);
  color: var(--color-text-muted); transition: border-color 0.25s;
}
.designer-list__more strong { color: var(--color-text); }
.designer-list__more:hover { border-color: var(--color-primary); }
.designer-card--wide { --avatar: 72px; }
.designer-card--wide .designer-card__media { aspect-ratio: 16 / 6; }
.designer-card--wide .designer-card__name { font-size: var(--text-lg); }
.designer-card--wide .designer-card__count { font-size: var(--text-sm); }
/* Designer page: the banner fills the top, the details sit on a frosted panel over it */
.designer-hero { position: relative; display: grid; align-content: end; min-height: clamp(240px, 24vw, 300px); margin: var(--space-4) 0 var(--space-4); border-radius: var(--radius-featured) var(--radius-featured) 0 0; overflow: hidden; isolation: isolate; background: var(--gradient-brand); }
/* the banner fades down into the page, so its colours stay soft and the panel has no hard edge to sit on */
.designer-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 8%, transparent) 0%, color-mix(in srgb, var(--color-bg) 45%, transparent) 45%, var(--color-bg) 100%); }
.designer-hero:not(.designer-hero--plain) { background: none; } /* the image is the backdrop; a gradient under it bleeds at the clipped edges */
.designer-hero--plain { min-height: 0; padding-top: var(--space-16); }
.designer-hero__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.designer-hero__back { position: absolute; top: var(--space-4); left: var(--space-4); padding: 6px var(--space-3); border-radius: var(--radius-pill); background: rgb(0 0 0 / 0.45); color: #fff; font-size: var(--text-sm); font-weight: 600; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.designer-hero__panel {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: center; margin: var(--space-3); padding: var(--space-4);
  border-radius: calc(var(--radius-featured) - 8px);
  background: color-mix(in srgb, var(--color-bg) 40%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.designer-hero__avatar { display: block; width: 72px; aspect-ratio: 1; padding: 3px; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-card); }
.designer-hero__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #000; }
.designer-hero__info { min-width: 0; }
.designer-hero__info h1 { margin: 0 0 var(--space-1); font-size: clamp(1.4rem, 3.2vw, 2.25rem); }
.designer-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.designer-hero__meta .verified-badge { margin: 0; }
.designer-hero__about { grid-column: 1 / -1; margin: var(--space-2) 0 0; font-size: var(--text-sm); max-width: 70ch; }
.designer-hero__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.designer-hero__actions .app-badge { min-height: 48px; }
.designer-faces { padding-top: 0; }
@media (max-width: 767px) {
  /* phones: the banner shows above, the details melt into its faded bottom instead of sitting on a box */
  .designer-hero, .designer-hero--plain { min-height: 0; padding-top: 112px; border-radius: var(--radius-featured) var(--radius-featured) 0 0; }
  .designer-hero__bg { height: 200px; }
  .designer-hero::after { background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--color-bg) 30%, transparent) 70px, var(--color-bg) 200px); }
  .designer-hero__panel { margin: 0; padding: 0 var(--space-2) var(--space-2); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (min-width: 768px) {
  .designer-hero__panel { grid-template-columns: auto minmax(0, 1fr) auto; margin: var(--space-4); padding: var(--space-4) var(--space-6); }
  .designer-hero__avatar { width: 96px; }
  .designer-hero__actions { grid-column: auto; }
  .designer-hero__about { grid-column: 2 / 3; }
}
.verified-badge {
  display: inline-flex; align-items: center; gap: var(--space-1); margin: var(--space-2) 0 var(--space-3);
  padding: 3px var(--space-3) 3px var(--space-2); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary);
  font-size: var(--text-sm); font-weight: 600;
}
.verified-badge svg { width: 18px; height: 18px; flex: none; }
/* Home banners (BannerItem): 16:9, 16px corners, shown whole */
.banner {
  display: block; width: 100%; border-radius: var(--radius-banner); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--color-floated); box-shadow: var(--shadow-card);
  transition: box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
.banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease), opacity 0.5s var(--ease); }
a.banner:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
a.banner:hover img { transform: scale(1.03); }

.badge { display: inline-block; padding: 2px var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.01em; }
/* "Free" is plain italic text in the app (FreeBadge), not a pill */
.badge--free { padding: 0; background: none; color: var(--color-text-muted); font-style: italic; font-weight: 600; }
/* Premium stays quiet: a small gold crown and text, no filled pill */
.badge--premium { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; color: #B7791F; font-weight: 600; }
.badge--premium::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.5 7.5 11 12 4l4.5 7L21 7.5 19 18H5L3 7.5Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.5 7.5 11 12 4l4.5 7L21 7.5 19 18H5L3 7.5Z'/%3E%3C/svg%3E") center / contain no-repeat; }
:root[data-theme="dark"] .badge--premium { color: #E8B95A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge--premium { color: #E8B95A; } }
/* Rating, likes and views: icon-sized icons inline with the text */
.stat { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.stat svg { flex: none; width: 14px; height: 14px; opacity: 0.8; }
.stat--rating { color: #E8A317; font-weight: 600; }
.face-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }

/* Face detail */
.face-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding: var(--space-8) 0; }
.face-detail > * { min-width: 0; } /* a wide row inside (the tags) must not stretch the column */
.face-detail__info h1 { margin-bottom: var(--space-2); }
.face-hero { position: relative; width: min(380px, 82%); margin: var(--space-6) auto var(--space-8); }
.face-hero__aod { position: absolute; top: 0; right: calc(-1 * var(--space-2)); background: var(--color-surface); box-shadow: var(--shadow-card); }
.face-hero__aod:hover { background: var(--color-surface-2); }
.face-hero [hidden] { display: none; } /* .icon-btn sets display, which would beat the attribute */
.face-hero__nav { position: absolute; top: 50%; transform: translateY(-50%); background: var(--color-surface); box-shadow: var(--shadow-card); }
.face-hero__nav:hover { background: var(--color-surface-2); }
.face-hero__nav--prev { left: calc(-1 * var(--space-6)); }
.face-hero__nav--next { right: calc(-1 * var(--space-6)); }
.face-hero__aod[aria-pressed="true"] { background: var(--color-text); color: var(--color-surface); }
.zoomable { position: relative; display: block; cursor: zoom-in; touch-action: pan-y; } /* a horizontal swipe changes the image */
.zoomable .watch-frame { width: 100%; }
.zoomable:hover .watch-frame { transform: translateY(-4px); box-shadow: var(--watch-shadow-hover); }

/* Under the dial: image dots (the active one is a pill that fills as a timer) and the Normal / AOD switch */
.face-hero__controls { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin: calc(-1 * var(--space-4)) auto var(--space-6); }
.face-hero__controls:empty { display: none; }
.face-dots { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
.face-dots[hidden] { display: none; }
.face-dots__dot {
  position: relative; display: block; width: 10px; height: 10px; padding: 0; border: 0; border-radius: var(--radius-pill); overflow: hidden; cursor: pointer;
  background: var(--color-border-strong); transition: width 0.45s var(--ease), height 0.45s var(--ease), background-color 0.3s;
}
.face-dots__dot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s; }
.face-dots__dot:hover { background: var(--color-text-muted); }
.face-dots__dot:hover img { opacity: 1; }
.face-dots__dot:hover:not(.is-active) { width: 22px; height: 22px; }
.face-dots__dot.is-active { width: 34px; background: color-mix(in srgb, var(--color-primary) 30%, var(--color-border-strong)); }
.face-dots__dot.is-active img { opacity: 0; }
.face-dots__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--gradient-brand); transform-origin: left; transform: scaleX(0); }
.face-dots__dot.is-active .face-dots__fill { transform: scaleX(1); }
.face-dots.is-playing .face-dots__dot.is-active .face-dots__fill { animation: dot-fill 4s linear; }
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.aod-switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface); box-shadow: var(--shadow-card); font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); cursor: pointer;
}
.aod-switch[hidden] { display: none; }
.aod-switch__opt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px var(--space-4); transition: color 0.3s; }
.aod-switch__opt svg { width: 16px; height: 16px; }
.aod-switch__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--radius-pill); background: var(--color-inverse); transition: transform 0.45s var(--ease), background-color 0.3s; }
.aod-switch[aria-pressed="false"] .aod-switch__opt:nth-child(2) { color: var(--color-on-inverse); }
.aod-switch[aria-pressed="true"] .aod-switch__thumb { transform: translateX(100%); background: #000; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.aod-switch[aria-pressed="true"] .aod-switch__opt:nth-child(3) { color: #fff; }
/* The dial turns in a touch on every change, and dims for AOD */
.watch-frame.is-switching img { animation: dial-in 0.6s var(--ease); }
@keyframes dial-in { from { opacity: 0.2; transform: scale(0.94) rotate(-6deg); } to { opacity: 1; transform: none; } }
/* AOD: the screen dims a little, like a watch in ambient mode */
.watch-frame img { transition: filter 0.5s var(--ease), transform 0.6s var(--ease), opacity 0.5s var(--ease); }
.watch-frame.is-aod { position: relative; box-shadow: var(--watch-shadow), 0 0 0 6px rgb(0 0 0 / 0.04); }
.watch-frame.is-aod img { filter: brightness(0.62) saturate(0.85); }

/* Designer on the face page: avatar, verified name, followers and faces */
.designer-label { margin: var(--space-3) 0 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.designer-chip {
  position: relative; display: flex; align-items: center; gap: var(--space-3); max-width: 460px; margin: var(--space-2) 0 var(--space-4); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-card);
  transition: border-color 0.25s, box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.designer-chip:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.designer-chip__avatar { flex: none; width: 48px; height: 48px; padding: 2px; border-radius: 50%; background: var(--gradient-brand); }
.designer-chip__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #000; border: 2px solid var(--color-surface); }
.designer-chip__text { display: grid; min-width: 0; line-height: 1.3; }
.designer-chip__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole chip clicks through */
.designer-chip__name { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.designer-chip__verified { flex: none; width: 16px; height: 16px; color: var(--color-primary); }
.designer-chip__meta { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.designer-chip__go { margin-left: auto; padding: 6px var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-2); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; transition: background-color 0.25s, color 0.25s; }
.designer-chip:hover .designer-chip__go { background: var(--color-primary-strong); color: var(--color-on-primary); }

/* "Get it on AllFaces": store-style badge with the app mark */
.app-badge {
  display: inline-flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 6px var(--space-6) 6px 8px;
  border-radius: 14px; background: #000; color: #fff; border: 1px solid rgb(255 255 255 / 0.18);
  box-shadow: 0 10px 24px -12px var(--color-primary); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.app-badge:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px var(--color-primary); }
.app-badge__mark, .app-badge__mark img { display: block; width: 42px; height: 42px; }
.app-badge__text { display: grid; line-height: 1.1; }
.app-badge__text small { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.app-badge__text strong { font-size: 1.25rem; letter-spacing: -0.01em; }

/* Google's badge: the PNG carries its own clear space, trimmed by the margins */
.play-badge { display: inline-block; margin: -10px -12px; line-height: 0; transition: transform 0.25s var(--ease); }
.play-badge:hover { transform: translateY(-2px); }
.play-badge img { width: auto; height: 76px; }
.compatibility .play-badge, .section--tinted .play-badge { margin-top: var(--space-2); }
.device-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); padding: 0; margin: var(--space-4) 0 var(--space-6); }
.device-chips li { padding: 4px var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-xs); font-weight: 600; }

.row-scroll.thumbs { --cols: 3; --gap: var(--space-3); padding-top: var(--space-2); }
.thumbs--marketing .thumb-link { aspect-ratio: auto; }
.thumbs--marketing .thumb { height: auto; }
.thumb-link {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; cursor: zoom-in;
  border-radius: var(--radius-sm); background: var(--color-surface-2); box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.thumb-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), opacity 0.5s var(--ease); }
.thumb-link:hover .thumb { transform: scale(1.06); }
.thumb-link--round { background: var(--watch-bezel); }
.thumb-link--round .thumb { object-fit: contain; padding: 10%; border-radius: 50%; }
.thumb-link__label {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  padding: 1px var(--space-2); border-radius: var(--radius-pill); white-space: nowrap;
  background: rgb(0 0 0 / 0.6); color: #fff; font-size: 0.6875rem; font-weight: 600;
}
.stats { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.stats li { padding: 4px var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-2); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-8) 0; }

/* Lightbox (built by site.js) */
.lightbox {
  touch-action: pan-y;
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden;
}
.lightbox::backdrop { background: var(--color-scrim); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); opacity: 0; transition: opacity 0.35s var(--ease); }
.lightbox.is-open::backdrop { opacity: 1; }
.lightbox__stage {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center; align-content: center; gap: var(--space-4);
  padding: 72px var(--space-4) 88px; opacity: 0; transform: scale(0.94);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.lightbox.is-open .lightbox__stage { opacity: 1; transform: none; }
.lightbox__img {
  max-width: min(92vw, 1100px); max-height: calc(100vh - 180px); width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-card); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.8);
  user-select: none; -webkit-user-drag: none;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.lightbox__img--round { border-radius: 50%; max-width: min(84vw, 560px); max-height: min(calc(100vh - 180px), 560px); box-shadow: 0 0 0 8px #1c1c1f, 0 0 0 9px rgb(255 255 255 / 0.12), 0 40px 80px -30px rgb(0 0 0 / 0.9); }
.lightbox__img.is-out { opacity: 0; transform: translateX(var(--from, 0)) scale(0.96); transition: none; }
.lightbox__caption { font-size: var(--text-sm); color: rgb(255 255 255 / 0.72); text-align: center; min-height: 1.5em; }
.lightbox__btn {
  position: absolute; z-index: 1; display: grid; place-items: center; padding: 0; cursor: pointer;
  width: 68px; height: 68px; border-radius: var(--radius-pill);
  border: 1px solid rgb(255 255 255 / 0.16); background: rgb(255 255 255 / 0.08); color: #fff;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.2s, transform 0.25s var(--ease), opacity 0.2s;
}
.lightbox__btn:hover { background: rgb(255 255 255 / 0.18); transform: scale(1.06); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__btn--prev { left: var(--space-4); top: 50%; margin-top: -26px; }
.lightbox__btn--next { right: var(--space-4); top: 50%; margin-top: -26px; }
.lightbox__btn--close { top: var(--space-4); right: var(--space-4); width: 44px; height: 44px; }
.lightbox__count {
  position: absolute; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
  padding: 4px var(--space-3); border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.08);
  font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: rgb(255 255 255 / 0.8);
}
.lightbox.is-single .lightbox__btn--prev, .lightbox.is-single .lightbox__btn--next, .lightbox.is-single .lightbox__count { display: none; }

/* Footer */
/* Legal pages opened from the app with ?menu=false (see legal.html). */
html[data-embed] .site-header,
html[data-embed] .site-footer,
html[data-embed] .skip-link { display: none; }

.site-footer { margin-top: var(--space-16); padding: var(--space-6) 0; border-top: 1px solid var(--color-border); background: var(--color-surface); }
/* One row; wraps onto more lines only on narrow screens */
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); font-size: var(--text-sm); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-left: auto; }
.site-footer nav a { color: var(--color-text-muted); transition: color 0.2s; }
.site-footer nav a:hover { color: var(--color-text); }
.site-footer .site-footer__legal { display: grid; gap: var(--space-1); margin-top: var(--space-6); padding-top: var(--space-6); line-height: 1.6; border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-muted); }
.site-footer__legal p { margin: 0; }
.site-footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Legal pages: the short "this website" notice above the full policy */
.legal-site { margin-bottom: var(--space-8); padding: var(--space-6); border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--color-surface); }
.legal-site h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.legal-site ul { margin: var(--space-3) 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.legal-site p { margin: 0; }
.legal-site a, .legal-full a { color: var(--color-primary); }
/* the full policy: readable headings in a long document */
.legal-doc h2 { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-lg); letter-spacing: 0; }
.legal-doc h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-md); }
.legal-doc p, .legal-doc li { color: var(--color-text-muted); line-height: 1.65; overflow-wrap: anywhere; }
.legal-doc strong, .legal-doc b { color: var(--color-text); }
.legal-doc a { color: var(--color-primary); }
.legal-doc .legal-date { font-size: var(--text-sm); }

/* AI designer on the intro: the pitch on the left, a prompt typing itself and the face it makes on the right */
.ai-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; padding: var(--space-6);
  border-radius: var(--radius-featured); border: 1px solid var(--color-border); overflow: hidden;
  background: radial-gradient(60% 80% at 85% 50%, color-mix(in srgb, #7A5AF8 calc(12% * var(--wash)), transparent), transparent 70%), var(--color-surface);
}
.ai-card__kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-sm); font-weight: 600; color: #7A5AF8; }
.ai-card__kicker svg { width: 16px; height: 16px; }
.ai-card__title { margin: var(--space-2) 0; font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
.ai-card__text > .muted { margin: 0; max-width: 42ch; }
.ai-card__modes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.ai-card__modes li { padding: 4px var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-floated); font-size: var(--text-xs); font-weight: 600; }
.ai-demo { display: grid; justify-items: center; gap: var(--space-6); min-width: 0; }
.ai-demo__prompt {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; max-width: 420px; min-width: 0; padding: 6px 6px 6px var(--space-3);
  border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-bg); box-shadow: var(--shadow-card); font-size: var(--text-sm);
}
.ai-demo__spark-icon { display: grid; flex: none; color: #7A5AF8; }
.ai-demo__spark-icon svg { width: 18px; height: 18px; }
.ai-demo__typed { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ai-demo__caret { flex: none; width: 2px; height: 1.1em; margin-left: -4px; background: #7A5AF8; animation: ai-caret 1s steps(1) infinite; }
@keyframes ai-caret { 50% { opacity: 0; } }
.ai-demo__go { flex: none; margin-left: auto; padding: 6px var(--space-4); border-radius: var(--radius-pill); background: var(--color-inverse); color: var(--color-on-inverse); font-size: var(--text-xs); font-weight: 700; transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.ai-demo.is-pressing .ai-demo__go { transform: scale(0.92); box-shadow: 0 0 0 5px color-mix(in srgb, #7A5AF8 25%, transparent); }
/* the watch: faces stacked, the active one revealed with a circular wipe */
.ai-demo__watch { position: relative; display: grid; width: clamp(150px, 40vw, 200px); aspect-ratio: 1; border-radius: 50%; padding: 8px; background: #16181D; box-shadow: 0 0 0 2px #2A2D34, 0 24px 40px -22px rgb(0 0 0 / 0.7); }
.ai-demo__glow { position: absolute; inset: -14%; z-index: -1; border-radius: 50%; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, #7A5AF8 40%, transparent), transparent 45%, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 80%); filter: blur(18px); opacity: 0.5; animation: spin 8s linear infinite; transition: opacity 0.5s; }
.ai-demo.is-making .ai-demo__glow { opacity: 1; animation-duration: 2.4s; }
.ai-demo__face { grid-area: 1 / 1; width: 100%; height: 100%; max-width: none; border-radius: 50%; object-fit: cover; background: #000; opacity: 0; clip-path: circle(75% at 50% 50%); transition: opacity 0.3s, clip-path 0.9s var(--ease), filter 0.5s; }
.ai-demo__face.is-active { opacity: 1; }
.ai-demo[data-ready] .ai-demo__face.is-entering { clip-path: circle(0% at 50% 50%); }
.ai-demo.is-making .ai-demo__face.is-active { filter: blur(6px) saturate(0.6); }
@media (min-width: 768px) {
  .ai-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); padding: var(--space-8) var(--space-12); }
}
/* Face gallery: a mode with one image folds its arrows and dots away; they come back with the other mode */
.face-hero__nav, .face-dots { transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0s; }
.face-hero__nav.is-gone { opacity: 0; transform: translateY(-50%) scale(0.6); pointer-events: none; visibility: hidden; transition: opacity 0.3s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s; }
/* both rows of dots share one cell, so switching modes cross-fades them in place; the AOD switch sits below */
.face-hero__controls { display: grid; justify-items: center; }
.face-hero__controls > .face-dots { grid-area: 1 / 1; }
.face-hero__controls > .aod-switch { grid-row: 2; }
.face-dots.is-gone { opacity: 0; transform: translateY(-6px) scale(0.9); pointer-events: none; visibility: hidden; transition: opacity 0.3s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s; }
/* the header Play button only once the nav and it both fit on one line */
@media (min-width: 1024px) { .site-header__actions .btn { display: inline-flex; } .site-nav { margin-left: var(--space-6); } }
/* Face description: folded to five lines once site.js has measured it, opening smoothly */
.face-desc { margin: 0; }
.face-desc__body { margin: 0; line-height: 1.6; }
.face-desc.is-folded .face-desc__body { max-height: calc(1.6em * 5); overflow: hidden; line-height: 1.6; transition: max-height 0.5s var(--ease); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.face-desc.is-folded.is-open .face-desc__body { max-height: var(--full, 100vh); -webkit-mask-image: none; mask-image: none; }
.face-desc__more { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-2); padding: 6px var(--space-3) 6px var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.face-desc__more:hover { background: var(--color-surface-2); }
.face-desc__more svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease); }
.face-desc.is-open .face-desc__more svg { transform: rotate(180deg); }
/* On wide screens the dial stays in view while the details beside it scroll */
@media (min-width: 768px) { .face-detail__gallery { position: sticky; top: calc(var(--header-height) + var(--space-4)); } }
/* Face tags: one row; drifts end to end when it overflows, fading out at both edges */
.tag-row { overflow-x: auto; scrollbar-width: none; margin: var(--space-2) 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tag-row::-webkit-scrollbar { display: none; }
.tag-row__track { display: flex; gap: var(--space-2); width: max-content; padding: 4px 6%; }
.tag-row.is-moving { overflow: hidden; }
.tag-row.is-moving .tag-row__track { padding-inline: 0 var(--space-2); animation: band var(--tag-seconds, 24s) linear infinite; }
.tag-row.is-moving:hover .tag-row__track, .tag-row.is-moving:active .tag-row__track { animation-play-state: paused; }
.tag-row .chip { flex: none; }
/* The last line of the intro heading: what and where, in the words people search with */
.intro-hero__for { display: block; margin-top: var(--space-3); font-size: clamp(1rem, 0.45em, 1.6rem); font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--color-text-muted); }
/* Parallax layers: site.js sets their `translate` as the page scrolls */
.is-parallax { will-change: translate; }
/* Face details: a free face says so in a clear line (calm green, like a confirmation) */
.free-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.free-note__badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px var(--space-3) 3px var(--space-2); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-success) 14%, transparent); color: color-mix(in srgb, var(--color-success) 80%, var(--color-text)); font-weight: 700; }
.free-note__badge svg { width: 14px; height: 14px; }
/* The intro's big cards lift off the page a little (light mode only: --card-lift is none in dark) */
.stage, .explore, .ai-card, .essentials { box-shadow: var(--card-lift); }
/* Designer Program: a gallery face being swapped fades and shrinks a touch */
.prog-gallery__row img.is-swapping { opacity: 0; scale: 0.85; }
/* The crew: the six designers drift in the faded strip; the program's status sits under them */
.section .prog-crew { padding: var(--space-6); } /* a .container too: keep its own padding on every side */
.prog-crew > * { min-width: 0; } /* the strip is wider than its column: it must not stretch the card */
.prog-status { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--color-floated); font-size: var(--text-sm); color: var(--color-text-muted); }
.prog-status__line { display: flex; gap: var(--space-2); align-items: baseline; margin: 0; }
.prog-status__line strong { color: var(--color-text); margin-right: 4px; }
.prog-status__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); transform: translateY(-1px); }
.prog-status__dot--live { background: var(--color-success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 50%, transparent); animation: prog-live 2s ease-out infinite; }
@keyframes prog-live { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (min-width: 768px) {
  /* the status under the designers, as one line of two notes */
  .prog-status { grid-column: 1 / -1; }
}
/* Wide screens: the status is one slim pill along the bottom, Onboarding at one end, Recruiting at the other */
@media (min-width: 1100px) { .prog-status { display: flex; justify-content: space-between; gap: var(--space-6); padding: var(--space-2) var(--space-6); border-radius: var(--radius-pill); } }
/* Round pictures are made square by their own width (aspect-ratio + height:auto), never by a
   parent's height: Safari does not always resolve height:100% against an aspect-ratio box,
   which drew faces as ovals with their edges cut off. */
.watch-frame, .face-tile { display: grid; align-content: center; }
.designer-hero__avatar img, .designer-card__avatar img, .prog-crew__item img, .podium__tile img { aspect-ratio: 1; height: auto; object-fit: cover; }
/* 5. Designer page on phones: the banner fades and blurs progressively behind the details, so they always read */
@media (max-width: 767px) {
  .designer-hero::after { background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--color-bg) 25%, transparent) 40px, color-mix(in srgb, var(--color-bg) 80%, transparent) 112px, var(--color-bg) 170px); }
  .designer-hero__panel { position: relative; z-index: 0; }
  .designer-hero__panel::before {
    content: ""; position: absolute; z-index: -1; inset: -56px 0 0;
    -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 56px); mask-image: linear-gradient(180deg, transparent, #000 56px);
  }
}
/* The viewer shows just the picture: no caption under it */
.lightbox__caption { display: none; }
/* Viewer on phones: the arrows leave the picture and sit under it, either side of the counter */
@media (max-width: 767px) {
  .lightbox__btn--prev, .lightbox__btn--next { top: auto; bottom: var(--space-6); margin-top: 0; width: 52px; height: 52px; }
  .lightbox__btn--prev { left: calc(50% - 112px); }
  .lightbox__btn--next { right: calc(50% - 112px); }
  .lightbox__count { bottom: calc(var(--space-6) + 12px); }
}
/* Designer cards: the banner softens toward the bottom (a blur that grows, then the card colour), so the artwork reads as a backdrop rather than detail */
.designer-card__media { position: relative; }
.designer-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 75%); mask-image: linear-gradient(0deg, #000 10%, transparent 75%);
  background: linear-gradient(0deg, color-mix(in srgb, var(--color-surface) 70%, transparent), transparent 70%);
}
/* Viewer: the Normal / AOD switch above the counter (face page) */
.lightbox__modes {
  position: absolute; left: 50%; bottom: calc(var(--space-6) + 44px); transform: translateX(-50%); z-index: 1;
  display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.lightbox__modes button { padding: 6px var(--space-4); border: 0; border-radius: var(--radius-pill); background: none; color: rgb(255 255 255 / 0.75); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.lightbox__modes button[aria-pressed="true"] { background: #fff; color: #111; }
.lightbox.is-single .lightbox__modes { bottom: var(--space-6); } /* no counter under it */
@media (max-width: 767px) { .lightbox__modes { bottom: calc(var(--space-6) + 68px); } .lightbox.is-single .lightbox__modes { bottom: var(--space-6); } }
/* Phones: the header menu (the bottom bar is gone) */
.mobile-menu { position: relative; }
.mobile-menu summary { list-style: none; cursor: pointer; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu__panel {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 50; display: grid; min-width: 220px; padding: var(--space-2);
  border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-lift);
  animation: menu-in 0.2s var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.mobile-menu__panel a { padding: var(--space-3) var(--space-4); border-radius: var(--radius-banner); font-weight: 600; }
.mobile-menu__panel a:hover { background: var(--color-surface-2); }
.mobile-menu__cta { margin-top: var(--space-1); text-align: center; background: var(--color-primary); color: var(--color-on-primary); }
.mobile-menu__panel a.mobile-menu__cta:hover { background: var(--color-primary); filter: brightness(1.08); }
@media (min-width: 768px) { .mobile-menu { display: none; } }
/* Face tags: under the showcase images, within the page margins, fading out at both ends */
.tag-row--full { margin: var(--space-2) 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tag-row--full .tag-row__track { padding-inline: var(--space-4); }
.tag-row--full .chip { padding: 8px var(--space-4); }
/* Face page: the showcase images follow the description closely */
.face-detail { padding-bottom: var(--space-4); }
.face-detail + .section { padding-top: var(--space-2); }
/* Intro on phones: the first card follows the hero's buttons closely */
@media (max-width: 767px) {
  .intro-hero { padding-bottom: var(--space-4); }
  .intro-hero .hero__actions { margin-bottom: 0; }
  .intro-hero + .section { padding-top: var(--space-2); }
}
/* Phones: the showcase images a touch smaller, with the next one peeking in */
@media (max-width: 767px) { .row-scroll.thumbs--marketing { --cols: 3.6; } }
/* Breakpoints: sm 480, md 768, lg 1024 */
/* Face grids (collections, categories, designers): exactly 3 per row on any phone, more as the page widens */
@media (min-width: 600px) { .face-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .row-scroll--faces { --cols: 4; } }
@media (min-width: 480px) {
  .row-scroll--featured { --cols: 2.4; }
  .row-scroll--banners { --cols: 1.25; }
  .row-scroll--bundles { --cols: 1.5; }
  .row-scroll--designers { --cols: 2.2; }
  .row-scroll.thumbs { --cols: 4; }
  .bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .designer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .container { padding: 0 var(--space-6); }
  .site-nav { display: flex; margin-left: var(--space-2); white-space: nowrap; }
  .essentials__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .explore { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); grid-template-rows: 1fr auto 1fr; padding: var(--space-8) var(--space-12); min-height: 280px; }
  .explore__text { grid-column: 1; grid-row: 1 / 3; align-self: end; }
  .explore__cta { grid-column: 1; grid-row: 3; align-self: start; margin-top: var(--space-4); }
  .explore__wall { grid-column: 2; grid-row: 1 / -1; align-self: center; }
  .feature-grid, .contact-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .row-scroll { --cols: 6; --gap: var(--space-4); }
  .row-scroll--featured { --cols: 2; --gap: var(--space-6); }
  .row-scroll--bundles { --cols: 2; }
  .row-scroll--banners { --cols: 2.15; }
  .row-scroll--designers { --cols: 3; }
  .face-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
  .face-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-12); }
  .carousel { gap: var(--space-3); }
  .carousel__btn { width: 44px; height: 44px; }
  .carousel__btn svg { width: 20px; height: 20px; }
  .lightbox__btn--prev { left: var(--space-8); }
  .lightbox__btn--next { right: var(--space-8); }
}
@media (min-width: 1024px) {
  .row-scroll { --cols: 8; }
  .row-scroll--featured { --cols: 3; }
  .row-scroll--bundles { --cols: 3; }
  .row-scroll--banners { --cols: 3; --gap: var(--space-4); }
  .row-scroll--designers { --cols: 4; }
  .face-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .bundle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .designer-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  .row-scroll--banners { --cols: 3.3; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}