/* anashaddadfit.com: the visuals shared by the launch pages (home and /coaching/, Oct 25 2026). Loaded after
   site.css. Every class starts with s- (no clash). The rule they serve (Anas, Oct 25 2026): no screen of only
   text; every block has its visual beside it: a phone with an app screen, a live demo, or a photo of Anas.
   Phone frames: a modern iPhone, thin even bezel, the Dynamic Island, no reflections, no tilt. Every size comes
   from --pw (the phone's width). The screen keeps the screenshot's proportions (1290 x 2796). */

.s-phone {
  --pw: 280px;
  --pad: calc(var(--pw) * 0.024);
  --sw: calc(var(--pw) - 2 * var(--pad));
  position: relative;
  flex: 0 0 auto;
  width: var(--pw);
  padding: var(--pad);
  border-radius: calc(var(--pw) * 0.15);
  background: #050505;
  box-shadow:
    0 0 0 calc(var(--pw) * 0.008) #2c2b29,
    0 0 0 calc(var(--pw) * 0.008 + 1px) rgba(245, 241, 234, 0.16),
    0 50px 80px -36px rgba(0, 0, 0, 0.9),
    0 24px 44px -26px rgba(0, 0, 0, 0.75);
}
.s-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1290 / 2796;
  border-radius: calc(var(--pw) * 0.128);
  background: #0e0e0e;
  direction: ltr; /* the app is English on both pages */
  isolation: isolate;
}
.s-screen picture,
.s-screen img {
  display: block;
  width: 100%;
  height: 100%;
}
.s-island {
  position: absolute;
  left: 50%;
  top: calc(var(--pad) + var(--sw) * 0.0256);
  width: calc(var(--sw) * 0.293);
  height: calc(var(--sw) * 0.0867);
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}

/* The live demo sits exactly on the screen's video area (website-tools/build-launch-media.mjs VIDEO_BOXES):
   x 60-1229 of 1290, 803 px tall from y 351 (the squat screen) or y 399 (the leg curl screen), corners 24 px. */
.s-vid {
  position: absolute;
  left: 4.6512%;
  width: 90.6977%;
  height: 28.7196%;
  border-radius: 2.05% / 2.99%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
}
.s-vid--squat {
  top: 12.5536%;
}
.s-vid--logging {
  top: 14.2704%;
}
.s-vid.is-on {
  opacity: 1;
}

/* A panel whose bottom edge cuts the phones below their content (like a product page): --cut is how much of
   the phone's height shows. A phone's outer height is 2.1114 x its width. */
.s-panel {
  --cut: 0.8;
  --top: 28px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: calc(var(--top) + var(--pw) * 2.1114 * var(--cut));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(207, 143, 46, 0.14), rgba(207, 143, 46, 0.03) 60%, rgba(207, 143, 46, 0)),
    linear-gradient(180deg, #1b1a18, #121110);
}
.s-panel > .s-phone {
  margin-top: var(--top);
}

/* A card cut from a screen (Anas's reply, the weight card), shown on its own. */
.s-tile {
  --tw: 290px;
  width: var(--tw);
  padding: calc(var(--tw) * 0.035);
  border: 1px solid var(--line-2);
  border-radius: calc(var(--tw) * 0.08);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(245, 241, 234, 0.08), rgba(245, 241, 234, 0) 60%),
    var(--card);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9);
}
.s-tile picture,
.s-tile img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--tw) * 0.05);
}

/* A demo tile (Anas, Oct 25 2026: where photos from video were): 4:5, rounded, the video fills it; nothing loads until
   near (demos.js), reduced motion = the poster only. */
.s-clip {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}
.s-clip-v {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
}
.s-clip-v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .s-clip-v {
    transition: none;
  }
}

/* A photo of Anas: rounded, calm, no frame. */
.s-photo {
  display: block;
  overflow: hidden;
  margin: 0;
  border-radius: var(--r-lg);
  background: var(--card);
}
.s-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The pause / play button of a demo (WCAG 2.2.2): quiet, amber only on hover or focus. Hidden until the page's
   script runs and never shown with reduced motion (demos.js). */
