/* FunnelCharm homepage — effect browser */

/* The browser's own [hidden] rule is display:none at the weakest possible
   strength, so ANY author rule that sets display beats it — .fc-card is
   display:flex, and hiding a card did nothing at all. One !important here
   covers every component instead of each one needing its own [hidden] rule. */
[hidden] { display: none !important; }

:root {
  --red: #e01b22;
  /* THE BRAND RAMP (Ember). --red stays the flat accent for small marks
     (rules, the nav bar, borders) where a fade is invisible and only costs
     complexity. --maroon is the deep end; the ramp climbs out of it into the
     brand red. --ramp-anim is the same ramp mirrored A-B-A on a wide canvas,
     which is what lets a hover slide it side to side seamlessly. */
  --maroon: #8e1119;
  --ramp: linear-gradient(135deg, var(--maroon) 0%, var(--red) 100%);
  --ramp-anim: linear-gradient(135deg, var(--maroon), var(--red), var(--maroon));
  /* snippet-card brand red (design handoff) — used across the detail modal */
  --red-hover: #c00f16;
  --ink: #14141b;
  --body: #4a4a52;
  --muted: #9a9caa;
  --muted-2: #8a8c99;
  --faint: #b7b9c6;
  --card-border: #ececf0;
  /* a step darker than --card-border: a divider inside a panel has to read
     against the panel's own edge, or it disappears */
  --rule: #dcdde3;
  --hairline: #f0f0f3;
  --preview: #f6f3ef;
  /* THE SIDEBAR. Every value the column uses is here: the face, the resting
     and hovered ink, the tan the counts are set in, and the lifted row the
     current category wears. Warm-neutral dark, not blue-black — the gallery
     beside it is warm paper and a cool column reads as a different site. */
  --side-bg: #1b1a18;
  --side-ink: #cdc7bf;
  --side-ink-hi: #ffffff;
  --side-count: #b08a5c;
  --side-active-bg: #2e2c29;
  --side-active-ink: #ffffff;
  --side-rule: rgba(255, 255, 255, .09);
  /* the search field's own ink and edge, the same warm family */
  --field-ink: #8a7a69;
  --field-edge: #ddd0c0;
  /* full-width banner pinned to the top edge; the shell fills what's left */
  /* The announcement strip is hidden on the live layout (Oki, 2026-07-29) and
     carries the price on the hero layout. Zeroing the height is what keeps the
     shell, the sidebar and the gallery's own heights correct — they are all
     measured against it. To bring it back everywhere, restore 46px. */
  --banner-h: 0px;
}

/* ---------------- Top banner ----------------
   Two motions: the gradient drifts, and a sheen sweeps across on a loop. */
.fc-banner {
  display: none;
  position: relative;
  overflow: hidden;
  z-index: 40;
  height: var(--banner-h);
  display: flex;
  align-items: center;
  /* the message keeps the middle and the field sits at the end, so neither
     moves as the other changes width */
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
  background-image: linear-gradient(100deg,
    #7d0d12 0%, #c2151c 22%, var(--red) 40%, #ff5a60 50%,
    var(--red) 60%, #c2151c 78%, #7d0d12 100%);
  background-size: 220% 100%;
  animation: fcBannerDrift 14s linear infinite;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .3);
}

.fc-banner span,
.fc-banner a {
  position: relative;
  z-index: 1;
  /* the same face as FUNNEL in the logo */
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.02vw, 14px);
  letter-spacing: 0.08em;
  color: #fff;
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(90, 0, 4, .45);
}

.fc-banner a {
  color: #fff;
  text-decoration: none;
}

/* the sheen: a skewed band of light crossing the bar */
.fc-banner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, .42), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: fcBannerShine 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fcBannerDrift {
  to { background-position: 220% 50%; }
}

@keyframes fcBannerShine {
  0%        { transform: translateX(-160%) skewX(-18deg); }
  55%, 100% { transform: translateX(330%) skewX(-18deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fc-banner { animation: none; }
  .fc-banner::after { animation: none; opacity: 0; }
  .fc-logo3d .fc-charm { animation: none; background-position: -40% 50%, 45% 50%; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--ink); }

button { font-family: inherit; cursor: pointer; }

.fc-shell {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: calc(100vh - var(--banner-h));
}

/* ---------------- Sidebar ---------------- */

.fc-sidebar {
  position: sticky;
  top: 0;
  height: calc(100vh - var(--banner-h));
  overflow-y: auto;
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--side-bg);
}

.fc-tagline {
  margin: 0;
  padding: 0 14px 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--side-ink);
}

/* ---------------- 3D logo ----------------
   One knob: the wrapper's font-size. Every accent is in em. */
.fc-logo3d {
  font-size: 28px;
  display: inline-flex;
  align-items: baseline;
  margin: 10px 0 2px;
  padding: 0 14px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--side-ink-hi);
}

.fc-logo3d .fc-funnel { font-weight: 700; }

.fc-logo3d .fc-charm {
  position: relative;
  margin-left: 0.024em;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.19em;
  letter-spacing: 0.02em;
  /* color drives the swash, stars and the faux-bold stroke (currentColor);
     the letters themselves take the ramp. Both move, on the announcement
     strip's clock: the ramp is the mirrored A-B-A one, so sliding it a whole
     220% lands back where it started and the loop has no seam. */
  color: #b3151c;
  /* TWO LAYERS ON ONE ELEMENT: the sheen over the brand ramp. It used to be a
     ::before carrying a second "Charm", which is what came adrift — a
     generated box lays out on its own and does not have to land on the
     letters. One element cannot animate background-position twice, so both
     layers move in a single keyframe list instead. */
  background-image:
    linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, .92) 50%, transparent 66%),
    var(--ramp-anim);
  background-size: 300% 100%, 220% 100%;
  background-position: 130% 50%, 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fcCharmSweep 9s ease-in-out infinite, fcCharmInk 14s linear infinite;
  /* a TRANSPARENT stroke: background-clip: text then paints the gradient over
     the stroke as well as the fill, which is the only way to weight a
     one-weight face without flattening the fade to a solid outline */
  -webkit-text-stroke: 0.045em transparent;
  paint-order: stroke fill;
}

/* the stars and the swash take currentColor, so this is what carries the ramp
   across them — the same two ends, on the same clock as the letters */
@keyframes fcCharmInk {
  0%, 100% { color: var(--maroon); }
  50%      { color: var(--red); }
}

/* The sheen crosses in the first half and parks off the left edge for the
   rest, so the word is not permanently glinting. The ramp travels the whole
   way in the same cycle — it is mirrored A-B-A, so 0% and 100% are the same
   picture and the loop has no seam. */
@keyframes fcCharmSweep {
  0%   { background-position: 130% 50%, 0% 50%; }
  45%  { background-position: -40% 50%, 45% 50%; }
  100% { background-position: -40% 50%, 100% 50%; }
}

/* the underline swash — preserveAspectRatio:none lets it stretch under the word */
.fc-logo3d .fc-swash {
  position: absolute;
  left: 0.17em;
  bottom: -0.2em;          /* dropped further below "Charm" */
  /* an italic word's ink stops short of its box on the right — a swash as wide
     as the box overshoots the last letter */
  width: 2.24em;
  height: 0.286em;
  overflow: visible;
  pointer-events: none;
}

.fc-logo3d .fc-star {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

.fc-logo3d .fc-star--lg {
  width: 0.405em;
  height: 0.405em;
  top: -0.24em;            /* lifted further above "Charm" */
  right: -0.143em;
}

.fc-logo3d .fc-star--sm {
  width: 0.262em;
  height: 0.262em;
  top: 0.05em;             /* follows the big star up */
  right: -0.333em;
  opacity: 0.75;
}

/* slogan under the 3D logo — same look as v1's, just a little breathing room */
.fc-tagline3d { margin-top: 8px; }

.fc-sidebar-divider {
  height: 1px;
  background: var(--side-rule);
  margin: 22px 8px 18px;
}

.fc-nav { display: flex; flex-direction: column; gap: 2px; }

.fc-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--side-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
  transition: background .18s, color .18s;
}

.fc-nav-item:hover { background: rgba(255, 255, 255, .06); color: var(--side-ink-hi); }

/* the current category is a solid dark row — on paper that reads at a glance,
   where the red wash the dark column used turns muddy */
.fc-nav-item.is-active {
  color: var(--side-active-ink);
  background: var(--side-active-bg);
}

.fc-sidebar-foot { margin-top: auto; padding-top: 20px; }

.fc-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 6px 20px rgba(224, 27, 34, .28);
  transition: background .18s;
}

.fc-cta:hover { background: var(--red-hover); color: #fff; }

.fc-contact {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-2);
}

.fc-contact:hover { color: var(--side-ink-hi); }

/* ---------------- Sidebar footer ---------------- */

.fc-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--side-rule);
  text-align: center;
}

.fc-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 10px;
}

.fc-footer-links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--side-count);
  transition: color .18s;
}

.fc-footer-links a:hover { color: var(--side-ink-hi); }

.fc-footer-note,
.fc-footer-copy {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .03em;
  color: #6f6a63;
}

.fc-footer-copy { margin-top: 4px; }

/* ---------------- Gallery ---------------- */

.fc-main {
  height: calc(100vh - var(--banner-h));
  overflow-y: auto;
  --fc-main-pad: 36px;
  padding: 30px var(--fc-main-pad) 70px;
  /* warm paper, one step deeper than the sidebar */
  background: #f5efe9;
}

.fc-section { margin-bottom: 30px; }

/* separator above the premium block: bold red label on a rule line */
.fc-premium-sep {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 46px 0 26px;
}

.fc-premium-sep::before,
.fc-premium-sep::after {
  content: "";
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  opacity: .35;
}

.fc-premium-sep::before { width: 26px; }
.fc-premium-sep::after { flex: 1; }

.fc-premium-label {
  font-family: Sora, Inter, sans-serif;
  font-weight: 800;
  font-size: 23px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}

.fc-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.fc-section-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.fc-filters { display: flex; gap: 6px; margin-left: 6px; }

.fc-filter {
  padding: 5px 12px;
  border: 1px solid #e2e2e8;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background .18s, color .18s, border-color .18s;
}

.fc-filter:hover { border-color: var(--red); color: var(--red); }

.fc-filter.is-active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.fc-dash {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
}

