/* 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);
  /* CLAUDE 11-04: the stages' own motion scale (a stage plays for a few seconds, longer than UI motion) */
  --d-fc-pop: 400ms;
  --d-fc-in: 600ms;
  --d-fc-draw: 1600ms;
  --d-fc-slow: 2400ms;
  --d-fc-run: 3200ms;
}
.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);
  text-wrap: balance;
}
.fc-text p {
  margin: 0;
  max-width: 62ch;
  color: var(--soft);
  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;
}
/* CLAUDE 11-04 (owner's phone screenshot: a blank white button): landing.css's `#lp a { color: inherit }` outranks
   .fc-cta, so the label took the button's own colour on the app's landing */
#lp .fc-cta {
  color: var(--bg);
}
.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);
  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);
  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);
  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);
  transform: scaleX(0);
  transition: transform 220ms var(--fc-ease);
}
.fc-pills button[aria-selected='true'] {
  color: var(--ink);
}
.fc-pills button[aria-selected='true']::after {
  transform: none;
}
@media (hover: hover) {
  .fc-pills button:hover {
    color: var(--ink);
  }
}

/* ---- Clipping: the link, the long video with Riptide's picks marked, an arrow, the clips cut from it ---- */
/* CLAUDE 11-04 (owner's iPhone: 2 of the 3 clips blank): every piece sits in a positioned box with a definite size and
   each picture fills its figure absolutely, so no height hangs on a % of a grid row (WebKit, as in 48a170cf) */
.fc-clip,
.fc-ed {
  position: absolute;
  inset: 0;
}
:where(.fc-clip, .fc-ed) figure {
  margin: 0;
}
:is(.fc-clip, .fc-ed) figure > img,
:is(.fc-clip, .fc-ed) figure > video,
.fc-zoom > img {
  position: absolute;
  inset: 0;
}
.fc-clip .fc-link {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
}
.fc-long {
  position: absolute;
  left: 4%;
  top: 57%;
  width: 42%;
  transform: translateY(-50%);
  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);
}
/* Riptide reading the stream: a light sweep along the timeline (transform only) */
.fc-scan u {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.3);
  transform-origin: left;
  opacity: 0;
}
.fc-to {
  position: absolute;
  left: 48.5%;
  top: 57%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 20px;
  fill: none;
  stroke: var(--dim);
  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);
  font-size: 13px;
  white-space: nowrap;
}
.fc-link b {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--go);
  color: var(--go-ink, #0e0e10);
  font-size: 13px;
  font-weight: 600;
}
/* the clips as a fanned hand: as tall as their box allows, overlapping, the middle one in front */
.fc-phones {
  position: absolute;
  left: 52%;
  right: 3%;
  top: 19%;
  bottom: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-phone {
  position: relative;
  flex: none;
  height: 76%;
  margin-left: -14%;
  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: 86%;
  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: the raw frame, the vertical crop on the face, and the finished clip it becomes ---- */
/* CLAUDE 11-04: the stage's height is 56.25 % of its width, so the raw frame (52 % wide, 16:9) is 52 % of the height
   and its 9:16 crop is 31.6 % of its width, centred on the face (51 %) */
.fc-raw {
  position: absolute;
  left: 6%;
  top: 10%;
  width: 52%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
}
.fc-crop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 35.2%;
  width: 31.6%;
  border-radius: 4px;
  box-shadow:
    0 0 0 1.5px var(--ink),
    0 0 0 999px rgba(14, 14, 16, 0.58);
}
.fc-ed .fc-to {
  left: 61.4%;
  top: 36%;
}
/* what the editor did, ticked off: the tick is the "done" state */
.fc-steps {
  position: absolute;
  left: 6%;
  top: 69%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--soft);
  font-size: 13px;
  font-weight: 550;
}
.fc-steps li {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.fc-steps svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--fc-sig);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fc-done {
  position: absolute;
  right: 8%;
  top: 7%;
  height: 86%;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}
.fc-zoom {
  position: absolute;
  inset: 0;
  transform: scale(1.1);
  transform-origin: 51% 32%;
}
.fc-zoom img {
  object-position: 51% 50%;
}
/* the clip's own captions, word by word, the key word in colour (the caption style, not UI) */
.fc-cap {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 63%;
  margin: 0;
  color: #fff;
  font-size: clamp(15px, 2.6vw, 24px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.7),
    0 0 14px rgba(0, 0, 0, 0.55);
}
.fc-cap span {
  display: inline-block;
}
.fc-cap .hl {
  color: rgb(245 196 81);
}
.fc-prog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.85);
  transform: scaleX(0.62);
  transform-origin: left;
}
.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);
}
.fc-kit span {
  font-size: 13px;
  line-height: 1.25;
  color: var(--soft);
}