.s-pause {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 241, 234, 0.04);
  box-shadow: inset 0 0 0 1px rgba(245, 241, 234, 0.14);
  color: rgba(245, 241, 234, 0.62);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.s-pause[hidden] {
  display: none;
}
.s-pause svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.s-pause .s-i-play,
.s-pause.is-paused .s-i-pause {
  display: none;
}
.s-pause.is-paused .s-i-play {
  display: inline;
}
.s-pause:hover,
.s-pause:focus-visible {
  color: var(--acc);
  background: rgba(245, 241, 234, 0.06);
  box-shadow: inset 0 0 0 1px rgba(207, 143, 46, 0.45);
}
.s-pause:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .s-vid {
    transition: none;
  }
}

/* ================================================================ round 3 (Anas, Sun 25 Oct 2026 evening)
   Handbook/Reference/launch-pages-round3.md. Built by website-tools/launch-parts.mjs; behaviour: assets/js/tapapp.js.
   Inside a phone or an app card it is the APP (English, left to right, the app's own colours and type). */

.s-screen {
  container-type: inline-size;
}

/* The "tap" hint: words and a small hand, above the tabs. */
.s-hint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--ink-3);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
}
.s-hand {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--acc);
}

/* ---------------------------------------------------------------- the app phone with tabs */
.s-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.s-app-ctl {
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
}
.s-app-phone {
  --pw: min(64vw, 280px);
}
.s-app-phone .s-screen {
  background: #fff;
}
.s-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.s-tab {
  position: relative;
  overflow: hidden;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(245, 241, 234, 0.2);
  border-radius: 999px;
  background: var(--tile);
  box-shadow: inset 0 1px 0 rgba(245, 241, 234, 0.06);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform 120ms ease;
}
.s-tab span {
  position: relative;
  z-index: 1;
}
/* Real buttons (Anas, Oct 26 2026): a soft filled background and a thin border; the active one solid amber with dark
   text; a short press; on a laptop a slight lift. */