.fc-section-head h2 {
  margin: 0;
  font-family: Sora, Inter, sans-serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Arrows float over the ends of the row, vertically centred on the cards,
   so scrolling happens where the cards are rather than up in the header. */
.fc-arrow {
  position: absolute;
  top: calc(50% - 7px);
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e2e8;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
  opacity: 0;
  transition: opacity .2s, border-color .18s, color .18s, background .18s;
}

.fc-arrow-l { left: -8px; }
.fc-arrow-r { right: -8px; }

.fc-section:hover .fc-arrow { opacity: 1; }

/* at the far end there's nothing more to scroll to, so hide that arrow */
.fc-arrow.is-off { opacity: 0 !important; pointer-events: none; }

.fc-arrow:hover {
  border-color: var(--red);
  color: var(--red);
}

.fc-track-wrap { position: relative; }

.fc-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  /* room for the hover shadow: the strip hides vertical overflow, so a shadow
     hanging below the card was being cut off */
  padding: 6px 2px 26px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.fc-track::-webkit-scrollbar { display: none; }

.fc-fade {
  position: absolute;
  top: 0;
  bottom: 14px;
  pointer-events: none;
  transition: opacity .2s;
}

.fc-fade-l {
  left: 0;
  width: 42px;
  background: linear-gradient(90deg, #fff, transparent);
  opacity: 0;
}

.fc-fade-r {
  right: 0;
  width: 54px;
  background: linear-gradient(270deg, #fff, transparent);
  opacity: 1;
}

/* ---------------- Card ---------------- */

.fc-card {
  flex: 0 0 288px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

/* a slightly wider tile (~20% over the 288px default) so Value Stack previews,
   which run item-left / value-right, have a little more room */
.fc-card.is-wide { flex-basis: 346px; }

.fc-preview {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--preview);
}

/* Live previews sit on a dark surface — effects built from white light (glass,
   shine, outline ring, glow) are invisible on the light panel. */
.fc-preview.is-live {
  position: relative;
  background:
    radial-gradient(120% 85% at 12% 0%, rgba(224, 27, 34, .22), transparent 58%),
    radial-gradient(110% 80% at 88% 100%, rgba(96, 84, 255, .20), transparent 55%),
    linear-gradient(160deg, #33333f, #0f0f15);
  padding: 0 18px;
}

/* A live preview sits on the plain surface — no field behind it. The Section
   Pinstripe card still draws its own stripes; that is the effect, not this. */

/* Anything with a surface of its own stays above the pane — the checkout
   replica has a tinted panel that has to read as one piece. */
.fc-preview.is-live > .elBTN,
.fc-preview.is-live > .fc-list,
.fc-preview.is-live > .fc-txt,
.fc-preview.is-live > .fc-img,
.fc-preview.is-live > .fc-c1prev,
.fc-preview.is-live > .elCountdown,
.fc-modal-hero.is-live > .elBTN,
.fc-modal-hero.is-live > .fc-list,
.fc-modal-hero.is-live > .fc-txt,
.fc-modal-hero.is-live > .fc-img,
.fc-modal-hero.is-live > .fc-c1prev,
.fc-modal-hero.is-live > .elCountdown {
  position: relative;
  z-index: 1;
}

/* Value stacks live on white pages for most people, so preview them on a light
   surface with dark text — matching where they'll actually be used. */
.fc-preview.is-light.is-live,
.fc-modal-hero.is-light.is-live {
  /* warm, but only a shade off the card itself: a full step darker split each
     card into two surfaces going opposite ways against the page */
  background: #F6F3EF;
}

.fc-card-foot {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--hairline);
  background: #fff;
}

.fc-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fc-card-title {
  position: relative;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.fc-card-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--ramp);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .32s cubic-bezier(.7, 0, .2, 1);
}

.fc-card:hover .fc-card-title::after {
  transform: scaleX(1);
  transform-origin: left;
}

.fc-icons { display: flex; gap: 2px; }

.fc-iconbtn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  transition: background .18s, color .18s;
}

.fc-iconbtn:hover { background: #f6f6fa; }
.fc-like:hover { color: var(--red); }

.fc-like.is-liked { color: var(--red); }
.fc-like.is-liked svg { fill: currentColor; }
.fc-like.is-pop { animation: fc-heartpop .5s; }

@keyframes fc-heartpop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45); }
  55%  { transform: scale(.8); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}


.fc-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 300;
  transition: transform .62s cubic-bezier(.2, .7, .3, 1), opacity .62s;
}

/* ---------------- Modal ---------------- */

/* ============ Detail modal — split snippet card ============
   Values are the 780x520 design already scaled by 1.35, so no transform. */

.fc-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 0%, rgba(52, 52, 62, .93), rgba(35, 35, 43, .96));
  backdrop-filter: blur(3px);
  animation: fc-overlayin .2s ease;
}

.fc-overlay[hidden] { display: none; }

/* leaving: the entrance played backwards, so the modal exits the way it came */
.fc-overlay.is-closing { animation: fc-overlayout .2s ease forwards; }
.fc-overlay.is-closing .fc-modal { animation: fc-modalout .18s cubic-bezier(.4, 0, 1, 1) forwards; }

@keyframes fc-overlayin  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fc-overlayout { to { opacity: 0; } }
@keyframes fc-modalout   { to { opacity: 0; transform: translateY(14px) scale(.985); } }

.fc-modal {
  position: relative;
  width: min(1053px, 96vw);
  height: min(702px, 92vh);
  overflow: hidden;
  background: #fff;
  border-radius: 19px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
  font-family: "Public Sans", Inter, sans-serif;
  animation: fc-modalin .28s cubic-bezier(.2, .8, .2, 1);
}

/* the dialog takes focus on open so the keyboard starts inside it; it isn't a
   control, so it shows no ring — the rings belong on the buttons within */
.fc-modal:focus { outline: none; }

@keyframes fc-modalin {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* tucked into the corner and quiet — it's an exit, not an action */
.fc-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  font-size: 11px;
  color: var(--muted);
  opacity: .6;
  cursor: pointer;
  transition: opacity .18s, background .18s, color .18s;
}

.fc-modal-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .95);
  color: var(--ink);
}

.fc-modal-split {
  display: flex;
  align-items: stretch;
  height: 100%;
}

/* ---------------- left: live preview ---------------- */

.fc-modal-left {
  position: relative;
  /* clicking the preview left a text caret blinking in it */
  caret-color: transparent;
  user-select: none;
  width: 459px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fc-modal-hero {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  background: var(--preview);
}

.fc-modal-hero.is-live {
  background:
    radial-gradient(120% 85% at 12% 0%, rgba(224, 27, 34, .22), transparent 58%),
    radial-gradient(110% 80% at 88% 100%, rgba(96, 84, 255, .20), transparent 55%),
    linear-gradient(160deg, #33333f, #0f0f15);
}

/* The checkout IS the pane. A form only reads at full width, and floating it in
   the middle as a card spent half the pane on backdrop. */
.fc-modal-hero:has(> .fc-c1prev) {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.fc-modal-hero > .fc-c1prev {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* title / stats float over the live result */
/* the name and the one-line pitch head the RIGHT panel — the preview pane
   carries nothing but the preview */
.fc-right-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.fc-modal-title {
  margin: 0;
  font-family: Archivo, Inter, sans-serif;
  font-weight: 800;
  font-size: 21px;
  line-height: 1.15;
  color: var(--ink);
}

.fc-modal-lead {
  margin: 6px 0 0;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fc-modal-lead[hidden] { display: none; }

.fc-modal-heart {
  width: 39px;
  height: 39px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--card-border);
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}

.fc-modal-heart:hover { border-color: var(--muted-2); color: var(--ink); }
.fc-modal-heart.is-liked { color: var(--red); border-color: rgba(224, 27, 34, .55); }
.fc-modal-heart.is-liked svg { fill: currentColor; }
.fc-modal-heart.is-pop { animation: fc-heartpop .5s; }

/* Hidden until saving a bookmark leads somewhere — with no saved list to
   open, the icon is a promise the page does not keep. The button and its
   wiring stay put, so bringing it back is deleting this rule. */
.fc-modal-heart { display: none; }

/* ---------------- right: scrolling panel column ---------------- */

.fc-modal-right {
  flex: 1;
  min-width: 0;
  padding: 20px 27px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* the column no longer scrolls itself — the tab pane inside it does, so the
     header, the tabs and the copy row hold still */
  overflow: hidden;
}

/* -------- the tab row -------- */
.fc-tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--card-border);
}

.fc-tab {
  padding: 8px 2px 10px;
  border: 0;
  background: none;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: color .18s ease;
}

.fc-tab:hover { color: var(--ink); }

.fc-tab.is-active { color: var(--ink); }

.fc-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--red);
}

.fc-tab[hidden] { display: none; }

/* -------- the one scrolling pane -------- */
.fc-tabpanes {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* room for the scrollbar without the content shifting */
  padding-right: 4px;
  margin-right: -8px;
}

.fc-tabpane[hidden] { display: none; }

/* -------- the fixed foot: copy, the ID, the code -------- */
.fc-right-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

.fc-cssid {
  display: flex;
  align-items: center;
  gap: 8px;
  /* inside the code box, where the foot's own gap cannot reach */
  margin-top: 12px;
}

.fc-cssid[hidden] { display: none; }

.fc-cssid-label {
  flex: none;
  font-family: Archivo, Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted-2);
}

.fc-cssid-value {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  /* filled, not white — a white field on a white panel was being missed */
  background: #f2f3f6;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--ink);
  outline: none;
}

.fc-cssid-copy {
  flex: none;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1.5px solid var(--red);
  border-radius: 8px;
  background: #fff;
  color: var(--red);
  font-family: Archivo, Inter, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.fc-cssid-copy:hover { background: color-mix(in srgb, var(--red) 7%, #fff); }

/* the same two-icon swap the big copy button does — but under its own class
   names: the big button's icon classes carry an absolute fly-in that parks
   anything wearing them off screen */
.fc-cssid-check { display: none; }
.fc-cssid-copy.is-copied { color: #0a7d33; border-color: #0a7d33; }
.fc-cssid-copy.is-copied .fc-cssid-ico { display: none; }
.fc-cssid-copy.is-copied .fc-cssid-check { display: block; }

/* ---------------- View Larger ----------------
   Two expanded layouts, each a single class on .fc-modal. The markup never
   moves, so nothing can fall out of sync with the normal view: the panels
   only change size and direction, and CSS animates between the two. */

.fc-zoom {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  backdrop-filter: blur(4px);
  font-family: Archivo, Inter, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #33363d;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}

.fc-zoom[hidden] { display: none; }

.fc-zoom:hover { background: var(--red); color: #fff; }

/* hidden while expanded — the chevron is the way back */
.fc-modal.is-zoom .fc-zoom { display: none; }

.fc-zoom-back {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
  color: #fff;
  cursor: pointer;
  transition: background .16s, color .16s;
}

.fc-zoom-back[hidden] { display: none; }

/* a slow nudge toward the panel it brings back */
@keyframes fc-chev-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-8px); }
}

.fc-modal.is-zoom .fc-zoom-back {
  animation: fc-chev-nudge .8s ease-in-out infinite;
}

.fc-zoom-back:hover { animation-play-state: paused; }
.fc-zoom-back:hover { background: var(--ink); color: #fff; }

/* the panels move; a transform would not reflow the layout, and both panels
   have to actually resize for the preview to gain the room */
.fc-modal-left,
.fc-modal-right {
  transition: width .38s cubic-bezier(.22, 1, .36, 1),
              height .38s cubic-bezier(.22, 1, .36, 1),
              flex-basis .38s cubic-bezier(.22, 1, .36, 1),
              padding .38s cubic-bezier(.22, 1, .36, 1);
}

/* A preview that has to be read, not just seen: the modal widens and the left
   pane takes most of it, while the Customize panel stays open. Set by a card's
   bigPreview flag — see setBigPreview(). */
.fc-modal.is-bigpreview { width: min(1340px, 96vw); }
.fc-modal.is-bigpreview .fc-modal-left { width: 780px; }

/* --- video frames: the preview takes the width, the panel keeps a sliver --- */
.fc-modal.is-zoom .fc-modal-left { width: calc(100% - var(--fc-sliver, 54px)); }

.fc-modal.is-zoom .fc-modal-right {
  flex: 0 0 var(--fc-sliver, 54px);
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  /* the sliver is a panel that has slid shut — the shadow along its inner edge
     is what says so. inset, because the panel is flush with the modal edge. */
  box-shadow: inset 9px 0 14px -10px rgba(0, 0, 0, .38),
              inset 1px 0 0 rgba(0, 0, 0, .10);
}

/* the sliver is a handle, not a column of unreadable text */
.fc-modal.is-zoom .fc-modal-right > * { opacity: 0; pointer-events: none; }

/* A bare chevron on a white strip reads as decoration. The whole sliver becomes
   the hit area instead — full height, its own hover tint, and a standing label
   that says what it does. */
.fc-modal.is-zoom .fc-zoom-back {
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--fc-sliver, 54px);
  height: auto;
  margin: 0;
  flex-direction: column;
  gap: 16px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--red);
  transition: background .16s, color .16s;
}

.fc-modal.is-zoom .fc-zoom-back::before {
  content: "«";
  font-family: Archivo, Inter, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.fc-modal.is-zoom .fc-zoom-back::after {
  content: "BACK TO DETAILS";
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: Archivo, Inter, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2em;
}

.fc-modal.is-zoom .fc-zoom-back:hover {
  background: rgba(20, 20, 27, .06);
  color: var(--ink);
}

/* the sliver opens a little under the cursor, so it reads as a panel about to
   slide back rather than a strip with a word on it */
.fc-modal.is-zoom:has(.fc-zoom-back:hover) { --fc-sliver: 72px; }

/* the label is the whole control now */
.fc-modal.is-zoom .fc-zoom-back { animation: none; }
.fc-modal.is-zoom .fc-zoom-back svg { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fc-modal-left,
  .fc-modal-right { transition: none; }
  .fc-modal.is-zoom .fc-zoom-back { animation: none; }
}

/* The header, the tabs and the foot keep their natural height. The tab pane is
   the exception and must be excluded by name: this rule sits later in the file
   at the same strength, so without the :not() it pinned the pane to its content
   height too, and a Customize panel taller than the modal was simply cut off
   with nothing to scroll. */
.fc-modal-right > *:not(.fc-tabpanes) { flex: none; }

.fc-scroll::-webkit-scrollbar { width: 9px; height: 9px; }

.fc-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .2);
  border-radius: 9px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.fc-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, .32);
  background-clip: padding-box;
}

