/* The sections under the hero: how it works, the ring, the apps strip, staying in charge, free credits and the close. */

/* ---------- how it works ---------- */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-24); }
.how > li { display: grid; gap: var(--sp-12); align-content: start; }
.how-n { font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; margin-top: var(--sp-8); }
.how p { color: var(--muted); }
.vg { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--sp-16); overflow: hidden; }
.vg-comp { width: 100%; padding: var(--sp-12) var(--sp-12) var(--sp-8); background: var(--surface); border: var(--hair) solid var(--sel); border-radius: var(--r-surf); box-shadow: var(--lift-s); text-align: left; }
.vg-field { min-height: 4.5em; padding: 0 var(--sp-4); font-size: var(--fs-body); }
.vg-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: var(--ink); animation: win-blink 1s steps(1) infinite; /* deliberate */ }
.vg-tools { display: flex; justify-content: space-between; }
.vg-send { background: var(--sel); color: var(--surface); transition: background-color var(--d-fast) var(--ease-std); }
.vg-comp.is-ready .vg-send { background: var(--ink); }
.vg-screen { position: relative; width: 100%; aspect-ratio: 1470 / 837; border: var(--hair) solid var(--sel); border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); }
.vg-screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.vg-cursor { opacity: 1; width: 12px; height: 17px; }
.vg-perms { display: flex; justify-content: center; gap: var(--sp-6); margin-top: var(--sp-12); }
.vg-perms li { display: inline-flex; align-items: center; gap: var(--sp-6); min-height: 30px; padding: 0 var(--sp-8) 0 var(--sp-6); background: var(--surface); border: var(--hair) solid var(--sel); border-radius: var(--r-pill); font-size: var(--fs-tiny); font-weight: 500; white-space: nowrap; }
.vg-perms .fx { width: 18px; height: 18px; }
.vg-ok { width: 12px; height: 12px; fill: none; stroke: var(--win); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.vg:has(.vg-screen) { place-content: center; place-items: stretch; }
.vg-note { position: absolute; left: var(--sp-16); right: var(--sp-16); top: var(--sp-16); display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-8) var(--sp-12); background: var(--surface); border: var(--hair) solid var(--sel); border-radius: var(--r-surf); box-shadow: var(--lift-s); text-align: left; }
.vg-note img { width: 28px; height: 28px; }
.vg-note b { display: block; font-size: var(--fs-meta); font-weight: 600; }
.vg-note small { display: block; font-size: var(--fs-tiny); color: var(--muted); }
.vg-card-slot { width: 100%; margin-top: var(--sp-48); text-align: left; font-size: var(--fs-small); }

/* ---------- the ring ---------- */
.ring-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-64); align-items: center; }
.ring-copy .h2 { margin-bottom: var(--sp-16); }
.ring-copy .lede { margin-bottom: var(--sp-32); }
.ring-rows { display: grid; gap: var(--sp-8); }
.ring-row { display: flex; align-items: flex-start; gap: var(--sp-16); padding: var(--sp-16); border: var(--hair) solid transparent; border-radius: var(--r-surf); transition: background-color var(--d-base) var(--ease-std), border-color var(--d-base) var(--ease-std); }
.ring-row.is-on { background: var(--surface); border-color: var(--sel); }
.ring-row .fx { width: var(--ic-l); height: var(--ic-l); }
.ring-row b { display: block; font-size: 17px; font-weight: 600; }
.ring-row p { color: var(--muted); font-size: 15px; }
.ring { position: relative; width: min(100%, 480px); aspect-ratio: 1; margin-inline: auto; }
.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-base { fill: none; stroke: var(--sel); stroke-width: 2; }
.ring-arc { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.ring-head { fill: var(--ink); }
.ring-node { position: absolute; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--surface); border: var(--hair) solid var(--sel); border-radius: 50%; transition: border-color var(--d-base) var(--ease-std); }
.ring-node.is-on { border-color: var(--ink); }
.ring-node .fx { width: var(--ic-l); height: var(--ic-l); }
.ring-center { position: absolute; inset: 22%; display: grid; place-content: center; justify-items: center; gap: var(--sp-8); text-align: center; }
.ring-center ou-mark { display: block; width: 156px; height: 156px; margin-block: calc(-1 * var(--sp-32)) calc(-1 * var(--sp-24)); opacity: 0; transition: opacity var(--d-deliberate) var(--ease-std); /* deliberate */ }
.ring-center ou-mark.is-live { opacity: 1; }
.ring-center ou-mark > * { width: 100%; height: 100%; }
.ring-caption { display: grid; font-size: var(--fs-small); font-weight: 500; }
.ring-caption span { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity var(--d-slow) var(--ease-std), transform var(--d-slow) var(--ease-std); }
.ring-caption span[data-on] { opacity: 1; transform: none; }

