/* CLAUDE 10-05: the feature strip under the hero (featcar.js), shared by the app's landing and the waitlist site.
   It uses the two pages' common tokens (--panel, --panel2, --hair, --hair2, --ink, --soft, --dim, --go, --sig), with
   Graphite fallbacks. Native scroll snapping: swipe on a phone, the arrows and tabs scroll it.
   CLAUDE 10-13 (owner: "the sliders need updated"): Graphite. No card box: the stage is the shape (like a video), the
   title and line sit under it as plain text, the tabs are text with an underline. Motion runs only on the card in view
   while the strip is on screen (.fc-live .on), from a visible finished state; reduced motion keeps that state. */
.featcar,
.featcar-solo {
  --fc-w: min(920px, 100vw - 120px);
  /* CLAUDE 10-18 (design polish B4): the shared curves (style.css / motion.css, site.css), no private copy */
  --fc-ease: var(--ease-out);
  --fc-soft: var(--ease-soft, var(--ease-out));
  --fc-raised: var(--panel2, #1c1c1f);
  --fc-sig: var(--sig, #53fc18);
}
.featcar {
  margin: clamp(28px, 5vw, 56px) 0 clamp(40px, 7vw, 88px);
}
/* CLAUDE 10-15: the same calendar and stats stage as a card, on its own in the Post and Track sections (featcar.js,
   data-fc-solo); .on and .fc-live on it switch the same motion the strip's cards use */
.featcar-solo {
  width: min(920px, 100%);
  margin-inline: auto;
}
.featcar-solo:empty,
[data-fc-solo]:empty {
  aspect-ratio: 16 / 9; /* holds the room until featcar.js draws the stage, so the page does not jump */
}
@media (max-width: 720px) {
  [data-fc-solo]:empty {
    aspect-ratio: 4 / 5;
  }
}
.fc-view {
  position: relative;
}
.fc-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--fc-w);
  gap: 28px;
  overflow-x: auto;
  /* CLAUDE 10-14 (the owner: on the phone "it pulls the video up too easily"): overflow-x alone makes overflow-y auto
     too, so a slightly upward swipe dragged the card inside the strip; the strip scrolls sideways only, the page takes
     the vertical part */
  overflow-y: hidden;
  touch-action: pan-x pan-y;
  scroll-snap-type: x mandatory;
  padding: 6px calc((100% - var(--fc-w)) / 2) 10px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.fc-track::-webkit-scrollbar {
  display: none;
}
.fc-track:focus-visible {
  outline: 2px solid rgba(242, 240, 235, 0.72);
  outline-offset: -2px;
  border-radius: 18px;
}
.fc-card {
  scroll-snap-align: center;
  opacity: 0.32;
  transform: scale(0.965);
  transition:
    opacity 350ms ease,
    transform 450ms var(--fc-soft);
  cursor: pointer;
}
.fc-card.on {
  opacity: 1;
  transform: none;
  cursor: default;
}
.fc-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: radial-gradient(90% 120% at 50% 0%, rgba(242, 240, 235, 0.045), rgba(242, 240, 235, 0) 60%), #121214;
  box-shadow: inset 0 0 0 1px var(--hair, rgba(255, 255, 255, 0.06));
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.fc-text {
  padding: 18px 2px 0;
}
.fc-text h3 {
  margin: 0 0 4px;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink, #f2f0eb);
  text-wrap: balance;
}
.fc-text p {
  margin: 0;
  max-width: 62ch;
  color: var(--soft, #b5b3ad);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}
/* CLAUDE 10-26 (owner: "images need to have a clear call to action"): one solid button under each card's line */
.fc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition:
    transform var(--d-press) var(--fc-ease),
    filter var(--d-hover) ease;
}
.fc-cta span {
  transition: transform var(--d-hover) var(--fc-ease);
}
.fc-cta:active {
  transform: scale(0.97);
}
.fc-cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
@media (hover: hover) {
  .fc-cta:hover {
    filter: brightness(1.08);
  }
  .fc-cta:hover span {
    transform: translateX(3px);
  }
}
.fc-card:not(.on) .fc-cta {
  pointer-events: none;
}
.fc-stage :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fc-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  margin: 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(14, 14, 16, 0.72);
  color: var(--ink, #f2f0eb);
  font-size: 11.5px;
  font-weight: 550;
}
/* a social network's own mark, in its colour (DESIGN-SYSTEM.md: the one exception to monochrome icons) */
.fc-net {
  display: inline-block;
  flex: none;
  width: 11px;
  height: 11px;
  background: var(--nc, #f2f0eb);
  -webkit-mask: var(--nl) center / contain no-repeat;
  mask: var(--nl) center / contain no-repeat;
}
.n-tiktok {
  --nc: #25f4ee;
  --nl: url('/net-logos/tiktok.svg');
}
.n-youtube {
  --nc: #ff3b30;
  --nl: url('/net-logos/youtube.svg');
}
.n-instagram {
  --nc: #e1306c;
  --nl: url('/net-logos/instagram.svg');
}
.n-threads {
  --nc: #e7e7e7;
  --nl: url('/net-logos/threads.svg');
}
.n-x {
  --nc: #e7e7e7;
  --nl: url('/net-logos/x.svg');
}
.n-facebook {
  --nc: #1877f2;
  --nl: url('/net-logos/facebook.svg');
}

/* arrows at the edges of the middle card: drawn chevrons, quiet until hovered */
.fc-arrow {
  position: absolute;
  top: calc(50% - 64px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(28, 28, 31, 0.92);
  box-shadow: 0 0 0 1px var(--hair2, rgba(255, 255, 255, 0.12));
  color: var(--ink, #f2f0eb);
  cursor: pointer;
  transition:
    opacity 200ms ease,
    background-color 140ms ease,
    scale var(--d-panel) var(--ease-spring, var(--fc-ease));
}
.fc-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .fc-arrow:hover {
    background: #242428;
  }
}
.fc-arrow:active {
  scale: var(--press, 0.94);
  transition-duration: var(--d-ui), var(--d-hover), var(--d-press);
}
.fc-arrow:focus-visible,
.fc-pills button:focus-visible {
  outline: 2px solid rgba(242, 240, 235, 0.72);
  outline-offset: 2px;
}
.fc-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.fc-arrow.prev {
  left: calc((100% - var(--fc-w)) / 2 - 60px);
}
.fc-arrow.next {
  right: calc((100% - var(--fc-w)) / 2 - 60px);
}
/* text tabs: the selected one in full white with a 2 px underline */
.fc-pills {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 4vw, 32px);
  margin-top: 22px;
  padding-inline: 16px;
}
.fc-pills button {
  position: relative;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--dim, #8f8e89);
  font-size: 15px;
  font-weight: 550;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: color 180ms ease;
}
.fc-pills button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink, #f2f0eb);
  transform: scaleX(0);
  transition: transform 220ms var(--fc-ease);
}
.fc-pills button[aria-selected='true'] {
  color: var(--ink, #f2f0eb);
}
.fc-pills button[aria-selected='true']::after {
  transform: none;
}
@media (hover: hover) {
  .fc-pills button:hover {
    color: var(--ink, #f2f0eb);
  }
}

/* ---- Clipping: the link, the long video with Riptide's picks marked, an arrow, the clips cut from it ---- */
.fc-clip {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px 18px;
  padding: 22px 28px 26px;
  align-items: center;
}
.fc-clip .fc-link {
  grid-column: 1 / -1;
  justify-self: center;
}
.fc-long {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
/* the long video's timeline: three picked moments (green: Riptide found them) and a playhead reading through */
.fc-scan {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 40px;
  height: 6px;
  border-radius: 3px;
  background: rgba(14, 14, 16, 0.6);
}
.fc-scan i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: var(--fc-sig);
  box-shadow: 0 0 10px rgba(83, 252, 24, 0.45);
}
.fc-scan u {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 100%;
  width: 2px;
  border-radius: 1px;
  background: #fff;
  opacity: 0;
}
.fc-to {
  width: 40px;
  height: 20px;
  fill: none;
  stroke: var(--dim, #8f8e89);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 92%;
  padding: 5px 5px 5px 16px;
  border-radius: 999px;
  background: var(--fc-raised);
  box-shadow: inset 0 0 0 1px var(--hair2, rgba(255, 255, 255, 0.12));
  color: var(--dim, #8f8e89);
  font-size: 13px;
  white-space: nowrap;
}
.fc-link b {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--go, #f2f0eb);
  color: var(--go-ink, #0e0e10);
  font-size: 13px;
  font-weight: 600;
}
/* the clips as a fanned hand: as tall as the card allows, overlapping, the middle one in front */
.fc-phones {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
  padding-right: 6px;
}
.fc-phone {
  position: relative;
  flex: none;
  height: 78%;
  margin: 0 0 0 -64px;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: rotate(-5deg) translateY(10px);
}
.fc-phone:first-child {
  margin-left: 0;
}
.fc-phone:nth-child(2) {
  z-index: 1;
  height: 88%;
  transform: none;
}
.fc-phone:nth-child(3) {
  transform: rotate(5deg) translateY(10px);
}
.fc-phone .fc-tag {
  left: 5px;
  right: 5px;
  top: 6px; /* the clip's own captions sit at the bottom */
  bottom: auto;
  padding: 3px 6px;
  font-size: 9.5px;
  text-align: center;
}

/* ---- Editing: today's editor, and the size of the toolbox counted up along its foot ---- */
/* CLAUDE 10-13 (item 25): the whole editor, uncovered (the 16:9 shot fills the 16:9 stage); the counts sit beside the
   card's line instead of over the timeline */
.fc-edit {
  position: absolute;
  inset: 0;
  display: block;
}
.fc-text:has(.fc-kit) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 40px;
}
.fc-kit {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0 28px;
  flex: none;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.fc-kit li {
  display: grid;
  gap: 4px;
}
.fc-kit b {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink, #f2f0eb);
}
.fc-kit span {
  font-size: 13px;
  line-height: 1.25;
  color: var(--soft, #b5b3ad);
}

/* ---- Scheduling: a week in an hour grid, hairlines only; the posts are the only shapes ---- */
.fc-cal {
  position: absolute;
  inset: 18px 20px 20px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  font-size: 11px;
}
.fc-cal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fc-cal-top b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #f2f0eb);
}
.fc-best-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--soft, #b5b3ad);
  font-size: 12px;
}
.fc-best-key i,
.fc-week i.best::before {
  background: linear-gradient(180deg, rgba(245, 196, 81, 0.2), rgba(245, 196, 81, 0.06));
  box-shadow: inset 0 0 0 1px rgba(245, 196, 81, 0.4);
}
.fc-best-key i {
  width: 14px;
  height: 10px;
  border-radius: 3px;
}
.fc-week {
  display: grid;
  grid-template-columns: 42px repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(4, minmax(0, 1fr));
  min-height: 0;
}
.fc-week b {
  padding: 0 6px 8px;
  color: var(--dim, #8f8e89);
  font-weight: 550;
}
.fc-week b.today {
  color: var(--ink, #f2f0eb);
}
.fc-week b.today::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 5px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
.fc-week small {
  padding: 5px 8px 0 0;
  border-top: 1px solid var(--hair, rgba(255, 255, 255, 0.06));
  color: var(--dim, #8f8e89);
  font-size: 10px;
  text-align: right;
}
.fc-week i {
  position: relative;
  min-width: 0;
  padding: 4px 3px;
  border-top: 1px solid var(--hair, rgba(255, 255, 255, 0.06));
  border-left: 1px solid var(--hair, rgba(255, 255, 255, 0.06));
  font-style: normal;
}
.fc-week i.best::before {
  content: '';
  position: absolute;
  inset: 3px 2px;
  border-radius: 6px;
}
.fc-week em {
  position: relative;
  padding: 5px 6px 6px;
  border-radius: 6px;
  background: var(--fc-raised);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  color: var(--ink, #f2f0eb);
  font-style: normal;
  font-weight: 550;
  line-height: 1.25;
}
.fc-week u {
  display: flex;
  margin-bottom: 2px;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--dim, #8f8e89);
  font-size: 9.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.fc-week u s {
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-week u s::before {
  content: '· ';
}
/* a posted one carries the green "done" dot (state); the rest are scheduled */
.fc-week em.done u::after {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--fc-sig);
}
.fc-week em {
  display: block;
}
.fc-week em span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.fc-week i:has(> em) {
  z-index: 1; /* a post's shadow sits over the next cell's hairline */
}

/* ---- Analytics: the example clip ---- */
.fc-stats {
  position: absolute;
  inset: 22px 24px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 28px;
}
.fc-main {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-height: 0;
}
.fc-nums {
  display: flex;
  gap: clamp(16px, 3.4vw, 36px);
}
.fc-nums small,
.fc-heat small {
  display: block;
  color: var(--dim, #8f8e89);
  font-size: 12px;
}
.fc-nums b {
  display: block;
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink, #f2f0eb);
}
.fc-main svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}
.fc-area {
  fill: url(#fcAreaFill);
}
.fc-line {
  fill: none;
  stroke: var(--ink, #f2f0eb);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.fc-usual {
  fill: none;
  stroke: var(--dim, #8f8e89);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}
.fc-key {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--dim, #8f8e89);
  font-size: 12px;
}
.fc-key i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink, #f2f0eb);
}
.fc-key i.u {
  margin-left: 8px;
  background: var(--dim, #8f8e89);
}
.fc-side {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  min-height: 0;
}
.fc-split {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fc-split li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 5px;
  font-size: 12px;
  color: var(--soft, #b5b3ad);
}
.fc-split b {
  font-weight: 600;
  color: var(--ink, #f2f0eb);
}
.fc-split s {
  grid-column: 2 / -1;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nc) var(--p), rgba(255, 255, 255, 0.07) var(--p));
}
.fc-split .fc-net {
  width: 12px;
  height: 12px;
}
.fc-heat {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
}
.fc-grid {
  display: grid;
  grid-template-columns: 12px repeat(6, 1fr);
  gap: 3px;
}
.fc-grid span {
  color: var(--dim, #8f8e89);
  font-size: 9px;
  line-height: 1;
  align-self: center;
}
.fc-grid i {
  aspect-ratio: 2.1;
  border-radius: 3px;
  background: rgba(242, 240, 235, calc(0.05 + var(--v) * 0.6));
}
.fc-grid i.top {
  box-shadow: 0 0 0 1.5px var(--ink, #f2f0eb);
}
.fc-example {
  left: auto;
  right: 24px;
  bottom: 20px;
  background: none;
  padding: 0;
  color: var(--dim, #8f8e89);
  font-weight: 500;
}

/* ---- motion: only the card in view, only while the strip is on screen ---- */
.fc-live .on .fc-scan i {
  animation: fc-grow 700ms var(--fc-ease) both;
  animation-delay: calc(500ms + var(--i) * 600ms);
  transform-origin: left;
}
.fc-live .on .fc-scan u {
  animation: fc-read 2400ms linear 200ms both;
}
.fc-live .on .fc-phone {
  animation: fc-rise 700ms var(--fc-ease) both;
  animation-delay: calc(900ms + var(--i) * 600ms);
}
.fc-live .on .fc-kit li {
  animation: fc-rise 600ms var(--fc-ease) both;
}
.fc-live .on .fc-kit li:nth-child(2) {
  animation-delay: 80ms;
}
.fc-live .on .fc-kit li:nth-child(3) {
  animation-delay: 160ms;
}
.fc-live .on .fc-kit li:nth-child(4) {
  animation-delay: 240ms;
}
.fc-live .on .fc-week em {
  animation: fc-drop 560ms var(--fc-ease) both;
  animation-delay: calc(200ms + var(--i) * 150ms);
}
.fc-live .on .fc-week i.best::before {
  animation: fc-fade 900ms ease both 1700ms;
}
.fc-live .on .fc-line {
  stroke-dasharray: 1;
  animation: fc-draw 1600ms var(--fc-ease) both 150ms;
}
.fc-live .on .fc-area {
  animation: fc-fade 900ms ease both 700ms;
}
.fc-live .on .fc-split s {
  animation: fc-grow 900ms var(--fc-ease) both;
  animation-delay: calc(300ms + var(--i) * 110ms);
  transform-origin: left;
}
.fc-live .on .fc-grid i {
  animation: fc-fade 500ms ease both;
  animation-delay: calc(500ms + var(--i) * 45ms);
}
@keyframes fc-grow {
  from {
    transform: scaleX(0);
  }
}
@keyframes fc-read {
  0% {
    left: 0;
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
@keyframes fc-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}
@keyframes fc-drop {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
    filter: blur(3px);
  }
}
@keyframes fc-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fc-fade {
  from {
    opacity: 0;
  }
}

/* phones: one card with the next one showing at the edge, a small arrow on it, and a nudge the first time the strip
   comes into view (the owner 10-05: "on mobile there's no way to know to swipe right") */
@media (max-width: 720px) {
  .featcar {
    --fc-w: calc(100vw - 72px);
  }
  .fc-track {
    gap: 12px;
  }
  .fc-card {
    opacity: 0.5;
  }
  .fc-arrow {
    top: calc(50% - 72px);
    width: 36px;
    height: 36px;
  }
  .fc-arrow.prev {
    left: 4px;
  }
  .fc-arrow.next {
    right: 4px;
  }
  .fc-track.nudge .fc-card {
    animation: fc-nudge 1s var(--fc-ease) 300ms;
  }
  .fc-pills {
    gap: 14px;
  }
  .fc-pills button {
    font-size: 14px;
  }
  .fc-text p {
    font-size: 14px;
  }
  .fc-stage {
    aspect-ratio: 4 / 5;
    border-radius: 14px;
  }
  .fc-link {
    padding-left: 12px;
    font-size: 11.5px;
  }
  .fc-link b {
    padding: 7px 11px;
    font-size: 12px;
  }
  .fc-clip {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
    padding: 14px;
    gap: 8px;
    align-items: start;
    justify-items: center;
  }
  .fc-long {
    width: 76%; /* leaves the clips room to show their captions */
  }
  .fc-scan {
    bottom: 32px;
    left: 8px;
    right: 8px;
    height: 4px;
  }
  .fc-long .fc-tag {
    left: 6px;
    bottom: 6px;
    font-size: 10px;
  }
  .fc-to {
    transform: rotate(90deg); /* turned, its box stays 16 tall: the margins make room for the 30 it now spans */
    width: 26px;
    height: 14px;
    margin: 4px 0;
  }
  .fc-phones {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0;
  }
  .fc-phone,
  .fc-phone:nth-child(n) {
    aspect-ratio: auto;
    height: 100%;
    margin: 0;
    transform: none;
  }
  .fc-example {
    top: 16px;
    right: 14px;
    bottom: auto;
  }
  .fc-nums div:nth-child(3) {
    display: none; /* two numbers and the "Example numbers" label fit across a phone */
  }
  /* the editor on a phone: the phone editor's lower part (captions, the selected clip on the timeline, the clip tools),
     the counts in a row under the line */
  .fc-edit img {
    object-position: 50% 100%;
  }
  .fc-text:has(.fc-kit) {
    display: block;
  }
  .fc-kit {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 10px;
    margin-top: 14px;
  }
  .fc-kit b {
    font-size: 1.3rem;
  }
  .fc-kit span {
    font-size: 12px;
  }
  .fc-cal {
    inset: 14px 12px 12px;
  }
  .fc-week {
    grid-template-columns: 36px repeat(4, minmax(0, 1fr));
  }
  .fc-week :is([data-c='0'], [data-c='5'], [data-c='6']) {
    display: none; /* four days fit a phone: Tue to Fri */
  }
  .fc-best-key {
    font-size: 11px;
  }
  .fc-stats {
    inset: 16px 14px 14px;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 16px;
  }
  .fc-side {
    grid-template-rows: auto;
  }
  .fc-heat {
    display: none; /* the phone card keeps the numbers, the line and the split */
  }
  .fc-split {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }
}
@keyframes fc-nudge {
  40% {
    translate: -44px 0;
  }
  100% {
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* calm, not dead (plan 3.5): the card in view still fades up from dim, without the scale; the underline just appears */
  .fc-card {
    transform: none;
    transition: opacity var(--d-panel) ease !important;
  }
  .fc-pills button::after {
    transition: none;
  }
  .fc-card,
  .fc-card * {
    animation: none !important;
  }
}