.fc-panel {
  border: 1.5px solid var(--card-border);
  border-radius: 15px;
  overflow: hidden;
}

.fc-panel[hidden] { display: none; }

/* The controls carry their own card, so the shell around them would be a second
   rounded box drawn around the first. The shell stays on HOW TO USE and TAGS. */
#fc-customize {
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

#fc-customize .fc-panel-body { padding: 0; }

.fc-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #f6f7f9;
  border-bottom: 1px solid var(--card-border);
}

.fc-panel-ico { flex: none; color: var(--red); }

/* the column reads as one scale: these sit beside the controls panel, whose
   labels are 13px */
.fc-panel-title {
  font-family: Archivo, Inter, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--ink);
}

.fc-panel-sub { font-size: 12px; color: #9aa0a8; }

/* preview background switch, pinned to the right of the panel head */
/* it changes the preview, so it sits on the preview — floated over the bottom
   edge rather than parked in the panel head across the modal */
/* sits exactly where the switch would, so the preview's footprint is the same
   whether an effect offers both surfaces or only one */
.fc-preview-note {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  backdrop-filter: blur(4px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #5c6068;
}

/* sits below the frame, clear of the surface switch */
.fc-preview-cap {
  position: absolute;
  bottom: 204px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  font-family: Archivo, Inter, sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .02em;
  white-space: nowrap;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  pointer-events: none;
}

.fc-preview-cap[hidden] { display: none; }

/* on the light surface the white text would vanish */
.fc-modal-hero.is-light ~ .fc-preview-cap { color: rgba(20, 20, 27, .6); text-shadow: none; }

/* The bigger pane holds a taller frame, and at 204px the line landed on the
   video itself — where a grey line on a dark picture cannot be read at all.
   Below the frame, and a shade stronger. */
.fc-modal.is-bigpreview .fc-preview-cap { bottom: 116px; }
.fc-modal.is-bigpreview .fc-modal-hero.is-light ~ .fc-preview-cap { color: rgba(20, 20, 27, .78); }

/* expanded, the frame is the whole point — nothing else competes with it */
.fc-modal.is-zoom .fc-preview-cap { display: none; }

.fc-bgtoggle {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  backdrop-filter: blur(4px);
}

.fc-bgtoggle[hidden] { display: none; }

.fc-bgopt {
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: Archivo, Inter, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #6b6f78;
  transition: background .16s, color .16s;
}

.fc-bgopt:hover { color: var(--ink); }

.fc-bgopt.is-active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}

.fc-bgopt.is-active:hover { color: #fff; }

.fc-panel-body { padding: 18px; }

/* How to build it — the first thing in the column, because you need it before
   the code is any use. Plain text, not a colored bar: it's instruction, not a
   warning, and a red block that size reads as an error. */
.fc-stack-hint {
  margin: 0;
  /* same size as the install steps below the code — they're the two halves of
     one set of instructions and shouldn't read as different weights of advice */
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
}

/* "HOW TO BUILD IT" up here, "HOW TO INSTALL" further down: this one is what
   you assemble in CF first, that one is how to paste the code. Both
   called "how to use" was the same instruction twice as far as a reader knew. */
.fc-stack-hint::before {
  content: "HOW TO BUILD IT:";
  display: block;
  margin-bottom: 7px;
  font-family: Archivo, Inter, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .03em;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fc-stack-hint[hidden] { display: none; }
.fc-stack-hint b,
.fc-stack-hint strong { font-weight: 700; color: var(--ink); }
.fc-stack-hint i { font-style: italic; }

/* ---------------- code: copy is the hero, code stays dimmed ---------------- */

/* Icon Slide, borrowed from the button library: the icon waits off the label's
   left, then slides in as the label shifts across. */
.fc-copy {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background-color: var(--red);
  background-image: var(--ramp-anim);
  background-size: 220% 100%;
  background-position: 0% 50%;
  box-shadow: 0 6px 18px rgba(224, 27, 34, .3);
  color: #fff;
  font-family: Archivo, Inter, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(224, 27, 34, .3);
  transition: background-color .2s, box-shadow .2s, transform .15s ease;
}

.fc-copy:hover { background-color: #c22a21; }
.fc-copy:active { transform: scale(.97); }

/* the label is the only in-flow child, so the absolutely placed icons sit
   immediately to its left */
/* hovering a filled ramp button slides the colours from side to side — the
   position swings out and home again, so leaving mid-ride never snaps */
@keyframes fc-ramp-slide {
  50% { background-position: 100% 50%; }
}

.fc-copy:hover,
.fc-copy:focus-visible { animation: fc-ramp-slide 2.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .fc-copy:hover,
  .fc-copy:focus-visible,
  .fc-gate-btn:hover { animation: none; }
}

.fc-copy-main {
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: transform .3s ease;
}

.fc-copy:hover .fc-copy-main,
.fc-copy:focus-visible .fc-copy-main,
.fc-copy.is-copied .fc-copy-main { transform: translateX(11px); }

.fc-copy-ico,
.fc-check-ico {
  position: absolute;
  right: 100%;
  top: 50%;
  /* the mark keeps step with the label rather than the size in the markup */
  width: 15px;
  height: 15px;
  margin-right: .4em;
  transform: translate(-16px, -50%);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}

.fc-copy:hover .fc-copy-ico,
.fc-copy:focus-visible .fc-copy-ico {
  transform: translate(0, -50%);
  opacity: 1;
}

.fc-copy.is-copied {
  background-color: #1c9e5a;
  box-shadow: 0 4px 14px rgba(28, 158, 90, .3);
}

/* once copied the tick stays put — it's feedback, not a hover flourish */
.fc-check-ico { display: none; }
.fc-copy.is-copied .fc-copy-ico { display: none; }

.fc-copy.is-copied .fc-check-ico {
  display: block;
  transform: translate(0, -50%);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fc-copy-main,
  .fc-copy:hover .fc-copy-main,
  .fc-copy.is-copied .fc-copy-main { transform: none; }
  .fc-copy:active { transform: none; }
  .fc-copy-ico,
  .fc-check-ico { transition: opacity .2s; transform: translate(0, -50%); }
}

/* out of sight until the link below the copy button asks for it */
.fc-peek {
  position: relative;
  margin-top: 4px;
  border: 1.5px solid #eeeef1;
  border-radius: 14px;
  background: #fbfbfc;
  overflow: hidden;
}

.fc-peek[hidden] { display: none; }

/* the way in: a quiet text link riding the copy button's bottom-right corner */
.fc-code-link {
  display: block;
  margin: 6px 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: Archivo, Inter, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #9aa0a8;
  cursor: pointer;
  transition: color .18s ease;
}

.fc-code-link:hover { color: var(--red); }

.fc-code-link[hidden] { display: none; }

.fc-peek pre {
  margin: 0;
  padding: 13px 16px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #24292f;              /* default: selectors & values, dark for a light box */
  white-space: pre;
  max-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  transition: max-height .32s ease;
}

/* syntax colors (light background) */
.fc-peek pre .t-com  { color: #8a8f98; font-style: italic; }
.fc-peek pre .t-str  { color: #0a7d33; }
.fc-peek pre .t-at   { color: #a626a4; font-weight: 600; }
.fc-peek pre .t-prop { color: #0b62c9; }
.fc-peek pre .t-num  { color: #b5560c; }
.fc-peek pre .t-hex  { color: #b5560c; font-weight: 600; }
.fc-peek pre .t-pun  { color: #6a737d; }

.fc-peek.is-open pre {
  max-height: 213px;
  overflow-y: auto;
}

.fc-peek-hide {
  width: 100%;
  margin-top: 11px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: Archivo, Inter, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #9aa0a8;
  cursor: pointer;
}

.fc-peek-hide[hidden] { display: none; }

/* ---------------- how to use ---------------- */

.fc-howto-steps {
  margin: 0;
  padding: 12px 16px 14px 38px;
  color: #4a4e56;
  font-size: 13px;
  line-height: 1.6;
}

.fc-howto-note {
  margin: 0;
  padding: 0 16px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: #4a4e56;
}

.fc-howto-note[hidden] { display: none; }

.fc-chip {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--red) 30%, var(--card-border));
  background: #fff;
  color: var(--red);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  cursor: text;
}

.fc-chip::selection { background: rgba(224, 27, 34, .22); }

/* ---------------- comments ---------------- */


/* narrow screens: preview on top, panels beneath */
@media (max-width: 900px) {
  /* the split already stacks here, so the preview is full width and there is
     nothing to expand into — the classes would only fight this layout */
  .fc-zoom,
  .fc-zoom-back { display: none !important; }

  .fc-modal.is-zoom .fc-modal-left { width: auto; height: 290px; }

  .fc-modal.is-zoom .fc-modal-right {
    display: flex;
    flex: 1;
    padding: 20px;
  }

  .fc-modal.is-zoom .fc-modal-right > * { opacity: 1; pointer-events: auto; }

  /* The preview gets 290px for everything here, and the caption's desktop
     constant put it across the middle of the frame. Badges measure their own
     clearance and stand down; the frames have no measurement to make. */
  .fc-preview-cap { display: none; }

  .fc-modal { height: min(92vh, 860px); }
  .fc-modal-split { flex-direction: column; }
  .fc-modal-left { width: auto; height: 290px; flex: none; }
  /* the bigpreview width is a desktop idea — stacked, the pane takes the row */
  .fc-modal.is-bigpreview .fc-modal-left { width: auto; }
  .fc-modal-right { padding: 20px; gap: 18px; }
  .fc-modal-title { font-size: 24px; }
}

/* ---------------- variations ---------------- */

/* At rest it is grey: on a page of 121 cards, 121 red pills read as 121
   alerts. The color arrives with the pointer, where it means this one has
   settings worth opening. */
.fc-variations {
  margin-left: 8px;
  margin-right: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f1f3;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}

.fc-card:hover .fc-variations {
  background: #fbeef0;
  color: var(--red);
}

/* premium cards: Cosmetic (pure styling) vs Behavioral (changes page behaviour) */
.fc-tag {
  margin-left: 8px;
  margin-right: auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.fc-tag.is-cosmetic {
  background: #eef1fb;
  color: #4257b2;
}

.fc-tag.is-behavioral {
  background: #eaf6ef;
  color: #1f7a4d;
}

.fc-card-row > .fc-card-title { flex: 0 0 auto; }

/* ---------------- customize controls (inside the CUSTOMIZE panel) ---------------- */

.fc-ctl-label {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  color: var(--muted-2);
  /* a label broken over two lines reads as two controls — a group whose label
     can't fit on one line takes the full row instead (see app.js fitsHalf) */
  white-space: nowrap;
}

/* The panel is a card, and a sectioned one is a card per section. */
.fc-ctl-panel {
  padding: 12px 16px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: #fff;
}

.fc-ctl-panel + .fc-ctl-panel { margin-top: 12px; }

/* Label left, control right — the control edge lines up down the panel, which
   is what makes a long list scannable. */
.fc-ctl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fc-ctl {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

/* THE STACK-ON STRIP. The one sanctioned exception to one-control-per-cell:
   the three add-on switches are short enough to read as one row of three
   (Oki, 2026-08-07). Equal tracks, so the row scans as a set. */
/* The row splits into as many equal columns as there are switches. The class is
   doubled up because a later .fc-ctl-top rule sets flex, and a flex row with two
   switches in it throws one to each edge. */
.fc-ctl-top.fc-ctl-addons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 14px;
}

.fc-ctl-top.fc-ctl-addons:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.fc-ctl-top.fc-ctl-addons:has(> :first-child:last-child) { grid-template-columns: 1fr; }

/* Each switch sits beside its own label rather than at the far edge of its
   column — pushed apart, the first switch ends up against the second label and
   it stops being obvious which belongs to which. */
.fc-ctl-addons .fc-ctl { flex: none; gap: 8px; justify-content: flex-start; }
.fc-ctl-addons .fc-ctl-body { flex: none; }

.fc-ctl-body {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

/* A typed field has no width of its own worth keeping — left alone it takes the
   browser's default size and pushes past its column. */
.fc-ctl-text .fc-ctl-body {
  flex: 0 1 auto;
  min-width: 0;
}

/* The pills must be ABLE to shrink, or the track keeps its natural width and
   spills past the column instead of wrapping. Wrapping is the last resort —
   layoutCtlGrid gives a group the full row long before it comes to this. */
.fc-ctl-opts .fc-ctl-body {
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

/* on a phone the hex has to give way rather than push the swatch off the edge.
   flex-shrink, not just min-width: the base body is flex: none, which refuses to
   shrink however small its minimum is. */
.fc-ctl-color .fc-ctl-body { flex: 0 1 auto; min-width: 0; }
.fc-color-hex,
.fc-divider-hex { flex: 0 1 auto; min-width: 0; }

/* Measured at natural width: shrunk to fit, every group "fits" by definition,
   and the fit test could never tell which ones wanted the whole row. */
.fc-ctl-grid2.is-measuring .fc-ctl {
  flex: none;
  width: max-content;
}

/* The icon picker is a search row above a grid, not a label beside a control. */
.fc-ctl-icon { display: block; }

/* A heading over a run of related controls. Deliberately not .fc-ctl-label:
   that class names a control, and a reader who sees the same styling above a
   group would look for the control it belongs to.

   No padding and no rule of its own: the grid already draws a rule between
   rows, so anything here lands on top of one and reads as a gap. */
.fc-ctl-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
}

/* an inline heading — a panel that is not an accordion — keeps the rule running
   off to the right, so a long list still reads as sections */
.fc-ctl-head:not(.fc-sec-head)::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--card-border);
}

/* the first section sits under the panel title, so it needs no space above it */
.fc-ctl-head + * { margin-top: 0; }

/* THE ACCORDION. One section open at a time, the title the thing you click. */
.fc-sec-head { gap: 8px; }

/* a section with nothing to open has no button to push its switch to the edge */
.fc-sec-head > .fc-ctl-head-text { flex: 1; }

.fc-sec-btn {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* A glyph, not a border-drawn chevron: two borders rotated a half turn pass
   through a state where they read as a stray diagonal mark on the header. A
   character turning a quarter never does. */
.fc-sec-caret {
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  transform: rotate(-90deg);
  transition: transform .19s cubic-bezier(.33, 1, .68, 1);
}

.fc-sec-caret::before { content: "▾"; }

.fc-ctl-sec.is-open .fc-sec-caret { transform: none; }

/* THE ACCORDION SHELL. Open, the header is a bar of its own; the body rides a
   0fr -> 1fr grid track — the one height CSS animates without being measured.
   display: none would kill both the animation and the width the column
   measurement needs, so a collapsed section keeps its width and loses only its
   height. */
.fc-ctl-sec { padding: 0; overflow: hidden; }

.fc-sec-head {
  padding: 11px 16px;
  user-select: none;
  transition: background .18s ease;
}

.fc-ctl-sec.is-open .fc-sec-head {
  background: #f6f7f9;
  border-bottom: 1px solid var(--card-border);
}

/* Height 0 <-> auto, with the click handler lending the pixel value for the
   ride — a 0fr -> 1fr track was tried first and Chrome held it at zero until
   the end, which read as a snap. The inner box is what gets measured, so the
   handler never has to know what a section contains. */
/* contain keeps each ride's layout inside the section — without it every
   animated frame relaid the whole panel, which is what made the first frame
   lag behind the click. */
/* 0fr to 1fr: a grid row can tween to its content's height on its own, where
   height cannot tween to auto. That is what lets the click be a class flip
   instead of two forced layouts per section. */
.fc-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .19s cubic-bezier(.33, 1, .68, 1);
}

.fc-ctl-sec.is-open .fc-acc-body { grid-template-rows: 1fr; }

/* visibility rides the same clock, so a shut section's controls fall out of
   the tab order without snapping the animation */
/* the header fills with a wash the moment it is pressed, so the click is
   acknowledged in the frame it happens rather than when the section arrives */
.fc-sec-btn { position: relative; overflow: hidden; }

.fc-sec-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 20, 27, .07);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s cubic-bezier(.33, 1, .68, 1), opacity .3s ease .12s;
}

.fc-sec-btn:active::before { transform: scaleX(1); opacity: 1; transition: transform .18s ease; }

.fc-acc-inner {
  overflow: hidden;
  /* a grid item will not shrink below its content unless it is told it may */
  min-height: 0;
  visibility: hidden;
  transition: visibility .19s;
}

.fc-ctl-sec.is-open .fc-acc-inner { visibility: visible; }

.fc-ctl-sec .fc-ctl-grid2 { margin: 12px 16px 14px; }

@media (prefers-reduced-motion: reduce) {
  .fc-acc-body,
  .fc-acc-inner,
  .fc-sec-caret { transition: none; }
}

/* A section whose whole style is one choice carries its on/off beside the
   heading rather than as a control of its own. */
.fc-head-toggle { flex: none; }

.fc-ctl-color {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Two equal columns. Fixed 1fr 1fr rather than sizing each column to its
   content: uneven columns make every card's panel a different shape, and the
   dividers stop lining up. */
/* row-gap stays 0 and the spacing is margin above the border + padding below
   it, so the rule sits exactly halfway between two rows. Splitting the space
   between a gap and a padding put the border off-centre. */
/* align-items: stretch (the default) is deliberate — a cell has to fill its
   row's height or the column divider only reaches as far as the shorter of the
   two controls. */
/* row-gap does the vertical spacing, so it is identical everywhere by
   construction: the divider is its own grid row, giving cell — 15 — rule — 15
   — cell between every pair. Padding on the cells couldn't do this, because a
   cell's height depends on what's in it. */
.fc-ctl-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  row-gap: 12px;
}

/* The separation is padding on BOTH sides of the divider rather than a
   column-gap, so the two columns end up with the same usable width — with the
   gap plus a one-sided padding the right column was 24px narrower, and a group
   that fitted on the left would wrap on the right. */
.fc-ctl-grid2 > :not(.is-col2):not(.is-full) { padding-right: 22px; }

/* min-width: 0 stops a wide cell from stretching its own column — without it
   1fr isn't really half, the two columns come out uneven, and the measurement
   below never sees an overflow to correct. */
.fc-ctl-grid2 > * { min-width: 0; }

/* Dividers as borders on the cells, so they follow the grid instead of cutting
   across it. app.js works out the real column and row and tags each cell —
   nth-child can't, because a full-width cell shifts everything after it. */
.fc-ctl-grid2 > .is-full { grid-column: 1 / -1; }

.fc-ctl-grid2 > .is-col2 {
  padding-left: 22px;
  border-left: 1px solid var(--rule);
}

/* The row divider is a real full-width item, not a border on each cell — a
   border stops at the cell's edge, so a row holding one control drew a line
   across half the panel. */
.fc-ctl-rowrule {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--rule);
}

/* color swatches stack, one per line — side by side they read as one control */

.fc-ctl-val {
  display: flex;
  align-items: center;
  gap: 9px;
}

.fc-color-swatch,
.fc-divider-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.fc-color-swatch::-webkit-color-swatch-wrapper,
.fc-divider-swatch::-webkit-color-swatch-wrapper { padding: 0; }

.fc-color-swatch::-webkit-color-swatch,
.fc-divider-swatch::-webkit-color-swatch { border: 1px solid rgba(0, 0, 0, .15); border-radius: 7px; }

/* the hex reads as a value, but stays editable */
.fc-color-hex,
.fc-divider-hex {
  width: 7.2ch;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  text-align: right;
  text-transform: uppercase;
  color: var(--ink);
  outline: none;
}

.fc-color-hex:focus { color: var(--red); }

.fc-ctl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.fc-range-val {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1;
  color: var(--ink);
  /* the number changes width as it counts, and the slider must not shuffle
     sideways under the pointer while it does */
  min-width: 6ch;
  text-align: right;
  white-space: nowrap;
}

/* the slider is the one control that wants the room its row has going spare */
.fc-ctl-range .fc-ctl-body { flex: 1; }

.fc-range-slider {
  display: block;
  width: 100%;
  min-width: 0;
  /* tall enough to contain its own thumb — at 5px the thumb overflowed the
     cell and stole space from the gap below */
  height: 16px;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* WebKit has no filled-side pseudo, so the fill is painted on the track from a
   percentage app.js keeps up to date. */
.fc-range-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--red) var(--fc-fill, 50%), var(--rule) var(--fc-fill, 50%));
}

.fc-range-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--rule);
}

.fc-range-slider::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--red); }