/* ---------- the apps strip ---------- */
.apps-rows { display: grid; gap: var(--sp-12); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent); mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent); }
.apps-track { display: flex; width: max-content; animation: apps-drift 70s linear infinite; /* deliberate */ }
.apps-track.is-rev { animation-direction: reverse; animation-duration: 80s; /* deliberate */ }
.apps-rows:hover .apps-track { animation-play-state: paused; }
.apps-track ul { display: flex; gap: var(--sp-12); padding-right: var(--sp-12); }
@keyframes apps-drift { to { transform: translateX(-50%); } }
.app-tile { display: flex; align-items: center; gap: var(--sp-12); height: 60px; padding: 0 var(--sp-20) 0 var(--sp-12); background: var(--surface); border: var(--hair) solid var(--sel); border-radius: var(--r-pill); font-size: 15px; font-weight: 500; white-space: nowrap; }
.app-tile .fx { width: 36px; height: 36px; }

/* ---------- staying in charge ---------- */
.ctl { --feed-h: 184px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-16); } /* --feed-h: the notifications' and the record's box, 3 notes or 5 steps */
.ctl-card { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-24); }
.ctl-card > p { color: var(--muted); }
.ctl-card > .fx { width: var(--ic-l); height: var(--ic-l); margin-bottom: var(--sp-8); }
.ctl-vis { margin-top: auto; padding-top: var(--sp-24); }
.c-effort { grid-column: span 7; }
.c-stop { grid-column: span 5; }
.c-notify { grid-column: span 5; }
.c-record { grid-column: span 7; }
.eff { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--sp-4); background: var(--ground); border-radius: var(--r-pill); }
.eff-thumb { position: absolute; top: var(--sp-4); bottom: var(--sp-4); left: var(--sp-4); width: calc((100% - 2 * var(--sp-4)) / 4); background: var(--surface); border-radius: var(--r-pill); box-shadow: var(--lift-s); transition: transform var(--d-deliberate) var(--spring); /* deliberate */ }
.eff button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-8); min-height: 56px; padding: 0 var(--sp-8); background: transparent; border: 0; border-radius: var(--r-pill); font-size: 15px; font-weight: 500; color: var(--muted); transition: color var(--d-fast) var(--ease-std); }
.eff button[aria-checked="true"] { color: var(--ink); }
.eff sb-tier { display: block; width: 30px; height: 30px; flex: none; }
.eff sb-tier > * { width: 100%; height: 100%; }
.eff-sub { margin-top: var(--sp-16); color: var(--muted); }
.eff-big { display: grid; place-items: center; height: 152px; margin-bottom: var(--sp-16); background: var(--ground); border-radius: var(--r-surf); }
.eff-big sb-tier { display: block; width: 96px; height: 96px; }
.eff-big sb-tier > * { width: 100%; height: 100%; }
.stop-frame { margin: 0; --tint: var(--tint-tickets); }
.stop-frame > img { width: 100%; aspect-ratio: 1470 / 837; object-fit: cover; object-position: top left; }
.stop-pill { position: absolute; left: 50%; bottom: var(--sp-12); z-index: 3; display: inline-flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-12); border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font-size: var(--fs-tiny); font-weight: 600; transform: translateX(-50%); }
.stop-pill i { width: 8px; height: 8px; border-radius: 2px; background: var(--surface); }
.stop-state { margin-top: var(--sp-12); font-size: var(--fs-small); color: var(--muted); }
.note-clip, .rec-clip { height: var(--feed-h); overflow: hidden; }
.note-list { display: grid; gap: var(--sp-8); }
.note { display: flex; align-items: center; gap: var(--sp-12); height: calc((var(--feed-h) - 2 * var(--sp-8)) / 3); padding: 0 var(--sp-12); background: var(--ground); border-radius: var(--r-surf); }
.note-mark { width: 28px; height: 28px; }
.note span { flex: 1; min-width: 0; }
.note b { display: block; font-size: var(--fs-meta); font-weight: 600; }
.note small { display: block; font-size: var(--fs-meta); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note .fx { width: 28px; height: 28px; }
.rec-list { display: grid; font-size: 15px; }
.rec-list .win-step { min-height: 0; height: calc(var(--feed-h) / 5); }
.rec-list .fx { width: 22px; height: 22px; }

/* ---------- free credits ---------- */
.cred { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-48); align-items: center; padding: var(--sp-48); }
.cred-gift { width: var(--ic-xl); height: var(--ic-xl); margin-bottom: var(--sp-16); }
.cred .lede { margin-top: var(--sp-16); }
.cred-perks { display: grid; gap: var(--sp-16); margin-top: var(--sp-32); }
.cred-perks li { display: flex; align-items: center; gap: var(--sp-12); }
.cred-perks .fx, .cred-perks sb-tier { display: block; width: 28px; height: 28px; flex: none; }
.cred-perks sb-tier > * { width: 100%; height: 100%; }
.cred .cta-row { justify-content: flex-start; }
.cred-vis { display: grid; justify-items: center; align-content: center; gap: var(--sp-8); min-height: 360px; padding: var(--sp-40); background: var(--ground); border-radius: var(--r-surf); text-align: center; perspective: 800px; }
.cred-coin { width: 144px; height: 144px; margin-bottom: var(--sp-16); }
.js .cred-coin { opacity: 0; }
.cred-count b { display: block; font-size: clamp(44px, 5.6vw, 64px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cred-count span { font-size: 17px; color: var(--muted); }

/* ---------- the close ---------- */
.end { text-align: center; }
.end ou-mark { display: block; width: 200px; height: 200px; margin: calc(-1 * var(--sp-32)) auto calc(-1 * var(--sp-40)); opacity: 0; transition: opacity var(--d-deliberate) var(--ease-std); /* deliberate */ }
.end ou-mark.is-live { opacity: 1; }
.end ou-mark > * { width: 100%; height: 100%; }
.end .lede { margin: var(--sp-16) auto 0; }

@media (max-width: 960px) {
  .how { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .ring-sec, .cred { grid-template-columns: minmax(0, 1fr); gap: var(--sp-48); }
  .cred { padding: var(--sp-32); }
  .c-effort, .c-stop, .c-notify, .c-record { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .eff button span { display: none; }
  .cred { padding: var(--sp-24); gap: var(--sp-32); }
  .cred-vis { min-height: 0; padding: var(--sp-32) var(--sp-16); }
  .cred-coin { width: 112px; height: 112px; }
  .ring-node { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .ring-node .fx { width: 32px; height: 32px; }
  .ring-center ou-mark { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-caret { animation: none; }
  .apps-track { animation: none; }
  .apps-track ul[aria-hidden] { display: none; }
  .apps-track, .apps-track ul { width: auto; flex-wrap: wrap; justify-content: center; }
  .apps-rows { -webkit-mask-image: none; mask-image: none; }
  .ring-row, .ring-node, .ring-caption span, .ring-center ou-mark, .eff-thumb, .eff button, .vg-send, .end ou-mark { transition: none; }
  .js .cred-coin { opacity: 1; }
}