@media (hover: hover) {
  .s-tab:hover {
    border-color: rgba(245, 241, 234, 0.42);
    background: var(--tile-on);
    box-shadow: inset 0 1px 0 rgba(245, 241, 234, 0.08), 0 6px 16px -8px rgba(0, 0, 0, 0.8);
    transform: translateY(-1px);
  }
  .s-tab.is-on:hover {
    background: #d99a37;
    border-color: #d99a37;
  }
}
.s-tab:active,
.s-tab:hover:active {
  transform: scale(0.97);
}
.s-tab.is-on {
  border-color: var(--acc);
  background: var(--acc);
  box-shadow: 0 6px 18px -8px rgba(207, 143, 46, 0.7);
  color: #111;
  font-weight: 600;
}
.s-tab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* The progress line inside the active (amber) button while the phone plays by itself (like Instagram stories). */
.s-tab-line {
  position: absolute;
  inset-inline: 16px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: transparent;
}
.s-app.is-run .s-tab.is-on .s-tab-line {
  background: rgba(17, 17, 17, 0.18);
}
.s-tab-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.6);
  transform: scaleX(0);
  transform-origin: left center;
}
[dir="rtl"] .s-tab-line::after {
  transform-origin: right center;
}
.s-app.is-run .s-tab.is-on .s-tab-line::after {
  animation: s-fill 3.5s linear forwards;
}
@keyframes s-fill {
  to { transform: scaleX(1); }
}
/* Once, the first time the phone is seen: each button glows softly in turn (tapapp.js adds .is-glow 0.4 s apart). */
.s-tab.is-glow {
  animation: s-glow 0.8s ease-out 1;
}
@keyframes s-glow {
  0% { box-shadow: 0 0 0 0 rgba(207, 143, 46, 0); border-color: rgba(245, 241, 234, 0.2); }
  40% { box-shadow: 0 0 0 3px rgba(207, 143, 46, 0.35), 0 0 22px rgba(207, 143, 46, 0.45); border-color: var(--acc); }
  100% { box-shadow: 0 0 0 0 rgba(207, 143, 46, 0); }
}
/* The alternate exercise: one gentle pulse on the next option, the first time it is seen. */
.s-opt.is-pulse {
  animation: s-pulse 1.3s ease-out 1;
}
@keyframes s-pulse {
  0% { box-shadow: 0 0 0 0 rgba(207, 143, 46, 0.55); }
  100% { box-shadow: 0 0 0 12px rgba(207, 143, 46, 0); }
}
/* Five buttons (the coaching page) on a phone: one row, never a second line. */
@media (max-width: 959px) {
  .s-app--side .s-tabs {
    flex-wrap: nowrap;
    gap: 4px;
    max-width: 100%;
  }
  .s-app--side .s-tab {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 9px;
    font-size: 13px;
  }
}
/* The screens: stacked; the new one slides in a little and fades, the old one leaves the other way. */
.s-pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(7%);
  transition: opacity 300ms ease, transform 460ms var(--ease), visibility 0s linear 460ms;
}
.s-pane.is-prev {
  transform: translateX(-7%);
}
.s-pane.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 300ms ease, transform 460ms var(--ease), visibility 0s;
}
.s-app[data-app] .s-pane:not(.is-on) {
  pointer-events: none;
}
@media (min-width: 960px) {
  .s-app--side {
    flex-direction: row;
    justify-content: center;
    gap: 48px;
  }
  .s-app--side .s-app-ctl {
    align-items: flex-start;
    gap: 18px;
  }
  .s-app--side .s-tabs {
    flex-direction: column;
    align-items: stretch;
    min-width: 200px;
  }
  .s-app--side .s-tab {
    min-height: 50px;
    padding: 0 22px;
    text-align: start;
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------- the app's own look (drawn screens) */
.s-app-ui {
  position: absolute;
  inset: 0;
  color: #15151a;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 3.9cqw;
  line-height: 1.25;
  text-align: left;
  letter-spacing: 0;
}
.s-app-ui p {
  margin: 0;
}
.s-sbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 12.4cqw;
  padding: 1.6cqw 6.5cqw 0 9.6cqw;
}
.s-sbar b {
  font-size: 4.9cqw;
  font-weight: 600;
}
.s-sbar svg {
  width: 19cqw;
  height: auto;
  fill: currentColor;
}
.s-nut-top {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 3.6cqw 4.6cqw 2cqw;
}
.s-nut-top b {
  font-size: 6.2cqw;
  font-weight: 700;
}
.s-back {
  width: 2.6cqw;
  height: 2.6cqw;
  border-left: 0.6cqw solid currentColor;
  border-bottom: 0.6cqw solid currentColor;
  transform: rotate(45deg);
}
.s-nut-log {
  margin-left: auto;
  font-size: 3.9cqw;
  font-weight: 600;
}
.s-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6cqw;
  margin: 1.4cqw 3.7cqw 0;
}
.s-seg span {
  display: grid;
  place-items: center;
  height: 8.2cqw;
  border-radius: 3cqw;
  background: #f1f1f4;
  color: #6b6d78;
  font-size: 3.4cqw;
}
.s-seg span.is-on {
  background: #fff;
  box-shadow: inset 0 0 0 0.3cqw #d9dae0;
  color: #15151a;
}
.s-nut-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5.6cqw !important;
}
.s-nut-day b {
  font-size: 4cqw;
}
.s-nut-day b::after {
  content: "";
  display: inline-block;
  margin-left: 1.4cqw;
  border: 1.3cqw solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  vertical-align: 0.6cqw;
}
.s-nut-day span {
  color: #9a9ca8;
  font-size: 3.1cqw;
}
.s-rings {
  position: relative;
  width: 58cqw;
  margin: 2.5cqw auto 0;
}
.s-rings svg {
  display: block;
  width: 100%;
  height: auto;
}
.s-rings circle {
  fill: none;
  stroke-width: 4.4;
}
.s-ring-t {
  stroke: #f0f2f7;
}
.s-ring {
  stroke-linecap: round;
  stroke-dasharray: 100;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.s-ring--p { stroke: #4886fd; }
.s-ring--c { stroke: #44c473; }
.s-ring--f { stroke: #ffcc49; }
.s-ring--51 { stroke-dashoffset: 49; }
.s-ring--45 { stroke-dashoffset: 55; }
.s-ring--70 { stroke-dashoffset: 30; }
/* tapapp.js arms the rings (empty) and fills them when the screen shows; without it, or with reduced motion: full. */
.is-armed .s-ring {
  stroke-dashoffset: 100;
  transition: none;
}
.is-armed.is-drawn .s-ring--51 { stroke-dashoffset: 49; }
.is-armed.is-drawn .s-ring--45 { stroke-dashoffset: 55; }
.is-armed.is-drawn .s-ring--70 { stroke-dashoffset: 30; }
.is-armed.is-drawn .s-ring {
  transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-armed.is-drawn .s-ring--c { transition-delay: 80ms; }
.is-armed.is-drawn .s-ring--f { transition-delay: 160ms; }
.s-rings p {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.s-rings b {
  font-size: 6.4cqw;
  font-weight: 700;
}
.s-rings span {
  color: #6b6d78;
  font-size: 2.8cqw;
}
.s-nut-sum {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5cqw !important;
  font-size: 4.8cqw;
  font-weight: 700;
  line-height: 1.35;
}
.s-nut-sum em {
  color: #f26b21;
  font-style: normal;
}
.s-macros {
  width: calc(100% - 9cqw);
  margin: 4.4cqw 4.5cqw 0;
  border-collapse: collapse;
  font-size: 3.9cqw;
}
.s-macros th,
.s-macros td {
  padding: 0;
  font-weight: 400;
  text-align: center;
}
.s-macros th:first-child {
  text-align: left;
}
.s-macros thead th {
  height: 7cqw;
  color: #aaadba;
  font-size: 2.8cqw;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.s-macros tbody tr {
  height: 12cqw;
  border-top: 0.3cqw solid #eef0f4;
}
.s-macros tbody td:last-child {
  color: #b2b4c0;
}
.s-macros b {
  font-weight: 700;
}
.s-dot {
  display: inline-block;
  width: 2.6cqw;
  height: 2.6cqw;
  margin-right: 2.4cqw;
  border-radius: 50%;
  vertical-align: 0.1cqw;
}
.s-dot--p { background: #4886fd; }
.s-dot--c { background: #44c473; }
.s-dot--f { background: #ffcc49; }
.s-nut-h {
  margin-top: 4cqw !important;
  padding: 5.6cqw 4.5cqw 0;
  border-top: 2.6cqw solid #f7f8fc;
  font-size: 4cqw;
  font-weight: 700;
}
.s-macros--dist {
  margin-top: 1.6cqw;
}

/* ---------------------------------------------------------------- app cards: the weight trend, the records */
.s-card {
  width: min(100%, 340px);
  padding: 20px 20px 14px;
  border-radius: 22px;
  background: #fff;
  color: #15151a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(245, 241, 234, 0.12);
}
.s-card p {
  margin: 0;
}
.s-weight-l {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #3b3c44;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.s-weight-l svg {
  width: 15px;
  height: 15px;
  fill: #15151a;
}
.s-weight-n {
  margin-top: 4px !important;
  font-size: 17px;
  font-weight: 600;
}
.s-weight-n b {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.s-weight-c {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 10px;
  overflow: visible;
}
.s-axis {
  fill: #8e8f99;
  font-size: 10px;
  font-family: inherit;
}
.s-weight-area {
  fill: url(#s-wfill);
}
.s-weight-line {
  fill: none;
  stroke: #15151a;
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.s-weight-dot {
  fill: #15151a;
}
.s-weight-reveal {
  transform-box: fill-box;
  transform-origin: left center;
}
/* tapapp.js arms the chart and draws it from left to right when it is on screen (about 1.2 s, ease-out). */
.is-armed .s-weight-line { stroke-dashoffset: 100; }
.is-armed .s-weight-reveal { transform: scaleX(0); }
.is-armed .s-weight-dot { opacity: 0; }
.is-armed.is-drawn .s-weight-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.is-armed.is-drawn .s-weight-reveal {
  transform: none;
  transition: transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.is-armed.is-drawn .s-weight-dot {
  opacity: 1;
  transition: opacity 200ms ease;
}
.is-armed.is-drawn .s-wd1 { transition-delay: 0.12s; }
.is-armed.is-drawn .s-wd2 { transition-delay: 0.24s; }
.is-armed.is-drawn .s-wd3 { transition-delay: 0.39s; }
.is-armed.is-drawn .s-wd4 { transition-delay: 0.53s; }
.is-armed.is-drawn .s-wd5 { transition-delay: 0.67s; }
.is-armed.is-drawn .s-wd6 { transition-delay: 0.81s; }
.is-armed.is-drawn .s-wd7 { transition-delay: 0.96s; }
.is-armed.is-drawn .s-wd8 { transition-delay: 1.08s; }
.is-armed.is-drawn .s-wd9 { transition-delay: 1.16s; }
.is-armed.is-drawn .s-wd10 { transition-delay: 1.19s; }
.is-armed.is-drawn .s-wd11 { transition-delay: 1.20s; }

.s-rec {
  padding: 24px 22px 10px;
}
.s-rec-h {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}
.s-rec-h b {
  display: block;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #15151a;
}
.s-rec-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.s-rec-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ex ex" "kg up";
  align-items: baseline;
  column-gap: 12px;
  padding: 14px 0;
  border-top: 1px solid #eceef3;
}
.s-rec-ex {
  grid-area: ex;
  color: #3b3c44;
  font-size: 16px;
  font-weight: 600;
}
.s-rec-kg {
  grid-area: kg;
  margin-top: 4px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.s-rec-up {
  grid-area: up;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #1fa463;
  font-size: 18px;
  font-weight: 700;
}
.s-rec-up svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* ---------------------------------------------------------------- works with what you already use */
.s-int-h {
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.55rem, 6.4vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.s-int-p {
  margin: 12px 0 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
}
.s-int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.s-int-grid li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
}
[dir="rtl"] .s-int-grid li span {
  text-align: right;
}
.s-int-i {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--acc);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s-int--compact .s-int-h {
  font-size: clamp(1.2rem, 5vw, 1.45rem);
}
.s-int--compact .s-int-p {
  font-size: 15.5px;
}
.s-int--compact .s-int-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.s-int--compact .s-int-grid li {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14.5px;
}
.s-int--compact .s-int-i {
  width: 20px;
  height: 20px;
}

/* ---------------------------------------------------------------- the alternate exercise, tappable */
.s-swap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.s-swap-phone {
  --pw: min(66vw, 280px);
}
.s-swap-phone .s-screen {
  background: #7f7f7f;
}
.s-swap-top {
  position: absolute;
  inset: 0 0 auto;
  height: auto !important;
}
.s-swap-top img {
  height: auto !important;
}
.s-swap-ui {
  background: transparent;
  pointer-events: none;
}
.s-swap-name {
  position: absolute;
  top: 44.7%;
  left: 4.8%;
  display: inline-flex;
  align-items: center;
  gap: 2.4cqw;
  height: 8.8cqw;
  padding: 0 3.4cqw;
  border-radius: 2.4cqw;
  background: #7b7b7d;
  color: #0f0f12;
  font-size: 3.7cqw;
  white-space: nowrap;
}
.s-swap-name b {
  font-weight: 700;
}
.s-swap-name i {
  border: 1.3cqw solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
}
.s-swap-icons {
  position: absolute;
  top: 49.6%;
  left: 4.8%;
  display: flex;
  gap: 0.6cqw;
}
.s-swap-icons i {
  width: 12cqw;
  height: 9cqw;
  border-radius: 4.5cqw;
  background: #7b7b7d;
}
.s-sheet {
  position: absolute;
  inset: 54.1% 0 0;
  padding: 0 4.6cqw;
  border-radius: 4.4cqw 4.4cqw 0 0;
  background: #fff;
  pointer-events: auto;
}
.s-sheet-x {
  position: absolute;
  top: 7cqw;
  left: 6cqw;
  width: 2.6cqw;
  height: 2.6cqw;
  border-right: 0.6cqw solid #2a2350;
  border-bottom: 0.6cqw solid #2a2350;
  transform: rotate(45deg);
}
.s-sheet-h {
  padding-top: 16.4cqw;
  font-size: 3.9cqw;
  font-weight: 700;
  text-align: center;
}
.s-opts {
  margin-top: 3cqw;
}
.s-opt {
  display: flex;
  align-items: center;
  gap: 2.8cqw;
  width: 100%;
  min-height: 44px;
  height: 21.6cqw;
  padding: 0;
  border: 0;
  border-bottom: 0.25cqw solid #eceef3;
  border-radius: 0;
  background: transparent;
  color: #15151a;
  font: inherit;
  font-size: 3.7cqw;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast);
}
.s-opt img {
  width: 13.9cqw;
  height: 13.9cqw;
  border-radius: 1.8cqw;
  object-fit: cover;
}
.s-opt span {
  flex: 1;
}
@media (hover: hover) {
  .s-opt:hover {
    background: #f6f6f8;
  }
}
.s-opt:active {
  background: #efeff3;
}
.s-opt:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}
.s-tick {
  width: 5.6cqw;
  height: 5.6cqw;
  margin-right: 2.8cqw;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 200ms ease, transform 320ms var(--ease);
}
.s-tick circle {
  fill: #cf902f;
}
.s-tick path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s-opt.is-on .s-tick {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .s-pane,
  .s-pane.is-on,
  .s-tab,
  .s-tick {
    transition: none;
  }
  .s-pane {
    transform: none !important;
  }
  .s-tab.is-glow,
  .s-opt.is-pulse {
    animation: none;
  }
  .s-tab:hover,
  .s-tab:active,
  .s-tab:hover:active {
    transform: none;
  }
}