/* 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;
  /* snippet-card brand red (design handoff) — used across the detail modal */
  --brand: #e5352b;
  --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;
  /* full-width banner pinned to the top edge; the shell fills what's left */
  /* The announcement strip is hidden for now (Oki, 2026-07-29) and will come
     back. 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, restore 46px and drop the display:none below. */
  --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 {
  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: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(255, 255, 255, .55);
  transition: text-decoration-color .18s;
}

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

/* 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; }
}

* { 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:
    radial-gradient(120% 45% at 50% 0%, rgba(224, 27, 34, .13), transparent 55%),
    linear-gradient(165deg, #1e1e24, #09090b);
}

.fc-tagline {
  margin: 0;
  padding: 0 14px 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #f2f2f5;
}

/* ---------------- 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: #fff;
}

.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 pink-to-red gradient, matching v1 */
  color: #e8446a;
  background: linear-gradient(100deg, #e8446a 0%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* heavier faux-bold stroke, tinted to the gradient so it doesn't flatten the fade */
  -webkit-text-stroke: 0.035em #d92b3f;
  paint-order: stroke fill;
}

/* the underline swash — preserveAspectRatio:none lets it stretch under the word */
.fc-logo3d .fc-swash {
  position: absolute;
  left: 0.143em;
  bottom: -0.2em;          /* dropped further below "Charm" */
  width: 2.4em;
  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: rgba(255, 255, 255, .08);
  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(--muted-2);
  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: #fff; }

.fc-nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s;
}

.fc-nav-item.is-active {
  color: #fff;
  background: rgba(224, 27, 34, .13);
  box-shadow:
    inset 0 0 0 1px rgba(224, 27, 34, .28),
    0 6px 20px rgba(224, 27, 34, .16);
}

.fc-nav-item.is-active::before { transform: scaleX(1); }

.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: #fff; }

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

.fc-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  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: #7c7e8b;
  transition: color .18s;
}

.fc-footer-links a:hover { color: #fff; }

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

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

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

.fc-main {
  height: calc(100vh - var(--banner-h));
  overflow-y: auto;
  padding: 30px 36px 70px;
  /* TRIAL: warm paper instead of white — revert to #fff if it does not hold up */
  background: #FAF8F5;
}

.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;
}

/* Fine grid lines, faded out toward the bottom-right by a radial mask so the
   grid only reads in the top-left through to the centre. */
.fc-preview.is-live::before,
.fc-modal-hero.is-live::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, .5) 42%, transparent 68%);
  mask-image: radial-gradient(120% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, .5) 42%, transparent 68%);
}

.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 > .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 > .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-preview.is-light.is-live::before,
.fc-modal-hero.is-light.is-live::before {
  background-image:
    linear-gradient(rgba(20, 20, 27, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 20, 27, .07) 1px, transparent 1px);
}

.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(--red);
  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);
}

/* title / stats float over the live result */
.fc-preview-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 23px 34px;
  pointer-events: none;
  /* darken the top so the white title/stats stay legible over light previews
     (video, value stack) as well as dark ones */
  background: linear-gradient(180deg, rgba(12, 12, 18, .55), rgba(12, 12, 18, 0));
}

.fc-preview-top > * { pointer-events: auto; }