/* ---- 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);
}
.fc-best-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--soft);
  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(3, minmax(0, 1fr));
  min-height: 0;
}
.fc-week > b {
  padding: 0 6px 8px;
  color: var(--dim);
  font-weight: 550;
}
.fc-week > b.today {
  color: var(--ink);
}
.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);
  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;
}
/* a best slot glows while it waits, then settles to a tint once its post has landed; the post keeps an amber edge */
.fc-week > i.best::before {
  content: '';
  position: absolute;
  inset: 3px 2px;
  border-radius: 6px;
  opacity: 0.35;
}
.fc-week > i.best > em {
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(245, 196, 81, 0.45);
}
.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);
  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);
  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 "posted" dot (state) and its views counting up; the rest are scheduled */
.fc-week em small {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: var(--dim);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.fc-week em small::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fc-sig);
}
.fc-week em small b {
  color: var(--ink);
  font-weight: 650;
}
.fc-week em {
  display: block;
}
/* the now-line: along the top of today's next slot, a dot at its start */
.fc-now {
  position: absolute;
  z-index: 2;
  left: -1px;
  right: 0;
  top: -1px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
  transform-origin: left;
}
.fc-now::before,
.fc-now::after {
  content: '';
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: inherit;
}
.fc-now::after {
  opacity: 0;
}
.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: one example clip against the creator's usual, the gap called out where the lines end ---- */
/* --end is where the lines stop (the svg's width); the call-out sits in the room to its right. The svg's y runs 0-150,
   so the clip ends at 16/150 = 10.67 % and the usual at 115/150 = 76.67 % of the chart's height */
.fc-stats {
  --end: 68%;
  position: absolute;
  inset: 26px 28px 18px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
}
.fc-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.fc-head b {
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--ink);
}
.fc-head small {
  color: var(--dim);
  font-size: 13px;
}
/* CLAUDE 11-04 (owner's iPhone: the line ran over the key and the split): WebKit sized a % height in the grid row
   against the whole card, so the chart fills its own positioned box instead */
.fc-chart {
  position: relative;
  min-height: 0;
}
.fc-chart svg {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--end);
  height: 100%;
  overflow: visible;
}
.fc-dot {
  position: absolute;
  left: var(--end);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 5px rgba(242, 240, 235, 0.14);
}
.fc-dot.a {
  top: 10.67%;
}
.fc-dot.b {
  top: 76.67%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--dim);
  box-shadow: none;
}
.fc-gap {
  position: absolute;
  left: var(--end);
  top: 10.67%;
  bottom: 23.33%;
  border-left: 1px dashed rgba(242, 240, 235, 0.4);
  transform-origin: bottom;
}
.fc-call {
  position: absolute;
  left: calc(var(--end) + 18px);
  right: 0;
  top: 10.67%;
  bottom: 23.33%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--ink);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}