.fc-range-slider::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 3px solid var(--red);
  border-radius: 50%;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}

.fc-range-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--red);
  border-radius: 50%;
  background: #fff;
}

/* a row of control groups separated by vertical rules */
.fc-ctl-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
}

.fc-ctl-top + .fc-ctl-top,
.fc-ctl-top + .fc-icon-grid,
.fc-icon-grid + .fc-ctl-top { margin-top: 14px; }

/* …but NOT inside the grid, where spacing is the row-gap's job. This rule is
   left over from the stacked layout: in the grid the second cell of a row
   follows the first in DOM order, so it was picking up 14px of margin, growing
   the row by 14px. Its neighbour then centred in the taller row and sat 7px
   lower — which is exactly the uneven gap above and below every divider. */
.fc-ctl-grid2 > .fc-ctl-top + .fc-ctl-top { margin-top: 0; }

/* a switch that needs explaining. Full width by construction — see app.js —
   so the two lines have room and neither has to wrap. */

/* the cell is a flex row with a 13px gap; block stacking puts the distance
   under the note margin alone, instead of the gap plus the margin */
.fc-ctl-top:has(.fc-ctl-note) { display: block; }

/* Only one of these. A second copy further down the file used to win, which is
   why the note's own size and spacing appeared to do nothing. */
.fc-ctl-note {
  margin: 5px 0 0;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted-2);
}

/* THE THREE EXTRAS. Each is one decision, so each is a card you press rather
   than a label with a switch beside it — three switches in a row read as a
   control panel, and the descriptions had nowhere to sit. */
.fc-ctl-loose {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
  padding-top: 15px;
  border-top: 1px solid var(--hairline);
}

.fc-loose-card {
  display: block;
  width: 100%;
  height: auto;
  padding: 11px 12px 12px;
  border: 1px solid var(--card-border);
  border-radius: 11px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, opacity .16s ease;
}

/* off is not disabled — it is quieter, so the difference reads at a glance
   without the card looking broken */
.fc-loose-card:not(.is-on) { opacity: .5; background: var(--preview); }