.fc-modal-title {
  margin: 0;
  font-family: Archivo, Inter, sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

/* Replaces the old LIVE PREVIEW label: the preview above is visibly live, so
   the line is better spent saying what the effect actually does. Three lines at
   most, or it pushes the preview pane's own head out of shape. */
.fc-modal-lead {
  margin: 7px 0 0;
  max-width: 42ch;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .6);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.fc-modal-hero.is-light ~ .fc-preview-top .fc-modal-lead { color: rgba(20, 20, 27, .62); }

.fc-preview-meta {
  display: flex;
  align-items: center;
  gap: 13px;
}


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

.fc-modal-heart:hover { border-color: rgba(255, 255, 255, .42); color: #fff; }
.fc-modal-heart.is-liked { color: var(--brand); border-color: rgba(229, 53, 43, .55); }
.fc-modal-heart.is-liked svg { fill: currentColor; }
.fc-modal-heart.is-pop { animation: fc-heartpop .5s; }

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

.fc-modal-right {
  flex: 1;
  min-width: 0;
  padding: 24px 27px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
}

/* ---------------- 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: 154px;
  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;
  /* translateX holds it centred, so the breath has to carry it */
  animation: fc-zoom-breathe 2.6s cubic-bezier(.4, 0, .3, 1) infinite;
}

/* a slow swell and a ring that opens out of the edge — a pulse rather than a
   bounce, so it draws the eye without fidgeting */
@keyframes fc-zoom-breathe {
  0%, 100% { transform: translateX(-50%) scale(1);    box-shadow: 0 4px 14px rgba(0, 0, 0, .3), 0 0 0 0 rgba(224, 27, 34, .45); }
  55%      { transform: translateX(-50%) scale(1.055); box-shadow: 0 6px 18px rgba(0, 0, 0, .34), 0 0 0 12px rgba(224, 27, 34, 0); }
}

.fc-zoom:hover { animation-play-state: paused; }

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

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

/* a testimonial card starts near the top of the panel, where 154px would sit
   on top of it */
.fc-modal:has(.fc-testi) .fc-zoom { top: 74px; }

/* a value stack starts higher in the panel than a video does */
.fc-modal:has(.fc-stack) .fc-zoom { top: 94px; }

/* the section fills the panel and carries no content in the modal, so the
   button sits dead centre. translate does both axes — translateX alone would
   leave it hanging off the middle. */
.fc-modal:has(.fc-sec) .fc-zoom {
  top: 50%;
  transform: translate(-50%, -50%);
}

/* the breathe keyframes carry their own transform, so a centred button needs
   its own pair or the animation drops it back to the top */
@keyframes fc-zoom-breathe-mid {
  0%, 100% { transform: translate(-50%, -50%) scale(1);     box-shadow: 0 4px 14px rgba(0, 0, 0, .3), 0 0 0 0 rgba(224, 27, 34, .45); }
  55%      { transform: translate(-50%, -50%) scale(1.055); box-shadow: 0 6px 18px rgba(0, 0, 0, .34), 0 0 0 12px rgba(224, 27, 34, 0); }
}

.fc-modal:has(.fc-sec) .fc-zoom { animation-name: fc-zoom-breathe-mid; }
.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);
}

/* --- 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; }
}

/* panels keep their natural height so the column scrolls */
.fc-modal-right > * { 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; }

/* TRIAL: white, with the instruction panel above carrying the red instead */
#fc-customize {
  background: #fff;
  border-color: var(--card-border);
}

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

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

.fc-panel-title {
  font-family: Archivo, Inter, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .03em;
  color: var(--ink);
}

.fc-panel-sub { font-size: 15px; 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; }

/* 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: 18px;
  border: 0;
  border-radius: 14px;
  background-color: var(--brand);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .16));
  color: #fff;
  font-family: Archivo, Inter, sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(229, 53, 43, .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 */
.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%;
  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%); }
}

.fc-peek {
  position: relative;
  margin-top: 14px;
  border: 1.5px solid #eeeef1;
  border-radius: 14px;
  background: #fbfbfc;
  overflow: hidden;
}

.fc-peek pre {
  margin: 0;
  padding: 16px 19px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 15px;
  line-height: 1.7;
  color: #24292f;              /* default: selectors & values, dark for a light box */
  white-space: pre;
  max-height: 76px;
  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-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 59px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 11px;
  border: 0;
  background: linear-gradient(180deg, rgba(251, 251, 252, 0), #fbfbfc 72%);
  font-family: Archivo, Inter, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #9aa0a8;
  cursor: pointer;
  transition: opacity .25s;
}

.fc-peek.is-open .fc-peek-fade { opacity: 0; pointer-events: none; }

.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: 15px;
  color: #9aa0a8;
  cursor: pointer;
}

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

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

.fc-howto-steps {
  margin: 0;
  padding: 16px 18px 18px 43px;
  color: #4a4e56;
  font-size: 16px;
  line-height: 1.7;
}

.fc-howto-note {
  margin: 0;
  padding: 0 18px 16px;
  font-size: 15px;
  line-height: 1.6;
  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(--brand);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 15px;
  cursor: text;
}

.fc-chip::selection { background: rgba(229, 53, 43, .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; }

  .fc-modal { height: min(92vh, 860px); }
  .fc-modal-split { flex-direction: column; }
  .fc-modal-left { width: auto; height: 290px; flex: none; }
  .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 colour 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: Archivo, Inter, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .04em;
  color: #8a8f98;
  /* 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;
}

/* 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 {
  font-family: Archivo, Inter, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

.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: 15px;
}

/* 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 {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.fc-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.fc-color-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 {
  width: 7.2ch;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--ink);
  outline: none;
}

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

.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: 15px;
  line-height: 1;
  color: var(--ink);
}

.fc-range-slider {
  display: block;
  width: 100%;
  /* 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;
  accent-color: var(--brand);
  cursor: pointer;
}

/* 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; }

.fc-ctl-note {
  margin: 5px 0 0;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #7c808a;
}

.fc-variant {
  padding: 6px 12px;
  border: 1.5px solid #e6e7ea;
  border-radius: 999px;
  background: #fff;
  font-family: Archivo, Inter, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #6b7078;
  cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}

/* 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(--brand); }

.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;
}

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

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

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

.fc-variant:hover { border-color: #cfd2d7; color: var(--ink); }

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

/* option pills — fixed choices for a token (FAQ icon, numbers on/off) */
.fc-ctl-opts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 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: 8px;
}