.fc-call > span {
  transform: translateY(-50%);
}
.fc-call > span.u {
  color: var(--dim);
  transform: translateY(50%);
}
.fc-call p {
  margin: 0;
}
.fc-call p b {
  display: block;
  font-size: clamp(1.7rem, 4.6vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.fc-call p small {
  display: block;
  margin-top: 4px;
  color: var(--soft);
  font-size: 13px;
}
.fc-axis {
  position: relative;
  height: 14px;
  color: var(--dim);
  font-size: 11px;
  line-height: 14px;
}
.fc-axis span {
  position: absolute;
  left: 0;
}
.fc-axis span + span {
  left: var(--end);
  transform: translateX(-50%);
}
.fc-area {
  fill: url(#fcAreaFill);
}
.fc-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.fc-usual {
  fill: none;
  stroke: var(--dim);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}
.fc-example {
  top: 30px;
  left: auto;
  right: 28px;
  bottom: auto;
  background: none;
  padding: 0;
  color: var(--dim);
  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 var(--d-fc-in) var(--fc-ease) both;
  animation-delay: calc(500ms + var(--i) * 600ms);
  transform-origin: left;
}
.fc-live .on .fc-scan u {
  animation: fc-read var(--d-fc-slow) linear 200ms both;
}
.fc-live .on .fc-phone {
  animation: fc-rise var(--d-fc-in) var(--fc-ease) both;
  animation-delay: calc(900ms + var(--i) * 600ms);
}
.fc-live .on .fc-kit li {
  animation: fc-rise var(--d-fc-in) 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;
}
/* Editing: the crop lands on the face, the clip rises, the steps tick off as each one shows on the clip */
.fc-live .on .fc-crop {
  animation: fc-land var(--d-fc-in) var(--fc-ease) both 200ms;
}
.fc-live .on .fc-done {
  animation: fc-rise var(--d-fc-in) var(--fc-ease) both 450ms;
}
.fc-live .on .fc-steps li {
  animation: fc-rise var(--d-fc-in) var(--fc-ease) both;
  animation-delay: calc(600ms + var(--i) * 450ms);
}
.fc-live .on .fc-cap span {
  animation: fc-pop var(--d-fc-pop) var(--fc-soft) both;
  animation-delay: calc(1050ms + var(--i) * 260ms);
}
.fc-live .on .fc-zoom {
  animation: fc-punch var(--d-fc-draw) var(--fc-ease) both 1500ms;
}
.fc-live .on .fc-prog {
  animation: fc-grow var(--d-fc-run) linear both 450ms;
}
/* Scheduling: the best slots light up, the now-line draws in and breathes, the next clips drop into the best slots */
.fc-live .on .fc-week > i.best::before {
  animation: fc-slot var(--d-fc-slow) ease both 300ms;
}
.fc-live .on .fc-now {
  animation: fc-grow var(--d-fc-in) var(--fc-ease) both 500ms;
}
.fc-live .on .fc-now::after {
  animation: fc-ping var(--d-fc-slow) ease-out infinite 1200ms;
}
.fc-live .on .fc-week em.next {
  animation: fc-drop var(--d-fc-in) var(--fc-ease) both;
  animation-delay: calc(900ms + var(--i) * 280ms);
}
/* Analytics: the usual first, then the clip's line pulls away and the gap opens between their ends */
.fc-live .on .fc-usual,
.fc-live .on .fc-dot.b {
  animation: fc-fade var(--d-fc-in) ease both 100ms;
}
.fc-live .on .fc-line {
  stroke-dasharray: 1;
  animation: fc-draw var(--d-fc-draw) var(--fc-ease) both 300ms;
}
.fc-live .on .fc-area {
  animation: fc-fade var(--d-fc-in) ease both 900ms;
}
.fc-live .on .fc-dot.a {
  animation: fc-pop var(--d-fc-pop) var(--fc-soft) both 1650ms;
}
.fc-live .on .fc-gap {
  animation: fc-grow-y var(--d-fc-in) var(--fc-ease) both 1750ms;
}
.fc-live .on .fc-call {
  animation: fc-rise var(--d-fc-in) var(--fc-ease) both 1950ms;
}
@keyframes fc-grow {
  from {
    transform: scaleX(0);
  }
}
@keyframes fc-grow-y {
  from {
    transform: scaleY(0);
  }
}
@keyframes fc-read {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 0;
  }
}
@keyframes fc-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}
@keyframes fc-drop {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
}
@keyframes fc-land {
  from {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes fc-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes fc-punch {
  from {
    transform: none;
  }
}
@keyframes fc-slot {
  0% {
    opacity: 0;
  }
  25%,
  60% {
    opacity: 1;
  }
}
@keyframes fc-ping {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  60%,
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}
@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;
  }
  /* the stage is 4:5 here, so the long video (76 % wide, 16:9) is 34.2 % of its height: the arrow and the clips sit
     under it by that much */
  .fc-clip .fc-link {
    top: 14px;
  }
  .fc-long {
    left: 12%;
    top: 58px;
    width: 76%; /* leaves the clips room to show their captions */
    transform: none;
  }
  .fc-scan {
    bottom: 32px;
    left: 8px;
    right: 8px;
    height: 4px;
  }
  .fc-long .fc-tag {
    left: 6px;
    bottom: 6px;
    font-size: 10px;
  }
  .fc-clip .fc-to {
    left: 50%;
    top: calc(34.2% + 72px);
    width: 26px;
    height: 14px;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .fc-phones {
    left: 14px;
    right: 14px;
    top: calc(34.2% + 88px);
    bottom: 14px;
    gap: 8px;
  }
  .fc-phone,
  .fc-phone:nth-child(n) {
    height: 100%;
    max-width: calc((100% - 16px) / 3);
    margin: 0;
    transform: none;
  }
  /* Editing on a phone: the raw frame top left (72 % wide: 32.4 % of the 4:5 height), the finished clip bottom right,
     the ticked steps in the corner between them */
  .fc-raw {
    left: 14px;
    top: 14px;
    width: 72%;
  }
  .fc-done {
    top: auto;
    right: 14px;
    bottom: 14px;
    height: 62%;
  }
  .fc-ed .fc-to,
  .fc-raw .fc-tag span,
  .fc-week u s {
    display: none; /* the tag says "Raw" clear of the crop; a post's logo names its network */
  }
  .fc-steps {
    left: 16px;
    top: calc(32.4% + 44px);
    flex-direction: column;
    gap: 14px;
  }
  .fc-example {
    top: 22px;
    right: 14px;
  }
  .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;
  }
  /* three days fit a phone (Tue to Thu) with room for each post's views; each post shows its own time, so the hour
     column goes */
  .fc-week {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fc-week > :is(span, small),
  .fc-week :is([data-c='0'], [data-c='4'], [data-c='5'], [data-c='6']) {
    display: none;
  }
  .fc-week > i[data-c='1'] {
    border-left: 0;
  }
  .fc-best-key {
    font-size: 11px;
  }
  .fc-stats {
    --end: 60%;
    inset: 20px 14px 14px;
    gap: 14px;
  }
  .fc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}
@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;
  }
}