.fc-loose-card:hover { border-color: var(--muted); }
.fc-loose-card.is-on { border-color: rgba(224, 27, 34, .5); background: color-mix(in srgb, var(--red) 3%, #fff); }

.fc-loose-tick {
  display: block;
  width: 17px;
  height: 17px;
  margin-bottom: 7px;
  border: 1.5px solid #c9ccd3;
  border-radius: 5px;
  background: #fff;
}

.fc-loose-card.is-on .fc-loose-tick {
  border-color: var(--red);
  background: var(--red) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.2 8.4l3 3 6.4-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
}

.fc-loose-name {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.fc-loose-note {
  display: block;
  margin-top: 4px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted-2);
}

/* THE HOVER MOCK. Fixed to the viewport, not to the row: the panel scrolls and
   clips, and a mock big enough to read is taller than the room above the row.
   app.js puts it where it fits. */
.fc-loose-item.has-demo .fc-ctl-label {
  cursor: help;
  text-decoration: underline dotted var(--rule);
  text-underline-offset: 3px;
}

.fc-loose-demo {
  position: fixed;
  z-index: 60;
  display: flex;
  /* hug the mock: laid out free of any column, the box took far more width
     than the drawing inside it */
  width: max-content;
  max-width: min(460px, 44vw);
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(18, 20, 32, .22);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s cubic-bezier(.22, 1, .36, 1);
}

.fc-loose-demo.is-shown { opacity: 1; transform: none; }

/* half again the size they were — the point is to be readable at a glance */
.fc-loose-demo .fc-dc-frame { zoom: .93; }
.fc-loose-demo .fc-msum-frame { zoom: .78; }

@media (prefers-reduced-motion: reduce) {
  .fc-loose-demo { transition: opacity .16s ease; transform: none; }
}

@media (max-width: 900px) {
  .fc-ctl-loose { grid-template-columns: 1fr; }
}

/* pills that carry an icon show it beside the label */
.fc-variant.has-ico {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* ---- icon picker ---- */

.fc-icon-search {
  width: 150px;
  padding: 5px 10px;
  border: 1.5px solid #e6e7ea;
  border-radius: 8px;
  font-family: "Public Sans", Inter, sans-serif;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}

.fc-icon-search:focus { border-color: var(--red); }

.fc-icon-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 7px;
}

.fc-icon-opt {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #e6e7ea;
  border-radius: 9px;
  background: #fff;
  font-size: 21px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s;
}

/* the swatch draws the very mask the effect will use, so what is picked is
   what lands on the page — and it takes the swatch colour, not its own */
.fc-icon-opt i {
  display: block;
  width: 21px;
  height: 21px;
  background: currentColor;
}

.fc-icon-opt:hover { border-color: #cfd2d7; background: #fafafb; }

.fc-icon-opt.is-active {
  border-color: var(--red);
  background: #fdf3f3;
  color: var(--red);
}

.fc-icon-none {
  margin: 0;
  font-size: 14px;
  color: #9aa0a8;
}

/* option pills — fixed choices for a token (FAQ icon, numbers on/off) */

/* One track behind the whole choice, so a row of pills reads as a single
   control with one of its parts chosen. */
.fc-opt-track {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: #f1f2f5;
  /* whole pills wrap to a second line rather than the group overflowing and
     getting cut off at the column edge */
  flex-wrap: wrap;
  row-gap: 2px;
}

/* While layoutCtlGrid() is measuring, nothing may wrap — a group that wraps
   fits by definition, and then the measurement can never tell that it needed
   the full row. Measure at natural width, then let it wrap again. */
.fc-ctl-grid2.is-measuring .fc-opt-track { flex-wrap: nowrap; }

.fc-opt,
.fc-variant {
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: Archivo, Inter, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.25;
  color: #55585f;
  /* "Full color" broken across two lines reads as two pills */
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.fc-opt:hover,
.fc-variant:hover { color: var(--ink); }

.fc-opt.is-active,
.fc-variant.is-active {
  background: var(--ramp);
  color: #fff;
}

/* asks for one more set of fields; it takes itself away at the last one */
.fc-ctl-add { justify-content: flex-start; }

.fc-addmore {
  padding: 9px 14px;
  border: 1px dashed var(--hairline, #d9d3cb);
  border-radius: 8px;
  background: none;
  color: var(--red, #e01b22);
  font: 700 13px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.fc-addmore:hover { background: rgba(224, 27, 34, .06); }

.fc-removelast {
  padding: 9px 14px;
  border: 1px solid var(--hairline, #d9d3cb);
  border-radius: 8px;
  background: none;
  color: #7a7a86;
  font: 600 13px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.fc-removelast:hover { color: var(--red, #e01b22); border-color: currentColor; }

.fc-toggle-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fc-toggle {
  position: relative;
  flex: none;
  width: 38px;
  height: 21px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #dfe1e6;
  cursor: pointer;
  transition: background .18s;
}

.fc-toggle.is-on { background: var(--red); }

.fc-toggle-knob {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transform: translateY(-50%);
  transition: transform .18s;
}

.fc-toggle.is-on .fc-toggle-knob { transform: translateY(-50%) translateX(17px); }

/* note for controls that only affect the preview, not the copied code */

/* ---------------- Responsive ----------------
   Below 900px the shell stacks and scrolling returns to the page. app.js moves
   .fc-sidebar-foot to the end of the gallery to match. */

@media (max-width: 900px) {

  /* --- shell: stack, and give scrolling back to the page --- */
  .fc-shell {
    display: block;
    min-height: 0;
  }

  .fc-main {
    height: auto;
    overflow: visible;
    padding: 22px 16px 60px;
  }

  /* --- sidebar becomes a sticky top bar --- */
  .fc-sidebar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: auto;
    overflow: visible;
    padding: 12px 14px 10px;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  }

  .fc-sidebar .fc-logo3d { font-size: 23px; }
  .fc-tagline,
  .fc-sidebar-divider { display: none; }

  /* categories run across instead of down; the active marker moves underneath */
  .fc-nav {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 0 14px;
  }

  .fc-nav::-webkit-scrollbar { display: none; }

  .fc-nav-item {
    flex: 0 0 auto;
    width: auto;
    padding: 7px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* relocated to the end of the gallery by app.js — the gallery is a shade
     deeper than the column, so the rule above it changes with the move */
  .fc-main > .fc-sidebar-foot {
    margin-top: 30px;
    padding: 24px 0 0;
    border-top: 1px solid var(--hairline);
  }

  .fc-main > .fc-sidebar-foot .fc-cta { max-width: 320px; margin: 0 auto; }

  .fc-main > .fc-sidebar-foot .fc-contact,
  .fc-main > .fc-sidebar-foot .fc-footer-links a,
  .fc-main > .fc-sidebar-foot .fc-footer-note,
  .fc-main > .fc-sidebar-foot .fc-footer-copy { color: var(--muted); }

  .fc-main > .fc-sidebar-foot .fc-footer-links a:hover { color: var(--ink); }

  .fc-sidebar > .fc-sidebar-foot { margin-top: 4px; }

  /* --- gallery --- */
  .fc-section-head { flex-wrap: wrap; gap: 8px; }
  .fc-section-head h2 { font-size: 18px; }
  .fc-premium-label { font-size: 19px; }
  .fc-premium-sep { margin: 34px 0 20px; }

  /* never wider than the screen, and always leave a peek of the next card
     so the row reads as scrollable without arrows */
  .fc-card { flex-basis: min(288px, 80vw); }
  .fc-card.is-wide { flex-basis: min(346px, 88vw); }

  /* let the rows bleed to the screen edge — the fades sit at the true edge */
  .fc-track {
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-left: 16px;
  }

  .fc-fade-l, .fc-fade-r { display: none; }

  /* --- banner --- */
  .fc-banner {
    height: auto;
    min-height: var(--banner-h);
    padding: 7px 14px;
    text-align: center;
  }

  .fc-banner span { font-size: 11px; line-height: 1.45; }

  /* --- modal --- */
  .fc-overlay { padding: 12px; }
  .fc-modal { width: 100%; border-radius: 15px; }
}

/* the arrows only ever appear on section hover, which touch devices don't have */
@media (hover: none) {
  .fc-arrow { display: none; }
}

@media (max-width: 560px) {
  .fc-main { padding: 18px 14px 50px; }

  .fc-track { margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
  .fc-section-head h2 { font-size: 16px; }
  .fc-filters { margin-left: 0; }

  .fc-overlay { padding: 0; }

  .fc-modal {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }

  .fc-modal-left { height: 250px; }
  .fc-modal-right { padding: 18px 16px 30px; }
  .fc-modal-title { font-size: 21px; }

  /* the tight desktop pill is too small a target for a thumb */
  .fc-opt,
  .fc-variant { padding: 8px 12px; }
}

/* ---------------- accessibility ---------------- */

/* keyboard users need to see where they are; mouse users never see this */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

.fc-sidebar :focus-visible,
.fc-modal-heart:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .fc-modal,
  .fc-overlay,
  .fc-overlay.is-closing,
  .fc-overlay.is-closing .fc-modal { animation: none; }

  .fc-track { scroll-behavior: auto; }
}

/* ---------------- off-screen tiles ----------------
   app.js marks tiles outside the viewport .is-idle. */

.fc-card.is-idle .fc-preview *,
.fc-card.is-idle .fc-preview *::before,
.fc-card.is-idle .fc-preview *::after {
  animation-play-state: paused !important;
}

/* ---------------- tags ----------------
   Nowhere on screen: not on the tiles, where they competed with the title, and
   no longer in the modal. They are only what the search reads. */

/* ---------------- search ----------------
   Its own band above the first category: a search that filters the gallery
   belongs with the gallery, not inside the announcement strip. */
.fc-searchbar {
  /* no panel around it: the field carries its own shape, and the frame only
     pushed the gallery down. The gap below is the widest on the page — it
     separates the header from the gallery, so it has to beat the gap between
     one category and the next */
  margin: 0 0 38px;
  padding: 0;
  background: none;
}

.fc-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  border: 1px solid var(--field-edge);
  border-radius: 12px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.fc-search:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(224, 27, 34, .1);
}

.fc-search-ico { flex: 0 0 auto; color: var(--field-ink); }

#fc-search {
  width: 100%;
  padding: 14px 0;
  border: 0;
  background: none;
  color: var(--field-ink);
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  appearance: none;
}

#fc-search::placeholder { color: var(--field-ink); font-weight: 400; }
#fc-search::-webkit-search-cancel-button { display: none; }

.fc-search-clear {
  flex: 0 0 auto;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--muted-2);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.fc-search-count {
  margin: 10px 2px 0;
  font-family: Archivo, Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted-2);
}

.fc-search-count[hidden] { display: none; }

/* ---- results: one flat grid ----
   Searching drops the grouping entirely. Five results split across five
   categories is five rows of one card; the same five side by side is a result
   set. display:contents lifts the cards out of their sections without moving a
   single node, so clearing the search snaps the tracks back exactly as they
   were. */
body.is-searching .fc-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* the main area is taller than the results, and a wrapped flex box spreads
     its lines apart by default — which showed as a blank band under the search
     and a second row stranded near the bottom */
  align-content: flex-start;
  gap: 18px;
}

body.is-searching .fc-section,
body.is-searching .fc-track-wrap,
body.is-searching .fc-track {
  display: contents;
}

/* the category headings, the arrows and the edge fades all belong to a row */
body.is-searching .fc-section-head,
body.is-searching .fc-arrow,
body.is-searching .fc-fade { display: none; }

/* the search band is a flex item now, so it has to claim the full row */
body.is-searching .fc-searchbar,
body.is-searching .fc-noresults { flex: 0 0 100%; }

.fc-noresults {
  margin: 40px 0 0;
  font-family: Inter, sans-serif;
  font-size: 15px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  /* the banner stacks, and a search field squeezed beside the message reads as
     neither one thing nor the other */
  .fc-search { width: 100%; }
}


/* ---- the category label on a card ----
   Hidden while browsing, where the section heading above already says it, and
   shown in search results, where the headings are gone. Deliberately not a
   filled bar: in a result set every card carries one, so a solid block would be
   100% of the grid rather than an accent — the same reason the Customize pill
   rests grey. */
.fc-catlabel {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0 0 1px;
  padding: 0;
  border: 0;
  background: none;
  font-family: Archivo, Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
  cursor: pointer;
  transition: color .18s ease;
}

.fc-catlabel::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  /* the marker is where a per-category color would go later */
  flex: 0 0 auto;
}

.fc-catlabel:hover { color: var(--red); }

body.is-searching .fc-catlabel { display: flex; }

/* ---------------- locked premium effect ----------------
   The spec gates premium at the copy step, so this panel is a different overlay
   from the detail modal rather than the same one with parts hidden: nothing
   about the effect — code, install steps, controls — is built for a visitor who
   is not entitled to it. */
.fc-lock {
  position: relative;
  width: min(460px, 92vw);
  margin: auto;
  padding: 38px 34px 30px;
  border-radius: 19px;
  background: #fff;
  text-align: center;
  outline: none;
  animation: fc-modalin .28s cubic-bezier(.2, .8, .2, 1);
}

.fc-lock-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--muted-2);
  cursor: pointer;
}

.fc-lock-kicker {
  margin: 0 0 14px;
  font-family: Archivo, Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

.fc-lock-title {
  margin: 0 0 8px;
  font-family: Sora, Inter, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}

.fc-lock-sub {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
}

.fc-lock-cta {
  display: block;
  padding: 14px 20px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-family: Archivo, Inter, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background-color .18s ease;
}

.fc-lock-cta:hover { background: var(--red-hover); }

/* required, not optional: it is what sets the expectation early */
.fc-lock-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* the conversion cards are tagged by what they DO, not by what they cost */
.fc-tag.is-conversion {
  background: #fdeaec;
  color: #b3202b;
}

.fc-premium-sub {
  margin-left: 10px;
  font-family: Archivo, Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted-2);
  text-transform: none;
}

/* ================= TRIAL LAYOUT — index.html?layout=side =================
   Each category's title sits in a column beside its cards rather than above
   them, with the effect count and a "Show all" link under it.

   Everything here is scoped to body.is-sidehead, and the count and link are
   hidden in the default layout below — so the normal page is untouched and
   reverting the trial is deleting this one block plus the two hidden rules. */
.fc-section-count,
.fc-section-all { display: none; }

body.is-sidehead .fc-section {
  display: grid;
  /* a fixed column, so every category's title starts on the same left edge —
     a column sized to its own text would stagger the whole page */
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

body.is-sidehead .fc-section-head {
  /* the default head is a flex ROW with space-between, which in a 150px column
     lays the title, the count and the link across one line on top of each
     other — the whole column has to stack instead */
  display: block;
  padding-top: 4px;
  border-top: 3px solid var(--ink);
}

body.is-sidehead .fc-section-title { display: block; }

/* the dash belongs to the centred heading; here the rule above does that job */
body.is-sidehead .fc-dash { display: none; }

body.is-sidehead .fc-section-head h2 {
  margin: 10px 0 0;
  font-size: 14px;
  /* tighter than the centred heading: the same tracking at this size opens the
     words up until they no longer read as one title */
  letter-spacing: .02em;
  line-height: 1.25;
}

body.is-sidehead .fc-section-count {
  display: block;
  margin: 6px 0 0;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

body.is-sidehead .fc-section-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  font-family: Archivo, Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  cursor: pointer;
}

body.is-sidehead .fc-section-all .fc-section-arrow { transition: transform .18s ease; }
body.is-sidehead .fc-section-all:hover .fc-section-arrow { transform: translateX(3px); }

/* the left fade would sit over the title column, and the left arrow with it */
body.is-sidehead .fc-fade-l,
body.is-sidehead .fc-arrow-l { display: none; }

/* searching drops the grouping entirely, so the trial layout steps aside */
body.is-searching.is-sidehead .fc-section { display: contents; }

@media (max-width: 900px) {
  /* a 150px column beside a card track leaves neither enough room */
  body.is-sidehead .fc-section { display: block; }
  body.is-sidehead .fc-section-head { border-top: 0; }
  body.is-sidehead .fc-fade-l,
  body.is-sidehead .fc-arrow-l { display: block; }
}

/* ================= THE CATEGORY HEADING =================
   Chosen 2026-07-30 and applied by default: body carries is-rulehead from the
   markup. The logo's two stars, then the title in sentence case, a rule running
   out to the right, and the count and Show all at the far end.

   The old centred heading is still reachable at index.html?layout=classic, and
   the side-column trial at ?layout=side. */
/* the space above a title is the previous category's bottom margin — tightened
   here so the page reads as one list rather than as separate blocks */
body.is-rulehead .fc-section { margin-bottom: 18px; }

body.is-rulehead .fc-section-head {
  justify-content: flex-start;
  align-items: baseline;
  gap: 11px;
  margin-bottom: 14px;
}

/* the logo's own two stars, drawn at heading size — the brand mark rather
   than a bar or a bullet. A mask rather than an image, so the color stays a
   token and follows any later change to --red. */
body.is-rulehead .fc-dash {
  width: 26px;
  height: 20px;
  border-radius: 0;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath d='M12 0 L14.2 9.8 L24 12 L14.2 14.2 L12 24 L9.8 14.2 L0 12 L9.8 9.8 Z' fill='%23000' transform='translate(0 2) scale(0.83)'/%3E%3Cpath d='M12 0 L14.2 9.8 L24 12 L14.2 14.2 L12 24 L9.8 14.2 L0 12 L9.8 9.8 Z' fill='%23000' opacity='0.75' transform='translate(19 11) scale(0.55)'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath d='M12 0 L14.2 9.8 L24 12 L14.2 14.2 L12 24 L9.8 14.2 L0 12 L9.8 9.8 Z' fill='%23000' transform='translate(0 2) scale(0.83)'/%3E%3Cpath d='M12 0 L14.2 9.8 L24 12 L14.2 14.2 L12 24 L9.8 14.2 L0 12 L9.8 9.8 Z' fill='%23000' opacity='0.75' transform='translate(19 11) scale(0.55)'/%3E%3C/svg%3E") no-repeat center / contain;
  /* the row is baseline-aligned for the title and its count; the stars have no
     baseline worth aligning, so they are placed against the type instead */
  align-self: center;
  margin-bottom: 2px;
}

body.is-rulehead .fc-section-head h2 {
  /* sentence case and normal tracking: at this size the uppercase version
     reads as a system label rather than as the name of a set */
  font-size: 21px;
  letter-spacing: -.01em;
  text-transform: none;
}

/* count and link sit at the FAR END of the row, past the rule. Beside the
   title they compete with it; out there they read as a quiet stat and the
   title keeps the whole left edge. Ordered after the rule by flex order, so
   the markup can stay as it is. */
body.is-rulehead .fc-section-count {
  display: block;
  order: 3;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--faint);
}

body.is-rulehead .fc-section-all {
  display: inline-flex;
  order: 4;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  font-family: Archivo, Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--red);
  white-space: nowrap;
  cursor: pointer;
}

body.is-rulehead .fc-section-all .fc-section-arrow { transition: transform .18s ease; }
body.is-rulehead .fc-section-all:hover .fc-section-arrow { transform: translateX(3px); }

/* the rule fills whatever is left of the row, so it ends at the page edge
   whatever the title is called */
body.is-rulehead .fc-section-head::after {
  content: "";
  order: 2;
  flex: 1 1 auto;
  height: 1px;
  margin-left: 4px;
  /* Centred against the type, not sat on the baseline: on the baseline it
     reads as an underline running off the title. --rule rather than
     --hairline, which is meant for lines inside a panel and all but vanishes
     out here on white. */
  align-self: center;
  background: var(--rule);
}



/* the result bar: what matched, and the way back out */
.fc-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.fc-search-result[hidden] { display: none; }

.fc-search-count-n {
  margin: 0;
  font-family: Archivo, Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted-2);
}

/* a real button, not a subtle icon: leaving a search should be as easy to find
   as starting one, and the × in the field is not */
.fc-search-back {
  padding: 8px 14px;
  border: 1px solid var(--red);
  border-radius: 999px;
  background: #fff;
  font-family: Archivo, Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.fc-search-back:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* The premium mark: a crown before the name, in gold rather than the brand red
   — red is the site's own accent and would read as a FunnelCharm badge rather
   than as a property of the effect. The early-access wording lives in the
   title attribute, since spelling it out beside every card ran longer than the
   titles themselves. */
.fc-crown-wrap {
  display: inline-flex;
  align-items: center;
  margin-right: 7px;
  /* the crown sits on the type's own line, not on its baseline */
  vertical-align: -1px;
}

.fc-crown {
  flex: 0 0 auto;
  /* the artwork carries its own gold, so nothing here tints it */
  display: block;
}

/* the modal's title is larger, so the crown grows with it */
.fc-modal-title .fc-crown-wrap { margin-right: 9px; }
.fc-modal-title .fc-crown { width: 21px; height: 21px; }

/* matches the light red the Conversion Features row carries */
.fc-tag.is-conversion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fdeaec;
  color: #b3202b;
}

/* The premium line under the modal's title. Filled rather than colored text:
   this strip sits over the live preview, which is dark on some cards and light
   on others, and gold type disappears against the light one. A filled chip
   reads on both without needing a rule per surface. */

/* the wording control in the customize panel */
.fc-ctl-text { display: flex; align-items: center; gap: 10px; }

.fc-textin {
  /* a width of its own, so the group measures as wide as it will actually be —
     the browser's default field is wide enough to send every wording control to
     a row of its own */
  flex: 0 1 auto;
  width: 118px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  background: #fff;
  font: 600 13px Archivo, Inter, sans-serif;
  color: var(--ink);
}

.fc-textin:focus { outline: 2px solid var(--red); outline-offset: 1px; }

/* a field flagged full owns its row, so the wording shows uncropped */
.fc-ctl-text.fc-ctl-wide .fc-ctl-body { flex: 1; }
.fc-ctl-text.fc-ctl-wide .fc-textin { flex: 1; width: 100%; max-width: none; }

/* the word budget, inside the field's own row so it moves with it */
.fc-ctl-text .fc-ctl-body { position: relative; display: flex; align-items: center; gap: 8px; }

.fc-wcount {
  flex: none;
  font: 700 11px Archivo, Inter, sans-serif;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* over the budget the field says so rather than silently truncating */
.fc-ctl-text.is-over .fc-textin { border-color: var(--red); }
.fc-ctl-text.is-over .fc-wcount { color: var(--red); }

/* the include-me box ahead of a wording field */
.fc-wcheck {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1.5px solid #c9ccd3;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.fc-wcheck.is-on { border-color: var(--red); background: var(--red); }

.fc-wcheck.is-on::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}

/* an unticked line keeps its words but reads as resting */
.fc-wcheck:not(.is-on) ~ .fc-ctl-label,
.fc-wcheck:not(.is-on) ~ .fc-ctl-body .fc-textin { opacity: .45; }

.fc-ctl-note.is-right { text-align: right; }

/* a note with no control above it carries its own top margin */
.fc-ctl-note.is-standalone { margin: 0; }

/* the open mark, and what a card does under the pointer */
.fc-open {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E7E1D9;
  color: #7d7469;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.fc-card:hover .fc-open {
  background: var(--ramp);
  color: #fff;
  transform: translate(1px, -1px);
}

.fc-card {
  transition: background .18s ease, box-shadow .22s ease, transform .18s ease, border-color .18s ease;
}

.fc-card:hover {
  background: color-mix(in srgb, var(--red) 4%, #fff);
  border-color: color-mix(in srgb, var(--red) 22%, var(--card-border));
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--red) 55%, transparent);
}

/* the count sits at the end of a sidebar row */
.fc-nav-item span:first-of-type { flex: 1 1 auto; }

.fc-nav-count {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 2px 2px;
  /* set in the warm tan rather than a pill — a chip on paper competes with the
     dark row that marks the current category */
  color: var(--side-count);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

.fc-nav-item.is-active .fc-nav-count { color: var(--side-count); }

/* the one instruction panel, closed until it is asked for */
.fc-howto {
  /* it leads the column, so it carries a little weight — a tinted face and a
     red edge, without becoming a second call to action.
     No margin of its own: the column's gap is the spacing, or this row sits
     further from the panel than every other pair. */
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--red) 28%, var(--card-border));
  border-left: 3px solid var(--red);
  border-radius: 12px;
  background: color-mix(in srgb, var(--red) 4%, #fff);
}

.fc-howto:hover { background: color-mix(in srgb, var(--red) 7%, #fff); }

/* While it is closed the panel catches the light every few seconds — enough to
   read as something that opens, without a bouncing arrow. */
/* overflow stays visible so the help picture can leave the panel; the sheen is
   clipped by the header it runs across instead */
.fc-howto { position: relative; }

.fc-howto-head { position: relative; overflow: hidden; }

.fc-howto:not([open]) .fc-howto-head::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--red) 13%, transparent) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: fc-howto-sheen 2.8s ease-in-out infinite;
}

@keyframes fc-howto-sheen {
  0%, 22% { transform: translateX(-100%); }
  78%, 100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .fc-howto:not([open]) .fc-howto-head::after { animation: none; opacity: 0; }
}

.fc-howto .fc-panel-title { color: var(--red); }

.fc-howto-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.fc-howto-head::-webkit-details-marker { display: none; }

.fc-howto-chev {
  display: grid;
  place-items: center;
  margin-left: auto;
  /* the disc sets this header's height, so it has to come down with the type */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--red) 12%, #fff);
  color: var(--red);
  font-size: 15px;
  line-height: 1;
  /* points along the row at rest, and turns down once it is open */
  transform: rotate(-90deg);
  transition: transform .2s ease, background .2s ease;
}