/* the label needs more air than the gap between two pills, or it reads as the
   first pill in the row */
.fc-ctl-opts .fc-ctl-label { margin-right: 7px; }

/* 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-ctl-opts { flex-wrap: nowrap; }

.fc-opt {
  padding: 6px 12px;
  border: 1.5px solid #e6e7ea;
  border-radius: 999px;
  background: #fff;
  font-family: Archivo, Inter, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #4c4f56;
  /* "Full color" broken across two lines reads as two pills */
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s;
}

.fc-opt:hover { border-color: #cfd2d7; color: var(--ink); }

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

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

.fc-toggle {
  position: relative;
  width: 46px;
  height: 26px;
  padding: 0;
  border: 1.5px solid #e6e7ea;
  border-radius: 999px;
  background: #eceef1;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

.fc-toggle.is-on { background: var(--brand); border-color: var(--brand); }

.fc-toggle-knob {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 17px;
  height: 17px;
  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(20px); }

/* note for controls that only affect the preview, not the copied code */
.fc-ctl-note {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #9aa0a8;
}

/* ---------------- 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;
  }

  .fc-nav-item::before {
    top: auto;
    bottom: 0;
    left: 12px;
    right: 12px;
    width: auto;
    height: 2px;
    transform: scaleX(0);
  }

  /* relocated to the end of the gallery by app.js — restyled for the light
     page background it now sits on (in the dark sidebar it keeps its own look) */
  .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; }
}

/* ---------------- 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 ----------------
   Not shown on the tiles: they are what the search reads and what the modal
   lists. On the card they competed with the title for a row already carrying
   the Customize pill. */

/* the modal's full list, where each one is a search waiting to happen */
.fc-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 4px;
}

.fc-tagchip {
  padding: 5px 10px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: #fff;
  font-family: Archivo, Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--muted-2);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.fc-tagchip:hover {
  border-color: var(--red);
  background: rgba(224, 27, 34, .06);
  color: var(--red);
}

/* ---------------- 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 */
  margin: 0 0 18px;
  padding: 0;
  background: none;
}

.fc-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  border: 1px solid var(--card-border);
  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(--muted-2); }

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

#fc-search::placeholder { color: var(--faint); 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 colour 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: #c2151c; }

/* 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 early-access framing, never a bare "Premium" */
.fc-tag.is-premium {
  background: #efe9fb;
  color: #5b3bb0;
}

.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 colour 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; }

/* the old chip is gone; this keeps the premium CATEGORY's own tag styled */
.fc-tag.is-premium {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f3eefe;
  color: #5b3bb0;
}

/* The premium line under the modal's title. Filled rather than coloured 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. */
.fc-modal-premium {
  display: inline-block;
  margin: 8px 0 0;
  padding: 4px 9px;
  border-radius: 5px;
  background: #ffc53d;
  font-family: Archivo, Inter, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  color: #1d1500;
}

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

.fc-modal-premium + .fc-modal-lead { margin-top: 8px; }

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

.fc-textin {
  flex: 1 1 auto;
  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; }

/* 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 {
  /* the Pill checkout step gradient, deep red into a warmer one */
  background: linear-gradient(120deg, #b3121c, #e0473c);
  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 6px;
  border-radius: 6px;
  /* a shade under the label beside it, never louder than the category name */
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .42);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.fc-nav-item:hover .fc-nav-count { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); }

.fc-nav-item.is-active .fc-nav-count { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .8); }

/* 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 */
  margin: 0 0 4px;
  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: 11px 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;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--red) 12%, #fff);
  color: var(--red);
  font-size: 22px;
  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; }

/* 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: 14px;
}

.fc-toprow .fc-search { flex: 1 1 auto; min-width: 0; }

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

.fc-acct-btn {
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.fc-acct-btn:hover { background: var(--red-hover, #c2151c); color: #fff; }

.fc-acct-link { color: var(--muted-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.fc-acct-link:hover { color: var(--ink); }

.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: var(--red);
  color: #fff;
  font-family: Archivo, Inter, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}

.fc-gate-btn:hover { background: var(--red-hover, #c2151c); color: #fff; }
.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; }