.fc-howto:hover .fc-howto-chev,
.fc-howto[open] .fc-howto-chev { transform: rotate(0deg); background: color-mix(in srgb, var(--red) 18%, #fff); }

.fc-howto .fc-howto-steps { margin: 0; padding: 0 16px 14px 34px; }

.fc-howto .fc-howto-note { margin: 0; padding: 0 16px 14px; }

/* inside its own tab the list needs no box of its own — the tab already
   carries the name and the frame */
.fc-howto.is-pane { border: 0; border-radius: 0; background: none; }
.fc-howto.is-pane:hover { background: none; }
.fc-howto.is-pane .fc-howto-steps { padding: 4px 4px 12px 22px; }
.fc-howto.is-pane .fc-howto-note { padding: 0 4px 8px; }

/* the route to a box, kept quieter than the instruction itself */
.fc-where {
  display: inline-block;
  margin-left: 4px;
  color: var(--muted);
  font-size: .92em;
}

/* the "where is it" mark on the CSS ID step */
.fc-help {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--red) 14%, #fff);
  color: var(--red);
  font: 800 11px Archivo, Inter, sans-serif;
  cursor: pointer;
  vertical-align: 1px;
}

.fc-help:hover { background: color-mix(in srgb, var(--red) 24%, #fff); }

/* the picture sits over everything, so no panel can clip it */
.fc-idhelp {
  margin: auto;
  padding: 10px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 30px 70px -24px rgba(18, 20, 32, .6);
  background: #fff;
}

/* the shot is shown at the size it was made, not stretched */
.fc-idhelp img { display: block; width: auto; max-width: 88vw; height: auto; border-radius: 8px; }

.fc-idhelp::backdrop { background: rgba(12, 14, 22, .45); }

/* browsers without popover support get the same box from a class */
.fc-idhelp:not(:popover-open).is-open {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  z-index: 60;
}

/* ---------------- The account corner ---------------- */
/* The search field and the account control share the gallery's top row, so
   signing in is where a person expects it rather than buried in the sidebar. */

.fc-toprow {
  display: flex;
  align-items: center;
  gap: 26px;
}

/* it takes whatever the row has left, stopping a clear gap short of the
   account links rather than at a width of its own */
.fc-toprow .fc-search { flex: 1 1 auto; min-width: 0; }

.fc-account {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}

/* THE SAME BUTTON AS "TRY IT YOURSELF" — the ember ramp that drifts on its
   own, at the size a header can carry. Written out rather than sharing the
   class because .fc-hero-try is full width by definition. */
.fc-acct-btn {
  display: inline-block;
  padding: 13px 22px;
  border: 0;
  border-radius: 11px;
  background-image: linear-gradient(100deg, #f4551f 0%, #e01b22 30%, #b3141a 55%, #e01b22 80%, #f4551f 100%);
  background-size: 240% 100%;
  animation: fcTryDrift 7s ease-in-out infinite;
  color: #fff;
  font-family: Archivo, Inter, sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255, 106, 31, .3);
  transition: transform .16s ease, box-shadow .16s ease;
}

.fc-acct-btn:hover {
  transform: translateY(-2px);
  background-image: linear-gradient(100deg, var(--maroon) 0%, var(--red) 30%, var(--maroon) 60%, var(--red) 100%);
  color: #fff;
  box-shadow: 0 12px 26px rgba(142, 17, 25, .38);
}

@media (prefers-reduced-motion: reduce) { .fc-acct-btn { animation: none; } }

/* a link, not a box — these are <button> as often as <a> now, and a button
   arrives with a border, a background and a font of its own */
/* a link, not a box — these are <button> as often as <a> now, and a button
   arrives with a border, a background and a font of its own */
a.fc-acct-link,
.fc-acct-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

a.fc-acct-link:hover,
.fc-acct-link:hover { color: var(--red); }

.fc-acct { position: relative; }

.fc-acct-face {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.fc-acct-face:hover { border-color: var(--muted-2); }

.fc-acct-initial {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.fc-acct-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 650;
}

.fc-acct-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5);
}

.fc-acct-menu a,
.fc-acct-menu button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.fc-acct-menu a:hover,
.fc-acct-menu button:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }

@media (max-width: 720px) {
  .fc-toprow { flex-wrap: wrap; }
  .fc-account { order: -1; width: 100%; justify-content: flex-end; }
}

/* ---------------- The premium gate ---------------- */
/* Takes the code block's place on a premium effect until someone registers.
   Everything else about the effect stays on show. */

.fc-gate {
  margin-top: 18px;
  padding: 26px 24px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fdf7f0);
  text-align: center;
}

.fc-gate-crown { display: block; margin: 0 auto 10px; }

.fc-gate-head {
  margin: 0 0 4px;
  font-family: Archivo, Inter, sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.fc-gate-sub { margin: 0 0 18px; color: var(--muted-2); font-size: 14px; }

.fc-gate-btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 11px;
  background-color: var(--red);
  background-image: var(--ramp-anim);
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: #fff;
  font-family: Archivo, Inter, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}

.fc-gate-btn:hover { color: #fff; animation: fc-ramp-slide 2.2s ease-in-out infinite; }
.fc-gate-note { margin: 14px 0 0; color: var(--muted-2); font-size: 12.5px; }

/* said for search engines and screen readers, drawn for nobody */
.fc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* only in the edition that has accounts — see edition.js */
.fc-free .fc-only-full { display: none; }

/* a field for a word or two should not run the width of the panel */
.fc-textin[maxlength="4"] { max-width: 84px; }
.fc-textin[maxlength="8"] { max-width: 128px; }

/* THE CONVERSION BAND.
   The section and its red separator sit on a light red field. The main pane has
   its own padding, so the tint is stretched back out to the pane edges with a
   negative margin and put back as padding — a plain background would stop short
   of both sides and read as a stray box. */
.fc-premium-sep,
.fc-section.is-conversion {
  --fc-band: linear-gradient(118deg, #5e0c12 0%, var(--maroon) 42%, var(--red) 100%);
  background: var(--fc-band);
  margin-left: calc(-1 * var(--fc-main-pad, 34px));
  margin-right: calc(-1 * var(--fc-main-pad, 34px));
  padding-left: var(--fc-main-pad, 34px);
  padding-right: var(--fc-main-pad, 34px);
}

.fc-premium-sep {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 26px;
  padding-bottom: 18px;
  border-radius: 0;
}

.fc-section.is-conversion {
  padding-bottom: 16px;
  margin-bottom: 30px;
  border-bottom: 0;
}

/* on the band, everything that was ink becomes white */
.fc-premium-sep .fc-premium-label { color: #fff; }
.fc-premium-sep .fc-premium-sub { color: rgba(255, 255, 255, .82); }
.fc-premium-sep::before,
.fc-premium-sep::after { background: #fff; opacity: .4; }

.fc-section.is-conversion .fc-section-head h2 { color: #fff; }
.fc-section.is-conversion .fc-section-count { color: rgba(255, 255, 255, .68); }
.fc-section.is-conversion .fc-section-all { color: #fff; }
body.is-rulehead .fc-section.is-conversion .fc-section-head::after { background: rgba(255, 255, 255, .34); }

/* the arrows that scroll the row have to read on the band, not on white */
.fc-section.is-conversion .fc-arrow {
  background: rgba(255, 255, 255, .92);
  color: var(--maroon);
  border-color: transparent;
}

/* and the fades at each end of the row take the band's colour, not white */
.fc-section.is-conversion .fc-fade-l { background: linear-gradient(90deg, #660d13, transparent); }
.fc-section.is-conversion .fc-fade-r { background: linear-gradient(270deg, #d81a21, transparent); }

/* the cards' own surface has to lift off the tint rather than blend into it */
.fc-section.is-conversion .fc-card { background: #ffffff; }

/* THE CODE-ICON POPOVER.
   The icon is drawn rather than shipped as a picture — two characters on a
   rounded square, sharp at any size and nothing extra to download. */
/* The layout is set only while it is open. A plain `display: grid` here beats
   the browser's own rule that hides a closed popover, and the box shows up in
   the middle of the page. */
.fc-codehelp {
  padding: 18px 22px;
  max-width: 320px;
  text-align: center;
}

.fc-codehelp:popover-open,
.fc-codehelp.is-open {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.fc-codehelp p {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
}

.fc-codeicon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #2f6fd0;
  color: #fff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.02em;
}

/* WHAT THIS IS, above how to install it. Plain text rather than a panel: the
   column already has two bordered boxes and a third reads as chrome. */
.fc-about {
  font-size: 13px;
  line-height: 1.65;
  color: var(--body);
}

.fc-about[hidden] { display: none; }

.fc-about b {
  font-weight: 700;
  color: var(--ink);
}


/* ============ TRIAL LAYOUT — index.html?layout=hero ============
   The conversion tiles give way to a standing showcase: the modal element
   itself, docked into the band, with a pill per feature above it. Everything
   here is scoped to body.is-herostage, so the live page without
   the param never sees any of it. */
/* THE WHOLE PAGE IS ONE CENTRED OBJECT — sidebar included. Capping the main
   column alone left the sidebar welded to the left edge of a wide screen, so
   the two halves read as separate things. The shell is capped instead, and the
   page behind it goes dark, which is what makes the gutters. */
body.is-herostage {
  background: #0c0c11;
}

body.is-herostage .fc-shell {
  max-width: calc(250px + 1432px + 2 * var(--fc-main-pad, 34px));
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0 0 90px rgba(0, 0, 0, .5);
}

/* the red category bar goes: the strip at the top of the page carries the
   pitch now, and the card row below has its own plain heading */
body.is-herostage .fc-premium-sep { display: none; }

/* the same band the tile row carried, continuing under the showcase */
/* the red belongs to the spotlight alone — the tile row under it drops back to
   the page, so one band reads as the pitch and the rest as the catalogue */
/* a plain wrapper: the tinted panel is the PITCH itself, not the space it sits
   in, so once the pitch goes the effect's own panel stands on the page alone */
/* the deck above pulls 16px back up to clear its own overhang, so the top
   margin is that much larger than the gap it leaves */
.fc-hero-band { margin: 54px 0 34px; }

/* the search bar's own breathing room is sized for a gallery below it, not for
   a panel that is the point of the page */
body.is-herostage .fc-searchbar { margin-bottom: 0; padding-bottom: 0; }

/* the tile row is an ordinary category row here, the same as Testimonials or
   Video Frame — the hero argues, the row is the catalogue */
body.is-herostage .fc-section.is-conversion { border-top: 0; }

/* THE DECK. Three slides in one cell, one lit at a time, and they travel in
   and out sideways — a crossfade left it ambiguous which way the deck moved. */
/* the clip keeps the leaving slide off the page, and the padding gives the
   pill that sits ON the panel's top edge room inside that clip */
.fc-hero-deck { display: grid; overflow: hidden; padding-top: 16px; margin-top: -16px; }
.fc-hero-deck > .fc-hero-spot { grid-area: 1 / 1; }

.fc-hero-spot {
  transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}

.fc-hero-spot:not(.is-on) {
  opacity: 0;
  pointer-events: none;
}

.fc-hero-spot.is-on { opacity: 1; transform: none; }

/* where a slide waits before it arrives, and where it leaves to */
.fc-hero-spot.is-in-r { transform: translateX(102%); transition: none; }
.fc-hero-spot.is-in-l { transform: translateX(-102%); transition: none; }
.fc-hero-spot.is-out-l { transform: translateX(-102%); }
.fc-hero-spot.is-out-r { transform: translateX(102%); }

/* the strip at the very top, and the arrows that flank the deck */
body.is-herostage { --banner-h: 38px; }
body.is-herostage .fc-banner { display: flex; }
/* the strip holds a link on the gallery and plain words on the pricing
   page — both are typeset by the same rule above; this is only the size */
body.is-herostage .fc-banner span,
body.is-herostage .fc-banner a { font-size: 13px; }
body.is-herostage .fc-banner b { font-weight: 800; }

.fc-hero-band { position: relative; }

.fc-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font: 400 20px/1 Inter, sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(18, 20, 32, .1);
  transition: border-color .16s ease, color .16s ease;
}

.fc-hero-arrow.is-prev { left: -19px; }
.fc-hero-arrow.is-next { right: -19px; }
.fc-hero-arrow:hover { border-color: rgba(224, 27, 34, .55); color: var(--red); }

/* The premium band and these arrows reach outside the content by the main
   padding. On phones and in the Chrome extension's side panel that padding
   shrinks, so the reach has to shrink with it or the page scrolls sideways. */
@media (max-width: 900px) {
  .fc-main { --fc-main-pad: 16px; }
}
@media (max-width: 560px) {
  .fc-main { --fc-main-pad: 14px; }
  .fc-hero-arrow.is-prev { left: -8px; }
  .fc-hero-arrow.is-next { right: -8px; }
}

/* where the numbers came from — quiet enough not to compete with the claim,
   present enough that the claim can be checked */
.fc-hero-src {
  margin: 12px 0 0;
  font-family: Inter, sans-serif;
  font-size: 11px;
  line-height: 1.5;
  color: #a3868a;
}

/* the row drops back to the page here, so everything that was painted to sit
   ON the band — the heading, the arrows, the fades at each end — goes back to
   its ordinary treatment too */
body.is-herostage .fc-section.is-conversion { background: none; }
body.is-herostage .fc-section.is-conversion .fc-section-head h2 { color: var(--ink); }
body.is-herostage .fc-section.is-conversion .fc-section-count { color: var(--muted); }
body.is-herostage .fc-section.is-conversion .fc-section-all { color: var(--red); }
body.is-herostage.is-rulehead .fc-section.is-conversion .fc-section-head::after { background: var(--hairline); }
body.is-herostage .fc-section.is-conversion .fc-arrow { background: #fff; color: var(--ink); border-color: var(--card-border); }
body.is-herostage .fc-section.is-conversion .fc-fade-l { background: linear-gradient(90deg, var(--preview), transparent); }
body.is-herostage .fc-section.is-conversion .fc-fade-r { background: linear-gradient(270deg, var(--preview), transparent); }

/* THE SPOTLIGHT. One effect at a time, sold properly: the pitch on the left,
   what it looks like on the right, and a single button that swaps the whole
   panel for the real thing. It replaced a row of seven pills and a category
   label, which said everything and sold nothing. */
.fc-hero-spot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 26px 30px 28px;
  border: 1px solid rgba(224, 27, 34, .42);
  border-radius: 16px;
  /* the red is strongest at the top and lets go of the page by the bottom, so
     the panel ends without drawing a line across the middle of the pitch */
  background: linear-gradient(180deg, #fdeaec 0%, rgba(253, 234, 236, .5) 46%, rgba(253, 234, 236, 0) 100%);
}

/* the pill sits ON the top edge, so it reads as a label for the panel rather
   than a first line inside it */
.fc-hero-eyebrow {
  position: absolute;
  top: -12px;
  left: 26px;
  margin: 0;
  padding: 6px 15px;
  border-radius: 999px;
  background: var(--ramp);
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .78);
}

.fc-hero-eyebrow b { color: #fff; font-weight: 700; }

/* the face the category headings wear, sized up. Not uppercased with them: a
   heading is three words, this is a sentence, and three lines of capitals stop
   being read and start being scanned past. */
.fc-hero-pitch {
  margin: 0 0 14px;
  font-family: Sora, Inter, sans-serif;
  font-size: 33px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
}

/* what the three boxes under it are, said plainly — they are what a good
   install tends to look like, not a measurement of anything */
.fc-hero-statlab {
  margin: 0 0 9px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #a3555a;
}

.fc-hero-lede {
  margin: 0 0 22px;
  max-width: 46ch;
  font-family: Inter, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--body);
}

.fc-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.fc-hero-stat {
  padding: 15px 12px;
  border-radius: 12px;
  border: 1px solid rgba(224, 27, 34, .18);
  background: rgba(255, 255, 255, .72);
  text-align: center;
}

.fc-hero-stat b {
  display: block;
  font-family: Sora, Inter, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--maroon);
}

.fc-hero-stat span {
  display: block;
  margin-top: 3px;
  font-family: Inter, sans-serif;
  font-size: 11.5px;
  color: #a3555a;
}

.fc-hero-points {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fc-hero-points li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-family: Inter, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: #33373d;
}

.fc-hero-points i {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ramp);
  color: #fff;
  font: 700 11px/20px Inter, sans-serif;
  font-style: normal;
  text-align: center;
}

/* a video's own shape, so whatever gets dropped in here needs no cropping */
.fc-hero-film {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(224, 27, 34, .2);
  display: grid;
  place-items: center;
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: var(--muted);
}

/* a slot with a real film in it: no seam between the player and the frame */
.fc-hero-film.is-film {
  overflow: hidden;
  background: #0b0d11;
  padding: 0;
}

.fc-hero-film.is-film iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* the one thing on the band that should be pressed: an orange-to-red flame
   against the maroon, which no other element on the page is wearing */
.fc-hero-try {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 19px;
  border: 0;
  border-radius: 12px;
  /* it drifts on its own rather than waiting to be hovered — the ember is the
     resting state, and hovering hands it to the brand ramp, which is darker.
     No yellow in it: the flame read as a warning strip against the tint. */
  background-image: linear-gradient(100deg, #f4551f 0%, #e01b22 30%, #b3141a 55%, #e01b22 80%, #f4551f 100%);
  background-size: 240% 100%;
  animation: fcTryDrift 7s ease-in-out infinite;
  color: #fff;
  font-family: Archivo, Inter, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(255, 106, 31, .38);
  transition: transform .16s ease, box-shadow .16s ease;
}

@keyframes fcTryDrift {
  0%, 100% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
}

.fc-hero-try:hover {
  transform: translateY(-2px);
  background-image: linear-gradient(100deg, var(--maroon) 0%, var(--red) 30%, var(--maroon) 60%, var(--red) 100%);
  box-shadow: 0 14px 32px rgba(142, 17, 25, .42);
}

/* the label is the only in-flow child, so the mark sits just off its left */
.fc-try-main {
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: transform .3s ease;
}

.fc-hero-try:hover .fc-try-main,
.fc-hero-try:focus-visible .fc-try-main { transform: translateX(13px); }

.fc-try-ico {
  position: absolute;
  right: 100%;
  top: 50%;
  width: 17px;
  height: 17px;
  margin-right: .45em;
  transform: translate(-18px, -50%);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}

.fc-hero-try:hover .fc-try-ico,
.fc-hero-try:focus-visible .fc-try-ico {
  transform: translate(0, -50%);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fc-hero-try { animation: none; }
}

.fc-hero-try:active { transform: translateY(0); }

/* THE PRESSED STATE. It has to be visible in the one frame between the click
   and the panel being built, so it is a change of shape and colour rather than
   anything that needs time to play out: the button sinks, the glow under it
   goes, and the arrow spins where it slid in from. */
.fc-hero-try.is-busy {
  transform: translateY(1px) scale(.988);
  background-image: linear-gradient(100deg, var(--maroon), #a1121a);
  box-shadow: 0 3px 10px rgba(142, 17, 25, .3);
  animation: none;
  cursor: progress;
}

.fc-hero-try.is-busy .fc-try-main { transform: translateX(13px); }

.fc-hero-try.is-busy .fc-try-ico {
  transform: translate(0, -50%);
  opacity: 1;
  animation: fcTryWork .7s linear infinite;
}

@keyframes fcTryWork {
  to { transform: translate(0, -50%) rotate(360deg); }
}

.fc-hero-pitch u {
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

@media (max-width: 1180px) {
  .fc-hero-spot { grid-template-columns: minmax(0, 1fr); }
}


/* The page headline was dropped 2026-08-09 (Oki): the spotlight's own quote is
   the first thing worth reading, and a second headline above it split the
   attention two ways. */

/* the copy button as the way to the plans: same button, unmistakably a gate */
.fc-copy.is-gate .fc-copy-ico,
.fc-copy.is-gate .fc-check-ico { display: none; }

/* ---------------- pick mode ----------------
   The gallery serving as the dashboard's effect picker. The bar rides the
   bottom so the banner and the sidebar stay exactly where they always are. */
.fc-pickbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 22px;
  background: var(--side-bg);
  border-top: 1px solid #2b2925;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .3);
}

.fc-pickbar-name {
  font: 700 14.5px/1.3 Inter, system-ui, sans-serif;
  color: #fff;
}

.fc-pickbar-count {
  flex: 1;
  font: 500 13px/1.3 Inter, system-ui, sans-serif;
  color: #a8a39b;
}

.fc-pickbar-done {
  padding: 11px 26px;
  border-radius: 9px;
  background: var(--ramp);
  color: #fff;
  font: 700 14px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
}

/* room for the bar at the end of the scroll */
.is-picking .fc-main { padding-bottom: 120px; }

/* the Add beside the card's name — the name gives up the room, the button
   never wraps away from it */
.fc-pick-add {
  flex: none;
  margin-left: auto;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--red);
  background: #fff;
  color: var(--red);
  font: 700 12px/1 Inter, system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.fc-pick-add:hover { background: #fdeaec; }

.fc-pick-add.is-on {
  background: #12a150;
  border-color: #12a150;
  color: #fff;
}

.fc-card.is-picked { outline: 2px solid #12a150; outline-offset: -1px; }

/* the modal button in pick mode keeps the icon off — the label is the story */
.fc-copy.is-pick .fc-copy-ico,
.fc-copy.is-pick .fc-check-ico { display: none; }

/* ---------------- embedded picker ----------------
   index.html?pick=<id>&embed=1 inside the dashboard. Everything that makes
   this a destination — the sidebar, the search band, the banner, the footer —
   belongs to the dashboard now. What is left is the cards and the modal. */
html.is-embed, body.is-embed { background: transparent; }

.is-embed .fc-sidebar,
.is-embed .fc-banner,
.is-embed .fc-searchbar,
.is-embed .fc-footer,
.is-embed .fc-premium-sep,
.is-embed .fc-section-head,
.is-embed .fc-arrow,
.is-embed .fc-fade,
.is-embed .fc-pickbar { display: none !important; }

/* the open arrow goes too: in the picker the whole card opens, and the row is
   carrying the Add button already */
.is-embed .fc-icons { display: none; }

/* WHILE A MODAL IS OPEN the frame is given the whole window, so for those few
   frames the cards would be the thing filling the screen — which read as the
   page going fullscreen and back. The cards stand down for the duration; the
   modal is not inside .fc-main, so it is all that shows. */
.is-embed .is-modal-open .fc-main,
body.is-embed.is-modal-open .fc-main { visibility: hidden; }

.is-embed .fc-shell { display: block; }

/* one category at a time, wrapped — never a sideways track: the dashboard's
   column is not wide enough to hide half a row off the edge */
.is-embed .fc-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 16px;
  padding: 0;
  margin: 0;
  max-width: none;
  width: auto;
  min-height: 0;
}

.is-embed .fc-section,
.is-embed .fc-track-wrap,
.is-embed .fc-track { display: contents; }

/* display:contents is an author rule, so it beats the browser's own
   [hidden] { display: none } — the category filter would be inert without
   saying it again here */
.is-embed .fc-section[hidden],
.is-embed .fc-card[hidden] { display: none; }

/* the tiles keep the gallery's own width — the one every preview was drawn
   against — and simply wrap. Nothing here may stretch them. */
.is-embed .fc-card { scroll-snap-align: none; }

/* the quiet way past the Add button — present, never competing with it */
.fc-copy-alt {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--muted-2);
  font: 600 12.5px/1 Inter, system-ui, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.fc-copy-alt:hover { color: var(--ink); }
.fc-copy-alt[hidden] { display: none; }

/* adding to a project is the good path, so the button reads as the good path */
.fc-copy.is-add { background: linear-gradient(100deg, #0c7d3e, #12a150); }
.fc-copy.is-add:hover { background: linear-gradient(100deg, #0a6b35, #0f8b45); }

/* the whole strip is the way to the plans — a line of text that is only
   partly clickable is a line people miss. It fills the strip so the click
   target is the whole bar, and centres its own text: filling the strip makes
   the flex centring above meaningless. */
.fc-banner-link {
  display: block;
  width: 100%;
  text-align: center;
  color: inherit;
  text-decoration: none;
}

/* The page's link colour turned it black on hover. It stays white and
   underlines instead, which is what a bar you can click should do. */
.fc-banner-link:hover,
.fc-banner-link:focus {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.fc-banner[hidden] { display: none; }


/* the same crown the premium effects wear, on the button that sells them.
   It is display:block elsewhere — on a button that puts it on its own line. */
.fc-acct-btn .fc-crown {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
}